*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101b2d;color:#fff1cf;font-family:ui-monospace,Consolas,monospace;touch-action:none;user-select:none;-webkit-user-select:none}body{height:100dvh}button{font:700 13px ui-monospace,Consolas,monospace;color:#fff2cc;background:#21465c;border:1px solid #668691;border-bottom:3px solid #0a2334;border-radius:5px;min-height:38px;padding:8px 13px;cursor:pointer;touch-action:none}button:hover,button:focus-visible{background:#38637a;outline:2px solid #e5c386}button:active,button.pressed{transform:translateY(2px);background:#8c724b}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}#screen{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#stage{position:relative;flex:none;max-width:100%;overflow:hidden}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}#tools{position:absolute;right:5px;top:5px;display:flex;gap:4px;z-index:4}#tools button{min-height:29px;height:29px;min-width:31px;font-size:17px;padding:2px 6px;background:#132c41d9}#hud{position:absolute;left:8px;top:6px;width:240px;font-size:10px;background:#10273ce8;border-left:3px solid #e4bc7e;padding:5px 7px;pointer-events:none}.round{display:flex;justify-content:space-between;color:#91d5cb;font-size:9px;padding-bottom:3px}.scoreline{display:grid;grid-template-columns:1fr 24px 24px 35px;align-items:center;gap:3px;height:21px}.scoreline>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scoreline b{text-align:center;color:#a8cbd2}.scoreline strong{background:#34576b;text-align:center;font-size:15px;color:#ffe09a;padding:2px}#matchNote{font-size:8px;color:#b4c9c9;margin-top:3px}#panel{position:absolute;bottom:23px;left:12px;right:12px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;z-index:3}#panel button:first-child{background:#dfb577;color:#142b3e;border-color:#f2d5a0;box-shadow:0 3px 0 #7f6449}#panel small{width:100%;text-align:center;font-size:10px;color:#d4e4df;background:#13293dd9;padding:4px}#modal,#record{position:absolute;inset:0;z-index:10;background:#091627e8;display:flex;align-items:center;justify-content:center;padding:12px;touch-action:pan-y}.card{width:min(570px,100%);max-height:100%;overflow:auto;background:#142e44;border:1px solid #68858d;border-top:3px solid #e1bc7d;padding:18px;text-align:center;box-shadow:0 8px 30px #07152288;touch-action:pan-y}h2{font-size:20px;margin:0 0 14px;color:#f6d699}p{font-size:12px;line-height:1.5}#modalBody{text-align:left;font-size:12px;line-height:1.65}#modalBody p{margin:7px 0}#modalActions{display:flex;justify-content:center;gap:8px;margin-top:15px;flex-wrap:wrap}#controls{display:none;width:100%;flex:none;justify-content:space-between;align-items:center;padding:6px 14px;gap:10px;background:#152d43;border-top:1px solid #516676;min-height:100px;max-height:112px}.dpad{display:grid;grid-template-columns:43px 43px 43px;grid-template-rows:43px 43px;gap:2px}.dpad button{font-size:21px;padding:2px}.dpad [data-key=up]{grid-column:2}.dpad [data-key=left]{grid-column:1;grid-row:2}.dpad [data-key=down]{grid-column:2;grid-row:2}.dpad [data-key=right]{grid-column:3;grid-row:2}.actions{display:flex;gap:6px;align-items:center}.actions button{width:68px;height:64px;padding:3px;font-size:11px}.actions #hitBtn{background:#b98951;color:#fff5d3;border-color:#ebc687;height:74px;width:76px}.actions .minor{height:44px;width:57px;font-size:10px}#letters{display:flex;gap:9px;justify-content:center;margin:12px 0}.letter{display:flex;flex-direction:column;gap:4px;width:52px}.letter b{font-size:30px;padding:7px;background:#203f56;cursor:pointer}.letter.selected b{color:#ffdb84;outline:2px solid #ffdb84}.letter button{padding:3px;min-height:31px}#leaderboard{font-size:12px;line-height:1.6;margin:12px auto;max-height:155px;overflow:auto;max-width:250px}#status{min-height:20px;color:#a9dacf}#record .card>button{margin:4px}body.touch #controls{display:flex}@media(max-width:480px){#hud{width:218px}#tools{gap:2px}#tools button{min-width:27px;padding:2px 4px}#panel{bottom:27px;gap:6px}#panel button{font-size:11px;padding:8px 9px}#controls{padding:5px 8px}.actions{gap:4px}.actions button{width:51px;height:58px}.actions #hitBtn{width:62px;height:70px}.actions .minor{width:48px}.dpad{grid-template-columns:38px 38px 38px;grid-template-rows:40px 40px}.card{padding:12px}#modalBody{font-size:11px}#panel small{font-size:9px}}@media(max-height:500px){#controls{min-height:78px;height:78px;padding:3px 18px}.dpad{grid-template-rows:33px 33px;grid-template-columns:45px 45px 45px}.actions button{height:52px}.actions #hitBtn{height:64px}#panel{bottom:22px}#panel button{min-height:30px;padding:5px 10px}#panel small{display:none}.card{padding:10px}h2{font-size:17px;margin-bottom:8px}}

#controls{min-height:116px;max-height:126px;background:linear-gradient(#172c42,#091b2c);padding:6px 22px;border-top:2px solid #36576e}#joystick{position:relative;width:106px;height:106px;flex:none;border-radius:50%;background:radial-gradient(circle,#081723 0 34%,#254254 36% 52%,#102538 54% 65%,#426377 67% 69%,#102332 71%);box-shadow:0 5px 0 #061522,inset 0 2px 4px #8babb722;touch-action:none}#stickKnob{position:absolute;left:31px;top:31px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#829ca7,#39596c 50%,#102a3b 78%);border:2px solid #79929d;box-shadow:0 5px 0 #051724;pointer-events:none}.actions{gap:12px;align-items:center}.actions button{border-radius:50%;width:68px;height:68px;background:radial-gradient(circle at 35% 25%,#64b9bf,#236773 70%);border:3px solid #86c7c9;box-shadow:0 5px 0 #102b3b;text-shadow:0 1px 2px #000;font-size:11px}.actions #hitBtn{width:82px;height:82px;background:radial-gradient(circle at 35% 25%,#ffd888,#bd773a 70%);border:3px solid #f5d99b;color:#211b1b;text-shadow:none}.actions .minor{width:52px;height:46px;border-radius:12px;font-size:9px;background:#233e53;border:2px solid #617e8a;align-self:flex-end;margin-bottom:8px}@media(max-width:480px){#controls{padding:6px 12px}.actions{gap:8px}.actions button{width:59px;height:59px}.actions #hitBtn{width:69px;height:69px}.actions .minor{width:45px;font-size:8px}#joystick{width:100px;height:100px}#stickKnob{left:28px;top:28px}}@media(max-height:500px) and (min-width:600px){#controls{position:absolute;bottom:5px;left:0;right:0;z-index:5;background:transparent;border:0;pointer-events:none;padding:0 12px;min-height:98px}#controls>*{pointer-events:auto}#joystick{width:96px;height:96px;opacity:.85}#stickKnob{left:26px;top:26px}.actions{opacity:.88}.actions #hitBtn{width:70px;height:70px}.actions button{width:58px;height:58px}}

body[data-scene=entrance] #panel{display:none}body[data-scene=intro] #panel small,body[data-scene=victory] #panel small{display:none}body[data-scene=progress] #panel{bottom:15px}body[data-scene=intro] #panel,body[data-scene=victory] #panel,body[data-scene=defeat] #panel,body[data-scene=champion] #panel{bottom:12px}

body[data-scene=title] #panel small{display:none}body[data-scene=title] #panel{bottom:12px}#panel button{border-radius:5px;font-weight:900;letter-spacing:.4px}#panel button:first-child{background:#ffd365;color:#18394d;border:2px solid #fff0a6;box-shadow:0 4px 0 #936437}#panel button:disabled{opacity:.5}body[data-scene=play] #hud{border-color:#5ecbd2;background:#123a50eb}#tools button{background:#183e54}

.scoreline{grid-template-columns:minmax(0,1fr) 30px 39px}.scoreline [hidden]{display:none!important}

/* Keep navigation reachable during every cup scene, including short landscape screens. */
body.touch:not([data-scene=play]) #panel{left:26%;right:26%;bottom:15px}body.touch:not([data-scene=play]) #controls .actions button:disabled{opacity:.35}