/* Native focused navigation; no pitch geometry changes. */
@media screen {
  #primaryNav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
  #primaryNav button { flex-direction: column; gap: .15rem; min-height: 52px; background: var(--card); color: var(--text); border-color: var(--control-border); }
  #primaryNav button[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--primary); font-weight: 800; background: var(--primary-light); }
  #primaryNav span { font-size: 1.25rem; line-height: 1; }
  #upcomingList[aria-pressed="true"], #playedList[aria-pressed="true"] { box-shadow: inset 0 -4px 0 currentColor; text-decoration: underline; text-underline-offset: .25rem; }
  body:not(.info-page) .player-total dl > div:first-child dd { font-family: inherit; overflow-wrap: normal; }
  #modeHeading { overflow-wrap: anywhere; }
  #matches { flex-direction: column; align-items: stretch; }
  #historicalContent { overflow-x: auto; }
  #historicalContent .period-row { display: flex; flex-wrap: wrap; gap: 1rem; }
  #historicalContent .period-card { flex: 1 1 140px; max-width: 210px; }
  #historicalContent .print-pitch { width: 100%; }
  #historicalContent td { cursor: default; }
  summary { cursor: pointer; padding-block: .65rem; }
  summary:focus-visible, h2:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; }
  #draftGuarantees { font-size: .85rem; color: var(--muted); }
  #resultFields, #resultFields legend, #resultFields label { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  #storageRecovery { border: 2px solid var(--error); }
  @media (max-width: 600px) {
    body:not(.info-page) { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); scroll-padding-bottom: 7rem; }
    #primaryNav { position: fixed; inset: auto 0 0; margin: 0; padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--control-border); z-index: 10; }
    #primaryNav button { padding: .4rem .2rem; font-size: .85rem; }
    :is(button,input,select,a,summary) { scroll-margin-block: 1rem 7rem; }
  }
}
/* Shared appearance only; existing geometry and light palette are retained. */
:root {
    color-scheme: light;
    --radius: 14px; --shadow: 0 1px 3px rgb(15 23 42 / 6%);
    --primary: #006948; --primary-hover: #005137; --primary-light: #e6f5ef;
    --secondary: #006398; --surface: #faf8ff; --card: #fff; --subtle: #f2f3f8;
    --text: #131b2e; --muted: #475569; --border: #dce3ec; --control-border: #8593a5; --error: #ba1a1a;
    --button: #006948; --button-hover: #005137; --token: #006398;
    --on: #c8ebd0; --on-text: #005137; --on-hover: #b2e4bc;
    --off: #f4f5f8; --off-hover: #e2e7ef; --keeper: #fef08a; --keeper-text: #713f12;
    --danger-bg: #fff0ee; --danger-border: #e59b9b; --chip-hover: #ffdad6;
    --warning-bg: #fffbeb; --warning-text: #78350f; --warning-border: #d97706;
    --bench: #e2e7ef;
}

  * { box-sizing: border-box }
  [hidden] { display: none !important }
  body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 3rem; background: var(--surface); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased }
  h1 { font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.3; margin: 0; min-width: 0; overflow-wrap: anywhere }
  h2 { font-size: 1.1rem; line-height: 1.4; margin: 0 0 1rem; font-weight: 650 }
  section, .intro { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); min-width: 0 }
  a { color: var(--primary); text-underline-offset: .2em }
  button, .button, .app-header nav a { font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1.4; display: inline-flex; align-items: center; justify-content: center; padding: .55rem .95rem; min-height: 42px; max-width: 100%; border: 1px solid var(--primary); background: var(--primary); color: #fff; border-radius: 6px; cursor: pointer; text-decoration: none; overflow-wrap: anywhere }
  button:hover, .button:hover, .app-header nav a:hover { background: var(--primary-hover); border-color: var(--primary-hover) }
  button.alt { background: var(--card); color: var(--muted); border-color: var(--control-border) }
  button.alt:hover { background: var(--subtle); color: var(--text) }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px }
  button:disabled, input:disabled, select:disabled { opacity: .5; cursor: not-allowed }
  header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; margin-bottom: 1.25rem }
  header p { margin: 0 }
  .brand { display: flex; align-items: center; gap: .75rem; min-width: 0; max-width: 100% }
  .brand img { width: 112px; height: 103px; object-fit: contain; flex-shrink: 0; border: 0; border-radius: 0; pointer-events: none }
  small { font-size: .85rem; color: var(--muted) }
  footer { border-top: 1px solid var(--border); padding-top: .5rem }
  .creator-credit { margin: .75rem auto; color: var(--muted); font-size: .85rem; text-align: center }
  @media (max-width: 600px) {
    body { padding: .75rem .5rem 2rem }
    h1 { font-size: 1.3rem }
    .brand img { width: 96px; height: 89px }
    section, .intro { padding: 1rem .75rem; margin-bottom: 1rem; border-radius: 10px }
    header { gap: .75rem; padding-bottom: 1rem; margin-bottom: 1rem }
  }

/* Shared read-only manual/privacy surface. */
  body:where(.info-page) { line-height: 1.65; overflow-wrap: anywhere }
  :where(.info-page) header .brand { flex: 1 1 22rem; order: -1 }
  :where(.info-page) header .button { background: #fff; color: var(--primary); border-color: var(--control-border) }
  :where(.info-page) header .button:hover { background: var(--primary-light) }
  :where(.info-page) main > .intro:first-child { border-top: 4px solid var(--primary); padding-top: 1rem }
  :where(.info-page) p, :where(.info-page) li { max-width: 76ch }
  :where(.info-page) p { margin: .75rem 0 }
  :where(.info-page) section { scroll-margin-top: 1rem }
  :where(.info-page) section > h2 { padding: .2rem 0 .8rem .75rem; border-left: 4px solid var(--primary); border-bottom: 1px solid var(--border); font-size: 1.15rem }
  :where(.info-page) h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem }
  :where(.info-page) .warning { border-left: 5px solid #d97706; background: #fffbeb }
  :where(.info-page) .warning h2 { color: #78350f }
  :where(.info-page) section.warning { background: #fff; border-left-color: var(--primary) }
  :where(.info-page) section.warning h2 { color: var(--text) }
  :where(.info-page) ol, :where(.info-page) ul { padding-left: 1.5rem }
  :where(.info-page) li { margin-bottom: .65rem; padding-left: .2rem }
  :where(.info-page) ol li::marker { color: var(--primary); font-weight: 700 }
  :where(.info-page) .contents { display: flex; flex-wrap: wrap; gap: .55rem; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--border) }
  :where(.info-page) .contents a { display: inline-flex; align-items: center; padding: .4rem .8rem; min-height: 40px; border: 1px solid var(--border); border-radius: 999px; background: var(--subtle); color: var(--muted); text-decoration: none; font-size: .85rem; font-weight: 600 }
  :where(.info-page) .contents a:hover { color: var(--primary); background: var(--primary-light); border-color: #96c6b5 }
  :where(.info-page) .timing-table { overflow-x: auto }
  :where(.info-page) .timing-table table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .9rem }
  :where(.info-page) .timing-table th, :where(.info-page) .timing-table td { border: 1px solid var(--border); padding: .5rem; text-align: left; vertical-align: top; overflow-wrap: normal }
  :where(.info-page) .timing-table th { background: var(--subtle) }
  :where(.info-page) figure { margin: 1.25rem 0 0; padding: .75rem; background: var(--subtle); border: 1px solid var(--border); border-radius: 10px }
  :where(.info-page) figure a { display: block; border-radius: 6px }
  :where(.info-page) img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px }
  :where(.info-page) figcaption { font-size: .85rem; color: var(--muted); margin-top: .65rem }
  :where(.info-page) footer { border-top: 1px solid var(--border); padding-top: .5rem }
  :where(.info-page) .creator-credit { margin: .75rem auto; color: var(--muted); font-size: .85rem; text-align: center }
  @media (max-width: 600px) { :where(.info-page) figure { padding: .4rem } :where(.info-page) section > h2 { font-size: 1.05rem } }
  @media print { body:where(.info-page) { background: #fff; max-width: none } :where(.info-page) header, :where(.info-page) footer, :where(.info-page) .contents { display: none } :where(.info-page) section, :where(.info-page) .intro { box-shadow: none } :where(.info-page) img { max-height: 16cm; width: auto } :where(.info-page) figure { break-inside: avoid } }
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --primary: #8cddb7; --primary-hover: #abefcc; --primary-light: #183e32;
    --secondary: #75c8ff; --surface: #111827; --card: #192333; --subtle: #253044;
    --text: #edf2fa; --muted: #bdc9da; --border: #52647d; --control-border: #8192ab; --error: #ffb4ab;
    --button: #006948; --button-hover: #005137; --token: #006398;
    --on: #194d39; --on-text: #abefc6; --on-hover: #236447;
    --off: #253044; --off-hover: #35445c; --keeper: #655018; --keeper-text: #fff2a0;
    --danger-bg: #44252b; --danger-border: #df8d88; --chip-hover: #44252b;
    --warning-bg: #41351b; --warning-text: #ffe0a3; --warning-border: #efb35f;
    --bench: #253044;
  }
  /* Only the dark-screen wordmark differs; illustration and alpha stay exact. */
  :root[data-theme="dark"] .brand img { content: url("assets/branding/logo-dark.webp"); }
}
.brand-home { display: flex; flex-shrink: 0; cursor: pointer; }
.theme-control { display: none; align-items: center; gap: .5rem; max-width: 100%; }
:root[data-theme] .theme-control { display: flex; }
.theme-control button { width: 44px; min-width: 44px; height: 44px; padding: 8px; margin: 0; flex-shrink: 0; border: 2px solid var(--muted); border-radius: 6px; background: var(--card); color: var(--text); }
.theme-control button:hover { background: var(--subtle); border-color: var(--muted); }
.theme-control button[aria-pressed="true"] { background: var(--primary-light); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.theme-control button:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; }
.theme-control svg { display: block; flex-shrink: 0; }
@media screen {
  input, select { background: var(--card); }
  button, .button, .app-header nav a { background: var(--button); }
  button:hover, .button:hover, .app-header nav a:hover { background: var(--button-hover); }
  button.alt { background: var(--card); }
  button.alt:hover { background: var(--subtle); }
  header .button { background: var(--card); }
  header .button:hover { background: var(--primary-light); }
  #delTeam, #delMatch { background: var(--card); border-color: var(--danger-border); }
  #delTeam:hover, #delMatch:hover { background: var(--danger-bg); }
  .chip button { background: none; }
  .chip button:hover { background: var(--chip-hover); }
  td:first-child { background: var(--card); }
  tr.count td:first-child { background: var(--subtle); }
  .on { background: var(--on); color: var(--on-text); }
  .off { background: var(--off); }
  td.on:hover { background: var(--on-hover); }
  td.off:hover { background: var(--off-hover); }
  .k { background: var(--keeper); color: var(--keeper-text); }
  #benchWarning { background: var(--danger-bg); border-color: var(--danger-border); border-left-color: var(--error); }
  .warning { background: var(--warning-bg); border-left-color: var(--warning-border); }
  .warning h2 { color: var(--warning-text); }
  section.warning { background: var(--card); border-left-color: var(--primary); }
  section.warning h2 { color: var(--text); }
  #bench { background: var(--bench); }
  .token { background: var(--token); }
  .token.k { background: #f6bd34; color: #382600; }
  .slotbtn.active { background: var(--button-hover); }
}
/* Printing/PDF never inherits dark tokens, even when the screen is dark. */
@media print {
  :root { color-scheme: light; --surface: #fff; }
  body { background: #fff; color: #131b2e; }
  .theme-control { display: none !important; }
}

.cell-toggle, .cell-toggle:hover { background: transparent; color: inherit; border-color: transparent; }
.token:hover { background: var(--token); border-color: #fff; }
.token.k:hover { background: #f6bd34; color: #382600; }

/* Coach-first presentation. Screen-only and app-only: printed sheets and the
   existing manual/privacy surfaces retain their original palette and geometry. */
@media screen {
  @font-face {
    font-family: "Plus Jakarta Sans";
    src: url("assets/fonts/PlusJakartaSans.ttf") format("truetype");
    font-style: normal; font-weight: 200 800; font-display: swap;
  }
  @font-face {
    font-family: "JetBrains Mono";
    src: url("assets/fonts/JetBrainsMono.ttf") format("truetype");
    font-style: normal; font-weight: 100 800; font-display: swap;
  }
  body:not(.info-page) {
    --surface: #f8fafc; --card: #ffffff; --subtle: #f1f5f9;
    --text: #0f172a; --muted: #475569; --border: #e2e8f0;
    --control-border: #8593a5; --radius: 16px;
    --primary: #9a3412; --primary-hover: #7c2d12; --primary-light: #ffedd5;
    --button: #4e783a; --button-hover: #40622f; --secondary: #006398;
    --on: #dcfce7; --on-text: #166534; --on-hover: #bbf7d0;
    --off: #f8fafc; --off-hover: #e2e8f0; --bench: #f1f5f9;
    --danger-bg: #fff1f2; --danger-border: #e59b9b; --error: #be123c;
    --chip-hover: #ffe4e6;
    --shadow: 0 1px 3px rgb(15 23 42 / 5%);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    max-width: 1280px; padding: 2rem 1.5rem 3rem;
  }
  :root[data-theme="dark"] body:not(.info-page) {
    --surface: #0f172a; --card: #192333; --subtle: #253044;
    --text: #edf2fa; --muted: #bdc9da; --border: #52647d;
    --control-border: #8192ab; --primary: #ffb690;
    --primary-hover: #ffd2b8; --primary-light: #442b20;
    --button: #0f172a; --button-hover: #263449; --secondary: #75c8ff;
    --on: #194d39; --on-text: #abefc6; --on-hover: #236447;
    --off: #253044; --off-hover: #35445c; --bench: #253044;
    --danger-bg: #44252b; --danger-border: #df8d88; --error: #ffb4ab;
    --chip-hover: #44252b;
  }
  body:not(.info-page) .app-header { padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
  body:not(.info-page) section { padding: 1.5rem; margin-bottom: 1.5rem; }
  body:not(.info-page) section > h2 {
    border-left: 5px solid #f97316; padding-left: .75rem;
    font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em;
  }
  body:not(.info-page) button:not(.token):not(.cell-toggle):not([data-del]),
  body:not(.info-page) .button {
    min-height: 44px; border-radius: 8px; font-weight: 700;
  }
  body:not(.info-page) button:not(.alt):not(.token):not(.cell-toggle):not([data-del]):not([data-theme-choice]) {
    border-color: var(--button);
  }
  /* Dark filled actions need a visible boundary, not the canvas-colored fill.
     Keep alternate, pitch, table, period and appearance controls unchanged. */
  :root[data-theme="dark"] body:not(.info-page) button:not(.alt):not(.token):not(.cell-toggle):not([data-del]):not([data-theme-choice]):not(.slotbtn) {
    background: var(--primary); color: var(--surface); border-color: var(--primary);
  }
  :root[data-theme="dark"] body:not(.info-page) button:not(.alt):not(.token):not(.cell-toggle):not([data-del]):not([data-theme-choice]):not(.slotbtn):hover {
    background: var(--primary-hover); border-color: var(--primary-hover);
  }
  body:not(.info-page) input:not([type=checkbox]):not([type=file]),
  body:not(.info-page) select { border-radius: 8px; min-height: 44px; }
  body:not(.info-page) input:not([type=checkbox]):focus-visible,
  body:not(.info-page) select:focus-visible {
    outline: 3px solid var(--primary); outline-offset: 2px;
  }
  body:not(.info-page) .chip { padding: .25rem .45rem .25rem .85rem; background: var(--subtle); }
  body:not(.info-page) #mCat { color: var(--primary); border-radius: 999px; }
  body:not(.info-page) #firstBench { color: var(--text); }
  body:not(.info-page) .legend { border-radius: 8px; }
  body:not(.info-page) #fairness {
    border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem;
    background: var(--subtle);
  }
  body:not(.info-page) #fairness summary { cursor: pointer; font-weight: 600; }
  body:not(.info-page) .slotbtn { background: var(--card); color: var(--muted); border-color: var(--control-border); }
  body:not(.info-page) .slotbtn.active {
    background: var(--primary-light); color: var(--primary); border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
  }
  body:not(.info-page) #schedule th:not(:first-child),
  body:not(.info-page) #schedule td:last-child,
  body:not(.info-page) .slotbtn,
  body:not(.info-page) .player-total dd { font-family: "JetBrains Mono", monospace; }
  body:not(.info-page) #modeSec { border-color: #f97316; }
  body:not(.info-page) #modeCurrent { letter-spacing: -.02em; }
  body:not(.info-page) #modeSec button { min-height: 48px; min-width: 48px; }
  #liveBoard .token { cursor: default; touch-action: auto; }
  #liveBoard { max-width: min(420px, max(200px, calc((100svh - 18rem) / 1.7))); }
  #liveNotice:empty { display: none; }
  /* Colors only: board aspect ratio, border widths, coordinate transforms,
     token sizes, drop boundary and bench rows remain authoritative. */
  body:not(.info-page) :is(#pitch, .pitch) {
    background: repeating-linear-gradient(180deg, #eaf5ed 0, #eaf5ed 32px, #e3f0e7 32px, #e3f0e7 64px);
    border-color: #94bca2;
  }
  body:not(.info-page) :is(#pitch, .pitch) .mid,
  body:not(.info-page) :is(#pitch, .pitch) .circle,
  body:not(.info-page) :is(#pitch, .pitch) .box { border-color: #94bca2; }
  body:not(.info-page) .token:not(.k),
  body:not(.info-page) .token:not(.k):hover {
    background: var(--card); color: var(--text); border-color: #94bca2;
    box-shadow: 0 3px 6px rgb(15 23 42 / 16%);
  }
  :root[data-theme="dark"] body:not(.info-page) :is(#pitch, .pitch) {
    background: repeating-linear-gradient(180deg, #0e7554 0, #0e7554 32px, #0a6447 32px, #0a6447 64px);
  }
  body:not(.info-page) .site-footer { margin-top: .5rem; }
  @media (min-width: 1100px) {
    #editorDetail { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 1.5rem; align-items: start; }
    #matchListBack { grid-column: 1 / -1; justify-self: start; }
  }
  @media (max-width: 600px) {
    body:not(.info-page) { padding: 1rem .75rem calc(7rem + env(safe-area-inset-bottom)); }
    body:not(.info-page) section { padding: 1rem .75rem; margin-bottom: 1rem; border-radius: 16px; }
    body:not(.info-page) .app-header { padding-bottom: 1rem; margin-bottom: 1rem; }
    body:not(.info-page) .row { gap: .5rem; }
  }
}