:root{--bg: #070b16;--bg-2: #0c1222;--panel: #121a2e;--panel-2: #18233c;--line: #24324f;--line-2: #33456b;--text: #e8eefc;--dim: #9aa8c4;--accent: #22d3ee;--accent-2: #38bdf8;--purple: #a78bfa;--green: #34d399;--red: #f87171;--amber: #fbbf24;--pink: #f472b6;--glow-cyan: 0 0 18px rgba(34, 211, 238, .45), 0 0 42px rgba(34, 211, 238, .15);--glow-purple: 0 0 18px rgba(167, 139, 250, .4), 0 0 42px rgba(167, 139, 250, .14);--glow-amber: 0 0 20px rgba(251, 191, 36, .4);--radius: 18px;--radius-sm: 12px;--font: "Segoe UI", "Open Sans", "Trebuchet MS", system-ui, sans-serif;--font-hud: "Bahnschrift", "Arial Narrow", "Trebuchet MS", sans-serif;--t-fast: .15s ease;--t-med: .3s ease;--t-slow: .55s cubic-bezier(.2, .9, .3, 1.2)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);background:radial-gradient(1200px 700px at 80% -10%,rgba(56,189,248,.14),transparent 60%),radial-gradient(1000px 700px at -10% 110%,rgba(167,139,250,.16),transparent 55%),var(--bg);color:var(--text);font-size:20px;line-height:1.35;overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none}body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 70% 20%,rgba(255,255,255,.35),transparent),radial-gradient(1.5px 1.5px at 40% 60%,rgba(255,255,255,.3),transparent),radial-gradient(1px 1px at 85% 70%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 10% 80%,rgba(255,255,255,.3),transparent),radial-gradient(1px 1px at 55% 45%,rgba(255,255,255,.25),transparent);pointer-events:none;z-index:0}#root{position:relative;z-index:1}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input,textarea{font-family:inherit}.bg-fx{position:fixed;inset:-10%;z-index:-1;background:radial-gradient(3px 3px at var(--sx,30%) var(--sy,30%),rgba(34,211,238,.6),transparent 80%),radial-gradient(2px 2px at var(--sx2,70%) var(--sy2,60%),rgba(167,139,250,.6),transparent 80%);animation:drift 26s linear infinite alternate}@keyframes drift{to{transform:translate3d(-2%,-1.5%,0)}}h1,h2,h3{margin:0;font-weight:800;letter-spacing:.02em}.title{font-family:var(--font-hud);font-weight:900;letter-spacing:.06em;text-transform:uppercase}.sub{color:var(--dim)}.center{text-align:center}.muted{color:var(--dim)}.big{font-size:1.5em}.hud-num{font-family:var(--font-hud);font-weight:900;letter-spacing:.04em}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;min-height:64px;font-size:1.25rem;font-weight:800;letter-spacing:.02em;color:var(--text);background:linear-gradient(180deg,var(--panel-2),var(--panel));border:2px solid var(--line-2);border-radius:16px;transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast),background var(--t-fast);touch-action:manipulation}.btn:active{transform:scale(.96)}.btn:hover{border-color:var(--accent)}.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.btn-primary{background:linear-gradient(180deg,#1fd4f0,#0e90b5);border-color:#43e4ff;box-shadow:var(--glow-cyan);color:#04131b}.btn-primary:hover{box-shadow:0 0 26px #22d3eeb3}.btn-green{background:linear-gradient(180deg,#19c98a,#0d8a62);border-color:#5df0bd;box-shadow:var(--glow-cyan);color:#03271b}.btn-red{background:linear-gradient(180deg,#f87171,#b3372f);border-color:#ffb4ad;color:#2a0604}.btn-amber{background:linear-gradient(180deg,#fbbf24,#c27d0a);border-color:#ffe1a1;color:#2a1800}.btn-purple{background:linear-gradient(180deg,#a78bfa,#6d4bc9);border-color:#d3c5ff;color:#160a3a}.btn-ghost{background:rgba(255,255,255,.05);border-color:var(--line-2)}.btn-warn{background:linear-gradient(180deg,#fb923c,#c2570c);border-color:#ffc49a;color:#2b1000}.btn-lg{padding:26px 46px;min-height:92px;font-size:1.7rem;border-radius:22px}.btn-xl{padding:34px 70px;min-height:116px;font-size:2rem;border-radius:28px}.btn-block{width:100%}.btn-opt{width:100%;padding:22px 26px;min-height:84px;font-size:1.4rem;font-weight:800;text-align:left;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:3px solid var(--line-2);border-radius:18px;transition:transform var(--t-fast),background var(--t-fast),border-color var(--t-fast);touch-action:manipulation}.btn-opt:hover{border-color:var(--accent)}.btn-opt:active{transform:scale(.98)}.btn-opt.correct{background:linear-gradient(180deg,#19c98a,#0d8a62);border-color:#5df0bd;color:#03271b}.btn-opt.wrong{background:linear-gradient(180deg,#f87171,#b3372f);border-color:#ffb4ad;color:#2a0604;animation:shake .4s ease}.btn-opt:disabled{opacity:.85;cursor:default}.btn-opt:disabled:active{transform:none}.chip-sel{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;min-height:62px;font-size:1.15rem;font-weight:800;border:3px solid var(--line-2);border-radius:14px;background:linear-gradient(180deg,var(--panel-2),var(--panel));transition:all var(--t-fast);touch-action:manipulation}.chip-sel:active{transform:scale(.95)}.chip-sel.correct{background:linear-gradient(180deg,#19c98a,#0d8a62);border-color:#5df0bd;color:#03271b}.chip-sel.wrong{background:linear-gradient(180deg,#f87171,#b3372f);border-color:#ffb4ad;color:#2a0604;animation:shake .4s ease}.panel{background:linear-gradient(180deg,rgba(24,35,60,.9),rgba(18,26,46,.92));border:1px solid var(--line);border-radius:var(--radius);padding:22px}.card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:2px solid var(--line);border-radius:var(--radius);padding:20px}.locked{filter:grayscale(.9) brightness(.55);pointer-events:none}.teambar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.team-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;min-height:62px;font-size:1.1rem;font-weight:800;background:var(--panel);border:3px solid var(--line-2);border-radius:999px;transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);touch-action:manipulation}.team-chip:active{transform:scale(.95)}.team-chip.active{border-color:var(--accent);box-shadow:var(--glow-cyan);background:linear-gradient(180deg,#143046,#0e2133)}.team-chip .xp-pill{background:rgba(251,191,36,.16);color:var(--amber);padding:2px 10px;border-radius:999px;font-size:.9rem}.team-avatar{font-size:1.6rem;line-height:1}.rank-row{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:1.05rem;transition:all var(--t-med)}.rank-row.first{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber),0 4px 22px #fbbf242e}.rank-pos{font-family:var(--font-hud);font-weight:900;width:30px;text-align:center}.rank-xp{margin-left:auto;font-family:var(--font-hud);font-weight:900;color:var(--amber)}.rank-pop{animation:pop .5s ease}.bar{height:20px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);overflow:hidden}.bar>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:var(--glow-cyan);transition:width .6s cubic-bezier(.2,.8,.3,1)}.bar.green>span{background:linear-gradient(90deg,var(--green),#0ea46e);box-shadow:0 0 14px #34d39966}.bar.amber>span{background:linear-gradient(90deg,var(--amber),#e08d0a);box-shadow:0 0 14px #fbbf2466}.timer{display:flex;align-items:center;gap:14px;min-width:240px}.timer-danger{color:var(--red);animation:blink .7s step-end infinite}.timer-ring{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-hud);font-weight:900;font-size:1.3rem;background:conic-gradient(var(--accent) calc(var(--p,100%)*1%),rgba(255,255,255,.1) 0)}.timer-ring.low{background:conic-gradient(var(--red) calc(var(--p,100%)*1%),rgba(255,255,255,.1) 0)}.feedback{border-radius:16px;padding:18px 26px;font-size:1.5rem;font-weight:900;text-align:center;animation:popIn .4s cubic-bezier(.2,.9,.3,1.2);border:3px solid}.feedback.ok{color:#052e22;background:linear-gradient(180deg,#34d399,#17b67d);border-color:#7df0c4;box-shadow:0 0 30px #34d39959}.feedback.err{color:#310503;background:linear-gradient(180deg,#f87171,#d6473d);border-color:#ffb4ad;box-shadow:0 0 30px #f871714d}.feedback.info{color:#03222c;background:linear-gradient(180deg,#22d3ee,#0ea5c8);border-color:#8ff0ff;box-shadow:var(--glow-cyan)}.toasts{position:fixed;top:18px;left:50%;transform:translate(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}.toast{padding:14px 28px;border-radius:999px;font-weight:900;font-size:1.15rem;border:2px solid;animation:popIn .35s ease;box-shadow:0 10px 40px #0006}.toast.badge-toast{background:var(--panel-2);border-color:var(--amber);color:var(--amber);box-shadow:var(--glow-amber)}.screen{height:100%;display:grid;grid-template-rows:auto 1fr;gap:14px;padding:16px;overflow:hidden}.main-area{display:grid;grid-template-columns:1fr 340px;gap:16px;min-height:0}.content-col,.side-col{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:14px}.full-bleed{height:100%;display:grid;place-items:center;padding:20px;overflow:hidden}.quiz-stage{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;justify-content:center;gap:18px}.quiz-stage::-webkit-scrollbar{width:6px}.quiz-stage::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}.splash{text-align:center;animation:fadeIn 1s ease}.splash h1{font-size:clamp(3rem,9vw,6.5rem)}.logo-badge{font-size:clamp(4rem,10vw,7rem);display:inline-block;animation:floaty 3s ease-in-out infinite}.map-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-auto-rows:150px}.area-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:18px;gap:6px;border:3px solid var(--line-2);border-radius:20px;background:linear-gradient(160deg,var(--panel-2),#0d1424);overflow:hidden;min-height:150px;transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);touch-action:manipulation;text-align:left}.area-card:active{transform:scale(.97)}.area-card:not(:disabled):hover{border-color:var(--accent);box-shadow:var(--glow-cyan)}.area-card.done{border-color:var(--green);box-shadow:0 0 20px #34d39940}.area-card .area-emoji{position:absolute;top:12px;right:14px;font-size:3rem;opacity:.95}.area-card .area-key{position:absolute;top:12px;left:14px;font-size:1.1rem}.area-card h3{font-size:1.2rem}.area-card.locked-state{filter:grayscale(.9) brightness(.5)}.area-card.locked-state:active{transform:none}.area-card.boss{border-color:var(--purple)}.area-card.boss:not(:disabled):hover{box-shadow:var(--glow-purple);border-color:var(--purple)}.wheel-wrap{display:grid;place-items:center}.wheel{position:relative;width:min(430px,62vmin);height:min(430px,62vmin);border-radius:50%;border:6px solid var(--purple);box-shadow:var(--glow-purple),inset 0 0 60px #a78bfa2e;transition:transform 3.8s cubic-bezier(.17,.78,.24,.98);background:#10162a}.wheel-seg{position:absolute;inset:0}.wheel-seg span{position:absolute;left:50%;top:50%;font-size:2rem;line-height:1;transform-origin:0 0}.wheel-pin{position:absolute;top:-2px;left:50%;transform:translate(-50%) rotate(180deg);font-size:2rem;z-index:3;filter:drop-shadow(0 0 8px rgba(251,191,36,.8))}.wheel-center{position:absolute;inset:0;margin:auto;width:110px;height:110px;border-radius:50%;background:var(--panel-2);border:4px solid var(--purple);display:grid;place-items:center;font-size:2.4rem;z-index:2}.locks{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.lock{width:86px;height:86px;border-radius:16px;display:grid;place-items:center;font-size:2.6rem;border:3px solid var(--line-2);background:var(--panel)}.lock.open{border-color:var(--green);box-shadow:0 0 18px #34d39966;animation:pop .5s ease}.lock.current{border-color:var(--accent);box-shadow:var(--glow-cyan)}.pcards{display:flex;flex-wrap:wrap;gap:10px}.pcard{position:relative;padding:12px 16px;border-radius:14px;border:2px solid var(--line-2);background:linear-gradient(180deg,#1a2340,#10182e);font-size:1rem;font-weight:800;text-align:center;min-width:108px;transition:transform var(--t-fast),border-color var(--t-fast);touch-action:manipulation}.pcard:not(:disabled):hover{border-color:var(--accent);transform:translateY(-2px)}.pcard:active{transform:scale(.95)}.pcard:disabled{opacity:.4}.pcard .pcount{display:block;font-size:.85rem;color:var(--amber)}.pcard-used{filter:brightness(1.6)}.hud{background:linear-gradient(180deg,rgba(24,35,60,.6),rgba(18,26,46,.55));border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px;backdrop-filter:blur(4px)}.badge-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:2px solid var(--amber);background:rgba(251,191,36,.12);font-size:.95rem;font-weight:800;animation:pop .5s ease}.key-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:2px solid var(--green);background:rgba(52,211,153,.1);font-weight:800;font-size:.95rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes popIn{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-7px)}80%{transform:translate(7px)}}@keyframes floaty{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}@keyframes blink{50%{opacity:.35}}@keyframes glowPulse{0%,to{box-shadow:var(--glow-cyan)}50%{box-shadow:0 0 34px #22d3eebf}}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes keyFly{0%{transform:scale(.2) rotate(-60deg);opacity:0}60%{transform:scale(1.25) rotate(8deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes confetti{0%{transform:translateY(-110vh) rotate(0)}to{transform:translateY(110vh) rotate(720deg)}}@keyframes scan{0%{background-position:0 0}to{background-position:0 40px}}.anim-pop{animation:pop .45s ease}.anim-slideUp{animation:slideUp .4s ease}.anim-fade{animation:fadeIn .5s ease}.anim-glow{animation:glowPulse 2.2s ease-in-out infinite}.anim-key{animation:keyFly .8s cubic-bezier(.2,.9,.3,1.2) both}.xp-float{position:fixed;font-family:var(--font-hud);font-weight:900;color:var(--amber);pointer-events:none;z-index:150;animation:xpFloat 1s ease-out forwards;text-shadow:0 0 10px rgba(251,191,36,.7)}@keyframes xpFloat{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%,-90px) scale(1.4)}}.overlay{position:fixed;inset:0;z-index:120;background:rgba(4,8,18,.82);backdrop-filter:blur(6px);display:grid;place-items:center;animation:fadeIn .25s ease}.modal{max-width:620px;width:calc(100% - 40px);padding:34px;text-align:center;background:linear-gradient(180deg,#18233c,#0d1424);border:2px solid var(--line-2);border-radius:24px;box-shadow:0 30px 80px #00000080;animation:popIn .3s cubic-bezier(.2,.9,.3,1.2)}.confetti{position:fixed;top:0;width:12px;height:16px;z-index:90;animation:confetti 4.5s linear forwards;pointer-events:none}.field{width:100%;padding:18px 20px;min-height:64px;font-size:1.3rem;font-weight:700;color:var(--text);background:rgba(255,255,255,.05);border:3px solid var(--line-2);border-radius:14px;user-select:text}.field:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow-cyan)}.pin-cells{display:flex;gap:12px;justify-content:center}.pin-cell{width:70px;height:84px;border-radius:14px;display:grid;place-items:center;font-size:2.2rem;font-weight:900;border:3px solid var(--line-2);background:var(--panel)}.pin-cell.filled{border-color:var(--green);box-shadow:0 0 14px #34d3994d}.scanline{position:relative;overflow:hidden}.scanline:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 12px,rgba(34,211,238,.05) 12px 13px);pointer-events:none;animation:scan 3s linear infinite}.opts{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.opts-2{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.chips{display:flex;gap:12px;flex-wrap:wrap}@media (max-width: 1150px){.main-area{grid-template-columns:1fr}.side-col{flex-direction:row;overflow-x:auto;gap:10px}.side-col>*{min-width:280px}body{font-size:18px}}@media (max-width: 700px){.btn-lg{min-height:76px;padding:20px 30px;font-size:1.35rem}.btn-xl{min-height:96px;padding:26px 40px;font-size:1.6rem}.map-grid{grid-auto-rows:120px}}@media (min-width: 1400px){body{font-size:22px}}