:root{font-family:var(--hub-font-family,"Noto Sans KR",sans-serif);color:#182d32;background:#f5f7f7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #00a9a9;outline-offset:4px}.topbar{height:76px;border-bottom:1px solid #dce4e4;display:flex;align-items:center;gap:22px;padding:0 max(24px,calc((100vw - 1320px)/2));background:#fff}.brand{font-size:25px;font-weight:900;letter-spacing:-1px;color:#102c32;text-decoration:none}.brand span{color:#009e9e}.crumb{color:#6d7c7f;font-size:14px}.back{margin-left:auto;text-decoration:none;color:#486167;font-size:14px;font-weight:600}main{max-width:1368px;margin:auto;padding:34px 24px 20px}.heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:2px;color:#31878b}h1{font-size:36px;letter-spacing:-1.6px;margin:7px 0 0;display:flex;align-items:center;gap:14px}.beta{background:#dff6f1;color:#137c71;font-size:12px;letter-spacing:1px;border-radius:5px;padding:5px 7px}.heading p{font-size:15px;color:#6a7e82;margin:0 0 6px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.arena{border:1px solid #23474f;border-radius:18px;overflow:hidden;background:#102c32;box-shadow:0 14px 32px #102c3210}.scorebar{display:flex;align-items:center;justify-content:space-between;color:#fff;padding:17px 25px;gap:14px}.scorebar>div{display:flex;align-items:center;gap:10px;flex:1}.scorebar .opponent{justify-content:flex-end}.player-tag{font-size:12px;font-weight:800;background:#24464c;border:1px solid #3b5a60;padding:4px 7px;border-radius:5px;color:#a6dddd}.scorebar strong{font-size:16px}.scorebar .score{flex:0;gap:20px;font-size:32px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}.score-divider{font-size:20px;color:#77979e}.court-wrap{position:relative;background:#ace1e2}canvas{width:100%;height:auto;aspect-ratio:16/9;display:block;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#173b4226;backdrop-filter:blur(3px)}[hidden]{display:none!important}.overlay-card{text-align:center;background:#ffffffed;border:1px solid #fff;padding:30px 34px;border-radius:18px;box-shadow:0 12px 30px #133a4220;max-width:90%}.overlay-card h2{font-size:29px;letter-spacing:-1px;margin:10px 0}.overlay-card p{font-size:14px;color:#64777b;margin:0 0 22px}.primary{border:0;border-radius:10px;background:#123e46;color:#fff;font-weight:800;padding:14px 34px;min-width:180px}.primary:hover{background:#066666}.rally-message{position:absolute;top:16%;left:50%;transform:translateX(-50%);font-weight:900;font-size:24px;color:#173c43;text-align:center;white-space:nowrap;text-shadow:0 2px 0 #fff}.court-footer{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;gap:10px;color:#b8d2d4;font-size:13px}.court-footer>span{display:flex;align-items:center;gap:7px}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#34ddc2}.court-footer button{background:transparent;border:1px solid #3c5b61;color:#e0eeee;padding:7px 9px;font-size:12px;border-radius:6px;margin-left:5px}.setup{display:flex;flex-direction:column;gap:22px}fieldset{border:0;margin:0;padding:0;min-width:0}legend,.settings label{font-size:15px;font-weight:800;margin-bottom:13px}.step{color:#84979a;margin-right:8px;font-size:12px;letter-spacing:1px}.character-list{display:grid;gap:9px}.character{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:#fff;border:1px solid #dce4e4;border-radius:12px;padding:4px 12px 4px 1px;min-height:89px;transition:background .15s,border-color .15s}.character[aria-pressed=true]{border:2px solid #0c8888;padding:3px 11px 3px 0;background:#e9f9f5;box-shadow:0 0 0 2px #0888880c}.character img{object-fit:contain;image-rendering:pixelated;flex-shrink:0}.character>span:nth-child(2){flex:1}.character strong{display:block;font-size:16px}.character small{display:block;font-size:12px;color:#6d7d80;margin-top:5px}.type{font-size:12px;padding:4px 6px;border-radius:5px;font-weight:700;background:#fff2bf;color:#87630a}.fire .type{background:#ffede5;color:#aa4f20}.water .type{background:#e2f1ff;color:#28779f}.fair-play{color:#74868a;font-size:12px;margin:10px 0 0}.settings{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;border-top:1px solid #dce4e4;padding-top:19px}.settings label{margin:0;font-size:14px}.settings select{width:100%;min-width:0;padding:10px 6px;background:#fff;border:1px solid #d8e3e3;border-radius:7px;color:#2f5056;font-size:14px}.instructions{border-top:1px solid #dce4e4;padding-top:18px}.instructions summary{font-size:14px;font-weight:800;cursor:pointer}.instructions p{display:flex;align-items:center;gap:7px;margin:12px 0;color:#45616a;font-size:14px}.instructions p>span{margin-left:auto;text-align:right}.instructions small{color:#7d8e92;font-size:12px;margin-left:5px}kbd{background:#fff;border:1px solid #d7e1e1;border-bottom-width:3px;padding:3px 6px;border-radius:5px;font:600 12px system-ui}.instructions .rule{line-height:1.7;font-size:13px;color:#75868a;margin-bottom:0}.credits{font-size:12px;color:#849396;margin-top:24px;line-height:1.8}.credits a{color:inherit}.touch-controls{display:none;justify-content:space-between;gap:10px;padding:0 12px 14px}.touch-controls>div{display:flex;gap:8px}.touch-controls button{user-select:none;-webkit-user-select:none;touch-action:none;border:1px solid #426068;color:white;background:#24474f;border-radius:12px;min-width:54px;height:52px;padding:0 13px;font-weight:800;font-size:14px}.touch-controls .spike{background:#20c7b0;border-color:#20c7b0;color:#103c3b}.touch-controls button.pressed{background:#487a86;transform:translateY(2px)}@media(pointer:coarse){.touch-controls{display:flex}}@media(max-width:1050px){.game-layout{grid-template-columns:minmax(0,1fr) 260px;gap:16px}.character img{width:66px;height:72px}.character small{font-size:12px}.type{display:none}.scorebar{padding:16px}.court-footer{padding:12px}.heading p{font-size:14px}}@media(max-width:800px){.topbar{height:62px;padding:0 18px;gap:14px}.brand{font-size:23px}.crumb{font-size:12px}.back{font-size:12px}main{padding:24px 14px}.heading{margin-bottom:18px}.heading p{display:none}h1{font-size:30px}.game-layout{grid-template-columns:1fr;gap:26px}.setup{gap:19px}.character-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.character{flex-direction:column;text-align:center;padding:6px!important;gap:0;min-height:130px}.character img{height:72px;width:80px}.character small{display:none}.character strong{font-size:14px;margin:5px 0}.settings{grid-template-columns:auto 1fr auto 1fr;gap:10px}.settings .step{display:none}.settings label,.settings select{font-size:12px}.touch-controls{display:flex}.overlay-card{padding:20px 24px}.overlay-card h2{font-size:25px}.overlay-card p{margin-bottom:16px;font-size:13px}.overlay-card .eyebrow{font-size:10px}.primary{padding:12px 24px}.scorebar{padding:12px 14px}.scorebar strong{font-size:14px}.scorebar .score{font-size:26px;gap:14px}.player-tag{font-size:10px;padding:3px 5px}.court-footer{font-size:12px;padding:11px}.court-footer button{font-size:12px;padding:7px 6px;margin-left:2px}.rally-message{font-size:20px}.credits{font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-height:520px) and (orientation:landscape){.topbar,.heading,.credits{display:none}main{padding:8px 12px}.game-layout{grid-template-columns:minmax(0,1fr) 220px}.court-wrap{max-height:60vh}canvas{max-height:60vh;object-fit:contain}.character-list{display:flex}.character{min-height:100px}.touch-controls button{height:40px}.setup{gap:10px}.instructions{display:none}}

.touch-controls .slide{background:#3c6170;border-color:#7296a0}@media(max-width:800px){.touch-controls{gap:6px;padding-inline:8px}.touch-controls>div{gap:5px}.touch-controls button{min-width:40px;padding:0 8px;font-size:12px}}

.rank-settings{border-top:1px solid #dce4e4;padding-top:18px;display:grid;gap:10px;font-size:14px}.rank-settings>label:first-child{font-weight:800}.rank-settings>input{width:100%;border:1px solid #d8e3e3;border-radius:7px;padding:10px;font:inherit;background:white;color:#2f5056}.rank-toggle{display:flex;align-items:center;gap:7px}.rank-toggle input{width:17px;height:17px;accent-color:#087c78}.rank-settings p{font-size:13px;line-height:1.6;color:#657e83;margin:0}.rank-settings a{color:#087c78;font-size:13px}.leaderboard{margin-top:28px;border:1px solid #dce4e4;background:white;border-radius:16px;padding:24px}.ranking-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.ranking-heading h2{font-size:23px;margin:6px 0 16px;letter-spacing:-.7px}.leaderboard button{font:inherit;border:1px solid #d8e3e3;border-radius:8px;padding:9px 13px;background:white;color:#335c63;font-size:14px}.ranking-tabs{display:flex;gap:8px}.ranking-tabs button[aria-pressed=true]{background:#123e46;border-color:#123e46;color:white;font-weight:800}.ranking-rule{color:#6d7d80;font-size:13px;line-height:1.7}.ranking-scroll{overflow-x:auto}.leaderboard table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}.leaderboard caption{text-align:left;font-weight:800;padding:12px 0}.leaderboard th{background:#f2f7f6;color:#667e82;font-size:13px;font-weight:600;white-space:nowrap}.leaderboard th,.leaderboard td{padding:12px;border-bottom:1px solid #e7efee}.leaderboard td:nth-child(2){max-width:230px;overflow-wrap:anywhere}.leaderboard td:not(:nth-child(2)){white-space:nowrap;font-variant-numeric:tabular-nums}.my-record{background:#e8faf5}#my-ranking{color:#066666;font-size:14px;font-weight:700}#ranking-status,#submission-status{font-size:14px;line-height:1.7;color:#546f75}.submission-actions{display:flex;gap:8px}@media(max-width:600px){.leaderboard{padding:16px 12px}.ranking-heading h2{font-size:21px}.leaderboard th,.leaderboard td{padding:10px 7px}.ranking-heading>button{font-size:12px;padding:8px}.leaderboard table{min-width:430px}}input:focus-visible{outline:3px solid #00a9a9;outline-offset:3px}

.court-footer{flex-wrap:wrap}.court-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}.music-volume{display:flex;align-items:center;gap:7px;font-size:12px;color:#c7dede;margin-right:5px}.music-volume input{width:90px;min-height:32px;accent-color:#34ddc2;cursor:pointer}.music-volume output{min-width:34px;text-align:right;font-variant-numeric:tabular-nums}.music-volume input:focus-visible{outline:3px solid #00a9a9;outline-offset:3px;border-radius:4px}@media(max-width:600px){.court-actions{width:100%;justify-content:space-between;gap:3px}.music-volume{margin-right:auto}.music-volume input{width:70px}.court-actions button{margin-left:0}}

/* Compact character choices also cover narrow landscape sidebars on phones. */
@media(max-width:1050px),(pointer:coarse){
  .character small,.character .type,.fair-play{display:none}
  .character-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .character{flex-direction:column;justify-content:center;min-width:0;min-height:104px;text-align:center;padding:6px!important;gap:4px}
  .character img{width:64px;max-width:100%;height:64px}
  .character>span:nth-child(2){flex:0 0 auto;min-width:0}
  .character strong{font-size:14px;margin:0;white-space:nowrap}
}

#expand{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;margin-left:auto;border-color:#548e91;color:#74f2df}.orientation-hint{display:none}
body.game-expanded{overflow:hidden;overscroll-behavior:none}
.overlay{z-index:4;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden;overscroll-behavior:contain}.overlay-card{min-width:0;max-height:100%;overflow:auto}
.overlay.is-countdown{background:#173b4212;backdrop-filter:none}.is-countdown .overlay-card{background:#123e46e8;color:white;padding:16px 32px}.is-countdown .eyebrow{color:#70ebd7}.is-countdown #overlay-title{font-size:64px;line-height:1;margin:8px 0;font-variant-numeric:tabular-nums}.is-countdown #overlay-copy{color:#d4eeee;margin:0}
.match-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}.match-summary>div{background:#eaf5f2;border-radius:8px;padding:8px 6px}.match-summary dt{font-size:11px;color:#567579;white-space:nowrap}.match-summary dd{font-size:23px;font-weight:800;margin:3px 0 0;color:#123e46;font-variant-numeric:tabular-nums}
.overlay.is-result .overlay-card{width:390px;max-width:94%;padding:14px;display:grid;gap:9px}.is-result #overlay-label{display:none}.is-result #overlay-title{margin:0;font-size:24px}.is-result #overlay-copy{margin:0;font-size:13px}.is-result .primary{min-width:0;padding:10px 18px}.is-result #result-status{font-size:12px;line-height:1.4;margin:0}.result-actions{display:flex;justify-content:center;gap:8px}.result-actions button{border:1px solid #b7cfca;border-radius:7px;padding:8px;color:#23575b;background:white;font-size:12px}
.touch-controls button{position:relative;overflow:hidden;min-width:44px}.touch-controls button small{display:block;font-size:10px;font-weight:500;line-height:1.2;margin-top:3px}.touch-controls button.cooling::after{content:"";position:absolute;bottom:0;left:0;width:var(--cooldown);height:3px;background:#cbeee7;pointer-events:none}.touch-controls button.cooling{filter:saturate(.45)}.arena:not(.match-active) .touch-controls{opacity:.4;pointer-events:none}
@media(max-width:600px){.overlay.is-result .overlay-card{gap:4px;padding:8px}.is-result #overlay-title{font-size:20px}.match-summary>div{padding:4px}.match-summary dt{font-size:10px}.match-summary dd{font-size:18px;margin-top:1px}.is-result .primary{padding:7px 14px}.touch-controls button{height:54px}}
.arena.expanded{position:fixed;inset:0;z-index:10000;width:100%;height:100vh;height:100dvh;border:0;border-radius:0;display:grid;grid-template-rows:38px minmax(0,1fr) 44px;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box;background:#102c32}
.arena.expanded .scorebar{padding:7px 18px}.arena.expanded .scorebar .score{font-size:25px}.arena.expanded .court-wrap{min-height:0;max-height:none;width:100%;height:100%;display:grid;place-items:center;background:#102c32}.arena.expanded canvas{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;max-height:none;aspect-ratio:auto;object-fit:contain}
.arena.expanded .court-footer{padding:4px 12px;gap:6px;flex-wrap:nowrap}.arena.expanded .court-actions{width:auto;flex:1;flex-wrap:nowrap;justify-content:flex-end;gap:5px}.arena.expanded .music-volume{margin-left:auto;margin-right:4px}.arena.expanded #expand{margin-left:4px;min-width:64px}.arena.expanded .court-footer button{padding:6px 8px}.arena.expanded .overlay-card{padding:18px 24px}.arena.expanded .overlay-card h2{font-size:24px}.arena.expanded .overlay-card p{margin-bottom:12px}.arena.expanded .rally-message{top:8%;font-size:21px}
.arena.expanded .touch-controls{display:flex;position:absolute;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(58px + env(safe-area-inset-bottom));padding:0;align-items:flex-end;pointer-events:none;z-index:3}
.arena.expanded .touch-controls>div{pointer-events:auto;flex-wrap:wrap;max-width:134px;gap:6px}.arena.expanded .touch-controls button{width:64px;min-width:0;height:58px;padding:0 3px;font-size:13px;background:#24474fe8;border-color:#649296;box-shadow:0 3px 10px #0003}.arena.expanded .touch-controls .spike{width:134px;background:#20c7b0;color:#103c3b}.arena.expanded .touch-controls button.pressed{background:#487a86}
@media(orientation:portrait){.arena.expanded .orientation-hint{display:flex;position:absolute;inset:0;z-index:5;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;color:#e6fafa;background:#102c32}.orientation-hint>span{font-size:70px;color:#34ddc2}.orientation-hint strong{font-size:21px}.orientation-hint p{font-size:14px;line-height:1.8;color:#aec8cd}.arena.expanded .touch-controls{display:none}.arena.expanded .court-footer>span,.arena.expanded .music-volume,.arena.expanded #restart{display:none}.arena.expanded .court-actions{justify-content:flex-end}}
@media(max-height:350px) and (orientation:landscape){.arena.expanded{grid-template-rows:32px minmax(0,1fr) 40px}.arena.expanded .touch-controls{bottom:48px}.arena.expanded .touch-controls button{height:48px}.arena.expanded .overlay-card{padding:10px 18px}.arena.expanded .overlay-card h2{margin:5px 0}.arena.expanded .overlay-card .eyebrow{display:none}}
@media(max-width:740px) and (orientation:landscape){.arena.expanded canvas{left:106px;right:106px;width:calc(100% - 212px)}.arena.expanded .touch-controls{left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right))}.arena.expanded .touch-controls>div{max-width:100px;gap:4px}.arena.expanded .touch-controls button{width:48px;height:50px;font-size:11px}.arena.expanded .touch-controls .slide>span{font-size:10px;white-space:nowrap}.arena.expanded .touch-controls .spike{width:100px}}

/* Own the whole pad gesture, including gaps between buttons. */
.touch-controls,.touch-controls>div,.touch-controls button,.touch-controls button>*{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.arena.match-active .court-wrap{touch-action:none}
.touch-controls button.pressed{transform:none;box-shadow:inset 0 0 0 2px #b9fff0}
.touch-controls .movement-pad{flex-shrink:0}
.touch-controls button>span{white-space:nowrap}
.touch-controls [data-control=attack]{border-width:2px;font-weight:900}
.touch-controls [data-control=attack] small{font-size:9px;white-space:nowrap}
@media(max-width:800px){
  .arena:not(.expanded) .touch-controls{gap:12px;padding-inline:10px;align-items:flex-end}
  .arena:not(.expanded) .movement-pad{gap:4px}
  .arena:not(.expanded) .movement-pad button{min-width:48px;padding:0 4px}
  .arena:not(.expanded) .action-pad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:1;min-width:0;max-width:220px;gap:5px}
  .arena:not(.expanded) .action-pad button{min-width:0;padding:0 2px;font-size:12px}
  .arena:not(.expanded) [data-control=attack]{grid-column:1/-1}
  .arena:not(.expanded) [data-control=attack] small{font-size:10px;letter-spacing:normal}
}
@media(max-width:380px){.topbar{gap:10px}.brand,.back,.scorebar strong{white-space:nowrap}.brand{flex-shrink:0}.crumb,.player-tag{display:none}.back{font-size:11px}.arena:not(.expanded) .overlay-card{padding:12px;max-width:96%}.arena:not(.expanded) .overlay-card h2{font-size:20px;margin:6px 0}.arena:not(.expanded) .overlay-card p{font-size:12px;margin:0 0 10px}.arena:not(.expanded) .primary{padding:10px 18px}}
/* Beach club presentation. Court geometry and touch hit areas stay stable. */
:root{background:#f2f6f4;color:#18383f}
body{background:radial-gradient(ellipse at 6% 0,#e0f4ee 0,transparent 43%),radial-gradient(ellipse at 100% 30%,#fff3dc 0,transparent 32%)}
.topbar{background:#ffffffd9;border-bottom-color:#dce8e2}
.heading{margin-bottom:22px}.heading .eyebrow{font-size:10px;letter-spacing:2.4px}.heading h1{font-weight:900}.beta{font-size:9px;letter-spacing:1.1px;padding:7px 8px;background:#e6f2e7;color:#437656;border:1px solid #d0e5d0}
.arena{border:1px solid #274e51;box-shadow:0 18px 45px #17484319,0 2px 4px #193c4210;border-radius:20px}
.scorebar{background:linear-gradient(110deg,#174851,#12313c 70%);padding-block:16px;position:relative;border-bottom:2px solid #8edbcc66}
.scorebar .score{background:#09263169;border:1px solid #81bbc326;border-radius:10px;padding:7px 16px;font-size:29px;min-width:115px;justify-content:center}
.scorebar .score-divider{font-size:17px;color:#8bb5bb}.scorebar strong{letter-spacing:-.3px}.scorebar .player-tag{font-size:9px;letter-spacing:1px;border:0;background:#5ad3bd26;color:#a2efdc}
.overlay{background:#143d4421;backdrop-filter:blur(1px)}
.overlay-card{border-radius:20px;border:1px solid #fffffff5;background:#fffffff0;box-shadow:0 20px 60px #1039432e;padding:27px 32px}
.overlay-card .eyebrow{font-size:10px;color:#31867c;letter-spacing:2.4px}.overlay-card h2{font-weight:900}.overlay-card p{line-height:1.5}
.primary{background:linear-gradient(140deg,#118f81,#09666c);border:1px solid #ffffff38;box-shadow:0 4px 0 #064d54,0 8px 18px #17776924;border-radius:11px;min-height:44px;transition:background .15s}
.primary:hover{background:#097c76}.primary:active{box-shadow:0 2px 0 #064d54}
.court-footer{background:#12313c}.rally-message:not(:empty){padding:6px 17px;border-radius:20px;background:#ffffffe8;color:#167467;box-shadow:0 3px 15px #1c50451c;font-size:19px;text-shadow:none;border:1px solid #fff}
.setup{background:#ffffffb8;border:1px solid #dce7e0;border-radius:18px;padding:18px;gap:19px;box-shadow:0 5px 20px #21433a05}
.character{position:relative;overflow:hidden;border-color:#dce7e2;min-height:87px;padding:4px 9px 4px 2px;background:linear-gradient(130deg,#fff,#fafcf9)}
.character[aria-pressed=true]{border-color:#26958b;background:linear-gradient(120deg,#effaf3,#e5f6f3);box-shadow:0 0 0 2px #20968a0c}
.character[aria-pressed=true]::after{content:'✓';position:absolute;top:6px;right:6px;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:#238d81;color:#fff;font-size:10px;font-weight:900}
.character:disabled{opacity:.7}.character[aria-pressed=true]:disabled{opacity:1}
.character-portrait{width:76px;height:76px;aspect-ratio:1;max-height:none;flex-shrink:0;touch-action:auto;filter:drop-shadow(0 3px 1px #3e594818)}
.character strong{font-size:15px}.character small{font-size:11px;line-height:1.4}.type{display:none}.fair-play{font-size:11px;line-height:1.5}
.settings select,.rank-settings>input{border-radius:9px;border-color:#d7e4df;min-height:40px}.settings{gap:11px}.settings label{font-size:13px}
.touch-controls button{box-shadow:0 3px 0 #071e2b;border-bottom-width:3px}.touch-controls .spike{background:linear-gradient(135deg,#6ce4ca,#22b9ad);border-color:#8aecdd;color:#123c40}
.touch-controls button.pressed{box-shadow:inset 0 0 0 2px #b9fff0;background:#33646e}
.leaderboard{border-color:#dce7e0;box-shadow:0 5px 20px #21433a05}.ranking-tabs button{border-radius:18px;padding:8px 19px}.ranking-tabs button[aria-pressed=true]{background:#16796f;border-color:#16796f}
@media(max-width:1050px),(pointer:coarse){.setup{padding:13px}.character-portrait{width:64px;height:64px;max-width:100%}.character{min-height:102px}.character strong{font-size:13px}}
@media(max-width:800px){main{padding-top:20px}.heading{margin-bottom:16px}.heading h1{font-size:29px}.setup{padding:16px}.scorebar{padding:10px 12px}.scorebar .score{font-size:23px;min-width:96px;padding:5px 10px;gap:13px}.scorebar strong{font-size:13px}.character-portrait{width:74px;height:74px}.character{min-height:110px}.character strong{font-size:14px}.rally-message:not(:empty){font-size:14px;padding:5px 12px}.overlay-card{padding:19px 22px}.overlay-card h2{font-size:24px}.arena{border-radius:16px}.settings label{font-size:12px}}
.arena.expanded .scorebar .score{border:0;padding:0;background:none;min-width:100px}.arena.expanded .rally-message:not(:empty){font-size:17px}.arena.expanded .overlay-card{max-height:94%}
@media(max-height:520px) and (orientation:landscape){.setup{padding:10px}.character-portrait{width:49px;height:58px}.character{min-height:88px}.character strong{font-size:12px}.arena.expanded .scorebar{border-bottom-width:1px}}
@media(max-width:380px){.heading h1{font-size:27px}.beta{font-size:8px}.scorebar .score{min-width:83px;padding-inline:8px;font-size:22px}.setup{padding:12px}.character-portrait{width:65px;height:65px}}
.character{color:#18383f}.character:disabled strong{color:#49625f}.character[aria-pressed=true]:disabled strong{color:#187769}
@media(max-width:600px){.arena:not(.expanded) .overlay-card{padding:11px 16px}.arena:not(.expanded) .overlay-card h2{font-size:22px;margin:5px 0}.arena:not(.expanded) .overlay-card p{font-size:12px;margin:0 0 10px;line-height:1.4}.arena:not(.expanded) .overlay-card .eyebrow{font-size:9px}.arena:not(.expanded) .primary{min-height:40px;padding:9px 22px}.arena:not(.expanded) .overlay.is-result .overlay-card{padding:8px}.arena:not(.expanded) .overlay.is-result h2{font-size:20px;margin:0}.arena:not(.expanded) .overlay.is-result p{margin:0}}

/* Swipe movement and two visible action buttons; arrows are optional. */
body.swipe-mode .touch-controls{display:flex}
body.swipe-mode:not(.button-controls) .movement-pad{display:none}
#court{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.swipe-help{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:max-content;max-width:95%;padding:4px 9px;background:#11323bca;color:#e6f5df;border-radius:12px;font-size:11px;line-height:1.4;pointer-events:none;z-index:1;text-align:center}
.swipe-instruction{display:block!important;font-size:12px;line-height:1.65;background:#eaf5f0;border-radius:8px;padding:10px!important}
body.swipe-mode .arena.expanded #court{inset:0;width:100%;height:100%}
#control-mode{min-height:40px;white-space:nowrap}
@media(max-width:600px){.swipe-help{font-size:10px;padding:3px 7px}.court-actions{gap:5px}#control-mode{min-height:44px}.arena.expanded .swipe-help{bottom:8px}}
@media(orientation:portrait){body.swipe-mode .arena.expanded .touch-controls{display:none}}

/* Two action buttons stay at the edge, outside the ordinary court. */
body.swipe-mode .touch-controls{justify-content:flex-end;padding:8px 12px;gap:10px;background:#12313c}
body.swipe-mode .arena:not(.expanded) .action-pad{display:flex;flex:0 0 auto;max-width:none;gap:8px}
body.swipe-mode .action-pad button{width:106px;min-width:0;height:54px;padding:0 8px;font-size:14px}
body.swipe-mode .action-pad [data-control=jumpTap] small{font-size:10px;white-space:nowrap}
body.swipe-mode.button-controls .touch-controls{justify-content:space-between}
body.swipe-mode .arena.expanded .touch-controls{padding:0;background:transparent;bottom:calc(56px + env(safe-area-inset-bottom))}
body.swipe-mode .arena.expanded .action-pad{display:flex;flex-wrap:nowrap;max-width:none;gap:8px}
body.swipe-mode .arena.expanded .action-pad button{width:90px;height:56px}
.court-footer{gap:6px}.court-actions{flex:1;width:auto;flex-wrap:nowrap;gap:6px}
.court-footer .court-actions button{min-height:44px;margin-left:0;white-space:nowrap}
.game-options{width:min(360px,calc(100vw - 28px));max-height:calc(100dvh - 28px);box-sizing:border-box;margin:auto;padding:20px;border:1px solid #b8d6cf;border-radius:18px;background:#f7fcf9;color:#18383f;box-shadow:0 22px 80px #051c3266;overscroll-behavior:contain}
.game-options::backdrop{background:#061d2c99}
.options-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.options-heading h2{font-size:20px;margin:0}
.game-options button{min-height:44px;border:1px solid #bdd7d0;border-radius:10px;padding:8px 12px;color:#1b514f;background:white;font:inherit;font-size:14px}
.game-options>button{display:block;width:100%;margin-top:12px;text-align:left}
.game-options #close-options{width:44px;font-size:25px;line-height:1}
.game-options p{font-size:12px;line-height:1.6;color:#52706e;margin:10px 0 16px}
.game-options .music-volume{display:flex!important;gap:10px;color:#18383f;margin:0;padding:10px 0;font-size:14px}
.game-options .music-volume input{flex:1;min-width:0;width:100%;min-height:44px}
.game-options .options-help{padding:10px;margin:12px 0 0;background:#e5f3ec;border-radius:8px}
.game-options #restart{margin-top:16px}
@media(max-width:600px){.court-footer>span{font-size:10px}.court-actions{gap:4px}.court-footer .court-actions button{padding:6px 8px}#expand{min-width:0}.court-footer{padding:5px 10px}.game-options{padding:16px}}
@media(max-width:380px){body.swipe-mode .action-pad button{width:90px}body.swipe-mode.button-controls .action-pad{gap:4px}body.swipe-mode.button-controls .action-pad button{width:82px}body.swipe-mode .arena:not(.expanded) .movement-pad button{min-width:40px}}