/* Shared brand for the website, player portal and court referee.
   Navy backdrop: Android PremiumAppBackdrop. Gold/cyan: Wear OS SetupVisuals.
   Keep layout and touch-target sizes in each screen's own stylesheet. */
:root {
  color-scheme: dark;
  --ink: #050d16;
  --bg: var(--ink);
  --panel: #102738;
  --panel-high: #102f48;
  --paper: #f8f4ec;
  --muted: #adbccd;
  --gold: #f6c64e;
  --blue: #73c7ff;
  --line: #2d4355;
  --green: #a2deb7;
  --red: #ffc1b7;
  --status-info: var(--blue);
  --status-primary: var(--gold);
  --status-success: var(--green);
  --status-waiting: #ffda8b;
  --status-error: var(--red);
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --radius-card: 14px;
  --radius-control: 10px;
  --surface: linear-gradient(180deg, var(--panel-high), var(--panel));
  --surface-watch: linear-gradient(180deg, #102c45, #030b13);
  --backdrop: radial-gradient(ellipse 70vw 70vw at 50% 8%, #397da52e, transparent 100%),
    linear-gradient(180deg, #102f48 0%, #061827 40%, #050d16 75%, #01060d 100%);
  --motion-feedback: 90ms;
  --motion-score: 160ms;
  --motion-panel: 180ms;
  --motion-ease: cubic-bezier(.4, 0, .2, 1);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
}
body {
  background: var(--backdrop);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--font-body);
  min-height: 100dvh;
}
body::before {
  /* The phone's subtle court outline, kept behind controls and text. */
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M6 16H94V78H6Z M50 16V78 M6 40H94 M6 78L22 100 M94 78L78 100' stroke='%238fc9ee' stroke-opacity='.08' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  z-index: -1;
}
body { isolation: isolate; }
header, .kiosk-header { background: var(--panel); border-color: var(--line); border-top: 2px solid #f6c64e38; }
.brand, .sample-brand, .watch-sample>span {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.1;
  color: var(--paper);
}
.brand>span, .sample-brand>span, .watch-sample>span>span {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  vertical-align: baseline;
  color: var(--gold);
}
h1, h2, .display, .score, .court-score, .metric b { font-family: var(--font-display); font-weight: 700; }
button, .button, input, select, textarea { font-family: var(--font-body); }
button, .button { border-radius: var(--radius-control); border-color: var(--line); color: var(--paper); }
button:not(.primary):not(.danger):not(.quiet):not(.text-button):not(.point-button):not(.menu-backdrop):not(.sr-message-menu),
.button:not(.primary):not(.quiet):not(.google-signin) { background: var(--panel); }
button.primary, .button.primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
button.quiet, .button.quiet, .header-actions button, .dialog-close, .text-button { background: transparent; }
button.danger, .button.danger { background: #682d36; border-color: var(--red); color: var(--paper); }
button:hover:not(:disabled), .button:hover { filter: none; border-color: var(--gold); }
button:disabled { cursor: default; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  background: var(--ink); color: var(--paper); border-color: var(--line); border-radius: var(--radius-control);
}
.card, .workspace-body .card, .metric, .auth, .history-card, .quick-action,
.screen-card, .capture-card, .club-story, .journey-proof, .hardware-preview,
.entry-grid .card, .role-grid .card, .demo-controller, .demo-invitation,
.score-preview, .teaser-court, .phase-panel, dialog {
  background: var(--surface); border-color: var(--line); border-radius: var(--radius-card);
}
table, .practice-strip, .calls button, .score-head, .phone-match, .sr-report { background: var(--panel); }
.feature-tile, .connectivity, .connection-path li, .screen-image, .capture-image, .play-stats>div { background: var(--panel); }
.sidebar, .app-sidebar, .app-tray { background: var(--panel); border-color: var(--line); }
.app-tray a[aria-current=page] { background: var(--ink); }
.watch-sample { background: radial-gradient(circle, #102c45, #030b13 75%, #000); }
.phone-sample, .court-sample { background: var(--backdrop); }
.preset-face { background: var(--surface-watch); border-color: var(--line); }
.preset-card:hover .preset-face { background: var(--surface-watch); border-color: var(--blue); }
.preset-face>strong { color: var(--paper); }
.player-column, .side-1, .court-players>div, .court-players>div+div {
  background: var(--surface); border-radius: var(--radius-card); border-color: var(--blue);
}
.side-1, .court-players>div+div { border-color: var(--gold); }
.side-0 .player-label, .watch-names>span:first-child { color: var(--blue); }
.side-1 .player-label, .watch-names>span+span { color: var(--gold); }
.score, .side-1 .score { color: var(--paper); }
.point-button { background: transparent; border: 0; border-radius: 0; }
.point-plus { background: var(--panel-high); color: var(--blue); }
.side-1 .point-plus { color: var(--gold); }
.game-pips i { border-color: var(--muted); }
.phase-pill { background: var(--panel-high); color: var(--paper); }
.phase-pill.live { background: #183a35; color: var(--green); }
.phase-pill.complete { background: #41371b; color: var(--gold); }
.practice-strip, footer, dialog label { color: var(--muted); }
.phase-panel .in-play-mark { color: var(--green); }
.sr-message { background: var(--ink); border-color: var(--line); }
.sr-message.mine { background: var(--panel-high); border-color: var(--line); }
.sr-avatar { background: var(--surface); border-color: var(--line); }
.status-pill.info, .status-info { color: var(--blue); border-color: var(--blue); }
.status-pill.success, .status-success, .pill.good { color: var(--green); border-color: var(--green); }
.status-pill.waiting, .status-pending { color: var(--status-waiting); border-color: var(--status-waiting); }
.status-pill.danger, .status-failure { color: var(--red); border-color: var(--red); }
.band .button, .cta-section .band .button:not(.quiet) { background: var(--ink); color: var(--paper); }
.band .button.quiet, .cta-section .band .quiet { background: transparent; color: var(--ink); }
/* Preserve third-party sign-in branding and QR contrast. */
.auth .google-signin { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.referee-enrolment img { background: #fff; }
dialog::backdrop { background: #030b13c9; }
@media (prefers-reduced-motion: no-preference) {
  button, .button, .preset-face, .quick-action {
    transition: background-color var(--motion-feedback) var(--motion-ease),
      border-color var(--motion-feedback) var(--motion-ease), color var(--motion-feedback) var(--motion-ease);
  }
  dialog[open] { animation: brand-panel-in var(--motion-panel) var(--motion-ease); }
  .score-changed { animation: brand-score-in var(--motion-score) var(--motion-ease); }
}
@keyframes brand-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes brand-score-in { from { opacity: .65; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}