/* frontend/dice-mp.css — the DICE ONLINE TABLE (dice_mp.js), both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Dibs / Gulls / Safecracker precedent. Everything is scoped to
 * #dice-mp-game-screen / .dmc-root, EXCEPT the last block: solo Dice's TABLE SKIN (`#game-screen .dv-table`, .494),
 * which shares this table's side colours + mono face instead of forking a second stylesheet.
 *
 * Mock: docs/design/batch7/Dice-Multiplayer.dc.html. Review + owner rulings + FEEL SPEC:
 * docs/design/dice-mp-mock-review.md. ⭐ Build from the FEEL SPEC table, not from memory of the mock.
 *
 * ── Colour is data (DMM9: Classic + Arcade, NOT Pixel) ──────────────────────────────────────────────
 * Classic = the mock's `--cl-*` block; the page background is the equipped board scheme (GameTheme paints the
 * screen). Arcade = `.gm-arcade` on the screen (GameTheme.apply toggles it): the mock's `--ar-*` colours + the
 * palette's own `--pgr-btn` / `--pgr-solid`. SAME DOM, SAME GEOMETRY — only these tokens change.
 * Colourblind: every seat owns a glyph (●▲■◆★✚); UNDER = blue + ◀ + 135° hatch, OVER = amber + ▶ + dot field;
 * outcomes are ✓ rise / ✗ fall + WON / LOST words, never a recolour alone.
 *
 * ── ⭐ LOCKED LAYOUT (memory: predicely_locked_layout_rule) ─────────────────────────────────────────
 * Six standings rows always exist (empty seats are dashed placeholders); the marker lane is always two pills
 * tall; the stake row always holds field + three quicks + returns + primary. Setter mode swaps CONTENTS inside
 * those boxes. Every slot has a fixed `height` (never `min-height`) and `overflow: hidden`. Feedback is colour,
 * glow or a transform — never size or spacing.
 *
 * ── Geometry ────────────────────────────────────────────────────────────────────────────────────────
 * DESKTOP: ONE box, 1280 × 553 (= the mock's 637 less its 84px chat strip), scaled as a unit by BoardFit.
 *   ⛔ A MEASUREMENT IN THREE COPIES: here, DMC_FIT_W / DMC_FIT_H in dice_mp.js, and board-fit.js.
 * PHONE TIERS (DMC_TIER_MIN in dice_mp.js): the column height at which each tier's fixed bands + the bar block's
 *   minimum (a two-pill lane) fit — n 696 · s 625 · xs 523. Change a band here, re-sum it there.
 * PHONE: an unscaled column whose height dice_mp.js measures (`--dmc-ph` = innerHeight − the offsetTop chain −
 *   the real chat bar). ⭐ The BAR BLOCK is the one flexible row (the mock's `barBlock`), so a notch costs bar
 *   height, never a control (DMM1). `data-tier` steps every fixed band down together on short phones.
 */

#dice-mp-game-screen, .dmc-root {
  --dmc-seat: rgba(255, 255, 255, .028); --dmc-panel: rgba(255, 255, 255, .048); --dmc-line: rgba(255, 255, 255, .085);
  --dmc-txt: #e9e8e4; --dmc-dim: #83858b; --dmc-track: rgba(255, 255, 255, .07);
  --dmc-win: oklch(.78 .15 152); --dmc-lose: oklch(.68 .19 25);
  --dmc-surface: #15161a; --dmc-btn: linear-gradient(180deg, #2d3036, #22242a); --dmc-btnTxt: #f1f0ec; --dmc-you: var(--dmc-txt);
  --dmc-overInk: #12140f;
  --dmc-font: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --dmc-rCard: 18px; --dmc-rBtn: 14px; --dmc-rSm: 10px; --dmc-bd: 1px; --dmc-shadow: none;
  --dmc-boxBg: radial-gradient(125% 120% at 50% -10%, rgba(255, 255, 255, .045) 0%, rgba(0, 0, 0, 0) 58%);
}
#dice-mp-game-screen.gm-arcade, #dice-mp-game-screen.gm-arcade .dmc-root {
  --dmc-seat: rgba(0, 0, 0, .24); --dmc-panel: rgba(255, 255, 255, .09); --dmc-line: rgba(255, 255, 255, .18);
  --dmc-txt: #ffffff; --dmc-dim: rgba(255, 255, 255, .72); --dmc-track: rgba(0, 0, 0, .34);
  --dmc-win: #4ade80; --dmc-lose: #fb7185;
  --dmc-surface: var(--pgr-solid, #14285e); --dmc-btn: var(--pgr-btn, #60a5fa); --dmc-btnTxt: var(--pgr-btnTxt, #07142e);
  --dmc-you: var(--pgr-accent, #60a5fa);
  --dmc-font: 'Poppins', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --dmc-rCard: 20px; --dmc-rBtn: 16px; --dmc-bd: 1.5px; --dmc-shadow: 0 18px 40px rgba(0, 0, 0, .42);
  --dmc-boxBg: none;
}

/* ⭐ SHARED WITH THE SOLO TABLE SKIN (bottom of this file): the side colours + the mono face are the two things
 * that make the Table look the Table look, so they are declared ONCE for both boards. Everything else the solo skin
 * paints comes from the equipped board scheme (--pgr-*), exactly like solo Normal — the MP table hard-codes its
 * palette because its page background IS the scheme; solo's cards sit on it. */
#dice-mp-game-screen, .dmc-root, #game-screen .dv-table {
  --dmc-under: oklch(.76 .13 240); --dmc-over: oklch(.82 .15 74);
  --dmc-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
/* solo Dice is not GameTheme.apply()'d: its Arcade marker is applyApp()'s body[data-layout], not .gm-arcade on the screen */
#dice-mp-game-screen.gm-arcade, #dice-mp-game-screen.gm-arcade .dmc-root, body[data-layout="arcade"] #game-screen .dv-table { --dmc-under: #38bdf8; --dmc-over: #facc15; }

/* ── FEEL SPEC keyframes (mock :27-36) ─────────────────────────────────────────────────────────────── */
@keyframes dmc-tick { 0%, 100% { transform: translateY(-2px) } 50% { transform: translateY(2px) } }
@keyframes dmc-pop { 0% { transform: scale(.86); opacity: 0 } 60% { transform: scale(1.04) } 100% { transform: scale(1); opacity: 1 } }
@keyframes dmc-land { 0% { transform: scale(.86); opacity: .4 } 60% { transform: scale(1.06) } 100% { transform: scale(1); opacity: 1 } }
@keyframes dmc-breathe { 0%, 100% { box-shadow: 0 0 0 1px currentColor, 0 0 14px -8px currentColor } 50% { box-shadow: 0 0 0 1.5px currentColor, 0 0 26px -4px currentColor } }
@keyframes dmc-rise { 0% { transform: translateY(6px); opacity: .4 } 100% { transform: translateY(-4px); opacity: 1 } }
@keyframes dmc-fall { 0% { transform: translateY(0) rotate(0); opacity: 1 } 100% { transform: translateY(26px) rotate(9deg); opacity: .15 } }
@keyframes dmc-smear { 0% { transform: translateX(-14px) } 50% { transform: translateX(14px) } 100% { transform: translateX(-14px) } }
@keyframes dmc-popc { 0% { transform: translate(-50%, -50%) scale(.88); opacity: 0 } 60% { transform: translate(-50%, -50%) scale(1.03) } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1 } }
@keyframes dmc-hop { 0%, 100% { transform: translate(-50%, 0) } 45% { transform: translate(-50%, -7px) } }
@keyframes dmc-flashR { 0%, 100% { background: rgba(0, 0, 0, .34) } 35% { background: color-mix(in srgb, var(--dmc-lose) 42%, transparent) } }
@keyframes dmc-flashG { 0%, 100% { background: rgba(0, 0, 0, .34) } 35% { background: color-mix(in srgb, var(--dmc-win) 38%, transparent) } }
@keyframes dmc-shrink { 0% { transform: translateY(-4px) scale(1); opacity: 1 } 100% { transform: translateY(-4px) scale(.2); opacity: 0 } }
@keyframes dmc-toast { 0% { opacity: 0; transform: translate(-50%, 6px) } 12%, 82% { opacity: 1; transform: translate(-50%, 0) } 100% { opacity: 0; transform: translate(-50%, 0) } }

/* ── the screen + the box ──────────────────────────────────────────────────────────────────────────── */
#dice-mp-game-screen { color: var(--dmc-txt); }
.dmc-root {
  position: relative; box-sizing: border-box; margin: 0 auto; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--dmc-gap);
  padding: var(--dmc-pad); color: var(--dmc-txt); font-family: var(--dmc-font);
  background: var(--dmc-boxBg); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.dmc-root *, .dmc-root *::before, .dmc-root *::after { box-sizing: border-box; }
/* :where() — zero specificity, so every control class below sets its own font (a plain `.dmc-root button` out-ranked .dmc-q) */
.dmc-root :where(button) { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.dmc-card { background: var(--dmc-seat); border: var(--dmc-bd) solid var(--dmc-line); border-radius: var(--dmc-rCard); }
.dmc-lbl { font-family: var(--dmc-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--dmc-dim); white-space: nowrap; }
.dmc-pc-only { display: inline; } .dmc-ph-only { display: none; }

/* header */
.dmc-hdr { flex: none; height: var(--dmc-hdrH); display: flex; align-items: center; gap: var(--dmc-hdrGap); padding: 0 var(--dmc-hdrPad); overflow: hidden; }
.dmc-menu { display: none; flex: none; width: 30px; height: 26px; border-radius: 8px; border: var(--dmc-bd) solid var(--dmc-line); background: var(--dmc-panel); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.dmc-table { flex: none; white-space: nowrap; font-family: var(--dmc-mono); font-size: var(--dmc-fsTable); letter-spacing: .1em; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--dmc-line); color: var(--dmc-dim); }
.dmc-table[data-buyin="1"] { border-color: var(--dmc-over); color: var(--dmc-over); }
.dmc-round { flex: 1; min-width: 0; font-family: var(--dmc-mono); font-size: var(--dmc-fsRound); letter-spacing: var(--dmc-lsRound); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmc-clock { flex: none; display: flex; align-items: center; gap: var(--dmc-clkGap); }
.dmc-clk-who { font-family: var(--dmc-mono); font-size: 8px; letter-spacing: .1em; color: var(--dmc-dim); white-space: nowrap; width: var(--dmc-clkWhoW); overflow: hidden; text-overflow: ellipsis; text-align: right; }
.dmc-clk-track { flex: none; width: var(--dmc-clkW); height: 5px; border-radius: 99px; background: var(--dmc-track); overflow: hidden; }
.dmc-clk-fill { display: block; height: 100%; width: 0; background: var(--dmc-over); transform-origin: left center; }
.dmc-clock[data-live="0"] .dmc-clk-fill { background: transparent; }
.dmc-clock[data-live="0"] { opacity: .55; }
.dmc-clock[data-low="1"] .dmc-clk-fill { background: var(--dmc-lose); }
.dmc-clk-n { width: var(--dmc-clkNW); text-align: right; font-size: var(--dmc-fsClk); font-weight: 800; font-variant-numeric: tabular-nums; }
.dmc-clock[data-low="1"] .dmc-clk-n { color: var(--dmc-lose); }

/* main */
.dmc-main { flex: none; display: flex; gap: var(--dmc-gap); min-height: 0; }
.dmc-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.dmc-banner { flex: none; height: var(--dmc-bannerH); display: flex; align-items: center; gap: 10px; padding: 0 var(--dmc-hdrPad);
  background: var(--dmc-panel); border: var(--dmc-bd) solid var(--dmc-line); border-radius: var(--dmc-rCard); color: var(--dmc-txt); overflow: hidden; }
.dmc-banner[data-tone="over"] { color: var(--dmc-over); border-color: var(--dmc-over); }
.dmc-banner[data-tone="win"] { color: var(--dmc-win); border-color: var(--dmc-win); }
.dmc-bav { flex: none; width: var(--dmc-bavS); height: var(--dmc-bavS); border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center;
  font-family: var(--dmc-mono); font-size: 11px; background: var(--dmc-surface); }
.dmc-btxt { flex: 1; min-width: 0; font-size: var(--dmc-fsBanner); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmc-btag { flex: none; font-family: var(--dmc-mono); font-size: 8.5px; letter-spacing: .14em; padding: 3px 7px; border: 1px solid currentColor; border-radius: 5px; opacity: .85; white-space: nowrap; }

.dmc-result { flex: none; height: var(--dmc-resultH); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden; }
.dmc-big { font-size: var(--dmc-fsBig); line-height: .94; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--dmc-dim); opacity: .28; }
.dmc-result[data-ph="rolling"] .dmc-big { color: var(--dmc-txt); opacity: 1; animation: dmc-tick .22s ease-in-out infinite; filter: blur(.4px); }
.dmc-result[data-ph="landed"] .dmc-big { color: var(--dmc-win); opacity: 1; animation: dmc-land .3s cubic-bezier(.34, 1.56, .64, 1) both; }
.dmc-result[data-ph="shown"] .dmc-big { color: var(--dmc-win); opacity: 1; }
.dmc-credit { font-family: var(--dmc-mono); font-size: 8.5px; line-height: 10px; height: 10px; letter-spacing: .12em; color: var(--dmc-dim); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dmc-verdict { height: 12px; line-height: 12px; font-size: 11px; font-weight: 700; white-space: nowrap; opacity: 0; }
.dmc-verdict[data-side="under"] { color: var(--dmc-under); opacity: 1; }
.dmc-verdict[data-side="over"] { color: var(--dmc-over); opacity: 1; }

/* the bar block — the phone's one flexible row */
.dmc-barblock { flex: none; height: var(--dmc-barBlockH); display: flex; flex-direction: column; gap: var(--dmc-bbGap); padding: var(--dmc-bbPadV) var(--dmc-bbPadH); overflow: hidden; }
.dmc-barlbl { flex: none; height: var(--dmc-lblH); display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--dmc-mono); font-size: 9px; letter-spacing: .1em; white-space: nowrap; }
.dmc-ulbl { color: var(--dmc-under); overflow: hidden; text-overflow: ellipsis; } .dmc-olbl { color: var(--dmc-over); overflow: hidden; text-overflow: ellipsis; text-align: right; }
.dmc-linechip { flex: none; font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--dmc-over); color: var(--dmc-over); }
.dmc-bar { position: relative; flex: none; height: var(--dmc-barH); border-radius: 8px; background: var(--dmc-track); border: var(--dmc-bd) solid var(--dmc-line); touch-action: none; }
.dmc-bar[data-drag="1"] { cursor: ew-resize; }
.dmc-uzone { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; opacity: .55; border-radius: 7px 0 0 7px;
  background: repeating-linear-gradient(135deg, var(--dmc-under) 0 5px, transparent 5px 10px); }
.dmc-ozone { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; opacity: .6; border-radius: 0 7px 7px 0;
  background: radial-gradient(var(--dmc-over) 1.4px, transparent 1.5px) 0 0 / 7px 7px; }
.dmc-smear { position: absolute; top: -2px; bottom: -2px; left: 12%; width: 76%; border-radius: 6px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--dmc-txt) 45%, var(--dmc-txt) 55%, transparent); filter: blur(3px); }
.dmc-bar[data-ph="rolling"] .dmc-smear { opacity: 1; animation: dmc-smear .5s ease-in-out infinite; }
.dmc-line { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 3px; transform: translateX(-1.5px); background: var(--dmc-over); box-shadow: 0 0 10px -2px var(--dmc-over); pointer-events: none; }
/* the line HOPS to each released stop on every other screen; the setter's own drag is instant */
.dmc-bar[data-hop="1"] .dmc-line, .dmc-bar[data-hop="1"] .dmc-handle { transition: left .34s cubic-bezier(.34, 1.4, .64, 1); }
.dmc-bar[data-hop="1"] .dmc-uzone, .dmc-bar[data-hop="1"] .dmc-ozone { transition: width .34s cubic-bezier(.34, 1.4, .64, 1); }
.dmc-handle { position: absolute; z-index: 3; left: 50%; top: var(--dmc-handleTop); transform: translate(-50%, 0); width: var(--dmc-handleS); height: var(--dmc-handleS);
  border-radius: 50%; background: var(--dmc-surface); border: 2px solid var(--dmc-over); color: var(--dmc-over); font-family: var(--dmc-mono); font-size: 11px;
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; }
.dmc-bar[data-set="1"] .dmc-handle { opacity: 1; animation: dmc-hop 1.4s ease-in-out infinite; }
.dmc-pin { position: absolute; top: -6px; bottom: -6px; left: -9%; width: 3px; transform: translateX(-1.5px); background: var(--dmc-txt); opacity: 0; pointer-events: none; }
.dmc-rchip { position: absolute; left: -9%; top: var(--dmc-rchipTop); transform: translate(-50%, 0); font-family: var(--dmc-mono); font-size: 9.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 5px; background: var(--dmc-surface); border: 1px solid var(--dmc-txt); white-space: nowrap; opacity: 0; pointer-events: none; }
.dmc-bar[data-roll="1"] .dmc-pin, .dmc-bar[data-roll="1"] .dmc-rchip { opacity: 1; }
.dmc-scale { flex: none; height: 11px; display: flex; justify-content: space-between; font-family: var(--dmc-mono); font-size: 8px; letter-spacing: .08em; color: var(--dmc-dim); line-height: 11px; }
.dmc-lane { position: relative; flex: 1; min-height: 0; }
.dmc-lane::after { content: ''; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--dmc-line); opacity: .5; }
.dmc-lane[data-full="1"]::after { opacity: 0; }

/* bet pills (pinned inside their own zone — the mock's place()) */
.dmc-pill { position: absolute; height: var(--dmc-pillH); display: flex; align-items: center; gap: 4px; padding: 0 5px; overflow: hidden;
  border-radius: 8px; background: rgba(0, 0, 0, .34); border: var(--dmc-bd) solid currentColor; }
.dmc-pill[data-side="under"] { color: var(--dmc-under); } .dmc-pill[data-side="over"] { color: var(--dmc-over); }
.dmc-pill[data-st="in"] { animation: dmc-pop .26s ease both; }
.dmc-pill[data-st="won"] { color: var(--dmc-win); box-shadow: 0 0 18px -6px var(--dmc-win); animation: dmc-rise .5s cubic-bezier(.2, .8, .3, 1) both, dmc-flashG .6s ease 1; }
.dmc-pill[data-st="lost"] { color: var(--dmc-lose); animation: dmc-fall .6s cubic-bezier(.4, 0, .8, 1) .1s both, dmc-flashR .5s ease 1; }
.dmc-pill[data-st="gone"] { color: var(--dmc-win); animation: dmc-shrink .45s cubic-bezier(.5, 0, .7, .4) both; }
.dmc-pill[data-st="kept"] { color: var(--dmc-win); transform: translateY(-4px); }
.dmc-pill[data-st="hid"] { opacity: 0; }
.dmc-pav { flex: none; width: calc(var(--dmc-pillH) - 8px); height: calc(var(--dmc-pillH) - 8px); border-radius: 50%; background: var(--dmc-surface); border: 1.5px solid currentColor;
  color: var(--dmc-txt); font-family: var(--dmc-mono); font-size: 9px; display: flex; align-items: center; justify-content: center; }
.dmc-pav + .dmc-pav { margin-left: -6px; }
.dmc-ptxt { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; flex: 1; overflow: hidden; }
.dmc-pside { font-family: var(--dmc-mono); font-size: 7.5px; letter-spacing: .09em; white-space: nowrap; color: var(--dmc-dim); }
.dmc-pstake { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dmc-txt); white-space: nowrap; }
.dmc-pres { flex: none; font-size: 13px; font-weight: 800; display: none; }
.dmc-pill[data-st="won"] .dmc-pres, .dmc-pill[data-st="lost"] .dmc-pres, .dmc-pill[data-st="gone"] .dmc-pres, .dmc-pill[data-st="kept"] .dmc-pres { display: block; }

/* standings — SIX rows, always */
.dmc-stand { flex: none; width: var(--dmc-standW); display: flex; flex-direction: column; gap: 4px; padding: 10px; overflow: hidden; }
.dmc-standlbl { flex: none; height: 16px; display: flex; align-items: center; }
.dmc-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.dmc-row { position: relative; flex: none; height: var(--dmc-rowH); display: flex; align-items: center; gap: 9px; padding: 0 10px; min-width: 0;
  border: var(--dmc-bd) solid var(--dmc-line); border-radius: 10px; color: var(--dmc-line); }
.dmc-row[data-you="1"] { background: var(--dmc-panel); border-color: var(--dmc-you); }
.dmc-row[data-ring="set"] { color: var(--dmc-over); border-color: var(--dmc-over); animation: dmc-breathe 2.2s ease-in-out infinite; }
.dmc-row[data-ring="win"] { color: var(--dmc-win); border-color: var(--dmc-win); animation: dmc-breathe 2.2s ease-in-out infinite; }
.dmc-row[data-empty="1"] { border-style: dashed; opacity: .35; }
.dmc-row[data-left="1"] { opacity: .5; }
.dmc-rank { flex: none; width: 16px; font-family: var(--dmc-mono); font-size: 10px; color: var(--dmc-dim); text-align: right; }
.dmc-av { flex: none; width: var(--dmc-avS); height: var(--dmc-avS); border-radius: 50%; background: var(--dmc-surface); border: 1.5px solid var(--dmc-dim); color: var(--dmc-txt);
  font-family: var(--dmc-mono); font-size: 10px; display: flex; align-items: center; justify-content: center; }
.dmc-row[data-you="1"] .dmc-av { border-color: var(--dmc-txt); }
.dmc-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.dmc-nmrow { display: flex; align-items: center; gap: 5px; min-width: 0; }
.dmc-nm { flex: 0 1 auto; min-width: 0; font-size: var(--dmc-fsName); font-weight: 700; color: var(--dmc-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmc-row[data-empty="1"] .dmc-nm { font-family: var(--dmc-mono); font-size: 9.5px; letter-spacing: .12em; color: var(--dmc-dim); font-weight: 400; }
.dmc-tag { flex: none; font-family: var(--dmc-mono); font-size: 7.5px; letter-spacing: .1em; padding: 1px 4px; border-radius: 4px; border: 1px solid var(--dmc-over); color: var(--dmc-over); opacity: 0; }
.dmc-row[data-tag="set"] .dmc-tag, .dmc-row[data-tag="next"] .dmc-tag { opacity: 1; }
.dmc-state { display: flex; align-items: center; gap: 3px; font-family: var(--dmc-mono); font-size: var(--dmc-fsState); letter-spacing: .07em; color: var(--dmc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmc-state[data-c="win"] { color: var(--dmc-win); } .dmc-state[data-c="lose"] { color: var(--dmc-lose); } .dmc-state[data-c="over"] { color: var(--dmc-over); }
.dmc-sico { flex: none; font-size: 9px; }
.dmc-right { flex: none; width: var(--dmc-rightW); display: flex; flex-direction: column; align-items: flex-end; gap: 1px; overflow: hidden; }
.dmc-chips { font-size: var(--dmc-fsChips); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dmc-txt); white-space: nowrap; }
.dmc-row[data-ring="win"] .dmc-chips { color: var(--dmc-win); }
.dmc-need { height: 10px; font-family: var(--dmc-mono); font-size: 7.5px; letter-spacing: .06em; color: var(--dmc-dim); white-space: nowrap; line-height: 10px; }
.dmc-row[data-empty="1"] .dmc-rank, .dmc-row[data-empty="1"] .dmc-av, .dmc-row[data-empty="1"] .dmc-tag,
.dmc-row[data-empty="1"] .dmc-state, .dmc-row[data-empty="1"] .dmc-right { visibility: hidden; }

/* controls */
.dmc-ctrl { flex: none; display: flex; flex-direction: column; gap: var(--dmc-gap); }
.dmc-sides { flex: none; display: flex; gap: var(--dmc-sidesGap); }
.dmc-side { flex: 1; min-width: 0; height: var(--dmc-sideH); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 6px;
  border-radius: var(--dmc-rBtn); border: var(--dmc-bd) solid var(--dmc-line); background: var(--dmc-panel); color: var(--dmc-txt); cursor: default; opacity: .45; overflow: hidden; }
.dmc-side[data-live="1"] { opacity: 1; cursor: pointer; }
.dmc-side[data-on="1"][data-side="under"] { border-color: var(--dmc-under); color: var(--dmc-under); background: color-mix(in srgb, var(--dmc-under) 18%, transparent); box-shadow: 0 0 0 .8px var(--dmc-under); }
.dmc-side[data-on="1"][data-side="over"] { border-color: var(--dmc-over); color: var(--dmc-over); background: color-mix(in srgb, var(--dmc-over) 18%, transparent); box-shadow: 0 0 0 .8px var(--dmc-over); }
.dmc-side[data-mk="1"] { opacity: 1; }
.dmc-side[data-res="won"] { border-color: var(--dmc-win); color: var(--dmc-win); box-shadow: 0 0 22px -8px var(--dmc-win); animation: dmc-pop .3s ease both; opacity: 1; }
.dmc-side[data-res="lost"] { border-color: var(--dmc-lose); color: var(--dmc-lose); animation: dmc-pop .3s ease both; opacity: 1; }
@media (hover: hover) {
  .dmc-side[data-live="1"]:hover { filter: brightness(1.14); }
  .dmc-side[data-live="1"][data-side="under"]:hover { border-color: var(--dmc-under); }
  .dmc-side[data-live="1"][data-side="over"]:hover { border-color: var(--dmc-over); }
  .dmc-q[data-live="1"]:hover { border-color: var(--dmc-txt); box-shadow: 0 0 14px -8px #fff; }
  .dmc-primary[data-live="1"]:hover { filter: brightness(1.12); }
  .dmc-nudge[data-live="1"]:hover { background: rgba(255, 255, 255, .1); }
}
.dmc-side[data-live="1"]:active { filter: brightness(.9); }
.dmc-stop { font-family: var(--dmc-mono); font-size: 8.5px; letter-spacing: .12em; opacity: .85; white-space: nowrap; }
.dmc-sbig { font-size: var(--dmc-fsSide); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.dmc-ssub { font-family: var(--dmc-mono); font-size: 8px; letter-spacing: .07em; opacity: .8; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.dmc-stakerow { flex: none; display: flex; align-items: stretch; gap: 12px; }
.dmc-field { flex: none; width: var(--dmc-fieldW); height: var(--dmc-stakeH); display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 var(--dmc-fieldPad);
  background: var(--dmc-panel); border: var(--dmc-bd) solid var(--dmc-line); border-radius: var(--dmc-rSm); opacity: .45; overflow: hidden; }
.dmc-field[data-live="1"] { opacity: 1; border-color: var(--dmc-txt); }
.dmc-field[data-mode="line"][data-live="1"] { border-color: var(--dmc-over); }
.dmc-field[data-mine="1"] { opacity: 1; }
.dmc-field[data-mine="2"] { opacity: .6; }
.dmc-fval { display: flex; align-items: center; gap: 6px; height: var(--dmc-fvalH); min-width: 0; }
.dmc-nudge { flex: none; width: var(--dmc-nudgeW); height: var(--dmc-fvalH); border-radius: 7px; border: 1px solid var(--dmc-line); background: transparent; cursor: default; padding: 0;
  font-size: 16px; font-weight: 800; line-height: 1; opacity: .35; }
.dmc-nudge[data-live="1"] { cursor: pointer; opacity: 1; }
.dmc-fglyph { flex: none; font-size: var(--dmc-fsField); font-weight: 800; width: .9em; text-align: center; }
.dmc-fglyph[data-side="under"] { color: var(--dmc-under); } .dmc-fglyph[data-side="over"] { color: var(--dmc-over); }
.dmc-stake { flex: 1; min-width: 0; width: 100%; height: var(--dmc-fvalH); border: 0; outline: 0; background: transparent; padding: 0; margin: 0;
  font-family: var(--dmc-font); font-size: var(--dmc-fsField); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dmc-txt); text-align: center; }
.dmc-stake:disabled { color: var(--dmc-txt); -webkit-text-fill-color: var(--dmc-txt); opacity: 1; }
.dmc-quicks { flex: none; width: 230px; display: flex; gap: 6px; align-items: center; }
.dmc-quicks[data-off="1"] { opacity: .35; }
.dmc-q { flex: 1; min-width: 0; height: var(--dmc-qH); display: flex; align-items: center; justify-content: center; padding: 0 2px; border-radius: 8px;
  font-family: var(--dmc-mono); font-size: 8.5px; letter-spacing: .07em; white-space: nowrap; overflow: hidden;
  border: var(--dmc-bd) solid var(--dmc-line); background: transparent; color: var(--dmc-dim); opacity: .42; cursor: default; }
.dmc-q[data-live="1"] { background: var(--dmc-panel); color: var(--dmc-txt); opacity: 1; cursor: pointer; }
.dmc-q[data-live="1"][data-warn="1"] { border-color: var(--dmc-over); color: var(--dmc-over); }
.dmc-q[data-on="1"] { border-color: var(--dmc-txt); }
.dmc-returns { flex: 1; min-width: 0; height: var(--dmc-stakeH); display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 var(--dmc-fieldPad);
  border: var(--dmc-bd) solid var(--dmc-line); border-radius: var(--dmc-rSm); overflow: hidden; }
.dmc-rval { font-size: var(--dmc-fsRet); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dmc-dim); }
.dmc-rval[data-side="under"] { color: var(--dmc-under); } .dmc-rval[data-side="over"] { color: var(--dmc-over); }
.dmc-primary { flex: none; width: 206px; height: var(--dmc-stakeH); display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 8px;
  font-family: var(--dmc-font); font-size: var(--dmc-fsPrim); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden;
  border-radius: var(--dmc-rBtn); border: 0; background: var(--dmc-panel); color: var(--dmc-dim); opacity: .5; cursor: default; }
.dmc-primary[data-live="1"] { background: var(--dmc-btn); color: var(--dmc-btnTxt); opacity: 1; cursor: pointer; }
.dmc-primary[data-live="1"][data-kind="line"] { background: var(--dmc-over); color: var(--dmc-overInk); }
.dmc-primary[data-kind="locked"] { background: transparent; color: var(--dmc-win); box-shadow: inset 0 0 0 1px var(--dmc-win); opacity: 1; }
.dmc-primary[data-live="1"]:active { filter: brightness(.88); }
.dmc-primary[data-busy="1"] { opacity: .7; }

/* screen-level layers INSIDE the box: they overlay it and can never resize it (mock SCREEN-LEVEL note) */
.dmc-stinger { position: absolute; left: 50%; top: 40%; z-index: 6; display: none; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap;
  padding: 16px 34px; background: var(--dmc-surface); border: 2px solid var(--dmc-over); border-radius: var(--dmc-rCard); box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  pointer-events: none; transform: translate(-50%, -50%); max-width: calc(100% - 24px); overflow: hidden; }
.dmc-stinger[data-on="1"] { display: flex; animation: dmc-popc .4s ease both; }
.dmc-stinger[data-kind="win"] { border-color: var(--dmc-win); top: 72%; }
.dmc-sgt { font-size: var(--dmc-fsSting); font-weight: 800; letter-spacing: .08em; color: var(--dmc-over); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dmc-stinger[data-kind="win"] .dmc-sgt { color: var(--dmc-win); }
.dmc-sgs { font-family: var(--dmc-mono); font-size: 9px; letter-spacing: .12em; color: var(--dmc-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dmc-toast { position: absolute; left: 50%; bottom: 18px; z-index: 7; transform: translate(-50%, 0); max-width: calc(100% - 32px); padding: 9px 16px; border-radius: 12px;
  background: var(--dmc-surface); border: 1px solid var(--dmc-lose); color: var(--dmc-txt); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; opacity: 0; }
.dmc-toast[data-on="1"] { animation: dmc-toast 3.2s ease both; }

/* the pending (waiting for players) card */
.dmc-pending { text-align: center; padding: 2rem 1rem; font-family: var(--dmc-font); color: var(--dmc-txt); }
.dmc-pending-g { font-size: 44px; }
.dmc-pending-t { font-weight: 700; font-size: 18px; margin-top: 10px; }
.dmc-pending-n { margin-top: 6px; color: var(--dmc-dim); font-size: 14px; }
.dmc-pending-h { margin-top: 14px; color: var(--dmc-dim); font-size: 12px; opacity: .8; }
.dmc-endstats { display: flex; flex-direction: column; gap: 4px; }
.dmc-endstat { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.dmc-endstat b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .dmc-root *, .dmc-root *::before, .dmc-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ══ PHONE — an unscaled column, sized by dice_mp.js ════════════════════════════════════════════════ */
@media (max-width: 999px) {
  #dice-mp-game-screen.dmc-playing .wrap { padding: 0 2px; max-width: none; }
  #dice-mp-game-screen.dmc-playing .topbar { display: none; }
  #dice-mp-game-screen.dmc-playing.dmc-topbar-open .topbar { display: flex; }
  .dmc-root {
    --dmc-pad: 12px; --dmc-gap: 8px; --dmc-hdrH: 34px; --dmc-hdrGap: 8px; --dmc-hdrPad: 10px; --dmc-fsTable: 8px; --dmc-fsRound: 8.5px; --dmc-lsRound: .02em;
    --dmc-clkGap: 4px; --dmc-clkWhoW: 26px; --dmc-clkW: 36px; --dmc-clkNW: 14px; --dmc-fsClk: 11px;
    --dmc-bannerH: 42px; --dmc-bavS: 24px; --dmc-fsBanner: 14.5px;
    --dmc-resultH: 78px; --dmc-fsBig: 48px;
    --dmc-bbGap: 6px; --dmc-bbPadV: 9px; --dmc-bbPadH: 12px; --dmc-lblH: 18px; --dmc-barH: 30px; --dmc-handleS: 22px; --dmc-handleTop: 4px; --dmc-rchipTop: -18px;
    --dmc-pillH: 26px; --dmc-pillW: 74px;
    --dmc-standW: auto; --dmc-rowH: 38px; --dmc-avS: 18px; --dmc-fsName: 11.5px; --dmc-fsState: 7.5px; --dmc-rightW: 46px; --dmc-fsChips: 11.5px;
    --dmc-sideH: 50px; --dmc-sidesGap: 8px; --dmc-fsSide: 17px;
    --dmc-stakeH: 46px; --dmc-primH: 48px; --dmc-fieldW: calc(52% - 4px); --dmc-fieldPad: 10px; --dmc-fvalH: 22px; --dmc-nudgeW: 26px; --dmc-fsField: 17px; --dmc-qH: 30px;
    --dmc-fsRet: 15px; --dmc-fsPrim: 12.5px; --dmc-fsSting: 19px;
    width: 100%; max-width: 480px; height: var(--dmc-ph, 700px);
  }
  /* every fixed band steps down TOGETHER on a short phone (the mock's metric tier), and once more below that */
  .dmc-root[data-tier="s"] {
    --dmc-hdrH: 32px; --dmc-bannerH: 34px; --dmc-resultH: 54px; --dmc-fsBig: 42px; --dmc-rowH: 33px; --dmc-sideH: 46px; --dmc-stakeH: 40px; --dmc-primH: 44px;
    --dmc-barH: 26px; --dmc-pillH: 24px; --dmc-pillW: 68px; --dmc-fsBanner: 13.5px; --dmc-fsSide: 16px; --dmc-fsField: 16px; --dmc-qH: 28px;
  }
  .dmc-root[data-tier="xs"] {
    --dmc-pad: 8px; --dmc-gap: 6px; --dmc-hdrH: 28px; --dmc-bannerH: 30px; --dmc-resultH: 36px; --dmc-fsBig: 28px; --dmc-rowH: 26px; --dmc-sideH: 44px; --dmc-stakeH: 38px; --dmc-primH: 44px;
    --dmc-barH: 22px; --dmc-pillH: 20px; --dmc-pillW: 60px; --dmc-lblH: 14px; --dmc-bbPadV: 6px; --dmc-bbGap: 4px; --dmc-fsBanner: 13px; --dmc-fsSide: 15px; --dmc-fsField: 15px; --dmc-qH: 24px;
  }
  .dmc-pc-only { display: none; } .dmc-ph-only { display: inline; }
  .dmc-menu { display: flex; align-items: center; justify-content: center; width: 26px; height: 24px; font-size: 13px; }
  .dmc-hdr { padding: 0 8px; }
  .dmc-table { padding: 2px 5px; letter-spacing: .06em; }
  /* ONE column: the standings go FIRST (the mock's order:1), then the left column's three cards */
  .dmc-main { display: contents; }
  .dmc-left { display: contents; }
  /* 2 × 8 padding + a 14px label + a 6px gap + three rows + two 6px gaps (+ the card's 2px border) */
  .dmc-stand { order: 1; width: auto; height: calc(16px + 14px + 6px + 3 * var(--dmc-rowH) + 12px + 2px); padding: 8px; gap: 6px; }
  .dmc-standlbl { height: 14px; }
  .dmc-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: var(--dmc-rowH); gap: 6px; }
  .dmc-row { gap: 5px; padding: 0 7px; }
  .dmc-rank { width: 10px; font-size: 8.5px; }
  .dmc-tag { display: none; }
  .dmc-hdr { order: 0; } .dmc-banner { order: 2; } .dmc-result { order: 3; }
  .dmc-barblock { order: 4; flex: 1 1 auto; height: auto; min-height: calc(2 * var(--dmc-bbPadV) + var(--dmc-lblH) + var(--dmc-barH) + 11px + 3 * var(--dmc-bbGap) + 2 * var(--dmc-pillH) + 6px); }
  .dmc-ctrl { order: 5; }
  .dmc-stakerow { flex-wrap: wrap; gap: var(--dmc-gap); }
  .dmc-quicks { flex: 1; width: auto; min-width: 0; height: var(--dmc-stakeH); }
  .dmc-returns { flex: none; width: calc(52% - 4px); height: var(--dmc-primH); }
  .dmc-primary { flex: 1; width: auto; min-width: 0; height: var(--dmc-primH); }
  /* the phone result card holds the number + the credit; the verdict is the banner's job there (it says the same) */
  .dmc-verdict { display: none; }
  .dmc-root[data-tier="xs"] .dmc-credit { display: none; }
  .dmc-stinger { padding: 10px 16px; }
  .dmc-stinger[data-kind="win"] { top: 60%; }
}

/* ══ DESKTOP — ONE fixed box, 1280 × 553, scaled as a unit by BoardFit ═══════════════════════════════
 * ⛔ A MEASUREMENT IN THREE COPIES: here, DMC_FIT_W / DMC_FIT_H in dice_mp.js, and board-fit.js.
 * 553 = the mock's 637 less its 84px chat strip: main 317 = 553 − 2·16 − 44 − 136 − 2·12.
 * ⛔ `.wrap` opts out of the 640px content column in BOTH blocks (Critical `.427`: a right-sized box with 664px
 * hanging off the screen). */
@media (min-width: 1000px) {
  #dice-mp-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .dmc-root {
    --dmc-pad: 16px; --dmc-gap: 12px; --dmc-hdrH: 44px; --dmc-hdrGap: 14px; --dmc-hdrPad: 14px; --dmc-fsTable: 9px; --dmc-fsRound: 11px; --dmc-lsRound: .1em;
    --dmc-clkGap: 8px; --dmc-clkWhoW: 120px; --dmc-clkW: 74px; --dmc-clkNW: 18px; --dmc-fsClk: 13px;
    --dmc-bannerH: 46px; --dmc-bavS: 28px; --dmc-fsBanner: 18px;
    --dmc-resultH: 77px; --dmc-fsBig: 54px;
    --dmc-barBlockH: 174px; --dmc-bbGap: 6px; --dmc-bbPadV: 12px; --dmc-bbPadH: 18px; --dmc-lblH: 20px; --dmc-barH: 38px; --dmc-handleS: 30px; --dmc-handleTop: -36px; --dmc-rchipTop: -22px;
    --dmc-pillH: 28px; --dmc-pillW: 88px;
    --dmc-standW: 344px; --dmc-rowH: 42px; --dmc-avS: 26px; --dmc-fsName: 13px; --dmc-fsState: 8.5px; --dmc-rightW: 96px; --dmc-fsChips: 14px;
    --dmc-sideH: 62px; --dmc-sidesGap: 12px; --dmc-fsSide: 20px;
    --dmc-stakeH: 62px; --dmc-fieldW: 176px; --dmc-fieldPad: 12px; --dmc-fvalH: 26px; --dmc-nudgeW: 28px; --dmc-fsField: 19px; --dmc-qH: 30px;
    --dmc-fsRet: 17px; --dmc-fsPrim: 15px; --dmc-fsSting: 26px;
    width: 1280px; height: 553px; border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 26px 60px -30px #000;
  }
  .dmc-main { height: 317px; }
  .dmc-stinger[data-kind="win"] { font-size: 21px; }
  .dmc-stinger[data-kind="win"] .dmc-sgt { font-size: 21px; }
}

/* ══ SOLO TABLE SKIN — solo Dice (#game-screen, dice-game.js) in this table's look ═══════════════════════
 * Owner 2026-09-22 (docs/design/dice-mp-mock-review.md "Solo V3" + OWNER RULINGS): Table is solo's DEFAULT
 * look, "Normal" the opt-out — a checkbox in .dv-foot beside "Effects on", remembered per device.
 * Mock: docs/design/batch7/DiceSolo-V3.dc.html, whose skinVals() overrides the styles of the SAME DOM.
 *
 * ⛔ A PURE RESTYLE. One class (`.dv-table` on .dv-shell) + these rules + a few `.dv-tb` elements that are
 * display:none in Normal. Every live control is the same element in both looks, so the money path cannot tell
 * them apart — and solo's odds stay 99 ÷ chance (diceTableSync), never this table's 100 ÷ chance.
 * ⛔ Selectors say `#game-screen .dv-table`, NEVER `#game-screen .dv-shell…`: dice-board.test.html reads the
 * LAST `#game-screen .dv-shell` rule in a min-width:1000px block as THE desktop design box.
 * ⛔ Colours are var()s only (the suite walks every `^.dv-` / `^#game-screen ` rule for a raw literal):
 * --pgr-* from the equipped scheme, --dmc-under / --dmc-over / --dmc-mono from the shared block at the top.
 * Solo keeps .topbar on phones in BOTH looks, so this skin owes no notch line (memory predicely_notch_safe_area).
 * ⭐ LOCKED: the extra pieces are absolutely placed on the bar (line, zones, pin, chip) or fixed text that only
 * moves with the slider (the side labels), so a roll changes contents, never a box. */
.dv-tb { display: none; }

#game-screen .dv-table .dv-tile-lbl,
#game-screen .dv-table .dv-lbl,
#game-screen .dv-table .dv-sess-lbl {
  font-family: var(--dmc-mono); font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  font-size: calc(var(--dv-lblFs) - 1px);
}
#game-screen .dv-table .dv-tile-lbl { font-size: calc(var(--dv-tileLabelFs, clamp(11px,2.7vw,12.5px)) - 1.5px); }
#game-screen .dv-table .dv-sess-lbl { letter-spacing: .05em; font-size: calc(var(--dv-lblFs) - 2px); }
#game-screen .dv-table .dv-topup-row {
  font-family: var(--dmc-mono); font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
  font-size: calc(var(--dv-lblFs) - 2px); overflow: hidden;
}
#game-screen .dv-table .dv-pill { border-radius: 7px; font-family: var(--dmc-mono); font-size: calc(var(--dv-stripFs, clamp(11.5px,3vw,13px)) - 1px); }

/* result card */
/* NOT uppercased (the mock does): "✗ LOSS — 1,000 COINS · XP MAXED TODAY" wrapped to two lines at 360px
 * (measured, 20 → 40px) and shoved the board. One line always; the ellipsis is a last-resort guard. */
#game-screen .dv-table .dv-verdict { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#game-screen .dv-table .dv-flavor {
  font-family: var(--dmc-mono); font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  font-size: calc(var(--dv-flavorFs, clamp(12.5px,3.2vw,14.5px)) - 2px);
}

/* the head: ◀ UNDER · chance · payout | LINE nn.nn | chance · payout · OVER ▶ */
#game-screen .dv-table .dv-target { display: grid; grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
#game-screen .dv-table .dv-target-head { grid-row: 1; grid-column: 1; align-items: center; gap: 8px; min-width: 0; }
#game-screen .dv-table .dv-target-head > .dv-lbl { display: none; }
#game-screen .dv-table .dv-tb-side {
  display: block; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--dmc-mono); font-size: calc(var(--dv-lblFs) - .5px); letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
#game-screen .dv-table .dv-tb-under { color: var(--dmc-under); }
#game-screen .dv-table .dv-tb-over { color: var(--dmc-over); text-align: right; }
/* a narrow board keeps the words and drops the numbers — the side buttons carry them right below */
@container (max-width: 440px) { #game-screen .dv-table .dv-tb-hx { display: none; } }
#game-screen .dv-table #target-display {
  flex: none; white-space: nowrap; line-height: 1.25; padding: 2px 8px; border-radius: 5px;
  font-family: var(--dmc-mono); font-size: calc(var(--dv-lblFs) + .5px); font-weight: 700; letter-spacing: .1em;
  border: 1px solid var(--dmc-over); color: var(--dmc-over);
}
#game-screen .dv-table #target-display::before { content: 'LINE '; }

/* ⭐ THE BAR. .dv-zone becomes the 30px bar and the REAL range input is laid over it in the same grid cell, so the
 * whole bar is the drag surface (DMM4) and the native thumb IS the handle. The input is 96% + one thumb wide and
 * starts 2% − half a thumb in, so its value v (2…98) puts the thumb's centre at exactly v% of the bar — the same
 * scale as the line (--dv-target) and the roll pin (the roll's own %). */
#game-screen .dv-table .dv-zone {
  grid-row: 2; grid-column: 1; height: 30px; margin-top: 20px; overflow: visible;
  border-radius: 8px; background: var(--pgr-track, rgba(255,255,255,.07)); border: 1px solid var(--pgr-line, #2e2e2e);
}
#game-screen .dv-table #chance-fill { display: none; }
#game-screen .dv-table .dv-tb-uzone {
  display: block; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--dv-target, 50) * 1%);
  border-radius: 7px 0 0 7px; opacity: .6; transition: width .15s;
  background: repeating-linear-gradient(135deg, var(--dmc-under) 0 5px, transparent 5px 10px);
}
#game-screen .dv-table .dv-tb-ozone {
  display: block; position: absolute; right: 0; top: 0; bottom: 0; width: calc((100 - var(--dv-target, 50)) * 1%);
  border-radius: 0 7px 7px 0; opacity: .65; transition: width .15s;
  background: radial-gradient(var(--dmc-over) 1.4px, transparent 1.5px) 0 0 / 7px 7px;
}
#game-screen .dv-table .dv-tb-line {
  display: block; position: absolute; top: -4px; bottom: -4px; left: calc(var(--dv-target, 50) * 1%); width: 3px;
  transform: translateX(-1.5px); background: var(--dmc-over); box-shadow: 0 0 10px -2px var(--dmc-over); transition: left .15s;
}
#game-screen .dv-table #target-slider {
  grid-row: 2; grid-column: 1; justify-self: start; position: relative; z-index: 2;
  width: calc(96% + 18px); margin: 20px 0 0 calc(2% - 9px); height: 30px;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
#game-screen .dv-table #target-slider::-webkit-slider-runnable-track { height: 30px; background: transparent; border: 0; }
#game-screen .dv-table #target-slider::-moz-range-track { height: 30px; background: transparent; border: 0; }
#game-screen .dv-table #target-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: 6px; border-radius: 50%;
  background: var(--dmc-over); border: 3px solid var(--pgr-solid, #15161a); box-shadow: 0 2px 9px -1px var(--pgr-shadow, rgba(0,0,0,.65));
}
#game-screen .dv-table #target-slider::-moz-range-thumb {
  width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%;
  background: var(--dmc-over); border: 3px solid var(--pgr-solid, #15161a); box-shadow: 0 2px 9px -1px var(--pgr-shadow, rgba(0,0,0,.65));
}
#game-screen .dv-table #target-slider:focus-visible { outline: 2px solid var(--dmc-over); outline-offset: 2px; border-radius: 8px; }
/* the roll pin (the marker, centred now) and its chip, which only shows once the number has LANDED */
#game-screen .dv-table .dv-marker {
  top: -6px; bottom: -6px; width: 3px; border-radius: 0; transform: translateX(-1.5px); background: var(--pgr-txt, #e8e8e8);
}
#game-screen .dv-table .dv-marker::after {
  content: attr(data-roll); position: absolute; left: 50%; top: -14px;
  /* slides from left-aligned at 0 to right-aligned at 100, so a 0.3 or a 99.9 never hangs off the bar */
  transform: translateX(calc(var(--dv-roll, 50) * -1%));
  font-family: var(--dmc-mono); font-size: 10px; line-height: 12px; font-weight: 700; white-space: nowrap;
  padding: 1px 5px; border-radius: 5px; background: var(--pgr-solid, #15161a); border: 1px solid var(--pgr-txt, #e8e8e8);
  color: var(--pgr-txt, #e8e8e8); opacity: 0; transition: opacity .18s;
}
#game-screen .dv-table:has(#roll-num.win, #roll-num.lose) .dv-marker[data-roll]:not([data-roll=""])::after { opacity: 1; }
#game-screen .dv-table .dv-zone-scale,
#game-screen .dv-table .dv-stats {
  grid-column: 1; font-family: var(--dmc-mono); font-weight: 400; text-transform: uppercase; letter-spacing: .06em;
}
#game-screen .dv-table .dv-stats b { text-transform: none; }
#game-screen .dv-table .dv-zone-scale { grid-row: 3; margin-top: 6px; font-size: calc(var(--dv-lblFs) - 1.5px); }
#game-screen .dv-table .dv-stats { grid-row: 4; margin-top: 6px; font-size: calc(var(--dv-statFs) - 2px); }

/* the side buttons: ◀ ROLL UNDER / 49.99 / 50% CHANCE · 1.98× — UNDER blue, OVER amber (colour + glyph) */
#game-screen .dv-table .dv-dir-btn:first-child { --dv-side: var(--dmc-under); }
#game-screen .dv-table .dv-dir-btn:last-child { --dv-side: var(--dmc-over); }
#game-screen .dv-table .dv-dir-btn { border: 1px solid var(--pgr-line, #2e2e2e); background: var(--pgr-panel, #1a1a1a); color: var(--pgr-txt, #e8e8e8); }
#game-screen .dv-table .dv-dir-btn.active {
  border: 1.8px solid var(--dv-side); color: var(--dv-side); background: color-mix(in srgb, var(--dv-side) 18%, transparent);
}
#game-screen .dv-table .dv-dir-btn.active.dv-flash-win  { --dv-side: var(--pgr-sel, #1D9E75); box-shadow: 0 0 0 1px var(--dv-side), 0 0 22px -6px var(--dv-side); }
#game-screen .dv-table .dv-dir-btn.active.dv-flash-lose { --dv-side: var(--dv-lose); box-shadow: 0 0 0 1px var(--dv-side), 0 0 22px -6px var(--dv-side); }
#game-screen .dv-table .dv-dir-lbl {
  font-family: var(--dmc-mono); font-size: .47em; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: inherit; opacity: .85;
}
#game-screen .dv-table .dv-dir-btn:first-child .dv-dir-lbl::before { content: '◀ '; }
#game-screen .dv-table .dv-dir-btn:last-child .dv-dir-lbl::after { content: ' ▶'; }
#game-screen .dv-table #under-label,
#game-screen .dv-table #over-label { font-size: 1.05em; font-weight: 800; line-height: 1.05; }
#game-screen .dv-table .dv-dir-sub {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--dmc-mono); font-size: .48em; font-weight: 400; letter-spacing: .07em; text-transform: uppercase;
  color: var(--pgr-dim, #888); opacity: .85;
}

/* roll + bet */
#game-screen .dv-table .roll-btn {
  border-radius: 14px; text-transform: uppercase; letter-spacing: .07em;
  font-size: calc(var(--dv-rollFs, clamp(18px,4.8vw,21px)) - 3px);
}
#game-screen .dv-table .dv-quicks button {
  border-radius: 8px; font-family: var(--dmc-mono); font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  font-size: calc(var(--dv-quickFs, clamp(12.5px,3.2vw,14px)) - 1.5px);
}
#game-screen .dv-table .dv-stress {
  font-family: var(--dmc-mono); letter-spacing: .1em; text-transform: uppercase; font-size: calc(var(--dv-statFs) - 1.5px);
}

/* session + history */
#game-screen .dv-table .dv-history .h-bal {
  font-family: var(--dmc-mono); font-size: .9em; letter-spacing: .07em; text-transform: uppercase;
}