@charset "UTF-8";
:root{--ink:#142645;--muted:#5d6f90;--paper:#f5f8ff;--coral:#d94125;--line:#d2def4;--green:#2556ba;font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background-image:radial-gradient(#1426450c .7px,transparent .7px);background-size:6px 6px}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #fb682d;outline-offset:4px}button:disabled{opacity:.4;cursor:default}button{color:var(--ink)}[hidden]{display:none!important}.app{max-width:1440px;margin:auto;padding:0 52px}.topbar{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:19px;font-weight:850;letter-spacing:-.4px}.brand-mark{display:block;width:48px;height:48px;border-radius:10px;flex:none}.brand-light{font-weight:400}.brand small{display:block;font-size:10px;font-weight:500;letter-spacing:2px;margin-top:5px}.top-actions{display:flex;gap:14px;align-items:center}.edition{font-size:12px;margin-right:9px;color:#344d78}.edition i,.live>span:first-child{display:inline-block;width:6px;height:6px;background:#2556ba;border-radius:50%;margin-right:7px}.icon-button{background:transparent;border:1px solid #adc1e5;border-radius:6px;padding:9px 13px;font-size:12px}.icon-button:hover{background:#dbe8ff}.icon-button span{padding-left:7px}.intro{display:flex;align-items:center;justify-content:space-between;padding:33px 0 28px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#5d6f90;margin:0 0 12px}h1{font-size:35px;letter-spacing:-1.4px;position:relative;margin:0 0 13px;font-weight:850;line-height:1.35}h1 span{color:var(--coral)}h1 svg{position:absolute;bottom:-9px;right:5px;width:160px;height:18px;fill:none;stroke:#d941258a;stroke-width:2.5;stroke-linecap:round}.subtitle{font-size:13px;color:var(--muted);margin:0}.match-label{display:flex;align-items:center;gap:14px;font-size:13px;padding:14px 0 0}.label-star{font-size:40px;color:#e1a653}.match-label small{display:block;font-size:11px;color:var(--muted);margin-top:7px}.game-shell{background:#fbfdff;border:1px solid #adc1e5;border-radius:12px;overflow:hidden;box-shadow:0 6px 0 #14264520,0 18px 45px #14264506}.match-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;gap:12px;border-bottom:1px solid #adc1e5;font-size:11px}.live{display:flex;align-items:center;white-space:nowrap}.live>span:first-child{margin-right:8px}.live b{color:#adc1e5;font-weight:400;margin:0 12px}.live #match-status{color:#5d6f90}.match-options{display:flex;align-items:center;gap:10px}.match-options label{color:var(--muted)}select{font-size:11px;padding:6px 25px 6px 10px;border:1px solid #d2def4;background:#eaf1ff;border-radius:5px;cursor:pointer}.small-button{background:transparent;border:0;font-size:11px;padding:6px 9px}.small-button:hover{background:#eaf1ff;border-radius:5px}.court-wrap{position:relative;background:#eaf1ff;aspect-ratio:1200 / 600;overflow:hidden}canvas{display:block;width:100%;height:100%;outline:none;touch-action:manipulation}.scoreboard{position:absolute;top:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:29px;pointer-events:none}.score-player{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;white-space:nowrap}.score-player small{display:block;font-size:7px;color:#5d6f90;letter-spacing:1px;margin-top:4px;font-weight:400}.score-player.opponent{text-align:right}.player-dot{width:9px;height:9px;border-radius:50%}.coral{background:var(--coral)}.green{background:#2556ba}.score{display:flex;align-items:center;gap:19px;font-variant-numeric:tabular-nums}.score b{font-size:40px;line-height:1;font-weight:800;letter-spacing:-2px}.score b:first-child{color:#d94125}.score b:last-child{color:#2556ba}.score>span{font-size:20px;color:#adc1e5}.court-tag{position:absolute;left:24px;bottom:18px;font-weight:800;letter-spacing:2px;font-size:8px;color:#344d78;opacity:.7}.court-tag span{font-size:7px;font-weight:400;letter-spacing:1px;margin-left:9px}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#eaf1ff1a}.overlay>div{width:344px;text-align:center;background:#fbfdfff5;border:1px solid #adc1e5;border-radius:8px;padding:28px 32px 24px;box-shadow:5px 6px 0 #14264518;backdrop-filter:blur(6px);transform:rotate(-1deg)}.sticker{display:inline-block;background:#efe6a8;color:#344d78;font-size:10px;letter-spacing:1px;border-radius:3px;padding:5px 11px;transform:rotate(-5deg);margin-bottom:6px}.overlay h2,dialog h2{font-size:27px;letter-spacing:-1px;margin:10px 0 11px}.overlay p{color:#5d6f90;font-size:11px;line-height:1.9;margin-bottom:20px}.primary{display:flex;align-items:center;justify-content:space-between;border:0;background:var(--coral);border-radius:5px;color:#fbfdff;padding:13px 18px;width:100%;font-size:13px;font-weight:700;box-shadow:0 3px 0 #a12c1d;transition:transform .15s,background .15s}.primary:hover{background:#c8361f;transform:translateY(-2px)}.primary span{font-size:20px;font-weight:400;line-height:1}.start-hint{display:block;font-size:9px;color:#adc1e5;margin-top:14px;letter-spacing:1px}.controls-strip{display:flex;align-items:center;gap:26px;padding:19px 22px;background:#fbfdff;border-top:1px solid #d2def4}.key-group{display:flex;gap:5px;align-items:center;white-space:nowrap}.control-label{font-size:10px;color:#5d6f90;margin-right:7px}kbd{font:10px "Segoe UI",sans-serif;background:#f5f8ff;border:1px solid #d2def4;border-bottom-width:2px;border-radius:4px;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}.or{font-size:9px;color:#adc1e5;padding:0 2px}.control-desc{font-size:10px;margin-left:4px;color:#344d78}.tiny-label{font-size:8px;padding:4px 6px;background:#eaf1ff;color:#5d6f90;border-radius:3px;margin-left:3px}.pause-key{margin-left:auto;font-size:10px;white-space:nowrap;color:#5d6f90}.pause-key kbd{margin-right:5px}.below{display:flex;justify-content:space-between;align-items:center;margin:20px 1px}.below p{display:flex;align-items:center;gap:10px;margin:0;font-size:11px}.below p>span:first-child{color:#d6a03e;font-size:17px}.below b{font-weight:600}.tip{color:#5d6f90;margin-left:8px}.local-best{font-size:10px;color:#5d6f90;white-space:nowrap}.local-best b{color:#344d78;margin-left:7px}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:32px;padding:21px 0 26px;font-size:9px;color:#5d6f90;letter-spacing:1px}.footer-shuttle{font-size:17px;margin-left:9px;color:#2556ba}.rally-message{position:absolute;left:50%;top:39%;transform:translate(-50%,-50%) rotate(-3deg);text-align:center;font-size:34px;font-weight:850;color:#142645;text-shadow:2px 2px #fbfdff;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .15s}.rally-message.visible{opacity:1}.rally-message small{display:block;font-size:12px;font-weight:500;letter-spacing:2px;margin-top:10px}.serve-hint{position:absolute;bottom:20%;left:24%;transform:translateX(-50%);padding:8px 13px;border:1px solid #e8ba86;background:#fff9e8e8;color:#ad7446;font-size:10px;border-radius:20px;pointer-events:none;animation:breathe 2s ease-in-out infinite}.rally-counter{position:absolute;top:28px;right:28px;text-align:center;color:#344d78}.rally-counter b{display:block;font-size:23px;font-weight:600}.rally-counter span{font-size:8px;letter-spacing:1px}.result-stats{display:flex;justify-content:space-around;border-block:1px solid #d2def4;padding:12px 0;margin-bottom:20px;font-size:9px;color:#5d6f90}.result-stats b{display:block;font-size:20px;margin-top:6px;color:#2556ba}.touch-controls{display:none}dialog{max-width:440px;width:calc(100% - 36px);color:var(--ink);background:#fbfdff;border:1px solid #adc1e5;border-radius:12px;padding:33px;box-shadow:0 25px 80px #14264533}dialog::backdrop{background:#14264566;backdrop-filter:blur(3px)}.dialog-close{position:absolute;right:14px;top:10px;font-size:24px;background:none;border:0;color:#5d6f90}dialog ol{padding-left:20px;font-size:13px}dialog li{padding-left:5px;margin:17px 0}dialog li::marker{color:var(--coral);font-weight:700}dialog li p,.dialog-note{font-size:11px;color:#5d6f90;line-height:1.8;margin:7px 0}.dialog-note{border-top:1px solid #d2def4;padding-top:12px;margin-bottom:20px}@keyframes breathe{50%{opacity:.55}}@media(min-width:1500px){.app{max-width:1480px}.intro{padding:41px 0 34px}h1{font-size:39px}.court-wrap{aspect-ratio:1200 / 580}}@media(max-width:1050px){.app{padding:0 28px}.controls-strip{gap:17px}.control-label,.tiny-label{display:none}.match-label{font-size:11px}h1{font-size:30px}.scoreboard{top:18px;gap:19px}.score b{font-size:33px}.overlay>div{padding:20px 26px;width:310px}.overlay h2{font-size:25px}.court-wrap{aspect-ratio:1200 / 640}.topbar{height:86px}.tip{margin-left:0}.below{gap:15px}}@media(max-width:720px){.app{padding:0 14px}.topbar{height:76px}.brand{font-size:15px;gap:8px}.brand-mark{width:35px;height:35px;border-radius:8px}.brand small{font-size:8px;letter-spacing:1px}.top-actions{gap:7px}.edition{display:none}.icon-button{font-size:10px;padding:7px 8px}.intro{padding:25px 2px 22px}.eyebrow{font-size:8px;letter-spacing:1.2px}h1{font-size:27px;letter-spacing:-1.3px}h1 svg{width:135px;right:0}.subtitle{font-size:11px}.match-label{display:none}.match-bar{padding:11px 12px;font-size:9px;gap:7px}.live b{margin:0 7px}.match-options{gap:3px}.match-options label{display:none}select{font-size:10px;padding:5px 16px 5px 5px;max-width:99px}.small-button{font-size:10px;padding:5px}.court-wrap{aspect-ratio:auto;height:clamp(340px,63vw,450px)}.scoreboard{top:20px;gap:16px}.score-player{font-size:10px;gap:5px}.score-player small{font-size:6px;letter-spacing:.4px}.score{gap:12px}.score b{font-size:34px}.score>span{font-size:16px}.player-dot{width:6px;height:6px}.court-tag{left:13px;bottom:12px;font-size:6px;letter-spacing:1px}.court-tag span{display:none}.overlay>div{width:258px;padding:20px 22px}.overlay h2{font-size:24px}.overlay p{font-size:10px;margin:8px 0 15px}.primary{padding:11px 14px;font-size:12px}.sticker{font-size:9px;padding:4px 8px}.start-hint{font-size:8px;margin-top:12px}.touch-controls{display:flex;justify-content:space-between;gap:10px;padding:14px 12px;background:#eaf1ff;border-top:1px solid #d2def4;touch-action:none;user-select:none;-webkit-user-select:none}.touch-movement,.touch-shots{display:flex;gap:9px}.touch-controls button{display:flex;align-items:center;justify-content:center;gap:3px;border:1px solid #adc1e5;border-bottom-width:3px;background:#fbfdff;border-radius:10px;width:46px;height:50px;font-size:24px;touch-action:none}.touch-controls button small{font-size:9px}.touch-controls button[data-action]{font-size:17px;width:47px;flex-direction:column;gap:1px}.touch-controls .touch-hit,.touch-controls .touch-smash{font-size:12px!important;font-weight:700}.touch-controls .touch-hit{background:var(--coral);border-color:#a12c1d;color:#fff9ec;width:59px}.touch-controls .touch-smash{background:#dbe8ff;color:#344d78}.touch-controls button.pressed{transform:translateY(2px);border-bottom-width:1px;filter:brightness(.94)}.controls-strip{display:none}.below{align-items:flex-start;margin:16px 2px;gap:13px}.below p{display:block;font-size:10px;line-height:1.8}.below p>span:first-child{font-size:13px;margin-right:4px}.tip{display:block;font-size:10px;margin-top:4px}.local-best{font-size:9px;padding-top:5px}footer{font-size:7px;letter-spacing:.3px;margin-top:23px;padding-top:17px;gap:15px}footer>span:last-child{font-size:8px}.rally-message{font-size:25px;top:43%}.rally-message small{font-size:10px}.rally-counter{top:80px;right:15px}.rally-counter b{font-size:18px}.rally-counter span{font-size:7px}.serve-hint{font-size:8px;left:26%;bottom:14%;padding:6px 8px}.result-stats{padding:8px 0;margin-bottom:14px}.result-stats b{font-size:17px}}@media(pointer:coarse) and (min-width:721px){.touch-controls{display:flex;justify-content:space-between;padding:10px 20px}.touch-movement,.touch-shots{display:flex;gap:10px}.touch-controls button{min-width:55px;height:45px;border:1px solid #adc1e5;border-radius:7px;background:#eaf1ff;font-size:15px;touch-action:none}.touch-controls small{font-size:10px}.touch-controls .touch-hit{background:var(--coral);color:white}.controls-strip{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:380px){.touch-controls{padding:12px 10px;gap:8px}.touch-movement,.touch-shots{gap:7px}.touch-controls button{width:40px}.touch-controls button[data-action]{width:38px}.touch-controls .touch-hit{width:49px}.touch-controls .touch-smash{width:40px}.top-actions{gap:4px}.icon-button{padding:7px 6px}.brand{font-size:14px}.brand small{font-size:7px}.match-bar{padding-inline:9px}.live b{margin-inline:5px}}
.touch-controls .touch-drop{background:#f5edcf;border-color:#c9bc90;color:#5d6f90;font-size:12px!important;font-weight:700}.game-shell:fullscreen{border:0;border-radius:0;width:100vw;height:100dvh;display:flex;flex-direction:column;background:#eaf1ff}.game-shell:fullscreen .court-wrap{flex:1;min-height:0;height:auto;aspect-ratio:auto}.game-shell:fullscreen .controls-strip,.game-shell:fullscreen .touch-controls,.game-shell:fullscreen .match-bar{flex-shrink:0}#fullscreen{font-size:18px;line-height:1}.rally-counter.on-fire{color:#d47745}.rally-counter.on-fire b{transform:scale(1.18)}@media(max-width:720px){.touch-movement,.touch-shots{gap:6px}.touch-controls button[data-action]{width:42px}.touch-controls .touch-hit{width:49px}.touch-controls .touch-drop{width:38px}.touch-controls{gap:8px;padding-inline:10px}.touch-movement button{width:42px}}@media(max-width:380px){.touch-controls button[data-action]{width:32px}.touch-controls .touch-hit{width:43px}.touch-controls .touch-smash{width:34px}.touch-controls .touch-drop{width:32px}.touch-movement button{width:37px}.touch-movement,.touch-shots{gap:5px}.touch-controls{gap:6px}.small-button{padding-inline:4px}#fullscreen{font-size:16px}.scoreboard{gap:12px}}
@media(min-width:721px) and (max-height:800px){.topbar{height:76px}.intro{padding:20px 0}.court-wrap{height:calc(100dvh - 350px);min-height:300px;aspect-ratio:auto}.overlay>div{padding-block:20px}.overlay h2{font-size:25px}.overlay p{margin-block:8px 17px}}.app.is-playing .intro{display:none}.app.is-playing .topbar{height:64px;margin-bottom:16px}@media(min-width:721px){.app.is-playing .court-wrap{height:calc(100dvh - 222px);max-height:680px;min-height:300px;aspect-ratio:auto}}@media(max-width:720px){.app.is-playing .topbar{height:64px;margin-bottom:16px}}
.touch-controls button{padding:0;white-space:nowrap;flex-shrink:0}.match-options .small-button{white-space:nowrap;flex-shrink:0}.app.is-playing .game-shell:fullscreen .court-wrap{height:auto;max-height:none;min-height:0}@media(max-width:380px){.live{font-size:0}.live b{display:none}.live #match-status{font-size:9px}.live>span:first-child{margin-right:5px}.match-options select{width:85px}}
.app.is-playing .topbar{height:56px;margin-bottom:12px}@media(min-width:721px){.app.is-playing .court-wrap{height:clamp(540px,calc(100dvh - 178px),860px);max-height:860px;min-height:540px}}@media(max-width:720px){.app.is-playing .court-wrap{height:clamp(430px,calc(100dvh - 272px),650px)}.app.is-playing .topbar{height:56px;margin-bottom:12px}}.serve-hint{bottom:7%;left:27%}.app.is-playing .game-shell:fullscreen .court-wrap{min-height:0;max-height:none;height:auto}

/* Club cover, fitting room, and in-court menus. */
.game-shell {position:relative}
.game-shell,.game-shell * {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.game-shell img {-webkit-user-drag:none}
.game-shell[data-screen="match"] #court {touch-action:none}
html,body {overflow:hidden}
.app {
  position:fixed;top:0;left:0;display:flex;flex-direction:column;
  width:100dvw;height:100dvh;max-width:none;margin:0;padding:0;overflow:hidden;
}
.app :is(.below,footer) {display:none}
.app .game-shell {flex:1;min-height:0;border:0;border-radius:0;box-shadow:none}
.app .game-shell:not([data-screen="match"]) .court-wrap,
.app.is-playing .game-shell[data-screen="match"] .court-wrap {
  height:100%;min-height:0;max-height:none;aspect-ratio:auto;
}
.training-banner {
  position:absolute;top:calc(10px + var(--mobile-top,0px));left:50%;
  transform:translateX(-50%);z-index:2;pointer-events:none;
  width:min(54%,480px);padding:10px 16px;text-align:center;
  background:#f5f8fff0;border:1px solid #bdccec;border-radius:9px;
  box-shadow:0 2px 7px #14264516;color:#254c91;
  font-size:clamp(14px,calc(var(--mobile-width,100vw)*.023),19px);line-height:1.35;
}
.training-banner strong,.training-banner span {display:block}
.training-banner strong {font-size:1.13em}
.training-banner span {margin-top:4px;color:var(--ink)}
.game-shell[data-training] :is(.score-player,.serve-hint,.rally-counter,.match-caption) {display:none}
.game-shell[data-training] .scoreboard {
  top:calc(16px + var(--mobile-top,0px));left:calc(12px + var(--mobile-left,0px));
  transform:none;
}
.app .topbar {height:64px;margin-bottom:14px}
.game-shell:not([data-screen="match"]) .court-wrap {height:clamp(570px,calc(100dvh - 124px),770px);aspect-ratio:auto}
.game-shell:not([data-screen="match"]) #court {visibility:hidden}
.game-shell:not([data-screen="match"]) .touch-controls {display:none}
.app:not(.is-playing) .below {display:none}
.club-screen {position:absolute;inset:0}
.cover-screen {
  display:grid;grid-template-columns:1.04fr 1fr;align-items:center;gap:14px;
  padding:clamp(24px,5vw,76px);overflow:hidden;
  background:radial-gradient(circle at 77% 42%,#dbe8ff,transparent 44%),
    repeating-linear-gradient(0deg,#6d90ca12 0 1px,transparent 1px 40px),#f5f8ff;
}
.cover-copy {position:relative;z-index:1}
.cover-kicker {display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.24em;color:#344d78;font-weight:800}
.cover-kicker span {padding:5px 8px;border:1px solid #adc1e5;border-radius:4px}
.cover-screen h1 {font-size:clamp(38px,5vw,72px);line-height:1.13;letter-spacing:-.06em;margin:20px 0}
.cover-screen h1 em {font-style:normal;color:#2556ba}
.cover-intro {color:#344d78;font-size:clamp(12px,1.35vw,17px);line-height:1.7}
.cover-start {max-width:265px;margin-top:26px;font-size:17px;padding:15px 19px}
.cover-resume {display:block;width:100%;max-width:265px;margin-top:10px;min-height:42px}
.cover-meta {display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:23px;font-size:11px;color:#344d78}
.cover-meta span {padding:5px 9px;border:1px solid #adc1e5;border-radius:20px}
.cover-art {width:100%;min-width:0;max-height:520px;object-fit:contain;border-radius:14px}
.setup-screen {display:flex;flex-direction:column;background:#eaf1ff}
.setup-bar {
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:57px;padding:10px clamp(14px,2.4vw,32px);border-bottom:1px solid #d2def4;background:#f5f8ff;
}
.setup-title {font-size:13px;font-weight:800;letter-spacing:.12em;color:#344d78}
.quiet-button {
  background:#f5f8ff;border:1px solid #adc1e5;border-radius:7px;
  padding:8px 13px;font-size:12px;font-weight:700;
}
.quiet-button:hover {background:#dbe8ff}
.coin-pill {white-space:nowrap;background:#f6e9ba;color:#735522;border:1px solid #e1ca88;border-radius:20px;padding:6px 11px;font-size:12px}
.coin-pill span {color:#c18c31;margin-right:3px}
.setup-columns {min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);gap:22px;padding:22px clamp(14px,2.4vw,32px)}
.wardrobe-panel,.difficulty-panel {min-width:0;min-height:0;border:1px solid #d2def4;border-radius:11px;background:#fbfdff;padding:16px}
.wardrobe-panel {display:flex;flex-direction:column}
.section-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.section-heading h2,.difficulty-panel h2 {margin:0;font-size:clamp(20px,2vw,27px);letter-spacing:-.035em}
.section-heading span {font-size:11px;color:#344d78;white-space:nowrap}
.fitting-stage {
  display:flex;align-items:center;gap:clamp(10px,2vw,24px);min-height:102px;
  padding:4px 14px;margin-bottom:10px;border:1px solid #d2def4;border-radius:9px;
  background:#edf3ff;
}
.fitting-avatar {position:relative;flex:0 0 84px;width:84px;aspect-ratio:128 / 150}
.fitting-model {display:block;width:100%;height:100%}
.fitting-hat {position:absolute;left:29.6%;top:3%;width:40.8%;height:auto}
.fitting-caption {display:grid;justify-items:start;align-content:center;gap:6px;min-width:0}
.fitting-caption strong {font-size:16px}
.fitting-caption span {font-size:11px;color:#344d78;line-height:1.5}
.fitting-caption .quiet-button {padding:4px 8px;font-size:10px}
.shop-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:min-content;gap:7px;min-height:0;overflow:auto;scrollbar-color:#adc1e5 transparent;padding:2px 2px 4px}
.shop-card {
  display:grid;justify-items:center;align-content:center;gap:3px;min-width:0;min-height:76px;
  border:1px solid #d2def4;border-radius:8px;background:#f5f8ff;padding:4px 2px;
}
.shop-card:hover,.shop-card[aria-pressed="true"] {border-color:#2556ba;background:#dbe8ff}
.shop-card.is-equipped {border-color:#2556ba;background:#dbe8ff}
.headwear-thumbnail {position:relative;width:44px;height:35px}
.headwear-thumbnail::before {content:"";position:absolute;left:12px;top:10px;width:20px;height:22px;border:1px solid #adc1e5;border-radius:50%;background:#fbfdff}
.headwear-thumbnail img {position:absolute;left:0;top:-4px;width:44px;height:auto}
.shop-card strong,.shop-card small {font-size:10px;text-align:center;line-height:1.35}
.shop-card small {color:#725928}
.shop-card.is-equipped small {color:#344d78}
.shop-switch {display:flex;gap:5px;margin:0 0 9px;padding:3px;border:1px solid #d2def4;border-radius:8px;background:#eaf1ff}
.shop-switch button {flex:1;min-height:30px;border:0;border-radius:5px;background:transparent;color:#344d78;font-size:12px;font-weight:800}
.shop-switch button[aria-pressed="true"] {background:#2358d0;color:#fff}
.shop-switch button:not([aria-pressed="true"]):hover {background:#dbe8ff}
.racket-thumbnail {display:grid;place-items:center;width:53px;height:35px}
.racket-thumbnail img {display:block;width:53px;height:auto;transform:rotate(-28deg)}
.difficulty-panel {
  display:flex;flex-direction:column;justify-content:center;padding:clamp(16px,2.4vw,32px);
  background:repeating-linear-gradient(125deg,#6296ff15 0 1px,transparent 1px 24px),linear-gradient(150deg,#214bb1,#142c74);
  color:#fff;border-color:#183d96;
}
.difficulty-panel .eyebrow {color:#dbe8ff}
.difficulty-note {color:#dbe8ff;margin:9px 0 19px;font-size:13px;line-height:1.5}
.match-length {min-inline-size:0;margin:0 0 14px;padding:0;border:0}
.match-length legend {padding:0 0 7px;color:#dbe8ff;font-size:12px;font-weight:700}
.match-length-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.match-length-options label {position:relative;cursor:pointer}
.match-length-options input {position:absolute;width:1px;height:1px;opacity:0}
.match-length-options span {
  display:grid;place-items:center;min-height:38px;padding:5px 8px;
  border:1px solid #809ee0;border-radius:7px;background:#203f90;color:#fff;font-size:13px;font-weight:800;
}
.match-length-options label:hover span {background:#3359b3}
.match-length-options input:checked+span {background:#f5f8ff;color:#173d97;border-color:#f5f8ff}
.match-length-options input:focus-visible+span {outline:3px solid #fb682d;outline-offset:2px}
.difficulty-list {display:grid;gap:11px}
.difficulty-card {
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;
  min-height:77px;padding:12px;border:1px solid #c4d5f7;border-radius:9px;background:#f5f8ff;color:#142645;text-align:left;
  transition:transform .15s,border-color .15s;
}
.difficulty-card:hover {transform:translateY(-2px);border-color:#2556ba;background:#eaf1ff}
.difficulty-index {font-size:11px;font-weight:850;background:#dbe8ff;border-radius:6px;padding:8px;color:#344d78}
.difficulty-card:nth-child(2) .difficulty-index {background:#f5e8bb;color:#725720}
.difficulty-card:nth-child(3) .difficulty-index {background:#f7d9cb;color:#86432e}
.difficulty-copy {display:grid;gap:4px}
.difficulty-copy strong {font-size:clamp(14px,1.8vw,20px)}
.difficulty-copy small {font-size:11px;color:#344d78;line-height:1.4}
.difficulty-reward {white-space:nowrap;color:#7a5b25;font-weight:800;font-size:11px}
.difficulty-reward span {margin-left:4px;color:#2556ba}
.match-caption {position:absolute;top:16px;left:16px;display:grid;gap:3px;color:#344d78;font-size:11px;pointer-events:none}
.match-caption span:first-child {font-weight:800}
.match-menu-trigger,.match-menu-close {width:42px;height:42px;border:1px solid #adc1e5;border-radius:8px;background:#f5f8ff;color:#142645;font-size:25px;line-height:1}
.match-menu-trigger:hover,.match-menu-close:hover {background:#dbe8ff}
.rally-counter {top:66px;right:20px}
.match-menu {
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  background:repeating-linear-gradient(0deg,#6d90ca15 0 1px,transparent 1px 38px),#eaf1ff;
}
.match-menu-body {display:grid;gap:12px;width:min(78%,310px);text-align:center}
.match-menu-body h2 {margin:0 0 9px;font-size:clamp(25px,4vw,38px)}
.match-menu-body .eyebrow {margin:0}
.match-menu-body .primary,.menu-restart {justify-content:center;min-height:47px;font-size:15px}
.menu-restart span {margin-left:8px}
.result-overlay {z-index:4}
.result-reward {margin:0 0 12px;padding:6px 9px;border-radius:6px;background:#f6e8b8;color:#735522;font-size:12px;font-weight:800}
.result-back {display:block;min-width:96px;margin:12px auto 0}
.menu-return {justify-self:center;min-width:108px}
.game-corner {position:absolute;right:16px;top:14px;z-index:2}
.game-corner,.setup-actions {display:flex;align-items:center;gap:8px}
.sound-toggle,.training-skip {
  min-height:36px;padding:6px 10px;border:1px solid #adc1e5;border-radius:8px;
  background:#f5f8ff;color:#142645;font-size:12px;font-weight:700;white-space:nowrap;
}
.sound-toggle:hover,.training-skip:hover {background:#dbe8ff}
.training-skip {color:#254c91}
.sound-toggle[data-muted="true"] {background:#eaf1ff;color:#344d78}
#help-dialog {width:min(650px,calc(100% - 28px));max-width:none;max-height:calc(100dvh - 30px);padding:clamp(16px,4vw,29px)}
.tutorial-bar {display:flex;align-items:center;justify-content:space-between;gap:8px}
.tutorial-bar .eyebrow {margin:0;color:#344d78;letter-spacing:.13em}
.tutorial-bar .match-menu-close {width:36px;height:36px}
.tutorial-intro {font-size:13px;color:#344d78;line-height:1.5}
.tutorial-keys {list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0 0;padding:0}
.tutorial-keys li {padding:10px 11px;border:1px solid #d2def4;border-radius:8px;background:#eaf1ff}
.tutorial-keys li.key-tried {border-color:#2556ba;background:#dbe8ff}
.tutorial-keys li div {display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.tutorial-keys li b {font-size:14px}
.tutorial-keys li div span {font-size:11px;color:#344d78}
.tutorial-keys li p {margin:4px 0 0;color:#344d78}
.tutorial-keys kbd {margin-left:3px;min-width:21px;height:22px}
@media(max-width:900px) {
  .setup-columns {gap:12px}
  .wardrobe-panel,.difficulty-panel {padding:13px}
  .difficulty-card {gap:7px}
  .difficulty-reward span {display:none}
}
@media(max-width:720px) {
  .game-shell[data-screen="cover"] .court-wrap {height:clamp(470px,calc(100dvh - 110px),650px)}
  .cover-screen {grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:5px;padding:22px 24px 8px}
  .cover-screen h1 {font-size:clamp(34px,8vw,50px);margin:10px 0}
  .cover-start {margin-top:14px}
  .cover-meta {margin-top:14px}
  .cover-art {height:100%;width:100%;min-height:0}
  .game-shell[data-screen="setup"] .court-wrap {height:auto}
  .game-shell[data-screen="setup"] #court {position:absolute;inset:0}
  .setup-screen {position:relative}
  .setup-columns {grid-template-columns:1fr;padding-block:12px}
  .shop-grid {overflow:visible}
  .difficulty-note {margin:7px 0 12px}
  .difficulty-list {gap:8px}
  .difficulty-card {min-height:60px}
  .game-corner {right:10px;top:10px}
  .game-corner .match-menu-close,.match-menu-trigger {width:36px;height:36px}
  .match-hud .scoreboard {top:56px}
  .match-caption {top:106px;left:12px;font-size:10px}
  .rally-counter {top:106px;right:13px}
  .tutorial-keys {grid-template-columns:1fr;gap:6px}
  .tutorial-keys li {padding:6px 10px}
}
@media(max-width:390px) {
  .shop-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  .setup-title {letter-spacing:0}
  .setup-bar .setup-actions {gap:4px}
  .setup-bar .sound-toggle,.setup-bar .coin-pill {padding-inline:7px}
  .match-menu-trigger {width:34px;height:36px}
}

/* Shared phone and tablet layout. */
:root[data-touch-layout] {
  --mobile-width:100dvw;
  --mobile-height:100dvh;
  --mobile-top:env(safe-area-inset-top,0px);
  --mobile-right:env(safe-area-inset-right,0px);
  --mobile-bottom:env(safe-area-inset-bottom,0px);
  --mobile-left:env(safe-area-inset-left,0px);
}
:root[data-touch-layout] {overscroll-behavior:none}
:where(:root[data-touch-layout]) .app {
  position:fixed;top:0;left:0;display:flex;flex-direction:column;
  width:var(--mobile-width);height:var(--mobile-height);max-width:none;overflow:hidden;padding:0;
}
:where(:root[data-touch-layout]) .app :is(.topbar,.below,footer) {display:none}
:where(:root[data-touch-layout]) .app .game-shell {flex:1;min-height:0;border:0;border-radius:0;box-shadow:none}
:where(:root[data-touch-layout]) .app .game-shell:not([data-screen="match"]) .court-wrap {height:100%;aspect-ratio:auto}
:where(:root[data-touch-layout]) .app.is-playing .game-shell[data-screen="match"] {display:flex;flex-direction:column}
:where(:root[data-touch-layout]) .app.is-playing .game-shell[data-screen="match"] .court-wrap {
  flex:1;min-height:0;max-height:none;height:auto;aspect-ratio:auto;
}
:where(:root[data-touch-layout]) .cover-screen {
  grid-template-columns:1.04fr 1fr;grid-template-rows:minmax(0,1fr);
  gap:12px;overflow:auto;
  --cover-gutter:clamp(22px,5%,58px);
  padding:calc(14px + var(--mobile-top)) max(var(--cover-gutter),var(--mobile-right))
    calc(14px + var(--mobile-bottom)) max(var(--cover-gutter),var(--mobile-left));
}
:where(:root[data-touch-layout]) .cover-screen h1 {font-size:clamp(26px,calc(var(--mobile-height)*.11),62px);margin:9px 0}
:where(:root[data-touch-layout]) .cover-kicker {margin:0}
:where(:root[data-touch-layout]) .cover-start {margin-top:10px;padding:10px 14px;font-size:14px}
:where(:root[data-touch-layout]) .cover-meta {margin-top:10px;gap:5px}
:where(:root[data-touch-layout]) .cover-art {height:100%;width:100%;min-height:0}
:where(:root[data-touch-layout]) .setup-screen {position:absolute}
:where(:root[data-touch-layout]) .setup-bar {
  min-height:calc(42px + var(--mobile-top));
  padding:calc(5px + var(--mobile-top)) calc(12px + var(--mobile-right)) 5px calc(12px + var(--mobile-left));
}
:where(:root[data-touch-layout]) .setup-columns {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;
  padding:8px calc(12px + var(--mobile-right)) calc(8px + var(--mobile-bottom)) calc(12px + var(--mobile-left));
}
:where(:root[data-touch-layout]) .wardrobe-panel,:where(:root[data-touch-layout]) .difficulty-panel {padding:8px 10px;overflow:auto}
:where(:root[data-touch-layout]) .section-heading {margin-bottom:5px}
:where(:root[data-touch-layout]) .fitting-stage {min-height:60px;margin-bottom:5px;padding:2px 8px}
:where(:root[data-touch-layout]) .fitting-avatar {flex-basis:46px;width:46px}
:where(:root[data-touch-layout]) .shop-switch {margin-bottom:4px}
:where(:root[data-touch-layout]) .shop-grid {overflow:auto}
:where(:root[data-touch-layout]) .difficulty-panel {display:block}
:where(:root[data-touch-layout]) .difficulty-panel .eyebrow {margin-bottom:4px}
:where(:root[data-touch-layout]) .difficulty-panel h2 {font-size:19px}
:where(:root[data-touch-layout]) .difficulty-note {margin:3px 0 5px;font-size:11px}
:where(:root[data-touch-layout]) .match-length {margin-bottom:5px}
:where(:root[data-touch-layout]) .match-length legend {padding-bottom:3px}
:where(:root[data-touch-layout]) .match-length-options span {min-height:30px}
:where(:root[data-touch-layout]) .difficulty-list {gap:5px}
:where(:root[data-touch-layout]) .difficulty-card {min-height:44px;padding:4px 6px}
:where(:root[data-touch-layout]) .difficulty-copy {gap:2px}
:where(:root[data-touch-layout]) .difficulty-copy strong {font-size:15px}
:where(:root[data-touch-layout]) .difficulty-copy small {font-size:10px}
:where(:root[data-touch-layout]) .difficulty-index {padding:6px}
:where(:root[data-touch-layout]) .match-hud .scoreboard {top:calc(10px + var(--mobile-top));gap:14px}
:where(:root[data-touch-layout]) .match-hud .score-player {font-size:11px;gap:6px}
:where(:root[data-touch-layout]) .match-hud .score-player small {font-size:7px;letter-spacing:.4px}
:where(:root[data-touch-layout]) .match-hud .score {gap:12px}
:where(:root[data-touch-layout]) .match-hud .score b {font-size:30px}
:where(:root[data-touch-layout]) .match-hud .player-dot {width:7px;height:7px}
:where(:root[data-touch-layout]) .match-caption {top:calc(10px + var(--mobile-top));left:calc(12px + var(--mobile-left));font-size:10px}
:where(:root[data-touch-layout]) .game-shell .game-corner {top:calc(8px + var(--mobile-top));right:calc(10px + var(--mobile-right))}
:where(:root[data-touch-layout]) .training-banner {
  left:max(17%,calc(76px + var(--mobile-left)));
  right:max(23%,calc(174px + var(--mobile-right)));
  width:auto;max-width:480px;margin-inline:auto;transform:none;
}
:where(:root[data-touch-layout]) .match-hud .match-menu-trigger {width:38px;height:38px}
:where(:root[data-touch-layout]) .rally-counter {top:calc(52px + var(--mobile-top));right:calc(13px + var(--mobile-right))}
:where(:root[data-touch-layout]) .game-shell[data-screen="match"] .touch-controls {
  --touch-size:clamp(48px,calc(var(--mobile-width)*.073),var(--touch-size-limit,66px));
  --touch-gap:8px;
  --touch-edge:var(--touch-side-padding,4px);
  position:absolute;inset:0;z-index:3;display:block;padding:0;
  border:0;background:transparent;pointer-events:none;user-select:none;
}
:where(:root[data-touch-layout]) .game-shell .touch-controls[inert] {visibility:hidden}
:where(:root[data-touch-layout]) .touch-movement,:where(:root[data-touch-layout]) .touch-shots {position:absolute;bottom:calc(12px + var(--mobile-bottom))}
:where(:root[data-touch-layout]) .touch-movement {
  --movement-size:calc(var(--touch-size)*1.12);
  left:calc(var(--touch-edge) + var(--mobile-left));display:grid;gap:var(--touch-gap) 0;
  grid-template-columns:repeat(3,var(--movement-size));
  grid-template-areas:". jump ." "left . right";
}
:where(:root[data-touch-layout]) .touch-movement [data-hold="left"] {grid-area:left}
:where(:root[data-touch-layout]) .touch-movement [data-hold="right"] {grid-area:right}
:where(:root[data-touch-layout]) .touch-movement [data-action="jump"] {grid-area:jump}
:where(:root[data-touch-layout]) .touch-shots {
  /* Turn the arc toward the right edge as the buttons grow. */
  --shot-size:calc(var(--touch-size)*1.18);
  /* Compensate for the larger diameter to preserve the gap between buttons. */
  --arc-radius:calc(var(--touch-size)*2.7 + (var(--shot-size) - var(--touch-size))*1.931852);
  /* Relative center offsets at 5, 35 and 65 degrees from the bottom edge. */
  --arc-middle-right:calc(var(--arc-radius)*.396534);
  --arc-middle-bottom:calc(var(--arc-radius)*.486421);
  --arc-far-right:calc(var(--arc-radius)*.573576);
  --arc-far-bottom:calc(var(--arc-radius)*.819152);
  right:calc(var(--mobile-right) + var(--touch-edge));
  bottom:calc(var(--mobile-bottom) + var(--touch-size)*.1988113);
  width:calc(var(--arc-far-right) + var(--shot-size));
  height:calc(var(--arc-far-bottom) + var(--shot-size));
}
:where(:root[data-touch-layout]) .game-shell[data-screen="match"] .touch-controls button {
  display:grid;place-items:center;
  min-width:0;
  border:1px solid var(--control-accent,#7599c9);
  background:linear-gradient(155deg,#263e65f7,#0d1d37f2);
  box-shadow:0 3px 8px #11244540,inset 0 0 0 2px #ffffff16;
  color:#f4f8ff;font-weight:800;line-height:1;touch-action:none;pointer-events:auto;
}
:where(:root[data-touch-layout]) .touch-controls button svg {
  width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
:where(:root[data-touch-layout]) .game-shell[data-screen="match"] .touch-movement button {
  width:var(--movement-size);height:var(--movement-size);border-radius:15px;
}
:where(:root[data-touch-layout]) .game-shell[data-screen="match"] .touch-shots button {
  position:absolute;border-radius:50%;width:var(--shot-size);height:var(--shot-size);
  align-content:center;row-gap:3px;font-size:12px;letter-spacing:.06em;
}
:where(:root[data-touch-layout]) .touch-shots button svg {
  width:18px;height:18px;stroke:var(--control-accent);
}
:where(:root[data-touch-layout]) .game-shell[data-screen="match"] .touch-shots .touch-hit {
  bottom:0;right:var(--arc-far-right);--control-accent:#8fdbff;
}
:where(:root[data-touch-layout]) .game-shell[data-screen="match"] .touch-shots .touch-smash {
  bottom:var(--arc-middle-bottom);right:var(--arc-middle-right);--control-accent:#ff9b73;
}
:where(:root[data-touch-layout]) .game-shell[data-screen="match"] .touch-shots .touch-drop {
  bottom:var(--arc-far-bottom);right:0;--control-accent:#f7d67c;
}
:where(:root[data-touch-layout]) .game-shell[data-screen="match"] .touch-controls button.pressed {
  transform:none;background:#2d5284;filter:none;
}
:where(:root[data-touch-layout]) .result-overlay .result-card {max-height:100%;overflow:auto;transform:none}
:where(:root[data-touch-layout]) #help-dialog {
  width:min(650px,calc(var(--mobile-width) - 24px));
  max-height:calc(var(--mobile-height) - 24px);padding:14px;overflow:auto;
}
:where(:root[data-touch-layout]) #help-dialog h2 {margin:5px 0;font-size:22px}
:where(:root[data-touch-layout]) .tutorial-intro {margin:4px 0 7px}
:where(:root[data-touch-layout]) .tutorial-keys {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:6px 0}
:where(:root[data-touch-layout]) .tutorial-keys li {margin:0;padding:5px 7px}
:where(:root[data-touch-layout]) .tutorial-keys li p {font-size:11px;line-height:1.35}
:where(:root[data-touch-layout]) .dialog-note {margin:6px 0 8px;padding-top:6px}

@media (min-width:620px) and (min-height:620px) {
  :root[data-touch-layout] {
    --touch-size-limit:76px;
    --touch-side-padding:clamp(10px,calc(var(--mobile-width)*.015),20px);
  }
  :where(:root[data-touch-layout]) .cover-start {min-height:48px;font-size:16px}
  :where(:root[data-touch-layout]) .setup-bar {min-height:calc(56px + var(--mobile-top))}
  :where(:root[data-touch-layout]) .setup-columns {
    gap:16px;padding:16px calc(18px + var(--mobile-right)) calc(16px + var(--mobile-bottom)) calc(18px + var(--mobile-left));
  }
  :where(:root[data-touch-layout]) :is(.wardrobe-panel,.difficulty-panel) {padding:16px}
  :where(:root[data-touch-layout]) .fitting-stage {min-height:88px;padding:5px 12px;margin-bottom:10px}
  :where(:root[data-touch-layout]) .fitting-avatar {flex-basis:68px;width:68px}
  :where(:root[data-touch-layout]) .shop-switch button {min-height:40px;font-size:14px}
  :where(:root[data-touch-layout]) .shop-card strong,
  :where(:root[data-touch-layout]) .shop-card small {font-size:12px}
  :where(:root[data-touch-layout]) .difficulty-panel h2 {font-size:24px}
  :where(:root[data-touch-layout]) .difficulty-note {font-size:13px;margin:6px 0 12px}
  :where(:root[data-touch-layout]) .match-length-options span {min-height:44px}
  :where(:root[data-touch-layout]) .difficulty-list {gap:8px}
  :where(:root[data-touch-layout]) .difficulty-card {min-height:64px;padding:8px 10px}
  :where(:root[data-touch-layout]) .difficulty-copy strong {font-size:18px}
  :where(:root[data-touch-layout]) .difficulty-copy small {font-size:12px}
  :where(:root[data-touch-layout]) .match-hud .score b {font-size:38px}
  :where(:root[data-touch-layout]) .match-hud .score-player {font-size:13px}
  :where(:root[data-touch-layout]) .match-caption {font-size:12px}
  :where(:root[data-touch-layout]) .game-corner :is(.sound-toggle,.training-skip) {min-height:44px}
  :where(:root[data-touch-layout]) .match-hud .match-menu-trigger {width:44px;height:44px}
  :where(:root[data-touch-layout]) .touch-movement button svg {width:30px;height:30px}
  :where(:root[data-touch-layout]) .touch-shots button svg {width:22px;height:22px}
}

@media (orientation:portrait) {
  :root[data-touch-layout] {
    --mobile-width:100dvh;
    --mobile-height:100dvw;
    --mobile-top:env(safe-area-inset-left,0px);
    --mobile-right:env(safe-area-inset-top,0px);
    --mobile-bottom:env(safe-area-inset-right,0px);
    --mobile-left:env(safe-area-inset-bottom,0px);
  }
  /* Keep the same layout when the browser viewport turns upright. */
  :where(:root[data-touch-layout]) .app {transform-origin:top left;transform:translateX(100dvw) rotate(90deg)}
  :where(:root[data-touch-layout]) #help-dialog {
    position:fixed;inset:auto;top:50%;left:50%;margin:0;
    transform:translate(-50%,-50%) rotate(90deg);
  }
}