:root{--bg-darker:#050409;--bg-dark:#0d0a1b;--bg-panel:#120e26b3;--bg-panel-light:#1e193c66;--neon-magenta:#ff007f;--neon-cyan:#00f0ff;--neon-green:#39ff14;--neon-yellow:#fffb00;--neon-orange:#ff7300;--glow-magenta:0 0 10px #ff007fcc, 0 0 20px #ff007f66;--glow-cyan:0 0 10px #00f0ffcc, 0 0 20px #00f0ff66;--glow-green:0 0 10px #39ff14cc, 0 0 20px #39ff1466;--glow-yellow:0 0 10px #fffb00cc, 0 0 20px #fffb0066;--text-primary:#fff;--text-secondary:#a29db8;--text-muted:#5e5975;--border-neon:1px solid #00f0ff33;--border-neon-bright:1px solid #00f0ff99;--font-pixel:"Press Start 2P", monospace;--font-cyber:"Orbitron", sans-serif;--font-ui:"Inter", sans-serif;font-family:var(--font-ui);background-color:var(--bg-darker);color:var(--text-primary);box-sizing:border-box;margin:0;padding:0;overflow-x:hidden}body{background-image:radial-gradient(circle at 50% 30%, #1e133c 0%, var(--bg-darker) 70%), linear-gradient(#12101c66 1px, transparent 1px), linear-gradient(90deg, #12101c66 1px, transparent 1px);background-size:100% 100%,40px 40px,40px 40px;background-attachment:fixed;flex-direction:column;min-height:100vh;margin:0;padding:0;display:flex}*{box-sizing:border-box}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-darker)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--neon-cyan);box-shadow:0 0 5px var(--neon-cyan)}.crt-container{position:relative;overflow:hidden}.crt-container:before{content:" ";z-index:10;pointer-events:none;background:linear-gradient(#12101000 50%,#00000040 50%) 0 0/100% 4px,linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f) 0 0/6px 100%;display:block;position:absolute;inset:0}.crt-screen{animation:.15s infinite crtFlicker;position:relative}@keyframes crtFlicker{0%{opacity:.99}50%{opacity:1}to{opacity:.99}}@keyframes glowPulseMagenta{0%,to{text-shadow:0 0 5px #ff007f80,0 0 10px #ff007f4d}50%{text-shadow:var(--glow-magenta)}}@keyframes glowPulseCyan{0%,to{text-shadow:0 0 5px #00f0ff80,0 0 10px #00f0ff4d}50%{text-shadow:var(--glow-cyan)}}@keyframes glowPulseGreen{0%,to{text-shadow:0 0 5px #39ff1480,0 0 10px #39ff144d}50%{text-shadow:var(--glow-green)}}.neon-btn{font-family:var(--font-cyber);text-transform:uppercase;letter-spacing:2px;border:2px solid var(--neon-cyan);color:var(--neon-cyan);cursor:pointer;background:0 0;border-radius:4px;justify-content:center;align-items:center;gap:10px;padding:12px 24px;font-weight:700;text-decoration:none;transition:all .3s;display:inline-flex;position:relative;box-shadow:0 0 8px #00f0ff33,inset 0 0 8px #00f0ff1a}.neon-btn:hover{background:var(--neon-cyan);color:var(--bg-darker);box-shadow:var(--glow-cyan);text-shadow:none}.neon-btn-magenta{border-color:var(--neon-magenta);color:var(--neon-magenta);box-shadow:0 0 8px #ff007f33,inset 0 0 8px #ff007f1a}.neon-btn-magenta:hover{background:var(--neon-magenta);color:var(--text-primary);box-shadow:var(--glow-magenta)}.neon-btn-green{border-color:var(--neon-green);color:var(--neon-green);box-shadow:0 0 8px #39ff1433,inset 0 0 8px #39ff141a}.neon-btn-green:hover{background:var(--neon-green);color:var(--bg-darker);box-shadow:var(--glow-green)}.neon-text-cyan{color:var(--neon-cyan);text-shadow:0 0 8px #00f0ff80;font-family:var(--font-cyber);animation:3s infinite glowPulseCyan}.neon-text-magenta{color:var(--neon-magenta);text-shadow:0 0 8px #ff007f80;font-family:var(--font-cyber);animation:3s infinite glowPulseMagenta}.neon-text-green{color:var(--neon-green);text-shadow:0 0 8px #39ff1480;font-family:var(--font-cyber);animation:3s infinite glowPulseGreen}.pixel-text{font-family:var(--font-pixel);font-size:14px;line-height:1.6}.glass-panel{background:var(--bg-panel);-webkit-backdrop-filter:blur(12px);border:var(--border-neon);border-radius:12px;transition:all .3s cubic-bezier(.165,.84,.44,1);box-shadow:0 8px 32px #0000005e}.glass-panel:hover{border-color:#00f0ff66;box-shadow:0 8px 32px #00f0ff1a}#root{flex-direction:column;min-height:100vh;display:flex}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}:scope:hover{border-color:var(--accent-border)}:scope:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.game-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;max-width:800px;margin:0 auto;display:grid}@media (width>=640px){.game-grid{grid-template-columns:repeat(4,1fr)}}.game-tile{cursor:pointer;text-align:center}.game-thumb{object-fit:cover;border-radius:8px;width:100%;max-width:120px;height:auto;transition:transform .2s;box-shadow:0 4px 8px #0000004d}.game-thumb:hover{transform:scale(1.05)}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.game-screen-container{aspect-ratio:4/3;background:#000;border:3px solid #1a172e;border-radius:12px;flex:auto;width:100%;max-height:100%;position:relative;overflow:hidden;box-shadow:0 10px 30px #0009,0 0 20px #00f0ff1a}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}.game-wrapper{flex-direction:column;align-items:center;width:100%;max-width:850px;min-height:100vh;margin:0 auto;padding-bottom:24px;display:flex}.game-header{border-bottom:2px solid #00f0ff1a;justify-content:space-between;align-items:center;width:100%;margin-bottom:10px;padding:15px 20px;display:flex}.game-title-container{align-items:center;gap:15px;display:flex}.game-back-btn{border:1px solid var(--text-muted);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.game-back-btn:hover{border-color:var(--neon-magenta);color:var(--neon-magenta);box-shadow:0 0 8px #ff007f4d}.game-header h2{font-family:var(--font-cyber);letter-spacing:1px;margin:0;font-size:20px}.game-header-actions{gap:12px;display:flex}.game-action-btn{border:1px solid var(--text-muted);color:var(--text-primary);cursor:pointer;background:#1e193c66;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex}.game-action-btn:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 10px #00f0ff33}.game-screen-container{background:#000;border:3px solid #1a172e;border-radius:12px;width:100%;position:relative;overflow:hidden;box-shadow:0 10px 30px #0009,0 0 20px #00f0ff1a}.game-screen-container.active-border-magenta{border-color:#ff007f99;box-shadow:0 10px 30px #0009,0 0 20px #ff007f33}.game-screen-container.active-border-cyan{border-color:#00f0ff99;box-shadow:0 10px 30px #0009,0 0 20px #00f0ff33}.game-screen-container.active-border-green{border-color:#39ff1499;box-shadow:0 10px 30px #0009,0 0 20px #39ff1433}.game-canvas{object-fit:contain;width:100%;height:auto;max-height:70vh;display:block}.game-hud{font-family:var(--font-pixel);color:#fff;z-index:5;pointer-events:none;background:linear-gradient(#000000d9 70%,#0000);justify-content:space-between;padding:12px 20px;font-size:11px;display:flex;position:absolute;top:0;left:0;right:0}.hud-item{flex-direction:column;gap:4px;display:flex}.hud-label{color:var(--text-secondary)}.hud-value{color:var(--neon-green);text-shadow:0 0 5px #39ff1480}.hud-lives{color:var(--neon-magenta);text-shadow:0 0 5px #ff007f80;gap:5px;font-size:14px;display:flex}.game-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:8;background:#0a0816e0;flex-direction:column;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0;overflow-y:auto}.game-overlay h3{font-family:var(--font-pixel);text-align:center;margin:0 0 20px;font-size:28px}.game-overlay p{color:var(--text-secondary);text-align:center;max-width:400px;margin-bottom:25px;line-height:1.5}.overlay-stats{font-family:var(--font-pixel);gap:30px;margin-bottom:30px;font-size:14px;display:flex}.overlay-stat-val{color:var(--neon-cyan);text-shadow:0 0 5px #00f0ff80}.game-instructions-card{border-radius:12px;width:100%;max-height:30vh;margin-top:25px;padding:20px;overflow-y:auto}.instr-title{font-family:var(--font-cyber);color:var(--neon-cyan);text-transform:uppercase;letter-spacing:1px;margin:0 0 15px;font-size:16px}.instr-layout{grid-template-columns:1fr 1fr;gap:20px;display:grid}@media (width<=600px){.instr-layout{grid-template-columns:1fr}}.instr-list{margin:0;padding:0;list-style:none}.instr-list li{color:var(--text-secondary);align-items:center;gap:10px;margin-bottom:8px;font-size:14px;display:flex}.instr-dot{background:var(--neon-magenta);width:6px;height:6px;box-shadow:0 0 4px var(--neon-magenta);border-radius:50%}.keycaps{flex-direction:column;gap:10px;display:flex}.key-row{align-items:center;gap:15px;display:flex}.keycap{color:#fff;font-family:var(--font-pixel);text-align:center;background:linear-gradient(#2e284a 0%,#17132a 100%);border:1px solid #4a3e7a;border-bottom:3px solid #100b21;border-radius:4px;min-width:32px;padding:5px 10px;font-size:9px;box-shadow:0 2px 4px #0006}.key-desc{color:var(--text-secondary);font-size:13px}.highscore-input-container{background:#1e193c66;border:1px dashed #00f0ff4d;border-radius:8px;flex-direction:column;align-items:center;gap:12px;margin-top:10px;padding:15px 25px;display:flex}.congrats-text{font-family:var(--font-pixel);text-align:center;font-size:11px;line-height:1.4}.input-row{align-items:center;gap:10px;display:flex}.highscore-input{border:2px solid var(--neon-cyan);color:#fff;font-family:var(--font-pixel);text-align:center;text-transform:uppercase;background:#0d0a1b;border-radius:4px;outline:none;width:100px;padding:8px 12px;font-size:16px;box-shadow:0 0 5px #00f0ff33}.highscore-input:focus{border-color:#fff;box-shadow:0 0 12px #00f0ff99}.highscore-input-container .save-btn{height:40px;padding:8px 16px}