@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";
:root{--bg-primary:#0f0f23;--bg-secondary:#1a1a2e;--bg-tertiary:#16213e;--bg-card:#12122a;--text-primary:#e0e0e0;--text-secondary:#888;--neon-green:#39ff14;--neon-cyan:#00d4ff;--neon-magenta:#f0f;--neon-orange:#f60;--neon-yellow:gold;--neon-red:#ff0040;--neon-blue:#48f;--pixel-border:#336;--pixel-border-light:#55a;--pixel-shadow:#000;--font-pixel:"Press Start 2P", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-pixel);scrollbar-width:thin;scrollbar-color:var(--pixel-border) var(--bg-primary);font-size:11px;line-height:2}body{background:radial-gradient(ellipse at 20% 50%, #39ff1408 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, #00d4ff08 0%, transparent 50%), var(--bg-primary);min-height:100vh;overflow-x:hidden}.crt-overlay{pointer-events:none;z-index:9999;position:fixed;inset:0}.crt-overlay:before{content:"";background:repeating-linear-gradient(0deg,#0000001f 0 1px,#0000 1px 3px);position:absolute;inset:0}.crt-overlay:after{content:"";background:radial-gradient(#0000 55%,#00000059 100%);position:absolute;inset:0}.pixel-container{max-width:1100px;margin:0 auto;padding:24px 16px}.pixel-box{background:var(--bg-secondary);border:3px solid var(--pixel-border);box-shadow:4px 4px 0px var(--pixel-shadow), inset -1px -1px 0px #0000004d, inset 1px 1px 0px #ffffff0a;padding:16px;position:relative}.pixel-box--glow-green{border-color:var(--neon-green);box-shadow:4px 4px 0px var(--pixel-shadow), 0 0 8px #39ff1433}.pixel-box--glow-cyan{border-color:var(--neon-cyan);box-shadow:4px 4px 0px var(--pixel-shadow), 0 0 8px #00d4ff33}.pixel-box--glow-magenta{border-color:var(--neon-magenta);box-shadow:4px 4px 0px var(--pixel-shadow), 0 0 8px #f0f3}.text-glow-green{color:var(--neon-green);text-shadow:0 0 4px var(--neon-green), 0 0 8px #39ff1480, 0 0 16px #39ff1433}.text-glow-cyan{color:var(--neon-cyan);text-shadow:0 0 4px var(--neon-cyan), 0 0 8px #00d4ff80, 0 0 16px #00d4ff33}.text-glow-magenta{color:var(--neon-magenta);text-shadow:0 0 4px var(--neon-magenta), 0 0 8px #ff00ff80}.text-glow-yellow{color:var(--neon-yellow);text-shadow:0 0 4px var(--neon-yellow), 0 0 8px #ffd70080}.text-glow-red{color:var(--neon-red);text-shadow:0 0 4px var(--neon-red), 0 0 12px #ff004080}.pixel-btn{font-family:var(--font-pixel);cursor:pointer;color:#fff;text-transform:uppercase;letter-spacing:1px;image-rendering:pixelated;border:3px solid #0000;outline:none;padding:10px 18px;font-size:9px;transition:transform 60ms,box-shadow 60ms;position:relative}.pixel-btn--cyan{border-color:var(--neon-cyan);box-shadow:0 4px 0 #006680, 0 6px 0 var(--pixel-shadow);background:#09b}.pixel-btn--green{border-color:var(--neon-green);box-shadow:0 4px 0 #152, 0 6px 0 var(--pixel-shadow);background:#283}.pixel-btn--magenta{border-color:var(--neon-magenta);box-shadow:0 4px 0 #606, 0 6px 0 var(--pixel-shadow);background:#918}.pixel-btn--red{border-color:var(--neon-red);box-shadow:0 4px 0 #813, 0 6px 0 var(--pixel-shadow);background:#b24}.pixel-btn--yellow{border-color:var(--neon-yellow);box-shadow:0 4px 0 #750, 0 6px 0 var(--pixel-shadow);background:#a80}.pixel-btn:hover{filter:brightness(1.2);transform:translateY(-2px)}.pixel-btn:active{transform:translateY(4px);box-shadow:none!important}.pixel-btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.pixel-input{font-family:var(--font-pixel);background:var(--bg-primary);border:3px solid var(--pixel-border);color:var(--neon-green);width:100%;caret-color:var(--neon-green);outline:none;padding:10px 14px;font-size:11px}.pixel-input:focus{border-color:var(--neon-cyan);box-shadow:0 0 8px #00d4ff4d}.pixel-input::placeholder{color:var(--text-secondary);opacity:.6}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes pulse-glow{0%,to{opacity:1;filter:brightness()}50%{opacity:.85;filter:brightness(1.3)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes glitch{0%,to{transform:translate(0)}10%{transform:translate(-2px,1px)}20%{transform:translate(2px,-1px)}30%{transform:translate(-1px,-2px)}40%{transform:translate(1px,2px)}50%{transform:translate(0)}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes typing{0%{width:0}to{width:100%}}@keyframes flicker{0%,to{opacity:1}92%{opacity:1}93%{opacity:.8}94%{opacity:1}96%{opacity:.9}97%{opacity:1}}@keyframes rainbow-border{0%{border-color:var(--neon-red)}16%{border-color:var(--neon-orange)}33%{border-color:var(--neon-yellow)}50%{border-color:var(--neon-green)}66%{border-color:var(--neon-cyan)}83%{border-color:var(--neon-magenta)}to{border-color:var(--neon-red)}}.anim-blink{animation:1s step-end infinite blink}.anim-pulse{animation:2s ease-in-out infinite pulse-glow}.anim-float{animation:3s ease-in-out infinite float}.anim-glitch{animation:.4s ease-in-out glitch}.anim-slide-up{animation:.4s ease-out slide-up}.anim-flicker{animation:4s infinite flicker}.anim-rainbow{animation:3s linear infinite rainbow-border}.header{text-align:center;padding:32px 0 20px}.header__title{letter-spacing:8px;margin-bottom:10px;font-size:42px;animation:4s infinite flicker,4s ease-in-out infinite float}.header__subtitle{letter-spacing:4px;margin-bottom:14px;font-size:14px}.header__message{color:var(--text-secondary);margin-bottom:6px;font-size:9px}.header__play-msg{color:var(--neon-cyan);font-size:8px}.stars{pointer-events:none;z-index:0;position:fixed;inset:0}.star{width:2px;height:2px;animation:blink var(--dur) var(--delay) infinite;background:#fff;position:absolute}.game-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0;display:grid}.game-card{background:var(--bg-card);border:3px solid var(--pixel-border);text-align:center;cursor:pointer;padding:20px 14px;transition:transform .1s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden}.game-card:before{content:"";pointer-events:none;background:linear-gradient(#ffffff08 0%,#0000 40%);position:absolute;inset:0}.game-card:hover{box-shadow:6px 6px 0px var(--pixel-shadow), 0 0 16px var(--glow-color,#00d4ff33);border-color:var(--glow-border,var(--neon-cyan));transform:translateY(-4px)}.game-card--sf2{--glow-color:#ff004040;--glow-border:var(--neon-red)}.game-card--snake{--glow-color:#39ff1440;--glow-border:var(--neon-green)}.game-card--invaders{--glow-color:#00d4ff40;--glow-border:var(--neon-cyan)}.game-card__icon{margin-bottom:12px;font-size:40px;display:block}.game-card__title{letter-spacing:1px;margin-bottom:8px;font-size:10px}.game-card__desc{color:var(--text-secondary);font-size:7px;line-height:1.8}.game-area{background:var(--bg-secondary);border:3px solid var(--pixel-border);box-shadow:4px 4px 0px var(--pixel-shadow);padding:8px;position:relative}.game-area canvas{image-rendering:pixelated;image-rendering:crisp-edges;background:#000;border:2px solid #3369;max-width:100%;margin:0 auto;display:block}.game-controls-hint{text-align:center;color:var(--text-secondary);margin-top:8px;padding:6px;font-size:7px}.game-over-overlay{z-index:100;background:#000000e0;flex-direction:column;justify-content:center;align-items:center;gap:16px;animation:.3s ease-out slide-up;display:flex;position:absolute;inset:0}.game-over-overlay__title{letter-spacing:4px;font-size:28px}.game-over-overlay__score{font-size:14px}.game-over-overlay__buttons{gap:12px;margin-top:8px;display:flex}.leaderboard{margin-top:24px}.leaderboard__tabs{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.leaderboard__tab{font-family:var(--font-pixel);background:var(--bg-primary);border:2px solid var(--pixel-border);color:var(--text-secondary);cursor:pointer;padding:6px 12px;font-size:7px;transition:all .1s}.leaderboard__tab:hover{border-color:var(--neon-cyan);color:var(--text-primary)}.leaderboard__tab--active{border-color:var(--neon-cyan);color:var(--neon-cyan);background:#00d4ff1a}.leaderboard__table{border-collapse:collapse;width:100%;font-size:8px}.leaderboard__table th{color:var(--neon-yellow);text-align:left;border-bottom:2px solid var(--pixel-border);padding:8px 6px;font-size:7px;font-weight:400}.leaderboard__table td{border-bottom:1px solid #3366;padding:6px}.leaderboard__table tr:hover td{background:#00d4ff0d}.leaderboard__rank{width:40px}.leaderboard__rank--gold{color:var(--neon-yellow)}.leaderboard__rank--silver{color:silver}.leaderboard__rank--bronze{color:#cd7f32}.leaderboard__empty{text-align:center;color:var(--text-secondary);padding:20px;font-size:8px}.visitor-badge{align-items:center;gap:12px;padding:8px 16px;font-size:8px;display:inline-flex}.visitor-badge__dot{background:var(--neon-green);width:8px;height:8px;box-shadow:0 0 6px var(--neon-green);animation:1.5s ease-in-out infinite pulse-glow}.visitor-badge__count{margin:0 4px;font-size:16px}.modal-backdrop{z-index:5000;background:#000000d9;justify-content:center;align-items:center;animation:.3s ease-out slide-up;display:flex;position:fixed;inset:0}.modal{text-align:center;width:90%;max-width:420px;padding:32px 24px}.modal__title{letter-spacing:2px;margin-bottom:24px;font-size:13px}.modal__input-group{margin-bottom:16px}.modal__error{color:var(--neon-red);min-height:14px;margin-top:6px;font-size:7px}.lang-switcher{gap:4px;display:flex}.lang-switcher__btn{font-family:var(--font-pixel);border:2px solid var(--pixel-border);color:var(--text-secondary);cursor:pointer;background:0 0;padding:4px 10px;font-size:8px;transition:all .1s}.lang-switcher__btn:hover{border-color:var(--neon-cyan);color:var(--text-primary)}.lang-switcher__btn--active{border-color:var(--neon-yellow);color:var(--neon-yellow);background:#ffd7001a}.bottom-bar{border-top:2px solid var(--pixel-border);justify-content:space-between;align-items:center;margin-top:24px;padding-top:16px;display:flex}.footer-text{color:var(--text-secondary);font-size:7px}.footer-text .heart{color:var(--neon-red);animation:1s ease-in-out infinite pulse-glow;display:inline-block}@media (max-width:768px){.game-grid{grid-template-columns:1fr}.header__title{letter-spacing:4px;font-size:28px}.header__subtitle{font-size:10px}.game-area canvas{width:100%!important;height:auto!important}.bottom-bar{text-align:center;flex-direction:column;gap:12px}}@media (max-width:480px){.header__title{font-size:20px}.pixel-container{padding:12px 8px}}