/* Shared appearance controls, with homepage and game theme overrides. */
#appearanceDock {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
/* Homepage paper / chalkboard styling lives in homepage-sketch.css. */

.game-account-controls { display: flex; align-items: center; gap: 12px; min-width: 0; }
#gameAppearanceDock { display: flex; flex-shrink: 0; }
.app .game-header { min-height: 58px; }
body .app { grid-template-rows: 58px minmax(0, 1fr); }
/* Dark mode is the chalkboard; its tokens live in sketch-theme.css. */
html.dark body .app { --game-workspace: var(--paper); }
html.dark .app .game-header { background-color: var(--paper); border-color: var(--line); }
html.dark .game-identity strong { color: var(--logo-ink); }
html.dark .game-header .game-player { color: var(--ink); }
html.dark .app .mode-summary,
html.dark .app .max-bridge,
html.dark .app .dev-options { background: transparent; color: var(--ink); }
html.dark .app .daily-progress-panel { background: var(--card); color: var(--ink); }
@media (max-width: 600px) {
  .app .game-header { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  body .app { grid-template-rows: auto minmax(0, 1fr); }
  .game-account-controls { margin-left: auto; gap: 8px; }
  .app .game-player { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 920px) {
  body .app { grid-template-rows: auto auto auto; }
}
html.dark .daily-dialog { background: var(--card); color: var(--ink); }
html.dark .app canvas { background: var(--card); }

/* Dark surfaces and semantic colors shared by every screen. */
html.dark {
  color-scheme: dark;
  --blue-dark: #b7dcff;
  --green: #8ce0b7;
  --red: #ff9da6;
}
html.dark .canvas-wrap { background: var(--card); }
html.dark .target-row,
html.dark .recent-result,
html.dark .daily-result-stat,
html.dark .daily-share-preview,
html.dark .level select,
html.dark .graph-badge,
html.dark .app .brand-actions button,
html.dark .app .dev-options .max-bridge {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--line);
}
html.dark .feedback,
html.dark .score-pill {
  background: #20394e;
  color: #d1e8ff;
  border-color: #659bc6;
}
html.dark .metric small { color: #b9cbdc; }
html.dark button[aria-pressed="true"],
html.dark .motion-options button[aria-pressed="true"] {
  background: var(--surface-selected);
  color: #e6f3ff;
  border-color: #85bde8;
}
html.dark .daily-puzzle-button { background: transparent; color: var(--ink); border-color: var(--control-line); }
html.dark .daily-puzzle-button[aria-pressed="true"] { background: transparent; color: var(--ink); border-color: var(--control-line-strong); }
html.dark .daily-puzzle-button[data-complete="true"] { background: transparent; color: var(--ink); }
html.dark .result-badge { background: #203f35; color: #9aebc3; border-color: #6cab89; }
html.dark .result-badge.miss { background: #4b2932; color: #ffadb7; }
html.dark .rating-note.gain { color: #9aebc3; }
html.dark .rating-note.loss { color: #ffadb7; }
html.dark .daily-community { background: #403321; color: #f4d4aa; }
html.dark .daily-component-row { border-color: var(--line); }
html.dark .daily-component-row strong,
html.dark .daily-progress-heading strong,
html.dark .daily-progress-heading span { color: #f4c68c; }
html.dark .dev-options summary:hover { background: var(--surface-raised); color: #fff; }
html.dark input::placeholder { color: #acbfd1; }
html.dark button:focus-visible,
html.dark input:focus-visible,
html.dark select:focus-visible { outline: 2px solid #9ad2ff; outline-offset: 3px; }
html.dark .app > aside { background: #172633; border-color: var(--line); }
html.dark .game-identity b { color: #ffa5ad; }
html.dark body[data-play-mode="daily"] .game-identity b { color: #f4c68c; }
html.dark .symbol.amp { background: #a93243; }
html.dark .symbol.timbre { background: #237553; }
html.dark .profile-screen .profile-avatar { box-shadow: 0 0 0 4px var(--surface-selected); }