/* Seven coordinated pixel rooms. All art is decorative; card and rule state is independent. */
body[data-skin=pixel-c] {
 --page:#0b1c2f; --header:#09192b; --surface:#102b43; --surface-soft:#142f46;
 --ink:#f2e5c9; --muted:#abc1d1; --line:#54738b; --gold:#e6b46e; --gold-light:#ffe1a4;
 --button:#284860; --button-ink:#f6e7c9; --primary:#e4ba7d; --primary-ink:#182c3e;
 --felt:#123c58; --table-ink:#d7e3e6; --table-number:#f2ca8d; --rail:#67483d; --rail-light:#ac8160; --rail-dark:#302b2c;
 --room-art:url('/public/art/themes/navy-scene.svg'); --panel-art:url('/public/art/themes/navy-panel.svg');
 --rail-grain:repeating-linear-gradient(0deg,transparent 0 5px,#f3d39820 5px 7px);
 --room-shade:.58; --theme-shadow:#030e1b60; color-scheme:dark;
 color:var(--ink); background:var(--page);
}
body[data-theme=forest] {
 --page:#273b2d; --header:#1c3228; --surface:#eee7ce; --surface-soft:#e1dbc0;
 --ink:#34432d; --muted:#616b50; --line:#9a9e79; --gold:#506642; --gold-light:#97b67b;
 --button:#506448; --button-ink:#fcf2d8; --primary:#526f45; --primary-ink:#fff5dc;
 --felt:#30563d; --table-ink:#e5eacf; --table-number:#f0d79a; --rail:#c29b5c; --rail-light:#eed39a; --rail-dark:#69522f;
 --room-art:url('/public/art/themes/forest-scene.svg'); --panel-art:url('/public/art/themes/forest-panel.svg');
 --rail-grain:repeating-linear-gradient(90deg,transparent 0 46px,#674c3566 46px 48px,#fbe0a055 48px 50px); color-scheme:light;
}
body[data-theme=coast] {
 --page:#294c54; --header:#203e48; --surface:#fff0d0; --surface-soft:#f3dfbd;
 --ink:#5c473a; --muted:#80634d; --line:#c59875; --gold:#965a40; --gold-light:#d29658;
 --button:#346e70; --button-ink:#fff0d1; --primary:#aa5a42; --primary-ink:#fff4db;
 --felt:#2b777b; --table-ink:#f3eed1; --table-number:#ffe0ab; --rail:#ce7356; --rail-light:#ffc794; --rail-dark:#793b33;
 --room-art:url('/public/art/themes/coast-scene.svg'); --panel-art:url('/public/art/themes/coast-panel.svg');
 --rail-grain:repeating-linear-gradient(90deg,transparent 0 29px,#ffe3b899 29px 32px); color-scheme:light;
}
body[data-theme=neon] {
 --page:#141525; --header:#10101e; --surface:#211d38; --surface-soft:#2c2645;
 --ink:#ebe0f6; --muted:#b9aacb; --line:#696083; --gold:#77ced2; --gold-light:#a4eff0;
 --button:#36314d; --button-ink:#d8f5ef; --primary:#a988c7; --primary-ink:#211a32;
 --felt:#30253e; --table-ink:#e0cfe9; --table-number:#91e1df; --rail:#535363; --rail-light:#83dad3; --rail-dark:#d27baa;
 --room-art:url('/public/art/themes/neon-scene.svg'); --panel-art:url('/public/art/themes/neon-panel.svg');
 --rail-grain:repeating-linear-gradient(135deg,transparent 0 10px,#151c3b35 10px 12px);
}
body[data-theme=club] {
 --page:#281820; --header:#21151a; --surface:#372027; --surface-soft:#432831;
 --ink:#f0dab7; --muted:#c8b194; --line:#94744e; --gold:#debd7f; --gold-light:#f5d799;
 --button:#59333b; --button-ink:#f6dfb7; --primary:#cbaa71; --primary-ink:#3b2224;
 --felt:#642f3c; --table-ink:#f0dec2; --table-number:#f5c987; --rail:#a78450; --rail-light:#eed19b; --rail-dark:#49312b;
 --room-art:url('/public/art/themes/club-scene.svg'); --panel-art:url('/public/art/themes/club-panel.svg');
 --rail-grain:repeating-linear-gradient(0deg,transparent 0 3px,#ffdc941a 3px 4px);
}
body[data-theme=moon] {
 --page:#444465; --header:#34354e; --surface:#eee8f7; --surface-soft:#e1d9ed;
 --ink:#52436d; --muted:#776387; --line:#aaa0c5; --gold:#765693; --gold-light:#9471b0;
 --button:#dcd1ef; --button-ink:#514071; --primary:#7b619e; --primary-ink:#fff3ff;
 --felt:#b7accf; --table-ink:#44385c; --table-number:#503466; --rail:#e0dbef; --rail-light:#fffff4; --rail-dark:#8e82ab;
 --room-art:url('/public/art/themes/moon-scene.svg'); --panel-art:url('/public/art/themes/moon-panel.svg');
 --rail-grain:repeating-linear-gradient(135deg,transparent 0 13px,#ffffff35 13px 16px); color-scheme:light;
}
body[data-theme=cafe] {
 --page:#443d32; --header:#342d28; --surface:#f4e6d1; --surface-soft:#e8d8bc;
 --ink:#544333; --muted:#796650; --line:#b79d7b; --gold:#84603d; --gold-light:#ac8151;
 --button:#816c51; --button-ink:#fff0d9; --primary:#876047; --primary-ink:#fff1d9;
 --felt:#9a8066; --table-ink:#fff2db; --table-number:#fff2c5; --rail:#e5cba8; --rail-light:#fff0cd; --rail-dark:#6a4938;
 --room-art:url('/public/art/themes/cafe-scene.svg'); --panel-art:url('/public/art/themes/cafe-panel.svg');
 --rail-grain:repeating-linear-gradient(0deg,transparent 0 4px,#81593635 4px 8px),repeating-linear-gradient(90deg,transparent 0 4px,#81593635 4px 8px); color-scheme:light;
}
.scene { display:block; background-image:var(--room-art); background-repeat:repeat-x; background-size:auto max(340px,48svh); background-position:center 64px; opacity:.9; }
.scene-shade { display:block; background:linear-gradient(0deg,var(--page) 0%,transparent 95%); }
.topbar { background:var(--header); border-color:color-mix(in srgb,var(--line) 60%,transparent); }
.topbar, .brand, .topbar .quiet { color:#f4e7cf; }
.brand small { color:#d3c2b1; }
.brand-suit { color:#e4c087; }
.button, .icon-button { border-radius:0; }
.primary { background:var(--primary); color:var(--primary-ink); border-color:color-mix(in srgb,var(--primary) 55%,#fff4db); box-shadow:inset -2px -2px #0002,0 3px var(--theme-shadow); }
.secondary, .turn-tools .button, .fairness-entry { background:var(--button); color:var(--button-ink); border:2px solid var(--line); box-shadow:inset 1px 1px #ffffff20,0 2px var(--theme-shadow); }
.quiet,.text-button { color:var(--muted); }
.quiet:hover { background:var(--surface-soft); }
.topbar .quiet:hover { background:#ffffff15; }
.icon-button { background:var(--surface-soft); color:var(--ink); border-color:var(--line); }
.button:focus-visible,.icon-button:focus-visible,button:focus-visible { outline-color:var(--gold-light); }
.lobby-left h1 { color:#fff0d4; text-shadow:3px 3px #0008; }
.intro { color:#f2e9d4; text-shadow:1px 2px #000a; }
.start-panel { background:var(--surface); border-color:var(--line); box-shadow:inset 2px 2px #fff2,5px 5px var(--theme-shadow); }
.options-row > span,.seed-row label { color:var(--muted); }
.segmented { background:var(--surface-soft); border-color:var(--line); }
.segmented button { color:var(--muted); }
.segmented button.chosen { background:var(--button); color:var(--button-ink); }
.seed-row { border-color:var(--line); }
.seed-input input { background:var(--surface-soft); border-color:var(--line); color:var(--ink); }
.matchbar > span { color:#f6e8d4; text-shadow:1px 1px #000b; }
.table-rail { background-color:var(--rail); background-image:var(--rail-grain); box-shadow:inset 0 3px var(--rail-light),inset 3px 0 var(--rail-light),inset 0 -3px var(--rail-dark),inset -3px 0 var(--rail-dark); }
.felt { background-color:var(--felt); border-color:color-mix(in srgb,var(--felt) 65%,#10151e); box-shadow:inset 0 4px #0002,inset 4px 0 #0001,inset -4px 0 #0001,inset 0 -4px #fff1; }
.felt-border { border-color:color-mix(in srgb,var(--table-ink) 20%,transparent); }
body[data-theme=forest] .table-rail,body[data-theme=forest] .felt { clip-path:polygon(0 30px,12px 30px,12px 18px,24px 18px,24px 8px,40px 8px,40px 0,calc(100% - 40px) 0,calc(100% - 40px) 8px,calc(100% - 24px) 8px,calc(100% - 24px) 18px,calc(100% - 12px) 18px,calc(100% - 12px) 30px,100% 30px,100% calc(100% - 30px),calc(100% - 12px) calc(100% - 30px),calc(100% - 12px) calc(100% - 18px),calc(100% - 24px) calc(100% - 18px),calc(100% - 24px) calc(100% - 8px),calc(100% - 40px) calc(100% - 8px),calc(100% - 40px) 100%,40px 100%,40px calc(100% - 8px),24px calc(100% - 8px),24px calc(100% - 18px),12px calc(100% - 18px),12px calc(100% - 30px),0 calc(100% - 30px)); }
body[data-theme=coast] .table-rail,body[data-theme=coast] .felt,body[data-theme=club] .table-rail,body[data-theme=club] .felt { clip-path:polygon(0 64px,8px 64px,8px 40px,20px 40px,20px 24px,36px 24px,36px 12px,60px 12px,60px 4px,90px 4px,90px 0,calc(100% - 90px) 0,calc(100% - 90px) 4px,calc(100% - 60px) 4px,calc(100% - 60px) 12px,calc(100% - 36px) 12px,calc(100% - 36px) 24px,calc(100% - 20px) 24px,calc(100% - 20px) 40px,calc(100% - 8px) 40px,calc(100% - 8px) 64px,100% 64px,100% calc(100% - 64px),calc(100% - 8px) calc(100% - 64px),calc(100% - 8px) calc(100% - 40px),calc(100% - 20px) calc(100% - 40px),calc(100% - 20px) calc(100% - 24px),calc(100% - 36px) calc(100% - 24px),calc(100% - 36px) calc(100% - 12px),calc(100% - 60px) calc(100% - 12px),calc(100% - 60px) calc(100% - 4px),calc(100% - 90px) calc(100% - 4px),calc(100% - 90px) 100%,90px 100%,90px calc(100% - 4px),60px calc(100% - 4px),60px calc(100% - 12px),36px calc(100% - 12px),36px calc(100% - 24px),20px calc(100% - 24px),20px calc(100% - 40px),8px calc(100% - 40px),8px calc(100% - 64px),0 calc(100% - 64px)); }
body[data-theme=neon] .table-rail,body[data-theme=neon] .felt { clip-path:polygon(0 28px,28px 0,calc(100% - 28px) 0,100% 28px,100% calc(100% - 28px),calc(100% - 28px) 100%,28px 100%,0 calc(100% - 28px)); }
body[data-theme=moon] .felt { background-image:repeating-linear-gradient(140deg,transparent 0 50px,#ffffff0a 50px 54px,#5b4c7810 54px 58px),url('/public/art/pixel-felt.svg'); }
body[data-theme=cafe] .table-rail,body[data-theme=cafe] .felt { clip-path:polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px)); }
.opponent-seat,.pile-caption,.hand-label,.deadwood-inline { color:var(--table-ink); }
.deadwood-inline b { color:var(--table-number); }
.opponent-seat .avatar { border-color:var(--rail-light); background:var(--rail); }
.pile.playable { box-shadow:0 0 0 2px color-mix(in srgb,var(--table-ink) 55%,transparent),3px 4px #0004; }
.player-hand .card.selected { outline-color:var(--table-number); }
.turn-panel { background:var(--surface); border-color:var(--line); color:var(--ink); padding:20px 18px 16px; box-shadow:inset 2px 2px #fff2,4px 4px var(--theme-shadow); }
.panel-score { border-color:var(--line); padding-bottom:14px; }
.panel-score > span { color:var(--muted); gap:5px; }
.panel-score b { color:var(--ink); }
.panel-score i { color:var(--muted); }
.turn-state { margin-top:20px; }
.turn-state h2 { color:var(--gold); font-size:19px; margin-bottom:8px; }
.turn-state p { color:var(--muted); min-height:38px; margin-bottom:14px; }
.turn-actions { gap:10px; }
.turn-actions .button { min-height:42px; }
.turn-tools { margin-top:16px; gap:10px; }
.turn-tools .button { min-height:38px; }
.panel-art { flex:1 0 82px; min-height:82px; max-height:240px; margin:14px -8px 8px; background:var(--panel-art) center bottom / auto 100% no-repeat; image-rendering:pixelated; pointer-events:none; }
.fairness-entry { margin-top:4px; min-height:42px; flex-shrink:0; }
.last-play { color:var(--muted); padding-top:12px; margin:0; min-height:0; font-size:11px; }
dialog { background:var(--surface); color:var(--ink); border-color:var(--line); }
dialog[data-kind=settings] { width:min(690px,calc(100vw - 30px)); }
.dialog-inner > .icon-button:first-child,.setting-row { color:var(--ink); }
.setting-row { margin:17px 0; }
select,.proof-layout input { background:var(--surface-soft); border-color:var(--line); color:var(--ink); }
.theme-settings { border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:20px; }
.theme-heading { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:12px; }
.theme-heading h3 { font-weight:600; margin:0; font-size:14px; }
.theme-current { color:var(--muted); font-size:12px; }
.theme-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.theme-choice { min-width:0; padding:4px; background:var(--surface-soft); border:2px solid transparent; text-align:left; color:var(--ink); }
.theme-choice.chosen { border-color:var(--gold); }
.theme-thumb { position:relative; display:block; height:64px; overflow:hidden; image-rendering:pixelated; background-size:auto 100%; background-position:center; }
.theme-mini-table { position:absolute; left:14%; right:14%; bottom:-7px; height:38px; border:5px solid var(--preview-trim); background:var(--preview-felt) url('/public/art/pixel-felt.svg'); clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% 100%,0 100%); }
.theme-mini-table::after { content:''; position:absolute; width:9px; height:15px; background:#ffefcc; top:7px; left:35%; box-shadow:12px 0 #ffefcc,24px 0 #ffefcc; }
.theme-check { display:none; position:absolute; right:3px; top:3px; width:20px; height:20px; place-items:center; background:var(--surface); color:var(--gold); font-weight:700; }
.theme-choice.chosen .theme-check { display:grid; }
.theme-name { display:block; font-size:12px; padding:8px 3px 3px; white-space:nowrap; }
.card-back-art [data-back-theme] { display:none; }
body[data-theme=navy] [data-back-theme=navy],body[data-theme=forest] [data-back-theme=forest],body[data-theme=coast] [data-back-theme=coast],body[data-theme=neon] [data-back-theme=neon],body[data-theme=club] [data-back-theme=club],body[data-theme=moon] [data-back-theme=moon],body[data-theme=cafe] [data-back-theme=cafe] { display:inline; }
/* Shared secondary surfaces follow each room's light/dark palette. */
.tutorial-art,.teaching-note,.proof-locked,.proof-empty,.proof-equation,.audit-status,.result-player,.points-equation { background:var(--surface-soft); border-color:var(--line); color:var(--ink); }
.tutorial-grid p,.controls-note,.rules-details p,.proof-layout p,.proof-layout details,.proof-record p,.algorithm-name,.proof-layout label,.sealed-seed > span,.fingerprint-pair span,.result-player-head > span,.result-explain,.result-score > span,.record-row small,.stats-row > span,.audit-fields dt,.audit-status p { color:var(--muted); }
.rules-details,.proof-record,.proof-math-column,.record-row,.stats-row { border-color:var(--line); }
.rules-details summary,.proof-layout summary,.proof-record summary,.proof-locked strong,.proof-equation > span { color:var(--ink); }
.sealed-seed code,.fingerprint-pair code,.compactcode,.audit-fields dd { background:var(--surface-soft); color:var(--ink); }
.proof-result-card { background:#204b3a; color:#f2efcf; border-color:#76a68d; }
.proof-result-card.fail { background:#59313f; color:#fff0df; border-color:#c4828b; }
#toast { background:var(--surface); border-color:var(--line); color:var(--ink); box-shadow:4px 4px var(--theme-shadow); }
@media(min-width:851px) {
 .turn-panel { max-height:calc(100% - 38px); }
}
@media(max-width:1050px) and (min-width:851px) {
 .turn-panel { padding:18px 14px 14px; }
 .turn-state { margin-top:16px; }
 .turn-state p { font-size:12px; }
}
@media(max-width:850px) {
 .scene { background-position:center 56px; }
 .turn-panel { position:relative; isolation:isolate; overflow:hidden; padding:12px 16px; gap:9px 14px; }
 .turn-panel::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--panel-art) right bottom / auto 115% no-repeat; opacity:.2; pointer-events:none; image-rendering:pixelated; }
 .panel-score { padding:0 12px 0 0; }
 .panel-score > span { gap:4px; }
 .turn-state { margin:0; }
 .turn-state h2 { font-size:17px; margin-bottom:3px; }
 .turn-state p { min-height:0; margin:0; font-size:12px; }
 .turn-actions .button { min-height:40px; }
 .turn-tools { margin:0; gap:10px; }
 .turn-tools .button { min-height:34px; }
 .panel-art { display:none; }
 .fairness-entry { margin:0; min-height:40px; }
 .last-play { padding:0; font-size:11px; }
}
@media(max-width:520px) {
 .turn-panel { padding:12px; gap:9px 12px; }
 .turn-state h2 { font-size:16px; }
 .theme-picker { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .theme-thumb { height:72px; }
 .theme-heading { align-items:flex-start; }
 .theme-current { max-width:52%; text-align:right; }
 dialog[data-kind=settings] .dialog-inner { padding:26px 20px; }
 .theme-name { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .theme-choice { transition:none; } }
/* The stepped rims cast their own edge; do not leave a rectangular shadow in cut corners. */
body:not([data-theme=navy]) .table-shadow { display:none; }
body:not([data-theme=navy]) .felt { background-image:repeating-linear-gradient(0deg,#00000006 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#ffffff08 0 1px,transparent 1px 4px); background-size:4px 4px; }
body[data-theme=moon] .felt { background-image:repeating-linear-gradient(140deg,transparent 0 50px,#ffffff0a 50px 54px,#5b4c780a 54px 58px),repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 4px); background-size:auto,4px 4px; }
.proof-layout h3,.proof-empty strong,.proof-equation > strong,.proof-locked svg,.result-symbol,.result-kicker,.result-player-head b,.points-equation b,.points-equation > strong,.stats-row strong,.record-row > b,.audit-icon { color:var(--gold); }
.proof-hand > span,.fingerprint-pair dt,.empty-records,.points-equation > span,.points-equation > i,.numbered-meld::before,.result-score i,.record-icon { color:var(--muted); }
.proof-result-card > span { color:#e2e4ce; }
.matchbar { background:color-mix(in srgb,var(--page) 78%,transparent); }
@media(min-width:851px) {
 .turn-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .turn-actions .button { min-width:0; font-size:14px; padding:8px 5px; }
 .turn-actions .button:only-child { grid-column:1 / -1; }
 .panel-art { background-size:contain; background-position:center; }
}