:root{--bg:#0b0b1a;--fg:#f4f4ff;--acc:#ffd400;--panel:#1a1a3a;--bd:#6c6cff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:"Courier New",monospace;font-weight:bold;overflow:hidden;overscroll-behavior:none}
body{display:flex;flex-direction:column;height:100dvh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
header{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;font-size:14px;letter-spacing:2px;color:var(--acc)}
#pauseBtn{width:36px;height:30px;background:var(--panel);color:var(--fg);border:3px solid var(--bd);font:inherit;cursor:pointer}
#stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;touch-action:none}
canvas{image-rendering:pixelated;touch-action:none;display:block}
#overlay{overflow-y:auto;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(5,5,20,.88);text-align:center;padding:16px}
#overlay[hidden]{display:none}
#overlay h2{margin:0 0 4px;color:var(--acc);font-size:26px;line-height:1.2;text-shadow:3px 3px 0 #b84dff}
#overlay p{margin:0 0 6px;font-size:14px;line-height:1.5;max-width:340px}
#overlay button{min-width:220px;padding:12px 16px;font:inherit;font-size:16px;color:var(--fg);background:var(--panel);border:3px solid var(--bd);box-shadow:4px 4px 0 #000;cursor:pointer}
#overlay button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}
#pad{display:none;justify-content:space-between;gap:8px;padding:8px 10px 10px;width:100%;max-width:100vw}
body.ctrl-buttons #pad{display:flex}
#pad .grp{display:flex;gap:5px;min-width:0}
#pad .grp:first-child{flex:3}
#pad .grp:last-child{flex:4}
#pad button{flex:1;min-width:0;max-width:64px;height:clamp(44px,13vw,60px);padding:0;font:inherit;font-size:18px;color:var(--fg);background:var(--panel);border:3px solid var(--bd);box-shadow:3px 3px 0 #000;touch-action:none;overflow:hidden}
#pad button[data-k="hold"]{font-size:10px;letter-spacing:0}
#pad button[data-k="hard"]{background:#1f8f2e;border-color:#3ddc4b;color:#fff}
#pad button[data-k="hard"]:active{background:#3ddc4b}
#pad button:active{background:var(--bd)}
/* Egyszerű gombstílus: ◀ ⤓ ▶ + TART a forgatás felett */
body.pad-simple #pad button[data-k="down"],body.pad-simple #pad button[data-k="ccw"]{display:none}
body.pad-simple #pad .grp:first-child{flex:3;align-items:flex-end}
body.pad-simple #pad .grp:last-child{flex:1.3;flex-direction:column;align-items:flex-end;justify-content:flex-end}
body.pad-simple #pad .grp:last-child button{flex:none;width:100%;max-width:90px}
body.pad-simple #pad button[data-k="hold"]{order:-1;height:34px;font-size:11px}
body.pad-simple #pad button[data-k="cw"]{height:clamp(52px,16vw,72px);font-size:26px}