@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--cyan: #00f5ff;--purple: #b300ff;--yellow: #ffe600;--green: #00ff41;--red: #ff003c;--dark: #0a0a0f;--darker: #060608;--panel: #111118;--border: #1a1a2e;--text: #e0e0ff;--glow-cyan: 0 0 10px #00f5ff, 0 0 20px #00f5ff40;--glow-purple: 0 0 10px #b300ff, 0 0 20px #b300ff40}html,body{height:100%;overflow:hidden;background:#000;font-family:"Press Start 2P",Courier New,monospace}body{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at top,#0d0d2b,#000 60%),repeating-linear-gradient(0deg,transparent,transparent 39px,#ffffff04 39px,#ffffff04 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,#ffffff04 39px,#ffffff04 40px);min-height:100vh;padding:8px}#app{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.arcade-cabinet{display:flex;flex-direction:column;align-items:center;width:100%;max-width:480px;max-height:100vh}.cabinet-top{width:100%;margin-bottom:8px}.marquee{background:linear-gradient(180deg,#1a0033,#0d001a);border:2px solid var(--purple);border-radius:8px 8px 0 0;padding:10px 16px;text-align:center;overflow:hidden;box-shadow:var(--glow-purple)}.marquee-text{font-size:.7rem;color:var(--purple);text-shadow:var(--glow-purple);letter-spacing:3px}.marquee-star{color:var(--yellow);margin:0 12px;font-size:.7rem;text-shadow:0 0 8px var(--yellow)}.cabinet-screen{width:100%;background:var(--dark);border:2px solid var(--cyan);border-radius:4px;box-shadow:var(--glow-cyan),inset 0 0 40px #00f5ff08;padding:20px 16px}.cabinet-controls{display:flex;align-items:center;justify-content:space-around;width:100%;background:linear-gradient(180deg,#1a1a2e,#0d0d18);border:2px solid #333;border-top:none;border-radius:0 0 12px 12px;padding:12px 24px;margin-top:-2px}.joystick{width:40px;height:40px;background:radial-gradient(circle at 40% 35%,#666,#222);border-radius:50%;border:3px solid #444;box-shadow:0 4px 8px #00000080}.btn-group{display:flex;gap:12px}.arcade-btn{width:32px;height:32px;border-radius:50%;border:3px solid rgba(255,255,255,.2);box-shadow:0 4px 8px #00000080}.arcade-btn.red{background:radial-gradient(circle at 40% 35%,#f44,#900)}.arcade-btn.blue{background:radial-gradient(circle at 40% 35%,#44f,#009)}.menu-screen{display:flex;flex-direction:column;align-items:center;gap:24px;padding:28px 16px}.menu-title{text-align:center;line-height:1.2}.title-line1{font-size:2.8rem;color:var(--cyan);text-shadow:var(--glow-cyan);letter-spacing:8px}.title-line2{font-size:2.2rem;color:var(--purple);text-shadow:var(--glow-purple);letter-spacing:6px}.menu-items{display:flex;flex-direction:column;gap:12px;width:100%;max-width:280px}.menu-btn{background:transparent;border:2px solid var(--cyan);color:var(--cyan);font-family:inherit;font-size:.65rem;padding:12px 20px;cursor:pointer;letter-spacing:2px;transition:all .1s;text-align:center;border-radius:2px}.menu-btn:hover,.menu-btn:active{background:var(--cyan);color:var(--dark);box-shadow:var(--glow-cyan);transform:scale(1.02)}.primary-btn{border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 8px #ffe6004d}.primary-btn:hover,.primary-btn:active{background:var(--yellow);color:var(--dark);box-shadow:0 0 15px #ffe60099}.menu-footer{text-align:center;color:#fff6;font-size:.45rem;display:flex;flex-direction:column;gap:8px}.controls-hint{color:#ffffff40;line-height:1.6}.game-layout{max-width:600px}.game-area{display:flex;align-items:flex-start;justify-content:center;gap:0;width:100%;background:var(--dark);border:2px solid var(--cyan);border-radius:4px;box-shadow:var(--glow-cyan);padding:8px}canvas#game-canvas{display:block;image-rendering:pixelated;flex-shrink:0}.side-panel{display:flex;flex-direction:column;gap:10px;padding:6px;width:90px;flex-shrink:0}.left-panel{align-items:flex-end}.right-panel{align-items:flex-start}.panel-box{background:var(--panel);border:1px solid #222;border-radius:2px;padding:6px 8px;width:100%}.panel-label{font-size:.4rem;color:var(--cyan);letter-spacing:1px;margin-bottom:4px}.panel-value{font-size:.75rem;color:var(--yellow);text-shadow:0 0 8px rgba(255,230,0,.5);font-variant-numeric:tabular-nums;word-break:break-all}#next-canvas{display:block;width:80px;height:80px;border:1px solid #222}.small-btn{font-size:.45rem;padding:7px 6px;width:100%;letter-spacing:1px}.canvas-wrap{flex-shrink:0;display:flex;align-items:center;justify-content:center}.mobile-hud,.mobile-game-area,.mobile-controls{display:none}.mobile-canvas-wrap{display:contents}#game-canvas-mobile{display:block;image-rendering:pixelated}@media (max-width: 600px){body{padding:0;align-items:stretch;overflow:hidden}#app{align-items:stretch;height:100dvh}.arcade-cabinet{max-width:100%;width:100%;height:100dvh;border-radius:0}.game-layout{max-width:100%;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"hud" "game" "controls"}.cabinet-top,.cabinet-controls,.game-area{display:none!important}.mobile-hud{grid-area:hud;display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-bottom:2px solid #222;padding:6px 10px;gap:6px}.mhud-item{display:flex;flex-direction:column;align-items:center;gap:2px}.mhud-label{font-size:.35rem;color:var(--cyan);letter-spacing:1px}.mhud-value{font-size:.65rem;color:var(--yellow);font-variant-numeric:tabular-nums;text-shadow:0 0 6px rgba(255,230,0,.4)}.mhud-next canvas{display:block;border:1px solid #333}.mhud-actions{display:flex;flex-direction:column;gap:4px}.mhud-btn{background:var(--panel);border:1px solid #444;color:var(--text);font-family:inherit;font-size:.5rem;padding:4px 8px;cursor:pointer;border-radius:3px;touch-action:manipulation}.mhud-btn:active{background:#333}.mobile-game-area{grid-area:game;display:flex;align-items:center;justify-content:center;height:100%;min-height:0;overflow:hidden;background:var(--dark);border-bottom:2px solid var(--cyan);box-shadow:inset 0 0 30px #00f5ff0a;padding:4px}.mobile-canvas-wrap{display:contents}.mobile-controls{grid-area:controls;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 16px max(14px,env(safe-area-inset-bottom));position:relative;background:repeating-linear-gradient(135deg,transparent,transparent 2px,rgba(255,255,255,.015) 2px,rgba(255,255,255,.015) 4px),linear-gradient(180deg,#1a1025,#0e0818,#09060f);border-top:3px solid #2a1a40;box-shadow:inset 0 2px #ffffff0f,inset 0 -2px #0006}.mobile-controls:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--purple) 20%,var(--cyan) 50%,var(--purple) 80%,transparent);opacity:.7}.gamepad{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:380px;gap:12px}.gamepad-left{flex:1;display:flex;justify-content:center}.gamepad-right{flex:1;display:flex;justify-content:center;align-items:center}.dpad{display:flex;flex-direction:column;gap:2px}.dpad-row{display:flex;gap:2px;align-items:center;justify-content:center}.dpad-empty{width:54px;height:54px}.dpad-btn{width:54px;height:54px;background:radial-gradient(ellipse at 45% 30%,#3a3060,#1a1530);border:2px solid #4a3a6a;border-bottom:5px solid #0a0810;border-right:2px solid #120e20;color:#ffffffd9;font-family:inherit;font-size:1.1rem;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;display:flex;align-items:center;justify-content:center;transition:all .04s;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 1px #ffffff1f,0 4px 6px #00000080}.dpad-btn:active{border-bottom:2px solid #0a0810;transform:translateY(3px);background:radial-gradient(ellipse at 45% 30%,#1a1530,#0d0a18);box-shadow:inset 0 1px #0000004d,0 1px 2px #0006;color:var(--cyan)}.dpad-up{border-radius:10px 10px 4px 4px;background:radial-gradient(ellipse at 45% 30%,#4a2070,#22103a);border-color:#6a30a0;border-bottom-color:#0a0410;color:#c8f;font-size:1.4rem;box-shadow:inset 0 1px #ffffff26,0 0 8px #a000ff33,0 4px 6px #00000080}.dpad-up:active{color:var(--purple);box-shadow:inset 0 1px #0000004d,0 0 12px #a000ff66,0 1px 2px #0006}.dpad-left{border-radius:10px 4px 4px 10px}.dpad-right{border-radius:4px 10px 10px 4px}.dpad-center{border-radius:4px;background:radial-gradient(ellipse at 45% 30%,#2a1a40,#140c25);border-color:#3a2055;color:#fff6;font-size:.8rem}.action-drop{width:86px;height:86px;border-radius:50%;position:relative;background:radial-gradient(circle at 50% 50%,#2a0050,#180030);border:4px solid #3a0070;box-shadow:0 0 0 2px #0a0015,0 0 20px #b400ff40,0 6px #0a0015,inset 0 -3px #00000080;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .04s}.action-drop:before{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-radius:50%;background:radial-gradient(ellipse at 40% 30%,#90f,#50a 50%,#307);box-shadow:inset 0 -4px 8px #0006,inset 0 3px 6px #ffffff26,0 0 12px #b400ff4d}.action-drop:active{transform:translateY(5px);box-shadow:0 0 0 2px #0a0015,0 0 20px #b400ff80,0 1px #0a0015,inset 0 -1px #00000080}.action-drop:active:before{background:radial-gradient(ellipse at 40% 30%,#b2f,#70c 50%,#408);box-shadow:inset 0 -2px 4px #0000004d,inset 0 2px 4px #ffffff1a,0 0 20px #b400ff99}.action-label{position:relative;z-index:1;font-family:"Press Start 2P",monospace;font-size:.42rem;color:#fff;letter-spacing:1px;text-shadow:0 0 8px rgba(255,255,255,.8),0 1px 2px rgba(0,0,0,.8);pointer-events:none}}.gameover-screen{display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px 16px}.go-title{font-size:1.6rem;color:var(--red);text-shadow:0 0 15px var(--red);letter-spacing:4px}.go-stats{width:100%;max-width:280px;display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid #333;padding:12px 16px;border-radius:2px}.stat-row{display:flex;justify-content:space-between;font-size:.55rem;color:var(--text)}.stat-row span:last-child{color:var(--yellow)}.go-name-section{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}.name-display{font-size:2rem;color:var(--cyan);text-shadow:var(--glow-cyan);letter-spacing:12px;padding:10px 16px;border:2px solid var(--cyan);min-width:220px;text-align:center;background:var(--panel)}.name-keyboard{display:flex;flex-direction:column;gap:4px;width:100%}.alpha-row{display:flex;justify-content:center;gap:3px;flex-wrap:wrap}.alpha-key{background:var(--panel);border:1px solid #444;color:var(--text);font-family:inherit;font-size:.5rem;width:30px;height:30px;cursor:pointer;border-radius:3px;transition:all .08s;touch-action:manipulation}.alpha-key:hover,.alpha-key:active{background:var(--cyan);color:var(--dark);border-color:var(--cyan)}.del-key{width:38px;color:var(--red);border-color:var(--red)}.del-key:hover,.del-key:active{background:var(--red);color:#fff}.go-actions{display:flex;gap:12px;width:100%;max-width:280px}.go-actions .menu-btn{flex:1;font-size:.5rem;padding:10px 8px}.go-actions .menu-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.go-actions .menu-btn:disabled:hover{background:transparent;color:var(--cyan)}.scores-screen{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 16px}.scores-title{font-size:1rem;color:var(--yellow);text-shadow:0 0 10px var(--yellow);letter-spacing:4px}#scores-list{width:100%;display:flex;flex-direction:column;gap:6px}.score-row{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid #222;padding:8px 12px;border-radius:2px;font-size:.5rem;color:var(--text);gap:8px}.score-row.top-1{border-color:var(--yellow);background:#ffe6000f}.score-row.top-2{border-color:#aaa;background:#aaaaaa0d}.score-row.top-3{border-color:#cd7f32;background:#cd7f320d}.score-rank{font-size:.9rem;min-width:28px}.score-name{color:var(--cyan);letter-spacing:2px;flex:1;font-size:.55rem}.score-pts{color:var(--yellow);font-variant-numeric:tabular-nums}.score-lvl{color:#888;font-size:.4rem;min-width:24px;text-align:right}.loading,.no-scores{text-align:center;font-size:.55rem;color:#fff6;padding:24px;line-height:2}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.blink{animation:blink 1s step-end infinite}@keyframes scan{0%{transform:translateY(-100%)}to{transform:translateY(100vh)}}.cabinet-screen:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);pointer-events:none;z-index:10}.cabinet-screen{position:relative;overflow:hidden}@media (max-height: 500px) and (orientation: landscape){.mobile-hud{padding:3px 8px}.mhud-value{font-size:.55rem}.mobile-controls{padding:8px 12px}.dpad-btn,.dpad-empty{width:46px;height:46px}.action-btn{width:64px;height:64px}}