/* A small wooden tabletop, painted pieces and polished red resin dice.
   This last-loaded skin changes paint only: the viewport grid, wheel geometry,
   seat positions and hit-target sizes remain owned by table-layout.css. */
.depth-theme {
  color-scheme: dark;
  --bg: #103b38;
  --surface: #185951;
  --line: #b8e5ce29;
  --text: #fff4dc;
  --muted: #bddacc;
  --gold: #ffcd83;
  --gold-dark: #bd7135;
  --green: #c6edd3;
  --wood-edge: #94562f;
  --wood-light: #efb877;
  --piece-depth: 3px;
  background:
    radial-gradient(ellipse at 12% 0, #8b9e6d36, transparent 57%),
    radial-gradient(ellipse at 96% 90%, #05272580, transparent 64%),
    linear-gradient(155deg, #204d46, #103b38 52%, #0e302f);
  color: var(--text);
}

/* Thin inward layers read as a rounded wooden rail without taking table space. */
.depth-theme .table {
  border-color: #cc9158;
  background:
    radial-gradient(ellipse at 43% 26%, #63c4ab35, transparent 66%),
    linear-gradient(156deg, #29998a, #14786e 52%, #0e5d58);
  box-shadow:
    inset 0 1px 0 #ffe2af,
    inset 0 0 0 3px var(--wood-light),
    inset 0 0 0 5px var(--wood-edge),
    inset 0 0 0 6px #4c6a4e,
    inset 0 11px 19px #073f3b2b,
    0 4px 0 #6b402b,
    0 8px 15px #061e232b;
}
.depth-theme .table::before {
  inset: 5px;
  border-color: #ffe5b04a;
  border-radius: 12px;
  box-shadow: inset 0 1px 2px #063c3933;
}
.depth-theme .table-arena::before {
  content: '';
  position: absolute;
  inset: 7% 5%;
  z-index: -1;
  pointer-events: none;
  border: 1px solid #b7edce2e;
  border-radius: 48%;
  background: radial-gradient(ellipse at 42% 27%, #89d1b216, #07594f12 79%);
  box-shadow: inset 0 2px 7px #053f3c1f, 0 1px 0 #d4f5d512;
}
.depth-theme .table-label,
.depth-theme .stage-eyebrow { color: #dbf3dd; text-shadow: 0 1px 1px #084a4280; }
.depth-theme .round-label {
  color: #ffe9c2;
  border-color: #d7b57688;
  background: linear-gradient(#245c4a, #1c4a3f);
  box-shadow: inset 0 1px 0 #d9eccb22, 0 1px 0 #083e37;
}
.depth-theme .center-stage h2,
.depth-theme .bid-number {
  color: #fff0c9;
  text-shadow: 0 2px 0 #78532b, 0 3px 5px #063b3540;
}
.depth-theme .bid-unit,
.depth-theme .turn-message { color: #f3f4d9; text-shadow: 0 1px 1px #073d3980; }
.depth-theme .turn-light { background: #ffe19c; box-shadow: 0 1px 0 #805c34; }
.depth-theme .turn-clock {
  color: #503a26;
  border-color: #f7dda4;
  background: linear-gradient(#ffeabd, #edc588);
  box-shadow: inset 0 1px 0 #fff6da, 0 1px 0 #8d6541;
  text-shadow: none;
}
.depth-theme .turn-clock.urgent {
  color: #6c3023;
  background: linear-gradient(#ffdfbf, #f6b495);
  border-color: #ffdcc0;
  box-shadow: inset 0 1px 0 #fff0d8, 0 1px 0 #9b573d;
}

/* Small seat plaques stay quiet enough for each cup and called bid to stand out. */
.depth-theme .seat-card {
  color: #4c392b;
  border-color: #f6daa7;
  background: linear-gradient(155deg, #fff2d3, #edd3a6);
  box-shadow: inset 0 1px 0 #fffbed, inset 0 -1px 0 #c9986266,
    0 2px 0 #986a41, 0 4px 5px #083b3833;
}
.depth-theme .seat-name { color: #493728; font-weight: 600; }
.depth-theme .seat-role { color: #6c634b; }
.depth-theme .seat-order { color: #ffe8ba; text-shadow: 0 1px 1px #184d3e; }
.depth-theme .seat-avatar {
  color: #315c4a;
  background: linear-gradient(145deg, #d4edd0, #89c3a5);
  box-shadow: inset 0 1px 0 #f5ffea, inset 0 -1px 1px #5b9a7766, 0 1px 0 #9272494d;
}
.depth-theme .seat:nth-child(2n) .seat-avatar {
  color: #8a4d28;
  background: linear-gradient(145deg, #ffe1af, #e7aa73);
}
.depth-theme .seat:nth-child(3n) .seat-avatar {
  color: #36536d;
  background: linear-gradient(145deg, #dcecf0, #9fbdd7);
}
.depth-theme .seat.is-you .seat-card {
  background: linear-gradient(145deg, #e1f4d4, #b9dfb9);
  border-color: #e4f6d0;
  box-shadow: inset 0 1px 0 #f5ffe6, inset 0 -1px 0 #69986c55,
    0 2px 0 #63967a, 0 4px 5px #07393238;
}
.depth-theme .seat.is-turn .seat-card {
  background: linear-gradient(150deg, #fff4c8, #ffd28d);
  border-color: #fff2c9;
  box-shadow: inset 0 1px 0 #fffced, 0 2px 0 #a87738, 0 0 0 2px #ffdd967a;
}
.depth-theme .seat.is-turn .seat-role { color: #7b5429; }
.depth-theme .seat.is-empty .seat-card {
  color: #c2e0cb;
  border-color: #aad5b469;
  background: linear-gradient(#1b776c66, #135e564d);
  box-shadow: inset 0 1px 3px #063a3833;
}
.depth-theme .seat.is-empty .seat-name { color: #d3e9d3; }
.depth-theme .seat.is-empty .seat-avatar { color: #c2e0cb; background: transparent; box-shadow: none; }
.depth-theme .seat .score-dots i { border-color: #98774499; background: #b0915d26; box-shadow: inset 0 1px 1px #85643240; }
.depth-theme .seat .score-dots i.won { border-color: #c07b29; background: #eaa23f; box-shadow: inset 0 1px 0 #ffedaf; }
.depth-theme .dice-cup { filter: drop-shadow(0 2px 1px #06342d66); }
.depth-theme .seat .seat-bid,
.depth-theme .seat.is-you .seat-bid {
  color: #503c29;
  border-color: #f3d29a;
  background: linear-gradient(#fff0ca, #f2d5a1);
  box-shadow: inset 0 1px 0 #fff9e2, 0 2px 0 #97704a, 0 3px 3px #073f3526;
}
.depth-theme .seat .seat-bid.no-call {
  color: #d9efd4;
  background: linear-gradient(#296f5c, #205947);
  border-color: #88b499;
  box-shadow: inset 0 1px 0 #afd0a833, 0 1px 0 #0c473d;
}
.depth-theme .seat-remove { color: #584130; border-color: #edc89a; background: #f8e5c4; }

/* One resin-red finish across private hands, called bids, wheels and results. */
.depth-theme .die,
.depth-theme .your-hand .die,
.depth-theme .current-bid .die,
.depth-theme .reveal-player .die,
.depth-theme .bid-wheel .die,
.depth-theme .bid-wheel .is-selected .die {
  background: linear-gradient(145deg, #ed4c3e 3%, #d32d30 54%, #a91928);
  box-shadow: inset 1px 2px 1px #ffb1a58c, inset -1px -1px 1px #780d2280,
    0 var(--piece-depth) 0 #7e1722, 0 4px 5px #073b3440;
}
.depth-theme .seat .seat-bid .die {
  background: linear-gradient(145deg, #e9493d, #c5272b 60%, #a51925);
  box-shadow: inset 1px 1px 0 #ffb1a58c, 0 1px 0 #7e1722;
}
.depth-theme .pip,
.depth-theme .bid-wheel .pip,
.depth-theme .seat .seat-bid .pip {
  background: #fffdf6;
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 0 #8d1a283d;
}
.depth-theme .die.one .pip { background: #fffdf6; box-shadow: inset 0 1px 0 #ffffff, 0 1px 0 #8d1a283d; }
.depth-theme .die.matched { outline-color: #efb454; }
.depth-theme .die.unmatched { opacity: .48; }
.depth-theme .your-hand .die-placeholder {
  color: #a4d3b891;
  background: linear-gradient(#0e655c66, #185b5033);
  border-color: #7dc2a740;
  box-shadow: inset 0 2px 3px #07483f66, 0 1px 0 #a5d4b333;
}
.depth-theme .your-hand { position: relative; isolation: isolate; }
.depth-theme .your-hand::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(92%, 260px);
  height: 100%;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border: 1px solid #6a82765e;
  border-radius: 50% / 38%;
  background: radial-gradient(ellipse at 45% 18%, #34574d, #192f2c 73%, #102421);
  box-shadow: inset 0 2px 3px #050f10a6, inset 0 -1px 0 #87a18c4d,
    0 2px 0 #0c2422, 0 3px 4px #052b292b;
}

/* The two wheels sit in one recessed tray, with a cream selection strip. */
.depth-theme .table #room-panel.action-panel {
  border-color: #c9d9b13d;
  background: linear-gradient(#11584b08, #0a45351a);
  box-shadow: none;
}
.depth-theme .bid-wheel-labels { color: #e3efd0; text-shadow: 0 1px 0 #164d3b; }
.depth-theme .bid-wheels {
  border-color: #7db99c;
  background: linear-gradient(#175c51, #236f5e 48%, #154f44);
  box-shadow: inset 0 3px 5px #083d3666, inset 0 -1px 0 #b0d4b62e, 0 1px 0 #cdf0c826;
}
.depth-theme .wheel-selection {
  border-color: #f7deb1;
  background: linear-gradient(#fff0cc, #eacb99);
  box-shadow: inset 0 1px 0 #fff8e5, 0 2px 3px #0b403533;
}
.depth-theme .wheel-selection::after { background: #b3956273; }
.depth-theme .wheel-number { color: #e9eed3; text-shadow: 0 1px 1px #0d493d; }
.depth-theme .wheel-unit { color: #cce0c6; }
.depth-theme .wheel-row.is-selected .wheel-number,
.depth-theme .wheel-row.is-selected .wheel-unit { color: #65442b; text-shadow: 0 1px 0 #fff6df; }
.depth-theme .bid-wheels.is-locked { border-color: #ffe0a1; box-shadow: inset 0 3px 5px #083d3666, 0 0 0 1px #f6ca7e; }
.depth-theme #precall-hint { color: #d1e5c4; text-shadow: 0 1px 0 #174b3f; }
.depth-theme #precall-hint.is-locked { color: #ffe4a6; }
.depth-theme #precall-hint.invalid { color: #ffe0c6; }

/* Shallow bevels give the 44px controls depth without expanding their boxes. */
.depth-theme .primary-button,
.depth-theme .join-button {
  color: #623b22;
  border-color: #ffdfa0;
  background: linear-gradient(#ffe4a1, #ffc46f 57%, #efac58);
  box-shadow: inset 0 2px 0 #fff1c7, inset 0 -2px 0 #d18a3f,
    0 2px 0 #88532c;
  text-shadow: 0 1px 0 #ffebbd;
}
.depth-theme .primary-button:hover:not(:disabled),
.depth-theme .join-button:hover:not(:disabled) { background: linear-gradient(#ffebb3, #ffd08b 57%, #f4b564); }
.depth-theme .challenge-button {
  color: #284f42;
  border-color: #d6eac0;
  background: linear-gradient(#e6f2ce, #bddbb2);
  box-shadow: inset 0 2px 0 #f5ffe1, inset 0 -2px 0 #8dae89, 0 2px 0 #3d705c;
  text-shadow: 0 1px 0 #e7f4d4;
}
.depth-theme .challenge-button:hover:not(:disabled) { background: linear-gradient(#f0f8da, #cce5bd); border-color: #edf5d5; }
.depth-theme #challenge {
  color: #75462f;
  border-color: #ffdab2;
  background: linear-gradient(#ffe9ca, #efc295);
  box-shadow: inset 0 2px 0 #fff4dc, inset 0 -2px 0 #ca936e, 0 2px 0 #936446;
  text-shadow: 0 1px 0 #ffeccd;
}
.depth-theme #challenge:hover:not(:disabled) { background: linear-gradient(#fff0d7, #f6cfa8); }
.depth-theme #precall-toggle[aria-pressed=true] {
  color: #684626;
  border-color: #ffe4ac;
  background: linear-gradient(#ffe8b3, #ebc482);
  box-shadow: inset 0 2px 0 #fff3d1, inset 0 -2px 0 #c09352, 0 2px 0 #927040;
}
.depth-theme .primary-button:disabled,
.depth-theme .challenge-button:disabled,
.depth-theme .join-button:disabled {
  opacity: .55;
  box-shadow: inset 0 1px 0 #fff0cb66, inset 0 -1px 0 #6d795a80;
  text-shadow: none;
}
.depth-theme .primary-button:not(:disabled):active,
.depth-theme .challenge-button:not(:disabled):active,
.depth-theme .join-button:not(:disabled):active {
  box-shadow: inset 0 1px 3px #6a47222e, inset 0 -1px 0 #95714566;
}

/* The header and secondary sheets use the same small, tangible pieces. */
.depth-theme .topbar { border-color: #cce6ca2b; }
.depth-theme .brand-icon {
  color: #ae6b37;
  background: linear-gradient(145deg, #fff4d7, #f1d2a1);
  box-shadow: inset 0 1px 0 #fffcef, 0 2px 0 #ab8055;
}
.depth-theme .brand h1 { color: #fff1d1; text-shadow: 0 2px 0 #0a3a34; }
.depth-theme .brand p,
.depth-theme .game-meta,
.depth-theme .footer { color: #c0d9bd; }
.depth-theme .mode-tag { color: #d5ebc9; background: #326653; box-shadow: inset 0 1px 0 #abd4b21a; }
.depth-theme .quiet-button {
  color: #e9efd6;
  border-color: #91b89b69;
  background: linear-gradient(#3f7661, #2a5b4a);
  box-shadow: inset 0 1px 0 #cce6bd29, 0 1px 0 #0b3a33;
}
.depth-theme .quiet-button:hover { background: linear-gradient(#4a8069, #34644f); }
.depth-theme .text-button { color: #d0e2c1; }
.depth-theme .room-tools #leave-room { color: #d0e2c1; }
.depth-theme .history-icon.has-result::after { background: #ffcb7d; box-shadow: 0 0 0 1px #624b31; }
.depth-theme .action-panel,
.depth-theme .dialog {
  color: #4a4934;
  border-color: #f4d7a7;
  background: linear-gradient(150deg, #fff4dc, #efdfba);
  box-shadow: inset 0 2px 0 #fffcee, 0 4px 0 #a77e4c, 0 12px 26px #082b3540;
}
.depth-theme .dialog::backdrop { background: #082e3170; backdrop-filter: blur(4px); }
.depth-theme .action-panel h2,
.depth-theme .dialog h2,
.depth-theme .rules-list strong { color: #4f573e; }
.depth-theme .dialog > p,
.depth-theme .dialog .result-panel p,
.depth-theme .dialog .rules-list p,
.depth-theme .dialog .match-score,
.depth-theme .form-label,
.depth-theme .form-hint,
.depth-theme .action-description { color: #647052; }
.depth-theme .section-index { color: #7f7857; }
.depth-theme .rules-list { color: #9e652d; }
.depth-theme .rules-list li { color: #a4773c; }
.depth-theme .status-pill { color: #50724e; background: #dce6c6; }
.depth-theme .status-pill.your-turn { color: #925c25; background: #f4d29a; }
.depth-theme .room-input {
  color: #eff5da;
  border-color: #729f78;
  background: linear-gradient(#2e604d, #3b6e55);
  box-shadow: inset 0 2px 3px #163f343b, 0 1px 0 #fff8df;
}
.depth-theme .room-input::placeholder { color: #c1d0b4; }
.depth-theme .form-divider { color: #848164; }
.depth-theme .form-divider::before,
.depth-theme .form-divider::after { background: #b8b58c66; }
.depth-theme .room-invite { background: #dfecd2; border-color: #9ebe93; box-shadow: inset 0 1px 2px #92b49333; }
.depth-theme .room-invite strong { color: #667243; }
.depth-theme .room-invite span { color: #727957; }
.depth-theme .close-button {
  color: #617051;
  border-color: #bdc89d;
  background: linear-gradient(#edf1d8, #d4dfba);
  box-shadow: inset 0 1px 0 #fffee7, 0 1px 0 #a0b487;
}
.depth-theme .activity-tabs button { color: #62704f; border-color: #bacb9f; background: #dde7c7; box-shadow: inset 0 1px 0 #faffec; }
.depth-theme .activity-tabs button[aria-pressed=true] { color: #6d4f29; border-color: #d6b177; background: linear-gradient(#ffe5ae, #edc88d); }
.depth-theme .history-dialog .history-panel { color: #50604b; }
.depth-theme .history-panel h2 { color: #4e5f44; }
.depth-theme .history-panel .panel-heading > span,
.depth-theme .history-panel .history-empty { color: #798468; }
.depth-theme .history-panel li { color: #617357; border-color: #9ba48033; }
.depth-theme .history-panel li > strong { color: #715a35; }
.depth-theme .history-avatar { color: #577657; background: #d3e3bf; border-color: #a8bd90; }
.depth-theme .history-panel li:first-child .history-avatar { color: #956133; border-color: #cba46f; background: #f4dfb5; }
.depth-theme .result-summary { color: #4f634c; background: #dce7c9; border-color: #aec294; box-shadow: inset 0 1px 2px #819f6c24; }
.depth-theme .result-summary strong { color: #a36b2c; }
.depth-theme .reveal-player-name { color: #5d6b50; }
.depth-theme .reveal-player-name strong { color: #a16e33; }
.depth-theme .dialog .die.matched { outline-color: #a87933; }
.depth-theme .network-notice,
.depth-theme .mp-toast {
  color: #664a2c;
  border-color: #ffe7b6;
  background: linear-gradient(#fff1cc, #f1d9a9);
  box-shadow: inset 0 1px 0 #fff9e5, 0 3px 0 #a88253, 0 6px 13px #082f3233;
}
.depth-theme button:focus-visible,
.depth-theme a:focus-visible,
.depth-theme input:focus-visible,
.depth-theme select:focus-visible,
.depth-theme .bid-wheel:focus-visible { outline: 2px solid #ffe7ac; outline-offset: 2px; }
.depth-theme .dialog button:focus-visible,
.depth-theme .dialog a:focus-visible { outline-color: #658660; }

/* On the shortest screens, bevels become shallower, not larger or busier. */
@media (max-height: 560px) {
  .depth-theme { --piece-depth: 2px; }
  .depth-theme .table {
    box-shadow: inset 0 1px 0 #ffe2af, inset 0 0 0 2px #efb877,
      inset 0 0 0 3px #94562f, 0 2px 0 #6b402b;
  }
  .depth-theme .table::before { inset: 3px; border-color: #fce0b029; }
  .depth-theme .seat-card,
  .depth-theme .seat.is-you .seat-card { box-shadow: inset 0 1px 0 #fffbee, 0 1px 0 #947549; }
  .depth-theme .seat .seat-bid,
  .depth-theme .seat.is-you .seat-bid { box-shadow: inset 0 1px 0 #fff9e2, 0 1px 0 #97704a; }
}