/* Original, live component skins. PNG previews are used only in the theme picker.
   Every game and verification component inherits this palette from body. */
body {
  --bg: #141a1d; --page-glow: #273a303d; --page-pattern: none;
  --gap-bg: #111a18; --shell: #17211c;
  --frame: #694127; --frame-light: #aa7648; --frame-dark: #39271b;
  --frame-pattern: url('/art/themes/wood-grain.svg'); --ornament: #b78b54;
  --panel: #253124; --panel-deep: #19251c; --panel-raised: #354331;
  --text: #e9e4cc; --heading: #fae9bd; --muted: #b9c4ad;
  --line: #647454; --line-soft: #64745466;
  --accent: #e7bf6f; --accent-ink: #2e2b1d; --accent-shade: #937243;
  --gold: #f1ce86; --focus: #ffe4a9;
  --felt-base: #1c5038; --felt-glow: #4d885547; --felt-text: #efe8cf;
  --felt-muted: #b8c9aa; --felt-line: #a4b37c52;
  --felt-pattern: url('/art/themes/linen.svg'); --table-top: #1b422f;
  --hand-base: #1c412e; --hand-glow: #30553a;
  --tile-face: #f0e2bc; --tile-edge: #fff0ce; --tile-shade: #b4a17b;
  --tile-line: #b09b71; --tile-pip: #202c25; --tile-shadow: #06161080;
  --tile-selected: #f3bd58; --tile-back: #b8a381; --tile-back-line: #ddcda7;
  --tile-shine: var(--tile-edge); --felt-mark: var(--felt-muted);
  --back-pattern: repeating-linear-gradient(45deg, #ede0bc66 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, #5e553426 0 1px, transparent 1px 4px);
  --choice-bg: #413c26; --choice-text: #ffdda0; --choice-border: #e9bc68;
  --success: #c6e4a7; --success-bg: #2b4129; --success-line: #809b61;
  --danger: #f4bfaa; --danger-bg: #4a3028; --danger-line: #a67259;
  color: var(--text); color-scheme: dark; min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--page-pattern), radial-gradient(ellipse at 40% 0, var(--page-glow), transparent 72%);
  background-attachment: fixed;
}
body[data-theme='midnight'] {
  --bg: #071622; --page-glow: #1d487348; --page-pattern: url('/art/themes/stars.svg');
  --gap-bg: #091723; --shell: #102130;
  --frame: #253e62; --frame-light: #6584a8; --frame-dark: #0d2038;
  --frame-pattern: repeating-linear-gradient(0deg, #8aaad018 0 1px, transparent 1px 4px); --ornament: #decda2;
  --panel: #112c40; --panel-deep: #0b1f31; --panel-raised: #24485e;
  --text: #e7edf1; --heading: #f9eccd; --muted: #b7cbdc;
  --line: #55758e; --line-soft: #55758e66;
  --accent: #aad8e9; --accent-ink: #102b40; --accent-shade: #517f99;
  --gold: #f3d08a; --focus: #b0efff;
  --felt-base: #133e67; --felt-glow: #377daf40; --felt-text: #f1edda;
  --felt-muted: #bfd7e6; --felt-line: #91b7d65c; --table-top: #103556;
  --hand-base: #102f50; --hand-glow: #183d61;
  --tile-face: #f2e8d0; --tile-edge: #fff7e3; --tile-shade: #aca58f;
  --tile-line: #a8a18f; --tile-pip: #102538; --tile-shadow: #03121dc4;
  --tile-selected: #8bdff0; --tile-back: #b3ad99; --tile-back-line: #eee7cf;
  --choice-bg: #15374d; --choice-text: #f6dfaa; --choice-border: #96ddef;
  --success: #c5ebca; --success-bg: #203d3a; --success-line: #6eae8e;
  --danger-bg: #47313a; --danger-line: #aa7386;
}
body[data-theme='bamboo'] {
  --bg: #122e29; --page-glow: #5a805b36; --page-pattern: url('/art/themes/bamboo-leaves.svg');
  --gap-bg: #10291f; --shell: #18372a;
  --frame: #b58a47; --frame-light: #e4bf73; --frame-dark: #5e542d;
  --frame-pattern: repeating-linear-gradient(90deg, transparent 0 104px, #654a2470 104px 106px, #e7cc8866 106px 109px, transparent 109px 112px), url('/art/themes/wood-grain.svg'); --ornament: #c7d8a4;
  --panel: #243d2a; --panel-deep: #173025; --panel-raised: #3e5936;
  --text: #e4edcf; --heading: #fbf1c8; --muted: #bfd0ad;
  --line: #81986a; --line-soft: #81986a66;
  --accent: #ebcb7e; --accent-ink: #304128; --accent-shade: #8e7942;
  --gold: #f4d789; --focus: #f1dfa5;
  --felt-base: #28634c; --felt-glow: #86b9853d; --felt-text: #f2f0d5;
  --felt-muted: #c7dfc2; --felt-line: #bbd5a966; --table-top: #285840;
  --hand-base: #204e3a; --hand-glow: #2f6047;
  --tile-face: #f0efd5; --tile-edge: #ffffe9; --tile-shade: #93ac91;
  --tile-line: #9d9f7e; --tile-pip: #184130; --tile-shadow: #092a208c;
  --tile-selected: #f0c96e; --tile-back: #90a88b; --tile-back-line: #e0e6bf;
  --choice-bg: #3d4729; --choice-text: #ffe5a7; --choice-border: #e5c26c;
  --success: #d1edaf; --success-bg: #304a2c; --success-line: #8bb66e;
}
body[data-theme='coast'] {
  --bg: #183440; --page-glow: #488da153; --page-pattern: none;
  --gap-bg: #16313c; --shell: #1c3f4c;
  --frame: #c6a474; --frame-light: #efd7ad; --frame-dark: #837052;
  --frame-pattern: url('/art/themes/wood-grain.svg'); --ornament: #ecd6a8;
  --panel: #255966; --panel-deep: #173e4e; --panel-raised: #396c77;
  --text: #f2f0df; --heading: #fff2d1; --muted: #c6dfe0;
  --line: #75a3aa; --line-soft: #75a3aa66;
  --accent: #e7c892; --accent-ink: #29454c; --accent-shade: #927d5d;
  --gold: #ffe1a1; --focus: #ffc49b;
  --felt-base: #2b6582; --felt-glow: #65a4b356; --felt-text: #fffae8;
  --felt-muted: #d1e4e7; --felt-line: #a9d1d66b; --table-top: #275b73;
  --hand-base: #24566f; --hand-glow: #316c81;
  --tile-face: #f6eedb; --tile-edge: #fffceb; --tile-shade: #b8ad91;
  --tile-line: #b8ab90; --tile-pip: #16354b; --tile-shadow: #082a3c99;
  --tile-selected: #ee9b73; --tile-back: #d3bd98; --tile-back-line: #f8edce;
  --back-pattern: url('/art/themes/waves.svg');
  --choice-bg: #a95032; --choice-text: #fff4d5; --choice-border: #ffc79a;
  --success: #e0f2c3; --success-bg: #36584b; --success-line: #98b788;
}
body[data-theme='claret'] {
  --bg: #1b1315; --page-glow: #6b333536; --page-pattern: none;
  --gap-bg: #1b1312; --shell: #251a18;
  --frame: #704425; --frame-light: #ba8247; --frame-dark: #38251b;
  --frame-pattern: url('/art/themes/wood-grain.svg'); --ornament: #c99649;
  --panel: #30201c; --panel-deep: #241917; --panel-raised: #49332a;
  --text: #ede3cf; --heading: #ffe8b6; --muted: #cbbba5;
  --line: #896c49; --line-soft: #896c4966;
  --accent: #e7b856; --accent-ink: #382819; --accent-shade: #977039;
  --gold: #ffd078; --focus: #f9d38d;
  --felt-base: #681e29; --felt-glow: #a43d4639; --felt-text: #faecd2;
  --felt-muted: #dbbfaa; --felt-line: #c7865c66; --table-top: #481d23;
  --hand-base: #401b21; --hand-glow: #55212a;
  --tile-face: #f0dfb8; --tile-edge: #fff0cf; --tile-shade: #b6996a;
  --tile-line: #b0966b; --tile-pip: #25271f; --tile-shadow: #190609ad;
  --tile-selected: #ffc44f; --tile-back: #b19168; --tile-back-line: #ebd4a5;
  --choice-bg: #40291d; --choice-text: #ffe090; --choice-border: #e9b845;
  --success: #d4e8aa; --success-bg: #353f26; --success-line: #949e64;
  --danger: #ffc7b5; --danger-bg: #57302c; --danger-line: #b16c57;
}
body[data-theme='stone'] {
  --bg: #4b493f; --page-glow: #b5a38631; --page-pattern: url('/art/themes/marble.svg');
  --gap-bg: #41443a; --shell: #e5dbc4;
  --frame: #d3c0a0; --frame-light: #f5ead5; --frame-dark: #8b7b61;
  --frame-pattern: url('/art/themes/marble.svg'); --ornament: #89764f;
  --panel: #eee6d5; --panel-deep: #e2d8c1; --panel-raised: #d4cbb4;
  --text: #34352b; --heading: #282b24; --muted: #5d6251;
  --line: #9a9c83; --line-soft: #93917a77;
  --accent: #596044; --accent-ink: #fff2d1; --accent-shade: #343d29;
  --gold: #5d5d34; --focus: #785815;
  --felt-base: #adb69d; --felt-glow: #e5e5c934; --felt-text: #283629;
  --felt-muted: #46563f; --felt-line: #52674e77; --table-top: #bac0a8;
  --hand-base: #b6bfa7; --hand-glow: #c7cbb5;
  --tile-face: #f4ecd9; --tile-edge: #fffbed; --tile-shade: #a4a087;
  --tile-line: #b5aa8e; --tile-pip: #252b23; --tile-shadow: #34483275;
  --tile-selected: #ba852a; --tile-back: #b9ab8f; --tile-back-line: #f7efda;
  --choice-bg: #515b42; --choice-text: #fff0c4; --choice-border: #eee0b3;
  --success: #36532c; --success-bg: #e0e8cf; --success-line: #7b9161;
  --danger: #863c25; --danger-bg: #f1dcc8; --danger-line: #b08565;
  color-scheme: light;
}
body[data-theme='arcade'] {
  --bg: #0c161e; --page-glow: #37376646; --page-pattern: none;
  --gap-bg: #10121e; --shell: #151827;
  --frame: #35404f; --frame-light: #788a9b; --frame-dark: #131b28;
  --frame-pattern: url('/art/themes/metal.svg'); --ornament: #9df2f3;
  --panel: #232139; --panel-deep: #171725; --panel-raised: #38334e;
  --text: #e9e6ed; --heading: #fff1ca; --muted: #c5bcd3;
  --line: #806a9e; --line-soft: #806a9e66;
  --accent: #75e9eb; --accent-ink: #122933; --accent-shade: #2a7a8e;
  --gold: #ffda7b; --focus: #9bf9f4;
  --felt-base: #30285f; --felt-glow: #7659bc36; --felt-text: #f4ebd7;
  --felt-muted: #c8c1db; --felt-line: #9e79d669; --table-top: #272344;
  --hand-base: #22223d; --hand-glow: #302c4d;
  --tile-face: #f6e8c6; --tile-edge: #fff2d3; --tile-shade: #b8a37f;
  --tile-line: #a79678; --tile-pip: #121d33; --tile-shadow: #080819ad;
  --tile-selected: #ffd272; --tile-back: #bba582; --tile-back-line: #f7e3b5;
  --choice-bg: #1b3543; --choice-text: #a4ffff; --choice-border: #76eced;
  --success: #c5f3c7; --success-bg: #203b34; --success-line: #74a789;
  --danger: #ffbdcd; --danger-bg: #4b293e; --danger-line: #b77899;
}

/* Framed furniture: compact shared dimensions keep a theme switch stationary. */
body :focus-visible { outline-color: var(--focus); }
body ::selection { color: var(--accent-ink); background: var(--accent); }
.app-shell { width: min(1360px, calc(100% - 40px)); }
.topbar { border-color: var(--line-soft); }
.brand b { color: var(--heading); text-shadow: 1px 2px #0005; }
.brand-icon { background: var(--tile-face); border-color: var(--tile-edge); box-shadow: 3px 3px var(--tile-shadow); }
.brand-icon::before { background: var(--tile-line); }
.brand-icon i { background: var(--tile-pip); }
.nav-button, .icon-button { color: var(--muted); }
.nav-button:hover, .icon-button:hover { color: var(--heading); }
#theme-button {
  border: 1px solid var(--line);
  background: linear-gradient(#ffffff09, #00000009), var(--panel);
  color: var(--heading); box-shadow: inset 0 0 0 1px #ffffff07, 0 2px 0 #0005;
}
#theme-button:hover { border-color: var(--accent); background-color: var(--panel-raised); }
.wallet { background: var(--panel); border-color: var(--line); box-shadow: inset 0 0 0 1px #ffffff06; }
.wallet:hover { background: var(--panel-raised); border-color: var(--accent); }
.wallet > span:not(.coin-icon) { color: var(--gold); }.wallet small { color: var(--muted); }
.workspace {
  position: relative; margin: 18px 0 28px; padding: 15px; gap: 16px;
  border: 8px solid var(--frame); background-color: var(--gap-bg);
  box-shadow: inset 0 0 0 2px var(--frame-dark), 0 0 0 1px var(--frame-light), 0 0 0 3px var(--frame-dark), 0 4px 0 3px #0006, 0 14px 30px #0004;
}
.workspace::before {
  content: ''; position: absolute; inset: -7px; pointer-events: none; z-index: 5;
  border: 2px solid var(--frame-light); opacity: .75;
  background: var(--frame-pattern); background-clip: border-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 4px;
}
.workspace::after {
  content: ''; position: absolute; inset: -5px; pointer-events: none; z-index: 6;
  background: linear-gradient(var(--ornament),var(--ornament)) left top/5px 5px,
    linear-gradient(var(--ornament),var(--ornament)) right top/5px 5px,
    linear-gradient(var(--ornament),var(--ornament)) left bottom/5px 5px,
    linear-gradient(var(--ornament),var(--ornament)) right bottom/5px 5px;
  background-repeat: no-repeat;
}
.table-heading { margin-bottom: 12px; padding: 0 3px; min-height: 44px; }
.table-heading h1 { color: var(--heading); font-size: 20px; font-weight: 600; }
.subtle-badge { color: var(--text); background: var(--panel); border-color: var(--line); }
.table-heading #leave-button { color: var(--text); background: var(--panel); border-color: var(--line); box-shadow: inset 0 0 0 1px #ffffff08, 0 2px 0 #0004; }
.table-heading #leave-button:hover { color: var(--heading); background: var(--panel-raised); border-color: var(--accent); }
.table-frame {
  padding: 8px; border-color: var(--frame-light); background-color: var(--frame); background-image: var(--frame-pattern);
  box-shadow: inset 0 0 0 2px var(--frame-dark), inset 0 0 0 4px var(--frame-light), inset 0 0 0 5px var(--frame-dark), 0 4px 0 #0005, 0 10px 20px #0002;
}
.table-frame::before, .table-frame::after { background: var(--ornament); width: 4px; height: 4px; }
.table-topline { background: var(--felt-pattern), var(--table-top); color: var(--felt-muted); padding-inline: 17px; }
.scoreboard { background: var(--felt-pattern), var(--table-top); border-color: var(--felt-line); padding-inline: 17px; }
.score-player strong, .score-display > strong { color: var(--felt-text); }
.score-player small, .score-display > small, .score-display > span, .opponent-hand > small { color: var(--felt-muted); }
.score-display > strong { text-shadow: 1px 2px var(--tile-shadow); }
.avatar { border-color: var(--tile-edge); box-shadow: 2px 3px var(--tile-shadow); }
.felt {
  background-color: var(--felt-base); background-image: var(--felt-pattern), radial-gradient(ellipse at 50% 43%,var(--felt-glow),transparent 75%);
  box-shadow: inset 0 1px 0 var(--felt-line), inset 0 -1px 0 var(--felt-line), inset 8px 0 20px #0000001f, inset -8px 0 20px #0000001f;
}
.felt::after { border-color: var(--felt-line); inset: 10px; box-shadow: 0 0 0 3px #00000009; }
.corner-deco { border-color: var(--ornament); opacity: .65; }.corner-deco::after { background: var(--ornament); }
.empty-table h3, .waiting-room h3 { color: var(--felt-text); }
.empty-table p, .waiting-room p, .waiting-room small { color: var(--felt-muted); }
.room-code { color: var(--gold); background: var(--panel-deep); border-color: var(--line); }
.turn-strip { color: var(--felt-text); border-color: var(--felt-line); background: var(--felt-pattern), var(--table-top); padding-inline: 17px; }
.turn-strip strong { color: var(--felt-text); }
.turn-indicator { background: var(--felt-muted); box-shadow: 0 0 0 2px #0003; }
.turn-indicator.my-turn { background: var(--gold); box-shadow: 0 0 0 2px var(--accent-shade), 0 0 0 4px #0002; }
.hand-area { background: var(--felt-pattern), linear-gradient(180deg, var(--hand-glow), var(--hand-base)); padding-inline: 17px; }
.self-label strong, #stock-label.stock-display { color: var(--felt-text); }
#hand-count, .hand-caption, .hand-placeholder { color: var(--felt-muted); }
.mini-avatar { background: var(--tile-shade); border-color: var(--tile-edge); box-shadow: 1px 2px var(--tile-shadow); }
.mini-avatar::before { background: var(--tile-pip); box-shadow: 9px 0 var(--tile-pip), 2px 7px var(--tile-pip), 5px 7px var(--tile-pip), 8px 7px var(--tile-pip); }
.stock-display .stock-count { color: var(--gold); text-shadow: 1px 1px #0003; }
.hand-tiles { scrollbar-color: var(--line) var(--hand-base); }
.quiet-button, .text-button, .tool-button, .tool-button span { color: var(--muted); }
.hand-area .quiet-button { color: var(--felt-muted); }
.quiet-button:hover:not(:disabled), .text-button:hover, .tool-button:hover, .tool-button:hover span { color: var(--heading); }
.hand-area .quiet-button:hover { color: var(--felt-text); }

/* Tile faces and backs share the same palette with the SVG board and draw flight. */
.domino { border: 1px solid var(--tile-edge); background: linear-gradient(105deg,#ffffff14,transparent 65%),var(--tile-face); color: var(--tile-pip); box-shadow: inset 0 0 0 1px var(--tile-line), inset 0 2px 0 #fff5, 0 3px 0 var(--tile-shade), 0 4px 0 var(--tile-line), 1px 6px 0 var(--tile-shadow); }
.domino.mini { box-shadow: inset 0 0 0 1px #ffffff30, 0 2px 0 var(--tile-shade), 1px 3px 0 var(--tile-shadow); }
.pip.on { background: var(--tile-pip); box-shadow: 0 1px 0 #ffffff24; border-radius: 1px; }
.tile-divider { background: var(--tile-line); box-shadow: 0 1px 0 #fff6; }
.domino.horizontal .tile-divider { box-shadow: 1px 0 0 #fff6; }
.domino.hand-tile:hover:not(:disabled) { background: linear-gradient(#ffffff26,#ffffff05),var(--tile-face); }
.domino.hand-tile.playable { border-color: var(--tile-edge); }
.domino.hand-tile.playable::after { background: var(--tile-selected); }
.domino.hand-tile.unplayable { opacity: .60; }
.domino.hand-tile.selected { background: var(--tile-face); border-color: var(--tile-edge); box-shadow: inset 0 0 0 1px var(--tile-line), 0 0 0 3px var(--tile-selected), 0 0 0 5px #0004, 0 4px 0 var(--tile-shade), 1px 7px 0 var(--tile-shadow); }
.tile-back, .draw-pile-back { border-color: var(--tile-back-line); background-color: var(--tile-back); background-image: var(--back-pattern); box-shadow: inset 0 0 0 1px #0002, 1px 2px 0 var(--tile-shade), 1px 4px 0 var(--tile-shadow); }
.draw-pile-back { box-shadow: 1px 2px 0 var(--tile-shade), 2px 3px 0 var(--tile-back-line), 3px 5px 0 var(--tile-shade), 4px 6px 0 var(--tile-shadow); }
.draw-pile-back::before { border-color: var(--tile-back-line); }
.draw-pile-back::after { background: var(--tile-back-line); box-shadow: 0 1px 0 var(--tile-shade); }
.draw-pile:is([data-count='0'],.is-empty) .draw-pile-back { border-color: var(--felt-muted); background: none; box-shadow: none; opacity: .45; }
.draw-flight .draw-pile-back { box-shadow: 1px 2px 0 var(--tile-shadow); }
.hand-play-zone .end-button, .hand-play-zone .end-button.available { color: var(--choice-text); background: linear-gradient(#ffffff0d,#00000018),var(--choice-bg); border-color: var(--choice-border); box-shadow: inset 0 0 0 1px #ffffff13, 0 3px 0 #0006; }
.hand-play-zone .end-button:hover:not(:disabled), .hand-play-zone .end-button.drag-over { color: var(--accent-ink); background: var(--accent); border-color: var(--focus); }
.hand-play-zone .end-button:focus-visible { outline-color: var(--focus); }

/* Sidebar furniture and all common controls. */
.sidebar { padding-top: 56px; }
.score-panel, .proof-card, .seed-card {
  color: var(--text); border: 1px solid var(--line);
  background: url('/art/themes/linen.svg'),linear-gradient(125deg,#ffffff07,transparent 50%),var(--panel);
  box-shadow: inset 0 0 0 2px #00000012, inset 0 1px 0 #ffffff12, 0 3px 0 #0005;
}
.score-panel { margin-bottom: 14px; }
.proof-card, .seed-card { margin-top: 14px; }
.sp-title, .proof-card h2, .seed-card h2, .seed-card h3, .seed-card strong { color: var(--heading); }
.sp-target, .sp-name, .sp-columns, .sp-round-button, .sp-current, .sp-current-state, .sp-status, .sp-gain, #proof-status, #score-proof-summary, .seed-card p, .seed-card small { color: var(--muted); }
.sp-number, .sp-player-self .sp-number { color: var(--heading); text-shadow: 1px 2px #0002; }
.sp-separator { color: var(--muted); }.sp-gain.is-positive { color: var(--gold); }
.sp-history, .sp-current, .sp-status, .sp-round + .sp-round { border-color: var(--line-soft); }
.sp-current-state::before { background: var(--gold); }
.sp-round-list { scrollbar-color: var(--line) var(--panel); }
.sp-round-button:hover:not(:disabled), .sp-round-button:active:not(:disabled), .sp-round-button:focus-visible { color: var(--heading); background: var(--panel-raised); border-color: var(--line); }
.proof-card-heading svg { stroke: var(--muted); }
.sidebar-bottom { color: var(--muted); opacity: .8; }
.status-dot { background: var(--success); }
.primary-button { color: var(--accent-ink); background: linear-gradient(#ffffff12,#ffffff00),var(--accent); border-color: var(--focus); border-bottom-color: var(--accent-shade); box-shadow: inset 0 1px 0 #ffffff30, 0 3px 0 var(--accent-shade), 0 5px 0 #0005; }
.primary-button:hover:not(:disabled) { color: var(--accent-ink); background: linear-gradient(#ffffff22,#ffffff14),var(--accent); border-color: var(--focus); }
.primary-button:active:not(:disabled) { box-shadow: 0 1px 0 var(--accent-shade), 0 2px 0 #0005; }
.secondary-button, .proof-button { color: var(--text); background: linear-gradient(#ffffff08,#00000008),var(--panel-raised); border-color: var(--line); box-shadow: inset 0 1px 0 #ffffff10, 0 2px 0 #0004; }
.secondary-button:hover:not(:disabled), .proof-button:hover:not(:disabled) { color: var(--heading); background: var(--panel-raised); border-color: var(--accent); }
.secondary-button:disabled { background: var(--panel-deep); }.proof-button > span:last-child { color: var(--muted); }
.danger-button { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); box-shadow: 0 2px 0 #0004; }
.danger-button:hover { background: var(--danger-bg); border-color: var(--danger); }
select { color: var(--text); border-color: var(--line); background: linear-gradient(45deg,transparent 50%,var(--muted) 50%) calc(100% - 15px) 17px/4px 4px no-repeat,linear-gradient(135deg,var(--muted) 50%,transparent 50%) calc(100% - 11px) 17px/4px 4px no-repeat,var(--panel-deep); }
select:hover { border-color: var(--accent); }select option { background: var(--panel-deep); color: var(--text); }

/* Modals use complete semantic colors; the light theme has no pale-on-pale text. */
dialog { color: var(--text); border: 2px solid var(--frame-light); background: url('/art/themes/linen.svg'),var(--panel); box-shadow: inset 0 0 0 3px var(--frame-dark), inset 0 0 0 5px var(--frame), 0 0 0 2px var(--frame-dark), 5px 6px 0 #0007, 0 20px 80px #0005; scrollbar-color: var(--line) var(--panel); }
dialog::backdrop { background: #080e14cf; }
.modal-close { color: var(--muted); }.modal-close:hover { color: var(--heading); }
.modal-title, .modal-copy strong, .journal-title { color: var(--heading); }
.modal-copy, .modal-footnote, .field-row, .check-row { color: var(--muted); }
.field-row input, dialog input[type='text'], dialog input:not([type]), .seed-card input { color: var(--text); background: var(--panel-deep); border-color: var(--line); }
input::placeholder { color: var(--muted); opacity: .8; }
.settings-group + .settings-group { border-color: var(--line-soft); }
.settings-group legend, .settings-fields label, .settings-name, .settings-seed, .settings-note, .settings-seed small { color: var(--muted); }
.settings-modes span { color: var(--muted); background: var(--panel-deep); border-color: var(--line); }
.settings-modes input:checked + span { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: inset 0 -2px var(--accent-shade); }
.settings-modes input:focus-visible + span { outline-color: var(--focus); }
.settings-toggle { color: var(--text); }
.settings-toggle input { background: var(--panel-deep); border-color: var(--line); }
.settings-toggle input::before { background: var(--muted); }
.settings-toggle input:checked { background: var(--accent); border-color: var(--focus); }
.settings-toggle input:checked::before { background: var(--accent-ink); }
.check-row input { accent-color: var(--accent); }
.detail-box, .result-hands, .history-round, .empty-note, .proof-stat, .proof-equation, .proof-fingerprint-short, .proof-fingerprints, .wallet-balance, .history-row { color: var(--text); background: var(--panel-deep); border-color: var(--line); }
.detail-box strong, .result-score, .result-hands > section > div:first-child > span, .settlement-note strong, .wallet-balance, .history-round summary > span, .history-row > strong { color: var(--gold); }
.detail-box small, .result-score > div small, .result-score > span, .result-hands > section > div:first-child, .mini-hand > small, .wallet-balance small, .ledger-row small, .ledger-row > span, .history-round > small, .log-full, .history-row > span:last-child { color: var(--muted); }
.result-hands > section + section, .ledger-row, .history-round .result-hands { border-color: var(--line-soft); }
.settlement-note { color: var(--muted); background: var(--panel-raised); border-color: var(--accent); }
.ledger-row strong, .history-round summary { color: var(--text); }
.positive { color: var(--success) !important; }.negative { color: var(--danger) !important; }
.rule-steps > section > b { color: var(--gold); background: var(--panel-deep); border-color: var(--line); }
.rule-steps h3 { color: var(--heading); }.rule-steps p { color: var(--muted); }
.history-round code { color: var(--text); background: var(--panel-deep); }.log-full li::marker { color: var(--muted); }
.history-row:hover { background: var(--panel-raised); border-color: var(--accent); }
#modal-content table { color: var(--muted); }#modal-content td, #modal-content th { border-color: var(--line-soft); }#modal-content th { color: var(--heading); }
.proof-context, .proof-context small, .proof-help { color: var(--muted); }
.proof-context strong, .proof-context h3 { color: var(--heading); }
.proof-tabs { border-color: var(--line); }.proof-tabs button { color: var(--muted); }
.proof-tabs button.active, .proof-tabs button[aria-selected='true'] { color: var(--heading); border-bottom-color: var(--accent); background: var(--panel-raised); }
.proof-verdict, .proof-verdict.passed { color: var(--success); background: var(--success-bg); border-color: var(--success-line); }
.proof-verdict p, .proof-verdict small { color: var(--success); }
.proof-verdict.failed { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.proof-verdict.failed p, .proof-verdict.failed small, .proof-verdict.failed strong { color: var(--danger); }
.proof-equation strong, .proof-equation b, .proof-equation > strong, .proof-equation code, .proof-equation code strong, .proof-stat strong { color: var(--gold); }
.proof-equation small, .proof-equation em, .proof-stat small { color: var(--muted); }
.proof-details { border-color: var(--line-soft); }.proof-details > summary { color: var(--text); }
.proof-details p, .proof-fingerprints span, .proof-fingerprints small, .proof-fingerprint-short > span { color: var(--muted); }
.proof-details code, .proof-details pre, .proof-fingerprints code, .proof-fingerprint-short > code { color: var(--text); }
.proof-details > pre { background: var(--panel-deep); border-color: var(--line); }
.proof-seed-field #proof-seed-input, .proof-fingerprint-compare { color: var(--text); background: var(--panel-deep); border-color: var(--line); }
.proof-fingerprints > b { color: var(--success); }.proof-fingerprints .different { color: var(--danger); }
.proof-external, .proof-flow-details > summary, .proof-package-details > summary { color: var(--text); text-decoration-color: var(--line); }
.proof-external:hover { color: var(--heading); }
.proof-flow-step strong, .proof-package-steps strong { color: var(--heading); }
.proof-flow-step p, .proof-flow-step .proof-flow-pending { color: var(--muted); }
.proof-flow-step .proof-player-seed, .proof-player-seed { color: var(--text); background: var(--panel-deep); border-color: var(--line); }
.proof-flow-step .proof-verdict strong { color: var(--success); }
.proof-flow-step .proof-verdict.failed strong, .proof-flow-step .proof-verdict.failed p { color: var(--danger); }
#toast { color: var(--accent-ink); background: var(--accent); border-color: var(--focus); box-shadow: 4px 4px #0006; }

/* Material-specific inlays make each table more than a palette swap. */
body[data-theme='midnight'] .corner-deco { width: 12px; height: 12px; transform: rotate(45deg); border-width: 0; background: linear-gradient(var(--ornament),var(--ornament)) center/2px 12px no-repeat, linear-gradient(var(--ornament),var(--ornament)) center/12px 2px no-repeat; }
body[data-theme='midnight'] .corner-deco::after { display: none; }
body[data-theme='bamboo'] .workspace::after { inset: -8px; background-size: 9px 9px; filter: drop-shadow(1px 1px 0 #385040); }
body[data-theme='bamboo'] .table-frame { background-size: auto,256px 96px; }
body[data-theme='bamboo'] .corner-deco { width: 21px; height: 21px; border-style: double; border-width: 3px; opacity: .45; }
body[data-theme='coast'] .workspace::before { background-image: url('/art/themes/waves.svg'),var(--frame-pattern); opacity: .9; }
body[data-theme='coast'] .turn-indicator.my-turn { background: #ffb190; box-shadow: 0 0 0 2px #b65c3c; }
body[data-theme='claret'] .workspace, body[data-theme='claret'] dialog { box-shadow: inset 0 0 0 2px var(--frame-dark),0 0 0 1px var(--frame-light),0 0 0 3px var(--frame-dark),0 4px 0 3px #0006,0 14px 30px #0005; }
body[data-theme='claret'] .corner-deco { opacity: .9; }
body[data-theme='stone'] .workspace { background-image: url('/art/themes/marble.svg'); background-color: var(--shell); }
body[data-theme='stone'] .score-panel, body[data-theme='stone'] .proof-card, body[data-theme='stone'] .seed-card, body[data-theme='stone'] dialog { background-image: linear-gradient(#eee6d5bd,#eee6d5bd),url('/art/themes/marble.svg'); }
body[data-theme='stone'] .topbar { --heading:#fff3d8; --text:#fff0d1; --muted:#e4dcc7; --gold:#ffe19c; --panel:#525445; --panel-raised:#64694f; --line:#a19d84; }
body[data-theme='stone'] .stock-display .stock-count { color: #6b491b; text-shadow: 0 1px #f5ecd099; }
body[data-theme='stone'] .sp-gain.is-positive { color: #3e6332; }
body[data-theme='stone'] .sp-number, body[data-theme='stone'] .sp-player-self .sp-number { text-shadow: none; }
body[data-theme='stone'] .domino.hand-tile.unplayable { opacity: .67; }
body[data-theme='arcade'] .workspace { border-radius: 8px; background-image: url('/art/themes/metal.svg'); }
body[data-theme='arcade'] .workspace::before { border-color: #70bccc; box-shadow: inset 0 2px #a2eff2,inset 0 -2px #c673c7; border-radius: 3px; }
body[data-theme='arcade'] .workspace::after { inset: -4px; background: linear-gradient(90deg,transparent 8%,#78ebed 8% 67%,#d665c4 67% 91%,transparent 91%) top/100% 2px,linear-gradient(90deg,transparent 8%,#d665c4 8% 33%,#78ebed 33% 91%,transparent 91%) bottom/100% 2px; background-repeat: no-repeat; }
body[data-theme='arcade'] .table-frame { border-radius: 4px; }
body[data-theme='arcade'] .corner-deco { border-color: #c36fbe; opacity: .8; }.corner-deco::after { background: var(--ornament); }
body[data-theme='arcade'] .score-panel, body[data-theme='arcade'] .proof-card, body[data-theme='arcade'] .seed-card { box-shadow: inset 0 0 0 1px #c98dde22,0 2px 0 #0008; }

@media (min-width: 851px) and (max-height: 800px) {
  .workspace { margin-top: 13px; padding: 12px; gap: 14px; }
  .table-heading { min-height: 44px; margin-bottom: 10px; }.sidebar { padding-top: 54px; }
  .felt { min-height:180px; height:clamp(180px,calc(100vh - 550px),240px); }
}
@media (max-width: 1100px) {
  .app-shell { width: calc(100% - 30px); }.workspace { grid-template-columns:minmax(0,1fr) 226px; gap:14px; padding:12px; }
  .score-panel { padding:14px 13px; }.proof-card,.seed-card { padding:15px; }
}
@media (max-width: 850px) {
  .app-shell { width:min(750px,calc(100% - 24px)); }.workspace { padding:10px; margin-top:15px; gap:18px; border-width:6px; }
  .sidebar { padding-top:0; gap:14px; }.score-panel { margin-bottom:0; }.proof-card,.seed-card { margin-top:0; }
  .table-frame { padding:6px; }.table-heading h1 { font-size:18px; }
  body[data-theme='bamboo'] .workspace,body[data-theme='arcade'] .workspace { border-width:6px; }
}
@media (max-width: 570px) {
  .app-shell { width:calc(100% - 16px); }
  .workspace { padding:7px; gap:15px; margin:12px 0 22px; }.table-heading { gap:8px; padding:0 1px; margin-bottom:9px; }.table-heading h1 { font-size:16px; }
  .table-frame { padding:5px; }.table-topline,.scoreboard,.turn-strip { padding-inline:10px; }.hand-area { padding-inline:9px; }
  .sidebar { gap:13px; }.proof-card,.seed-card { padding:15px; }.score-panel { padding:15px; }
}
@media (max-width: 390px) {
  .workspace { padding:5px; }.table-frame { padding:4px; }
  .table-heading h1 { gap:6px; }.table-heading #leave-button { min-width:86px; padding-inline:8px; }
}