@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700;900&family=Inter:wght@400;600;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--purple:#7c3aed;--purple-light:#a78bfa;--purple-dark:#4c1d95;--pink:#ec4899;--pink-light:#f9a8d4;--yellow:#fbbf24;--green:#10b981;--red:#ef4444;--bg:#0f0f1a;--bg-card:#1a1a2e;--text:#f8fafc;--text-muted:#94a3b8}html,body{background:var(--bg);width:100%;height:100%;color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:Inter,sans-serif;overflow:hidden}#root{width:100%;height:100%;overflow:hidden}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px var(--purple), 0 0 40px var(--purple)}50%{box-shadow:0 0 40px var(--purple-light), 0 0 80px var(--purple-light)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-8px)}80%{transform:translate(8px)}}@keyframes rainbow{0%{color:red}16%{color:#f80}33%{color:#ff0}50%{color:#0f0}66%{color:#08f}83%{color:#80f}to{color:red}}@keyframes pop-in{0%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes fly-up{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-80px)scale(.8)}}@keyframes glitch{0%{text-shadow:2px 0 #ec4899,-2px 0 #7c3aed}25%{text-shadow:-2px 0 #ec4899,2px 0 #7c3aed}50%{text-shadow:2px 2px #fbbf24,-2px -2px #10b981}75%{text-shadow:0 0 #ec4899}to{text-shadow:2px 0 #ec4899,-2px 0 #7c3aed}}@keyframes bounce-in{0%{transform:scale(0)}50%{transform:scale(1.15)}70%{transform:scale(.95)}to{transform:scale(1)}}@keyframes wiggle{0%,to{transform:rotate(0)}20%{transform:rotate(-5deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(3deg)}}@keyframes slide-in-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-down{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes timer-warning{0%,to{background:#ef44441a}50%{background:#ef44444d}}.font-pixel{font-family:"Press Start 2P",monospace!important}.font-orbitron{font-family:Orbitron,sans-serif!important}.game-container{background:radial-gradient(at top,#1a0a2e 0%,#0f0f1a 60%);flex-direction:column;width:100%;max-width:600px;height:100%;margin:0 auto;display:flex;position:relative;overflow:hidden}.card{background:#1a1a2ef2;border:1px solid #7c3aed4d;border-radius:16px;box-shadow:0 0 30px #7c3aed26}.btn-primary{color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:linear-gradient(135deg,#7c3aed,#ec4899);border:none;border-radius:12px;align-items:center;gap:8px;padding:14px 28px;font-family:Orbitron,sans-serif;font-size:1rem;font-weight:700;transition:transform .1s,box-shadow .2s;display:inline-flex;box-shadow:0 4px 20px #7c3aed80}.btn-primary:hover{transform:scale(1.05);box-shadow:0 8px 30px #7c3aedb3}.btn-primary:active{transform:scale(.97)}.btn-secondary{color:#a78bfa;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:0 0;border:2px solid #7c3aed;border-radius:12px;padding:12px 24px;font-family:Orbitron,sans-serif;font-size:.85rem;font-weight:700;transition:all .2s}.btn-secondary:hover{background:#7c3aed33}.btn-secondary:active{transform:scale(.97)}.slop-token,.normal-token{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;border-radius:3px;padding:1px 2px;line-height:1.8;transition:background .12s,transform .1s,color .15s;display:inline}.slop-token.active:hover,.slop-token.active:active,.normal-token:hover,.normal-token:active{background:#94a3b82e;transform:scale(1.03)}.slop-token.found{cursor:default;animation:.25s pop-in;color:#10b981!important;background:#10b98133!important;-webkit-text-decoration:line-through #10b981!important;text-decoration:line-through #10b981!important}.slop-token.missed{cursor:default;color:#ef4444!important;background:#ef444433!important}.wrong-click{animation:.5s forwards wrong-flash!important}@keyframes wrong-flash{0%{color:#ef4444;background:#ef44448c;transform:scale(1.06)}60%{background:#ef444426}to{background:0 0;transform:scale(1)}}.score-popup{pointer-events:none;color:#fbbf24;text-shadow:0 0 10px #fbbf24;z-index:9999;white-space:nowrap;font-family:Orbitron,sans-serif;font-weight:900;animation:1.2s ease-out forwards fly-up;position:fixed}.commentary-popup{pointer-events:none;color:#fbbf24;z-index:9999;white-space:nowrap;text-align:center;background:#000000eb;border:2px solid #fbbf24;border-radius:12px;max-width:90vw;padding:8px 16px;font-family:Orbitron,sans-serif;font-size:.72rem;font-weight:700;animation:2.2s ease-out forwards fly-up;position:fixed}.timer-bar-track{background:#ffffff1a;border-radius:4px;width:100%;height:8px;overflow:hidden}.timer-bar-fill{border-radius:4px;height:100%;transition:width .25s linear,background .5s}.combo-badge{color:#0f0f1a;background:linear-gradient(135deg,#fbbf24,#f59e0b);border-radius:8px;padding:4px 10px;font-family:Orbitron,sans-serif;font-size:.85rem;font-weight:900;animation:.5s wiggle}.fal-image{object-fit:cover;border:3px solid #7c3aed80;border-radius:16px;box-shadow:0 0 30px #7c3aed4d}@supports (padding:max(0px)){.safe-top{padding-top:max(12px, env(safe-area-inset-top))}.safe-bottom{padding-bottom:max(12px, env(safe-area-inset-bottom))}}