/* Soft Court visual layer. Existing routes, safe areas and touch hitboxes stay intact. */
:root {
  --soft-pink: #FFBCD9;
  --soft-pink-hover: #FFD3E6;
  --soft-pink-pressed: #E7A6C2;
  --soft-cream: #F5EEDC;
  --soft-cobalt: #526A96;
  --soft-ink: #292E37;
  --ink: var(--soft-ink);
  --sea: var(--soft-pink);
  --paper: var(--soft-cream);
  --muted: #D2D4E0;
  --border: #78859D;
  /* Gold remains the established gameplay timing cue, not the menu accent. */
}
body, .gym { background: var(--soft-ink); }
button, .match-menu summary {
  color: var(--soft-cream); background-color: var(--soft-cobalt);
  border-color: #8493AE; border-radius: 12px;
}
button:hover:not(:disabled), .match-menu summary:hover { border-color: var(--soft-pink); }
button:focus-visible, input:focus-visible, select:focus-visible, .match-menu summary:focus-visible,
#athlete-form :focus-visible { outline: 3px solid var(--soft-pink); outline-offset: 3px; }
button:disabled { opacity: .48; cursor: not-allowed; }
.primary, .athlete-actions .primary, #sheet #resume, #set-rematch {
  color: var(--soft-ink); background: var(--soft-pink); border-color: var(--soft-pink);
}
.primary:hover:not(:disabled), .athlete-actions .primary:hover:not(:disabled),
#sheet #resume:hover:not(:disabled), #set-rematch:hover:not(:disabled) { background: var(--soft-pink-hover); }
.primary:active:not(:disabled), .athlete-actions .primary:active:not(:disabled) { background: var(--soft-pink-pressed); }
.match-menu .tools { background: var(--soft-ink); border-radius: 16px; padding: 12px; gap: 8px; }
.gym header { background: rgb(41 46 55 / 94%); border-radius: 12px; }
dialog, dialog:has(.venue-list), dialog:has(.pause-portrait) {
  background: var(--soft-ink); border-color: var(--border); border-radius: 18px;
}
dialog::backdrop { background: rgb(23 28 38 / 76%); }
input, .kit-fields select, .lobby-teams select, #lobby-court, #lobby-score {
  color: var(--soft-cream); background: #343D4E; border: 1px solid var(--border); border-radius: 9px;
}
#sheet p, #sheet li { color: var(--soft-cream); }
.venue-option[aria-pressed=true], .format-option[aria-pressed=true] { background: #414E69; }
.lobby-teams section { border-color: var(--border); border-radius: 12px; }
/* Use approved backgrounds with live labels; keep img for the existing selection animation. */
#modal:has(.title-stack) {
  background: linear-gradient(90deg, rgb(41 46 55 / 94%), rgb(41 46 55 / 38%)),
    url("art/harbor-warmups.webp") center / cover, var(--soft-ink);
}
#sheet .title-stack button {
  isolation: isolate; color: var(--soft-cream); border-radius: 18px;
  min-height: 44px; aspect-ratio: 5 / 1; background: transparent;
}
.title-stack button img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: fill; }
.title-stack button span {
  grid-area: 1 / 1; z-index: 1; padding: 0 20px 5px;
  font-size: clamp(16px, 2.2vw, 23px); font-weight: 600;
  pointer-events: none;
}
#sheet .title-stack button[data-mode=play] { color: var(--soft-ink); }
.title-stack button:hover img, .title-stack button:active img { filter: none; }
.title-stack button:is(:hover,:focus-visible):not(:disabled) img { content: url("../art-handoff/soft-court-ui/buttons/secondary-hover.svg"); }
.title-stack button:active:not(:disabled) img,
.title-stack button.title-selected img { content: url("../art-handoff/soft-court-ui/buttons/secondary-pressed.svg"); }
.title-stack button[data-mode=play]:is(:hover,:focus-visible):not(:disabled) img { content: url("../art-handoff/soft-court-ui/buttons/primary-hover.svg"); }
.title-stack button[data-mode=play]:active img,
.title-stack button[data-mode=play].title-selected img { content: url("../art-handoff/soft-court-ui/buttons/primary-pressed.svg"); }
.title-stack button:disabled img { content: url("../art-handoff/soft-court-ui/buttons/secondary-disabled.svg"); }
.title-stack button:disabled { color: var(--soft-ink); opacity: 1; }
.title-stack button:active:not(:disabled) span, .title-stack button.title-selected span { transform: translateY(3px); }
.title-stack .title-selected::after { display: none; }
/* Athlete editing remains a light workspace; don't recolor user-selected kits or skin swatches. */
dialog:has(#athlete-form) {
  --studio-ink: var(--soft-ink); --studio-muted: #59637A; --studio-line: #BAC1CE;
  --studio-paper: var(--soft-cream); --studio-accent: var(--soft-cobalt);
  background: var(--soft-cream); color: var(--soft-ink); border-radius: 18px;
}
dialog:has(#athlete-form) .sheet-head, .athlete-preview { background: var(--soft-cobalt); color: var(--soft-cream); }
dialog:has(#athlete-form) #close, .roster-views { background: var(--soft-ink); }
.roster-byline, .roster-views button { color: var(--soft-cream); }
.roster-views button[aria-pressed=true], .player-options button[aria-pressed=true],
.cut-grid button[aria-pressed=true] { background: var(--soft-pink); color: var(--soft-ink); }
#cancel-athlete:hover { background: #E6DED0; }
#athlete-form :focus-visible { outline-color: var(--soft-cobalt); }
@media (prefers-reduced-motion: reduce) { .title-stack button { transition: none; } }