:root{--bg: #14112b;--bg-2: #1e1a3d;--card: #2a2552;--card-hi: #352f66;--text: #f5f3ff;--muted: #a5a0d0;--accent: #8b5cf6;--accent-2: #a78bfa;--correct: #22c55e;--near: #eab308;--ring: #f472b6;--radius: 14px;color-scheme:dark}@media(prefers-color-scheme:light){:root{--bg: #f6f4ff;--bg-2: #ebe7ff;--card: #ffffff;--card-hi: #f1edff;--text: #1b1638;--muted: #605a8c;--accent: #7c3aed;--accent-2: #6d28d9;--correct: #16a34a;--near: #ca8a04;color-scheme:light}}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}body{min-height:100dvh;background:radial-gradient(120% 60% at 50% 0%,var(--bg-2),var(--bg) 70%) fixed}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}#app{max-width:480px;margin:0 auto;padding:12px 16px calc(24px + env(safe-area-inset-bottom))}.top{display:flex;align-items:center;justify-content:space-between}.logo{margin:0;font-size:1.9rem;font-weight:900;letter-spacing:-.03em;text-transform:uppercase}.logo span{color:var(--accent-2)}.icon-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--card-hi);background:var(--card);font-weight:800}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:12px 0 8px;padding:4px;border-radius:999px;background:var(--card)}.tabs button{border:0;border-radius:999px;padding:8px;background:transparent;color:var(--muted);font-weight:700}.tabs button.on{background:var(--accent);color:#fff}.axis{margin:8px 0;text-align:center;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.cards{list-style:none;margin:0;padding:0;display:grid;gap:8px}.card{display:flex;border-radius:var(--radius);background:var(--card);border:2px solid transparent;box-shadow:0 2px #00000040;transition:transform .15s,background .2s,border-color .2s}.cards.intro .card{animation:rise .35s calc(var(--i) * 40ms) both}.card.selected{border-color:var(--ring);transform:scale(1.02)}.card.correct{background:var(--correct);color:#04210f}.card.earlier,.card.later{background:var(--near);color:#2a1d00}.card-main{flex:1;display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 12px;border:0;background:none;text-align:left}.card-main .text{flex:1;font-weight:600;line-height:1.25}.cat{font-size:1.3rem}.year{padding:2px 8px;border-radius:999px;background:#00000040;color:#fff;font-weight:800;font-size:.85rem;white-space:nowrap}.dir,.lock{font-size:1.2rem;font-weight:900}.dir{animation:bob .9s ease-in-out infinite alternate}.nudges{display:flex;flex-direction:column;border-left:1px solid rgb(127 127 127 / .25)}.nudges button{flex:1;width:40px;border:0;background:none;color:inherit;opacity:.7;font-size:.75rem}.nudges button:hover,.card-main:not(:disabled):hover{opacity:1;background:#ffffff0f}.attempts{display:flex;justify-content:center;gap:8px;margin:12px 0 4px}.dot{width:12px;height:12px;border-radius:50%;background:var(--accent)}.dot.used{background:transparent;box-shadow:inset 0 0 0 2px var(--muted);opacity:.5}.actions{display:flex;gap:8px;margin-top:12px}.btn{flex:1;border:0;border-radius:999px;padding:14px 16px;font-weight:800;transition:transform .1s,filter .2s}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.45}.btn.primary{background:var(--accent);color:#fff;box-shadow:0 4px color-mix(in srgb,var(--accent) 55%,black)}.btn.ghost{background:var(--card);border:2px solid var(--card-hi)}.btn.wide{width:100%;margin-top:8px}.ad-tag{margin-left:4px;padding:1px 5px;border-radius:4px;background:var(--near);color:#2a1d00;font-size:.65rem;vertical-align:2px}.tip{text-align:center;color:var(--muted);font-size:.85rem}.panel{margin-top:16px;padding:16px;border-radius:var(--radius);background:var(--card);text-align:center;animation:rise .4s both}.panel h2{margin:0 0 4px;font-size:1.6rem}.panel p{margin:0;color:var(--muted)}.answer{margin:12px 0 0;padding-left:1.5em;text-align:left}.answer li{margin:4px 0}.countdown{margin-top:12px!important;font-size:.9rem}.countdown b{font-variant-numeric:tabular-nums;color:var(--text)}.modal{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:16px;background:#0009;animation:fade .2s both}.modal-box{position:relative;width:100%;max-width:420px;max-height:90dvh;overflow:auto;padding:20px;border-radius:20px;background:var(--bg-2);animation:rise .25s both}.modal-box h2{margin:0 0 12px}.close{position:absolute;top:12px;right:12px}.legend{list-style:none;padding:0}.legend li{display:flex;gap:10px;align-items:center;margin:6px 0}.swatch{flex:none;width:22px;height:22px;border-radius:6px}.swatch.correct{background:var(--correct)}.swatch.earlier{background:var(--near)}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}.stat-row b{display:block;font-size:1.8rem}.stat-row span{font-size:.75rem;color:var(--muted)}.dist{list-style:none;padding:0;margin:0}.dist li{display:flex;align-items:center;gap:8px;margin:4px 0}.dist span{width:20px;text-align:right;font-weight:700}.bar{width:var(--w);padding:2px 8px;border-radius:4px;background:var(--accent);color:#fff;text-align:right;font-weight:700}.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:30;transform:translate(-50%);padding:10px 16px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:700;white-space:nowrap;animation:rise .2s both}.confetti{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:fall 2s ease-in both}.fake-ad{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#000;color:#fff;text-align:center}.fake-ad-tag{display:inline-block;padding:2px 8px;border-radius:4px;background:var(--near);color:#000;font-weight:800}.fake-ad-count{font-size:3rem;font-weight:900}@media(max-height:760px){#app{padding-top:8px}.logo{font-size:1.5rem}.icon-btn{width:34px;height:34px}.tabs{margin:8px 0 4px}.tabs button{padding:6px}.axis{margin:4px 0}.cards{gap:6px}.card-main{min-height:50px;padding:6px 12px}.btn{padding:11px 16px}.tip{margin:8px 0 0}}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}@keyframes fade{0%{opacity:0}}@keyframes bob{to{transform:translateY(-3px)}}@keyframes fall{to{transform:translate(var(--drift),105vh) rotate(720deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
