@charset "UTF-8";
:root {
  font-family: "Arial Rounded MT Bold", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #254d43; background: #f5f8ee; font-synthesis: none;
  --ink: #254d43; --lime: #ffdb72; --muted: #668376; --orange: #ffab83; --border: #254d43;
}
* { box-sizing: border-box; }
body { margin: 0; background-image: radial-gradient(#8cbaa426 1.1px, transparent 1.1px); background-size: 20px 20px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 3px solid #ee956b; outline-offset: 4px; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
.app { width: min(1120px, 100%); margin: auto; padding: 0 36px 36px; }
.topbar { height: 96px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; background: #ffdb72; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); font-size: 26px; transform: rotate(-8deg); }
.brand strong { font-size: 29px; font-weight: 850; letter-spacing: 2px; }
.brand-sub { font-size: 12px; font-weight: 600; color: var(--muted); padding-left: 7px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.training-label { font-size: 13px; font-weight: 650; color: #4b7060; margin-right: 8px; }
.training-label i, .focus-badge i { display: inline-block; width: 7px; height: 7px; background: #68b789; border: 1px solid var(--ink); border-radius: 50%; margin: 0 6px 1px 0; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 14px; background: #fffef7; font-size: 17px; font-weight: 750; box-shadow: 0 3px 0 #b5c5ac; }
.icon-button:hover { background: #ffe49b; }
button:active:not(:disabled) { translate: 0 2px; }
.layout { display: grid; grid-template-columns: minmax(0, 680px) 264px; gap: 36px; }
.arena { border: 2px solid var(--ink); border-radius: 24px; overflow: hidden; background: #b6e4c9; box-shadow: 0 7px 0 #254d431a; }
.scoreboard { height: 113px; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: #fffdf3; border-bottom: 2px solid var(--ink); }
.competitor { width: 27%; max-width: 156px; }
.player-name { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 800; }
.player-name > span { font-size: 11px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.player-dot { display: inline-block; width: 10px; height: 10px; background: var(--lime); border: 1.5px solid var(--ink); border-radius: 4px; flex-shrink: 0; rotate: -9deg; }
.opponent .player-dot { background: var(--orange); rotate: 9deg; }
.opponent { text-align: right; }
.opponent .player-name { justify-content: flex-end; }
.energy { height: 9px; background: #e5ecdf; margin-top: 11px; border-radius: 5px; overflow: hidden; border: 1.5px solid var(--ink); }
.energy div { height: 100%; background: #ffda68; transform-origin: left; transition: width .15s linear; width: 100%; }
.opponent .energy div { background: #ffa179; }
.energy-label { display: block; font-size: 11px; color: #658171; margin-top: 5px; }
.energy-label b { font-weight: 750; color: #385e4d; }
.score { text-align: center; }
.score > div { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 35px; font-weight: 850; font-variant-numeric: tabular-nums; }
.score #player-score, .score #ai-score { min-width: 39px; line-height: 45px; background: #ffdf82; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 #e6c264; rotate: -4deg; }
.score #ai-score { background: #ffc6a7; box-shadow: 0 3px 0 #dfac8d; rotate: 4deg; }
.score .score-separator { font-size: 22px; color: #6a8876; }
.score-rule { display: block; margin-top: 9px; font-size: 11px; color: #688473; font-weight: 650; }
.court-wrap { position: relative; height: min(69vh, 672px); min-height: 490px; background: #afe0c3; overflow: hidden; isolation: isolate; }
canvas { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.court-caption { position: absolute; left: 17px; right: 17px; top: 13px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; color: #355f4f; font-size: 11px; font-weight: 700; }
.court-no { padding: 4px 8px; background: #fffce79c; border: 1px solid #5b91757a; border-radius: 7px; font-size: 10px; }
.court-caption #rally-count { min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; }
.focus-badge { position: absolute; left: 50%; top: 41px; transform: translateX(-50%); white-space: nowrap; background: #ffdf7c; color: var(--ink); padding: 8px 13px; border: 2px solid var(--ink); border-radius: 30px; font-size: 12px; box-shadow: 0 3px 0 #254d4329; pointer-events: none; }
.focus-badge i { background: #ff986b; }
.focus-badge b { margin-left: 5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.plan-hint { position: absolute; left: 50%; bottom: 17px; transform: translateX(-50%); padding: 8px 16px; border-radius: 30px; border: 2px solid var(--ink); background: #fff4bb; color: var(--ink); font-weight: 750; font-size: 13px; white-space: nowrap; pointer-events: none; box-shadow: 0 3px 0 #254d4326; }
.court-footer { min-height: 51px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 2px solid var(--ink); background: #fffdf3; color: #537b64; font-size: 11px; line-height: 1.6; }
.court-footer > span { display: flex; align-items: center; gap: 7px; }
.key-dot { display: inline-block; width: 6px; height: 6px; background: #75b992; border-radius: 50%; flex-shrink: 0; }
.court-footer button { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 7px 8px; color: #466b54; background: #e6f0d6; border: 1px solid #789779; border-radius: 8px; }
.sidebar { display: flex; flex-direction: column; gap: 24px; padding-top: 2px; }
.sidebar section { border: 2px solid var(--ink); border-radius: 20px; padding: 20px; background: #fffef7; box-shadow: 0 4px 0 #254d4315; }
.sidebar .coach-section { background: #fff0b3; rotate: -1deg; }
.section-label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #658068; font-weight: 700; }
.section-label > span:last-child:not(:first-child) { color: #6d8d68; }
.coach-icon { font-size: 31px; line-height: 1; margin: 20px 0 16px; }
.sidebar h2 { font-size: 18px; font-weight: 800; line-height: 1.55; margin: 0 0 9px; }
.sidebar p { font-size: 13px; line-height: 1.9; color: #637d62; margin: 0; }
.coach-footer { margin-top: 21px; display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 11px; color: #658149; }
.coach-footer i { display: block; width: 17px; height: 5px; border-radius: 4px; background: #b7c573; flex-shrink: 0; }
.profile-heading { display: flex; align-items: center; gap: 12px; margin: 19px 0 21px; }
.profile-symbol { display: grid; place-items: center; width: 46px; height: 50px; background: #abddbb; border: 2px solid var(--ink); color: #315b45; border-radius: 18px; box-shadow: 0 3px 0 #254d43; font-size: 25px; font-weight: 750; rotate: -5deg; }
.profile-heading h2 { font-size: 17px; margin: 0 0 3px; }
.profile-heading p { font-size: 11px; }
.attribute { display: flex; align-items: center; gap: 5px; margin: 12px 0; }
.attribute span { font-size: 12px; width: 35px; color: #66816c; margin-right: 10px; }
.attribute i { width: 22px; height: 9px; border-radius: 3px; background: #92cf99; border: 1px solid #648967; }
.attribute i.empty { background: #edf0e6; border-color: #c4d0bb; }
.sidebar .profile-note { font-size: 11px; margin-top: 19px; color: #8b9c7f; }
.section-label button { background: #edf3df; border-radius: 7px; font-size: 11px; color: #577748; padding: 5px 7px; }
.sidebar .guide-note { font-size: 12px; margin-top: 12px; }
.guide-row { display: grid; grid-template-columns: 43px 1fr; gap: 8px; margin: 17px 0; font-size: 12px; }
.guide-row strong { color: #466e4b; font-weight: 800; padding-top: 1px; }
.guide-row span { color: #76876a; line-height: 1.7; }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #bfe4c761; backdrop-filter: blur(3px); z-index: 5; padding: 18px; }
.intro-card { width: 327px; max-height: calc(100% - 12px); overflow: auto; padding: 27px 25px 23px; background: #fffdf1; border: 2px solid var(--ink); border-radius: 25px; box-shadow: 0 7px 0 #254d433d; }
.eyebrow { display: inline-block; padding: 6px 10px; background: #e5f2cf; border-radius: 9px; font-size: 11px; font-weight: 750; color: #537944; }
.intro-card h1 { font-size: 29px; font-weight: 850; margin: 17px 0 10px; letter-spacing: -.7px; line-height: 1.3; }
.intro-card > p { font-size: 13px; line-height: 1.85; margin: 0; color: #7d8c6f; }
.intro-card ol { list-style: none; padding: 0; margin: 22px 0; }
.intro-card li { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 12px; line-height: 1.8; color: #8b9478; }
.intro-card li > b { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 30px; background: #ffdf83; border: 1.5px solid var(--ink); border-radius: 10px; color: #51663b; font-size: 15px; rotate: -6deg; }
.intro-card li:nth-child(2) > b { background: #b8e6c5; rotate: 5deg; }
.intro-card li:nth-child(3) > b { background: #ffc6a7; rotate: -3deg; }
.intro-card li strong { font-weight: 750; color: #3f674e; }
.primary-button { display: flex; align-items: center; justify-content: space-between; background: #ffdb72; color: #36533d; width: 100%; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); padding: 12px 16px; font-size: 15px; font-weight: 800; min-height: 49px; margin: 21px 0 5px; }
.primary-button span { font-size: 22px; }
.primary-button:hover { background: #ffe799; }
.primary-button:active { box-shadow: 0 2px 0 var(--ink); }
.text-button { display: block; margin: 15px auto 0; background: transparent; font-size: 12px; color: #79906c; min-height: 32px; }
.shot-wheel { position: absolute; width: 292px; height: 292px; border-radius: 50%; background: radial-gradient(circle, transparent 0 84px, #fffdf19c 86px); border: 2.5px solid var(--ink); box-shadow: 0 6px 0 #254d4330, 0 10px 30px #254d4320; z-index: 4; touch-action: none; pointer-events: none; transition: opacity .12s ease-out; }
.shot-wheel.aiming { opacity: .12; }
.wheel-center { display: none; }
.shot-option { position: absolute; width: 77px; height: 58px; transform: translate(-50%, -50%); background: #e5f3dc; color: #416d52; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; border-radius: 17px; border: 1.5px solid #779d7b; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.shot-option strong { font-size: 14px; font-weight: 800; }
.shot-option small { font-size: 9px; color: #6c7c5a; }
.shot-option.selected { background: #ffdc78; color: #315a40; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.shot-option.selected small { color: #6a7543; }
.shot-option.unavailable { background: #e3e9e0; color: #8d9f8d; border-style: dashed; border-color: #a7b6a1; }
.shot-option.unavailable small { color: #84967f; }
.shot-option.unavailable.selected { border-color: #889a7c; box-shadow: 0 3px 0 #889a7c; }
.shot-option.marginal:not(.selected) strong { color: #a9714d; }
.shot-hint { position: absolute; z-index: 5; left: 50%; bottom: 9px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 16px); padding: 9px 12px; text-align: center; background: #fff1b1; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 #254d4320; font-size: 12px; font-weight: 750; pointer-events: none; }
.shot-hint.invalid { background: #ffe1d3; color: #963f2d; }
.secondary-button { width: 100%; min-height: 44px; padding: 10px 12px; margin-top: 9px; background: #e6f1df; border: 1.5px solid #5b836b; border-radius: 12px; font-size: 13px; font-weight: 700; }
#opponent-name { font-size: inherit; font-weight: inherit; white-space: nowrap; }
#toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 10; max-width: calc(100% - 30px); white-space: nowrap; background: #fff2b7; color: #466443; padding: 12px 18px; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 #254d433d; font-size: 13px; font-weight: 650; }
.focus-mode canvas { filter: saturate(.88) brightness(1.035); }
#hit-flash { position: fixed; inset: 0; z-index: 20; background: #fff; opacity: 0; pointer-events: none; }
@media(min-width:1250px) { .app { padding-top: 15px; } .court-wrap { height: min(71vh, 700px); } }
@media(max-width:850px) {
  .app { padding: 0 18px 27px; } .layout { grid-template-columns: minmax(0, 1fr) 216px; gap: 22px; }
  .brand-sub { display: none; } .scoreboard { padding: 13px 15px; } .sidebar section { padding: 16px; }
  .sidebar h2 { font-size: 16px; } .attribute { gap: 4px; } .attribute span { margin-right: 4px; } .attribute i { width: 20px; }
}
@media(max-width:650px) {
  .app { padding: 0 10px max(18px, env(safe-area-inset-bottom)); }
  .topbar { height: 68px; padding: 0 4px; } .brand { gap: 9px; } .brand-mark { width: 32px; height: 33px; border-radius: 11px; font-size: 22px; }
  .brand strong { font-size: 25px; } .training-label { font-size: 11px; margin-right: 1px; } .top-actions { gap: 7px; } .icon-button { width: 34px; height: 34px; border-radius: 12px; }
  .layout { display: flex; flex-direction: column; gap: 15px; } .arena { border-radius: 20px; }
  .scoreboard { height: 95px; padding: 12px 14px; } .player-name { font-size: 14px; gap: 5px; } .player-name > span { font-size: 10px; } .player-dot { width: 8px; height: 8px; border-radius: 3px; }
  .energy { margin-top: 9px; height: 8px; } .energy-label { font-size: 10px; }
  .score > div { font-size: 31px; gap: 7px; } .score #player-score, .score #ai-score { min-width: 34px; line-height: 38px; border-radius: 10px; } .score-rule { font-size: 10px; margin-top: 7px; }
  .court-wrap { height: calc(100svh - 260px); min-height: 385px; max-height: 660px; }
  .court-caption { left: 11px; right: 11px; top: 10px; font-size: 10px; } .court-no { font-size: 9px; padding: 4px 6px; } .court-caption #rally-count { min-width: 48px; }
  .court-footer { min-height: 47px; font-size: 10px; padding: 8px 10px; gap: 5px; } .court-footer button { font-size: 10px; padding: 6px; } .court-footer > span { gap: 5px; }
  .sidebar { padding: 0 2px; gap: 14px; } .sidebar .coach-section { rotate: 0deg; padding: 12px 15px; border-radius: 15px; }
  .coach-section > .section-label, .coach-icon, .coach-footer { display: none; }
  .sidebar h2 { font-size: 13px; margin: 0 0 4px; } .sidebar p { font-size: 12px; line-height: 1.7; } .profile-section { display: none; }
  .sidebar .guide-section { padding: 14px; border-radius: 15px; } .sidebar .guide-note { font-size: 11px; } .section-label { font-size: 12px; }
  .intro-card { width: 298px; max-height: calc(100% - 20px); overflow-y: auto; padding: 22px 22px 19px; border-radius: 22px; } .intro-card h1 { font-size: 27px; margin-top: 14px; } .intro-card > p { font-size: 12px; }
  .intro-card ol { margin: 17px 0; } .intro-card li { margin: 13px 0; font-size: 12px; gap: 10px; } .intro-card li > b { width: 26px; height: 28px; }
  .primary-button { font-size: 14px; padding: 11px 14px; margin-top: 17px; min-height: 47px; } .eyebrow { font-size: 10px; }
  .plan-hint { bottom: 10px; font-size: 12px; } .focus-badge { top: 35px; font-size: 11px; padding: 6px 10px; }
  #toast { font-size: 12px; white-space: normal; text-align: center; width: max-content; }
  .shot-wheel { transform-origin: center; }
}
@media(prefers-reduced-motion:reduce) { .energy div, .shot-wheel { transition: none; } button:active { translate: none; } #game-shell { transform: none !important; } #hit-flash { display: none !important; } }

.run-controls { border-top: 2px solid var(--ink); background: #fffdf3; padding: 9px 14px 11px; }
.run-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; font-size: 11px; }
.run-heading span { font-size: 10px; color: #6b7e61; }
.run-options { display: flex; gap: 7px; }
.run-options button { flex: 1; min-height: 41px; border: 1.5px solid #6b957e; border-radius: 11px; background: #eaf2e2; font-size: 13px; font-weight: 750; }
.run-options small { font-size: 10px; font-weight: 500; margin-left: 3px; }
.run-options button[aria-pressed="true"] { background: #ffdc78; border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.run-options button:disabled { opacity: .4; }
.energy div.low { background: #ed9271; }
.footer-settings { display: flex; gap: 5px; flex-shrink: 0; }
.court-footer { flex-wrap: wrap; }
.court-footer > span { flex: 1; min-width: 155px; }
#sound[aria-pressed="false"] { background: #e6e7e2; color: #798272; }
.height-readout { position: absolute; z-index: 2; right: 11px; top: 67px; display: flex; gap: 7px; padding: 7px 9px; background: #fffce9ed; border: 1.5px solid var(--ink); border-radius: 12px; pointer-events: none; box-shadow: 0 3px 0 #254d4320; }
.height-readout small { display: block; font-size: 9px; margin-bottom: 4px; }
.height-readout b { font-size: 17px; font-variant-numeric: tabular-nums; }
.height-gauge { position: relative; width: 7px; height: 34px; background: #dce6d6; border: 1px solid #789779; border-radius: 4px; overflow: hidden; }
.height-gauge i { position: absolute; bottom: 0; width: 100%; background: #edbc53; }
@media(max-width:650px) {
  .court-wrap { height: calc(100svh - 340px); min-height: 320px; }
  .run-controls { padding: 7px 10px 10px; }
  .court-footer { padding: 7px 10px; }
  .height-readout { top: 65px; right: 8px; padding: 6px; }
}
@media(max-width:650px) and (max-height:700px) {
  .intro-card { padding: 14px 18px; }
  .intro-card h1 { font-size: 22px; margin: 8px 0; }
  .intro-card:has(#instructions:not([hidden])) > p { display: none; }
  .intro-card ol { margin: 9px 0; }
  .intro-card li { margin: 8px 0; font-size: 11px; gap: 8px; }
  .intro-card li > b { width: 23px; height: 25px; }
  .intro-card .primary-button { margin-top: 10px; min-height: 40px; padding: 8px 12px; }
}
@media(max-width:650px) and (max-height:700px) {
  .overlay { padding: 8px; }
  .intro-card { max-height: 100%; }
  .intro-card li { line-height: 1.5; }
}

/* Energy is communicated by colour and filled segments, without cost numbers. */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip-path:inset(50%); white-space:nowrap; border:0 !important; }
[data-energy="low"] { --cost-color:#3e926e; --cost-paper:#e1f2de; }
[data-energy="medium"] { --cost-color:#bc8825; --cost-paper:#fff0c0; }
[data-energy="high"] { --cost-color:#c96547; --cost-paper:#ffdac8; }
.cost-meter { display:inline-flex; align-items:flex-end; gap:3px; height:13px; pointer-events:none; }
.cost-meter i { display:block; width:6px; height:5px; border:1px solid var(--cost-color); border-radius:2px; opacity:.25; }
.cost-meter i:nth-child(2) { height:9px; }
.cost-meter i:nth-child(3) { height:13px; }
.cost-meter i:first-child, [data-energy="medium"] .cost-meter i:nth-child(2), [data-energy="high"] .cost-meter i { background:var(--cost-color); opacity:1; }
.shot-option { background:var(--cost-paper); gap:6px; }
.shot-option.selected { background:var(--cost-paper); outline:2px solid #fffdf1; outline-offset:2px; }
.shot-option.unavailable { --cost-color:#9da99a; background:#e3e9e0; }
.shot-option.unavailable .cost-meter { display:none; }
.shot-option .unavailable-mark { font-size:17px; line-height:13px; }
.shot-option.marginal:not(.selected) strong { color:inherit; }
.energy { height:12px; border-radius:4px; margin-bottom:8px; }
.energy div[data-level="high"] { background:#74b890; }
.energy div[data-level="medium"] { background:#e9bf56; }
.energy div[data-level="low"] { background:#df896a; }
.run-options button { display:flex; align-items:center; justify-content:center; gap:6px; background:var(--cost-paper); }
.run-options button[aria-pressed="true"] { background:var(--cost-paper); outline:2px solid var(--ink); outline-offset:1px; }
.speed-mark { color:var(--cost-color); font-size:20px; letter-spacing:-4px; padding-right:4px; }
.run-options .auto-jog::after { content:'↘'; font-size:17px; color:#b75d43; }
.energy-key { display:flex; gap:5px; align-items:center; padding-top:12px; }
.energy-key i { display:block; width:16px; height:8px; border-radius:3px; background:var(--cost-color); }
.energy-key > span:last-child { margin-left:5px; font-size:10px; }
@media(max-width:360px) { .run-options button { gap:4px; font-size:12px; } .run-options .cost-meter { gap:2px; } .run-options .cost-meter i { width:4px; } }

.move-guide { display:flex; align-items:center; justify-content:center; gap:9px; padding:12px 8px; background:#fffdf3; border-top:2px solid var(--ink); color:#63806b; font-size:11px; }
.move-guide > span:nth-child(3) { margin-left:10px; color:#be793f; }
.move-guide b { font-size:18px; }

/* Court first: instruction and supporting information live in the tutorial. */
html, body { overflow-x:clip; }
body { background-image:none; }
.app { width:min(720px,100%); height:100svh; min-height:440px; padding:0 8px max(6px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; }
.topbar { height:48px; min-height:48px; padding:0 3px; }
.brand { gap:6px; }
.brand strong { font-size:18px; }
.brand-mark, .brand-sub, .training-label i { display:none; }
.training-label { font-size:10px; margin-right:0; }
.top-actions { gap:7px; }
.icon-button { width:34px; height:34px; border-radius:10px; box-shadow:0 2px 0 #b5c5ac; }
.tutorial-button { width:52px; font-size:12px; }
.layout { display:flex; flex:1; min-height:0; }
.arena { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; border-radius:16px; box-shadow:none; }
.scoreboard { height:62px; min-height:62px; padding:8px 15px; }
.player-name { font-size:12px; gap:4px; }
.player-name > span { display:none; }
.player-dot { width:7px; height:7px; }
.score > div { font-size:25px; gap:7px; }
.score #player-score, .score #ai-score { line-height:32px; min-width:30px; border-radius:8px; box-shadow:none; rotate:0deg; }
.score-rule { display:none; }
.energy { margin:6px 0 0; height:8px; }
.court-wrap { flex:1; height:auto; min-height:0; max-height:none; }
.court-caption { top:10px; left:10px; right:10px; justify-content:flex-end; }
#court-no, #rally-status { display:none; }
.court-caption #rally-count { min-width:0; font-size:10px; }
.height-readout { top:36px; right:8px; padding:5px; gap:5px; border-width:1px; box-shadow:none; border-radius:8px; }
.height-readout small { font-size:8px; margin-bottom:2px; }
.height-readout b { font-size:13px; }
.height-gauge { height:28px; width:5px; }
.focus-badge { top:8px; font-size:18px; padding:3px 8px; box-shadow:none; border-width:1px; }
.shot-hint:not(.invalid) { display:none !important; }
.footer-settings { margin-top:16px; justify-content:center; }
.footer-settings button { padding:8px 12px; min-height:36px; font-size:12px; background:#e6f0d6; border:1px solid #789779; border-radius:8px; }
.tutorial-overlay { position:fixed; inset:0; z-index:30; padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); background:#254d437a; display:flex; justify-content:center; align-items:center; }
.tutorial-card { width:min(460px,100%); max-height:100%; overflow:auto; overscroll-behavior:contain; background:#fffdf1; border:2px solid var(--ink); border-radius:20px; padding:0 18px 20px; }
.tutorial-header { position:sticky; top:0; background:#fffdf1; display:flex; justify-content:space-between; align-items:center; padding:14px 0; z-index:1; }
.tutorial-header h2 { margin:0; font-size:20px; }
.tutorial-basics p { font-size:12px; line-height:1.8; margin:0 0 15px; color:#637d62; }
.tutorial-basics b { color:var(--ink); font-size:13px; }
.tutorial-card .sidebar { padding:0; gap:14px; }
.tutorial-card .sidebar section { padding:14px; border-radius:14px; rotate:none; box-shadow:none; }
.tutorial-card .profile-section { display:block; }
.tutorial-card .coach-icon, .tutorial-card .coach-footer { display:none; }
.tutorial-card .sidebar h2 { font-size:14px; }
.tutorial-card .profile-heading { margin:12px 0; }
.tutorial-card .profile-note { margin-top:10px; }
.tutorial-card .sidebar p { font-size:12px; }
@media(max-height:540px) { .topbar { height:42px; min-height:42px; } .scoreboard { height:52px; min-height:52px; } }

.prepare-shot { position:absolute; right:12px; bottom:12px; z-index:3; padding:10px 14px; min-height:42px; background:var(--cost-paper,#e1f2de); border:2px solid var(--ink); border-radius:14px; font-size:12px; font-weight:750; box-shadow:0 3px 0 #254d4330; touch-action:manipulation; }
.point-feedback { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); padding:10px 18px; background:#fff1b1e8; border:1.5px solid var(--ink); border-radius:15px; font-size:17px; font-weight:800; pointer-events:none; z-index:3; }

/* Fixed shot slots around the player; dragging clears the court for aiming. */
.contact-wheel { position:absolute; width:248px; height:248px; border:0; border-radius:50%; background:radial-gradient(circle,#fff9df00 29%,#fff9df40 30%,#fff9df20 68%,transparent 70%); box-shadow:none; transform:none; pointer-events:none; }
.contact-wheel .shot-option { width:62px; height:44px; border-radius:14px; gap:4px; box-shadow:0 3px 0 #254d4330; }
.contact-wheel .shot-option strong { font-size:12px; }
.contact-wheel .shot-option.selected { outline:2px solid #fffdf1; outline-offset:2px; border:2px solid var(--ink); box-shadow:0 3px 0 var(--ink); }
.contact-wheel .shot-option:disabled { opacity:.32; }
.contact-wheel .cost-meter { height:10px; }
.contact-wheel .cost-meter i:nth-child(3) { height:10px; }
.contact-wheel .cost-meter i:nth-child(2) { height:7px; }
.contact-wheel.aiming { background:none; opacity:1; }
.contact-wheel.aiming .shot-option { opacity:0; pointer-events:none; }

.choice-timer { position:absolute; left:50%; top:50%; width:66px; height:66px; transform:translate(-50%,-50%); border-radius:50%; background:#fffbedf5; box-shadow:0 2px 8px #254d4320; pointer-events:none; }
.choice-timer svg { width:100%; height:100%; transform:rotate(-90deg); }
.choice-timer circle { fill:none; stroke-width:4.5; }
.choice-track { stroke:#dfdfc5; }
#choice-progress { stroke:#e8b641; stroke-dasharray:157.08; stroke-dashoffset:0; stroke-linecap:round; }
.choice-timer > button { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px; width:100%; height:100%; border:0; border-radius:50%; padding:0; background:transparent; pointer-events:auto; touch-action:manipulation; }
.choice-timer b { font-size:16px; line-height:1; font-variant-numeric:tabular-nums; color:var(--ink); }
.choice-timer small { font-size:8px; color:#64745a; }

.choice-timer > button:hover { background:#ffdb6124; }
.choice-timer > button:active { background:#ffdb6145; }
.choice-timer > button:focus-visible { outline:3px solid #315d48; outline-offset:3px; }
.stage-grid { display:grid; gap:8px; margin:16px 0; }
.stage-card { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1.5px solid #829d7c; border-radius:13px; background:#edf3df; text-align:left; min-height:58px; }
.stage-card:hover, .stage-card:focus-visible { background:#ffebb0; border-color:var(--ink); }
.stage-symbol { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#fff9dc; font-weight:800; }
.stage-card strong { display:block; font-size:14px; }
.stage-card small { display:block; font-size:11px; color:#678064; margin-top:3px; }
.difficulty-dots { display:flex; gap:4px; margin-left:auto; }
.difficulty-dots i { width:7px; height:7px; border-radius:50%; background:#cdd9c2; }
.difficulty-dots i.lit { background:#dc9362; }

/* Compact stamina capacity and recovery, shared by both players. */
.stamina-row { display:flex; align-items:center; gap:3px; margin-top:5px; height:14px; }
.stamina-icon { width:15px; height:15px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.capacity-slot { flex:1; min-width:0; }
.stamina-row .energy { margin:0; height:8px; }
.opponent .stamina-row .energy { margin-left:auto; }
.recovery-icon { display:flex; flex-direction:column; justify-content:center; width:10px; height:16px; flex-shrink:0; opacity:0; color:#36855c; }
.recovery-icon i { font-size:15px; height:6px; line-height:10px; font-style:normal; font-weight:900; }
.recovery-icon i:first-child { display:none; }
[data-recovery="1"] .recovery-icon, [data-recovery="2"] .recovery-icon { opacity:1; animation:recover-rise 1.2s ease-in-out infinite; }
[data-recovery="2"] .recovery-icon i:first-child { display:block; }
[data-recovery="2"] .energy { box-shadow:0 0 0 2px #83c99455; }
[data-recovery="2"] .recovery-icon { animation-duration:.65s; }
@keyframes recover-rise { 0%,100% { transform:translateY(1px); opacity:.5; } 50% { transform:translateY(-2px); opacity:1; } }
.player-picker { margin-top:14px; }
.picker-label { display:block; font-size:10px; color:#708268; margin-bottom:8px; }
.player-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.player-card { position:relative; display:grid; grid-template-columns:26px 1fr; align-items:center; gap:6px; padding:9px; text-align:left; border:1.5px solid #9caf8f; border-radius:12px; background:#f0f4e5; }
.player-card[aria-pressed="true"] { border-color:#315b42; background:#fff0b3; box-shadow:inset 0 0 0 1px #315b42; }
.player-card[aria-pressed="true"]::after { content:'✓'; position:absolute; right:4px; top:2px; font-size:10px; }
.player-avatar { width:26px; height:28px; display:grid; place-items:center; border:1px solid #56785c; border-radius:9px; font-size:18px; }
.player-card strong { font-size:12px; white-space:nowrap; }
.player-card small { grid-column:1/-1; font-size:9px; color:#6b7e61; white-space:nowrap; }
.profile-mini-stats { display:flex; flex-direction:column; gap:3px; grid-column:1/-1; }
.profile-mini-stats > span { display:flex; align-items:center; gap:5px; height:7px; }
.profile-mini-stats b { width:11px; font-size:10px; line-height:8px; text-align:center; }
.profile-mini-stats i { flex:1; height:4px; background:linear-gradient(to right,#668c64 var(--stat),#d9e2ce var(--stat)); border-radius:3px; }
.intro-card:has(#player-picker:not([hidden])) { padding:16px; }
.intro-card:has(#player-picker:not([hidden])) h1 { margin:10px 0 5px; font-size:23px; }
.intro-card:has(#player-picker:not([hidden])) .stage-grid { gap:6px; margin:12px 0; }
.intro-card:has(#player-picker:not([hidden])) .stage-card { min-height:46px; padding:6px 10px; }
@media(prefers-reduced-motion:reduce) { .recovery-icon { animation:none !important; } }

/* Visual explanations: compact captions, gesture diagrams and comparable radar shapes. */
.ability-radar { display:block; width:100%; height:auto; overflow:visible; color:var(--ink); }
.radar-grid { fill:none; stroke:#c5d1b8; stroke-width:1; }
.radar-area { fill:var(--radar-fill,#ffda68); fill-opacity:.68; stroke:#4b765a; stroke-width:2; stroke-linejoin:round; }
.radar-point { fill:#315d45; stroke:#fff9df; stroke-width:1; }
.ability-radar text { fill:#607453; font-size:10px; font-weight:650; text-anchor:middle; }
.player-card .ability-radar { grid-column:1/-1; margin-top:0; }
.player-card { padding:10px 8px 8px; gap:2px 6px; }
.player-card[aria-pressed="true"] .radar-area { fill-opacity:.95; stroke:#254d43; stroke-width:2.5; }
#active-profile { text-align:center; }
#active-profile .profile-heading { justify-content:center; margin:10px 0 0; }
#active-profile .profile-heading h2 { margin:0; }
#active-profile .profile-symbol { width:34px; height:36px; border-radius:12px; font-size:19px; box-shadow:none; }
#active-profile .ability-radar { width:210px; max-width:100%; margin:0 auto; }
#overlay-copy:empty { display:none; }
.lesson-diagram { display:block; width:100%; height:auto; color:#315c49; }
.lesson-diagram .diagram-time { stroke:none; fill:#51784f; text-anchor:middle; font-size:12px; font-weight:800; }
.visual-tutorial { display:grid; gap:12px; }
.visual-lesson { border:1px solid #c8d5bd; background:#f1f5e6; border-radius:16px; padding:12px 12px 10px; }
.visual-lesson header { display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.visual-lesson h3 { font-size:14px; margin:0; }
.lesson-number { font-size:10px; color:#7d9073; font-weight:700; }
.lesson-caption { text-align:center; font-size:12px; font-weight:700; line-height:1.6; }
.visual-lesson .lesson-note { text-align:center; font-size:10px; line-height:1.5; color:#79896e; margin:3px 0 0; }
.training-route { display:flex; align-items:center; justify-content:center; gap:22px; padding:10px; color:#5b7753; font-size:11px; }
.training-route span { display:flex; align-items:center; gap:8px; }
.training-route b { display:grid; place-items:center; width:29px; height:30px; border:1px solid #7f9871; border-radius:8px; background:#fff0b9; color:var(--ink); font-size:18px; }
.tutorial-details, .sidebar details.coach-section { margin:12px 0; border:1px solid #d0dac5; border-radius:12px; background:#fffdf1; }
.tutorial-details summary, .sidebar details.coach-section summary { cursor:pointer; padding:12px; font-size:12px; font-weight:650; color:#627b56; }
.tutorial-details .tutorial-basics { padding:0 12px 3px; }
.sidebar details.coach-section { margin:0; }
.sidebar details.coach-section h2, .sidebar details.coach-section p { margin:0 12px 12px; }
#shot-guide { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:12px; }
.guide-row { display:block; margin:0; border:1px solid #d0dcc5; border-radius:12px; padding:10px 8px 8px; background:#f4f7eb; }
.shot-guide-title { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.shot-guide-title strong { font-size:12px; padding:0; }
.guide-row .cost-meter { gap:2px; }
.guide-row .cost-meter i { width:4px; }
.guide-row .lesson-diagram { margin-top:5px; }
.guide-row .shot-purpose { display:block; text-align:center; font-size:10px; line-height:1.2; color:#728766; }
.intro-card #instructions.quick-guide { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:20px 0; }
.intro-card #instructions.quick-guide li { position:relative; display:flex; flex-direction:column; gap:5px; margin:0; padding:7px 0; background:#ecf2dd; border:1px solid #ccd9bd; border-radius:12px; line-height:1.3; }
.intro-card #instructions.quick-guide li strong { font-size:10px; white-space:nowrap; }
.intro-card #instructions.quick-guide li:not(:last-child)::after { content:'›'; position:absolute; right:-8px; top:40%; color:#749365; font-size:18px; z-index:1; }
.intro-card:has(#instructions:not([hidden])) > p { display:block; }
@media(max-width:360px) {
  .intro-card { max-width:calc(100% - 12px); }
  .player-card { padding:9px 5px 6px; }
  .visual-lesson { padding:10px 8px; }
  .lesson-caption { font-size:11px; }
}

/* A single earned skill; boss state is readable without a permanent instruction panel. */
.boss-stage-card { background:#ffe5cc; border-color:#bb7957; }
.boss-stage-card .stage-symbol { background:#ed9b65; font-size:26px; }
.boss-stage-card small { color:#986242; }
.boss-stage-card:hover { background:#ffdab0; }
.skill-collection { display:flex; align-items:center; gap:10px; padding:10px 12px; margin:12px 0; border:1px dashed #91a188; border-radius:12px; background:#eff2e5; }
.skill-emblem { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; background:#e3e8d9; border:2px solid #89997e; border-radius:50%; color:#7b8c70; font-size:34px; line-height:1; }
.skill-collection strong { display:block; font-size:12px; }
.skill-collection small { display:block; font-size:10px; color:#71846a; margin-top:4px; }
#skill-lock { margin-left:auto; }
.skill-collection[data-unlocked="true"] { border-style:solid; border-color:#c1a45c; background:#fff0bd; }
.skill-collection[data-unlocked="true"] .skill-emblem, .skill-reward .skill-emblem { background:#ffdc72; border-color:#a38232; color:#426144; }
.boss-intro { text-align:center; margin:20px 0 12px; }
.boss-emblem { display:grid; place-items:center; width:100px; height:100px; margin:0 auto 20px; border:3px solid #7e5339; background:#f6a56f; box-shadow:6px 6px 0 #d6dfc5; border-radius:30px; color:#754124; font-size:85px; line-height:1; transform:rotate(-6deg); }
.boss-pattern { display:flex; align-items:center; justify-content:center; gap:12px; color:#936245; }
.boss-pattern span { display:flex; flex-direction:column-reverse; align-items:center; gap:4px; font-size:11px; }
.boss-pattern b { font-size:24px; }
.boss-pattern i { font-style:normal; }
.boss-intro p { margin:18px 0 0; font-size:11px; color:#718060; }
.skill-reward { display:flex; flex-direction:column; align-items:center; gap:10px; margin:20px 0 10px; padding:18px 8px; border:2px solid #cdb366; background:#fff0b9; border-radius:18px; animation:reward-pop .45s ease-out both; }
.skill-reward .skill-emblem { width:68px; height:68px; font-size:52px; }
.skill-reward > strong { font-size:20px; }
.skill-reward > span:not(.skill-emblem) { font-size:11px; color:#8d7134; }
.skill-reward small { font-size:10px; color:#6f7953; text-align:center; line-height:1.7; }
.boss-status { position:absolute; top:9px; left:9px; display:flex; align-items:center; gap:6px; z-index:2; max-width:calc(100% - 88px); padding:5px 8px; border:1px solid #9c694d; border-radius:10px; background:#fff0d7ee; color:#8f5738; font-size:10px; pointer-events:none; }
#boss-state-icon { font-size:20px; font-weight:800; line-height:18px; }
.boss-heat { display:flex; gap:3px; }
.boss-heat i { width:5px; height:10px; border-radius:2px; background:#d4c6ac; }
.boss-status[data-heat="1"] .boss-heat i:first-child, .boss-status[data-heat="2"] .boss-heat i:nth-child(-n+2), .boss-status[data-heat="3"] .boss-heat i { background:#dc8654; }
.boss-status[data-state="charge"] { background:#ffc890; border-color:#a95b3d; }
.boss-status[data-state="charge"] #boss-state-icon { animation:skill-pulse .7s ease-in-out infinite; }
.boss-status[data-state="open"] { color:#3f8170; background:#def2d9ef; border-color:#699d82; }
.boss-status[data-state="open"] .boss-heat { display:none; }
.high-speed-skill { position:relative; flex-shrink:0; width:36px; height:36px; padding:0; background:#fff9e5ed; color:#426344; border:1px solid #9da880; border-radius:50%; touch-action:manipulation; box-shadow:0 2px 0 #254d4329; }
.high-speed-skill svg { display:block; width:100%; height:100%; }
.high-speed-skill circle { fill:none; stroke-width:4; }
.high-speed-skill .skill-track { stroke:#d9dfc8; }
#skill-charge-ring { stroke:#d6a333; stroke-dasharray:157.08; stroke-linecap:round; transform:rotate(-90deg); transform-origin:30px 30px; }
.high-speed-skill path { fill:none; stroke:currentColor; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.high-speed-skill span { display:none; }
.high-speed-skill:disabled { opacity:.68; }
.high-speed-skill[data-state="ready"] { background:#ffe8a1; border:2px solid #a68533; animation:skill-pulse 1.4s ease-in-out infinite; }
.high-speed-skill[data-state="armed"] { background:#ffcf67; outline:2px solid #fffdf0; outline-offset:2px; border-color:#7a6332; }
.skill-lesson { margin:12px 0; }
.skill-tutorial-flow { display:flex; justify-content:center; align-items:center; gap:12px; padding:14px 0; color:#9b7a32; font-size:16px; }
.skill-tutorial-flow b { display:grid; place-items:center; width:42px; height:42px; border:3px solid #d3ac49; border-radius:50%; background:#ffebac; font-size:30px; }
.point-feedback.break-point { background:#ffe082f5; border-color:#9e7935; color:#735229; animation:reward-pop .3s ease-out both; }
@keyframes skill-pulse { 50% { box-shadow:0 0 0 4px #f0b73c35; } }
@keyframes reward-pop { from { opacity:.2; scale:.88; } to { opacity:1; scale:1; } }
@media(prefers-reduced-motion:reduce) { .high-speed-skill, .skill-reward, .point-feedback, #boss-state-icon { animation:none !important; } }

/* Point rulings and diagonal service are visible only when needed. */
.serve-hint { position:absolute; left:50%; top:53%; transform:translateX(-50%); display:grid; grid-template-columns:auto 1fr; gap:4px 9px; padding:10px 14px; border:1.5px solid #577950; border-radius:13px; background:#fff9deed; color:#31533c; pointer-events:none; text-align:left; width:max-content; max-width:90%; }
.serve-hint > span { grid-row:span 2; align-self:center; font-size:24px; color:#798a37; }
.serve-hint strong { font-size:14px; }
.serve-hint small { font-size:11px; }
.point-feedback { display:flex; align-items:center; gap:10px; min-width:158px; max-width:90%; top:38%; white-space:nowrap; box-shadow:0 4px 0 #254d4326; }
.point-feedback strong { display:block; font-size:20px; }
.point-feedback small { display:block; margin-top:4px; font-size:12px; font-weight:600; }
.point-symbol { font-size:30px; }
.point-feedback[data-fault="true"] { background:#fff0df; border:2px solid #c77451; color:#963f2e; }
.point-feedback[data-winner="you"] small { color:#397453; }

.stage-level { font-size:16px; font-weight:900; letter-spacing:-.5px; }
.spirit-skill { position:relative; width:36px; height:36px; flex:none; padding:0; border:1.5px solid #75623c; border-radius:50%; background:#fff1b2; color:#856221; cursor:pointer; }
.spirit-skill svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.spirit-skill circle { transform:rotate(-90deg); transform-origin:30px 30px; stroke-dasharray:157.08; }
.spirit-skill .spirit-track { stroke:#a497722f; stroke-dasharray:none; }
.spirit-skill[data-state="active"] { background:#ffe079; box-shadow:0 0 0 3px #ffe59b66; }
.spirit-skill[data-state="used"] { opacity:.35; }
.spirit-status { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:9px; padding:9px 13px; width:max-content; max-width:95%; border:1.5px solid #9c7839; border-radius:12px; background:#fff2bbf2; color:#796029; pointer-events:none; font-size:12px; }
.spirit-status span { font-size:10px; }
.spirit-status strong { min-width:35px; font-variant-numeric:tabular-nums; }
.spirit-active { box-shadow:inset 0 0 0 4px #ffe28a99; }
.starter-skill { display:flex; justify-content:space-between; gap:8px; align-items:center; margin:8px 0; padding:8px; border-radius:10px; background:#fff0ba; color:#756030; }
.starter-skill b { font-size:12px; }.starter-skill span { font-size:10px; }
.spirit-skill[data-state="active"]:disabled { opacity:1; }