:root{
  --ink:#1d1146;--violet:#2b5fe0;--violet-d:#173c9e;--sun:#ffc233;--sun-d:#d99a00;--mint:#22c56b;--mint-d:#15964f;
  --red:#ff4d6a;--blue:#3d8bff;--card:#ffffff;--muted:#6b6490;
  font-family:"Arial Rounded MT Bold","Trebuchet MS",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:linear-gradient(180deg,#2a86ff,#79c6ff 55%,#d9f4ff 75%);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
body{background:transparent}
body::before{content:"";position:fixed;left:0;right:0;bottom:0;height:20vh;z-index:-1;border-top:10px solid #43c95a;
  background:conic-gradient(#b8702f 25%,#9a5524 0 50%,#b8702f 0 75%,#9a5524 0) 0 0/56px 56px}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

.screen{position:fixed;inset:0;overflow-y:auto;padding:max(16px,env(safe-area-inset-top)) 18px max(16px,env(safe-area-inset-bottom))}
.screen.center{display:grid;place-items:center}
.back{color:#fff;text-decoration:none;font-size:.95rem;opacity:.85}

/* buttons */
.btn{border:0;border-radius:18px;padding:14px 26px;font-size:1.15rem;letter-spacing:.02em;font-weight:900;transition:transform .08s}
.btn:active{transform:translateY(3px)}
.btn-go{background:var(--sun);color:var(--ink);box-shadow:0 6px 0 var(--sun-d),0 12px 24px #0003}
.btn-go:active{box-shadow:0 3px 0 var(--sun-d)}
.btn-ghost{background:#fff;color:var(--violet-d);box-shadow:0 6px 0 #c9c1ee}

/* lobby */
.lobby-grid{max-width:980px;margin:14px auto 0;display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}
.logo{font-size:clamp(3rem,9vw,5.6rem);line-height:.9;font-weight:900;font-style:italic;color:#ffd23f;-webkit-text-stroke:3px #14102e;paint-order:stroke fill;letter-spacing:-.03em;filter:drop-shadow(0 5px 0 #14102e) drop-shadow(0 10px 0 #0003);transform:rotate(-4deg) skewX(-6deg);margin:18px 0 26px}
.tagline{color:#fff;font-size:1.1rem;line-height:1.4;max-width:420px;margin:0 0 18px}
.daily{background:#fff;color:var(--violet-d);border-radius:14px;padding:10px 14px;margin-bottom:16px;font-size:.95rem;display:inline-block;box-shadow:0 4px 0 #c9c1ee}
#playBtn{font-size:2rem;padding:16px 64px;display:block;margin-bottom:20px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{background:#ffffff26;border-radius:16px;padding:10px 16px;color:#fff;min-width:96px}
.chip b{display:block;font-size:1.5rem}.chip span{font-size:.8rem;opacity:.9}
.level{margin-top:16px;color:#fff;font-size:.9rem;max-width:340px}
.level-bar{height:12px;background:#0003;border-radius:8px;margin-top:6px;overflow:hidden}
.level-bar div{height:100%;width:0;background:var(--sun);border-radius:8px;transition:width .5s}
.lobby-side{background:#ffffff;border-radius:26px;padding:18px;box-shadow:0 10px 0 #0002;text-align:center}
.lobby-side h3{margin:14px 0 8px;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);text-align:left}
#preview{width:180px;height:180px;background:#79c6ff;border-radius:22px}
.name-row{display:flex;gap:8px;margin-top:10px}
.name-row select{flex:1;padding:10px;border-radius:12px;border:2px solid #ddd6f7;font:inherit;background:#fff;color:var(--ink)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:38px;height:38px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 2px #ddd6f7}
.swatch[aria-pressed=true]{box-shadow:0 0 0 4px var(--violet)}
.hats{display:flex;flex-wrap:wrap;gap:8px}
.hat{border:2px solid #ddd6f7;background:#fff;border-radius:14px;padding:8px 12px;font-size:.9rem;min-width:84px}
.hat small{display:block;color:var(--muted);font-size:.72rem}
.hat[aria-pressed=true]{border-color:var(--violet);background:#f0eaff}
.hat:disabled{opacity:.55;cursor:not-allowed}
.toggles{display:grid;gap:8px;margin-top:16px;text-align:left;font-size:.9rem;color:var(--muted)}
.toggles input{width:18px;height:18px;vertical-align:-3px;margin-right:8px;accent-color:var(--violet)}

/* finding */
.finding-card{background:#fff;border-radius:26px;padding:28px 34px;text-align:center;width:min(440px,92vw);box-shadow:0 10px 0 #0002}
.finding-card h2{margin:0 0 6px}
.finding-count{font-size:2.6rem;font-weight:900;color:var(--violet)}
.finding-bar{height:14px;background:#ece7ff;border-radius:8px;overflow:hidden;margin:12px 0}
#findFill{height:100%;width:0;background:var(--mint);border-radius:8px}
.finding-name{margin:0;height:1.4em;color:var(--muted)}

/* game */
.game{padding:0;overflow:hidden;background:#2a86ff}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;left:0;right:0;top:0;padding:max(10px,env(safe-area-inset-top)) 12px 0;pointer-events:none}
.hud-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{background:#1d1146d9;color:#fff;border-radius:999px;padding:6px 14px;font-size:.9rem;font-weight:800}
.pill-hot{background:#ff4d6ad9}.pill-fire{background:#ff8a1fe6}
.icon-btn{pointer-events:auto;margin-left:auto;border:0;background:#1d1146d9;color:#fff;border-radius:999px;width:38px;height:38px;font-size:1.1rem}
.minimap{position:relative;height:22px;margin:10px 4px 0}
.mm-track{position:absolute;left:0;right:0;top:9px;height:5px;border-radius:3px;background:#ffffffaa}
.mm-dot{position:absolute;top:7px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:#1d1146;opacity:.7}
.mm-dot.me{top:2px;width:19px;height:19px;margin-left:-9px;background:var(--sun);border:3px solid var(--ink);opacity:1;z-index:2}
.ticker{margin-top:4px;text-align:center;color:#fff;font-weight:800;text-shadow:0 2px 0 #0006;min-height:1.4em;font-size:.95rem}
.banner{position:absolute;left:0;right:0;top:30%;text-align:center;color:#fff;font-size:clamp(2.4rem,9vw,5rem);font-weight:900;text-shadow:0 5px 0 var(--violet-d),0 10px 20px #0006;pointer-events:none;animation:pop .35s ease-out;padding:0 12px;line-height:1.05}
.banner small{display:block;font-size:.32em;text-shadow:0 2px 0 #0008;margin-top:10px;font-weight:700}
.toast{position:absolute;left:50%;top:26%;transform:translateX(-50%);background:#fff;color:var(--ink);border-radius:16px;padding:8px 18px;font-weight:900;box-shadow:0 5px 0 #0003;pointer-events:none;animation:pop .25s ease-out;white-space:nowrap}
.toast.good{background:var(--mint);color:#fff}.toast.bad{background:var(--red);color:#fff}
@keyframes pop{from{transform:translateX(var(--tx,0)) scale(.6);opacity:0}to{transform:translateX(var(--tx,0)) scale(1);opacity:1}}
.toast{--tx:-50%}

.sheet{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(860px,100%);max-height:54vh;background:#fff;border-radius:26px 26px 0 0;box-shadow:0 -8px 30px #0004;display:flex;flex-direction:column;padding:12px 16px max(14px,env(safe-area-inset-bottom));animation:slide .25s ease-out}
@keyframes slide{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--muted);font-weight:800}
.subject{background:#efe9ff;color:var(--violet-d);border-radius:999px;padding:3px 12px}
.timer{height:9px;background:#ece7ff;border-radius:6px;overflow:hidden;margin:8px 0}
#timerFill{height:100%;width:100%;background:var(--mint);border-radius:6px;transition:background .3s}
#timerFill.low{background:var(--red)}
.q-scroll{overflow-y:auto;overscroll-behavior:contain}
.q-text{font-size:clamp(1rem,2.6vw,1.2rem);font-weight:800;line-height:1.35;margin:4px 0 12px}
.q-text .passage{display:block;font-style:normal;font-weight:600;font-size:.95rem;line-height:1.5;background:#f3f0ff;border-radius:12px;padding:10px 12px;margin-bottom:6px}
.q-text .seq{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.q-text .seq-item{display:inline-flex;flex-direction:column;align-items:center;border:2px solid #ddd6f7;border-radius:10px;padding:4px;background:#fff;font-size:.85rem}
.q-text .seq-q{width:56px;height:56px;justify-content:center;font-size:1.5rem;border-style:dashed}
.nvr{display:block;max-width:100%;width:52px;height:52px}
.q-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{display:flex;align-items:center;gap:10px;text-align:left;background:#fff;border:3px solid var(--c);border-radius:16px;padding:10px 12px;font-weight:800;font-size:1rem;min-height:56px;box-shadow:0 4px 0 var(--c);transition:transform .08s}
.opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--c)}
.opt .l{flex:none;width:30px;height:30px;border-radius:9px;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:900}
.opt:nth-child(1){--c:#ff4d6a}.opt:nth-child(2){--c:#3d8bff}.opt:nth-child(3){--c:#17a85a}.opt:nth-child(4){--c:#e59a00}
.opt.right{background:var(--mint);border-color:var(--mint-d);color:#fff;box-shadow:0 4px 0 var(--mint-d)}
.opt.wrong{background:var(--red);border-color:#c22a47;color:#fff;box-shadow:0 4px 0 #c22a47}
.opt.right .l,.opt.wrong .l{background:#fff3;}
.opt:disabled{cursor:default}
.opt .nvr{width:44px;height:44px}
@media (max-width:560px){.q-opts{gap:8px}.opt{padding:8px;font-size:.92rem}}

/* results + summary */
.results-card,.summary-card{background:#fff;border-radius:28px;padding:24px;width:min(560px,94vw);max-height:94vh;overflow-y:auto;box-shadow:0 10px 0 #0002;text-align:center}
.summary-card{width:min(720px,94vw)}
.results-title{font-size:clamp(2rem,7vw,3rem);font-weight:900;color:var(--violet);line-height:1}
.results-title.bad{color:#d6455f}
.results-sub{color:var(--muted);margin:8px 0 14px}
.standings{list-style:none;padding:0;margin:0 0 14px;text-align:left}
.standings li{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:12px;font-weight:800;font-size:.95rem}
.standings li:nth-child(odd){background:#f6f3ff}
.standings li.me{background:var(--sun);color:var(--ink)}
.standings li.cut{border-top:3px dashed var(--red);margin-top:6px;padding-top:12px}
.standings .pos{width:2.4em;color:var(--muted)}.standings .dot{width:14px;height:14px;border-radius:50%;flex:none}
.standings .st{margin-left:auto;font-size:.8rem;color:var(--muted)}
.rewards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}
.reward{background:#fff7dd;color:#7a5600;border-radius:12px;padding:6px 12px;font-weight:900;font-size:.9rem}
.sum-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0}
.sum-cell{background:#f6f3ff;border-radius:16px;padding:12px}.sum-cell b{display:block;font-size:1.6rem;color:var(--violet)}.sum-cell span{font-size:.8rem;color:var(--muted)}
.summary-card h3{text-align:left;margin:18px 0 8px}
.mistakes{display:grid;gap:10px;text-align:left}
.mistake{background:#fff4f6;border-left:6px solid var(--red);border-radius:12px;padding:10px 14px;font-size:.92rem;line-height:1.45}
.mistake .mq{font-weight:800}.mistake .you{color:#c22a47}.mistake .ans{color:#15964f;font-weight:800}
.mistake .why{color:var(--muted);margin-top:4px}
.mistakes .none{background:#e9fbf1;border-left-color:var(--mint);border-radius:12px;padding:12px}
.sum-actions{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}

@media (max-width:820px){.lobby-grid{grid-template-columns:1fr}.logo{margin-top:8px}#playBtn{width:100%;padding-inline:0}}
@media (prefers-reduced-motion:reduce){.banner,.toast,.sheet{animation:none}}
.mistake .nvr{display:inline-block;vertical-align:middle;width:34px;height:34px;margin:0 2px}
.mistake .mq .seq{display:inline-flex;gap:4px}
.chart{display:block;max-width:100%;height:auto;margin:6px 0}
.gl-table{border-collapse:collapse;margin:6px 0;font-size:.85rem}.gl-table th,.gl-table td{border:2px solid #ddd6f7;padding:3px 9px;text-align:center}.gl-table th{background:#f3f0ff}
.mistake .chart{max-width:260px}
@media (max-width:560px){
  .q-text .chart{max-height:150px;width:auto;margin:2px auto}
  .q-text .gl-table{font-size:.78rem}.q-text .gl-table th,.q-text .gl-table td{padding:2px 6px}
  .pill{padding:5px 10px;font-size:.8rem}.hud-top{gap:6px;flex-wrap:nowrap}
  .icon-btn{width:34px;height:34px;font-size:1rem}.hud-top .icon-btn:first-of-type{margin-left:auto}
  .sheet{max-height:58vh}
}

/* Arcade art direction: deep sky, warm gold and a luminous runner showcase. */
html{background:#152b5a}
body{background:radial-gradient(ellipse at 20% 15%,#387fbb80,transparent 55%),linear-gradient(145deg,#18396c,#172950 65%,#303a70)}
body::before{height:36vh;border:0;background:linear-gradient(165deg,transparent 30%,#4a8aab18 30% 52%,transparent 52%),linear-gradient(15deg,#0e2149 40%,transparent 40%);pointer-events:none}
.back{font-size:.82rem;opacity:1;color:#d3e7ff}
.lobby-grid{max-width:1080px;gap:64px;align-items:center;margin:clamp(24px,6vh,70px) auto 32px}
.eyebrow{color:#a5d9f0;font-size:.72rem;font-weight:800;letter-spacing:.2em}
.logo{font-size:clamp(3.6rem,8vw,6.3rem);letter-spacing:-.045em;color:#ffda68;-webkit-text-stroke:2px #263454;filter:drop-shadow(0 4px 0 #bf8033) drop-shadow(0 12px 14px #071b3b70);transform:rotate(-3deg);margin:24px 0 30px}
.tagline{color:#d2e4f7;line-height:1.7;font-size:1rem;max-width:340px;margin-bottom:24px}
.btn-go{background:linear-gradient(#ffe18a,#ffc34d);box-shadow:0 5px 0 #b97b2d,0 12px 26px #07192f40,inset 0 2px 0 #fff5ce;color:#24314b}
#playBtn{font-size:1.15rem;letter-spacing:.06em;padding:19px 32px;min-width:290px;margin-bottom:28px;border-radius:16px}
#playBtn span{margin-left:28px;font-size:1.4rem}
.daily{background:#8ddacb15;border:1px solid #99e5d238;box-shadow:none;color:#c5f4de;font-size:.82rem}
.chip{border:1px solid #c0ddff22;background:#d8eaff0a;min-width:98px;border-radius:14px;padding:12px 16px}.chip b{font-size:1.35rem}.chip span{color:#bed2ed;font-size:.74rem}
.level{color:#b8cde7;font-size:.8rem}.level-bar{height:7px;background:#081b39aa}.level-bar div{background:linear-gradient(90deg,#76cfdd,#b9efe1)}
.lobby-side{padding:24px;background:#f5f8ff;border:1px solid #fff;border-radius:28px;box-shadow:0 24px 70px #071a354d,inset 0 1px 0 #fff}
.runner-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:18px;font-size:.68rem;letter-spacing:.12em;font-weight:900;color:#526787}
.ready-badge{font-size:.56rem;letter-spacing:.08em;color:#237363;background:#dcf2e9;border-radius:20px;padding:6px 9px}
#preview{display:block;width:100%;height:auto;aspect-ratio:1;max-width:260px;margin:0 auto 18px;border-radius:22px;box-shadow:0 10px 24px #263e6820}
.name-row select{min-width:0;border:1px solid #d7e0ef;font-size:.88rem;border-radius:10px}
.lobby-side h3{font-size:.68rem;color:#5e718d;margin-top:20px}.swatches{gap:10px}.swatch{width:30px;height:30px;box-shadow:0 0 0 1px #d6e1ef,inset 0 -3px 4px #0002}
.swatch[aria-pressed=true]{box-shadow:0 0 0 3px #376bb0}.hats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.hat{border:1px solid #d7e0ef;min-width:76px;flex:1;font-size:.8rem;padding:8px}.hat[aria-pressed=true]{background:#e8f0ff;border-color:#4876be}
.toggles{font-size:.78rem;color:#526582;border-top:1px solid #dde5f0;padding-top:14px;line-height:1.4}
.pill,.icon-btn{background:#172b50ed;border:1px solid #ffffff36;box-shadow:0 3px 10px #12213b20}.pill-hot{background:#a62f58}.pill-fire{background:#b85b13}
.sheet{border:1px solid #e6edfa;box-shadow:0 -12px 50px #102c5140}.subject{background:#eaf1fc}.results-card,.summary-card,.finding-card{box-shadow:0 24px 80px #06173350;border:1px solid #fff}
@media(max-width:820px){.lobby-grid{gap:28px;max-width:520px;margin-top:28px}.lobby-main{text-align:center}.tagline{margin-inline:auto}.chips{justify-content:center}.level{margin-inline:auto}.logo{font-size:4.6rem}.eyebrow{font-size:.65rem}.lobby-side{padding:20px}#playBtn{min-width:0}.logo{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.btn,.level-bar div{transition:none}}

.name-row{align-items:baseline;justify-content:space-between;font-size:1.05rem}.name-row span{font-size:.75rem;color:#5e718d}
.characters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:280px;overflow-y:auto;padding:2px}
.character{position:relative;border:1px solid #d7e0ef;background:#fff;border-radius:12px;padding:8px 6px;font-size:.8rem;text-align:center}
.character small{display:block;color:var(--muted);font-size:.68rem}
.character .dot{display:block;width:14px;height:14px;margin:0 auto 4px;border-radius:50%}
.character-art{display:block;width:72px;height:72px;margin:0 auto 4px;background-size:400% 200%;background-position:0 100%;background-repeat:no-repeat;image-rendering:pixelated}
.character[aria-pressed=true]{background:#e8f0ff;border-color:#4876be}
.character:disabled{opacity:.55;cursor:not-allowed}