/* Appearance preferences and shared light / dark surfaces. */
:root {
  color-scheme: light;
  --digit-scale: 1;
  --canvas: #f5f5f0;
  --surface: #ffffff;
  --surface-soft: #f4f6f3;
  --surface-hover: #edf2ee;
  --ink: #233b33;
  --muted: #5e7065;
  --line: #dfe6df;
  --deep: #245c49;
  --entry: #286a8d;
  --paper: #ffffff;
  --grid-line: #e1e7e0;
  --grid-block: #84998c;
  --peer-bg: #f2f6f2;
  --same-bg: #e5f0e7;
  --accent-bg: #d9eee2;
  --accent-line: #438568;
  --note-match: #27694e;
  --note-ink: #ffffff;
  --danger: #a54436;
  --danger-bg: #fbe9e4;
  --warning: #806029;
  --warning-bg: #faf0d8;
  --shadow: 0 4px 24px #233b3305;
  --radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
:root[data-accent="blue"] { --accent-bg: #dbeaf6; --accent-line: #467ca7; --note-match: #346c97; }
:root[data-accent="amber"] { --accent-bg: #f7e9ca; --accent-line: #a88238; --note-match: #806028; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #151e1b; --surface: #1e2a24; --surface-soft: #25332c; --surface-hover: #304238;
  --ink: #e3ece4; --muted: #a9baae; --line: #3b4c40; --deep: #70ae8c; --entry: #9ccae1; --paper: #1e2a24;
  --grid-line: #3a4a3e; --grid-block: #809585; --peer-bg: #26382d; --same-bg: #344d3b;
  --accent-bg: #3b5a45; --accent-line: #9cc99f; --note-match: #b4dbb0; --note-ink: #18281b;
  --danger: #ffc0af; --danger-bg: #58362f; --warning: #e5ca88; --warning-bg: #453c28; --shadow: none;
}
:root[data-theme="dark"][data-accent="blue"] { --accent-bg: #304f66; --accent-line: #9acbe9; --note-match: #b2daef; }
:root[data-theme="dark"][data-accent="amber"] { --accent-bg: #574b2e; --accent-line: #d8be7a; --note-match: #ead297; }
* { box-sizing: border-box; }
html { min-width: 320px; }
body { background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 4px; }
button:disabled { opacity: .4; cursor: default; }
a { color: var(--deep); }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
p, small, .stat-label, .board-caption, .eyebrow, .room-footnote { color: var(--muted); }
.card, .board-panel, .side-panel, .dialog, .account-editor, .table-wrap {
  background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow);
}
input, select, textarea, .card input, .card textarea, .account-form input {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 11px;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
.primary, .new-game, body[data-page="admin"] button:not(.secondary):not(nav button) { background: var(--deep); color: var(--surface); border-color: var(--deep); }
.secondary, .number-key, .quiet-button, .level-select, .level-filter, .level-tile, .level-jump-go { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
.quiet, .level-arrow, .dialog-close, .pause-button { color: var(--muted); }
.tools, .stats, .view-switch, .board-tag, .player, .note-indicator { background: var(--surface-soft); border-color: var(--line); color: var(--muted); }
.tool, .view-switch button { color: var(--muted); }
.tool.active, .view-switch button.active { background: var(--surface); color: var(--deep); box-shadow: 0 2px 6px #233b3309; }
.answer-button, .account-button { background: var(--surface); color: var(--muted); border-color: var(--line); }
.pause-screen { background: var(--surface); color: var(--ink); }
.progress-track { background: var(--line); }
.progress-fill { background: var(--deep); }
.cell, .duo-cell, .answer-cell, .replay-cell { background: var(--surface); color: var(--entry); font-variant-numeric: lining-nums tabular-nums; border-color: var(--grid-line); }
.grid, .room-grid, .answer-grid, .replay-board { background: var(--surface); border-color: var(--grid-block); }
:is(.cell, .duo-cell, .answer-cell, .replay-cell):nth-child(3n):not(:nth-child(9n)) { border-right-color: var(--grid-block); }
:is(.cell, .duo-cell, .answer-cell, .replay-cell):nth-child(n+19):nth-child(-n+27),
:is(.cell, .duo-cell, .answer-cell, .replay-cell):nth-child(n+46):nth-child(-n+54) { border-bottom-color: var(--grid-block); }
.cell.given, .duo-cell.given, .answer-cell.given, .replay-cell.given { color: var(--ink); font-weight: 600; }
.cell.peer, .duo-cell.peer { background: var(--peer-bg); }
.cell.same, .duo-cell.same { background: var(--same-bg); color: var(--deep); }
.cell.selected, .duo-cell.selected { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--accent-line); }
.cell.conflict, .duo-cell.conflict { color: var(--danger); background: var(--danger-bg); }
.cell.selected.conflict, .duo-cell.selected.conflict { box-shadow: inset 0 0 0 2px var(--danger); }
.cell, .duo-cell { font-size: calc(clamp(21px, 3vw, 31px) * var(--digit-scale)); line-height: 1; min-height: 0; overflow: hidden; }
.cell .notes, .duo-notes { color: var(--muted); font-size: calc(clamp(9px, 1.1vw, 13px) * min(var(--digit-scale), 1.15)); }
.cell .notes .note-match, .duo-notes .note-match { color: var(--note-ink); background: var(--note-match); border-radius: 3px; font-weight: 650; }
.number-key.active { background: var(--accent-bg); border-color: var(--accent-line); color: var(--ink); }
.number-key.complete { background: var(--surface-soft); color: var(--muted); opacity: .45; }
.keypad.pencil .number-key { background: var(--peer-bg); }
.level-filter.active, .level-tile.current { background: var(--accent-bg); border-color: var(--accent-line); color: var(--ink); }
.restriction, .challenge-rule, .hint-correction { background: var(--warning-bg); color: var(--warning); }
.notice.error, .status-message.error { color: var(--danger); }
.notice, .chat-system { color: var(--muted); }
.chat-item p { background: var(--surface-soft); color: var(--ink); }
.chat-item.own p { background: var(--accent-bg); color: var(--ink); }
.quick-chat button { color: var(--muted); border-color: var(--line); }
.hint-dialog h3, .hint-dialog #hint-frame-text { color: var(--ink); }
.hint-cell { background: var(--surface); color: var(--ink); border-color: var(--grid-line); }
.hint-cell.in-unit { background: var(--peer-bg); }
.hint-candidate { color: var(--muted); }
.hint-value { color: var(--ink); }
.hint-text-details, .hint-dialog .hint-diagram-note { color: var(--muted); }
.hint-dialog .hint-digit { background: var(--surface-soft); border-color: var(--line); color: var(--deep); }
.hint-dialog .hint-digit.active { background: var(--deep); color: var(--surface); }
[data-theme="dark"] .hint-cell.is-source { background: #306247; }
[data-theme="dark"] .hint-cell.is-excluded { background: #654239; }
[data-theme="dark"] .hint-cell.is-target, [data-theme="dark"] .hint-cell.is-placement { background: #35576b; }
[data-theme="dark"] .hint-candidate.is-evidence { background: #40835b; color: #eefff0; }
[data-theme="dark"] .hint-candidate.is-eliminated { background: #ab6256; color: #fff; }
[data-theme="dark"] .hint-link.strong { stroke: #a5caa1; }
[data-theme="dark"] .hint-axis, [data-theme="dark"] .hint-legend { color: var(--muted); }
[data-theme="dark"] .hint-method { background: var(--surface-soft); color: var(--ink); }
[data-theme="dark"] .board-base { background: #36463a; box-shadow: 0 5px 0 #2c3d30, 0 10px 0 #233528; }
@media (hover: hover) and (pointer: fine) {
  .secondary:hover, .quiet-button:hover, .number-key:hover, .level-select:hover { background: var(--surface-hover); color: var(--ink); border-color: var(--accent-line); }
  .primary:hover, .new-game:hover { background: var(--deep); filter: brightness(1.08); }
  .tool:hover, .quiet:hover, .answer-button:hover { background: var(--surface-soft); color: var(--ink); }
  .cell:not(.selected):not(.conflict):hover, .duo-cell:not(.selected):not(.conflict):hover { background: var(--peer-bg); }
}
@media (max-width: 620px) {
  .cell, .duo-cell { font-size: calc(clamp(20px, 6vw, 29px) * var(--digit-scale)); }
  .cell .notes, .duo-notes { font-size: calc(clamp(8px, 2.2vw, 12px) * min(var(--digit-scale), 1.15)); }
}
@supports (font-size: 1cqw) {
  .grid, .room-grid { container-type: inline-size; }
  .cell, .duo-cell { font-size: calc(clamp(20px, 5.7cqw, 32px) * var(--digit-scale)); }
  .cell .notes, .duo-notes { font-size: calc(clamp(8px, 2.15cqw, 13px) * min(var(--digit-scale), 1.15)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}