@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";:root{--color-bg: #0d0d1a;--color-surface: #1a1a2e;--color-surface2: #16213e;--color-border: #4a4e69;--color-accent: #e94560;--color-accent2: #0f3460;--color-text: #eaeaea;--color-text-dim: #888;--color-gold: #ffd700;--color-green: #39ff14;--color-cyan: #00e5ff;--font-pixel: "Press Start 2P", "Courier New", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--color-bg);color:var(--color-text);font-family:var(--font-pixel);-webkit-tap-highlight-color:transparent;touch-action:manipulation}#app{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}button{font-family:var(--font-pixel);cursor:pointer;border:none;outline:none;background:none;color:inherit;-webkit-tap-highlight-color:transparent}button:active{transform:scale(.95)}.toast{position:fixed;top:60px;left:50%;transform:translate(-50%) translateY(-80px);background:var(--color-surface);border:2px solid var(--color-accent);color:var(--color-text);font-family:var(--font-pixel);font-size:10px;padding:12px 20px;border-radius:4px;z-index:9999;transition:transform .3s ease;white-space:nowrap;box-shadow:0 0 20px #e9456066;pointer-events:none}.toast.visible{transform:translate(-50%) translateY(0)}@keyframes shake{0%,to{transform:translate(0)}10%{transform:translate(-4px,-2px)}20%{transform:translate(4px,2px)}30%{transform:translate(-3px,1px)}40%{transform:translate(3px,-1px)}50%{transform:translate(-2px,2px)}60%{transform:translate(2px,-2px)}70%{transform:translate(-1px,1px)}80%{transform:translate(1px,-1px)}90%{transform:translate(-1px)}}.shake{animation:shake .3s ease}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:0}}.blink{animation:blink 1s step-start infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 10px currentColor}50%{box-shadow:0 0 30px currentColor}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.home-screen{width:100%;height:100%;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;background:var(--color-bg)}.home-header{text-align:center;padding:32px 16px 24px;flex-shrink:0;background:linear-gradient(180deg,#0a0a18 0%,var(--color-bg) 100%);border-bottom:2px solid var(--color-accent2);position:relative}.home-header:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.15) 3px,rgba(0,0,0,.15) 4px);pointer-events:none}.home-title{font-size:clamp(20px,5vw,40px);color:var(--color-accent);text-shadow:0 0 10px var(--color-accent),0 0 30px rgba(233,69,96,.5),4px 4px 0 #7a1a28;line-height:1.4;letter-spacing:4px;margin-bottom:12px}.home-subtitle{font-size:clamp(8px,2vw,12px);color:var(--color-green);text-shadow:0 0 8px var(--color-green);letter-spacing:2px}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:24px 16px 32px;max-width:1100px;margin:0 auto;width:100%}.game-card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:6px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .15s;position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 3px);pointer-events:none}.game-card:hover,.game-card:focus-within{border-color:var(--game-color, var(--color-accent));box-shadow:0 0 20px color-mix(in srgb,var(--game-color, var(--color-accent)) 50%,transparent);transform:translateY(-2px)}.card-emoji{font-size:40px;line-height:1;filter:drop-shadow(0 0 8px currentColor)}.card-title{font-size:14px;color:var(--game-color, var(--color-accent));text-shadow:0 0 10px var(--game-color, var(--color-accent));letter-spacing:2px;text-align:center}.card-desc{font-size:8px;color:var(--color-text-dim);text-align:center;line-height:1.8}.card-score{font-size:8px;color:var(--color-gold);text-shadow:0 0 8px var(--color-gold)}.card-play-btn{margin-top:4px;background:var(--game-color, var(--color-accent));color:#000;font-family:var(--font-pixel);font-size:10px;padding:10px 24px;border:none;border-radius:4px;cursor:pointer;transition:opacity .15s,transform .15s;font-weight:700;letter-spacing:2px}.card-play-btn:hover{opacity:.85}.card-play-btn:active{transform:scale(.93)}@media (max-width: 480px){.games-grid{grid-template-columns:1fr;gap:12px;padding:16px 12px 24px}.home-header{padding:20px 12px 16px}.game-card{flex-direction:row;text-align:left;gap:14px;padding:14px 16px}.card-emoji{font-size:32px;flex-shrink:0}.game-card>div:not(.card-emoji){display:contents}.card-title{font-size:11px}.card-desc{display:none}.card-play-btn{padding:8px 16px;font-size:9px;margin-top:0}}.game-shell{width:100%;height:100%;display:flex;flex-direction:column;background:var(--color-bg);overflow:hidden;position:relative}.game-shell:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 3px);pointer-events:none;z-index:100}.game-hud{display:flex;align-items:center;justify-content:space-between;padding:0 max(12px,env(safe-area-inset-left,0px) + 4px);padding-right:max(12px,env(safe-area-inset-right,0px) + 4px);height:44px;background:var(--color-surface);border-bottom:2px solid var(--color-border);flex-shrink:0;z-index:10}.hud-btn{background:none;border:2px solid var(--color-border);color:var(--color-text);font-size:16px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;transition:border-color .15s,color .15s}.hud-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.hud-stats{display:flex;align-items:center;gap:8px;font-size:9px}.hud-score{color:var(--color-gold);text-shadow:0 0 8px var(--color-gold);min-width:60px;text-align:center}.hud-sep{color:var(--color-border)}.hud-best{color:var(--color-text-dim);font-size:8px}.hud-lives{color:var(--color-accent);font-size:10px}.canvas-area{flex:1;display:flex;justify-content:center;align-items:center;overflow:hidden;background:var(--color-bg);position:relative}.canvas-area canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%;max-height:100%}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:50;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.overlay.hidden{display:none}.overlay-box{background:var(--color-surface);border:3px solid var(--color-accent);border-radius:8px;padding:32px 40px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;box-shadow:0 0 40px #e945604d;min-width:240px}.overlay-box h2{font-size:20px;color:var(--color-accent);text-shadow:0 0 15px var(--color-accent);letter-spacing:4px}.gameover-title{font-size:18px!important}.gameover-score{font-size:12px;color:var(--color-gold);text-shadow:0 0 8px var(--color-gold)}.gameover-record{font-size:10px;color:var(--color-green);text-shadow:0 0 10px var(--color-green);animation:blink .6s step-start infinite}.gameover-record.hidden{display:none}.overlay-btn{background:var(--color-accent);color:#fff;font-family:var(--font-pixel);font-size:10px;padding:12px 28px;border:none;border-radius:4px;cursor:pointer;letter-spacing:2px;transition:opacity .15s;min-width:160px}.overlay-btn:hover{opacity:.85}.overlay-btn--secondary{background:transparent;border:2px solid var(--color-border);color:var(--color-text-dim)}.overlay-btn--secondary:hover{border-color:var(--color-text);color:var(--color-text)}.mc-dpad-wrap,.mc-action-wrap{position:absolute;bottom:max(20px,env(safe-area-inset-bottom,0px) + 12px);z-index:25;user-select:none;-webkit-user-select:none;touch-action:none}.mc-dpad-wrap{left:max(16px,env(safe-area-inset-left,0px) + 8px)}.mc-action-wrap{right:max(24px,env(safe-area-inset-right,0px) + 16px);display:flex;flex-direction:column-reverse;align-items:center;gap:10px}.mc-tap-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:transparent;z-index:15;touch-action:none}.dpad{position:relative;width:132px;height:132px}.dpad-btn{position:absolute;width:44px;height:44px;background:#00000073;border:2px solid rgba(255,255,255,.3);border-radius:10px;color:#ffffffe6;font-size:16px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 10px #00000080,inset 0 1px #ffffff26;transition:transform .07s,background .07s,box-shadow .07s;-webkit-tap-highlight-color:transparent}.dpad-btn:active,.dpad-btn.pressed{background:#ffffff40;border-color:var(--color-accent);transform:scale(.88);box-shadow:0 0 14px #e9456099,inset 0 1px #fff3}.dpad-up{top:0;left:50%;transform:translate(-50%)}.dpad-down{bottom:0;left:50%;transform:translate(-50%)}.dpad-left{top:50%;left:0;transform:translateY(-50%)}.dpad-right{top:50%;right:0;transform:translateY(-50%)}.dpad-up.pressed,.dpad-up:active,.dpad-down.pressed,.dpad-down:active{transform:translate(-50%) scale(.88)}.dpad-left.pressed,.dpad-left:active,.dpad-right.pressed,.dpad-right:active{transform:translateY(-50%) scale(.88)}.action-btn{border-radius:50%;font-family:var(--font-pixel);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .07s,background .07s,box-shadow .07s;-webkit-tap-highlight-color:transparent;border:2px solid}.action-btn--a{width:64px;height:64px;font-size:13px;background:#e945604d;border-color:var(--color-accent);color:var(--color-accent);box-shadow:0 0 16px #e9456080,0 3px 12px #0009}.action-btn--b{width:48px;height:48px;font-size:10px;background:#00c87833;border-color:#00c878;color:#00c878;box-shadow:0 0 10px #00c87859,0 2px 8px #00000080}.action-btn--a:active,.action-btn--a.pressed{transform:scale(.86);background:#e9456099;box-shadow:0 0 24px #e94560e6,0 2px 10px #00000080}.action-btn--b:active,.action-btn--b.pressed{transform:scale(.86);background:#00c87880;box-shadow:0 0 20px #00c878cc,0 2px 8px #00000080}.joystick-wrapper{display:flex;align-items:center;justify-content:center;width:110px;height:110px}.joystick-base{width:96px;height:96px;border-radius:50%;background:#0006;border:2px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 2px 14px #00000080,inset 0 1px #ffffff1a}.joystick-nib{width:42px;height:42px;border-radius:50%;background:#ffffff40;border:2px solid rgba(255,255,255,.5);position:absolute;transition:transform .04s;pointer-events:none;box-shadow:0 0 10px #fff3}@media (pointer: fine){.mc-dpad-wrap,.mc-action-wrap,.mc-tap-overlay{display:none!important}}