*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#071225;color:#fff;font-family:monospace;touch-action:none}#screen{width:100%;height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;background:#071225}canvas{display:block;max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated;touch-action:none}button{font:900 18px monospace;color:white;border:2px solid #8ad9ea;background:#123451;box-shadow:0 3px 0 #030d20;min-width:44px;min-height:40px;cursor:pointer;touch-action:none}button:focus-visible{outline:3px solid #ffdb66;outline-offset:2px}button:active{transform:translateY(2px);box-shadow:none}#tools{position:absolute;right:8px;top:8px;display:flex;gap:5px;opacity:.85}#tools button{min-width:32px;min-height:30px;font-size:18px}#controls{position:absolute;bottom:12px;left:15px;right:15px;display:none;justify-content:space-between;align-items:end;pointer-events:none}#controls button{pointer-events:auto;background:#11385ad9;border-color:#b5f4fa;min-width:48px;min-height:44px}#controls .dpad{display:grid;grid-template-columns:repeat(3,48px);gap:4px}button[data-key=up]{grid-column:2}button[data-key=left]{grid-column:1}#controls #catch{height:65px;width:72px;background:#e97035;border:3px solid #ffe399;font-size:25px}#record{position:absolute;inset:0;display:grid;place-items:center;background:#031022ba;overflow:auto;padding:12px}#record[hidden]{display:none}.card{width:min(550px,96%);text-align:center;background:#0b223bea;border:3px solid #84e5e3;box-shadow:8px 8px #040a19;padding:16px;max-height:100%;overflow:auto}h2{color:#ffdb66;margin:0 0 8px;font-size:24px}p{margin:8px 0;font-size:15px}#letters{display:flex;justify-content:center;gap:18px}.letter{display:flex;flex-direction:column;gap:5px}.letter b{font-size:34px;padding:4px 12px;border:2px solid transparent}.letter.selected b{border-color:#ffe184;color:#ffe184}#save,#again{padding:8px 20px;margin:5px;min-width:160px}#leaderboard{display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:14px}#leaderboard div{padding:3px;background:#153451}#status{color:#ffe184;min-height:18px}@media(pointer:coarse){#controls{display:flex}#tools{top:4px;right:4px}}@media(max-aspect-ratio:1/1){#screen{align-items:start;padding-top:50px}canvas{width:100%;height:auto;max-height:calc(100dvh - 170px)}#controls{bottom:max(24px,env(safe-area-inset-bottom))}#controls button{min-height:58px}#controls .dpad{grid-template-columns:repeat(3,58px)}#controls #catch{height:84px;width:90px}.card{padding:10px}#initialHint{font-size:13px}}@media(max-height:450px){#controls{bottom:5px}#controls button{min-width:39px;min-height:34px}#controls .dpad{grid-template-columns:repeat(3,39px)}#controls #catch{height:48px;width:54px}.card{padding:6px}#leaderboard{font-size:12px}.letter b{font-size:24px}}

@media(max-aspect-ratio:1/1){#screen{padding:0;align-items:center;padding-bottom:116px}canvas{max-height:100%;max-width:100%}#screen.stacked{align-items:flex-start}#controls{bottom:max(12px,env(safe-area-inset-bottom))}#controls button{min-height:44px}#controls .dpad{grid-template-columns:repeat(3,48px)}#controls #catch{height:70px;width:78px}#tools{z-index:3;top:4px;right:4px;opacity:.75}#screen.stacked #tools{top:auto;bottom:15px;left:50%;right:auto;transform:translateX(-50%);gap:2px}#screen.stacked #tools button{min-width:27px;width:27px}}

@media(max-aspect-ratio:1/1){#screen:not(.touch-layout){padding-bottom:0}#screen.stacked #tools{bottom:80px}}

/* Tablet dock: two full 80px directional rows, clear of the game. */
@media(min-width:600px) and (min-height:500px){
 #screen.touch-layout{padding:0 0 208px;align-items:center}
 #screen.stacked.touch-layout{align-items:flex-start}
 #controls{bottom:max(16px,env(safe-area-inset-bottom));left:28px;right:28px}
 #controls .dpad{grid-template-columns:repeat(3,80px);gap:8px}
 #controls button{width:80px;height:80px;min-width:80px;min-height:80px;font-size:32px;border-width:3px;border-radius:10px}
 #controls #catch{width:120px;height:120px;font-size:46px;border-width:5px;border-radius:24px}
 #screen.touch-layout #tools{top:auto;bottom:152px;left:auto;right:28px;transform:none;gap:10px}
 #screen.touch-layout #tools button{width:48px;height:44px;min-width:48px;min-height:44px;font-size:24px}
}

#game{image-rendering:auto}button{font-family:Arial,sans-serif}#controls button:active{filter:brightness(1.3)}