@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Chakra+Petch:wght@400;600;700&family=Share+Tech+Mono&display=swap";:root{--void-black:#0a0a0f;--deep-purple:#1a0a2e;--midnight-blue:#0d1b2a;--neon-cyan:#00fff7;--neon-pink:#f0f;--neon-yellow:#f0ff00;--neon-orange:#ff6b00;--neon-green:#288d5e;--panel-bg:#0d1b2ad9;--panel-border:#00fff74d;--text-bright:#fff;--text-normal:#b8c5d6;--text-dim:#5a6a7a;--glow-cyan:0 0 20px #00fff780, 0 0 40px #00fff733;--glow-pink:0 0 20px #ff00ff80, 0 0 40px #f0f3;--glow-text:0 0 10px currentColor, 0 0 20px currentColor;--font-display:"Press Start 2P", monospace;--font-ui:"Chakra Petch", sans-serif;--font-mono:"Share Tech Mono", monospace;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--ease-in-out-back:cubic-bezier(.68, -.6, .32, 1.6);font-family:var(--font-ui);color:var(--text-normal);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:600;line-height:1.4}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body:before{content:"";pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#00000026 2px 4px);animation:8s linear infinite scanlines;position:fixed;inset:0}@keyframes scanlines{0%{transform:translateY(0)}to{transform:translateY(4px)}}body{background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),  radial-gradient(ellipse 80% 50% at 20% 20%, #ff00ff26, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 80%, #00fff71f, transparent 50%), radial-gradient(ellipse 100% 100% at 50% 100%, #ff6b0014, transparent 40%),  linear-gradient(180deg, var(--deep-purple) 0%, var(--void-black) 50%, var(--midnight-blue) 100%);background-blend-mode:overlay, normal, normal, normal, normal;background-attachment:fixed;min-width:320px;min-height:100vh;margin:0}body:after{content:"";pointer-events:none;z-index:9998;background:radial-gradient(#0000 0%,#0006 100%);position:fixed;inset:0}#app{z-index:1;place-items:center;min-height:100vh;padding:clamp(12px,3vw,32px);display:grid;position:relative}.breakout-page{gap:var(--space-lg);width:min(100%,1080px);animation:pageEnter .8s var(--ease-out-expo) forwards;opacity:0;justify-items:center;display:grid;transform:translateY(20px)}@keyframes pageEnter{to{opacity:1;transform:translateY(0)}}.title-block{text-align:center;padding:var(--space-lg);animation:4s ease-in-out infinite titleFloat;position:relative}@keyframes titleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.title-block:before,.title-block:after{content:"";background:linear-gradient(90deg, transparent, var(--neon-cyan), transparent);opacity:.6;width:120%;height:1px;position:absolute;left:50%;transform:translate(-50%)}.title-block:before{top:0}.title-block:after{bottom:0}.title-block h1{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.15em;color:var(--neon-cyan);text-shadow:var(--glow-cyan);font-size:clamp(1.2rem,4vw,2rem);animation:3s infinite glitchTitle;position:relative}@keyframes glitchTitle{0%,90%,to{text-shadow:var(--glow-cyan);transform:translate(0)}92%{text-shadow:-2px 0 var(--neon-pink), 2px 0 var(--neon-cyan);transform:translate(-1px)}94%{text-shadow:2px 0 var(--neon-pink), -2px 0 var(--neon-cyan);transform:translate(1px)}96%{text-shadow:var(--glow-cyan);transform:translate(0)}}.title-block p{margin-top:var(--space-sm);color:var(--text-dim);font-size:clamp(.85rem,2vw,1rem);font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase}.hud{gap:var(--space-sm);width:min(100%,980px);padding:var(--space-md);border:1px solid var(--panel-border);background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:4px;grid-template-columns:repeat(3,minmax(80px,1fr)) auto;animation:2s ease-in-out infinite hudPulse;display:grid;position:relative}@keyframes hudPulse{0%,to{box-shadow:0 0 15px #00fff71a,inset 0 0 30px #00fff705}50%{box-shadow:0 0 25px #00fff733,inset 0 0 40px #00fff70d}}.hud:before,.hud:after{content:"";border:2px solid var(--neon-cyan);opacity:.7;width:12px;height:12px;position:absolute}.hud:before{border-bottom:none;border-right:none;top:-1px;left:-1px}.hud:after{border-top:none;border-left:none;bottom:-1px;right:-1px}.metric{padding:var(--space-sm) var(--space-md);justify-content:center;align-items:center;gap:var(--space-xs);transition:all .3s var(--ease-out-expo);background:linear-gradient(#00fff708 0%,#0000 100%);border:1px solid #00fff726;border-radius:2px;flex-direction:column;display:flex}.metric:hover{background:linear-gradient(#00fff714 0%,#0000 100%);border-color:#00fff766}.metric span{text-transform:uppercase;letter-spacing:.15em;color:var(--text-dim);font-size:.65rem;font-family:var(--font-mono)}.metric strong{font-family:var(--font-display);color:var(--neon-cyan);text-shadow:0 0 10px #00fff780;transition:transform .15s var(--ease-out-expo);font-size:clamp(.75rem,2.5vw,1rem);font-weight:400}.metric strong.updated{animation:counterPop .3s var(--ease-in-out-back)}@keyframes counterPop{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.hud-actions,.overlay-actions{gap:var(--space-sm);display:flex}.hud-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center}button{border:1px solid var(--neon-cyan);font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--neon-cyan);cursor:pointer;transition:all .2s var(--ease-out-expo);background:0 0;border-radius:2px;padding:.6rem 1.2rem;font-size:.6rem;position:relative;overflow:hidden}button:before{content:"";width:100%;height:100%;transition:left .4s var(--ease-out-expo);background:linear-gradient(90deg,#0000,#00fff733,#0000);position:absolute;top:0;left:-100%}button:hover:enabled{box-shadow:var(--glow-cyan);background:#00fff71a;transform:translateY(-2px)}button:hover:enabled:before{left:100%}button:active:enabled{background:#00fff733;transform:translateY(0)}button:disabled{opacity:.3;cursor:not-allowed;border-color:var(--text-dim);color:var(--text-dim)}button:focus-visible{outline:2px solid var(--neon-pink);outline-offset:2px}.overlay-actions button:first-child{border-color:var(--neon-pink);color:var(--neon-pink)}.overlay-actions button:first-child:hover:enabled{box-shadow:var(--glow-pink);background:#ff00ff1a}.arena-shell{background:linear-gradient(var(--void-black), var(--void-black)) padding-box, linear-gradient(135deg, var(--neon-cyan), var(--neon-pink), var(--neon-cyan)) border-box;animation:arenaEnter .6s var(--ease-out-expo) .2s forwards;opacity:0;border:2px solid #0000;border-radius:4px;position:relative;overflow:hidden;transform:scale(.95);box-shadow:0 0 30px #00fff726,0 0 60px #ff00ff1a,inset 0 0 50px #00000080}@keyframes arenaEnter{to{opacity:1;transform:scale(1)}}.arena-shell:before,.arena-shell:after{content:"";border:2px solid var(--neon-cyan);z-index:10;pointer-events:none;width:20px;height:20px;position:absolute}.arena-shell:before{border-bottom:none;border-right:none;top:8px;left:8px}.arena-shell:after{border-top:none;border-left:none;bottom:8px;right:8px}.arena-canvas{touch-action:none;display:block}.status-overlay{place-content:center;justify-items:center;gap:var(--space-md);text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:overlayFadeIn .3s var(--ease-out-expo);background:linear-gradient(#0a0a0fb3 0%,#1a0a2ed9 100%);display:grid;position:absolute;inset:0}@keyframes overlayFadeIn{0%{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}to{opacity:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}.status-overlay h2{font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--neon-pink);text-shadow:var(--glow-pink);font-size:clamp(1rem,3.5vw,1.5rem);animation:2s infinite titleGlitch}@keyframes titleGlitch{0%,95%,to{opacity:1;transform:translate(0)}96%{opacity:.8;transform:translate(-3px)}97%{opacity:.9;transform:translate(3px)}98%{opacity:1;transform:translate(0)}}.status-overlay p{color:var(--text-dim);font-size:clamp(.85rem,2vw,1rem);font-family:var(--font-mono);letter-spacing:.05em}.controls-hint{justify-content:center;align-items:center;gap:var(--space-sm);color:var(--text-dim);font-size:clamp(.75rem,1.5vw,.85rem);font-family:var(--font-mono);letter-spacing:.03em;animation:fadeIn .5s var(--ease-out-expo) .4s forwards;opacity:0;flex-wrap:wrap;margin:0;display:flex}@keyframes fadeIn{to{opacity:1}}.controls-hint kbd{min-width:1.5rem;font-family:var(--font-display);color:var(--neon-cyan);transition:all .2s var(--ease-out-expo);background:#00fff70d;border:1px solid #00fff766;border-radius:2px;justify-content:center;align-items:center;padding:.15rem .4rem;font-size:.55rem;display:inline-flex}.controls-hint kbd:hover{background:#00fff726;box-shadow:0 0 10px #00fff74d}.controls-hint span{color:var(--neon-pink);opacity:.5}@media (width<=760px){.hud{gap:var(--space-xs);padding:var(--space-sm);grid-template-columns:repeat(3,1fr)}.hud-actions{margin-top:var(--space-xs);grid-column:1/-1;justify-content:center}.metric{padding:var(--space-xs) var(--space-sm)}.controls-hint{text-align:center;max-width:95%}.title-block h1,.hud{animation:none}}@media (width<=480px){.title-block{padding:var(--space-md)}.title-block h1{letter-spacing:.08em}button{padding:.5rem .8rem;font-size:.55rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}body:before{display:none}}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}