/* Shared light palette from lobby.css. Layout and tile artwork stay in their own stylesheets. */
:root {
  color-scheme: light;
  --bg: #f3f3e9;
  --panel: #f3f5f0;
  --text: #24483d;
  --muted: #4c6957;
  --line: #ced5cd;
  --accent: #cbb278;
  --on-accent: #24483d;
  --felt: #e1e9de;
  --felt-hi: #e7ecdf;
  --felt-edge: #d7e3d2;
  --brass: #cbb278;
  --wood-hi: #f2eee2;
  --wood-mid: #e8e7d5;
  --wood-lo: #cdd5c9;
  --you: #426d58;
  --danger: #a9342d;
  --theme-cream: #f2eee2;
  --theme-gold-ink: #806125;
  --theme-shadow: #446b461c;
}
body {
  background: radial-gradient(ellipse at 0% 100%, #e1e9de, transparent 62%),
    radial-gradient(ellipse at 100% 0%, #e8e7d5, transparent 60%), #f3f3e9;
  color: var(--text);
}

/* Setup and navigation use the homepage's quiet cream cards and green text. */
#game-shell .private-toolbar { color: var(--muted); border-color: var(--line); }
#game-shell .lobby-link, #game-shell .private-mark { color: var(--text); }
#game-shell .private-mark small, #game-shell .tagline { color: #68796d; }
#game-shell .hero h1 { color: var(--text); font-family: 'Songti TC', 'Noto Serif TC', serif; }
#game-shell .pause-toggle, #game-shell .private-toolbar select,
#game-shell .controls button, #game-shell .more-menu summary {
  background: var(--theme-cream); color: var(--text); border-color: #c7d0c1;
  box-shadow: inset 0 1px 0 #ffffffb3;
}
#game-shell #btn-deal, #game-shell #btn-auto[aria-pressed='true'] {
  background: #d6b775; color: var(--text); border-color: #b79b60;
}
#game-shell .more-menu[open] summary { border-color: #426d58; }
#game-shell .more-menu-popover {
  background: #f3f5f0; border-color: var(--line); box-shadow: 0 10px 30px var(--theme-shadow);
}
#game-shell .meter, #game-shell .controls { color: var(--text); }
#game-shell .meter-item .label, #game-shell .status { color: var(--muted); }
#game-shell .meter-item strong { color: var(--text); }
#game-shell .gold-strip {
  background: #f6f0d9; color: var(--theme-gold-ink); border-color: #c8b887;
}
#game-shell .gold-strip strong { color: var(--theme-gold-ink); }
#game-shell .flash {
  background: #f6f0d9f5; color: var(--theme-gold-ink); border-color: #c8b887;
  box-shadow: 0 5px 18px var(--theme-shadow);
}
#game-shell .table {
  color: var(--text);
  background: linear-gradient(155deg, #f3f3e9, #e8e7d5 38%, #cdd5c9);
  border-color: #bdcbb7;
  box-shadow: inset 0 1px 0 #fff9, inset 0 -3px 2px #c6cfbe, 0 12px 30px var(--theme-shadow);
}
#game-shell .table-felt {
  background: repeating-linear-gradient(0deg, #ffffff0a 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #ffffff0a 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 30%, #e7ecdf, #e1e9de 56%, #d7e3d2);
  box-shadow: inset 0 2px 12px #49694312, inset 0 0 0 1px #b8c9b2;
}
#game-shell .table-felt::before { border-color: #9aaf8b33; }
#game-shell .seat-meta { background: #f3f5f099; color: var(--text); border-color: #bdcbb7; }
#game-shell .seat-name, #game-shell .seat-you .seat-name { color: var(--text); }
#game-shell .seat-count, #game-shell .seat-score { color: #3c5c48; opacity: 1; }
#game-shell .seat-wind { background: #f6f0d9; color: var(--theme-gold-ink); opacity: 1; }
#game-shell .seat.active-turn .seat-meta { background: #f6f0d9; border-color: #b79b60; }
#game-shell .seat.active-turn .seat-name { color: var(--text); }
#game-shell .seat-you { border-color: #bdcbb766; }
#game-shell .seat-you .seat-meta { background: none; }
#game-shell .meld-group { background: #b8c9b22b; }
#game-shell .center-felt::before { color: #7c917259; }
#game-shell .turn-hint, #game-shell .trick-hint { color: var(--muted); text-shadow: none; }
#game-shell .auto-badge { color: var(--theme-gold-ink); }
#game-shell .rule-badge { background: #a9342d; color: #fffdf3; }
#game-shell .wait-hint { background: #f2eee2f2; color: var(--text); box-shadow: 0 2px 8px var(--theme-shadow); }
#game-shell .wait-label, #game-shell .wait-count { color: var(--text); }
#game-shell .wait-tile.dead { background: #cdd5c9; }
#game-shell .wait-tile.dead .wait-count { color: #a9342d; }

/* Claim previews remain distinct from both the pale felt and white tile faces. */
#game-shell .action-bar { background: #f3f5f0f5; color: var(--text); border-color: #b79b60; box-shadow: 0 10px 26px #446b4626; }
#game-shell .action-prompt, #game-shell .claim-description, #game-shell .picker-heading { color: var(--text); text-shadow: none; }
#game-shell .action-buttons button { background: #d6b775; color: var(--text); border-color: #b79b60; }
#game-shell .action-buttons #btn-hu { background: #a9342d; color: #fffdf3; border-color: #a9342d; }
#game-shell .action-buttons #btn-pass { background: var(--theme-cream); color: var(--text); border-color: #9fb19a; }
#game-shell .chi-option { background: #f2eee2; border-color: #b5c5ad; color: var(--text); }
#game-shell .claimed-tile { outline-color: #806125; }
#game-shell .hand .tile.selected .tile-face,
#game-shell .drawn-slot .tile.selected .tile-face { border-color: #806125; box-shadow: inset 0 1px 1px #fff, 0 0 0 2px #b79b60; }

/* Full table uses the same pale palette after opening a hand. */
body.game-active #game-shell { background: var(--bg); }
body.game-active #game-shell .table {
  background: #e1e9de url('./art/table-scene-light.svg') center / 100% 100% no-repeat;
  box-shadow: none;
}
body.game-active #game-shell .table-felt { background: none; box-shadow: none; }
body.game-active #game-shell .seat-meta { background: none; color: var(--text); text-shadow: none; }
body.game-active #game-shell .seat-name,
body.game-active #game-shell .seat-you .seat-name { color: var(--text); }
body.game-active #game-shell .seat-score { color: #3c5c48; }
body.game-active #game-shell .seat-meta::before { border-color: #cbb278; box-shadow: 0 2px 5px #446b4626, 0 0 0 1px #fff7; }
body.game-active #game-shell .seat.active-turn .seat-meta::before { border-color: #806125; box-shadow: 0 0 0 2px #cbb278, 0 0 12px #cbb27840; }
body.game-active #game-shell .seat-wind { border-color: #b79b60; background: #f6f0d9; color: var(--theme-gold-ink); }
body.game-active #game-shell .center-felt::before { color: #7c91726b; text-shadow: none; }
body.game-active #game-shell .table-compass {
  border-color: #b79b60;
  background: radial-gradient(ellipse, #f3f3e9 0 28%, transparent 30%),
    conic-gradient(from -45deg, #f2eee2 0 25%, #e8e7d5 25% 50%, #f3f5f0 50% 75%, #e1e9de 75% 100%);
  box-shadow: 0 0 0 2px #f3f3e9, 0 3px 0 #b8c9b2, 0 5px 5px #446b4626;
}
body.game-active #game-shell .compass-wind { color: var(--muted); text-shadow: none; }
body.game-active #game-shell .compass-count {
  border-color: #b5c5ad; background: #f3f5f0; color: var(--text);
  text-shadow: none; box-shadow: inset 0 0 3px #49694312;
}
body.game-active #game-shell .table-compass[data-turn='0'] #compass-wind-0,
body.game-active #game-shell .table-compass[data-turn='1'] #compass-wind-1,
body.game-active #game-shell .table-compass[data-turn='2'] #compass-wind-2,
body.game-active #game-shell .table-compass[data-turn='3'] #compass-wind-3 {
  color: var(--text); background: #d6b775; text-shadow: none;
}
body.game-active #game-shell .turn-hint,
body.game-active #game-shell .trick-hint { color: var(--text); text-shadow: none; }
body.game-active #game-shell .table-effect {
  color: #806125; background: radial-gradient(ellipse, #f6f0d9e6, transparent 72%);
  text-shadow: 1px 2px 0 #fffdf3, 0 0 8px #cbb27840;
}
body.game-active #game-shell .wait-hint { background: #f2eee2f2; color: var(--text); }
body.game-active #game-shell .action-bar { background: none; box-shadow: none; }
body.game-active #game-shell .action-prompt { color: var(--text); text-shadow: none; }
body.game-active #game-shell .claim-context {
  background: #f3f5f0f5; color: var(--text); border-color: #b5c5ad; box-shadow: 0 4px 10px var(--theme-shadow);
}
body.game-active #game-shell .claim-description { color: var(--text); }
body.game-active #game-shell .action-buttons button,
body.game-active #game-shell .action-buttons #btn-hu,
body.game-active #game-shell .action-buttons #btn-pass {
  border-color: #b79b60; color: var(--text);
  background: radial-gradient(circle at 32% 20%, #f6f0d9, #e5d3a4 67%, #cbb278);
  text-shadow: 0 1px 0 #fff9; box-shadow: inset 0 0 0 2px #fff5, 0 3px 6px #446b4626;
}
body.game-active #game-shell .action-buttons #btn-pass {
  color: var(--text); border-color: #9fb19a;
  background: radial-gradient(circle at 30% 20%, #f3f5f0, #e1e9de 66%, #bdcbb7);
}
body.game-active #game-shell .action-buttons #btn-hu { color: #a9342d; border-color: #c79d80; background: radial-gradient(circle at 30% 20%, #fff2de, #f2ddba 65%, #d5b98c); }
body.game-active #game-shell .action-bar:has(.chi-picker:not([hidden])) {
  background: #f3f5f0f5; border-color: #b79b60; box-shadow: 0 7px 20px #446b4626;
}
body.game-active #game-shell .lobby-link,
body.game-active #game-shell .pause-toggle,
body.game-active #game-shell .private-toolbar select,
body.game-active #game-shell .controls button,
body.game-active #game-shell .more-menu summary {
  background: #f2eee2e8; color: var(--text); border-color: #bdcbb7;
  box-shadow: inset 0 1px 0 #ffffffb3;
}
body.game-active #game-shell #btn-auto[aria-pressed='true'] { background: #d6b775; color: var(--text); border-color: #b79b60; }
body.game-active #game-shell .meter { background: #f3f5f0e8; color: var(--text); border-color: #bdcbb7; }
body.game-active #game-shell .gold-strip { background: #f6f0d9ed; color: var(--theme-gold-ink); border-color: #c8b887; }
body.game-active #game-shell .hand .tile.selected .tile-face,
body.game-active #game-shell .drawn-slot .tile.selected .tile-face { box-shadow: inset 0 1px 1px #fff, 0 0 0 2px #806125; }
body.game-active #game-shell .seat-discards .last-discard { outline-color: #806125; }
body.game-active #game-shell .seat-discards .last-discard::before { border-top-color: #806125; }

/* Rules, results and the two-circle score sheet share the homepage card palette. */
.panel { background: #506f5d59; }
.panel-card {
  background: linear-gradient(135deg, #f3f5f0, #f0f5ef); color: var(--text);
  border-color: #ced5cd; box-shadow: inset 0 1px 0 #ffffffb3, 0 20px 60px #24483d26;
}
.panel h2 { color: var(--text); font-family: 'Songti TC', 'Noto Serif TC', serif; }
.panel .panel-note, .panel .about-body { color: var(--muted); }
.panel .rules-form label { color: var(--text); }
.panel input[type='number'], .panel select { color: var(--text); background: #f2eee2; border-color: #bdcbb7; }
.panel input[type='checkbox'] { accent-color: #426d58; }
.panel button { border-color: #b79b60; background: #d6b775; color: var(--text); }
.panel button.secondary { background: #f2eee2; color: var(--text); border-color: #bdcbb7; }
.panel .result-hand { background: #e1e9de; }
.match-progress { background: #f2eee2; color: var(--text); border-color: #d1cfc2; }
body.game-active #game-shell .match-progress { background: #f2eee2e8; color: var(--text); border-color: #d1cfc2; }
.match-progress[data-finished='true'], body.game-active #game-shell .match-progress[data-finished='true'] { color: #806125; border-color: #b79b60; }
.match-summary h3.match-summary-title { color: var(--text); }
.panel .match-summary p.match-summary-note,
.panel .match-summary p.match-score-note,
.panel .match-summary p.match-empty,
.panel .match-summary p.match-hand-meta { color: var(--muted); }
.match-player-card { border-color: #d1cfc2; background: linear-gradient(135deg, #f2eee2, #f1efe2); box-shadow: 0 5px 16px var(--theme-shadow); }
.match-player-card.match-you { border-color: #b79b60; box-shadow: 0 0 0 2px #cbb27840, 0 5px 16px var(--theme-shadow); }
.match-player-name, .match-player-stat dt, .match-player-stat dd, .match-player-total-label { color: var(--text); }
.match-player-rank, .panel .match-summary .match-player-counts { color: #687052; }
.match-player-score { border-color: #c7d0c1; }
.match-gain { color: #a9342d; }
.match-loss { color: #1c6d73; }
.match-even { color: var(--muted); }
.match-records, .match-history { border-color: #c7d0c1; }
.match-summary summary, .match-events summary, .match-hand-result { color: var(--text); }
.match-summary summary::marker { color: #426d58; }
.match-hand { background: #f3f5f0; border-color: #c7d0c1; }
.match-hand-index, .match-deltas dt, .panel .match-summary .match-event-label { color: var(--muted); }
.match-delta-pair { background: #e1e9de; }
.match-events { border-color: #cbb278; }
.match-history-round { background: #f3f5f070; border-color: #c7d0c1; }
#panel-match .panel-card,
#panel-result:has(#result-match-stats[data-finished='true']) .panel-card {
  background: linear-gradient(135deg, #f3f5f0, #e1e9de); border-color: #ced5cd;
  box-shadow: inset 0 1px 0 #ffffffb3, 0 18px 70px #24483d26;
}
#panel-match #match-title,
#panel-result:has(#result-match-stats[data-finished='true']) #result-title {
  color: var(--text); border-color: #d1cfc2;
  background: linear-gradient(#fffdf3, #f2eee2 48%, #e8e7d5);
  filter: drop-shadow(0 3px 2px #446b461c); box-shadow: inset 0 2px 1px #fffef7, inset 0 -3px 2px #cdd5c9;
}
#panel-match #btn-match-close { color: var(--text); background: #f2eee2; border-color: #bdcbb7; }
#panel-result:has(#result-match-stats[data-finished='true']) #result-hand-details { border-color: #c7d0c1; }
#panel-result:has(#result-match-stats[data-finished='true']) .result-hand-details-title { color: var(--text); }

#game-shell button:not(.tile):disabled, .panel button:disabled,
body.game-active #game-shell .controls button:disabled,
#game-shell #btn-deal:disabled, #game-shell #btn-auto:disabled { color: #748272; background: #e8ecdf; border-color: #ced5cd; opacity: 1; }
#game-shell button:focus-visible, #game-shell summary:focus-visible,
#game-shell select:focus-visible, #game-shell .lobby-link:focus-visible,
.panel button:focus-visible, .panel input:focus-visible, .panel select:focus-visible,
.match-summary summary:focus-visible { outline: 2px solid #426d58; outline-offset: 3px; }