:root {
    --accent-gold: #fbbf24;
    --accent-gold-dim: rgba(251,191,36,0.35);
    --btn-hover: #d97706;
    --panel-bg: rgba(10,6,18,0.93);
    --text-main: #f8fafc;
    --border-dim: rgba(255,255,255,0.07);
    --purple-mid: #1e1038;
    --purple-dark: #0d0818;
    --bg-obsidian: #09090b;
    --timer-red: #ef4444;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    margin: 0; font-family: 'Segoe UI', Georgia, Tahoma, sans-serif;
    font-size: 16px; color: var(--text-main);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    min-height: 100vh; padding-top: 96px; padding-bottom: 40px; overflow-x: hidden;
    background: var(--bg-obsidian);
}

/* ===== COSMIC BACKGROUND ===== */
.stars-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -3;
    background: radial-gradient(circle at 50% 45%, #14151c 0%, #0c0d12 45%, var(--bg-obsidian) 100%);
    overflow: hidden;
}
/* Base star grid — checkerboard fill across whole background */
.star-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(white 1px, transparent 1.4px);
    background-size: 38px 38px; opacity: 0.16;
}
/* layer1 — offset half a cell => checkerboard pattern with layer2 */
.star-layer.layer1 { background-size: 38px 38px; background-position: 0 0; opacity: 0.22; }
.star-layer.layer2 { background-size: 38px 38px; background-position: 19px 19px; opacity: 0.13; }
.star-layer.layer3 { background-image: radial-gradient(rgba(255,235,180,0.9) 1px, transparent 1.4px); background-size: 95px 95px; background-position: 30px 12px; opacity: 0.18; }

/* Chaotic twinkling stars (JS-generated, random positions/delays) */
.twinkle-star {
    position: absolute; width: 2px; height: 2px; border-radius: 50%;
    background: #fff; opacity: 0.12; pointer-events: none;
    animation: twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle {
    0%, 100% { opacity: 0.1; transform: scale(1); box-shadow: 0 0 2px rgba(255,255,255,0.25); }
    50%       { opacity: 0.95; transform: scale(1.9); box-shadow: 0 0 9px rgba(255,255,255,0.9), 0 0 16px rgba(255,235,160,0.55); }
}
.spotlight {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 45%, rgba(255,235,160,0.04) 0%, transparent 65%);
    pointer-events: none; z-index: -2;
}
/* 3D mode adds warm floor glow */
body.view-3d .spotlight {
    background:
        radial-gradient(ellipse 80% 35% at 50% 5%, rgba(200,140,40,0.07) 0%, transparent 55%),
        radial-gradient(circle at 50% 45%, rgba(255,235,160,0.05) 0%, transparent 65%);
}

/* ===== ANIMATIONS ===== */
@keyframes logo-glow { 0%,100% { text-shadow:0 0 22px rgba(251,191,36,0.5),0 0 55px rgba(251,191,36,0.18); } 50% { text-shadow:0 0 40px rgba(251,191,36,0.85),0 0 80px rgba(251,191,36,0.3); } }
@keyframes joker-glow { 0% { box-shadow:0 0 15px #ef4444; border-color:#ef4444; background:#7f1d1d; } 50% { box-shadow:0 0 40px #fbbf24; border-color:#fbbf24; background:#1c0606; } 100% { box-shadow:0 0 15px #ef4444; border-color:#ef4444; background:#7f1d1d; } }
@keyframes pulse-speaker { 0% { box-shadow:0 0 10px var(--accent-gold); } 100% { box-shadow:0 0 28px var(--accent-gold); border-color:#fff; } }
@keyframes gold-ring-pulse { 0% { box-shadow:0 0 0 0 rgba(251,191,36,0.7),0 0 18px rgba(251,191,36,0.3); } 70% { box-shadow:0 0 0 14px rgba(251,191,36,0),0 0 28px rgba(251,191,36,0.15); } 100% { box-shadow:0 0 0 0 rgba(251,191,36,0),0 0 18px rgba(251,191,36,0.3); } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes flyAnimation { 0% { transform:scale(1); } 30% { transform:scale(1.6) translateY(-20px); } 100% { transform:translate(-45vw,-45vh) scale(0.2); opacity:0; } }
@keyframes yula-pulse {
    0%,100% { box-shadow:3px 3px 20px rgba(0,0,0,0.9),0 0 18px rgba(251,191,36,0.35),inset 0 2px 4px rgba(255,255,255,0.14); }
    50%      { box-shadow:3px 3px 28px rgba(0,0,0,0.9),0 0 40px rgba(251,191,36,0.8),inset 0 2px 4px rgba(255,255,255,0.22); }
}

/* ============================================
   LANGUAGE SWITCHER — bottom-right, opens UP
   ============================================ */
#lang-switcher-wrap { position: fixed; bottom: 14px; right: 14px; z-index: 300000; }
#lang-switcher-btn {
    display: flex; align-items: center; gap: 5px;
    background: rgba(10,6,18,0.95); border: 1px solid rgba(251,191,36,0.35);
    color: var(--accent-gold); border-radius: 10px;
    padding: 8px 12px; font-size: 13px; font-weight: 700;
    cursor: pointer; touch-action: manipulation;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    transition: border-color 0.2s, box-shadow 0.2s; white-space: nowrap;
}
#lang-switcher-btn:hover { border-color: var(--accent-gold); box-shadow: 0 0 14px rgba(251,191,36,0.3); }
.lang-arrow { font-size: 9px; transition: transform 0.2s; }
#lang-switcher-wrap.open .lang-arrow { transform: rotate(180deg); }
#lang-flag { font-size: 18px; line-height: 1; }
.lang-menu {
    display: none; position: absolute; bottom: calc(100% + 8px); right: 0;
    background: rgba(10,6,20,0.98); border: 1px solid rgba(251,191,36,0.25);
    border-radius: 10px; min-width: 165px;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.7);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    animation: fadeInUp 0.18s ease; overflow: hidden;
}
.lang-menu.visible { display: block; }
.lang-menu-inner {
    max-height: 280px; overflow-y: auto; padding: 4px 0;
    scrollbar-width: thin; scrollbar-color: var(--accent-gold-dim) transparent;
}
.lang-menu-inner::-webkit-scrollbar { width: 4px; }
.lang-menu-inner::-webkit-scrollbar-thumb { background: var(--accent-gold-dim); border-radius: 4px; }
.lang-option {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px;
    font-size: 14px; font-weight: 600; color: #cbd5e1; cursor: pointer;
    transition: background 0.15s, color 0.15s; border: none; background: none;
    width: 100%; text-align: left; font-family: inherit;
}
.lang-option:hover { background: rgba(251,191,36,0.1); color: var(--accent-gold); }
.lang-option.active { color: var(--accent-gold); font-weight: 800; }
.lang-opt-flag { font-size: 20px; flex-shrink: 0; }
.lang-opt-name { flex: 1; }
.lang-opt-check { font-size: 12px; color: var(--accent-gold); }

/* ============================================
   GAME HEADER — solid bg (no overlap with title)
   ============================================ */
#top-game-header {
    position: fixed; top: 0; left: 0; right: 0; height: 74px;
    background: linear-gradient(180deg, #0a0610 0%, #0a0610 88%, rgba(10,6,16,0) 100%);
    display: none; align-items: center; justify-content: center;
    padding: 0 8px; z-index: 200000;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(251,191,36,0.12);
    gap: 6px;
}
/* Responsive: 4 buttons share the row evenly, shrink to fit, never clip */
.hdr-btn-wrap, #btn-pause, #btn-view-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1 1 0; min-width: 0; max-width: 110px; height: 52px;
    border-radius: 10px; cursor: pointer; padding: 4px 2px;
    background: linear-gradient(145deg, rgba(30,16,56,0.95), rgba(15,8,28,0.95));
    border: 1px solid rgba(251,191,36,0.28);
    box-shadow: 0 2px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
    color: var(--accent-gold); font-size: 17px; font-weight: 700;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    touch-action: manipulation; font-family: inherit; overflow: hidden;
}
.hdr-btn-wrap small, #btn-pause small, #btn-view-toggle span {
    font-size: 9px; font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase;
    color: rgba(251,191,36,0.75); margin-top: 2px; display: block; line-height: 1.05;
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.secret-card-inner, .secret-face { width: 100%; }
.secret-front { font-size: 12px; }
.hdr-btn-wrap:hover, #btn-pause:hover, #btn-view-toggle:hover { border-color: var(--accent-gold); box-shadow: 0 2px 18px rgba(251,191,36,0.3); }
.hdr-btn-wrap:active, #btn-pause:active, #btn-view-toggle:active { transform: scale(0.94); }
#btn-pause.paused { background: linear-gradient(145deg, rgba(5,30,15,0.95), rgba(3,18,9,0.95)); border-color: rgba(34,197,94,0.4); color: #22c55e; }
#btn-pause.paused small { color: rgba(34,197,94,0.7); }
#btn-view-toggle.active-3d { background: linear-gradient(145deg, rgba(15,15,40,0.95), rgba(8,8,26,0.95)); border-color: rgba(147,197,253,0.4); color: #93c5fd; }
.secret-card-inner { position:relative; width:100%; height:100%; transition:transform 0.5s cubic-bezier(0.4,0,0.2,1); transform-style:preserve-3d; }
.secret-card-inner.revealed { transform:rotateY(180deg); }
.secret-face { position:absolute; width:100%; height:100%; -webkit-backface-visibility:hidden; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:10px; font-size:18px; color:var(--accent-gold); background:transparent; }
.secret-front { transform:rotateY(180deg); font-size:15px; font-weight:900; color:#fff; text-align:center; line-height:1.2; padding:2px; }

/* ============================================
   CONTAINERS / SCREENS
   ============================================ */
.container {
    background: var(--panel-bg);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    padding: 24px 22px; border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.85), 0 0 0 1px var(--border-dim);
    width: 95%; max-width: 560px; text-align: center;
    position: relative; animation: fadeInUp 0.35s ease; margin-top: 8px;
}
.container::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent-gold),transparent); border-radius:14px 14px 0 0; }
.screen { display: none; }
.screen.active { display: block; }
h1 { color: var(--accent-gold); margin-bottom: 6px; font-size: 28px; letter-spacing: 0.5px; }
h2 { color: #94a3b8; font-size: 18px; margin-top: 0; margin-bottom: 16px; }

/* LOGO */
.logo-brand { text-align:center; margin-bottom:18px; padding:14px 18px; border:1px solid rgba(251,191,36,0.2); border-radius:6px; background:linear-gradient(135deg,rgba(251,191,36,0.03),rgba(251,191,36,0.08),rgba(251,191,36,0.03)); position:relative; }
.logo-brand::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent-gold),transparent); }
.logo-brand-genesis { font-family:Georgia,serif; font-size:10px; letter-spacing:7px; color:rgba(251,191,36,0.55); text-transform:uppercase; }
.logo-brand-solar { font-family:Georgia,serif; font-size:24px; letter-spacing:5px; color:var(--accent-gold); font-weight:700; text-transform:uppercase; animation:logo-glow 3.5s ease-in-out infinite; line-height:1.25; }
.logo-brand-life { font-family:Georgia,serif; font-size:10px; letter-spacing:9px; color:rgba(251,191,36,0.45); text-transform:uppercase; }

/* INPUTS */
input[type="text"], input[type="tel"], input[type="number"], input[type="password"], select, textarea {
    width:100%; padding:11px 13px; margin:6px 0; border-radius:8px;
    border:1px solid #334155; background:rgba(12,8,22,0.85); color:var(--text-main);
    font-size:15px; touch-action:manipulation; font-family:inherit;
    transition:border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent-gold); box-shadow:0 0 0 3px rgba(251,191,36,0.12); }
input.filled, textarea.filled { border-color:rgba(251,191,36,0.5); box-shadow:0 0 8px rgba(251,191,36,0.18); }
.input-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0; color:#fff; }
.input-row input[type="radio"], .input-row input[type="checkbox"] { width:22px; height:22px; cursor:pointer; accent-color:var(--accent-gold); flex-shrink:0; }

/* BUTTONS */
.btn { background:linear-gradient(135deg,#c69b1f,var(--accent-gold),#c69b1f); background-size:200% auto; color:#080510; border:none; padding:13px 18px; font-size:15px; font-weight:800; border-radius:10px; cursor:pointer; width:100%; margin-top:10px; transition:background-position 0.4s,transform 0.15s,box-shadow 0.2s; touch-action:manipulation; letter-spacing:0.5px; box-shadow:0 4px 14px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.15); text-transform:uppercase; font-family:inherit; }
.btn:hover { background-position:right center; color:#fff; box-shadow:0 4px 20px rgba(251,191,36,0.3); }
.btn:active { transform:scale(0.97); }
.btn-green { background:linear-gradient(135deg,#15803d,#22c55e); color:#fff; box-shadow:0 4px 14px rgba(22,163,74,0.35); }
.btn-green:hover { color:#fff; box-shadow:0 4px 20px rgba(22,163,74,0.5); }
.btn-dim { background:linear-gradient(135deg,#1e293b,#334155); color:#94a3b8; }
.btn-dim:hover { color:#fff; }

/* ADMIN */
.admin-section { background:rgba(10,6,20,0.65); border:1px solid var(--border-dim); border-radius:10px; padding:13px; margin-bottom:10px; text-align:left; }
.admin-section-label { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--accent-gold); margin-bottom:10px; }
.cloth-picker { display:flex; gap:6px; flex-wrap:wrap; }
.cloth-btn { flex:1; min-width:66px; padding:9px 5px; border:1px solid #334155; border-radius:8px; background:rgba(12,8,22,0.85); color:#94a3b8; font-size:11px; font-weight:700; cursor:pointer; transition:0.2s; display:flex; flex-direction:column; align-items:center; gap:4px; font-family:inherit; }
.cloth-btn.active { border-color:var(--accent-gold); color:#08050c; background:linear-gradient(135deg,#fbbf24,#d97706); box-shadow:0 0 14px rgba(251,191,36,0.55); transform:scale(1.05); font-weight:800; }
.cloth-btn.active .cloth-swatch { border-color:#fff; box-shadow:0 0 6px rgba(255,255,255,0.6); }
.cloth-swatch { width:28px; height:16px; border-radius:4px; border:1px solid rgba(255,255,255,0.1); }
.swatch-blue { background:radial-gradient(circle,#1e3a8a,#0c1a4a); }
.swatch-green { background:radial-gradient(circle,#064e3b,#022c1e); }
.swatch-red { background:radial-gradient(circle,#881337,#3f0d1a); }
.swatch-dark { background:radial-gradient(circle,#1f2937,#09090b); }
.table-picker, .view-picker, .joker-picker { display:flex; gap:8px; }
.table-btn { flex:1; padding:11px 8px; border:1px solid #334155; border-radius:8px; background:rgba(12,8,22,0.85); color:#cbd5e1; font-size:13px; font-weight:800; cursor:pointer; transition:0.2s; font-family:inherit; letter-spacing:0.3px; }
.table-btn.active { border-color:var(--accent-gold); color:#08050c; background:linear-gradient(135deg,#fbbf24,#d97706); box-shadow:0 0 14px rgba(251,191,36,0.5); }
.view-btn, .joker-btn { flex:1; padding:9px; border:1px solid #334155; border-radius:8px; background:rgba(12,8,22,0.85); color:#94a3b8; font-size:12px; font-weight:700; cursor:pointer; transition:0.2s; font-family:inherit; }
.view-btn.active, .joker-btn.active { border-color:var(--accent-gold); color:#08050c; background:linear-gradient(135deg,#fbbf24,#d97706); box-shadow:0 0 14px rgba(251,191,36,0.5); font-weight:800; }

/* PAYMENT */
.payment-box { background:rgba(10,6,22,0.85); border:1px solid #475569; padding:18px; border-radius:10px; margin:12px 0; text-align:left; }
.pay-balance { color:#22c55e; font-size:17px; font-weight:bold; margin:0 0 8px 0; }
.pay-old { text-decoration:line-through; color:#94a3b8; font-size:15px; margin:0 0 4px 0; }
.pay-promo { color:#fbbf24; font-size:22px; font-weight:bold; margin:0 0 4px 0; }
.pay-hr { border:none; border-top:1px solid #334155; margin:10px 0; }
.pay-rest { color:#cbd5e1; font-size:15px; margin:0; }

/* CARDS */
.cards-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:18px 0; }
.card { position:relative; width:62px; height:90px; cursor:pointer; perspective:1000px; touch-action:manipulation; }
.card.taken { opacity:0; transform:scale(0.3); pointer-events:none; transition:0.35s; }
.card-inner { position:relative; width:100%; height:100%; transition:transform 1.8s cubic-bezier(0.4,0,0.2,1); transform-style:preserve-3d; }
.card.facedown .card-inner { transform:rotateY(180deg); }
.card-face { position:absolute; width:100%; height:100%; -webkit-backface-visibility:hidden; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:8px; font-size:11px; font-weight:bold; border:1px solid #475569; }
.card-role { background:linear-gradient(135deg,#1e1030,#120820); color:#fff; gap:3px; }
.card-role span { font-size:24px; }
.card-cover { background:#0d0818 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none" stroke="%23fbbf24" stroke-width="1.5"><circle cx="50" cy="50" r="16"/><circle cx="50" cy="34" r="16"/><circle cx="50" cy="66" r="16"/><circle cx="36.14" cy="42" r="16"/><circle cx="63.86" cy="42" r="16"/><circle cx="36.14" cy="58" r="16"/><circle cx="63.86" cy="58" r="16"/><circle cx="50" cy="50" r="32" stroke-width="2"/></svg>') no-repeat center 88% / 88%; border-color:var(--accent-gold); transform:rotateY(180deg); }
.card.fly-to-header { position:fixed; z-index:10000; animation:flyAnimation 2s forwards cubic-bezier(0.25,1,0.5,1); }

/* ============================================
   GAME TABLE — labels OUTSIDE, more top margin
   ============================================ */
.table-circle {
    position:relative; z-index:5;
    height: min(76vh, 660px); width:auto; aspect-ratio:3 / 4; max-width:94vw;
    margin:16px auto 24px auto;
    box-sizing:border-box; overflow:visible;
    filter:drop-shadow(0 14px 40px rgba(0,0,0,0.85));
}
.table-circle .tbl-svg { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible; }
body.table-neon .table-circle .tbl-led { animation:led-pulse 3.2s ease-in-out infinite; transform-origin:center; }
@keyframes led-pulse { 0%,100%{opacity:0.75;} 50%{opacity:1;} }

/* Table rim/felt/text now drawn by the SVG in table.js (no CSS border boxes) */
body.view-3d .table-circle { transform:perspective(1100px) rotateX(45deg) scale(0.92); transform-origin:center 60%; }
body.view-3d .outer-player-label { transform:translate(-50%,-50%) rotateX(-45deg) scale(1.06); }

/* YULA — now the SPIN BUTTON (pulsing, clickable) */
.yula {
    position:absolute; top:50%; left:50%; width:52px; height:52px; z-index:30;
    border-radius:50%; transform:translate(-50%,-50%);
    background:
        radial-gradient(circle at 36% 26%, #fffdf0 0%, #ffe88a 18%, #FFD700 42%, #c79a1e 72%, #6e500a 100%);
    border:2px solid #fff3c4;
    box-shadow:0 10px 22px rgba(0,0,0,0.9), 0 0 22px rgba(255,205,40,0.6),
        inset 0 3px 7px rgba(255,255,255,0.9), inset 0 -6px 11px rgba(110,80,10,0.85), inset 0 0 0 1px rgba(255,255,255,0.25);
    will-change:transform; transition:transform 0.4s ease, box-shadow 0.4s ease;
}
/* bright specular highlight (polished chrome-gold) */
.yula::before { content:''; position:absolute; top:14%; left:22%; width:38%; height:26%; border-radius:50%;
    background:radial-gradient(circle at 40% 40%, rgba(255,255,255,0.95), rgba(255,255,255,0) 72%); pointer-events:none; }
.yula-core { position:absolute; top:50%; left:50%; width:42%; height:42%; transform:translate(-50%,-50%); border-radius:50%;
    background:radial-gradient(circle at 38% 34%, #fff7d0, #FFD700 55%, #8a6a14 100%);
    box-shadow:inset 0 1px 2px rgba(255,255,255,0.8), inset 0 -2px 4px rgba(90,65,8,0.8), 0 1px 3px rgba(0,0,0,0.5); }
.yula-clickable { cursor:pointer; animation:yula-pulse 1.4s ease-in-out infinite; }
/* gold 3D arrow / pointer of the spinning-top */
.yula-arrow { position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:0; height:0; z-index:31;
    border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:18px solid #FFD700;
    filter:drop-shadow(0 0 5px rgba(255,205,40,0.9)) drop-shadow(0 2px 1px rgba(110,80,10,0.8)); }

/* CENTER TIMER — elite poker style countdown in the middle of the table */
.center-timer {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:132px; height:132px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:44px; font-weight:900; color:var(--timer-red); z-index:28;
    background:radial-gradient(circle at 40% 34%, var(--cloth-lite,#243), var(--cloth-base,#05143C) 70%, #000 100%);
    border:3px solid #C9A34E;
    box-shadow:0 0 0 2px rgba(255,228,181,0.6), 0 8px 26px rgba(0,0,0,0.85), inset 0 0 24px rgba(0,0,0,0.55), 0 0 16px rgba(201,163,78,0.35);
    text-shadow:0 0 14px rgba(239,68,68,0.65); font-variant-numeric:tabular-nums; pointer-events:none;
    transition:background 0.4s ease;
}
/* Skip-night center button */
.center-skip-btn {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:96px; height:96px; border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-size:13px; font-weight:800; color:#fff; z-index:32; cursor:pointer;
    background:radial-gradient(circle, #4c1d95, #2e1065); border:3px solid var(--accent-gold);
    box-shadow:0 0 25px rgba(251,191,36,0.4), inset 0 0 18px rgba(0,0,0,0.5);
    text-align:center; line-height:1.15; text-transform:uppercase; letter-spacing:0.5px;
    animation:yula-pulse 1.5s ease-in-out infinite; font-family:inherit;
}
.center-skip-btn:active { transform:translate(-50%,-50%) scale(0.93); }

/* TABLE ELEMENTS */
.question-env, .golden-sage, .player-score-circle, .speaker-node { position:absolute; transform:translate(-50%,-50%); touch-action:manipulation; }
.question-env { width:60px; height:42px; background:linear-gradient(155deg,#fdfdfb 0%,#efece4 55%,#dcd7ca 100%); border:1px solid #cbb98a; color:#1a1a1a; border-radius:4px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:13px; font-weight:bold; box-shadow:0 3px 8px rgba(0,0,0,0.55), inset 0 1px 1px rgba(255,255,255,0.85), inset 0 -2px 3px rgba(0,0,0,0.08); cursor:pointer; z-index:8; }
.envelope-flap { position:absolute; top:0; left:0; width:0; height:0; border-left:29px solid transparent; border-right:29px solid transparent; border-top:16px solid #d8d8d8; opacity:0.9; pointer-events:none; }
.envelope-text { width:100%; text-align:center; line-height:1.2; padding-top:9px; font-size:13px; color:#2a2a2a; }
.question-env.opened { transform:translate(-50%,-50%) scale(2.4) !important; opacity:0; background:var(--accent-gold); transition:all 0.5s ease; z-index:100; }
.golden-sage { width:26px; height:26px; background:radial-gradient(circle,#fde68a,#f57f17); border:2px solid rgba(255,255,255,0.8); border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:14px; box-shadow:0 0 12px #fbbf24; z-index:5; }

/* PLAYER CIRCLES */
.player-score-circle { width:33px; height:33px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:12px; text-align:center; box-sizing:border-box; font-weight:bold; z-index:10; }
.player-score-circle.plus-one { background:#166534; border:2px solid #22c55e; color:#fff; }
.player-score-circle.zero-points { background:var(--purple-mid); border:2px solid #3b2f60; color:#a78bfa; }
.inactive-node { background:rgba(10,6,20,0.8) !important; border:1px dashed #4b5563 !important; color:#6b7280 !important; cursor:default !important; box-shadow:none !important; pointer-events:none !important; transform:translate(-50%,-50%) !important; filter:grayscale(80%); opacity:0.75; z-index:5; width:31px !important; height:31px !important; font-size:9px !important; }

/* OUTER NAME LABELS — font +2 (13px desktop) */
.outer-player-label { position:absolute; transform:translate(-50%,-50%); white-space:nowrap; font-size:13px; color:#e2e8f0; pointer-events:none; z-index:40; text-shadow:0 1px 6px #000, 0 0 14px rgba(0,0,0,0.95); text-align:center; line-height:1.2; background:rgba(5,3,12,0.7); padding:2px 7px; border-radius:5px; font-weight:600; }
.outer-player-label.elim { color:#4b5563; text-decoration:line-through; }
.outer-player-label.active-spkr { color:var(--accent-gold); font-weight:800; font-size:14px; }

/* VOTE BUTTONS */
.vote-dot-btn { cursor:pointer; z-index:12 !important; border:2px solid rgba(251,191,36,0.38) !important; transition:background 0.18s,border-color 0.18s,transform 0.18s !important; }
.vote-dot-btn:hover, .vote-dot-btn:active { background:#7c3aed !important; border-color:var(--accent-gold) !important; transform:translate(-50%,-50%) scale(1.16) !important; box-shadow:0 0 20px rgba(251,191,36,0.5) !important; z-index:15 !important; }
.vote-dot-btn.selected-vote { background:var(--accent-gold) !important; color:#08050c !important; border-color:#fff !important; animation:gold-ring-pulse 1.2s ease-out 1; }
.vote-dot-btn.vote-was-elim { opacity:0.82; border-style:dashed !important; border-color:rgba(148,163,184,0.6) !important; filter:grayscale(35%); }
.vote-dot-btn.vote-was-elim:hover, .vote-dot-btn.vote-was-elim:active { filter:none; opacity:1; border-color:var(--accent-gold) !important; }
.tb-flex-container { display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; margin:14px 0; }
.tb-vote-btn { position:relative !important; left:auto !important; top:auto !important; transform:none !important; width:86px !important; height:86px !important; font-size:12px !important; cursor:pointer; border-radius:50% !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; background:var(--purple-mid) !important; border:2px solid rgba(251,191,36,0.32) !important; color:#fff !important; font-weight:bold !important; box-shadow:0 4px 12px rgba(0,0,0,0.5) !important; transition:background 0.18s,border-color 0.18s,transform 0.18s,box-shadow 0.18s !important; font-family:inherit !important; }
.tb-vote-btn:hover, .tb-vote-btn:active { transform:scale(1.1) !important; background:#7c3aed !important; border-color:var(--accent-gold) !important; box-shadow:0 0 20px rgba(251,191,36,0.4) !important; }
.tb-vote-btn.selected { background:var(--accent-gold) !important; color:#08050c !important; border-color:#fff !important; transform:scale(1.05) !important; }

/* SPEAKER NODES */
.speaker-node { width:34px; height:34px; border-radius:50%; background:var(--purple-mid); border:2px solid #4b5563; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:bold; color:#fff; z-index:10; transition:all 0.35s ease; }
.speaker-node.active { width:50px; height:50px; border-color:var(--accent-gold); background:#7c2d12; font-size:16px; z-index:12; animation:pulse-speaker 0.85s infinite alternate; }
.speaker-node.inactive-node { width:28px !important; height:28px !important; font-size:9px !important; }

.correct-voter-glow { border:3px solid var(--accent-gold) !important; background:rgba(120,60,9,0.4) !important; box-shadow:0 0 22px rgba(251,191,36,0.75), 0 0 45px rgba(251,191,36,0.25) !important; animation:gold-ring-pulse 1.5s ease-out infinite !important; color:var(--accent-gold) !important; }
.night-node { background:radial-gradient(circle at 38% 30%, #26262b, #0e0e12 75%, #000 120%); border:2px solid #3a3a42; color:#cbd5e1; box-shadow:0 4px 12px rgba(0,0,0,0.6); }
.blinking-joker { animation:joker-glow 1.15s infinite alternate; border:3px solid #ef4444 !important; cursor:pointer !important; z-index:999 !important; }
.sage-revealed { border:3px solid #2563eb !important; box-shadow:0 0 22px rgba(37,99,235,0.8) !important; background:#1e1b4b !important; }
.author-highlight { border:3px solid #22c55e !important; box-shadow:0 0 22px rgba(34,197,94,0.8) !important; }
.text-success { color:#22c55e !important; text-shadow:0 0 10px #22c55e; }
.text-danger { color:#ef4444 !important; text-shadow:0 0 10px #ef4444; }

/* ANSWERS */
.answer-btn { background:rgba(10,6,22,0.88); color:#fff; border:1px solid #3b2f60; padding:12px 13px; margin:6px 0; width:100%; border-radius:8px; cursor:pointer; text-align:left; font-size:15px; transition:0.18s; touch-action:manipulation; font-family:inherit; }
.answer-btn:hover { background:#1e1038; border-color:#7c3aed; }
.answer-btn.selected { background:#4c1d95; border-color:#7c3aed; }
.correct-glow { background:#166534 !important; color:#fff !important; font-weight:bold; border-color:#22c55e !important; box-shadow:0 0 12px #22c55e; }
.wrong-glow { background:#7f1d1d !important; color:#fff !important; border-color:#ef4444 !important; }

/* TIMER — RED (not pink) */
.big-timer { font-size:48px; color:var(--timer-red); font-weight:900; margin:10px 0; text-shadow:0 0 14px rgba(239,68,68,0.45); font-variant-numeric:tabular-nums; }

/* NIGHT OVERLAY — full size table */
#night-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(5,3,12,0.97); z-index:100000; display:none; flex-direction:column; align-items:center; justify-content:flex-start; padding:16px; overflow-y:auto; }
#night-content { width:100%; max-width:520px; margin:0 auto; text-align:center; }
/* Night table FULL SIZE (no shrink) */

/* GONG explanation */
.gong-explanation-box { margin-top:12px; padding:12px 14px; background:rgba(251,191,36,0.06); border:1px solid rgba(251,191,36,0.22); border-left:3px solid var(--accent-gold); border-radius:8px; font-size:14px; color:#fbbf24; text-align:left; line-height:1.6; font-style:italic; }
.gong-explanation-label { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(251,191,36,0.6); margin-bottom:4px; font-style:normal; font-weight:bold; }

/* FINAL TABLE */
.final-table { width:100%; border-collapse:collapse; margin-top:8px; background:rgba(8,5,18,0.65); border-radius:8px; overflow:hidden; border:1px solid rgba(251,191,36,0.18); }
.final-table th { background:var(--purple-dark); color:var(--accent-gold); padding:9px 7px; font-size:12px; border-bottom:1px solid rgba(251,191,36,0.28); }
.final-table td { padding:9px 7px; font-size:13px; color:#f8fafc; border-bottom:1px solid rgba(255,255,255,0.04); }
.row-winner { background:linear-gradient(90deg,rgba(120,53,9,0.38),transparent) !important; font-weight:bold; border-left:3px solid var(--accent-gold); }
.row-user { color:var(--accent-gold) !important; font-weight:bold; }
.row-correct-voter td { color:var(--accent-gold) !important; }
.row-wrong-voter td { color:#6b7280 !important; }

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 480px) {
    body { padding-top: 88px; font-size: 14px; }
    .container { padding: 13px; width: 98%; }
    h1 { font-size: 22px; } h2 { font-size: 16px; }
    #top-game-header { height: 68px; padding: 0 5px; gap: 4px; }
    .hdr-btn-wrap, #btn-pause, #btn-view-toggle { height: 48px; border-radius: 8px; font-size: 16px; padding: 3px 1px; max-width: none; }
    .hdr-btn-wrap small, #btn-pause small, #btn-view-toggle span { font-size: 8px; letter-spacing: 0; }
    .table-circle { width: min(88vw, 360px) !important; height:auto !important; aspect-ratio:3 / 4 !important; max-width:none !important; margin: 14px auto 26px auto !important; }
    body.view-3d .table-circle { transform: perspective(820px) rotateX(30deg) scale(0.92); }
    .player-score-circle { width: 25px !important; height: 25px !important; font-size: 9px !important; }
    .player-score-circle.inactive-node { width: 25px !important; height: 25px !important; }
    .inactive-node { width: 48px !important; height: 48px !important; }
    .outer-player-label { font-size: 10px; padding: 1px 4px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .outer-player-label.active-spkr { font-size: 12px; }
    .question-env { width: 48px; height: 34px; font-size: 11px; }
    .envelope-flap { border-left: 22px solid transparent; border-right: 22px solid transparent; border-top: 13px solid var(--accent-gold); }
    .big-timer { font-size: 40px; }
    .center-timer { width: 102px; height: 102px; font-size: 34px; }
    .center-skip-btn { width: 84px; height: 84px; font-size: 11px; }
    .yula { width: 46px; height: 46px; font-size: 8px; }
    .logo-brand-solar { font-size: 20px; letter-spacing: 3px; }
    .tb-vote-btn { width: 70px !important; height: 70px !important; font-size: 11px !important; }
    #lang-switcher-btn { font-size: 12px; padding: 7px 10px; }
    #lang-flag { font-size: 15px; }
    #screen-game.container, #screen-round2-discuss.container, #screen-round3-discuss.container, #screen-tiebreaker.container { padding: 6px; max-width: 100%; }
    #display-question { font-size: 15px; padding: 10px; }
    /* extra room below table so bottom labels (players 5-6) are never covered */
    #game-phase-spin, #r1-speaking-phase, #r2-phase-speaking, #r3-phase-speaking, #tb-phase-speaking, #r2-phase-vote-action, #r3-phase-vote-action, #tb-phase-vote { margin-top: 6px; }

}


/* ============================================
   GAME PHASES FLOAT ON COSMIC BACKGROUND
   (no square panel box — table sits on stars)
   ============================================ */
#screen-game.container,
#screen-round2-discuss.container,
#screen-round3-discuss.container,
#screen-tiebreaker.container {
    background: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none; border: none;
    max-width: 640px;
}
#screen-game.container::before,
#screen-round2-discuss.container::before,
#screen-round3-discuss.container::before,
#screen-tiebreaker.container::before { display: none; }

/* Readability on stars: titles + status get glow/shadow */
#screen-game h2, #screen-round2-discuss h2, #screen-round3-discuss h2, #screen-tiebreaker h2,
#screen-game h3, #screen-round2-discuss h3, #screen-round3-discuss h3, #screen-tiebreaker h3,
#screen-game h4, #screen-round2-discuss h4, #screen-round3-discuss h4, #screen-tiebreaker h4,
#game-status, #r2-status-text, #r3-status-text, #tb-status-text, #tb-subtitle, #spin-hint {
    text-shadow: 0 2px 8px #000, 0 0 16px rgba(0,0,0,0.9);
}
/* Answer buttons + early-answer keep their own bg, add stronger shadow to pop on stars */
#screen-game .answer-btn { box-shadow: 0 4px 18px rgba(0,0,0,0.7); }
#screen-game .btn, #screen-round2-discuss .btn, #screen-round3-discuss .btn, #screen-tiebreaker .btn {
    box-shadow: 0 4px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.15);
}
/* The question text gets a subtle dark plate for readability */
#display-question {
    background: rgba(8,5,16,0.72); border-radius: 10px; padding: 12px 14px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    border: 1px solid rgba(251,191,36,0.15);
}

/* NIGHT OVERLAY — let stars twinkle through (semi-transparent, not solid) */
#night-overlay {
    background: radial-gradient(ellipse at 50% 40%, rgba(8,5,18,0.86) 0%, rgba(3,2,8,0.94) 100%);
    padding-top: 92px; /* clear the fixed header so its buttons don't cover the title */
}
#night-title { max-width: 92%; }
#night-skip-btn { display: inline-block !important; }


/* ============================================
   TOUCH DEVICES — neutralize sticky :hover
   (on phones a tapped button keeps its :hover look,
    making selections appear "stuck"/unchanged)
   ============================================ */
@media (hover: none) {
    .btn:hover { background-position: left center; color: #080510; }
    .btn-green:hover { color: #fff; }
    .btn-dim:hover { color: #94a3b8; }
    .answer-btn:hover { background: rgba(10,6,22,0.88); border-color: #3b2f60; }
    .cloth-btn:hover, .view-btn:hover, .joker-btn:hover, .table-btn:hover { border-color: #334155; }
    .table-btn.active:hover { border-color: var(--accent-gold); }
    .cloth-btn.active:hover { border-color: var(--accent-gold); }
    .view-btn.active:hover, .joker-btn.active:hover { border-color: var(--accent-gold); }
    .hdr-btn-wrap:hover, #btn-pause:hover, #btn-view-toggle:hover { border-color: rgba(251,191,36,0.28); box-shadow: 0 2px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07); }
    #lang-switcher-btn:hover { border-color: rgba(251,191,36,0.35); box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
    .lang-option:hover { background: none; color: #cbd5e1; }
    .lang-option.active:hover { color: var(--accent-gold); }
    .vote-dot-btn:hover { background: var(--purple-mid) !important; transform: translate(-50%,-50%) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.65) !important; }
    .vote-dot-btn.selected-vote { background: var(--accent-gold) !important; }
    .tb-vote-btn:hover { transform: none !important; background: var(--purple-mid) !important; }
    .tb-vote-btn.selected { background: var(--accent-gold) !important; }
}


/* GSL gold-foil logo on the felt (2D table) — placed below the yula centre */
.felt-logo {
    position:absolute; left:50%; top:80%; transform:translate(-50%,-50%);
    font-family:Georgia,'Times New Roman',serif; font-weight:800;
    font-size:13px; letter-spacing:2px; white-space:nowrap; pointer-events:none;
    z-index:6; text-align:center; line-height:1.2;
    background:linear-gradient(180deg,#f7e7a6,#c9a227 55%,#8a6a14);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:#c9a227;
    text-shadow:0 1px 2px rgba(0,0,0,0.35);
    opacity:0.92;
}
body.table-neon .felt-logo { filter:drop-shadow(0 0 6px rgba(255,180,55,0.4)); }
@media (max-width:480px){ .felt-logo { font-size:9px; letter-spacing:1px; top:82%; } }


/* small white envelopes around the Yula in the top zone */
.question-env.env-mini { width:24px; height:17px; font-size:9px; border-radius:3px; }
.question-env.env-mini .envelope-flap { border-left:11px solid transparent; border-right:11px solid transparent; border-top:7px solid #d8d8d8; }
.question-env.env-mini .envelope-text { padding-top:3px; font-size:9px; }
.question-env.env-mini.opened { transform:translate(-50%,-50%) scale(1.25) !important; box-shadow:0 0 14px rgba(255,215,0,0.8) !important; z-index:35; }


/* ===== cloth-driven colours (centre timer field + player buttons) ===== */
body.cloth-blue  { --cloth-base:#05143C; --cloth-lite:#1b3a78; }
body.cloth-green { --cloth-base:#003C14; --cloth-lite:#0a6b32; }
body.cloth-red   { --cloth-base:#640505; --cloth-lite:#a52222; }
body.cloth-dark  { --cloth-base:#0A0A0A; --cloth-lite:#3a3a3a; }

/* player circles look like premium buttons in the felt colour */
.player-score-circle.zero-points {
    background:radial-gradient(circle at 38% 30%, var(--cloth-lite,#2a2150), var(--cloth-base,#1a1340) 78%, #000 120%) !important;
    border:2px solid #C9A34E !important; color:#fff !important;
    box-shadow:0 0 0 1px rgba(255,240,192,0.45), 0 4px 9px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.22), inset 0 -3px 6px rgba(0,0,0,0.6) !important;
    transition:transform 0.35s ease, box-shadow 0.35s ease, background 0.4s ease;
}
.speaker-node {
    background:radial-gradient(circle at 38% 30%, var(--cloth-lite,#2a2150), var(--cloth-base,#1a1340) 75%, #000 120%);
    border:2px solid rgba(201,163,78,0.8); color:#fff;
    box-shadow:0 5px 12px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.16);
    transition:transform 0.35s ease, box-shadow 0.35s ease;
}
/* glow ONLY on active elements */
.speaker-node.active {
    border-color:var(--accent-gold);
    box-shadow:0 0 22px rgba(251,191,36,0.85), 0 6px 14px rgba(0,0,0,0.6);
    transform:translate(-50%,-50%) scale(1.12);
}
.vote-dot-btn { transition:transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
.question-env, .golden-sage { transition:transform 0.4s ease, opacity 0.45s ease, box-shadow 0.4s ease; }


/* red felt: gold countdown digits */
body.cloth-red .center-timer { color:#FFD700; text-shadow:0 0 16px rgba(255,215,0,0.7), 0 2px 3px rgba(0,0,0,0.7); }
body.cloth-red .center-timer { border-color:#FFE4B5; box-shadow:0 0 0 2px rgba(255,215,0,0.7), 0 8px 26px rgba(0,0,0,0.85), inset 0 0 24px rgba(0,0,0,0.5), 0 0 20px rgba(255,205,40,0.4); }


/* keep system round/status text from overlapping the top player name */
#screen-game .table-circle, #screen-round2-discuss .table-circle,
#screen-round3-discuss .table-circle, #screen-tiebreaker .table-circle { margin-top:56px; }
#game-round-title, #game-status, #r2-title-text, #r3-title-text, #tb-title-text { position:relative; z-index:80; }
#game-status { margin-bottom:6px; }
@media (max-width:480px){
  #screen-game .table-circle, #screen-round2-discuss .table-circle,
  #screen-round3-discuss .table-circle, #screen-tiebreaker .table-circle { margin-top:34px !important; }
}


/* ===== player name fonts by table style ===== */
body.table-classic .outer-player-label {
    font-family:'Segoe UI','Helvetica Neue',system-ui,Arial,sans-serif; font-weight:600; letter-spacing:0.4px;
}
body.table-neon .outer-player-label {
    font-family:'Segoe UI','Helvetica Neue',system-ui,Arial,sans-serif; font-weight:300; letter-spacing:1.6px;
}

/* (casino-chip dashed edge removed per request) */


/* clean premium readable name font everywhere (overrides older serif) */
.outer-player-label { font-family:'Segoe UI','Helvetica Neue',system-ui,Arial,sans-serif; }

/* 4) yula CENTER pulse + hint pulses in yula-gold */
@keyframes core-pulse {
    0%,100% { box-shadow:inset 0 1px 2px rgba(255,255,255,.8), inset 0 -2px 4px rgba(90,65,8,.8), 0 0 6px rgba(255,205,40,.5); }
    50%     { box-shadow:inset 0 1px 2px rgba(255,255,255,.95), inset 0 -2px 4px rgba(90,65,8,.8), 0 0 18px rgba(255,205,40,1); }
}
.yula-clickable .yula-core { animation:core-pulse 1.3s ease-in-out infinite; }
@keyframes hint-pulse {
    0%,100% { color:#FFCF6A; text-shadow:0 0 8px rgba(255,205,40,.4), 0 2px 6px #000; opacity:.82; }
    50%     { color:#FFEBB0; text-shadow:0 0 20px rgba(255,205,40,.95), 0 2px 6px #000; opacity:1; }
}
#spin-hint { animation:hint-pulse 1.3s ease-in-out infinite; font-weight:600; }

/* ===== floating MUSIC toggle — shown ONLY during the Night, styled to match the lang switcher family ===== */
#music-btn {
    position: fixed; bottom: 14px; left: 14px; z-index: 300001;
    border-radius: 10px;
    display: none; align-items: center; justify-content: center;
    padding: 8px 11px; font-size: 18px; line-height: 1; cursor: pointer; touch-action: manipulation;
    background: linear-gradient(145deg, rgba(30,16,56,0.95), rgba(15,8,28,0.95));
    border: 1px solid rgba(251,191,36,0.28);
    color: var(--accent-gold);
    box-shadow: 0 2px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
/* only visible while the Night overlay is up */
#music-btn.night-visible { display: flex; animation: fadeInUp 0.25s ease; }
/* RED while a song is actually playing (clear "it's on, tap to stop" signal) */
#music-btn.playing {
    background: linear-gradient(180deg, #e0443a, #a4170e);
    border-color: #ff9183;
    color: #fff;
    box-shadow: 0 0 16px rgba(224,68,58,0.75), 0 2px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}
#music-btn.off { opacity: 0.6; filter: grayscale(60%); }
#music-btn:hover { border-color: var(--accent-gold); box-shadow: 0 2px 18px rgba(251,191,36,0.3); }
#music-btn:active { transform: scale(0.88); }
@media (max-width:480px){ #music-btn { padding: 7px 10px; font-size: 16px; bottom: 12px; left: 12px; } }

/* referral code prefilled from an invite link */
#reg-ref.ref-locked { border-color: rgba(251,191,36,0.7); color: var(--accent-gold); background: rgba(251,191,36,0.06); cursor: not-allowed; }

/* ============================================================
   LUXURY TABLES — admin menu + in-game 3D background
   ============================================================ */
.lux-head{ font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
    color:#f3c969; margin:14px 0 8px; display:flex; align-items:center; gap:6px; }
.lux-row{ margin-bottom:0; }
.lux-btn{ background:linear-gradient(135deg, rgba(40,28,8,0.9), rgba(20,14,6,0.95));
    border-color:#6b531f; color:#f4dca0; position:relative; }
.lux-btn:not([disabled]):not(.locked){ border-color:#caa24e;
    box-shadow:0 0 12px rgba(201,162,78,0.25), inset 0 0 10px rgba(201,162,78,0.08); }
.lux-btn.active{ border-color:var(--accent-gold); color:#08050c;
    background:linear-gradient(135deg,#fde68a,#d4a431); box-shadow:0 0 16px rgba(251,191,36,0.6); }
.lux-btn[disabled], .lux-btn.locked{ opacity:0.5; cursor:not-allowed; filter:grayscale(0.5);
    color:#8a7a55; border-color:#3a3322; box-shadow:none; background:rgba(20,16,10,0.85); }
.lux-lock{ font-size:11px; color:#b9a25f; text-align:center; margin-top:9px; letter-spacing:0.4px; }
.table-color-picker{ margin-top:4px; }

/* in-game: the 3D luxury table now lives in a fixed overlay (#lux-host) aligned over this container */
.table-circle.lux-table{ position:relative; }
/* the overlay aligns to the container's real layout box, so never let the 2D "3D view" tilt skew it */
body.view-3d .table-circle.lux-table{ transform:none !important; }
.table-circle .lux-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; margin:0;
    background:transparent; pointer-events:auto; z-index:1; }   /* NEW: interactive 3D table (clicks reach it) */

/* NEW: Luxury Tables Logic — wherever the 3D table is mounted, hide the 2D overlay
   (numbers, names, yula, envelopes, centre timer). Table-less phases keep their nodes.
   The overlay nodes stay in the DOM (hidden) and act as click-proxies for the 3D table. */
.lux-table > *:not(.lux-frame){ display:none !important; }

/* ===== Cloth-colour picker popup (opens by TAPPING THE TABLE) ===== */
#cloth-popup{ position:fixed; inset:0; z-index:400000; display:none; align-items:center; justify-content:center; background:rgba(4,2,12,0.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
#cloth-popup.show{ display:flex; animation:fadeInUp 0.2s ease; }
.cloth-popup-card{ background:linear-gradient(160deg, rgba(34,20,60,0.98), rgba(14,8,26,0.98)); border:1px solid rgba(251,191,36,0.45); border-radius:16px; padding:18px 18px 20px; box-shadow:0 18px 60px rgba(0,0,0,0.6), 0 0 26px rgba(251,191,36,0.18); max-width:90vw; }
.cloth-popup-title{ color:var(--accent-gold); font-weight:800; font-size:15px; text-align:center; margin-bottom:14px; }
.cloth-popup-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.cloth-popup-sw{ flex:0 0 auto; min-width:74px; display:flex; flex-direction:column; align-items:center; gap:7px; padding:11px 10px; border-radius:11px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:700; color:#cbb9e8; background:rgba(12,8,22,0.85); border:1px solid #3a2c55; transition:0.18s; }
.cloth-popup-sw:hover{ border-color:rgba(251,191,36,0.5); }
.cloth-popup-sw.active{ border-color:var(--accent-gold); color:#08050c; background:linear-gradient(135deg,#fbbf24,#d97706); box-shadow:0 0 16px rgba(251,191,36,0.55); transform:scale(1.05); }
.cloth-popup-dot{ width:42px; height:24px; border-radius:6px; border:2px solid rgba(255,255,255,0.25); box-shadow:inset 0 0 8px rgba(0,0,0,0.45); }
.cloth-popup-sw.active .cloth-popup-dot{ border-color:#fff; }



/* ===== networked lobby (Stage 2 multiplayer) ===== */
.netlobby-players{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.netlobby-player{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:10px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);font-size:15px}
.netlobby-player.me{border-color:var(--accent-gold);background:rgba(251,191,36,0.08)}
.np-dot{width:9px;height:9px;border-radius:50%;background:#64748b;flex-shrink:0}
.np-dot.on{background:#22c55e;box-shadow:0 0 6px #22c55e}
#netlobby-code{color:var(--accent-gold);font-weight:800}
/* #net-timer is a net.js-only element (not part of the Golden Master) — keep it
   hidden; the timer lives in the original table centre. No Golden Master overrides. */
#net-timer { display: none !important; }