@font-face {
  font-family: "Sandline Display";
  src: url("./assets/fonts/SandlineDisplay-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Sandline UI";
  src: url("./assets/fonts/SandlineUI.woff2") format("woff2");
  font-style: normal;
  /* Use the same fixed semibold outline for all normal UI text. */
  font-weight: 400 699;
  font-display: swap;
}

@font-face {
  font-family: "Sandline UI";
  src: url("./assets/fonts/SandlineUI-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 850;
  font-display: swap;
}

:root {
  --volley-ui: "Sandline UI", "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  --volley-display: "Sandline Display", var(--volley-ui);
  --volley-numeral: "Barlow Condensed", var(--volley-ui);
  --type-meta: 11px;
  --type-label: 12px;
  --type-body: clamp(13px, 3.55vw, 14px);
  --type-action: clamp(13px, 3.8vw, 15px);
  --type-heading: clamp(20px, 5.6vw, 24px);
  --type-weight-body: 600;
  --type-weight-label: 650;
  --type-weight-action: 750;
}

.app, #dialog, #required-update {
  font-family: var(--volley-ui);
  font-weight: var(--type-weight-body);
}

.app :where(button, input, select, output) { font-family: inherit; }

.app[data-screen="home"] #home-actions > .secondary {
  font-family: var(--volley-display);
  font-weight: 900;
  letter-spacing: .025em;
}

.app[data-screen="home"] #home-actions > .secondary > .home-secondary-label {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

#dialog .dialog-head h2 {
  font-family: var(--volley-display);
  font-weight: 900;
}

#dialog[data-panel="tutorial-welcome"] .tutorial-welcome-lead {
  display: grid;
  gap: 3px;
  margin: 0 0 12px;
  color: #d7e5e9;
  font: var(--type-weight-body) var(--type-body)/1.45 var(--volley-ui);
}

#dialog[data-panel="tutorial-welcome"] .tutorial-welcome-lead strong {
  color: #fff3dd;
  font: 900 17px/1.14 var(--volley-display);
}

#dialog[data-panel="tutorial-welcome"] .tutorial-welcome-lead b {
  color: var(--broadcast-menu-gold);
  font: 700 28px/1 var(--volley-numeral);
  font-variant-numeric: tabular-nums;
}

:root[data-presentation="broadcast"] #dialog .setting-note {
  font: var(--type-weight-body) var(--type-body)/1.45 var(--volley-ui);
}

#dialog[data-panel="tutorial-welcome"] .setting-note {
  color: #d7e5e9;
}

@media (orientation: portrait) and (max-width: 600px) {
  .app { line-height: 1.45; }
}

@media (orientation: portrait) and (max-width: 599px) {
  .app[data-screen="home"] #home-actions > button {
    font-family: var(--volley-ui);
    font-weight: var(--type-weight-action);
    line-height: 1.16;
    letter-spacing: 0;
  }

  .app[data-screen="home"] #home-actions > :is(.start, .resume) {
    font-family: var(--volley-display);
    font-size: calc(var(--type-action) + 4px);
    font-weight: 900;
  }

  .app[data-screen="home"] #home-actions:has(> .resume:not([hidden])) > .start {
    font-size: calc(var(--type-action) + 1px);
  }

  .app[data-screen="home"] #home-actions > .secondary {
    font-size: max(14px, var(--type-action));
  }

  .app[data-screen="home"] #home-actions > .start > span,
  .app[data-screen="home"] #saved-score {
    font-family: var(--volley-numeral);
    font-size: var(--type-label);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .025em;
  }

  .app[data-screen="home"] #home-actions > :is(#appearance-picker, #ball-picker)
    :is(.appearance-picker-title, .ball-picker-title) {
    font: var(--type-weight-action) var(--type-action)/1.16 var(--volley-ui);
    letter-spacing: 0;
  }

  .app[data-screen="home"] #home-actions > :is(#appearance-picker, #ball-picker)
    :is(.appearance-picker-value, .ball-picker-value) {
    font: var(--type-weight-label) var(--type-label)/1.16 var(--volley-ui);
    letter-spacing: 0;
  }

  .app[data-screen="home"] #home-actions :is(#save-status, #athlete-loading-text) {
    font: var(--type-weight-label) var(--type-label)/1.42 var(--volley-ui);
  }

  .app[data-screen="home"] footer,
  .app[data-screen="home"] footer :is(button, #update-status) {
    font-family: var(--volley-ui);
    font-size: var(--type-meta);
    line-height: 1.25;
  }

  .app[data-screen="home"] footer #update-status {
    max-inline-size: 38%;
    overflow-wrap: anywhere;
  }

  .app[data-screen="home"] footer #site-version {
    font-family: var(--volley-numeral);
    font-size: var(--type-label);
    font-variant-numeric: tabular-nums;
  }

  #dialog .dialog-head #dialog-title,
  #required-update h2 {
    font-family: var(--volley-display);
    font-size: clamp(22px, 6vw, 25px);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: .025em;
  }

  :root[data-presentation="broadcast"] #dialog :is(.dialog-copy, .guide),
  :root[data-presentation="broadcast"] #dialog .presentation-dialog-body .dialog-copy,
  #required-update p {
    font-family: var(--volley-ui);
    font-size: var(--type-body);
    line-height: 1.55;
  }

  :root[data-presentation="broadcast"] #dialog :is(legend, .volume-control),
  #dialog .appearance-choice-status {
    font-family: var(--volley-ui);
    font-size: var(--type-label);
    line-height: 1.4;
    letter-spacing: 0;
  }

  :root[data-presentation="broadcast"] #dialog :is(legend, .volume-control),
  #dialog .appearance-choice-status {
    font-weight: var(--type-weight-label);
  }

  :root[data-presentation="broadcast"] #dialog .volume-control output {
    font-family: var(--volley-numeral);
    font-size: var(--type-action);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  :root[data-presentation="broadcast"] #dialog .dialog-actions :is(button, .accent),
  #required-update button {
    font: var(--type-weight-action) var(--type-action)/1.24 var(--volley-ui);
  }

  :root[data-presentation="broadcast"] #dialog :is(.pause-tools button, .zone-grid button, .options label) {
    font: var(--type-weight-label) var(--type-label)/1.28 var(--volley-ui);
  }

  :root[data-presentation="broadcast"] #dialog :is(.zone-grid button[data-selected], .options input:checked + label) {
    font-weight: var(--type-weight-action);
  }

  #dialog #ai-advanced summary {
    font: var(--type-weight-label) var(--type-body)/1.3 var(--volley-ui);
  }

  :root[data-presentation="broadcast"] #dialog .practice-courses
    :is(strong, [data-dialog="free-practice"]) {
    font: 900 calc(var(--type-action) + 1px)/1.24 var(--volley-display);
  }

  :root[data-presentation="broadcast"] #dialog .practice-courses span {
    font: var(--type-weight-label) var(--type-meta)/1.35 var(--volley-ui);
  }

  #dialog .ball-choice-text strong {
    font: var(--type-weight-action) var(--type-body)/1.22 var(--volley-ui);
  }

  #dialog .ball-choice-text small,
  #dialog .appearance-choice-placeholder {
    font: var(--type-weight-label) var(--type-meta)/1.3 var(--volley-ui);
  }

  #dialog[data-panel="appearance-picker"] #dialog-content .dialog-head h2 {
    font: 900 clamp(22px, 6vw, 25px)/1.18 var(--volley-display);
    letter-spacing: .025em;
  }

  #dialog .appearance-carousel-name {
    font: var(--type-weight-action) calc(var(--type-action) + 3px)/1.2 var(--volley-ui);
  }

  #dialog .appearance-carousel-current {
    font: var(--type-weight-label) var(--type-meta)/1.2 var(--volley-ui);
  }

  #dialog .appearance-carousel-position {
    font: 700 var(--type-action)/1.2 var(--volley-numeral);
    font-variant-numeric: tabular-nums;
  }

  #dialog .appearance-carousel-hint {
    font: var(--type-weight-label) var(--type-label)/1.35 var(--volley-ui);
  }

}

/* Gameplay typography. Keep the live HUD, event docks and input geometry in place. */
@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) {
  .app[data-screen="play"] :is(#scoreboard, #play-hud, #controls, #tutorial-panel, #point-overlay, #replay-overlay, #drill-overlay) {
    font-family: var(--volley-ui);
  }

  .app[data-screen="play"] #scoreboard > :is(.teal, .coral) {
    font-family: var(--volley-display);
    font-size: var(--type-label);
    font-weight: 900;
    line-height: 1.2;
  }
  .app[data-screen="play"] #scoreboard .score-value {
    font: 700 clamp(23px, 6vw, 25px)/22px var(--volley-numeral);
    font-variant-numeric: tabular-nums;
  }
  .app[data-screen="play"] #scoreboard .score-value b { font-weight: 700; }
  .app[data-screen="play"] #scoreboard[data-wide-score] .score-value { font-size: 22px; }

  :root[data-presentation="broadcast"] .app[data-screen="play"] :is(#duty-label, #control-hint, #callout) {
    font-size: var(--type-label);
    font-weight: var(--type-weight-label);
    line-height: 1.35;
  }

  #controls .circle-actions button {
    font-size: var(--type-label);
    font-weight: var(--type-weight-action);
    line-height: 1.12;
  }
  #controls .circle-actions button[data-slot="primary"] {
    font-size: max(14px, var(--type-action));
    line-height: 1.05;
  }
  #controls .circle-actions .standby-label {
    font-size: var(--type-meta);
    font-weight: var(--type-weight-label);
  }

  .app[data-tutorial] #tutorial-panel :is(#tutorial-progress, #tutorial-step) {
    font-size: var(--type-meta);
    font-weight: var(--type-weight-label);
  }
  .app[data-tutorial] #tutorial-panel #tutorial-progress {
    color: #b3c9cf;
  }
  .app[data-tutorial] #tutorial-panel #tutorial-title {
    font: 900 clamp(16px, 4.15vw, 18px)/1.2 var(--volley-display);
  }
  .app[data-tutorial] #tutorial-panel :is(#tutorial-hint, #tutorial-feedback) {
    font-size: var(--type-body);
    line-height: 1.36;
  }
  .app[data-tutorial] #tutorial-panel :is(button, #tutorial-countdown:not([hidden])) {
    font-size: var(--type-label);
    font-weight: var(--type-weight-action);
  }
  .app[data-tutorial] #tutorial-panel[data-cue="now"] #tutorial-hint {
    font-size: max(14px, var(--type-body));
    font-weight: var(--type-weight-action);
  }
  .app[data-tutorial] #controls .circle-actions button:is([data-tutorial-cue], [data-tutorial-touch-hint]):not(:disabled)::before {
    font-size: var(--type-meta);
    font-weight: var(--type-weight-action);
    line-height: 1.15;
  }

  :root[data-presentation="broadcast"] #drill-badge { font-weight: var(--type-weight-action); }
  :root[data-presentation="broadcast"] #drill-overlay .drill-card h2 {
    font: 900 clamp(17px, 4.35vw, 19px)/1.18 var(--volley-display);
  }
  :root[data-presentation="broadcast"] #drill-overlay .drill-card p {
    font-size: var(--type-body);
    line-height: 1.4;
  }
  :root[data-presentation="broadcast"] #point-overlay #point-team {
    font: 900 max(19px, calc(var(--type-heading) - 1px))/1.2 var(--volley-display);
  }
  :root[data-presentation="broadcast"] #point-overlay .point-plus { font-family: var(--volley-numeral); }
  :root[data-presentation="broadcast"] #point-overlay :is(#point-reason, #point-detail) {
    font-size: var(--type-body);
    line-height: 1.35;
  }
  :root[data-presentation="broadcast"] #point-overlay #point-reason { font-weight: var(--type-weight-action); }
  :root[data-presentation="broadcast"] #point-overlay .point-next {
    font-size: var(--type-label);
    font-weight: var(--type-weight-label);
  }
  #referee-inset #referee-label { font-size: var(--type-meta); }

  :root[data-presentation="broadcast"] #replay-overlay .replay-badge {
    font: 900 var(--type-body)/1.3 var(--volley-display);
  }
  :root[data-presentation="broadcast"] #replay-reason {
    font-size: var(--type-label);
    font-weight: var(--type-weight-label);
  }
  #replay-overlay #replay-float:not([hidden]) {
    font-size: var(--type-meta);
    font-weight: var(--type-weight-action);
  }

  .app[data-tutorial] #controls #tutorial-touch-retry,
  :root[data-presentation="broadcast"] #drill-overlay .drill-actions button,
  :root[data-presentation="broadcast"] #point-overlay .point-actions button,
  :root[data-presentation="broadcast"] #replay-overlay #replay-skip {
    font-size: max(14px, var(--type-action));
    font-weight: var(--type-weight-action);
  }
}