/* Shared appearance for the launcher, game menus and staff screens. */
.theme-toggle {
  white-space: nowrap;
}
html[data-theme="light"] {
  --bg: #f6f5f0 !important;
  --white: #1c211f !important;
  --muted: #5b625e;
  --gray: #5b625e !important;
  --line: #d5d9d1;
  --yellow: #786600 !important;
  color-scheme: light;
}
html[data-theme="light"] body {
  background: var(--bg);
  color: #1c211f;
}
html[data-theme="light"]
  :is(button, .button):not(
    .secondary,
    .quiet,
    .danger,
    .mode-card,
    .level-card,
    .icon-button,
    .mode-picker button,
    .preset-buttons button
  ) {
  background: #f7e000;
  border-color: #c5b400;
  color: #171b17;
}
html[data-theme="light"] :is(button.secondary, .button.secondary) {
  color: #30382f;
  border-color: #a8afa4;
  background: #ffffff60;
}
html[data-theme="light"] :is(button, a, input, select):focus-visible {
  outline-color: #786600;
}
html[data-theme="light"] :is(input:not([type="range"]), select) {
  background: #fff;
  color: #1c211f;
  border-color: #a8afa4;
}
html[data-theme="light"] :is(.wordmark, .brand, .board-group h3) {
  color: #1c211f;
}
html[data-theme="light"]
  :is(
    .topbar .event,
    .game-brand,
    .subtitle,
    .intro-aside > span:first-child,
    .intro-aside p,
    .game-card p,
    .game-card .card-time,
    .bottomline,
    footer a,
    .board-row.recent-round > span,
    .stat span,
    .recent-row time
  ) {
  color: #5b625e;
}
html[data-theme="light"] .topbar {
  background: #fafaf6;
}
html[data-theme="light"] .game-card {
  background: linear-gradient(130deg, #fff, #f0f1e9);
  border-color: #d5d9d1;
}
html[data-theme="light"] .game-card .ordinal {
  color: #697162;
}
html[data-theme="light"] :is(.dialog, dialog) {
  background: #fafaf6;
  color: #1c211f;
  border-color: #a8afa4;
}
html[data-theme="light"] .board-row {
  border-color: #d5d9d1;
}
html[data-theme="light"] .board-row.current {
  background: #f7e00022;
}
html[data-theme="light"] .notice {
  background: #fff5cc;
  border-color: #c9b874;
  color: #514416;
}
html[data-theme="light"] :is(.stat, .recent-row) {
  border-color: #d5d9d1;
}
html[data-theme="light"] .danger {
  background: #8e2936;
  color: #fff;
  border-color: #8e2936;
}
html[data-theme="light"] .center-screen {
  background: radial-gradient(ellipse, #fafaf6 0%, #f6f5f0fa 75%, #f6f5f0f5);
}
html[data-theme="light"]
  :is(
    .center-screen > p:not(.eyebrow),
    .name-form label,
    .result-stats span,
    .result-stats small,
    .drawing-toolbar p,
    .control-checks span
  ) {
  color: #5b625e;
}
html[data-theme="light"] .mode-picker button {
  color: #30382f;
  border-color: #a8afa4;
  background: transparent;
}
html[data-theme="light"]
  :is(.mode-picker button.selected, .control-checks .checked) {
  background: #f7e00025;
  border-color: #786600;
  color: #786600;
}
html[data-theme="light"] .idle-hint {
  color: #687061 !important;
}
html[data-theme="light"] .save-status {
  color: #786600;
}
/* Scores, instructions and tracking overlays remain legible over dark live scenes. */
html[data-theme="light"]
  :is(.hud, .countdown, .position-copy, .tracking-notice, .play-instruction) {
  --yellow: #f7e000;
  color: #fff;
}
html[data-theme="light"] :is(.hud strong, .countdown p, .tracking-notice p) {
  color: #fff;
}
html[data-theme="light"] .tracking-notice button {
  background: #f7e000;
  color: #171b17;
}
html[data-theme="light"] :is(.practice, .control-checks span) {
  border-color: #a8afa4;
}
/* Sound: white canvas and darker teal/gold keep every instrument state readable. */
html[data-theme="light"] .sound-lab,
html[data-theme="light"] .sound-lab .topbar,
html[data-theme="light"] .sound-lab .stage {
  background: #fff;
}
html[data-theme="light"] .sound-lab .stage {
  border-color: #d5d9d1;
}
html[data-theme="light"]
  :is(.back-link, .session-tag, .control-label, .privacy-note) {
  color: #5b625e;
}
html[data-theme="light"] .welcome {
  background: linear-gradient(90deg, #fff 0%, #ffffffee 42%, #ffffff70 100%);
}
html[data-theme="light"] .how-to {
  background: #ffffffb0;
  border-color: #d5d9d1;
}
html[data-theme="light"]
  :is(.welcome-description, .how-to p span, .screen-note) {
  color: #5b625e;
}
html[data-theme="light"] .screen-note {
  border-color: #d5d9d1;
}
html[data-theme="light"] .how-to {
  --cyan: #087968;
}
html[data-theme="light"] .control-label output {
  color: #1c211f;
}
html[data-theme="light"] .preset-buttons button {
  background: #fff;
  border-color: #a8afa4;
  color: #30382f;
}
html[data-theme="light"] .preset-buttons button[aria-pressed="true"] {
  background: #fff7bc;
  border-color: #786600;
  color: #514416;
}
html[data-theme="light"] :is(.live, .message) {
  --yellow: #846c08;
  --cyan: #087968;
  color: #1c211f;
}
html[data-theme="light"] .message {
  background: #fffffff5;
}
html[data-theme="light"]
  :is(.message p:not(.eyebrow), .role-label small, #tracking-status) {
  color: #5b625e;
}
html[data-theme="light"] :is(.meter, .finger-lights i, .beat-steps i) {
  background: #1c211f18;
}
html[data-theme="light"] .finger-lights i.on {
  background: #087968;
}
html[data-theme="light"] .beat-steps i.on {
  background: #846c08;
  box-shadow: none;
}
html[data-theme="light"] .stage-corner {
  color: #5b625e;
  z-index: 1;
}
html[data-theme="light"]
  body:is([data-mode="live"], [data-mode="demo"])
  .stage-corner {
  color: #5b625e;
}
/* Motion's independent menu uses the same light palette. */
html[data-theme="light"] #app {
  background:
    radial-gradient(ellipse at 75% 45%, #e8ead7, transparent 54%), var(--bg);
}
html[data-theme="light"]
  :is(
    .festival,
    #app .intro,
    .attract-details,
    .pose-caption > span:last-child,
    .return-hint,
    .board-columns,
    .rank,
    .mode-description,
    .mode-time,
    .level-heading,
    .level-heading > span:last-child,
    .level-card span,
    #selected-challenge,
    dialog p,
    .confirm-label,
    .festival-top-five > span,
    .festival-top-five small
  ) {
  color: #5b625e;
}
html[data-theme="light"]
  :is(#app h1 > span:first-child, .attract-details b, .attract-best b) {
  color: #1c211f;
}
html[data-theme="light"] .icon-button {
  background: #fff9;
  border-color: #a8afa4;
  color: #30382f;
}
html[data-theme="light"] :is(.mode-card, .level-card) {
  background: #fff9;
  border-color: #a8afa4;
  color: #1c211f;
}
html[data-theme="light"] :is(.mode-card:hover, .level-card:hover) {
  background: #eef0e5;
}
html[data-theme="light"] :is(.mode-card.selected, .level-card.selected) {
  background: #fff7bc;
  border-color: #786600;
}
html[data-theme="light"]
  :is(.board-list, .board-list li, .festival-top-five > div > div) {
  border-color: #d5d9d1;
}
html[data-theme="light"] .festival-home {
  background: #fafaf6;
  color: #30382f;
  border-color: #a8afa4;
}
html[data-theme="light"] #system-message {
  background: #fff5cc;
  color: #514416;
}
html[data-theme="light"]
  body:is(
    [data-state="position"],
    [data-state="countdown"],
    [data-state="playing"],
    [data-state="ending"]
  )
  #app {
  --white: #f5f5ef;
  --yellow: #f7ff26;
  --gray: #b2b6ab;
  background: #090a0b;
  color: #f5f5ef;
}
html[data-theme="light"]
  body:is(
    [data-state="position"],
    [data-state="countdown"],
    [data-state="playing"],
    [data-state="ending"]
  )
  .brand {
  color: #fff;
}
.masthead .theme-toggle {
  font-size: max(10px, calc(var(--unit) * 0.72));
  padding: 0.65em 0.9em;
}
@media (max-width: 900px) {
  .topbar {
    height: auto;
    min-height: 70px;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .topbar nav {
    flex-wrap: wrap;
    gap: 6px;
  }
  .topbar nav :is(button, .button) {
    padding: 9px 10px;
    font-size: 10px;
    min-height: 40px;
  }
}

html[data-theme="light"]
  body:is(
    [data-state="position"],
    [data-state="countdown"],
    [data-state="playing"],
    [data-state="ending"]
  )
  .festival {
  color: #c5c6bb;
}