*{box-sizing:border-box}body{margin:0;background:#111d2c;color:#edf4f4;font-family:"Trebuchet MS",system-ui,sans-serif}main{max-width:540px;margin:auto;padding:16px}header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}header span,.tag{font-size:10px;letter-spacing:2px;color:#a5bac6;font-weight:bold}h1{font-size:23px;line-height:1.15;margin:6px 0 0;letter-spacing:-.7px}button{font:700 16px "Trebuchet MS",sans-serif;cursor:pointer;touch-action:manipulation;border:0;border-radius:10px;color:#eef9ff;background:#29435a}button:focus-visible{outline:3px solid #f4d196;outline-offset:2px}button:disabled{opacity:.6;cursor:default}#pause{padding:12px}.hud{display:flex;justify-content:space-between;gap:8px;font-size:14px;font-weight:bold}#keys{color:#ffda88}#lives{color:#ffa9a0}#alertText{font-size:12px;color:#b4d4d2}.alert-track{height:4px;background:#263d4d;margin:10px 0;border-radius:4px;overflow:hidden}#alertFill{display:block;height:100%;width:0;background:#ff9b63;transition:width .08s linear}.stage{position:relative;overflow:hidden;border-radius:16px;border:1px solid #3c5368;box-shadow:0 12px 40px #0003}canvas{width:100%;height:auto;display:block;aspect-ratio:4/5;touch-action:none}#overlay{position:absolute;inset:0;background:#081724b8;display:grid;place-items:center;padding:20px}#overlay[hidden]{display:none}.panel{text-align:center;background:#f5f0e4;color:#243d44;border-radius:18px;padding:22px;max-width:340px;box-shadow:0 8px 35px #0005}.panel img{display:block;width:90px;height:86px;object-fit:contain;margin:12px auto 0}.panel h2{font-size:28px;margin:8px 0 10px}.panel p{font-size:15px;line-height:1.55;margin:0 0 18px}.panel .tag{color:#6c776f}.panel button{background:#f1bf6b;color:#243740;padding:14px 20px;width:100%}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;user-select:none}.controls button{min-height:49px;border-bottom:4px solid #081623;font-size:23px}.controls button:active{transform:translateY(2px);border-bottom-width:2px}#ball{grid-column:1/-1;font-size:15px;background:#e4b56c;color:#213340;border-color:#967143}.tip{font-size:13px;line-height:1.5;margin:12px 0 8px;color:#c7d9df}.keyboard{font-size:11px;color:#7f9eae;margin:0 0 8px}@media(max-width:400px){main{padding:12px}h1{font-size:20px}header{margin-bottom:12px}.hud{font-size:12px}.panel{padding:16px}.panel p{font-size:14px}.controls{gap:6px}.controls button{min-height:45px}}