/* frontend/dibs.css — DIBS board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Skewers / Cee-lo / Toad Toss / Line Up / Caravan precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's flat skin (docs/design/Batch 5/Dibs.dc.html,
 * `[data-skin="flat"]`). ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD: the setup card sits
 * outside `.db-root`. Seats are SHAPE + LETTER first (`.db-badge[data-o]` clip-paths), colour second.
 *
 * ── 🎨 THE PIXEL SKIN COMES LATER, AS A TOGGLE (mock F9) ──────────────────────
 * Radii and fonts are variables (`--db-r*`, `--db-ui`): the pixel direction is a class that redefines
 * them and colours, and NOTHING ELSE.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * ONE DOM, two arrangements by CSS grid areas. Every row and column is a FIXED size except the card
 * band (desktop: the `1fr` row; phone: the `1fr` row, three stacked cards). Four seats and four lanes
 * per card always exist. Every text box FILLS its slot (a centred text box is a moving box — the Toad
 * Toss finding). Feedback changes colour, glow or a transform — never size or spacing.
 */

#dibs-game-screen, .db-root {
  --db-txt: #e9f0ee; --db-dim: rgba(233, 240, 238, .58); --db-dimmer: rgba(233, 240, 238, .38); --db-on: #0c1112;
  --db-panel: rgba(255, 255, 255, .05); --db-line: rgba(232, 240, 238, .15);
  --db-cardBg: rgba(255, 255, 255, .045); --db-cardLine: rgba(232, 240, 238, .17);
  --db-lane: rgba(255, 255, 255, .035); --db-laneYou: rgba(126, 222, 222, .09);
  --db-accent: #6fdcd8; --db-glow: rgba(126, 226, 226, .38); --db-legal: rgba(126, 226, 226, .13);
  --db-warn: #e9c46a; --db-warnGlow: rgba(240, 201, 113, .34); --db-warnBg: rgba(240, 201, 113, .12);
  --db-good: #6fd49a; --db-danger: #e8806a; --db-dangerBg: rgba(235, 124, 92, .14);
  --db-c0: #6fb0e8; --db-c1: #e89a6f; --db-c2: #74c98f; --db-c3: #d9c060;
  --db-print: rgba(255, 255, 255, .07); --db-printLine: rgba(233, 240, 238, .32); --db-ink: #eaf1ef;
  --db-ghost: rgba(233, 240, 238, .24); --db-empty: rgba(233, 240, 238, .24);
  --db-rollBg: linear-gradient(180deg, #7fe3de, #4fb9b4); --db-rollTxt: #052220; --db-rollLine: #9ceae6;
  --db-recallBg: rgba(255, 255, 255, .08); --db-recallLine: rgba(233, 240, 238, .4);
  --db-bannerBg: linear-gradient(180deg, #242c2f, #161c1e);
  --db-ui: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --db-rBox: 14px; --db-rCard: 12px; --db-rLane: 8px; --db-rDie: 6px;
}

@keyframes db-turn { 0%, 100% { box-shadow: 0 0 0 2px var(--sc, var(--db-accent)) } 50% { box-shadow: 0 0 0 2px var(--sc, var(--db-accent)), 0 0 14px -2px var(--sc, var(--db-accent)) } }
@keyframes db-think { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
@keyframes db-lit { 0%, 100% { box-shadow: 0 0 0 2px var(--db-accent), 0 0 10px var(--db-glow) } 50% { box-shadow: 0 0 0 2px var(--db-accent), 0 0 18px var(--db-glow) } }
@keyframes db-flipin { 0% { transform: perspective(1400px) rotateY(-88deg); opacity: .4 } 100% { transform: perspective(1400px) rotateY(0); opacity: 1 } }
@keyframes db-home { 0% { transform: translateY(-10px) scale(.8); opacity: .3 } 100% { transform: none; opacity: 1 } }
@keyframes db-rise { 0% { opacity: 0; transform: translate(-50%, 10px) } 100% { opacity: 1; transform: translate(-50%, 0) } }

/* ── setup card (the app's own surface) ─────────────────────────────────── */
.db-setup-card { max-width: 540px; margin: 1rem auto; display: flex; flex-direction: column; gap: 10px; }
.db-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.db-setup-title { margin: 0; font-size: 28px; }
.db-setup-blurb, .db-setup-hint { margin: 0; line-height: 1.5; font-size: 14px; }
.db-setup-hint { opacity: .75; font-size: 13px; }
.db-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.db-setup-lab { font-weight: 700; font-size: 13px; min-width: 52px; }
.db-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.db-opt { width: 40px; height: 36px; border-radius: 10px; border: 1px solid var(--db-line); background: rgba(255, 255, 255, .06); color: inherit; font-weight: 800; cursor: pointer; }
.db-opt[data-on="1"] { border-color: var(--db-accent); color: var(--db-accent); box-shadow: 0 0 12px -4px var(--db-accent); }
.db-start { height: 48px; border: 0; border-radius: 12px; background: var(--db-rollBg); color: var(--db-rollTxt); font-weight: 800; font-size: 16px; cursor: pointer; }
@media (hover: hover) { .db-start:hover, .db-opt:hover { filter: brightness(1.1); } }

/* ── identity: SHAPE + LETTER ───────────────────────────────────────────── */
.db-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--bs, 18px); height: var(--bs, 18px);
  font: 800 calc(var(--bs, 18px) * .5)/1 var(--db-ui); font-style: normal; color: var(--db-on); background: var(--sc);
}
.db-badge[data-o="0"] { --sc: var(--db-c0); border-radius: 50%; }
.db-badge[data-o="1"] { --sc: var(--db-c1); border-radius: 18%; }
.db-badge[data-o="2"] { --sc: var(--db-c2); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.db-badge[data-o="3"] { --sc: var(--db-c3); clip-path: polygon(24% 3%, 76% 3%, 100% 50%, 76% 97%, 24% 97%, 0 50%); }
.db-seat[data-o="0"] { --sc: var(--db-accent); }
.db-seat[data-o="1"] { --sc: var(--db-c1); }
.db-seat[data-o="2"] { --sc: var(--db-c2); }
.db-seat[data-o="3"] { --sc: var(--db-c3); }

/* ── printed pips (card faces — deliberately NOT dice) ───────────────────── */
.db-pips { position: absolute; inset: 0; color: var(--pc, var(--db-ink)); font-style: normal; pointer-events: none; }
.db-pips b { position: absolute; display: none; width: 21%; height: 21%; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%); }
.db-pips[data-v="1"] b:nth-child(1) { display: block; left: 50%; top: 50%; }
.db-pips[data-v="2"] b:nth-child(1), .db-pips[data-v="3"] b:nth-child(1), .db-pips[data-v="4"] b:nth-child(1), .db-pips[data-v="5"] b:nth-child(1) { display: block; left: 28%; top: 28%; }
.db-pips[data-v="2"] b:nth-child(2), .db-pips[data-v="3"] b:nth-child(3), .db-pips[data-v="4"] b:nth-child(4), .db-pips[data-v="5"] b:nth-child(5) { display: block; left: 72%; top: 72%; }
.db-pips[data-v="3"] b:nth-child(2), .db-pips[data-v="5"] b:nth-child(3) { display: block; left: 50%; top: 50%; }
.db-pips[data-v="4"] b:nth-child(2), .db-pips[data-v="5"] b:nth-child(2) { display: block; left: 72%; top: 28%; }
.db-pips[data-v="4"] b:nth-child(3), .db-pips[data-v="5"] b:nth-child(4) { display: block; left: 28%; top: 72%; }
.db-pips[data-v="6"] b { display: block; left: 27%; }
.db-pips[data-v="6"] b:nth-child(even) { left: 73%; }
.db-pips[data-v="6"] b:nth-child(1), .db-pips[data-v="6"] b:nth-child(2) { top: 26%; }
.db-pips[data-v="6"] b:nth-child(3), .db-pips[data-v="6"] b:nth-child(4) { top: 50%; }
.db-pips[data-v="6"] b:nth-child(5), .db-pips[data-v="6"] b:nth-child(6) { top: 74%; }

/* ── the board root (phone first: the mock's 384 × 812 arrangement) ─────── */
.db-root {
  --db-face: 22px; --db-facesH: 24px; --db-you: 24px; --db-youH: 26px; --db-opp: 12px; --db-oppH: 14px;
  --db-tray: 38px; --db-colW: 28px; --db-colGap: 4px; --db-gutW: 22px; --db-chipW: 42px;
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--db-phone-h, 740px); padding: 9px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 26px 44px minmax(0, 1fr) 54px 46px;
  grid-template-areas: "head" "seats" "cards" "tray" "btns";
  gap: 7px;
  background: radial-gradient(120% 100% at 50% -12%, #20282b 0%, #161d1f 55%, #0e1314 100%);
  color: var(--db-txt); font-family: var(--db-ui);
  border-radius: var(--db-rBox); box-shadow: inset 0 0 0 1px var(--db-line);
}
.db-root *, .db-root *::before, .db-root *::after { box-sizing: border-box; }
.db-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.db-root i, .db-root em { font-style: normal; }

.db-head { grid-area: head; display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.db-turn {
  flex: none; width: 92px; height: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 4px;
  font: 800 8.5px/1 var(--db-ui); letter-spacing: .08em; background: rgba(255, 255, 255, .06); color: var(--db-txt); box-shadow: 0 0 0 1.5px var(--db-line);
}
.db-turn[data-you="1"] { background: var(--db-legal); color: var(--db-accent); box-shadow: 0 0 0 1.5px var(--db-accent); }
.db-brand { flex: none; font: 800 12px/1 var(--db-ui); letter-spacing: .2em; color: var(--db-dim); }
.db-status { flex: 1 1 auto; min-width: 0; display: block; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 9px/26px var(--db-ui); color: var(--db-dim); }
.db-target { display: none; }
.db-menu { flex: none; width: 30px; height: 22px; border: 0; border-radius: 999px; cursor: pointer; font-size: 13px; background: rgba(255, 255, 255, .07); color: var(--db-txt); box-shadow: inset 0 0 0 1px var(--db-line); }
@media (hover: hover) { .db-menu:hover { box-shadow: inset 0 0 0 1px var(--db-accent); color: var(--db-accent); } }

/* ── seats (display, not controls) ─────────────────────────────────────── */
.db-seats { grid-area: seats; display: flex; gap: 5px; min-width: 0; min-height: 0; }
.db-seat {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 4px 5px; border-radius: var(--db-rLane); background: var(--db-panel); box-shadow: 0 0 0 1px var(--db-line);
}
.db-seat[data-empty="1"] { background: transparent; box-shadow: none; border: 1px dashed var(--db-empty); align-items: center; }
.db-sopen { font: 700 8px/1 var(--db-ui); letter-spacing: .1em; color: var(--db-dimmer); }
.db-seat[data-turn="1"] { background: var(--db-laneYou); animation: db-turn 1.6s ease-in-out infinite; }
.db-srow { display: flex; align-items: center; gap: 4px; height: 15px; --bs: 14px; }
.db-sname { flex: 1 1 auto; min-width: 0; font: 800 9px/1 var(--db-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-skind { flex: none; font: 800 7.5px/1 var(--db-ui); letter-spacing: .06em; color: var(--db-dim); }
.db-seat[data-o="0"] .db-skind { color: var(--db-c0); }
.db-sline { display: flex; align-items: baseline; gap: 2px; height: 16px; }
.db-sscore { display: inline-block; width: 2ch; text-align: left; font: 800 15px/1 var(--db-ui); }
.db-s40 { font: 800 7.5px/1 var(--db-ui); color: var(--db-dim); }
/* the won count FILLS the rest of its row: an auto-width box slid as "1 card" became "2 cards" (the locked walk, 360) */
.db-swon { flex: 1 1 auto; min-width: 0; text-align: right; font: 700 7.5px/1 var(--db-ui); color: var(--db-dim); white-space: nowrap; overflow: hidden; }
.db-sbar {
  height: 4px; flex: none; border-radius: 2px; overflow: hidden; position: relative;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .55) 0 1.5px, transparent 1.5px 12.5%), rgba(255, 255, 255, .1);
}
.db-sbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--db-txt); transition: width .5s ease; }
.db-seat[data-o="0"] .db-sbar i { background: var(--db-c0); }
.db-snote { display: none; }

/* ── the cards ─────────────────────────────────────────────────────────── */
.db-cards { grid-area: cards; min-height: 0; display: flex; flex-direction: column; gap: 7px; }
.db-cardw { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; }
.db-card {
  position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 7px 8px;
  border-radius: var(--db-rCard); background: var(--db-cardBg); box-shadow: 0 0 0 1.5px var(--db-cardLine);
  transition: box-shadow .15s, background .15s;
}
.db-card[data-flip="1"] { animation: db-flipin .52s cubic-bezier(.2, .7, .3, 1) both; }
.db-card[data-fresh="1"] { box-shadow: 0 0 0 1.5px var(--db-accent); }
.db-root[data-lock="0"] .db-card[data-lit="1"] { cursor: pointer; box-shadow: 0 0 0 2px var(--db-accent), 0 0 14px -4px var(--db-glow); }
@media (hover: hover) { .db-root[data-lock="0"] .db-card[data-lit="1"]:hover { background: rgba(126, 226, 226, .07); box-shadow: 0 0 0 2px var(--db-accent), 0 0 22px -2px var(--db-glow); } }
.db-root[data-lock="0"] .db-card[data-lit="1"]:active { transform: translateY(1px); filter: brightness(.94); }
.db-chead { flex: none; height: 16px; display: flex; align-items: center; gap: 5px; overflow: hidden; }
.db-cslot { flex: none; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--db-panel); box-shadow: 0 0 0 1px var(--db-line); font: 800 9px/1 var(--db-ui); color: var(--db-dim); }
.db-cname { flex: 1 1 auto; min-width: 0; font: 800 9.5px/1 var(--db-ui); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-cpts { flex: none; width: 46px; height: 15px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font: 800 9px/1 var(--db-ui); letter-spacing: .04em; box-shadow: 0 0 0 1.5px var(--db-line); }
.db-cpts[data-top="1"] { color: var(--db-warn); background: var(--db-warnBg); box-shadow: 0 0 0 1.5px var(--db-warn); }

.db-lane { flex: none; height: var(--db-oppH); display: flex; align-items: center; gap: 6px; padding: 0 4px; border-radius: var(--db-rLane); background: var(--db-lane); }
.db-lane.db-faces { height: var(--db-facesH); background: transparent; }
.db-lane[data-you="1"] { height: var(--db-youH); background: var(--db-laneYou); }
.db-lane[data-empty="1"] { opacity: .35; background: transparent; }
.db-lane[data-one="you"] { box-shadow: 0 0 0 1.5px var(--db-accent); }
.db-lane[data-one="bot"] { box-shadow: 0 0 0 1.5px var(--db-warn); }
.db-gut { flex: none; width: var(--db-gutW); display: flex; align-items: center; justify-content: center; --bs: 12px; }
.db-lane[data-you="1"] .db-gut { --bs: 18px; }
.db-cols { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--db-colGap); }
.db-col { flex: none; width: var(--db-colW); display: flex; align-items: center; justify-content: center; }
.db-chip { flex: none; width: var(--db-chipW); text-align: right; font: 800 8px/1 var(--db-ui); color: var(--db-dim); white-space: nowrap; overflow: hidden; }
.db-chip[data-kind="you"] { color: var(--db-accent); }
.db-chip[data-kind="warn"] { color: var(--db-warn); }
.db-chip[data-kind="good"] { color: var(--db-good); }

.db-face { position: relative; flex: none; display: block; width: var(--db-face); height: var(--db-face); border-radius: var(--db-rDie); background: var(--db-print); box-shadow: 0 0 0 1.5px var(--db-printLine); }
.db-face[data-blank="1"] { background: transparent; box-shadow: none; }
.db-spot { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: var(--db-opp); height: var(--db-opp); border-radius: 50%; }
.db-lane[data-you="1"] .db-spot { width: var(--db-you); height: var(--db-you); border-radius: var(--db-rDie); }
.db-spot[data-st="blank"] { visibility: hidden; }
.db-spot[data-st="void"] { box-shadow: 0 0 0 1px var(--db-empty); opacity: .5; }
.db-spot[data-st="open"] { box-shadow: 0 0 0 1px var(--db-empty); }
.db-spot[data-st="ghost"] { --pc: var(--db-ghost); box-shadow: 0 0 0 1.5px var(--db-empty); }
.db-spot[data-st="locked"] { --pc: var(--db-ghost); box-shadow: 0 0 0 1px rgba(233, 240, 238, .12); }
.db-spot[data-st="legal"] { --pc: var(--db-accent); background: var(--db-legal); animation: db-lit 1.8s ease-in-out infinite; }
.db-spot > .db-mark { --bs: 11px; font-size: 0; }
.db-spot > .db-dbadge { position: absolute; right: -3px; bottom: -3px; --bs: 10px; font-size: 0; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55); }
.db-spot svg, .db-traydie svg { display: block; }
.db-cfill { flex: 1 1 auto; min-height: 0; }
.db-hint { display: none; }

/* ── your tray ─────────────────────────────────────────────────────────── */
.db-tray { grid-area: tray; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: var(--db-rLane); background: var(--db-panel); box-shadow: 0 0 0 1px var(--db-line); transition: opacity .2s, filter .2s; }
.db-root[data-turn="bot"] .db-tray { opacity: .42; filter: grayscale(1); }
.db-tlbl { flex: none; width: 70px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.db-tlbl b { font: 800 8.5px/1 var(--db-ui); letter-spacing: .12em; color: var(--db-dim); white-space: nowrap; }
.db-tlbl small { height: 20px; font: 700 8.5px/1.2 var(--db-ui); color: var(--db-dim); overflow: hidden; }
.db-tlbl small[data-kind="you"] { color: var(--db-accent); }
.db-tlbl small[data-kind="warn"] { color: var(--db-warn); }
.db-tlbl small[data-kind="lock"] { color: var(--db-danger); }
.db-tslots { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 3px; padding-top: 5px; }
.db-tslot {
  position: relative; flex: none; width: var(--db-tray); height: var(--db-tray); padding: 0; border: 0; background: transparent; color: inherit;
  display: flex; align-items: center; justify-content: center; border-radius: var(--db-rDie); cursor: default; transition: box-shadow .12s, transform .12s, filter .12s;
}
.db-traydie { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: var(--db-rDie); }
.db-tslot[data-home="1"] .db-traydie { animation: db-home .38s ease-out both; }
.db-tslot[data-st="parked"] { box-shadow: 0 0 0 1.5px var(--db-empty); }
.db-tdot { font: 800 12px/1 var(--db-ui); color: var(--db-dim); }
.db-tghost { display: block; width: 70%; height: 70%; border-radius: var(--db-rDie); box-shadow: 0 0 0 1.5px var(--db-empty); }
.db-tslot[data-st="rolled"][data-legal="1"] { cursor: pointer; box-shadow: 0 0 0 2px var(--db-accent), 0 0 12px var(--db-glow); }
@media (hover: hover) { .db-tslot[data-legal="1"]:not(:disabled):hover { box-shadow: 0 0 0 2.5px var(--db-accent), 0 0 18px var(--db-glow); filter: brightness(1.06); } }
.db-tslot[data-legal="1"]:not(:disabled):active { transform: translateY(1px); filter: brightness(.9); }
.db-tslot[data-sel="1"] { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--db-accent), 0 6px 18px var(--db-glow); }
.db-tslot[data-st="dead"] { box-shadow: 0 0 0 1.5px var(--db-danger); }
.db-tslot:disabled { cursor: default; }
/* z-index 3: DieRenderer's .dr-die is z-index 2 and painted over the tag's lower half (playtest 1) */
.db-ttag {
  position: absolute; z-index: 3; right: -4px; top: -8px; height: 12px; padding: 0 3px; display: flex; align-items: center; border-radius: 3px; white-space: nowrap;
  font: 800 7px/1 var(--db-ui); letter-spacing: .02em; color: var(--db-on); background: transparent; pointer-events: none;
}
.db-ttag[data-kind="to"], .db-ttag[data-kind="on"] { background: var(--db-accent); }
.db-root[data-turn="bot"] .db-ttag[data-kind="on"] { background: rgba(255, 255, 255, .12); color: var(--db-dim); }
.db-ttag[data-kind="none"] { background: var(--db-danger); color: #1a0e0b; }

/* ── RECALL ALL + ROLL / END TURN (always the same place) ──────────────── */
.db-btns { grid-area: btns; display: flex; gap: 7px; min-width: 0; }
.db-btn {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; overflow: hidden;
  border: 0; border-radius: 11px; cursor: pointer; background: var(--db-recallBg); color: var(--db-txt); box-shadow: 0 0 0 2px var(--db-recallLine);
  transition: filter .12s, box-shadow .12s, transform .08s;
}
.db-btn b { width: 100%; text-align: center; font: 800 13px/1 var(--db-ui); letter-spacing: .08em; white-space: nowrap; }
.db-btn small { width: 100%; height: 10px; text-align: center; font: 700 8px/1.2 var(--db-ui); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.db-btn.db-primary, .db-btn[data-forced="1"] { background: var(--db-rollBg); color: var(--db-rollTxt); box-shadow: 0 0 0 2px var(--db-rollLine); }
.db-btn[data-forced="1"] { box-shadow: 0 0 0 2px var(--db-rollLine), 0 0 22px var(--db-glow); }
@media (hover: hover) { .db-btn:not(:disabled):hover { filter: brightness(1.12); box-shadow: 0 0 0 2px var(--db-accent), 0 0 18px var(--db-glow); } }
.db-btn:not(:disabled):active { transform: translateY(1px); filter: brightness(.9); }
.db-btn:disabled { cursor: not-allowed; opacity: .4; filter: grayscale(1); background: var(--db-recallBg); color: var(--db-txt); box-shadow: 0 0 0 1px var(--db-line); }

/* ── screen-level layers INSIDE the root (never fixed) ─────────────────── */
.db-scrim { position: absolute; inset: 0; background: rgba(8, 12, 12, .5); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 4; }
.db-scrim[data-on="1"] { opacity: 1; }
.db-fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.db-fly { position: absolute; display: flex; align-items: center; justify-content: center; will-change: transform; }
.db-flycard { display: block; width: 100%; height: 100%; border-radius: 10px; background: #1f2729; box-shadow: 0 0 0 1.5px var(--db-accent), 0 10px 24px rgba(0, 0, 0, .5); }
.db-banner {
  position: absolute; left: 50%; top: 250px; width: 330px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 13px;
  border-radius: 14px; background: var(--db-bannerBg); box-shadow: 0 22px 54px rgba(0, 0, 0, .55), 0 0 0 2px var(--bl, var(--db-accent)); text-align: center;
  opacity: 0; visibility: hidden; transform: translate(-50%, 0); pointer-events: none;
}
.db-banner[data-on="1"] { opacity: 1; visibility: visible; animation: db-rise .28s ease-out both; }
.db-banner[data-o="1"] { --bl: var(--db-c1); }
.db-banner[data-o="2"] { --bl: var(--db-c2); }
.db-banner[data-o="3"] { --bl: var(--db-c3); }
.db-banner b { font: 800 17px/1.15 var(--db-ui); letter-spacing: .04em; color: var(--bl, var(--db-accent)); }
.db-banner span { font: 700 10px/1.4 var(--db-ui); color: var(--db-txt); }
.db-banner small { font: 800 8.5px/1 var(--db-ui); letter-spacing: .12em; color: var(--db-dim); }

/* end screen rows (GameEndScreen html section) */
.db-endrows { display: flex; flex-direction: column; gap: 5px; }
.db-endrow { display: grid; grid-template-columns: 1fr auto 70px; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; }
.db-endrow[data-win="1"] { background: rgba(111, 212, 154, .16); }
.db-endnm { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.db-endav { --bs: 20px; }
.db-endst { font-size: 12px; opacity: .75; }
.db-endsc { text-align: right; font-weight: 800; font-size: 15px; }
.db-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .db-seat, .db-spot, .db-card, .db-banner, .db-tslot .db-traydie { animation: none !important; }
}

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  #dibs-game-screen.db-playing .wrap { padding: 0 2px; max-width: none; }
  #dibs-game-screen.db-playing .topbar { display: none; }
  #dibs-game-screen.db-playing.db-topbar-open .topbar { display: flex; }
}
@media (max-width: 370px) {
  .db-root { --db-tray: 34px; --db-colW: 25px; --db-colGap: 3px; --db-face: 20px; --db-you: 22px; --db-gutW: 20px; --db-chipW: 38px; padding: 7px; }
  .db-tlbl { width: 58px; }
  .db-turn { width: 84px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (the mock's 1280 × 553) ── */
@media (min-width: 1000px) {
  #dibs-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .db-root {
    --db-face: 30px; --db-facesH: 54px; --db-you: 30px; --db-youH: 50px; --db-opp: 24px; --db-oppH: 40px;
    --db-tray: 44px; --db-colW: 30px; --db-colGap: 3px; --db-gutW: 26px; --db-chipW: 46px;
    width: 1280px; height: 553px; padding: 14px; border-radius: 16px;
    grid-template-columns: 236px minmax(0, 1fr) 320px; grid-template-rows: 30px minmax(0, 1fr) 90px;
    grid-template-areas: "head head head" "seats cards cards" "seats tray btns";
    column-gap: 10px; row-gap: 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 26px 60px -30px #000;
  }
  .db-head { gap: 10px; }
  .db-turn { width: 128px; height: 22px; font-size: 10px; letter-spacing: .1em; }
  .db-brand { font-size: 15px; }
  .db-status { font-size: 12px; line-height: 30px; }
  .db-target { display: flex; flex: none; height: 22px; align-items: center; padding: 0 9px; border-radius: 99px; font: 800 10px/1 var(--db-ui); letter-spacing: .1em; color: var(--db-dim); box-shadow: 0 0 0 1.5px var(--db-line); }
  .db-menu { display: none; }

  .db-seats { flex-direction: column; gap: 8px; }
  .db-seat { padding: 9px 11px; gap: 5px; border-radius: 10px; }
  .db-sopen { font-size: 10px; }
  .db-srow { height: 24px; gap: 6px; --bs: 24px; }
  .db-sname { font-size: 12.5px; }
  .db-skind { font-size: 10px; letter-spacing: .08em; }
  .db-sline { height: 26px; gap: 4px; }
  .db-sscore { font-size: 26px; }
  .db-s40 { font-size: 10px; }
  .db-swon { font-size: 10px; }
  .db-sbar { height: 6px; }
  .db-snote { display: block; height: 14px; font: 800 10px/14px var(--db-ui); letter-spacing: .04em; color: var(--db-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .db-snote[data-kind="warn"] { color: var(--db-warn); }
  .db-snote[data-kind="you"] { color: var(--db-accent); }
  .db-snote[data-kind="good"] { color: var(--db-good); }

  .db-cards { flex-direction: row; gap: 12px; }
  .db-card { padding: 10px 11px; gap: 7px; border-radius: 14px; }
  .db-chead { height: 24px; gap: 7px; }
  .db-cslot { width: 24px; height: 24px; font-size: 11px; }
  .db-cname { font-size: 11px; }
  .db-cpts { width: 56px; height: 22px; font-size: 11px; }
  .db-lane { gap: 7px; padding: 0 6px; }
  .db-gut { --bs: 18px; }
  .db-lane[data-you="1"] .db-gut { --bs: 22px; }
  .db-chip { font-size: 11px; }
  .db-spot { border-radius: var(--db-rDie); }
  .db-spot[data-st="open"], .db-spot[data-st="void"] { border-radius: var(--db-rDie); }
  .db-hint { display: flex; flex: none; height: 16px; align-items: center; font: 800 10px/1 var(--db-ui); letter-spacing: .04em; color: var(--db-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .db-hint[data-kind="you"] { color: var(--db-accent); }
  .db-hint[data-kind="warn"] { color: var(--db-warn); }

  .db-tray { gap: 10px; padding: 0 14px; }
  .db-tlbl { width: 130px; gap: 4px; }
  .db-tlbl b { font-size: 10px; }
  .db-tlbl small { height: 14px; font-size: 10px; white-space: nowrap; }
  .db-tslots { justify-content: flex-start; gap: 10px; padding-top: 6px; }
  .db-ttag { font-size: 9px; height: 14px; top: -9px; }

  .db-btns { gap: 10px; }
  .db-btn { border-radius: 12px; gap: 5px; }
  .db-btn b { font-size: 15px; }
  .db-btn small { height: 12px; font-size: 9.5px; }

  .db-banner { top: 175px; width: 580px; padding: 18px 24px; gap: 6px; }
  .db-banner b { font-size: 26px; }
  .db-banner span { font-size: 12px; }
  .db-banner small { font-size: 10px; }
}

/* 🌐 MP — the turn clock. ⭐ RESERVED AT FINAL SIZE FROM FRAME ONE (the locked-layout rule): the
   strip is always in the layout and simply sits dark on a clock-off table, so nothing reflows when a
   deadline arrives. The bar itself is scaled by dibs.js (transform: scaleX) — never a width, which
   would lay out again on every tick. */
.db-clockw { position: relative; height: 4px; border-radius: 2px; background: rgba(255,255,255,.06); overflow: hidden; margin: 0 0 6px; flex: none; }
.db-clock { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--db-c1); opacity: 0; transition: opacity .18s linear; }
.db-clock[data-on="1"] { opacity: .85; }
.db-clock[data-mine="1"] { background: var(--db-accent); }
.db-clock[data-low="1"] { background: var(--db-warn); }
@media (prefers-reduced-motion: reduce) { .db-clock { transition: none; } }