/* frontend/ceelo.css — CEE-LO board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Skewers / Salvage precedent: a board suite
 * that slices its block out of style.css breaks on someone else's append.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's palette block (docs/design/Batch 5/
 * Cee-lo.dc.html, `--ce-*` on body). ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD:
 * the setup card sits outside `.ce-root`, and a var() fallback is not a scope.
 *
 * ── 🎨 THE PIXEL SKIN COMES LATER, AS A TOGGLE (owner 2026-09-13, the Skewers / Salvage shape) ──
 * Radii, fonts and gradients are VARIABLES (`--ce-r*`, `--ce-font*`, `--ce-g*`) so the pixel
 * direction (mock frame F10) is a class that redefines them and NOTHING ELSE — a skin may change
 * colour, radius, shadow and font; it may not move a box.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every band has a FIXED height in every phase (the roll area is the one flexible band). Every
 * card, pill, chip button and die slot holds its space whether lit or not; every border is the
 * SAME width in every state (a thicker "active" border moved Skewers' boxes). Feedback changes
 * colour, glow or a 1px transform — never size.
 */

#ceelo-game-screen, .ce-root {
  --ce-page: #0a0c0b; --ce-ink: #eef1ec; --ce-dim: #96a39a; --ce-dim2: #5c6a61;
  --ce-felt: #16241d; --ce-felt2: #101b15; --ce-deep: #0b130f;
  --ce-panel: #1a2a22; --ce-panel2: #142019; --ce-line: #2c4135; --ce-line2: #3d5a49;
  --ce-gold: #e8b83c; --ce-gold-d: #a9822a; --ce-gold-t: #3a2c08;
  --ce-gold-soft: rgba(232, 184, 60, .14); --ce-gold-glow: rgba(232, 184, 60, .6);
  --ce-win: #5fc88b; --ce-lose: #e7623f; --ce-push: #79a8e0;
  --ce-p1: #f2f5ee; --ce-p2: #e8b83c; --ce-p3: #5fc88b; --ce-p4: #79a8e0; --ce-p5: #e7623f; --ce-p6: #c79bdd;
  --ce-av-ink: #0e1712;
  --ce-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ce-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ce-r1: 5px; --ce-r2: 9px; --ce-r3: 14px; --ce-rp: 999px;
  --ce-g-shell: linear-gradient(180deg, #0e1712, #0a0f0c);
  --ce-g-felt: linear-gradient(180deg, #18271f, #0f1a14);
  --ce-g-card: linear-gradient(180deg, #1b2b22, #0e1712);
  --ce-die: 84px;
}

@keyframes ce-ring  { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 184, 60, .55) } 55% { box-shadow: 0 0 0 7px rgba(232, 184, 60, 0) } }
@keyframes ce-pulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes ce-flick { 0%, 100% { opacity: 1 } 47% { opacity: .25 } }
@keyframes ce-land  { 0% { transform: translateY(-10px); opacity: 0 } 60% { transform: translateY(2px); opacity: 1 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes ce-sting { 0% { transform: scale(.92); opacity: 0 } 40% { transform: scale(1.02); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }
@keyframes ce-glow  { 0%, 100% { box-shadow: 0 0 20px -6px rgba(232, 184, 60, .55) } 50% { box-shadow: 0 0 34px -4px rgba(232, 184, 60, .95) } }

/* ── setup card (the app's own surface) ─────────────────────────────────── */
.ce-setup-card { max-width: 520px; margin: 1rem auto; display: flex; flex-direction: column; gap: 10px; }
.ce-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.ce-setup-title { margin: 0; font-size: 28px; }
.ce-setup-blurb, .ce-setup-hint { margin: 0; line-height: 1.5; font-size: 14px; }
.ce-setup-hint { opacity: .75; font-size: 13px; }
.ce-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ce-setup-lab { font-weight: 700; font-size: 13px; width: 64px; }
.ce-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.ce-opt { width: 44px; height: 40px; border-radius: 10px; border: 1px solid rgba(127, 127, 127, .45); background: transparent; color: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.ce-opt[data-on="1"] { background: var(--ce-gold); border-color: var(--ce-gold-d); color: var(--ce-gold-t); }
.ce-start { height: 48px; border: 0; border-radius: 12px; background: var(--ce-gold); color: var(--ce-gold-t); font-weight: 800; font-size: 16px; cursor: pointer; }
.ce-start:hover { filter: brightness(1.08); }

/* ── the board root (phone first) ───────────────────────────────────────── */
.ce-root {
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  width: 100%; height: var(--ce-phone-h, 720px);
  background: var(--ce-g-shell); color: var(--ce-ink); font-family: var(--ce-font);
  border: 1px solid var(--ce-line); border-radius: var(--ce-r3);
}
.ce-root *, .ce-root *::before, .ce-root *::after { box-sizing: border-box; }
.ce-root button { -webkit-tap-highlight-color: transparent; }
.ce-root i, .ce-root em { font-style: normal; }

.ce-head {
  flex: none; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 8px;
  background: rgba(22, 36, 29, .85); border-bottom: 1px solid var(--ce-line);
}
.ce-brand { flex: none; display: flex; align-items: center; gap: 7px; font-family: var(--ce-mono); font-size: 10px; font-weight: 700; letter-spacing: .22em; color: var(--ce-ink); }
.ce-brand i { width: 10px; height: 10px; background: var(--ce-gold); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ce-stats { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-family: var(--ce-mono); font-size: 8px; letter-spacing: .1em; color: var(--ce-dim2); white-space: nowrap; overflow: hidden; }
.ce-stats b { color: var(--ce-ink); font-weight: 400; }
.ce-stats > i { flex: none; width: 1px; height: 12px; background: var(--ce-line2); }
/* fixed widths — the values change every round and a content-sized stat moved its neighbours */
.ce-stats #ce-hbank { display: inline-block; width: 8.6ch; }
.ce-stats #ce-hround { display: inline-block; width: 2ch; }
.ce-stats #ce-hbanker { display: inline-block; width: 6ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.ce-hround { display: none; }
.ce-stats > i:nth-of-type(1) { display: none; }
.ce-hright { display: none; }
.ce-menu, .ce-info {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--ce-line2);
  background: var(--ce-panel); color: var(--ce-ink); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ce-info { font-weight: 700; display: none; }
.ce-menu:hover, .ce-info:hover { border-color: var(--ce-gold); color: var(--ce-gold); }

.ce-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }

/* ── seats ───────────────────────────────────────────────────────────────── */
.ce-seatcol { order: 2; flex: none; display: flex; flex-direction: column; gap: 5px; }
.ce-collbl { display: none; }
.ce-seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ce-seat {
  position: relative; height: 56px; min-width: 0; display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 3px 6px; padding: 4px 6px;
  background: rgba(26, 42, 34, .72); border: 2px solid var(--ce-line); border-radius: var(--ce-r2);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.ce-seat[data-bank="1"] { background: rgba(232, 184, 60, .09); border-color: var(--ce-gold); }
.ce-seat[data-acting="1"] { box-shadow: 0 0 0 1px var(--ce-gold); animation: ce-ring 1.5s ease-out infinite; }
.ce-seat[data-out="1"] { opacity: .5; filter: grayscale(.8); }
.ce-avwrap { position: relative; flex: none; width: 24px; height: 24px; }
.ce-av { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--ce-p1); }
.ce-av b { font-family: var(--ce-mono); font-size: 10px; font-weight: 700; color: var(--ce-av-ink); line-height: 1; }
.ce-av[data-col="1"] { background: var(--ce-p1); } .ce-av[data-col="2"] { background: var(--ce-p2); } .ce-av[data-col="3"] { background: var(--ce-p3); }
.ce-av[data-col="4"] { background: var(--ce-p4); } .ce-av[data-col="5"] { background: var(--ce-p5); } .ce-av[data-col="6"] { background: var(--ce-p6); }
/* identity by SHAPE first (owner is colourblind) — the mock's six silhouettes */
.ce-av[data-sh="circle"] { border-radius: 50%; }
.ce-av[data-sh="square"] { border-radius: 3px; }
.ce-av[data-sh="tri"] { clip-path: polygon(50% 2%, 100% 100%, 0 100%); }
.ce-av[data-sh="tri"] b { padding-top: 30%; }
.ce-av[data-sh="diamond"] { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ce-av[data-sh="hex"] { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.ce-av[data-sh="penta"] { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.ce-av[data-sh="penta"] b { padding-top: 18%; }
.ce-mark {
  position: absolute; right: -5px; bottom: -4px; width: 14px; height: 14px; display: none; align-items: center; justify-content: center;
  font-family: var(--ce-mono); font-size: 7px; font-weight: 700; border-radius: 50%; border: 1px solid var(--ce-av-ink); color: var(--ce-av-ink);
}
.ce-mark[data-on="bank"] { display: flex; background: var(--ce-gold); }
.ce-mark[data-on="act"] { display: flex; background: var(--ce-ink); }
.ce-smid { flex: 1 1 56%; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ce-srow1 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ce-sname { min-width: 0; font-family: var(--ce-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--ce-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-seat[data-o="0"] .ce-sname { color: var(--ce-ink); }
.ce-role {
  flex: none; width: 40px; text-align: center; font-family: var(--ce-mono); font-size: 7px; letter-spacing: .08em; padding: 1px 0; white-space: nowrap;
  border-radius: var(--ce-r1); color: var(--ce-dim2); border: 1px dashed var(--ce-line);
}
.ce-role[data-bank="1"] { color: var(--ce-gold); border: 1px solid var(--ce-gold); }
.ce-srow2 { display: flex; align-items: baseline; gap: 4px; }
.ce-chips { font-family: var(--ce-mono); font-size: 13px; font-weight: 700; line-height: 1; color: var(--ce-ink); display: inline-block; width: 4.2ch; }
.ce-srow2 small { font-family: var(--ce-mono); font-size: 7px; letter-spacing: .14em; color: var(--ce-dim2); }
.ce-betwrap { flex: 1 1 calc(52% - 3px); display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 5px; }
.ce-betwrap small { font-family: var(--ce-mono); font-size: 7px; letter-spacing: .14em; color: var(--ce-dim2); }
.ce-bet {
  flex: none; width: 32px; height: 18px; display: flex; align-items: center; justify-content: center; font-family: var(--ce-mono); font-size: 10px; font-weight: 700;
  border-radius: var(--ce-rp); color: var(--ce-dim2); background: transparent; border: 1px dashed var(--ce-line);
}
.ce-bet[data-on="1"] { color: var(--ce-gold); background: var(--ce-gold-soft); border: 1px solid var(--ce-gold-d); }
.ce-bet[data-land="1"] { animation: ce-land .5s ease-out; }
.ce-outwrap { flex: 1 1 calc(48% - 3px); display: flex; justify-content: flex-end; }
.ce-out {
  flex: none; width: 66px; height: 18px; display: flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; overflow: hidden;
  font-family: var(--ce-mono); font-size: 7.5px; letter-spacing: .06em; border-radius: var(--ce-r1);
  color: var(--ce-dim2); border: 1px solid var(--ce-line);
}
.ce-out em { font-size: 8px; line-height: 1; }
.ce-out[data-k="won"] { color: var(--ce-win); border: 1px solid var(--ce-win); background: rgba(95, 200, 139, .1); }
.ce-out[data-k="lost"] { color: var(--ce-lose); border: 1px dashed var(--ce-lose); }
.ce-out[data-k="push"] { color: var(--ce-push); border: 1px dotted var(--ce-push); }
.ce-out[data-k="roll"] { color: var(--ce-gold); border: 1px solid var(--ce-gold); background: rgba(232, 184, 60, .1); animation: ce-pulse 1.3s ease-in-out infinite; }
.ce-out[data-k="place"] { color: var(--ce-gold); border: 1px dotted var(--ce-gold); }
.ce-out[data-k="sat"], .ce-out[data-k="out"] { color: var(--ce-dim); border: 1px dashed var(--ce-dim2); }

/* ── the centre: banker's point + roll area ─────────────────────────────── */
.ce-center { order: 1; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.ce-pt {
  order: 0; flex: none; height: 42px; display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 0 10px;
  background: rgba(20, 32, 25, .8); border: 1px dashed var(--ce-line); border-radius: var(--ce-r2);
}
.ce-pt[data-on="1"] { border: 1px solid var(--ce-gold); }
.ce-ptl { flex: none; width: 118px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ce-ptl small { font-family: var(--ce-mono); font-size: 8px; letter-spacing: .16em; color: var(--ce-dim2); white-space: nowrap; }
.ce-pt[data-on="1"] .ce-ptl small { color: var(--ce-gold); }
.ce-ptl span { font-family: var(--ce-mono); font-size: 8px; letter-spacing: .08em; color: var(--ce-dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-ptbadge {
  flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--ce-line);
}
.ce-pt[data-on="1"] .ce-ptbadge { background: var(--ce-gold); }
.ce-ptbadge b { font-family: var(--ce-mono); font-size: 14px; font-weight: 700; color: var(--ce-dim); }
.ce-pt[data-on="1"] .ce-ptbadge b { color: var(--ce-gold-t); }
.ce-pthint { flex: 1; min-width: 0; margin-left: auto; text-align: right; font-family: var(--ce-mono); font-size: 7.5px; letter-spacing: .08em; line-height: 1.35; color: var(--ce-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ce-rollp {
  order: 1; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px 8px 8px; overflow: hidden;
  background: var(--ce-g-felt); border: 1px solid var(--ce-line2); box-shadow: inset 0 0 60px -18px #000; border-radius: var(--ce-r3);
}
.ce-potrow { flex: none; height: 20px; display: flex; align-items: center; gap: 8px; }
.ce-pot { flex: none; width: 74px; height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: var(--ce-rp); background: rgba(10, 15, 12, .7); border: 1px solid var(--ce-line2); }
.ce-pot small { font-family: var(--ce-mono); font-size: 7.5px; letter-spacing: .16em; color: var(--ce-dim2); }
.ce-pot b { font-family: var(--ce-mono); font-size: 10px; font-weight: 700; color: var(--ce-gold); }
.ce-roller { flex: 1; min-width: 0; text-align: right; font-family: var(--ce-mono); font-size: 8px; letter-spacing: .1em; color: var(--ce-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-roller[data-hot="1"] { color: var(--ce-gold); }
.ce-dice { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ce-dwrap { flex: none; width: var(--ce-die); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ce-dtag {
  height: 13px; min-width: 42px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
  font-family: var(--ce-mono); font-size: 8px; font-weight: 700; letter-spacing: .12em; border-radius: var(--ce-r1); color: transparent; border: 1px solid transparent;
}
.ce-dwrap[data-role="pair"] .ce-dtag { color: var(--ce-dim2); border: 1px dashed var(--ce-line2); }
.ce-dwrap[data-role="point"] .ce-dtag { color: var(--ce-gold-t); background: var(--ce-gold); border: 1px solid var(--ce-gold); }
.ce-dslot {
  position: relative; width: var(--ce-die); height: var(--ce-die); border-radius: 14%;
  transition: transform .2s, opacity .2s, box-shadow .2s;
}
.ce-die { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ce-ghost { width: 100%; height: 100%; border-radius: 14%; border: 1px dashed var(--ce-line2); background: rgba(231, 235, 225, .08); }
/* meaning goes AROUND a die: the pair steps back and dims (never shrinks); the point is ringed */
.ce-dwrap[data-role="pair"] .ce-dslot { transform: translateY(5px); opacity: .62; }
.ce-dwrap[data-role="point"] .ce-dslot { box-shadow: 0 0 0 3px var(--ce-gold), 0 0 26px -4px rgba(232, 184, 60, .85); }
.ce-dwrap[data-role="lit"] .ce-dslot { animation: ce-glow 1.4s ease-in-out infinite; }
.ce-dwrap[data-role="lit"][data-tone="loss"] .ce-dslot { animation: none; box-shadow: 0 0 0 3px var(--ce-lose); }
.ce-dfoot { height: 11px; font-family: var(--ce-mono); font-size: 7.5px; letter-spacing: .1em; color: var(--ce-dim2); white-space: nowrap; }
.ce-die-fallback { display: flex; align-items: center; justify-content: center; background: #e7ebe1; color: #131a15; border-radius: 12px; font-weight: 800; font-size: 24px; }

.ce-result {
  flex: none; height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border-radius: var(--ce-r2);
  background: rgba(10, 15, 12, .72); border: 1px dashed var(--ce-line);
}
.ce-resico { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; border-radius: 50%; color: var(--ce-dim2); border: 1px solid var(--ce-dim2); }
.ce-result b { flex: none; max-width: 70%; font-size: 15px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ce-dim2); }
.ce-result span { flex: 1; min-width: 0; margin-left: auto; text-align: right; font-family: var(--ce-mono); font-size: 7.5px; letter-spacing: .1em; line-height: 1.35; color: var(--ce-dim); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ce-result[data-kind="win"] { border: 1px solid var(--ce-win); }
.ce-result[data-kind="win"] b, .ce-result[data-kind="win"] .ce-resico { color: var(--ce-win); border-color: var(--ce-win); }
.ce-result[data-kind="loss"] { border: 1px solid var(--ce-lose); }
.ce-result[data-kind="loss"] b, .ce-result[data-kind="loss"] .ce-resico { color: var(--ce-lose); border-color: var(--ce-lose); }
.ce-result[data-kind="point"] { border: 1px solid var(--ce-gold); }
.ce-result[data-kind="point"] b, .ce-result[data-kind="point"] .ce-resico { color: var(--ce-gold); border-color: var(--ce-gold); }
.ce-result[data-kind="none"] { border: 1px solid var(--ce-dim); animation: ce-flick 1s steps(1, end) 1; }
.ce-result[data-kind="none"] b, .ce-result[data-kind="none"] .ce-resico { color: var(--ce-dim); border-color: var(--ce-dim); }

/* ── controls ────────────────────────────────────────────────────────────── */
.ce-ctl { order: 3; flex: none; display: flex; flex-direction: column; gap: 5px; }
.ce-prompt {
  flex: none; height: 34px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 9px; overflow: hidden;
  background: rgba(26, 42, 34, .7); border: 1px solid var(--ce-line); border-radius: var(--ce-r2);
}
.ce-prompt[data-hot="1"] { border-color: var(--ce-gold); }
.ce-prompt small { font-family: var(--ce-mono); font-size: 7.5px; letter-spacing: .14em; color: var(--ce-dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-prompt b { font-size: 10.5px; font-weight: 700; line-height: 1.2; color: var(--ce-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-prompt[data-hot="1"] b { color: var(--ce-gold); }
.ce-ladder { flex: none; display: flex; flex-direction: column; gap: 4px; }
.ce-ladlbl { display: none; }
.ce-ladrow { display: flex; gap: 6px; }
.ce-chip {
  flex: 1 1 0; min-width: 0; height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer;
  border-radius: var(--ce-r2); background: var(--ce-panel); border: 2px solid var(--ce-line2); color: var(--ce-ink);
  transition: filter .12s, box-shadow .12s, border-color .12s, color .12s, background .12s, transform .08s;
}
.ce-chip b { font-family: var(--ce-mono); font-size: 14px; font-weight: 700; line-height: 1; }
.ce-chip small { font-family: var(--ce-mono); font-size: 7px; letter-spacing: .1em; line-height: 1; opacity: .001; }
@media (hover: hover) {
  .ce-chip:not(:disabled):hover { border-color: var(--ce-gold); color: var(--ce-gold); box-shadow: 0 0 16px -5px rgba(232, 184, 60, .55); }
  .ce-roll:not(:disabled):hover { filter: brightness(1.12); box-shadow: 0 0 20px -2px rgba(232, 184, 60, .65); }
}
.ce-chip:not(:disabled):active, .ce-roll:not(:disabled):active { transform: translateY(1px); filter: brightness(.9); }
.ce-chip[data-sel="1"]:not(:disabled) { background: rgba(232, 184, 60, .16); border-color: var(--ce-gold); color: var(--ce-gold); box-shadow: inset 0 0 0 1px rgba(232, 184, 60, .25); }
.ce-chip[data-sel="1"]:not(:disabled) small { opacity: 1; }
/* ⛔ NOT ALLOWED: dashed edge + flattened ink, readable in greyscale — never a recolour alone, and
   the SAME border width as the live state */
.ce-chip:disabled { background: transparent; border: 2px dashed var(--ce-line); color: var(--ce-dim2); cursor: not-allowed; box-shadow: none; opacity: .72; }
.ce-betread { flex: none; height: 13px; line-height: 13px; font-family: var(--ce-mono); font-size: 8px; letter-spacing: .08em; color: var(--ce-dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-betread[data-hot="1"] { color: var(--ce-gold); }
.ce-spacer { display: none; }
.ce-roll {
  flex: none; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: var(--ce-r2); background: var(--ce-gold); border: 2px solid var(--ce-gold-d); color: var(--ce-gold-t);
  font-family: var(--ce-font); font-size: 17px; font-weight: 700; letter-spacing: .1em;
  transition: filter .12s, box-shadow .12s, transform .08s;
}
.ce-roll:disabled { background: transparent; border: 2px dashed var(--ce-line); color: var(--ce-dim2); cursor: not-allowed; box-shadow: none; opacity: .72; font-weight: 400; }
.ce-foot { flex: none; height: 11px; font-family: var(--ce-mono); font-size: 7px; letter-spacing: .08em; line-height: 11px; color: var(--ce-dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── flights + the stinger: ABSOLUTE layers INSIDE the root, never fixed ── */
.ce-fx { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.ce-fly {
  position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--ce-gold); border: 1px solid var(--ce-gold-d);
  transform: translate(-50%, -50%); transition-property: transform; transition-timing-function: cubic-bezier(.3, .1, .25, 1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
}
.ce-sting { position: absolute; inset: 0; z-index: 9; pointer-events: none; display: flex; align-items: center; justify-content: center; background: rgba(6, 10, 8, .62); }
.ce-sting[data-on="0"] { visibility: hidden; }
.ce-stcard {
  width: calc(100% - 40px); max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 14px; text-align: center;
  background: var(--ce-g-card); border: 2px solid var(--ce-gold); border-radius: var(--ce-r3); box-shadow: 0 30px 70px -30px #000;
}
.ce-sting[data-on="1"] .ce-stcard { animation: ce-sting .45s ease-out; }
.ce-sting[data-tone="loss"] .ce-stcard { border-color: var(--ce-lose); }
.ce-stcard i { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 15px; border-radius: 50%; color: var(--ce-gold); border: 2px solid var(--ce-gold); }
.ce-sting[data-tone="loss"] .ce-stcard i { color: var(--ce-lose); border-color: var(--ce-lose); }
.ce-stcard b { font-family: var(--ce-mono); font-size: 15px; font-weight: 700; letter-spacing: .12em; color: var(--ce-gold); }
.ce-sting[data-tone="loss"] .ce-stcard b { color: var(--ce-lose); }
.ce-stcard span { font-size: 11.5px; line-height: 1.5; color: var(--ce-ink); }

/* end screen rows (GameEndScreen html section) */
.ce-endrows { display: flex; flex-direction: column; gap: 6px; }
.ce-endrow { display: grid; grid-template-columns: 1fr auto 56px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.ce-endrow[data-win="1"] { background: rgba(232, 184, 60, .16); }
.ce-endnm { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.ce-endnm .ce-av { width: 22px; height: 22px; flex: none; }
.ce-endnm .ce-av b { font-size: 10px; }
.ce-endst { font-size: 12px; opacity: .75; font-family: ui-monospace, monospace; }
.ce-endsc { text-align: right; font-weight: 800; font-size: 16px; }
.ce-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .ce-seat, .ce-out, .ce-bet, .ce-stcard, .ce-dslot, .ce-result { animation: none !important; }
  .ce-fly { transition: none !important; }
}

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  /* ⛔ The vertical gutter goes too (the Pachisi / Salvage finding), scoped to a live board. */
  #ceelo-game-screen.ce-playing .wrap { padding: 0 2px; max-width: none; }
  #ceelo-game-screen.ce-playing .topbar { display: none; }
  #ceelo-game-screen.ce-playing.ce-topbar-open .topbar { display: flex; }
}
/* the 360 × 740 stress frame */
@media (max-width: 999px) and (max-height: 760px) {
  .ce-root { --ce-die: 70px; }
  .ce-head { height: 30px; }
  .ce-body { padding: 6px 8px; gap: 5px; }
  .ce-seat { height: 50px; padding: 3px 5px; }
  .ce-pt { height: 38px; }
  .ce-ptbadge { width: 26px; height: 26px; }
  .ce-result { height: 34px; }
  .ce-result b { font-size: 13px; }
  .ce-prompt { height: 32px; }
  .ce-chip { height: 38px; }
  .ce-roll { height: 44px; }
  .ce-foot { display: none; }
}
/* narrow: 360 wide */
@media (max-width: 370px) {
  .ce-out { width: 60px; font-size: 7px; }
  .ce-ptl { width: 104px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit ─────────────── */
@media (min-width: 1000px) {
  #ceelo-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .ce-root { width: 1280px; height: 553px; --ce-die: 132px; box-shadow: 0 26px 60px -30px #000; }
  .ce-menu { display: none; }
  .ce-info { display: inline-flex; }
  .ce-head { height: 40px; gap: 14px; padding: 0 14px; }
  .ce-brand { font-size: 12px; gap: 9px; }
  .ce-brand i { width: 12px; height: 12px; }
  .ce-stats { gap: 12px; font-size: 10px; letter-spacing: .12em; }
  .ce-stats #ce-hbanker { width: 7ch; }
  .ce-hround, .ce-stats > i:nth-of-type(1) { display: inline-block; }
  .ce-hright { display: block; flex: none; width: 150px; text-align: right; font-family: var(--ce-mono); font-size: 10px; letter-spacing: .12em; color: var(--ce-dim2); white-space: nowrap; }

  /* 306 + centre + 268 + 2 × 12 + 2 × 14 = 1280 */
  .ce-body { flex-direction: row; gap: 12px; padding: 12px 14px; }

  .ce-seatcol { order: 0; width: 306px; gap: 6px; }
  .ce-collbl { display: flex; flex: none; height: 18px; align-items: center; font-family: var(--ce-mono); font-size: 9px; letter-spacing: .16em; color: var(--ce-dim2); white-space: nowrap; }
  .ce-seats { display: flex; flex-direction: column; gap: 6px; }
  /* (489 content − 18 label − 6 − 5 × 6 gaps) / 6 = 72 — six seats fill the column exactly */
  .ce-seat { height: 72px; flex-wrap: nowrap; gap: 9px; padding: 6px 9px; }
  .ce-avwrap { width: 34px; height: 34px; }
  .ce-av b { font-size: 13px; }
  .ce-mark { width: 18px; height: 18px; font-size: 9px; right: -4px; bottom: -3px; }
  .ce-smid { flex: 1 1 auto; gap: 3px; }
  .ce-sname { font-size: 12px; letter-spacing: .06em; }
  .ce-role { width: 46px; font-size: 8px; }
  .ce-chips { font-size: 16px; }
  .ce-srow2 small { font-size: 8px; }
  .ce-betwrap { flex: none; width: 46px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
  .ce-betwrap small { font-size: 8px; }
  .ce-bet { width: 38px; height: 24px; font-size: 12px; }
  .ce-outwrap { flex: none; width: 76px; justify-content: center; }
  .ce-out { width: 76px; height: 20px; font-size: 8.5px; letter-spacing: .08em; }
  .ce-out em { font-size: 9px; }

  .ce-center { order: 1; gap: 12px; }
  .ce-pt { order: 2; height: 116px; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 12px; }
  .ce-ptl { width: auto; flex-direction: row; align-items: baseline; gap: 8px; }
  .ce-ptl small, .ce-ptl span { font-size: 9px; }
  .ce-ptl span { width: 150px; }
  .ce-ptbadge { width: 46px; height: 46px; margin-top: 2px; }
  .ce-ptbadge b { font-size: 22px; }
  .ce-pthint { flex: none; width: 100%; margin-left: 0; text-align: center; font-size: 9px; }

  .ce-rollp { order: 1; gap: 8px; padding: 10px 14px 14px; }
  .ce-potrow { height: 26px; gap: 10px; }
  .ce-pot { width: 96px; padding: 0 10px; }
  .ce-pot small { font-size: 9px; }
  .ce-pot b { font-size: 12px; }
  .ce-roller { font-size: 10px; letter-spacing: .12em; }
  .ce-dice { gap: 18px; }
  .ce-dwrap { gap: 5px; }
  .ce-dtag { height: 15px; font-size: 9px; letter-spacing: .14em; min-width: 52px; }
  .ce-dwrap[data-role="pair"] .ce-dslot { transform: translateY(6px); }
  .ce-dfoot { height: 12px; font-size: 8px; }
  .ce-result { height: 54px; gap: 10px; padding: 0 14px; }
  .ce-resico { width: 28px; height: 28px; font-size: 14px; }
  .ce-result b { font-size: 21px; letter-spacing: .02em; max-width: 380px; }
  .ce-result span { font-size: 10px; max-width: 210px; }

  .ce-ctl { order: 3; width: 268px; gap: 8px; }
  .ce-prompt { height: 64px; padding: 0 11px; gap: 3px; }
  .ce-prompt small { font-size: 8.5px; letter-spacing: .16em; }
  .ce-prompt b { font-size: 13px; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ce-ladder { gap: 6px; }
  .ce-ladlbl { display: block; height: 12px; font-family: var(--ce-mono); font-size: 8px; letter-spacing: .16em; color: var(--ce-dim2); }
  .ce-ladrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ce-chip { height: 46px; }
  .ce-chip b { font-size: 15px; }
  .ce-betread { height: 16px; line-height: 16px; font-size: 9.5px; }
  .ce-spacer { display: block; flex: 1 1 auto; min-height: 0; }
  .ce-roll { height: 66px; font-size: 21px; }
  .ce-foot { height: 26px; font-size: 8.5px; line-height: 1.45; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

  .ce-fly { width: 16px; height: 16px; }
  .ce-stcard { width: 520px; max-width: none; gap: 11px; padding: 24px 26px; }
  .ce-stcard i { width: 40px; height: 40px; font-size: 20px; }
  .ce-stcard b { font-size: 24px; letter-spacing: .16em; }
  .ce-stcard span { font-size: 14px; }
}

/* ── 🌐 MP: the turn clock (2026-09-16) ─────────────────────────────────────
 * An ABSOLUTE 3px bar along the prompt's bottom edge — the prompt is a fixed-height band, so the bar
 * can never move a box (locked layout). Off (and invisible) at every solo table. Colour says whose
 * clock it is: gold = yours, dim = someone else's, the loss colour under five seconds. */
.ce-prompt { position: relative; }
.ce-clock {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  transform-origin: left center; transform: scaleX(0); background: var(--ce-dim); opacity: 0; transition: opacity .18s linear;
}
.ce-clock[data-on="1"] { opacity: .85; }
.ce-clock[data-mine="1"] { background: var(--ce-gold); }
.ce-clock[data-low="1"] { background: var(--ce-lose); }