:root{--ink: #0c1222;--paper: #f2efe6;--signal: #ff4d1a;--line: #2ec4b6;--muted: #5c6b82;--ok: #0a7a4b;--bad: #b42318;--card: rgba(255, 255, 255, .82);--shadow: 0 18px 50px rgba(12, 18, 34, .16);--font-display: "Bebas Neue", Impact, sans-serif;--font-body: "DM Sans", system-ui, sans-serif;color:var(--ink);font-family:var(--font-body)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:radial-gradient(1100px 520px at 8% -8%,rgba(46,196,182,.22),transparent 55%),radial-gradient(900px 480px at 100% 0%,rgba(255,77,26,.14),transparent 48%),linear-gradient(180deg,#e8eef8 0%,var(--paper) 45%,#e4ddd0 100%);background-attachment:fixed}button,input,select{font:inherit}button{cursor:pointer;border:none;border-radius:999px;padding:.85rem 1.4rem;background:var(--ink);color:#fff;font-weight:700;letter-spacing:.02em;transition:transform .15s ease,background .15s ease,opacity .15s ease}button:hover{transform:translateY(-1px)}button.secondary{background:transparent;color:var(--ink);border:2px solid var(--ink)}button.ghost{background:transparent;color:var(--ink);border:2px solid transparent;text-decoration:underline;text-underline-offset:3px}button.compact{padding:.55rem 1rem;font-size:.9rem}button:disabled{opacity:.45;cursor:not-allowed;transform:none}input,select{width:100%;border:2px solid rgba(12,18,34,.12);background:#ffffffe0;border-radius:14px;padding:.85rem 1rem}.app-shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr;position:relative}.topbar{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.25rem;gap:1rem}.brand-btn{background:none;color:inherit;padding:0;border-radius:0}.brand-btn:hover{transform:none}.brand{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.5rem);letter-spacing:.04em;line-height:1}.brand span{color:var(--signal)}.top-meta{display:flex;align-items:center;gap:.75rem;font-size:.92rem}.conn{color:var(--muted)}.conn.on{color:var(--ok);font-weight:700}.toast{position:fixed;top:4.5rem;left:50%;transform:translate(-50%);z-index:40;background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:999px;box-shadow:var(--shadow);font-weight:600;white-space:nowrap}.hero{min-height:calc(100vh - 72px);display:grid;align-content:center;gap:1rem;padding:2rem clamp(1.2rem,5vw,4rem) 3rem;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:10% -12% auto auto;width:min(56vw,580px);height:min(56vw,580px);border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--ink) 0 7deg,transparent 7deg 16deg),radial-gradient(circle at center,transparent 42%,rgba(12,18,34,.07) 43%);opacity:.16;animation:spin 52s linear infinite;pointer-events:none}@keyframes spin{to{transform:rotate(360deg)}}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700;color:var(--signal)}.hero h1{font-family:var(--font-display);font-size:clamp(3.6rem,13vw,8rem);line-height:.88;margin:0;letter-spacing:.02em}.hero p{max-width:34rem;font-size:1.08rem;color:var(--muted);margin:0}.hero-lead{max-width:28rem;font-size:1.12rem;line-height:1.45}.name-field{display:grid;gap:.4rem;max-width:280px;font-weight:700;font-size:.9rem;position:relative;z-index:1}.name-field input{font-weight:600}.name-field input[aria-invalid=true]{border-color:var(--bad);box-shadow:0 0 0 3px #b4231826}.name-error{margin:0;font-size:.88rem;font-weight:600}.mode-cards .mode-card{animation:fadeUp .5s ease both}.mode-cards .mode-card:nth-child(2){animation-delay:.07s}.choice{display:flex;align-items:center;gap:.7rem;min-height:3.1rem;transition:transform .12s ease,background .15s ease,border-color .15s ease}.choice:active:not(:disabled){transform:scale(.98)}.champion{animation:champIn .55s cubic-bezier(.2,.8,.2,1) both}@keyframes champIn{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}.city-rank-card{display:grid;gap:.55rem;padding:.9rem 1rem;border-radius:16px;background:#0c12220a}.city-board.compact-board li{padding:.55rem .75rem}.invite-input{overflow:hidden;text-overflow:ellipsis}.timer-block.urgent .timer-num{color:var(--bad);animation:pulseUrgent .7s ease infinite}@keyframes pulseUrgent{50%{transform:scale(1.08)}}button:focus-visible,input:focus-visible,select:focus-visible,.choice:focus-visible{outline:3px solid rgba(46,196,182,.55);outline-offset:2px}.made-by{margin:2rem 0 0;font-size:.8rem;color:var(--muted);opacity:.75;position:relative;z-index:1;font-weight:500}.made-by a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}.made-by a:hover{color:var(--ink);opacity:1}.section-label{margin:0;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.muted.tight{margin:.15rem 0 0;font-size:.95rem}.mode-cards{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-width:560px;position:relative;z-index:1;margin-top:.5rem}.mode-cards.stacked{grid-template-columns:1fr;max-width:420px}.mode-card{display:grid;gap:.35rem;text-align:left;padding:1.15rem 1.25rem;border-radius:18px;background:#fff;color:var(--ink);border:2px solid rgba(12,18,34,.08);box-shadow:0 10px 28px #0c122214}.mode-card strong{font-size:1.15rem;font-weight:800}.mode-card span{color:var(--muted);font-weight:500;font-size:.95rem;line-height:1.35}.mode-card.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.mode-card.primary span{color:#ffffffb8}.mode-card:hover:not(:disabled){border-color:var(--signal)}.mode-card.primary:hover:not(:disabled){background:#1a2438;border-color:#1a2438}.quick-row{margin-top:.35rem;position:relative;z-index:1}.friend-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;padding:.3rem;border-radius:999px;background:#0c12220f}.friend-tabs .tab{border-radius:999px;background:transparent;color:var(--muted);font-weight:700;padding:.65rem 1rem}.friend-tabs .tab.on{background:#fff;color:var(--ink);box-shadow:0 4px 12px #0c12221a}.setup-card{padding-bottom:5.5rem}.sticky-start{position:sticky;bottom:.75rem;margin-top:1rem;z-index:5;padding-top:.5rem;background:linear-gradient(180deg,transparent,rgba(242,239,230,.92) 28%)}.big-start{width:100%;padding:1rem 1.4rem;font-size:1.05rem;border-radius:16px;box-shadow:0 12px 32px #0c122238}.quit-link{margin-top:.75rem;font-size:.9rem;opacity:.7}.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}.panel{width:min(1080px,100%);margin:0 auto;padding:1rem clamp(1rem,3vw,2rem) 2.5rem}.panel-card.quiz{display:grid;gap:.85rem}.quiz-stage{display:grid;gap:.75rem;padding:1rem;border-radius:18px;background:radial-gradient(600px 200px at 50% 0%,rgba(46,196,182,.12),transparent 70%),#0c122208;min-height:10rem;align-content:start}.home-loading{display:flex;align-items:center;gap:.65rem;position:relative;z-index:1}.pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--signal);animation:pulse 1.2s ease infinite}.toast{transition:opacity .2s ease}.setup-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}.setup-head h2,.results-card h2{font-family:var(--font-display);font-size:clamp(2.2rem,6vw,3.2rem);margin:0;letter-spacing:.03em}.form-stack{display:grid;gap:.85rem}.form-stack label,.settings-row label{display:grid;gap:.35rem;font-weight:600;font-size:.92rem}.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.code-input{font-family:var(--font-display);font-size:1.6rem;letter-spacing:.2em;text-transform:uppercase}.picker-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.network-picker{display:grid;gap:.75rem}.city-badge{display:inline-flex;align-items:center;gap:.4rem;width:fit-content;padding:.35rem .75rem;border-radius:999px;background:#fff;font-weight:700;font-size:.85rem;border:2px solid rgba(12,18,34,.08)}.city-badge:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent, var(--signal))}.grid-networks{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;max-height:340px;overflow:auto;padding-right:.2rem}.network-tile{text-align:left;border-radius:18px;padding:.95rem;background:#fff;color:var(--ink);border:2px solid transparent;box-shadow:0 8px 20px #0c122212;position:relative;overflow:hidden}.network-tile:after{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--accent, var(--signal))}.network-tile.active{border-color:var(--ink);transform:translateY(-1px)}.network-tile strong{display:block;font-size:1.05rem}.network-tile small{color:var(--muted);font-weight:500}.lobby-layout,.quiz-layout{display:grid;gap:1rem}@media(min-width:900px){.lobby-layout{grid-template-columns:1.35fr .85fr}.quiz-layout{grid-template-columns:1.45fr .7fr;align-items:start}}.code-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.room-code{font-family:var(--font-display);font-size:clamp(2.4rem,8vw,3.4rem);letter-spacing:.18em;line-height:1}.invite-box{margin-top:.85rem;display:grid;gap:.55rem}.invite-input{font-size:.88rem;font-weight:600;letter-spacing:.01em;color:var(--ink)}.invite-actions{display:flex;flex-wrap:wrap;gap:.5rem}.rank-title{margin:0 0 .65rem;font-size:1.05rem}.rank-block{display:grid}.waiting-host{margin-top:1.5rem;display:grid;gap:.75rem;justify-items:start}.pulse-ring{width:18px;height:18px;border-radius:50%;background:var(--signal);box-shadow:0 0 #ff4d1a8c;animation:pulse 1.5s infinite}@keyframes pulse{70%{box-shadow:0 0 0 14px #ff4d1a00}to{box-shadow:0 0 #ff4d1a00}}.live-rail{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}.live-rail li{display:grid;grid-template-columns:1.6rem 1fr auto .7rem;gap:.55rem;align-items:center;padding:.7rem .85rem;border-radius:14px;background:#0c12220a}.live-rail li.me{background:#2ec4b62e;outline:2px solid rgba(46,196,182,.45)}.live-rail .rank{font-weight:800;color:var(--muted)}.live-rail .pts{font-weight:800;font-variant-numeric:tabular-nums}.live-rail .dot{width:9px;height:9px;border-radius:50%;background:#0c12222e}.live-rail .dot.on{background:var(--ok);box-shadow:0 0 0 3px #0a7a4b2e}.countdown-screen{min-height:calc(100vh - 80px);display:grid;place-content:center;text-align:center;gap:.5rem}.countdown-num{font-family:var(--font-display);font-size:clamp(6rem,28vw,12rem);line-height:.9;letter-spacing:.04em;animation:popIn .35s ease}@keyframes popIn{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}.quiz{display:grid;gap:.9rem}.quiz-top{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;justify-content:space-between}.type-badge{display:inline-block;padding:.3rem .7rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.progress-dots{display:flex;gap:.28rem;flex-wrap:wrap}.progress-dots span{width:10px;height:10px;border-radius:50%;background:#0c12221f}.progress-dots span.done{background:var(--line)}.progress-dots span.now{background:var(--signal);transform:scale(1.2)}.quiz-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}.timer-num{font-variant-numeric:tabular-nums;font-size:1.2rem}.timer-block.urgent .timer-num{color:var(--signal)}.timer-bar{height:8px;border-radius:999px;background:#0c12221a;overflow:hidden}.timer-bar>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--line),var(--signal));transform-origin:left center;animation:shrink linear forwards}.timer-block.urgent .timer-bar>i{background:var(--signal)}@keyframes shrink{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.prompt{margin:0;font-size:clamp(1.25rem,3vw,1.55rem)}.map-wrap{height:min(38vh,320px);border-radius:18px;overflow:hidden;border:2px solid rgba(12,18,34,.08)}.choices{display:grid;gap:.6rem}@media(min-width:700px){.choices{grid-template-columns:1fr 1fr}}.choice{background:#fff;color:var(--ink);border:2px solid rgba(12,18,34,.1);text-align:left;border-radius:16px;min-height:3.2rem}.choice:hover:not(:disabled){border-color:var(--ink)}.choice.correct{border-color:var(--ok);background:#d9f5e7;animation:flashOk .45s ease}.choice.wrong{border-color:var(--bad);background:#fde8e6}@keyframes flashOk{0%{transform:scale(.98)}50%{transform:scale(1.02)}to{transform:none}}.feedback-banner,.reveal-banner{padding:.85rem 1rem;border-radius:14px;font-weight:700}.feedback-banner.ok,.reveal-banner{background:#2ec4b62e}.feedback-banner.no{background:#0c12220f;color:var(--muted)}.round-results{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}.round-results li{display:flex;justify-content:space-between;padding:.45rem .7rem;border-radius:10px;background:#0c12220a;font-size:.92rem}.round-results li.ok{color:var(--ok);font-weight:700}.line-pills,.line-logos{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;margin:.35rem 0 .5rem;align-items:center}.line-logo-img{width:clamp(4.5rem,18vw,7rem);height:clamp(4.5rem,18vw,7rem);object-fit:contain;background:#fff;border-radius:18px;padding:.45rem;box-shadow:0 8px 22px #0c122224;animation:logoIn .45s ease both}.line-pill,.line-badge{min-width:3.6rem;min-height:3.6rem;padding:.55rem .85rem;border-radius:999px;font-weight:800;font-size:clamp(.95rem,2.8vw,1.25rem);letter-spacing:.01em;text-align:center;display:inline-grid;place-items:center;box-shadow:0 8px 20px #0c122233,inset 0 -3px #0003;border:3px solid rgba(255,255,255,.22);animation:logoIn .45s ease both;max-width:11rem}.line-badge.wide{border-radius:18px;min-width:4.5rem;padding:.65rem .9rem;font-size:clamp(.72rem,2.2vw,.95rem);line-height:1.15}.line-badge-inner{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.line-badge.more{font-size:1rem;opacity:.9}@keyframes logoIn{0%{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}.station-image-wrap{border-radius:18px;overflow:hidden;background:#0c12220f}.station-image{width:100%;max-height:340px;object-fit:cover;display:block;animation:fadeUp .4s ease both}.local-name{font-family:var(--font-display);font-size:clamp(2rem,6vw,3.4rem);letter-spacing:.04em}.solo-hero .featured{margin-top:1.25rem;display:grid;gap:.55rem;position:relative;z-index:1}.featured-row{display:flex;flex-wrap:wrap;gap:.5rem}.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.65rem 1rem;border-radius:999px;background:#fff;color:var(--ink);border:2px solid transparent;box-shadow:0 6px 18px #0c122214;position:relative;overflow:hidden}.chip:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent, var(--signal))}.chip small{color:var(--muted);font-weight:600}.solo-layout{grid-template-columns:1fr!important;max-width:720px;margin:0 auto}.solo-hud{display:flex;flex-wrap:wrap;gap:.85rem 1.25rem;padding:.65rem .9rem;border-radius:14px;background:#0c12220d;font-size:.92rem}.solo-hud strong{font-variant-numeric:tabular-nums}.solo-hud .hint{margin-left:auto;color:var(--muted);font-size:.82rem}.keycap{flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:6px;display:grid;place-items:center;font-size:.75rem;font-weight:800;background:#0c122214;color:var(--muted)}.reveal-banner{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem}.reveal-banner.ok{background:#2ec4b638}.next-btn{margin-left:auto}.side-rail .tiny{margin:.75rem 0 0;font-size:.85rem}.results-card{display:grid;gap:.85rem}.champion{display:grid;gap:.15rem;padding:1rem 1.1rem;border-radius:18px;background:var(--ink);color:#fff}.champion span{opacity:.7;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem}.champion strong{font-family:var(--font-display);font-size:clamp(2rem,6vw,3rem);letter-spacing:.04em}.champion em{font-style:normal;color:var(--line);font-weight:800}.leaderboard{display:grid;gap:.45rem}.leaderboard div{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border-radius:14px;background:#fff}.leaderboard div.first{outline:2px solid var(--ink)}.final-ranking{display:grid;gap:.55rem}.ranking-list{list-style:none;margin:0;padding:0}.ranking-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;padding:.85rem 1rem;border-radius:14px;background:#fff}.ranking-list li.first{outline:2px solid var(--ink);background:#fff8f4}.ranking-list li.me{box-shadow:inset 3px 0 0 var(--signal)}.rank-badge{font-family:var(--font-display);font-size:1.35rem;letter-spacing:.04em;min-width:2.4rem}.rank-info{display:grid;gap:.1rem}.rank-info small{color:var(--muted);font-size:.85rem}.rank-score{font-weight:800;font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.error-text{color:var(--bad);font-weight:600;margin:0}.fade-up{animation:fadeUp .45s ease both}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media(max-width:640px){.settings-row{grid-template-columns:1fr}.hero{min-height:auto;padding-top:1.5rem}.mode-cards{grid-template-columns:1fr}.setup-card{padding-bottom:6rem}.map-wrap{height:240px}.solo-hud .hint{margin-left:0;width:100%}}