/* Shared visual language for home, training, tournaments and their dialogs. */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --ease-ui: cubic-bezier(.22, 1, .36, 1);
  font-family: var(--font-ui);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  --ink: #24272d;
  --muted: #69727c;
  --bg: #f7f8fa;
  --panel: #ffffff;
  --panel-2: #f1f3f5;
  --line: #e5e8ed;
  --gold: #a67b00;
  --gold-soft: #946c00;
  --red: #c44444;
  --green: #247653;
  --blue: #3377bd;
  --radius: 25px;
  color-scheme: light;
}
#app { background: var(--bg); }
#app::before {
  background-position: center 40%; background-size: min(76vw, 440px) auto;
  filter: invert(1); mix-blend-mode: multiply; opacity: .035;
}
.screen { padding-top: max(22px, env(safe-area-inset-top)); }
.topbar { gap: 16px; margin-bottom: 32px; min-height: 48px; }
.topbar h1 { font-family: inherit; font-weight: 750; font-size: 22px; line-height: 1.3; letter-spacing: -.025em; }
.back, .icon-button { background: #fff; border-color: var(--line); box-shadow: 0 4px 15px #1c242d05; }
.brand h1, .brand h1.product-title, .section-title, .mode-card h2,
.player-pool h2, .group-box h2, .group-schedule h2, .group-drop strong,
.ready-hero h1, .modal h2, .cue-label, .coach-zone strong, .coach-lunge,
.score-intro h1, .score-intro-actions b, .score-name {
  font-family: inherit; font-weight: 750; letter-spacing: -.025em;
}
.section-title { font-size: 30px; line-height: 1.25; }
.section-copy, .brand p, .ready-hero p { color: var(--muted); }
.menu-card, .card {
  background: #fff; border-color: #e9ebee;
  box-shadow: 0 10px 30px rgba(28,36,45,.035);
}
.menu-card { min-height: 96px; padding: 22px; }
.menu-card.primary { background: #fffdf5; border-color: #e7cf7a; }
.mode-grid { gap: 14px; }
.mode-card { display: flex; align-items: center; gap: 18px; min-height: 108px; }
.mode-card h2 { font-size: 20px; line-height: 1.3; margin: 0; }
.mode-card::after { display: none; }
.mode-card .home-action-icon { background: #fff3c9; color: #9b7300; }
.mode-card[data-mode="unordered"] .home-action-icon { background: #e8f2ff; color: #387ac5; }
.mode-card[data-mode="coach"] .home-action-icon { background: #f1f3f5; color: #606b75; }
.choice { background: #fff; border-color: var(--line); box-shadow: 0 6px 24px #1c242d04; }
.choice.selected { background: #fff5cf; border-color: #e2bc41; box-shadow: 0 0 0 1px #e2bc41 inset; }
.button { background: #f8ce42; color: #332900; border-radius: 18px; }
.button.secondary { background: #fff; color: var(--ink); }
.button.danger { background: #fff0f0; color: #ad3232; border-color: #f0caca; }
.button:disabled { opacity: .5; }
.field label { color: #606a75; }
.field input, .player-input-row input { background: #f7f8fa; color: var(--ink); border-color: #dfe4ea; }
.field input:focus, .player-input-row input:focus { border-color: #c19924; box-shadow: 0 0 0 3px #f8ce4224; }
.field input:disabled { opacity: .65; }
.computed { background: #fff4cd; color: #806000; }
.check-row { background: #f7f8fa; }
.check-row.checked { background: #fff9e4; border-color: #daba53; }
.check-row.checked .check-box { background: #f8ce42; border-color: #daba53; color: #332900; }
.delete-icon { color: #b93d3d; background: #fff2f2; border-color: #f0cccc; }
.blue-text { color: #286caf; }
.red-text { color: #b74444; }
.player-pool { background: #fffdf5; border-color: #dfc979; }
.player-chip { color: var(--ink); background: #fff; }
.player-chip.selected { background: #f8ce42; border-color: #daba53; color: #332900; }
.group-box.full { border-color: #9ecab6; }
.fixture, .bracket-match { background: #fff; border-color: var(--line); }
.fixture.pending, .bracket-match.pending { border-color: #dfc979; background: #fffef8; }
.standings-table { background: #fff; }
.standings-head { background: #f0f3f6; }
.bracket-round:not(:last-child) .bracket-match::after { border-color: #c8cfd8; }
.bracket-match.waiting { opacity: .7; }
.ready-icon { color: #9b7300; background: #fff3c9; border-color: #eedb9b; box-shadow: none; }
.countdown-number { font-family: inherit; font-weight: 750; color: #a67b00; text-shadow: none; }
.training-head .timer, .coach-head .timer, .score-timer, .score-value {
  font-family: inherit; font-weight: 750; font-variant-numeric: tabular-nums;
}
.cue-symbol { color: #a67b00; }
.metrics .metric { min-width: 90px; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.coach-screen { background: var(--bg); }
.coach-head { background: rgba(255,255,255,.97); border-color: var(--line); box-shadow: 0 8px 24px #1c242d12; }
.coach-zone.left { background: #fff3e6; border-right: 1px solid #e2e5e9; color: #98622c; }
.coach-zone.right { background: #eaf3ff; color: #306ba6; }
.coach-zone.active.left { background: #f7d5ae; }
.coach-zone.active.right { background: #b9d9fa; }
.coach-lunge { background: rgba(255,232,156,.95); color: #725200; }
.modal-wrap { z-index: 200; background: rgba(34,42,52,.3); backdrop-filter: blur(5px); }
.modal { background: #fff; border-color: var(--line); box-shadow: 0 24px 80px #25334226; }
.slot-number { color: #9b7300; background: #fff3c9; }
.mini { background: #f5f7f9; color: var(--ink); }
.tabs { background: #edf0f4; }
.tab.active { background: #fff; }
.sound-card .play { background: #fff3c9; border-color: #e4ca73; color: #946c00; }
.warning { color: #a05416; }
#toast { background: #333b46; color: #fff; box-shadow: 0 8px 30px #25334226; }
.scoreboard-screen { background: #f7f8fa; }
.score-half.blue { background: #c5dfff; color: #174f8d; }
.score-half.red { background: #ffcfcf; color: #9c292f; }
.score-value { text-shadow: none; }
.score-center { color: var(--ink); background: rgba(255,255,255,.96); border-color: #e2e6ec; box-shadow: 0 12px 36px #25334214; }
.score-exit { color: var(--ink); background: #fff; border-color: #dfe4eb; }
.score-target { color: var(--muted); }
.score-paused { color: #916b00; }
.scoreboard-screen.is-paused .score-half { filter: saturate(.35) brightness(.96); }
.score-intro { background: rgba(247,248,250,.96); color: var(--ink); }
.score-intro-actions > div { background: #fff; border-color: var(--line); box-shadow: 0 8px 30px #25334208; }
.score-intro-actions b { color: #a67b00; }
button:focus-visible { outline: 3px solid #4380bd; outline-offset: 3px; }
.distribution { margin-top: 16px; }
.distribution-plot { position: relative; height: 244px; margin: 0 -5px; }
.distribution-plot svg { width: 100%; height: 130px; display: block; overflow: visible; }
.distribution-fill { fill: #f0cb59; fill-opacity: .17; }
.distribution-curve { fill: none; stroke: #c79d2f; stroke-width: 2; stroke-opacity: .55; vector-effect: non-scaling-stroke; }
.distribution-axis, .distribution-ticks path { fill: none; stroke: #cbd2dc; stroke-width: 1; }
.distribution-ticks text { fill: #76818c; font-size: 10px; stroke: none; }
.distribution-handle { position: absolute; top: calc(112px + var(--lane, 0) * 40px); width: 44px; height: 44px; padding: 0; transform: translateX(-50%); border: 0; background: transparent; color: #4481b8; cursor: ew-resize; touch-action: none; z-index: 2; }
.distribution-handle::before { content: ''; position: absolute; left: 21px; bottom: 22px; width: 2px; height: calc(14px + var(--lane, 0) * 40px); background: currentColor; opacity: .65; }
.distribution-handle span { position: relative; display: block; width: 18px; height: 23px; margin: auto; border: 2px solid currentColor; border-radius: 5px 5px 8px 8px; background: #fff; box-shadow: 0 3px 8px #27364412; }
.distribution-handle span::after { content: ''; position: absolute; left: 5px; top: 5px; height: 9px; border-left: 2px solid currentColor; opacity: .55; }
.distribution-handle.handle-peak { color: #a77f0c; z-index: 3; }
.distribution-handle.handle-peak span { background: #fff1bb; }
.distribution-handle.handle-max { color: #8c6bad; }
.distribution-handle:focus-visible { border-radius: 12px; }
.distribution-handle { transition: top .14s ease-out; }
.distribution-handle::before { transition: height .14s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .distribution-handle, .distribution-handle::before { transition: none; }
}
.distribution-values { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: -16px; }
.distribution-values > div { background: #f5f7fa; border-radius: 15px; padding: 10px 4px; text-align: center; }
.distribution-values span { display: block; color: #707985; font-size: 12px; }
.distribution-values strong { display: block; color: #4481b8; margin-top: 4px; font-size: 22px; font-variant-numeric: tabular-nums; }
.distribution-values .value-peak { background: #fff8de; }
.distribution-values .value-peak strong { color: #a77f0c; }
.distribution-values .value-max strong { color: #8c6bad; }
.distribution-summary { margin-top: 12px; color: #78818b; font-size: 12px; text-align: center; line-height: 1.5; }
.distribution-note { font-size: 12px; color: #78818b; line-height: 1.6; margin: 0 0 16px; }
.home-title { display: grid; gap: 3px; text-align: center; white-space: nowrap; }
.home-title span:first-child { font-size: 12px; letter-spacing: .12em; }
.home-title span:last-child { font-size: 18px; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) {
  .flash-forward, .flash-back, .flash-lunge, .score-up, .score-down { animation: none; }
}

/* Quiet feedback; no layout transitions or delays in live training. */
button, input, select, textarea { font-family: var(--font-ui); }
.topbar h1, .section-title, .ready-hero h1, .modal h2, .mode-card h2,
.home-header h1, .home-section-head h2 { font-weight: 700; line-height: 1.3; }
:lang(zh-CN) :is(.topbar h1, .section-title, .ready-hero h1, .modal h2, .mode-card h2,
  .home-section-head h2, .score-name, .coach-zone strong) { letter-spacing: .01em; }
.home-action strong, .menu-card strong { font-weight: 650; line-height: 1.45; }
.field label { font-weight: 600; line-height: 1.5; }
.field input, .player-input-row input { font-size: 16px; line-height: 1.5; }
.training-head .timer, .coach-head .timer, .score-timer, .score-value,
.home-stats strong, .choice strong, .distribution-values strong {
  font-variant-numeric: tabular-nums lining-nums;
}
.score-name { font-weight: 650; line-height: 1.2; }
.score-value { font-weight: 700; letter-spacing: -.035em; }
.score-timer { letter-spacing: .015em; }
.section-copy, .ready-hero p, .modal p, .subtle { line-height: 1.65; }
:is(.home-action, .menu-card, .button, .choice, .back, .icon-button, .mini, .delete-icon,
  .player-chip, .tab, .home-nav-item, .sound-card .play, .score-exit) {
  touch-action: manipulation;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease,
    box-shadow 200ms ease, scale 160ms var(--ease-ui);
}
.home-action:active { transform: none; }
:is(.home-action, .menu-card, .button, .choice, .back, .icon-button, .mini, .delete-icon,
  .player-chip, .tab, .home-nav-item, .sound-card .play, .score-exit):not(:disabled):active {
  scale: .975;
  transition-duration: 70ms;
}
.home-action-icon { transition: background-color 180ms ease, color 180ms ease; }
.home-nav-item { border-radius: 18px; }
.home-nav-item.active { background: #fff8e2; }
.field input, .player-input-row input { transition: border-color 160ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.field input:focus, .player-input-row input:focus { background: #fff; }
.check-row, .check-box { transition: background-color 180ms ease, border-color 180ms ease; }
.distribution-handle span { transition: scale 140ms var(--ease-ui), box-shadow 140ms ease; }
.distribution-handle:active span, .distribution-handle:focus-visible span { scale: 1.12; box-shadow: 0 0 0 5px #4481b815; }
.coach-zone { transition: background-color 90ms ease; }
.coach-zone .zone-label { transition: scale 120ms var(--ease-ui); }
.coach-zone.active .zone-label { scale: 1.025; }
.score-half { transition: filter 180ms ease; }
.score-up .score-value { animation: scoreNumberUp 220ms var(--ease-ui); }
.score-down .score-value { animation: scoreNumberDown 180ms var(--ease-ui); }
@keyframes scoreUp { from { filter: brightness(1.07); } to { filter: brightness(1); } }
@keyframes scoreDown { from { filter: brightness(.95); } to { filter: brightness(1); } }
@keyframes scoreNumberUp { from { scale: 1.055; } to { scale: 1; } }
@keyframes scoreNumberDown { from { scale: .965; } to { scale: 1; } }
.ui-enter { animation: uiEnter 180ms ease-out; }
.home-content.ui-enter { animation: panelEnter 220ms var(--ease-ui); }
.modal-wrap { animation: uiEnter 140ms ease-out; }
.modal { animation: panelEnter 200ms var(--ease-ui); }
@keyframes uiEnter { from { opacity: .3; } to { opacity: 1; } }
@keyframes panelEnter { from { opacity: .3; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }
@media (hover: hover) and (pointer: fine) {
  :is(.home-action, .menu-card, .choice, .button.secondary):not(:disabled):hover {
    border-color: #ccd3dc; box-shadow: 0 9px 24px #2533420c;
  }
  .button:not(.secondary):not(.danger):not(:disabled):hover { background: #f6c832; }
  .home-nav-item:not(.active):hover { background: #f0f3f6; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  :is(.home-action, .menu-card, .button, .choice, .back, .icon-button, .mini, .delete-icon,
    .player-chip, .tab, .home-nav-item, .sound-card .play, .score-exit):active,
  .distribution-handle span, .coach-zone .zone-label { scale: 1; }
}