@font-face { font-family: 'Russo One'; src: url(../assets/fonts/RussoOne.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Rubik'; src: url(../assets/fonts/Rubik-Variable.woff2) format('woff2'); font-weight: 300 900; font-display: block; }
@font-face { font-family: 'Press Start 2P'; src: url(../assets/fonts/PressStart2P.woff2) format('woff2'); font-display: block; }

:root {
  --bg: #340B75; --purple: #5114B0; --purple-mid: #39108A; --deep: #1A0544;
  --orange: #FF7230; --orange-l: #FE843B; --yellow: #FFDA4B; --red: #B5232E;
  --green: #22C55E; --ink: #2A0A5E; --dim: rgba(255,255,255,.62);
  --f-display: 'Russo One', 'Arial Black', sans-serif;
  --f-body: 'Rubik', 'Segoe UI', sans-serif;
  --f-pixel: 'Press Start 2P', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #160438; }
body { font-family: var(--f-body); color: #fff; user-select: none; -webkit-user-select: none; touch-action: manipulation; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body.hide-cursor, body.hide-cursor * { cursor: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
[hidden] { display: none !important; }

#stage { position: absolute; left: 50%; top: 50%; width: 1080px; height: 1920px; transform: translate(-50%, -50%); transform-origin: center; overflow: hidden; background: var(--bg); }

/* ── Background ── */
.bg { position: absolute; inset: 0; overflow: hidden; }
.bg-waves { position: absolute; left: -270px; top: 0; width: 1620px; height: 1920px; animation: drift 40s linear infinite; will-change: transform; }
.bg-waves path { fill: none; stroke: #4B17A6; stroke-width: 7; opacity: .55; }
@keyframes drift { to { transform: translateX(135px); } }
.bg-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 38% at 50% 40%, rgba(124,58,237,.33), transparent 70%), radial-gradient(ellipse 110% 75% at 50% 50%, transparent 55%, rgba(12,2,36,.7)); }
.bg-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 2px, transparent 2px 5px); }
.bg-sprites .sprite { position: absolute; top: 0; color: #fff; opacity: .07; animation: floatUp linear infinite; }
@keyframes floatUp { from { transform: translateY(2000px); } to { transform: translateY(-200px); } }
.pix { display: block; height: auto; }
.pix path { fill: currentColor; }

/* ── Top bar ── */
.topbar { position: absolute; left: 0; right: 0; top: 0; height: 180px; padding: 0 44px; display: flex; align-items: center; justify-content: space-between; z-index: 6; }
.topbar-left { display: flex; align-items: center; gap: 28px; }
.logo { height: 58px; width: auto; }
.home-btn { width: 104px; height: 104px; border-radius: 24px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 4px solid rgba(255,255,255,.45); box-shadow: 0 6px 0 rgba(0,0,0,.3); transition: transform .08s, box-shadow .08s; }
.home-btn .pix { width: 50px; color: #fff; }
.home-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.topbar-tag { font: 22px var(--f-pixel); color: var(--orange-l); letter-spacing: 3px; }
.timer { position: relative; width: 150px; height: 150px; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { stroke-width: 12; }
.timer .track { fill: rgba(20,4,52,.75); stroke: rgba(255,255,255,.14); }
.timer .prog { fill: none; stroke: var(--yellow); stroke-linecap: round; stroke-dasharray: 427.26; transition: stroke .3s; }
.timer-num { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 16px; font: 58px/1 var(--f-display); }
.timer-lbl { position: absolute; left: 0; right: 0; bottom: 36px; text-align: center; font: 12px var(--f-pixel); color: var(--dim); }
.timer.warn .prog { stroke: var(--orange); }
.timer.danger .prog { stroke: #FF3B47; }
.timer.danger .timer-num { color: #FF6670; animation: pulse .5s ease-in-out infinite alternate; }
.timer.paused { opacity: .65; }
@keyframes pulse { to { transform: scale(1.12); } }

/* ── Screens ── */
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.screen.active { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.screen-head { position: absolute; left: 0; right: 0; top: 200px; text-align: center; }
.screen-head h2 { font: 84px/1.1 var(--f-display); letter-spacing: 2px; text-shadow: 0 6px 0 rgba(0,0,0,.3); }
.eyebrow { font: 22px/1.6 var(--f-pixel); color: var(--orange-l); letter-spacing: 2px; }

/* ── Buttons ── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 16px; height: 112px; min-width: 380px; padding: 0 56px; border-radius: 24px; font: 46px/1 var(--f-display); letter-spacing: 1px; transition: transform .08s, box-shadow .08s, opacity .2s; }
.btn:disabled { opacity: .35; pointer-events: none; }
.btn-primary { background: linear-gradient(180deg, #FFA25A, var(--orange) 55%, #F0601E); color: var(--ink); box-shadow: 0 10px 0 #A8420F, 0 22px 40px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.35); }
.btn-green { background: linear-gradient(180deg, #4AE68A, #1DB85A 55%, #14963F); color: #04260F; box-shadow: 0 10px 0 #0B6A2B, 0 22px 40px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.35); }
.btn-gold { background: linear-gradient(180deg, #FFF0A0, var(--yellow) 55%, #F2B92A); color: var(--ink); box-shadow: 0 10px 0 #B07C10, 0 0 60px rgba(255,218,75,.6), inset 0 3px 0 rgba(255,255,255,.5); }
.btn-red { background: linear-gradient(180deg, #E0434C, var(--red) 60%, #8A1820); color: #fff; box-shadow: 0 10px 0 #5E0E14, 0 22px 40px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.25); }
.btn-ghost { background: rgba(255,255,255,.06); border: 4px solid rgba(255,255,255,.45); color: #fff; box-shadow: 0 8px 0 rgba(0,0,0,.28); }
.btn:active { transform: translateY(7px); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.btn-small { height: 76px; min-width: 0; padding: 0 30px; font-size: 30px; border-radius: 18px; }
.btn.pop { animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ── Title ── */
.presents { position: absolute; top: 240px; left: 0; right: 0; text-align: center; font: 24px var(--f-pixel); color: var(--orange-l); letter-spacing: 4px; }
.emblem { position: absolute; left: 50%; top: 320px; width: 540px; height: 540px; margin-left: -270px; }
.emblem-lights { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(var(--yellow) 0 4deg, transparent 4deg 12deg); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 66%, transparent 67%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 66%, transparent 67%); animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.emblem-core { position: absolute; inset: 95px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #6A2BD9, #2A0A6B 70%); border: 8px solid #fff; box-shadow: 0 0 0 12px var(--purple), 0 0 0 20px var(--orange), 0 0 90px rgba(255,114,48,.55), inset 0 -20px 40px rgba(0,0,0,.4); display: grid; place-items: center; }
.emblem-core .pix { width: 210px; color: var(--yellow); grid-area: 1 / 1; }
.emblem-core .inv-a { animation: frameA 1s steps(1) infinite; }
.emblem-core .inv-b { animation: frameB 1s steps(1) infinite; }
@keyframes frameA { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes frameB { 0% { opacity: 0; } 50% { opacity: 1; } }
.emblem-coin { position: absolute; top: 230px; width: 64px; color: var(--yellow); animation: bob 1.6s ease-in-out infinite alternate; filter: drop-shadow(0 6px 0 #A8420F); }
.emblem-coin.left { left: -70px; }
.emblem-coin.right { right: -70px; animation-delay: -.8s; }
@keyframes bob { to { transform: translateY(-24px); } }
.title { position: absolute; top: 905px; left: 0; right: 0; text-align: center; font-family: var(--f-display); font-weight: 400; }
.title .t1 { display: block; font-size: 62px; letter-spacing: 3px; }
.title .t2 { display: block; font-size: 112px; line-height: 1.05; color: var(--yellow); text-shadow: 0 6px 0 var(--orange), 0 12px 0 #A8420F, 0 22px 40px rgba(0,0,0,.5); }
.tagline { position: absolute; top: 1140px; left: 0; right: 0; display: flex; justify-content: center; align-items: flex-end; gap: 18px; }
.tagline .pix { height: 48px; width: auto; }
.tagline .inv { color: #fff; }
.tagline .dol { color: var(--yellow); }
.btn-start { position: absolute; left: 50%; top: 1230px; width: 660px; height: 140px; margin-left: -330px; font-size: 58px; animation: glow 1.4s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 10px 0 #A8420F, 0 0 70px rgba(255,138,61,.75), inset 0 3px 0 rgba(255,255,255,.35); } }
.mini-board { position: absolute; left: 90px; right: 90px; top: 1450px; height: 410px; padding: 28px 40px; border-radius: 28px; background: rgba(10,2,30,.35); border: 3px solid rgba(255,255,255,.12); display: block; }
.mini-head { display: flex; justify-content: space-between; font: 20px var(--f-pixel); color: var(--orange-l); margin-bottom: 18px; }
.mini-more { color: var(--dim); font-size: 16px; }
.mini-rows { display: block; }
.mini-row { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; height: 64px; }
.mini-row .rank { font: 22px var(--f-pixel); color: var(--dim); }
.mini-row .name { font-weight: 700; font-size: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px; }
.mini-row .amt { font: 36px var(--f-display); color: var(--yellow); }
.mini-empty { display: block; text-align: center; padding-top: 110px; font: 20px/1.8 var(--f-pixel); color: var(--dim); }
.r1 .rank { color: #FFDA4B !important; } .r2 .rank { color: #D7DCE6 !important; } .r3 .rank { color: #E3925A !important; }
.config-errors { position: absolute; left: 40px; right: 40px; top: 170px; max-height: 560px; overflow: hidden; padding: 24px 30px; border-radius: 20px; background: #8A1820; border: 4px solid #FFC9CC; font-size: 24px; line-height: 1.4; z-index: 9; }
.config-errors b { display: block; font: 22px var(--f-pixel); margin-bottom: 12px; }

/* ── Ladder ── */
.ladder { position: absolute; left: 90px; right: 90px; top: 370px; height: 1332px; }
.marker { position: absolute; left: -14px; right: -14px; top: 0; border-radius: 20px; background: linear-gradient(180deg, #FFA25A, var(--orange) 60%, #F0601E); box-shadow: 0 0 0 6px rgba(255,138,61,.25), 0 0 60px rgba(255,114,48,.7); transition: transform .9s cubic-bezier(.65,0,.35,1), opacity .3s; }
.marker.arrived { animation: markerPulse 1.1s ease-in-out infinite; }
@keyframes markerPulse { 50% { box-shadow: 0 0 0 14px rgba(255,138,61,.18), 0 0 100px rgba(255,114,48,.9); } }
.rung { position: absolute; left: 0; right: 0; display: flex; align-items: center; padding: 0 48px; border-radius: 18px; background: rgba(255,255,255,.04); font-family: var(--f-display); transition: color .3s; }
.rung .num { width: 90px; font: 24px var(--f-pixel); color: var(--dim); }
.rung .dot { width: 22px; height: 22px; margin-right: 30px; transform: rotate(45deg); background: rgba(255,255,255,.25); transition: background .3s, transform .3s; }
.rung .amt { margin-left: auto; font-size: var(--rung-font, 52px); letter-spacing: 1px; }
.rung .amt small { margin-left: 12px; font-size: 26px; color: var(--dim); }
.rung .trophy { width: 40px; margin-left: 22px; color: var(--yellow); }
.rung.top .amt { color: var(--yellow); }
.rung.done { background: transparent; }
.rung.done .amt { color: #7CF0A6; }
.rung.done .dot { background: var(--green); transform: rotate(45deg) scale(1.15); }
.rung.current { background: transparent; cursor: pointer; }
.rung.current .num, .rung.current .amt, .rung.current .amt small, .rung.current .trophy { color: var(--ink); }
.rung.current .dot { background: var(--ink); }
.ladder-hint { position: absolute; left: 0; right: 0; top: 1745px; text-align: center; font: 26px/1.6 var(--f-pixel); color: var(--dim); opacity: 0; transition: opacity .3s; }
.ladder-hint b { color: var(--yellow); font-weight: 400; }
.ladder-hint.show { opacity: 1; animation: blink 1.2s steps(2) infinite .3s; }
@keyframes blink { 50% { opacity: .45; } }

/* ── Question ── */
.prize { position: absolute; left: 0; right: 0; top: 195px; text-align: center; }
.prize-amt { font: 88px/1.15 var(--f-display); color: var(--yellow); text-shadow: 0 0 40px rgba(255,218,75,.4), 0 6px 0 #A8420F; }
.prize-amt.won { color: #6BF59C; text-shadow: 0 0 40px rgba(34,197,94,.6), 0 6px 0 #0B6A2B; animation: pop .4s cubic-bezier(.3,1.6,.5,1); }
.prize-amt.lost { opacity: .35; transition: opacity .4s; }
.lifelines { position: absolute; left: 0; right: 0; top: 375px; display: flex; justify-content: center; gap: 44px; }
.lifeline { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 250px; }
.ll-oval { position: relative; width: 220px; height: 124px; border-radius: 50%; border: 5px solid #B79CFF; background: radial-gradient(ellipse at 50% 30%, #5A1FC2, #2A0A6B); display: grid; place-items: center; box-shadow: 0 0 30px rgba(124,58,237,.5), inset 0 -8px 20px rgba(0,0,0,.35); transition: transform .1s; }
.ll-oval .pix { height: 60px; width: auto; color: #fff; }
.ll-5050 { font: 48px/1 var(--f-display); }
.ll-label { font: 14px/1.5 var(--f-pixel); color: var(--dim); text-align: center; }
.lifeline:active .ll-oval { transform: scale(.94); }
.lifeline.used { pointer-events: none; }
.lifeline.used .ll-oval { border-color: rgba(255,255,255,.2); }
.lifeline.used .ll-oval > * { opacity: .25; }
.lifeline.used .ll-oval::before, .lifeline.used .ll-oval::after { content: ''; position: absolute; left: 50%; top: 50%; width: 150px; height: 12px; margin: -6px 0 0 -75px; border-radius: 6px; background: #FF3B47; box-shadow: 0 0 12px rgba(0,0,0,.5); transform: rotate(28deg); }
.lifeline.used .ll-oval::after { transform: rotate(-28deg); }
.lifelines.off .lifeline { pointer-events: none; }
.lifelines.off .lifeline:not(.used) { opacity: .5; }

.ll-panel { position: absolute; left: 40px; right: 40px; top: 190px; height: 400px; z-index: 4; padding: 36px 40px; display: grid; grid-template-columns: 170px 1fr 190px; gap: 30px; align-items: center; border-radius: 32px; background: linear-gradient(180deg, var(--purple), #2D0B78); border: 5px solid var(--orange-l); box-shadow: 0 0 0 10px rgba(255,114,48,.15), 0 30px 60px rgba(0,0,0,.5); animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
.ll-panel-icon .pix { width: 160px; color: var(--yellow); }
.ll-panel-title { font: 48px/1.1 var(--f-display); color: var(--yellow); }
.ll-panel-text { margin: 14px 0 26px; font-size: 30px; line-height: 1.3; font-weight: 500; }
.ll-panel-bar { height: 16px; border-radius: 8px; background: rgba(0,0,0,.35); overflow: hidden; }
.ll-panel-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--orange), var(--yellow)); }
.ll-panel-side { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ll-panel-count { font: 110px/1 var(--f-display); }

.hex { --cut: 44px; display: block; position: relative; height: 100%; padding: 4px; background: var(--hex-border, linear-gradient(180deg, #C9B3FF, #7B4BE0 50%, #C9B3FF)); clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%); }
.hex-in { display: flex; align-items: center; height: 100%; background: var(--hex-fill, linear-gradient(180deg, #2B0B6B, var(--deep))); clip-path: polygon(calc(var(--cut) - 2px) 0, calc(100% - var(--cut) + 2px) 0, 100% 50%, calc(100% - var(--cut) + 2px) 100%, calc(var(--cut) - 2px) 100%, 0 50%); }
.qbox { position: absolute; left: 30px; right: 30px; top: 625px; height: 400px; }
.qbox .hex { --cut: 70px; padding: 5px; }
.qbox .hex-in { justify-content: center; padding: 20px 100px; text-align: center; }
.qbox p { font-weight: 600; font-size: 54px; line-height: 1.2; overflow-wrap: break-word; max-width: 100%; }
.qbox.shake { animation: shake .5s; }

.answers { position: absolute; left: 40px; right: 40px; top: 1070px; display: flex; flex-direction: column; gap: 26px; }
.answer { position: relative; display: block; width: 100%; height: 136px; transition: opacity .3s; }
.answer::before { content: ''; position: absolute; left: -40px; right: -40px; top: 50%; height: 4px; margin-top: -2px; background: linear-gradient(90deg, transparent, #8A63E6 10%, #8A63E6 90%, transparent); opacity: .7; }
.answer .hex-in { padding: 0 70px 0 62px; gap: 22px; }
.answer .letter { flex: none; width: 52px; font: 44px/1 var(--f-display); color: var(--orange-l); }
.answer .text { font-weight: 600; font-size: 42px; line-height: 1.12; overflow-wrap: break-word; min-width: 0; }
.answer.selected { --hex-fill: linear-gradient(180deg, #FFA25A, var(--orange) 60%, #F0601E); --hex-border: linear-gradient(180deg, #FFE3C4, #FF9A4D); }
.answer.selected .letter, .answer.selected .text { color: var(--ink); }
.answer.locked .hex { animation: lockPulse .6s ease-in-out infinite; }
@keyframes lockPulse { 50% { filter: brightness(1.35); } }
.answer.correct { --hex-fill: linear-gradient(180deg, #43E584, #18A84E 60%, #0F7F39); --hex-border: linear-gradient(180deg, #D5FFE4, #3BE07B); }
.answer.correct .letter, .answer.correct .text { color: #04260F; }
.answer.correct .hex { animation: correctFlash .25s 4; }
@keyframes correctFlash { 50% { filter: brightness(1.5); } }
.answer.wrong { --hex-fill: linear-gradient(180deg, #E0434C, var(--red) 60%, #8A1820); --hex-border: linear-gradient(180deg, #FFC9CC, #E0434C); animation: shake .5s; }
.answer.wrong .letter, .answer.wrong .text { color: #fff; }
.answer.removed { opacity: .22; pointer-events: none; }
.answer.removed .letter, .answer.removed .text { visibility: hidden; }
.answers.locked .answer { pointer-events: none; }
.answers.revealed .answer:not(.correct):not(.wrong):not(.removed), .answers.timeout .answer:not(.removed):not(.correct) { opacity: .4; }
@keyframes shake { 20%, 60% { transform: translateX(-16px); } 40%, 80% { transform: translateX(16px); } }

.stamp { position: absolute; left: 50%; top: 825px; z-index: 3; padding: 20px 50px; transform: translate(-50%, -50%) rotate(-6deg); border: 8px solid #FF3B47; border-radius: 20px; background: rgba(40,4,12,.85); font: 120px/1 var(--f-display); color: #FF5A63; opacity: 0; pointer-events: none; }
.stamp.show { opacity: 1; animation: stampIn .4s cubic-bezier(.3,1.6,.5,1); }
@keyframes stampIn { from { transform: translate(-50%, -50%) rotate(-6deg) scale(2.2); opacity: 0; } }
.actions { position: absolute; left: 0; right: 0; top: 1735px; height: 150px; display: flex; justify-content: center; align-items: flex-start; }
.actions .btn { min-width: 640px; height: 124px; font-size: 52px; }
.action-hint { padding-top: 40px; font: 24px var(--f-pixel); color: var(--dim); animation: blink 1.4s steps(2) infinite; }

/* ── Result ── */
.res-title { font-size: 110px !important; }
.res-title.win { color: var(--yellow); }
.res-title.lose { color: #FF6670; }
.res-win { position: absolute; left: 0; right: 0; top: 410px; text-align: center; }
.lbl { font: 20px/1.6 var(--f-pixel); color: var(--dim); letter-spacing: 1px; }
.res-amt { font: 128px/1.1 var(--f-display); color: var(--yellow); text-shadow: 0 0 40px rgba(255,218,75,.45), 0 8px 0 #A8420F; }
.res-stats { position: absolute; left: 60px; right: 60px; top: 640px; display: flex; gap: 40px; }
.stat { flex: 1; height: 130px; border-radius: 24px; background: rgba(255,255,255,.06); border: 3px solid rgba(255,255,255,.15); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.stat span { font: 16px var(--f-pixel); color: var(--dim); }
.stat b { font: 54px/1 var(--f-display); font-weight: 400; }
.name-entry { position: absolute; left: 40px; right: 40px; top: 820px; text-align: center; }
.name-box { margin: 18px auto 30px; width: 960px; height: 130px; display: flex; align-items: center; justify-content: center; border-radius: 24px; border: 5px solid var(--orange-l); background: rgba(10,2,30,.5); font: 64px/1 var(--f-display); }
.name-box.empty #nameText::before { content: 'YOUR NAME'; color: rgba(255,255,255,.25); }
.caret { display: inline-block; width: 6px; height: 72px; margin-left: 8px; background: var(--orange-l); animation: blink 1s steps(2) infinite; }
.kbd { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.kbd-row { display: flex; gap: 12px; }
.key { width: 88px; height: 96px; border-radius: 16px; background: linear-gradient(180deg, #6A2BD9, #4A16A8); box-shadow: 0 6px 0 #22075A; font: 40px/1 var(--f-display); text-align: center; }
.key:active { transform: translateY(5px); box-shadow: 0 1px 0 #22075A; }
.key.wide { width: 200px; font-size: 34px; }
.key.space { width: 560px; font-size: 26px; }
.res-actions { margin-top: 56px; display: flex; justify-content: center; gap: 40px; }
.res-actions .btn { min-width: 420px; }

/* ── Leaderboard ── */
.board { position: absolute; left: 50px; right: 50px; top: 380px; }
.brow { display: grid; grid-template-columns: 90px 1fr 250px 170px; align-items: center; height: 92px; padding: 0 30px; margin-bottom: 10px; border-radius: 18px; background: rgba(255,255,255,.05); }
.brow.head { height: 50px; margin-bottom: 6px; background: none; font: 16px var(--f-pixel); color: var(--dim); }
.brow .rank { font: 28px var(--f-pixel); color: var(--dim); }
.brow .name { font-weight: 700; font-size: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px; }
.brow .amt { font: 42px var(--f-display); color: var(--yellow); text-align: right; }
.brow .time { font: 32px var(--f-display); color: var(--dim); text-align: right; }
.brow.head .amt, .brow.head .time { font: 16px var(--f-pixel); color: var(--dim); }
.brow.me { background: linear-gradient(90deg, rgba(255,114,48,.4), rgba(255,114,48,.12)); outline: 4px solid var(--orange-l); animation: mePulse 1.2s ease-in-out infinite; }
@keyframes mePulse { 50% { outline-color: var(--yellow); } }
.board-gap { height: 40px; text-align: center; font: 24px var(--f-pixel); color: var(--dim); }
.board-empty { padding-top: 260px; text-align: center; font: 26px/2 var(--f-pixel); color: var(--dim); }
.board-actions { position: absolute; left: 0; right: 0; top: 1660px; display: flex; justify-content: center; gap: 40px; }
.board-actions .btn { min-width: 420px; }
.board-return { position: absolute; left: 0; right: 0; top: 1830px; text-align: center; font: 18px var(--f-pixel); color: var(--dim); }

/* ── FX ── */
#fx { position: absolute; inset: 0; width: 1080px; height: 1920px; pointer-events: none; z-index: 8; }
.flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 7; }
.flash.green { background: radial-gradient(ellipse at center, transparent 30%, rgba(34,197,94,.55)); animation: flash .7s; }
.flash.red { background: radial-gradient(ellipse at center, transparent 30%, rgba(255,40,50,.6)); animation: flash .7s; }
@keyframes flash { 30% { opacity: 1; } }

/* ── "Go home?" confirm ── */
.confirm { position: absolute; inset: 0; z-index: 15; display: grid; place-items: center; background: rgba(8,1,24,.8); }
.confirm-card { width: 900px; padding: 60px 56px 70px; border-radius: 36px; text-align: center; background: linear-gradient(180deg, var(--purple), #2D0B78); border: 5px solid var(--orange-l); box-shadow: 0 0 0 12px rgba(255,114,48,.15), 0 30px 60px rgba(0,0,0,.5); animation: pop .3s cubic-bezier(.3,1.6,.5,1); }
.confirm-icon .pix { width: 110px; margin: 0 auto 34px; color: var(--yellow); }
.confirm-card h3 { font: 64px/1.15 var(--f-display); font-weight: 400; }
.confirm-card p { margin-top: 20px; font-size: 36px; font-weight: 500; color: var(--dim); }
.confirm-actions { margin-top: 56px; display: flex; justify-content: center; gap: 36px; }
.confirm-actions .btn { min-width: 350px; }

/* ── Admin ── */
.admin { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(8,1,24,.8); }
.admin-card { width: 760px; padding: 50px; border-radius: 30px; background: var(--purple-mid); border: 4px solid var(--orange-l); display: flex; flex-direction: column; gap: 18px; }
.admin-card h3 { font: 28px var(--f-pixel); color: var(--orange-l); }
.admin-info { font-size: 26px; line-height: 1.5; color: var(--dim); }
.admin-btn { height: 90px; border-radius: 16px; background: rgba(255,255,255,.1); font: 32px var(--f-display); text-align: center; }
.admin-btn.danger { background: var(--red); }
.admin-btn.close { background: transparent; border: 3px solid rgba(255,255,255,.35); }
.admin-players { width: 960px; }
.admin-list { max-height: 1180px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 10px; overscroll-behavior: contain; touch-action: pan-y; }
.admin-list:empty { display: none; }
.admin-list::-webkit-scrollbar { width: 12px; }
.admin-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 6px; }
.admin-row { flex: none; display: grid; grid-template-columns: 60px 1fr auto 150px 170px; gap: 18px; align-items: center; height: 84px; padding-left: 22px; border-radius: 16px; background: rgba(255,255,255,.06); }
.admin-row .rank { font: 20px var(--f-pixel); color: var(--dim); }
.admin-row .name { font-weight: 700; font-size: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-row .amt { font: 32px var(--f-display); color: var(--yellow); text-align: right; }
.admin-row .time { font: 26px var(--f-display); color: var(--dim); text-align: right; }
.admin-remove { height: 84px; border-radius: 16px; background: rgba(255,255,255,.12); font: 26px var(--f-display); text-align: center; transition: background .15s; }
.admin-remove.armed { background: var(--red); }