:root {
  --font-display: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-interface: "Inter", "Helvetica Neue", Arial, sans-serif;
  --transition-fast: 130ms ease;
  --radius-control: 2px;
  --radius-surface: 2px;
}

html[data-theme="black"] {
  color-scheme: dark;
  --app-bg: #11161a;
  --app-image: url("./assets/black-rink-surface.png");
  --nav-bg: #0f1316;
  --nav-text: #efebe7;
  --nav-muted: #8c969c;
  --text-primary: #cfccc8;
  --text-strong: #efebe7;
  --text-secondary: #8c969c;
  --accent: #dead39;
  --accent-strong: #e5b53e;
  --accent-contrast: #14100a;
  --secondary: #79b3de;
  --secondary-strong: #5a9bcf;
  --score: #cfccc8;
  --history-heading: #79b3de;
  --panel: transparent;
  --panel-soft: rgba(255, 255, 255, 0.035);
  --surface: #12191d;
  --surface-elevated: #151c20;
  --input: #0d1317;
  --input-text: #efebe7;
  --line: #65717d;
  --line-soft: rgba(101, 113, 125, 0.42);
  --line-faint: rgba(101, 113, 125, 0.24);
  --disabled: #667078;
  --disabled-surface: #252d31;
  --hover: rgba(121, 179, 222, 0.11);
  --focus: #79b3de;
  --overlay: rgba(2, 6, 8, 0.72);
  --shadow-modal: 0 18px 46px rgba(0, 0, 0, 0.48);
  --danger: #d84c50;
  --danger-strong: #a62d34;
  --ad-fill: rgba(255, 255, 255, 0.018);
  --ad-line: rgba(207, 204, 200, 0.55);
  --ad-text: #8c969c;
  --tab-bg: transparent;
  --modal-border: #65717d;
  --modal-title: #dead39;
  --control-selected: #79b3de;
  --primary-bg: transparent;
  --primary-border: #dead39;
  --primary-text: #dead39;
  --game-emphasis: #fcd204;
  --period-current-selected-bg: #fcd204;
  --period-current-selected-border: #ffffff;
  --period-current-selected-text: #354c54;
  --period-current-unselected-bg: #d7af50;
  --period-current-unselected-text: #354c54;
  --period-selected-bg: #b1c4c8;
  --period-selected-border: #ffffff;
  --period-selected-text: #354c54;
  --period-idle-bg: #354c54;
  --period-idle-text: #8e969c;
  --signoff-surface: rgba(18, 25, 29, 0.72);
  --signoff-border: #dead39;
  --signoff-text: #dead39;
  --signoff-check-bg: #dead39;
  --signoff-check-text: #14100a;
  --signature-canvas: #ffffff;
  --signature-ink: #102033;
}

html[data-theme="blue"] {
  color-scheme: light;
  --app-bg: #a7bbc5;
  --app-image: url("./assets/blue-rink-watermark.png");
  --nav-bg: #223a41;
  --nav-text: #f8fbfd;
  --nav-muted: #c1ced0;
  --text-primary: #102033;
  --text-strong: #071a35;
  --text-secondary: #54718d;
  --accent: #fdc604;
  --accent-strong: #ffc400;
  --accent-contrast: #102033;
  --secondary: #04448c;
  --secondary-strong: #023470;
  --score: #023470;
  --history-heading: #103254;
  --panel: rgba(194, 208, 215, 0.78);
  --panel-soft: rgba(194, 208, 215, 0.55);
  --surface: #f8fbfd;
  --surface-elevated: #ffffff;
  --input: #ffffff;
  --input-text: #072654;
  --line: #6d8a9b;
  --line-soft: rgba(84, 113, 141, 0.38);
  --line-faint: rgba(84, 113, 141, 0.22);
  --disabled: #718899;
  --disabled-surface: rgba(232, 240, 244, 0.66);
  --hover: rgba(4, 68, 140, 0.09);
  --focus: #fdc604;
  --overlay: rgba(31, 53, 70, 0.44);
  --shadow-modal: 0 18px 40px rgba(7, 42, 73, 0.24);
  --danger: #bd3746;
  --danger-strong: #8e2430;
  --ad-fill: rgba(232, 240, 244, 0.42);
  --ad-line: rgba(84, 113, 141, 0.42);
  --ad-text: #54718d;
  --tab-bg: rgba(194, 208, 215, 0.78);
  --modal-border: rgba(4, 68, 140, 0.58);
  --modal-title: #023470;
  --control-selected: #04448c;
  --primary-bg: #fdc604;
  --primary-border: #fdc604;
  --primary-text: #102033;
  --game-emphasis: #f5c845;
  --period-current-selected-bg: #f5c845;
  --period-current-selected-border: #ffffff;
  --period-current-selected-text: #13336c;
  --period-current-unselected-bg: #f5c845;
  --period-current-unselected-text: #13336c;
  --period-selected-bg: #ebebeb;
  --period-selected-border: #5a708b;
  --period-selected-text: #5a708b;
  --period-idle-bg: #b9c5cd;
  --period-idle-text: #5a708b;
  --signoff-surface: rgba(245, 245, 245, 0.82);
  --signoff-border: #7d7d7d;
  --signoff-text: #04448c;
  --signoff-check-bg: #04448c;
  --signoff-check-text: #ffffff;
  --signature-canvas: #ffffff;
  --signature-ink: #102033;
  --radius-control: 3px;
  --radius-surface: 8px;
}

* {
  letter-spacing: 0;
}

body {
  background: var(--nav-bg);
  color: var(--text-primary);
  font-family: var(--font-interface);
}

button,
input,
select {
  font-family: inherit;
}

button {
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast),
    transform 90ms ease;
}

button:hover {
  outline: 0;
}

button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

.app-shell {
  border: 0;
  background-color: var(--app-bg);
  background-image: var(--app-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1194px 834px;
  color: var(--text-primary);
  font-family: var(--font-interface);
}

html[data-theme="blue"] .app-shell {
  background-image:
    linear-gradient(rgba(245, 250, 252, 0.12), rgba(245, 250, 252, 0.12)),
    var(--app-image);
  background-blend-mode: normal, multiply;
}

.top-bar {
  gap: 36px;
  padding: 0 48px;
  border-bottom: 0;
  background: var(--nav-bg);
}

html[data-theme="black"] .top-bar {
  height: 49px;
  border-bottom: 1px solid rgba(207, 204, 200, 0.32);
}

html[data-theme="blue"] .top-bar {
  height: 46px;
}

.top-menu-button {
  height: 44px;
  padding: 0;
  color: var(--nav-text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 44px;
}

.top-menu-button:hover:not(:disabled) {
  background: transparent;
  color: var(--accent);
}

.top-menu-button:active:not(:disabled) {
  background: transparent;
  color: var(--accent-strong);
}

.top-menu-button:disabled,
.top-menu-button[aria-disabled="true"] {
  background: transparent;
  color: color-mix(in srgb, var(--nav-muted) 52%, transparent);
}

.prototype-controls {
  gap: 18px;
  margin-left: auto;
}

.prototype-controls .top-menu-button {
  color: var(--nav-muted);
  font-size: 12px;
  font-weight: 700;
}

.prototype-controls .simulate-game-top {
  color: var(--nav-text);
}

.clock-inline-button {
  border: 1px solid color-mix(in srgb, var(--secondary) 42%, transparent);
  border-radius: 2px;
  font-family: var(--font-display);
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.clock-stop-button {
  background: var(--secondary);
  color: var(--surface);
}

.clock-start-button {
  background: var(--surface-elevated);
  color: var(--secondary);
}

.clock-inline-button:hover:not(:disabled),
.clock-inline-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.clock-inline-button:active:not(:disabled) {
  transform: translateY(1px);
}

.clock-inline-button:disabled {
  border-color: color-mix(in srgb, var(--nav-muted) 28%, transparent);
  background: color-mix(in srgb, var(--disabled-surface) 78%, transparent);
  color: var(--disabled);
  opacity: 0.88;
}

.clock-inline-button:disabled:hover {
  background: color-mix(in srgb, var(--disabled-surface) 78%, transparent);
}

.ad-zone {
  border: 1px solid var(--ad-line);
  background:
    linear-gradient(29deg, transparent 48.9%, var(--ad-line) 49.5%, var(--ad-line) 50.5%, transparent 51.1%) left / 58px 100% no-repeat,
    linear-gradient(151deg, transparent 48.9%, var(--ad-line) 49.5%, var(--ad-line) 50.5%, transparent 51.1%) right / 58px 100% no-repeat,
    var(--ad-fill);
  color: var(--ad-text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  opacity: 0.4;
}

html[data-theme="black"] .ad-home,
html[data-theme="black"] .ad-visitor {
  top: 65px;
}

html[data-theme="blue"] .ad-home,
html[data-theme="blue"] .ad-visitor {
  top: 63px;
}

html[data-theme="black"] .ad-center {
  top: 703px;
}

html[data-theme="blue"] .ad-center {
  top: 732px;
}

.team-score-card {
  border: 0;
  background: transparent;
}

html[data-theme="blue"] .home-card,
html[data-theme="blue"] .visitor-card {
  top: 159px;
}

.score-hotzone {
  background: transparent;
  color: var(--score);
}

.score-hotzone:hover:not(:disabled),
.score-hotzone:not(:disabled):active {
  background: var(--hover);
}

.score-hotzone:not(:disabled):focus-visible {
  outline-color: var(--focus);
}

.score-value {
  color: var(--score);
  font-family: var(--font-display);
  font-size: 120px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.team-name {
  border: 0;
  background: transparent;
  color: var(--game-emphasis);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
}

.shot-display {
  border: 0;
  background: var(--panel);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
}

.shot-display strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.shot-step {
  border: 0;
  background: var(--panel);
  color: var(--secondary);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
}

html[data-theme="blue"] .shot-step,
html[data-theme="blue"] .history-add-button {
  border: 0;
  background: var(--panel);
  color: var(--secondary-strong);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
}

.shot-step:hover:not(:disabled),
.history-add-button:hover:not(:disabled) {
  background: var(--hover);
  color: var(--accent);
}

.shot-step:disabled {
  background: var(--disabled-surface);
  color: var(--disabled);
}

.history-panel {
  border: 0;
  background: transparent;
}

html[data-theme="black"] .penalty-home,
html[data-theme="black"] .penalty-visitor {
  top: 469px;
}

html[data-theme="black"] .scoring-home,
html[data-theme="black"] .scoring-visitor {
  top: 637px;
}

html[data-theme="blue"] .penalty-home,
html[data-theme="blue"] .penalty-visitor {
  top: 482px;
}

html[data-theme="blue"] .scoring-home,
html[data-theme="blue"] .scoring-visitor {
  top: 668px;
}

.history-panel h2,
.center-panel-title {
  color: var(--history-heading);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
}

.empty-note {
  padding: 10px 8px;
  color: var(--text-secondary);
  font-family: var(--font-interface);
  font-size: 14px;
  font-style: italic;
}

.history-list {
  padding: 0 4px;
  color: var(--text-primary);
  scrollbar-color: var(--line) transparent;
}

html[data-theme="black"] .penalty-home .history-list,
html[data-theme="black"] .penalty-visitor .history-list {
  max-height: 103px;
}

html[data-theme="blue"] .penalty-home .history-list,
html[data-theme="blue"] .penalty-visitor .history-list {
  max-height: 121px;
}

.event-row-button {
  min-height: 45px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-primary);
  font-family: var(--font-interface);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.event-row-button:hover {
  background: var(--hover);
}

.history-list strong {
  color: var(--text-strong);
}

.history-period-tabs {
  border: 1px solid var(--line);
  background: var(--tab-bg);
}

html[data-theme="black"] .history-period-tabs {
  border: 0;
}

html[data-theme="blue"] .history-period-tabs {
  border-color: var(--line-faint);
}

.history-period-tab {
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text-primary) 78%, transparent);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 44px;
}

.history-period-tab.current-period.selected {
  background: var(--period-current-selected-bg);
  box-shadow: inset 0 0 0 3px var(--period-current-selected-border);
  color: var(--period-current-selected-text);
  font-weight: 700;
}

.history-period-tab.current-period.deselected {
  background: var(--period-current-unselected-bg);
  box-shadow: none;
  color: var(--period-current-unselected-text);
  font-weight: 700;
}

.history-period-tab.non-current-period.selected {
  background: var(--period-selected-bg);
  box-shadow: inset 0 0 0 3px var(--period-selected-border);
  color: var(--period-selected-text);
  font-weight: 700;
}

.history-period-tab.non-current-period.deselected {
  background: var(--period-idle-bg);
  box-shadow: none;
  color: var(--period-idle-text);
  font-weight: 700;
}

.history-period-tab:hover:not(:disabled) {
  filter: brightness(1.04);
}

.history-add-button {
  border: 0;
  background: transparent;
  color: var(--secondary);
  font-family: var(--font-display);
  font-size: 28px;
}

.clock-panel {
  border: 0;
  background: transparent;
}

.clock-time {
  position: relative;
  top: 48px;
  color: var(--game-emphasis);
  font-family: var(--font-display);
  font-size: 146px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.94;
}

.clock-time.final-clock {
  color: var(--text-secondary);
  font-size: 42px;
  font-weight: 500;
}

.clock-time:not(:disabled):hover {
  background: var(--hover);
}

html[data-theme="black"] .period-panel {
  top: 77px;
}

html[data-theme="blue"] .period-panel {
  top: 75px;
}

.period-label {
  color: var(--history-heading);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

html[data-theme="black"] .period-label {
  color: var(--game-emphasis);
}

.period-readout {
  min-width: 66px;
  height: 44px;
  border: 1px solid var(--text-secondary);
  background: transparent;
  color: var(--game-emphasis);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

html[data-theme="blue"] .period-readout {
  min-width: 64px;
  height: 46px;
  border: 0;
  background: var(--game-emphasis);
  color: var(--secondary-strong);
}

.period-readout-empty,
.period-readout-complete {
  border-color: var(--line);
  background: var(--disabled-surface);
  color: var(--disabled);
}

html[data-theme="black"] .game-actions {
  top: 363px;
  border: 1px solid var(--line);
}

html[data-theme="blue"] .game-actions {
  top: 367px;
  grid-template-columns: 1fr 137px;
  gap: 24px;
  border: 0;
}

.game-actions {
  background: transparent;
}

.game-actions button {
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
}

html[data-theme="black"] .game-actions button {
  border-color: var(--line);
}

html[data-theme="black"] #nextPeriodButton {
  color: var(--game-emphasis);
}

html[data-theme="blue"] .game-actions button {
  border: 0;
}

html[data-theme="blue"] #endGameButton {
  color: var(--secondary-strong);
}

html[data-theme="blue"] #nextPeriodButton {
  background: var(--game-emphasis);
  color: var(--accent-contrast);
}

.game-actions button:hover:not(:disabled) {
  background: var(--hover);
  color: var(--accent);
}

html[data-theme="blue"] #nextPeriodButton:hover:not(:disabled) {
  background: var(--accent-strong);
  color: var(--accent-contrast);
}

.game-actions button:disabled {
  background: var(--disabled-surface);
  color: var(--disabled);
}

html[data-theme] #endGameButton:disabled,
html[data-theme] #nextPeriodButton:disabled {
  cursor: default;
  pointer-events: none;
  background: var(--disabled-surface);
  color: var(--disabled);
}

html[data-theme] #endGameButton:disabled:hover,
html[data-theme] #nextPeriodButton:disabled:hover {
  background: var(--disabled-surface);
  color: var(--disabled);
}

html[data-theme="blue"] .shot-step:disabled,
html[data-theme="blue"] .history-add-button:disabled,
html[data-theme="blue"] #endGameButton:disabled,
html[data-theme="blue"] #nextPeriodButton:disabled {
  background: var(--disabled-surface);
  color: var(--disabled);
}

.history-period-tab:disabled {
  cursor: default;
  opacity: 0.48;
}

.center-panel {
  height: 250px;
  place-items: start stretch;
  border: 0;
  background: transparent;
  padding: 34px 0 0;
}

html[data-theme="black"] .center-panel {
  top: 435px;
}

html[data-theme="blue"] .center-panel {
  top: 456px;
}

.center-panel-title {
  top: 0;
}

.placement-only {
  display: none;
}

.center-event {
  max-height: 216px;
  color: var(--text-primary);
}

.center-event-button {
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-primary);
}

.center-event-button:hover {
  background: var(--hover);
}

.center-event-label {
  color: var(--history-heading);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
}

.center-event-line {
  color: var(--text-primary);
  font-family: var(--font-interface);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.center-panel.official-signoff-mode .center-panel-title {
  color: var(--history-heading);
  font-size: 17px;
  font-weight: 700;
}

.official-signoff-button {
  border: 2px solid var(--signoff-border);
  border-radius: var(--radius-control);
  background: var(--signoff-surface);
  color: var(--signoff-text);
  font-family: var(--font-display);
}

.official-signoff-button:hover {
  background: var(--hover);
}

.official-signoff-check {
  background: var(--signoff-check-bg);
  color: var(--signoff-check-text);
}

.assist-summary,
.penalty-summary {
  font-style: italic;
}

.shade {
  background: var(--overlay);
  backdrop-filter: blur(1.5px);
}

.goal-dialog,
.penalty-dialog,
.config-dialog,
.end-menu-dialog,
.picker,
.clock-dialog,
.event-menu,
.announce-dialog,
.signature-dialog,
.confirm-dialog {
  border: 1px solid var(--modal-border);
  border-radius: var(--radius-surface);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-modal);
  --dialog-accent: var(--secondary);
  --picker-accent: var(--secondary);
}

.goal-dialog,
.penalty-dialog {
  background: var(--surface-elevated);
  padding: 16px 20px;
}

.goal-dialog h1,
.penalty-dialog h1,
.config-dialog h1,
.end-menu-dialog h1,
.announce-dialog h1,
.signature-dialog h1,
.confirm-dialog h1,
.clock-dialog h1 {
  color: var(--modal-title);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}

.signature-dialog {
  background: var(--surface-elevated);
}

.signature-dialog h1,
.signature-dialog canvas {
  border-bottom: 2px solid var(--secondary);
}

.signature-dialog canvas {
  background: var(--signature-canvas);
}

.compact-field,
.wide-field,
.player-control-label {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
}

.compact-field strong,
.wide-field strong,
.player-button,
.settings-field-row select,
.settings-time-button,
.config-select-row select,
.choice-button,
.time-part {
  border-color: var(--secondary);
  border-radius: var(--radius-control);
  background: var(--input);
  color: var(--input-text);
}

.compact-field strong,
.wide-field strong {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
}

.compact-field:hover strong,
.wide-field:hover strong,
.player-button:hover,
.time-part:hover,
.choice-button:hover {
  background: var(--hover);
}

.player-button {
  min-height: 28px;
  color: var(--secondary);
  font-family: var(--font-interface);
  font-size: 12px;
  font-weight: 400;
}

.player-button:disabled,
.player-button:disabled:hover {
  cursor: default;
  border-color: var(--line-soft);
  background: var(--disabled-surface);
  color: var(--disabled);
}

.player-control input,
.config-check input,
.config-radio input,
.settings-dialog .config-check input,
.settings-dialog .config-radio input,
.settings-dialog .settings-check-row input,
.new-game-dialog .config-check input,
.new-game-dialog .config-radio input,
.new-game-dialog .settings-check-row input {
  accent-color: var(--control-selected);
}

.dialog-actions {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.text-button {
  color: var(--secondary);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
}

.text-button:hover {
  background: var(--hover);
}

.save-button {
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-control);
  background: var(--primary-bg);
  color: var(--primary-text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

.save-button:hover:not(:disabled),
.launch-prototype:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--accent-contrast);
}

.save-button:disabled {
  border-color: var(--disabled);
  background: var(--disabled-surface);
  color: var(--disabled);
}

.danger-button {
  background: var(--danger);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

.danger-button:hover {
  background: var(--danger-strong);
}

.settings-dialog,
.new-game-dialog {
  border-color: var(--modal-border);
  background: var(--surface);
}

.settings-scroll-body,
.new-game-scroll-body {
  scrollbar-color: var(--line) transparent;
}

.settings-dialog .settings-card,
.new-game-dialog .new-game-card {
  margin-bottom: 7px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 12px 20px 14px;
}

.settings-dialog .settings-card h2,
.new-game-dialog .new-game-card h2,
.new-game-dialog .new-game-card h3,
.new-game-dialog .new-game-card h4,
.new-game-expander strong,
.config-section h2,
.upload-option h2,
.settings-control-group legend {
  color: var(--text-strong);
  font-family: var(--font-display);
}

.settings-dialog .settings-card h2 {
  font-size: 17px;
  font-weight: 700;
}

.settings-dialog .settings-card p,
.new-game-dialog .new-game-card p,
.new-game-expander small,
.config-section p,
.upload-option p {
  color: var(--text-secondary);
  font-family: var(--font-interface);
  font-size: 13px;
  font-weight: 500;
}

.settings-field-row,
.settings-control-group,
.config-check,
.config-radio,
.config-select-row {
  color: var(--text-primary);
  font-family: var(--font-interface);
  font-size: 13px;
  font-weight: 500;
}

.settings-dialog label:has(input:disabled),
.settings-dialog .config-select-row:has(select:disabled),
.new-game-dialog label:has(input:disabled),
.new-game-dialog .config-select-row:has(select:disabled) {
  color: var(--disabled);
}

.settings-dialog button:disabled,
.new-game-dialog button:disabled,
.config-select-row select:disabled {
  border-color: var(--line-soft);
  background: var(--disabled-surface);
  color: var(--disabled);
}

.new-game-customization-card {
  padding: 0;
}

.new-game-expander:hover {
  background: var(--hover);
}

.new-game-disclosure {
  color: var(--secondary);
}

.new-game-imported-copy p:last-child {
  color: var(--text-strong);
}

.attachment-remove {
  background: var(--secondary);
  color: var(--surface);
}

.attachment-remove:hover {
  background: var(--secondary-strong);
}

.outline-action,
.filled-location,
.end-menu-option,
.announce-button {
  border-color: var(--secondary);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--secondary);
}

.outline-action:hover,
.end-menu-option:hover,
.announce-button:hover {
  background: var(--hover);
}

.filled-location {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--text-secondary);
}

.end-menu-option {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
}

.event-menu {
  overflow: hidden;
  padding: 4px;
}

.event-menu-option {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
}

.event-menu-option:last-child {
  border-bottom: 0;
}

.event-menu-option:hover {
  background: var(--hover);
  color: var(--accent);
}

.picker-title {
  color: var(--modal-title);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.choice-button {
  border-color: var(--line-soft);
  color: var(--input-text);
  font-family: var(--font-interface);
  font-size: 14px;
  font-weight: 500;
}

.choice-button.selected,
.time-wheel-overlay .selected {
  background: var(--control-selected);
  color: #ffffff;
  font-weight: 700;
}

.announce-copy,
.announce-copy p,
.confirm-dialog p {
  color: var(--text-primary);
  font-family: var(--font-interface);
}

.announce-speaker {
  border-color: var(--line-soft);
  background: var(--panel-soft);
}

.guide-progress,
.guide-coachmark {
  border-color: var(--modal-border);
  border-radius: var(--radius-surface);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-modal);
}

.guide-coachmark h2 {
  color: var(--modal-title);
  font-family: var(--font-display);
}

.guide-coachmark p {
  font-family: var(--font-interface);
}

.guide-kicker,
.guide-exit {
  color: var(--secondary);
}

.guided-target {
  outline-color: var(--focus) !important;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--focus) 25%, transparent) !important;
}

.launch-page {
  background-color: var(--app-bg);
  background-image: var(--app-image);
  background-position: center;
  background-size: cover;
}

html[data-theme="blue"] .launch-page {
  background-blend-mode: multiply;
}

.launch-card {
  border: 1px solid var(--modal-border);
  border-radius: var(--radius-surface);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-modal);
}

.launch-card h1 {
  color: var(--modal-title);
  font-family: var(--font-display);
}

.launch-card p {
  color: var(--text-secondary);
  font-family: var(--font-interface);
}

.launch-eyebrow {
  color: var(--secondary);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.launch-prototype {
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-control);
  background: var(--primary-bg);
  color: var(--primary-text);
  font-family: var(--font-display);
}

.launch-secondary {
  border-color: var(--secondary);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--secondary);
  font-family: var(--font-display);
}

.launch-secondary:hover {
  background: var(--hover);
}

.fallback-link a {
  color: var(--secondary);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  html,
  html[data-theme="black"],
  html[data-theme="blue"] {
    color-scheme: light;
  }

  body,
  .boxscore-screen {
    background: #ffffff !important;
    color: #111111 !important;
  }

  .boxscore-screen * {
    color: #111111 !important;
    border-color: #aaaaaa !important;
  }
}