:root {
  --ink: #07131d;
  --panel: #0d2230;
  --panel-2: #123247;
  --muted: #9bb2c2;
  --paper: #f7fbff;
  --cyan: #19d8e8;
  --cyan-deep: #00a8be;
  --lime: #9bf43c;
  --green: #51df75;
  --purple: #9346db;
  --pink: #ff4c94;
  --yellow: #ffd84f;
  --red: #ff6363;
  --border: rgba(255,255,255,.13);
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); }
body { margin: 0; min-height: 100vh; color: var(--paper); font-family: "DM Sans", system-ui, sans-serif; background: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; }
.shell { min-height: 100vh; background: radial-gradient(circle at 90% 0%, rgba(25,216,232,.18), transparent 31%), radial-gradient(circle at 0% 60%, rgba(147,70,219,.18), transparent 35%), var(--ink); }
.shell::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image: linear-gradient(rgba(25,216,232,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(25,216,232,.08) 1px, transparent 1px); background-size: 32px 32px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.topbar { position: sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; min-height:72px; padding: 12px clamp(18px,4vw,56px); background:rgba(7,19,29,.9); backdrop-filter: blur(16px); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:800; font-size:1.28rem; letter-spacing:-.03em; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:var(--ink); font-family:"Space Mono",monospace; background:linear-gradient(135deg,var(--lime),var(--cyan)); box-shadow:0 0 28px rgba(25,216,232,.28); }
.nav-actions { display:flex; gap:8px; align-items:center; }
.nav-link { border:0; border-radius:10px; padding:10px 14px; color:var(--muted); background:transparent; font-weight:700; }
.nav-link.active,.nav-link:hover { color:white; background:rgba(255,255,255,.08); }
.container { position:relative; z-index:1; width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:48px 0 72px; }
.eyebrow { margin:0 0 10px; color:var(--cyan); font:700 .82rem/1 "Space Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:820px; margin-bottom:14px; font-size:clamp(2.3rem,6vw,4.8rem); line-height:.96; letter-spacing:-.06em; }
h2 { font-size:clamp(1.65rem,3vw,2.45rem); letter-spacing:-.04em; }
h3 { letter-spacing:-.025em; }
.lede { max-width:690px; color:#c8d6df; font-size:clamp(1rem,2vw,1.18rem); line-height:1.65; }
.hero-row { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr); gap:30px; align-items:end; margin-bottom:42px; }
.hero-console { position:relative; overflow:hidden; min-height:220px; padding:24px; border:1px solid rgba(155,244,60,.3); border-radius:var(--radius); background:linear-gradient(180deg,rgba(7,36,30,.96),rgba(3,16,14,.98)); box-shadow:var(--shadow), inset 0 0 50px rgba(81,223,117,.06); font-family:"Space Mono",monospace; color:var(--green); }
.hero-console::after,.terminal::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.025) 4px); }
.console-title { color:white; font-weight:700; margin-bottom:20px; }
.console-line { margin:8px 0; font-size:.86rem; }
.console-line::before { content:"> "; color:var(--lime); }
.cursor { display:inline-block; width:9px; height:1em; vertical-align:-2px; background:var(--lime); animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; }
.stat { padding:12px; border:1px solid rgba(155,244,60,.2); border-radius:10px; background:rgba(155,244,60,.06); }
.stat strong { display:block; color:white; font-size:1.15rem; }
.stat span { color:#83a597; font-size:.7rem; }
.section-head { display:flex; gap:20px; align-items:end; justify-content:space-between; margin: 32px 0 18px; }
.section-head h2 { margin-bottom:0; }
.section-head p { margin-bottom:3px; color:var(--muted); }
.bank-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.bank-card { position:relative; overflow:hidden; min-height:230px; padding:22px; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(145deg,rgba(18,50,71,.98),rgba(10,30,43,.98)); box-shadow:0 10px 24px rgba(0,0,0,.12); transition:transform .18s,border-color .18s; }
.bank-card:hover { transform:translateY(-3px); border-color:rgba(25,216,232,.55); }
.bank-num { display:grid; place-items:center; width:54px; height:54px; margin-bottom:22px; border-radius:15px; color:var(--ink); background:var(--accent,var(--cyan)); font:700 1.15rem "Space Mono",monospace; transform:rotate(-3deg); }
.bank-card h3 { margin-bottom:8px; font-size:1.28rem; }
.bank-card p { min-height:48px; color:var(--muted); line-height:1.5; }
.standard { display:inline-flex; padding:5px 8px; border-radius:7px; color:#dbe8ef; background:rgba(255,255,255,.07); font:700 .7rem "Space Mono",monospace; }
.bank-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:18px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:0 18px; border:0; border-radius:11px; color:var(--ink); background:linear-gradient(135deg,var(--cyan),#6bf4ea); box-shadow:0 7px 0 #007f91; font-weight:800; text-decoration:none; transition:transform .12s,box-shadow .12s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 9px 0 #007f91; }
.btn:active { transform:translateY(5px); box-shadow:0 2px 0 #007f91; }
.btn.secondary { color:white; background:#263f50; box-shadow:0 5px 0 #122633; }
.btn.purple { color:white; background:linear-gradient(135deg,var(--purple),#c35cf0); box-shadow:0 7px 0 #5d238d; }
.btn.green { background:linear-gradient(135deg,var(--lime),var(--green)); box-shadow:0 7px 0 #3a993f; }
.btn.danger { color:white; background:var(--red); box-shadow:0 5px 0 #a93333; }
.btn.compact { min-height:38px; padding:0 14px; box-shadow:0 4px 0 #3a993f; font-size:.84rem; }
.btn.danger.compact { box-shadow:0 4px 0 #a93333; }
.icon-btn { width:44px; height:44px; border:1px solid var(--border); border-radius:11px; color:white; background:rgba(255,255,255,.07); }
.builder { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(310px,.7fr); gap:24px; align-items:start; }
.card { border:1px solid var(--border); border-radius:var(--radius); background:rgba(13,34,48,.94); box-shadow:var(--shadow); }
.card-pad { padding:24px; }
.back { display:inline-flex; align-items:center; gap:7px; margin-bottom:22px; padding:0; border:0; color:var(--cyan); background:none; font-weight:800; }
.builder-title { display:flex; justify-content:space-between; align-items:start; gap:18px; }
.builder-title h1 { margin-bottom:8px; font-size:clamp(2rem,4vw,3.3rem); }
.count-pill { flex:none; padding:9px 12px; border-radius:999px; color:var(--ink); background:var(--lime); font:700 .78rem "Space Mono",monospace; }
.tool-row { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.search { flex:1; min-width:220px; height:44px; padding:0 14px; border:1px solid var(--border); border-radius:11px; color:white; background:#071923; outline:none; }
.search:focus,.field:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(25,216,232,.16); }
.question-list { display:grid; gap:9px; max-height:620px; overflow:auto; padding-right:6px; }
.question-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:14px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.035); }
.question-row:has(input:checked) { border-color:rgba(155,244,60,.42); background:rgba(155,244,60,.06); }
.question-row input { width:19px; height:19px; accent-color:var(--lime); }
.question-row p { margin:0; line-height:1.35; }
.question-row small { color:var(--muted); font-family:"Space Mono",monospace; }
.config { position:sticky; top:92px; }
.config h3 { margin-bottom:20px; font-size:1.35rem; }
.setting { margin:18px 0; }
.setting label { display:block; margin-bottom:8px; color:#cfe0e9; font-weight:700; }
.setting small { display:block; margin-top:7px; color:var(--muted); line-height:1.4; }
.field { width:100%; height:44px; padding:0 12px; border:1px solid var(--border); border-radius:10px; color:white; background:#071923; outline:none; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.segmented button { min-height:40px; border:1px solid var(--border); border-radius:9px; color:var(--muted); background:#071923; font-weight:800; }
.segmented button.active { color:var(--ink); background:var(--lime); border-color:var(--lime); }
.check-line { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:15px 0; color:#d7e4eb; }
.switch { position:relative; width:46px; height:26px; border:0; border-radius:999px; background:#304a5a; }
.switch::after { content:""; position:absolute; top:4px; left:4px; width:18px; height:18px; border-radius:50%; background:white; transition:left .16s; }
.switch.on { background:var(--cyan-deep); }
.switch.on::after { left:24px; }
.launch { width:100%; margin-top:12px; }
.empty-note { padding:18px; color:var(--muted); text-align:center; border:1px dashed var(--border); border-radius:12px; }
.join-shell,.lobby-shell,.game-shell { min-height:100vh; display:grid; place-items:center; padding:28px 16px; background:radial-gradient(circle at top,rgba(25,216,232,.25),transparent 40%),linear-gradient(145deg,#0b2835,#07131d 68%); }
.join-card { width:min(520px,100%); padding:30px; text-align:center; border:1px solid rgba(25,216,232,.3); border-radius:24px; background:rgba(8,26,37,.96); box-shadow:var(--shadow); }
.join-card .brand { justify-content:center; margin-bottom:30px; }
.join-card h1 { margin:0 auto 12px; font-size:clamp(2rem,8vw,3.6rem); }
.join-card p { color:var(--muted); }
.join-form { display:grid; gap:12px; margin-top:25px; }
.join-form .field { height:54px; text-align:center; font-size:1.1rem; }
.join-form .btn { height:54px; }
.mode-link { margin-top:20px; border:0; color:var(--cyan); background:none; font-weight:800; }
.lobby { width:min(1000px,100%); }
.lobby-code { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding:25px 30px; border-radius:20px 20px 0 0; color:white; background:linear-gradient(100deg,#732da8,var(--purple)); }
.qr { display:grid; place-items:center; width:86px; height:86px; border-radius:9px; color:var(--ink); background:white; font:700 .68rem "Space Mono",monospace; }
.code { font:700 clamp(2.6rem,8vw,5.8rem)/1 "Space Mono",monospace; letter-spacing:.06em; }
.lobby-main { min-height:430px; padding:34px; border:1px solid var(--border); border-top:0; border-radius:0 0 20px 20px; background:rgba(13,34,48,.95); }
.lobby-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:26px; }
.lobby-head h2 { margin:0; }
.players { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.player { padding:18px; text-align:center; border:1px solid rgba(25,216,232,.28); border-radius:14px; background:rgba(25,216,232,.07); }
.avatar { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 10px; border-radius:16px; color:var(--ink); background:linear-gradient(135deg,var(--lime),var(--cyan)); font:700 1.25rem "Space Mono",monospace; }
.waiting { min-height:300px; display:grid; place-items:center; text-align:center; }
.pulse { width:84px; height:84px; margin:0 auto 22px; border:2px solid var(--cyan); border-radius:50%; box-shadow:0 0 0 0 rgba(25,216,232,.6); animation:pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 28px rgba(25,216,232,0); } 100% { box-shadow:0 0 0 0 rgba(25,216,232,0); } }
.game-shell { place-items:stretch; padding:0; background:#030709; }
.game-top { display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px; padding:0 22px; border-bottom:1px solid #173828; background:#06130d; font-family:"Space Mono",monospace; }
.game-name { color:var(--green); font-weight:700; }
.game-stats { display:flex; align-items:center; gap:18px; color:var(--green); }
.sound-toggle { position:relative; z-index:40; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:0 12px; border:1px solid rgba(155,244,60,.38); border-radius:999px; color:#dfffe6; background:rgba(81,223,117,.09); font:700 .75rem "Space Mono",monospace; white-space:nowrap; }
.sound-toggle:hover { border-color:var(--lime); background:rgba(81,223,117,.17); }
.sound-toggle:focus-visible { outline:3px solid rgba(25,216,232,.55); outline-offset:2px; }
.sound-toggle[aria-pressed="true"] { color:var(--muted); border-color:var(--border); background:rgba(255,255,255,.05); }
.lobby-sound-row { display:flex; justify-content:center; margin-top:24px; }
.question-stage { display:flex; flex:1; flex-direction:column; min-height:calc(100vh - 64px); padding:clamp(22px,5vw,58px); background:radial-gradient(circle at 50% 20%,rgba(24,104,61,.18),transparent 32%),repeating-linear-gradient(0deg,rgba(81,223,117,.025) 0 1px,transparent 1px 4px),#030907; }
.standard-tag { align-self:flex-start; padding:7px 10px; border:1px solid #245835; border-radius:7px; color:#7ebc8c; font:700 .72rem "Space Mono",monospace; }
.question { max-width:900px; margin:clamp(40px,8vh,90px) auto 36px; text-align:center; color:#f2fff5; font-size:clamp(1.65rem,4vw,3rem); line-height:1.18; }
.answers { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:auto; }
.answer { min-height:126px; padding:20px; border:1px solid #2c6840; border-radius:13px; color:#eaffef; background:linear-gradient(150deg,#143b24,#0b2315); box-shadow:0 6px 0 #06150b; font-size:clamp(1rem,2vw,1.25rem); font-weight:700; }
.answer:hover { border-color:var(--lime); background:#194d2b; }
.answer.correct { background:#2c9c45; border-color:var(--lime); }
.answer.wrong { background:#71312f; border-color:var(--red); }
.overlay { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.78); backdrop-filter:blur(5px); }
.modal { width:min(620px,100%); padding:28px; border:1px solid rgba(155,244,60,.36); border-radius:18px; background:#06130d; box-shadow:0 0 80px rgba(81,223,117,.14); color:#d9ffe0; font-family:"Space Mono",monospace; }
.modal h2 { color:var(--lime); font-family:"Space Mono",monospace; }
.passwords,.rewards,.targets { display:grid; gap:10px; margin-top:20px; }
.passwords { grid-template-columns:repeat(2,1fr); }
.terminal-choice { min-height:54px; padding:10px; border:1px solid #2c6840; border-radius:8px; color:var(--green); background:#071d10; font-family:"Space Mono",monospace; }
.terminal-choice:hover { border-color:var(--lime); }
.rewards { grid-template-columns:repeat(3,1fr); }
.reward { min-height:130px; font-size:2rem; }
.reward.revealed { color:var(--ink); background:var(--lime); }
.result { text-align:center; }
.result strong { display:block; margin:14px 0; color:var(--lime); font-size:2.3rem; }
.host-game { min-height:100vh; padding:24px; background:radial-gradient(circle at center,rgba(25,216,232,.09),transparent 36%),#020506; }
.host-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid #19303b; }
.host-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.modal-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }
.end-session-modal p:not(.eyebrow) { color:#b9c9c0; line-height:1.55; }
.leaderboard { width:min(880px,100%); margin:54px auto; }
.leaderboard h1 { font-family:"Space Mono",monospace; font-size:clamp(2rem,5vw,4rem); }
.rank { display:grid; grid-template-columns:60px 1fr auto; gap:14px; align-items:center; margin:10px 0; padding:16px 18px; border:1px solid #173a47; border-radius:12px; background:#081820; }
.rank:first-of-type { border-color:var(--yellow); box-shadow:0 0 28px rgba(255,216,79,.1); }
.rank-num { color:var(--cyan); font:700 1.3rem "Space Mono",monospace; }
.rank-score { color:var(--lime); font:700 1rem "Space Mono",monospace; }
#toast { position:fixed; z-index:100; left:50%; bottom:24px; transform:translate(-50%,120px); min-width:260px; padding:13px 18px; border-radius:10px; color:var(--ink); background:var(--lime); box-shadow:var(--shadow); text-align:center; font-weight:800; transition:transform .24s; }
#toast.show { transform:translate(-50%,0); }
.error { color:#ff9b9b !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:900px) { .hero-row,.builder { grid-template-columns:1fr; } .bank-grid { grid-template-columns:repeat(2,1fr); } .config { position:static; } }
@media (max-width:620px) { .container { width:min(100% - 22px,1180px); padding-top:30px; } .brand span:last-child { display:none; } .bank-grid { grid-template-columns:1fr; } .hero-row { margin-bottom:24px; } .lobby-code { grid-template-columns:1fr; text-align:center; } .qr { display:none; } .answers { grid-template-columns:1fr; } .answer { min-height:88px; } .passwords { grid-template-columns:1fr; } .question-row { grid-template-columns:auto 1fr; } .question-row small { grid-column:2; } .nav-link { padding:9px; } .game-top { padding:0 12px; } .game-stats { gap:9px; font-size:.78rem; } .game-stats .sound-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .game-stats .sound-toggle { width:40px; padding:0; } .host-bar { align-items:flex-start; flex-wrap:wrap; } .host-bar > .code { order:3; width:100%; text-align:center; } .host-actions { flex-wrap:wrap; gap:9px; } .modal-actions { flex-direction:column-reverse; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }