/* Selected C art direction: a navy pixel table with cream playing cards.
   This layer changes presentation only; saved game data and controls stay intact. */
@font-face {
  font-family: "Gin Pixel";
  src: url("/public/art/gin-pixel.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
body[data-skin=pixel-c] {
  --ink: #f2e5c9;
  --muted: #a2b4c4;
  --gold: #e6b46e;
  --gold-light: #ffdc98;
  --line: #42627d;
  --deep: #0a1a2d;
  --green: #123c58;
  --pixel-font: "Gin Pixel", "Courier New", "PingFang SC", "Microsoft YaHei", monospace;
  background: #0b1c2f;
  background-image: repeating-linear-gradient(0deg, #0c1e3100 0 3px, #06132224 3px 4px);
}
.scene, .scene-shade { display: none; }
.topbar { height: 64px; background: #09192b; border-bottom: 2px solid #223c54; padding: 0 3%; }
.brand { font-size: 16px; letter-spacing: 1px; }
.brand small { color: #9cb1c5; font-family: var(--pixel-font); font-size: 12px; letter-spacing: 1px; }
.brand-suit { color: #e4c087; width: 25px; height: 28px; }
.button { border-radius: 0; transition: background .1s, transform .1s; letter-spacing: .3px; }
.primary { background: #e4ba7d; color: #152637; border: 2px solid #ffe1a4; box-shadow: inset -2px -2px #bd8d53, 0 3px #07111e; }
.secondary { background: #203e5c; border: 2px solid #52718e; color: #f5e7cb; box-shadow: inset -2px -2px #142c43, 0 3px #07111e; }
.quiet { color: #c7d3dd; }
.quiet:hover { background: #24415b; }
.icon-button { background: #11263b; color: #e0c7a1; border-color: #45617b; border-radius: 0; }
.text-button { color: #afbdca; }
.button:focus-visible, .icon-button:focus-visible { outline: 2px solid #ffe1a4; outline-offset: 3px; }
.topbar .quiet { font-size: 13px; }
.lobby-left h1 { font-family: var(--font); font-weight: 600; letter-spacing: 7px; text-shadow: 3px 3px #030e1c; }
.intro { color: #afc0d0; }
.hero-cards .display-card { filter: drop-shadow(4px 6px 0 #030d1b99); }
.hero-cards .display-0 { transform: translateX(-77px) rotate(-9deg); }
.hero-cards .display-1 { transform: none; }
.hero-cards .display-2 { transform: translateX(77px) rotate(9deg); }
.start-panel { background: #10243a; border: 2px solid #42607a; box-shadow: inset 2px 2px #5f7b952b, 5px 5px #051121; padding: 30px; }
.start-panel > h2 { font-weight: 600; }
.options-row > span, .seed-row label { color: #bfccd7; }
.segmented { background: #091b2e; border-color: #2d4c66; padding: 3px; gap: 3px; }
.segmented button { color: #afc0cf; }
.segmented button.chosen { background: #345471; color: #fff0d0; box-shadow: inset 1px 1px #7890a760; }
.seed-row { border-color: #36506b; }
.seed-input input { background: #091a2c; border-color: #476782; color: #efe3ce; }
.game-layout {
  width: min(1480px, calc(100% - 48px));
  padding: 16px 0 22px;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: 20px;
}
.matchbar { height: 30px; padding: 0 10px; }
.matchbar > span { color: #a8bdcf; font-size: 12px; }
.game-stage { height: clamp(500px, calc(100svh - 144px), 660px); min-height: 500px; }
.table-shadow { inset: 10px 1px 0 10px; border-radius: 0; filter: none; background: #030e1b; opacity: 1; }
.table-rail {
  inset: 0 0 8px;
  padding: 9px;
  background: #67483d;
  background-image: repeating-linear-gradient(0deg, transparent 0 5px, #bb806317 5px 7px);
  clip-path: polygon(0 12px, 4px 12px, 4px 4px, 12px 4px, 12px 0, calc(100% - 12px) 0, calc(100% - 12px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 4px) calc(100% - 12px), calc(100% - 4px) calc(100% - 4px), calc(100% - 12px) calc(100% - 4px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 12px), 0 calc(100% - 12px));
  box-shadow: inset 0 2px #ac8160, inset 2px 0 #89614a, inset 0 -3px #302b2c, inset -2px 0 #342d2d;
}
.felt {
  background: #123c58 url("/public/art/pixel-felt.svg") repeat;
  background-size: 64px 64px;
  image-rendering: pixelated;
  border: 2px solid #071c30;
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
  box-shadow: inset 0 4px #092a43, inset 4px 0 #0d304a, inset -4px 0 #092a43, inset 0 -4px #194763;
}
.felt-border { inset: 9px; border: 1px solid #6d99b028; clip-path: none; }
.opponent-seat { top: 19px; gap: 8px; min-width: 0; color: #b6c8d7; }
.opponent-seat .avatar { width: 26px; height: 26px; border: 1px solid #738fa3; background: #183852; }
.opponent-seat strong { font-size: 12px; }
.opponent-hand { top: 63px; filter: drop-shadow(2px 4px 0 #07162599); }
.opponent-hand .card { --card-w: 54px; --card-h: 81px; }
.opponent-hand .card:not(:first-child), .opponent-hand.revealed .card:not(:first-child) { margin-left: -2px; }
.draw-zone { top: 38%; gap: 40px; }
.pile { border-radius: 0; }
.pile .card { --card-w: 86px; --card-h: 129px; }
.stock-pile::before, .stock-pile::after { border-radius: 0; background: #d9c8a6; border-color: #3f4050; transform: translate(-3px, -3px); }
.stock-pile::after { transform: translate(-6px, -6px); }
.pile.playable { box-shadow: 0 0 0 2px #b5c6d582, 3px 4px 0 #061626; }
.pile.playable:hover, .pile.playable:focus-visible { box-shadow: 0 0 0 3px #ffdb96, 3px 5px 0 #061626; filter: brightness(1.04); }
.discard-target.drop-ready .pile { outline-color: #a4bfd482; }
.discard-target.drag-over .pile { outline-color: #ffda90; box-shadow: 0 0 0 2px #ffda90, 4px 5px #061626; }
.pile-caption { color: #c5d3de; font-size: 13px; margin-top: 13px; }
.hand-area { left: 24px; right: 24px; bottom: 31px; }
.hand-toolbar { margin-bottom: 4px; }
.hand-label { color: #c7d5df; font-size: 13px; gap: 16px; }
.deadwood-inline { font-size: 12px; color: #afc4d1; }
.deadwood-inline b { font: 22px var(--pixel-font); color: #f2ca8d; }
.player-hand { min-height: 150px; padding-top: 14px; }
.player-hand .card { --card-w: clamp(64px, 9.8cqw, 104px); --card-h: calc(var(--card-w) * 1.5); }
.player-hand .card:not(:first-child) { margin-left: min(7px, calc((100cqw - var(--count) * var(--card-w)) / (var(--count) - 1))); }
.player-hand .card:hover:not(:disabled) { box-shadow: 0 2px #bdab80, 3px 6px #06172bc4; }
.player-hand .card.selected { outline-color: #ffda91; box-shadow: 0 2px #bca16d, 4px 7px #06172bce; }
.player-hand .card.drawn:not(.selected) { box-shadow: 0 2px #bdab80, 0 0 0 2px #b9d4df, 3px 5px #06172bb3; }
.turn-panel {
  background: #0c1e32;
  border: 2px solid #334f68;
  box-shadow: inset 2px 2px #7390a02b, 4px 4px #051323;
  padding: 26px 20px 22px;
  margin-top: 30px;
}
.panel-score { border-color: #36536d; padding-bottom: 24px; }
.panel-score > span { color: #c0ced9; gap: 10px; font-size: 12px; }
.panel-score b { color: #f4cc92; font: 32px var(--pixel-font); }
.panel-score i { color: #637e98; font: 24px var(--pixel-font); }
.turn-state { margin-top: 31px; }
.turn-state h2 { color: #f3d4a2; font-weight: 600; font-size: 20px; }
.turn-state p { color: #b1c3d2; min-height: 58px; font-size: 13px; }
.turn-actions { gap: 12px; }
.turn-actions .button { min-height: 46px; font-size: 15px; padding: 10px; }
.turn-tools { gap: 10px; margin-top: 20px; }
.turn-tools .button { background: #1d3852; border: 2px solid #4e6c86; box-shadow: inset 1px 1px #738fa450, 0 2px #061525; color: #e0e2da; min-height: 40px; font-size: 13px; }
.fairness-entry { background: #142b42; border: 2px solid #6c8292; color: #f3dfb9; box-shadow: inset 1px 1px #93a5ad36, 0 2px #051323; margin-top: 24px; }
.fairness-entry svg { width: 18px; height: 18px; }
.last-play { color: #99b0c2; font-size: 12px; line-height: 1.5; padding-top: 22px; min-height: 48px; }
dialog { background: #10243a; border: 2px solid #66819a; box-shadow: 6px 6px #030f20c0; color: #f0e4cb; }
dialog::backdrop { background: #020c19c9; backdrop-filter: none; }
.dialog-inner > h2 { font-family: var(--font); font-weight: 600; }
.dialog-inner > .icon-button:first-child { color: #b6c8d7; }
.setting-row { color: #c9d5dc; }
select, .proof-layout input { background: #091a2c; border-color: #4a6780; color: #efe4cf; }
.tutorial-art { background: #16364f; }
.teaching-note { background: #29435a; color: #edcf9e; border-color: #d1b27c; }
.tutorial-grid p, .controls-note, .rules-details p { color: #b5c8d5; }
.rules-details, .proof-record, .proof-math-column { border-color: #426079; }
.rules-details summary, .proof-layout summary, .proof-record summary { color: #d8c8ab; }
.proof-locked, .proof-empty, .proof-equation, .audit-status { background: #112c43; }
.sealed-seed code, .fingerprint-pair code, .compactcode, .audit-fields dd { background: #091b2d; color: #d4e0e5; }
.proof-layout p, .proof-layout details, .proof-record p, .algorithm-name { color: #aec1d0; }
.proof-layout label, .sealed-seed > span, .fingerprint-pair span { color: #bacbd7; }
.proof-empty { color: #b7c8d6; }
.proof-result-card { background: #173e43; border-color: #6d9c91; }
.proof-result-card.fail { background: #472d35; border-color: #b77572; }
.proof-equation { color: #e3d2b4; }
.proof-equation > span { color: #a8bfd0; }
#proof-result { scrollbar-color: #65829d #11273c; }
.proof-card-row > span { background: #f4e7cb; color: #132c42; border-radius: 0; }
.proof-card-row > span.red { color: #af4347; }
.result-player { background: #0c1d30; border-color: #3e5f79; }
.result-player.winner { border-color: #c5a16b; }
.points-equation { background: #233b51; border-color: #4e6b7e; }
.result-score b, .result-player-head b, .points-equation b, .points-equation > strong, .stats-row strong, .record-row > b { font-family: var(--pixel-font); }
.result-player-head > span, .result-explain, .result-score > span, .record-row small, .stats-row > span { color: #a9bdcd; }
.record-row, .stats-row { border-color: #3f5a71; }
.audit-fields dt, .audit-status p { color: #aabfcc; }
#toast { background: #102a43; border-color: #8aa4b5; color: #f5e1bb; box-shadow: 4px 4px #04101d; }

@media (min-width: 1500px) and (min-height: 850px) {
  .game-layout { padding-top: 24px; }
  .game-stage { height: 660px; }
  .draw-zone { top: 37%; }
  .hand-area { bottom: 37px; }
}
@media (max-width: 1050px) and (min-width: 851px) {
  .game-layout { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; }
  .turn-panel { padding: 24px 16px 18px; }
  .hand-area { left: 18px; right: 18px; }
  .opponent-hand .card { --card-w: 46px; --card-h: 69px; }
  .opponent-hand .card:not(:first-child) { margin-left: -3px; }
}
@media (max-width: 850px) {
  .topbar { height: 56px; padding: 0 20px; }
  .lobby { min-height: calc(100svh - 56px); padding: 24px 0 28px; }
  .lobby-left h1 { font-size: 46px; }
  .hero-cards { height: 151px; margin-top: 12px; }
  .hero-cards .display-0 { transform: translateX(-63px) rotate(-8deg); }
  .hero-cards .display-2 { transform: translateX(63px) rotate(8deg); }
  .start-panel { padding: 25px; }
  .game-layout { width: calc(100% - 24px); padding: 8px 0 14px; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .matchbar { height: 24px; padding: 0 5px; }
  .game-stage { height: 408px; min-height: 408px; }
  .table-rail { inset: 0 0 6px; padding: 7px; }
  .felt-border { inset: 7px; }
  .opponent-seat { top: 14px; }
  .opponent-seat .avatar { width: 23px; height: 23px; }
  .opponent-hand { top: 49px; }
  .opponent-hand .card { --card-w: 41px; --card-h: 62px; }
  .opponent-hand .card:not(:first-child), .opponent-hand.revealed .card:not(:first-child) { margin-left: -4px; }
  .draw-zone { top: 144px; gap: 31px; }
  .pile .card { --card-w: 67px; --card-h: 101px; }
  .pile-caption { font-size: 12px; margin-top: 10px; }
  .hand-area { left: 16px; right: 16px; bottom: 21px; }
  .hand-toolbar { margin-bottom: 3px; }
  .hand-label { font-size: 12px; gap: 13px; }
  .deadwood-inline { font-size: 11px; }
  .deadwood-inline b { font-size: 20px; }
  .player-hand { min-height: 108px; padding-top: 12px; }
  .player-hand .card { --card-w: clamp(60px, 10cqw, 70px); --card-h: calc(var(--card-w) * 1.5); }
  .turn-panel { margin-top: 0; padding: 13px 16px; gap: 10px 16px; grid-template-columns: 116px minmax(0, 1fr); }
  .panel-score { padding: 0 12px 0 0; }
  .panel-score > span { gap: 5px; font-size: 11px; }
  .panel-score b { font-size: 26px; }
  .panel-score i { font-size: 20px; }
  .turn-state { margin: 0; }
  .turn-state h2 { font-size: 17px; margin-bottom: 3px; }
  .turn-state p { font-size: 12px; min-height: 0; margin-bottom: 0; }
  .turn-actions { gap: 10px; }
  .turn-actions .button { min-height: 40px; padding: 8px; font-size: 14px; }
  .turn-tools { margin: 0; gap: 10px; }
  .turn-tools .button { min-height: 34px; padding: 5px 8px; font-size: 12px; }
  .fairness-entry { min-height: 40px; margin-top: 0; font-size: 13px; }
  .last-play { padding: 0; min-height: 0; margin: 0; font-size: 11px; }
}
@media (max-width: 520px) {
  .topbar { padding: 0 14px; }
  .brand { font-size: 14px; }
  .brand small { font-size: 10px; letter-spacing: 1px; }
  .brand-suit { width: 20px; height: 23px; }
  .header-tools .button { padding: 7px; font-size: 12px; }
  .game-layout { width: calc(100% - 16px); }
  .game-stage { height: 408px; min-height: 408px; }
  .opponent-hand .card { --card-w: 32px; --card-h: 48px; }
  .opponent-hand .card:not(:first-child), .opponent-hand.revealed .card:not(:first-child) { margin-left: -1px; }
  .draw-zone { top: 129px; gap: 30px; }
  .hand-area { left: 13px; right: 13px; bottom: 25px; }
  .player-hand .card { --card-w: 60px; --card-h: 90px; }
  .hand-label { font-size: 12px; gap: 11px; }
  .turn-panel { padding: 12px; gap: 9px 12px; grid-template-columns: 108px minmax(0, 1fr); }
  .turn-state h2 { font-size: 16px; }
  .lobby-left h1 { font-size: 43px; letter-spacing: 5px; }
  .hero-cards .display-0 { transform: translateX(-57px) rotate(-8deg); }
  .hero-cards .display-2 { transform: translateX(57px) rotate(8deg); }
  .start-panel { padding: 23px 20px; }
}