/* GAMES-A · Limbo · Dice · Mines stages and controls. Prefixes: .limbo- .dice- .mines- (owner: GAMES-A)
   Every stage is the Party Night well (night-0, 1px line, the viewed player's --pc glow) with that player's Chipper.
   Limbo is the founder's favourite screen (ADDENDUM §0), copied from the mock: keep it exactly. */

/* =============================================================== Limbo (the mock, exactly) */
.limbo-stage {
  position: relative; height: 290px; border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(60% 80% at 50% 50%, color-mix(in srgb, var(--pc) 10%, transparent), transparent 70%), var(--night-0);
  border: 1px solid var(--line);
  container-type: size;           /* the number fits the stage's width (cqw); the stage always has a set height */
}
.limbo-rings { position: absolute; inset: 0; margin: auto; width: 520px; height: 520px; opacity: .5; pointer-events: none; }
.limbo-num {
  position: relative; font: 900 clamp(60px, 8vw, 104px)/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  font-size: min(clamp(60px, 8vw, 104px), calc((100cqw - 32px) / var(--lw, 3.5)));   /* --lw: limbo.js, long results shrink */
  white-space: nowrap; color: var(--ink); transition: color .15s, text-shadow .2s, font-size .2s var(--out);
}
.limbo-num.win { color: var(--go); text-shadow: 0 0 40px rgba(43,216,129,.45); animation: winPop .45s var(--spring); }
.limbo-num.lose { color: var(--ink-3); }
.limbo-num.big { color: var(--gold); text-shadow: 0 0 50px rgba(255,200,61,.5); }
.limbo-need { position: relative; margin-top: 14px; font: 700 15px/1.3 var(--f-ui); color: var(--ink-3); text-align: center; padding: 0 12px; }
.limbo-need b { color: var(--ink); }
@media (max-width: 700px) {
  /* phones, top to bottom: the last results · the number · the rule line, which always ends above your Chipper in the
     corner (so "Win if it lands on…" is never under it); on a short stage the last results step aside */
  .limbo-stage { height: 210px; border-radius: 18px; justify-content: flex-start; }
  .limbo-num { margin-top: 44px; font-size: min(56px, calc((100cqw - 24px) / var(--lw, 3.5))); }
  .limbo-stage .stage-chip { left: 10px; bottom: 8px; }
  .limbo-stage .stage-chip .chip { width: 44px; height: 44px; }
  /* §8f: before the first roll the number rests grey, so YOUR MONEY in the top bar is the brightest number on screen */
  .limbo-num.idle { color: var(--ink-3); }
  .limbo-need { font-size: 13.5px; margin-top: 10px; }
  .limbo-stage .hist span:nth-child(n+6) { display: none; }
}

/* =============================================================== Dice */
.dice-stage {
  position: relative; height: 290px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(60% 80% at 50% 45%, color-mix(in srgb, var(--pc) 10%, transparent), transparent 70%), var(--night-0);
  border: 1px solid var(--line);
  user-select: none; -webkit-user-select: none;
  container-type: size;           /* the number and the track scale with the stage (cqw/cqh); it always has a set height */
}
.dice-mid { position: absolute; left: 0; right: 0; top: 44px; display: flex; flex-direction: column; align-items: center; padding: 0 16px; pointer-events: none; }
.dice-num {
  font: 900 clamp(56px, 6vw, 80px)/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  font-size: min(clamp(56px, 6vw, 80px), calc((100cqw - 32px) / 3.75));   /* 3.75em ≈ '88.88' wide: always fits */
  white-space: nowrap;
  color: var(--ink); transition: color .15s, text-shadow .2s;
}
.dice-num.win { color: var(--go); text-shadow: 0 0 40px rgba(43,216,129,.45); animation: winPop .45s var(--spring); }
.dice-num.lose { color: var(--ink-3); animation: diceThud .35s var(--out); }
.dice-num.big { color: var(--gold); text-shadow: 0 0 50px rgba(255,200,61,.5); }
@keyframes diceThud { 35% { transform: translateY(3px) scale(.985); } }
.dice-need { margin-top: 12px; font: 700 15px/1.3 var(--f-ui); color: var(--ink-3); text-align: center; }
.dice-need b { color: var(--ink); }

/* the 0–100 track: green = where you win; your Chipper rides it */
.dice-rail { position: absolute; left: 44px; right: 44px; bottom: 30px; height: 44px; cursor: ew-resize; touch-action: pan-y; outline: none; }
.dice-stage.is-watch .dice-rail { cursor: default; pointer-events: none; }
.dice-track {
  position: absolute; left: 0; right: 0; top: 50%; height: 16px; margin-top: -8px; border-radius: 99px; overflow: hidden;
  background: var(--night-3); box-shadow: inset 0 3px 0 rgba(0,0,0,.35), 0 0 0 1px var(--line-2);
}
.dice-zone {
  position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
  background: linear-gradient(180deg, #62EBA6, var(--go)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.16);
  transition: left .2s var(--out), width .2s var(--out);
}
.dice-line { position: absolute; top: 50%; left: 50%; width: 0; z-index: 1; transition: left .2s var(--out); }
.dice-line i {
  position: absolute; left: -7px; top: -17px; width: 14px; height: 34px; border-radius: 7px;
  background: #fff; box-shadow: 0 3px 0 #9C93C9, 0 8px 16px -6px rgba(0,0,0,.7);
  transition: transform .15s var(--spring);
}
.dice-line i::after { content: ""; position: absolute; left: 4px; right: 4px; top: 10px; bottom: 10px; background: repeating-linear-gradient(180deg, #B7AEE0 0 2px, transparent 2px 5px); }
.dice-rail:hover .dice-line i, .dice-stage.is-dragging .dice-line i { transform: scale(1.12); }
.dice-rail:focus-visible .dice-line i { box-shadow: 0 3px 0 #9C93C9, 0 0 0 4px var(--grape); }
.dice-stage.is-dragging .dice-zone, .dice-stage.is-dragging .dice-line, .dice-stage.is-dragging .dice-lv { transition: none; }
.dice-ticks { position: absolute; left: 0; right: 0; top: calc(50% + 21px); height: 16px; font: 700 13px/1 var(--f-ui); color: var(--ink-3); pointer-events: none; }
.dice-ticks span, .dice-lv { position: absolute; top: 0; transform: translateX(-50%); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dice-ticks span[data-at="0"] { left: 0; }
.dice-ticks span[data-at="50"] { left: 50%; }
.dice-ticks span[data-at="100"] { left: 100%; }
.dice-lv { left: 50%; font-weight: 800; color: var(--ink); transition: left .2s var(--out); }
.dice-rider { position: absolute; left: 50%; bottom: calc(50% + 5px); z-index: 2; transform: translateX(-50%); pointer-events: none; }
.dice-rider::before { content: ""; position: absolute; left: 50%; bottom: -3px; width: 62%; height: 8px; transform: translateX(-50%); border-radius: 50%; background: rgba(0,0,0,.42); }
.dice-rider .stage-chip { position: relative; left: auto; bottom: auto; }
.dice-rider .chip > ellipse:first-child { display: none; }     /* the rider draws the shadow, so it doesn't spin */

/* the control: CHANCE [49.50 %] [Under|Over] */
.dice-inp { padding-right: 8px; }
.dice-dir {
  flex: none; align-self: stretch; display: flex; gap: 3px; margin: 0 -6px 0 8px; padding: 3px;
  border-radius: 12px; background: var(--night-2); border: 1px solid var(--line);
}
.dice-dir button {
  appearance: none; border: 0; cursor: pointer; min-width: 58px; padding: 0 10px; border-radius: 9px;
  background: transparent; color: var(--ink-3); font: 800 13.5px/1 var(--f-ui); -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, transform .08s;
}
.dice-dir button:hover { color: var(--ink-2); }
.dice-dir button[aria-pressed="true"] { background: var(--night-4); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 var(--edge-dark); }
.dice-dir button:active { transform: translateY(2px); }
.dice-inp.readonly .dice-dir button { cursor: default; }
.dice-inp.readonly .dice-dir button[aria-pressed="true"] { background: color-mix(in srgb, var(--pc) 22%, var(--night-3)); }
/* QA: the 280px sidebar (1024–1199 wide): a slimmer Under/Over, so the chance reads whole ("49.50", not "49.5") */
@media (min-width: 1024px) and (max-width: 1199px) {
  .gm-ctl .dice-dir { margin-left: 4px; }
  .gm-ctl .dice-dir button { min-width: 48px; padding: 0 7px; }
}

@media (max-width: 700px) {
  /* phones, top to bottom: the last rolls (and the chat pill) · the roll number · the rule line · your Chipper riding
     the track · the ticks. Nothing overlaps: the rule line always ends above the rider (a smaller Chipper here), and
     on a short stage (a 740px-tall phone) the last rolls step aside so the number and the rule line move up. */
  .dice-stage { height: 210px; border-radius: 18px; }
  .dice-mid { top: 40px; }
  .dice-num { font-size: min(42px, calc(100cqh - 120px)); }
  .dice-num.idle { color: var(--ink-3); }      /* grey until the first roll (§8f: YOUR MONEY is the brightest number) */
  .dice-need { font-size: 13.5px; margin-top: 6px; }
  .dice-pays { display: none; }
  .dice-stage .hist span:nth-child(n+4) { display: none; }
  .dice-rail { left: 28px; right: 28px; bottom: 12px; height: 44px; }
  .dice-track { height: 12px; margin-top: -6px; }
  .dice-line i { left: -6px; top: -14px; width: 12px; height: 28px; }
  .dice-line i::after { top: 8px; bottom: 8px; left: 3px; right: 3px; }
  .dice-ticks { top: calc(50% + 16px); }
  .dice-rider { bottom: calc(50% + 3px); }
  .dice-rider .stage-chip .chip { width: 32px; height: 32px; }
  .dice-dir { padding: 1px; border: 0; margin-right: -7px; }
  .dice-dir button { min-width: 54px; padding: 0 8px; }
}
@media (max-width: 700px) {
  @container (max-height: 170px) {
    .limbo-stage .hist { display: none; }
    .limbo-num { margin-top: 14px; font-size: min(48px, calc((100cqw - 24px) / var(--lw, 3.5))); }
    .dice-stage .hist { display: none; }
    .dice-mid { top: 8px; }
    .dice-num { font-size: min(38px, calc(100cqh - 90px)); }
  }
}

/* =============================================================== Mines: a 4 × 4 board (CFG.MINES.TILES 16) */
.mines-stage {
  --mt: 62px; --mg: 7px; --mp: 11px;
  --board: calc(var(--mt) * 4 + var(--mg) * 3);
  position: relative; height: calc(var(--board) + var(--mp) * 2); border-radius: 24px; overflow: hidden;
  background: radial-gradient(60% 80% at 50% 50%, color-mix(in srgb, var(--pc) 10%, transparent), transparent 70%), var(--night-0);
  border: 1px solid var(--line);
  user-select: none; -webkit-user-select: none;
}
.mines-board {
  position: absolute; z-index: 1; top: var(--mp); left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(4, var(--mt)); grid-auto-rows: var(--mt); gap: var(--mg);
  perspective: 600px;
}
.mines-board.shake { animation: minesShake .42s var(--out); }
@keyframes minesShake { 15% { translate: -7px 0; } 35% { translate: 6px 0; } 55% { translate: -4px 0; } 75% { translate: 2px 0; } }

.mines-t {
  appearance: none; position: relative; width: var(--mt); height: var(--mt); padding: 0; margin: 0; cursor: default;
  display: grid; place-items: center; color: inherit;
  border: 2px solid var(--line-2); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 55%), var(--night-3);
  box-shadow: 0 4px 0 var(--edge-dark);
  transition: transform .1s var(--out), box-shadow .1s var(--out), border-color .15s, background-color .15s, opacity .25s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.mines-t::after { content: ""; position: absolute; width: 24%; height: 24%; border-radius: 50%; background: rgba(255,255,255,.07); box-shadow: inset 0 2px 0 rgba(0,0,0,.28); pointer-events: none; }
.mines-t.rv::after { display: none; }
.mines-stage:not(.is-open) .mines-t:not(.rv) { opacity: .7; }
.mines-stage.is-open .mines-t:not(.rv) { cursor: pointer; border-color: color-mix(in srgb, var(--pc) 45%, var(--line-2)); }
.mines-stage.is-open .mines-board:not(.mines-dealing):not(:has(.rv)) .mines-t { animation: minesGlow 1.6s ease-in-out infinite; }
@keyframes minesGlow { 50% { border-color: var(--pc); box-shadow: 0 4px 0 var(--edge-dark), 0 0 14px -2px color-mix(in srgb, var(--pc) 70%, transparent); } }
@media (hover: hover) {
  .mines-stage.is-open .mines-t:not(.rv):hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--edge-dark); border-color: var(--pc); background-color: var(--night-4); }
}
.mines-stage.is-open .mines-t:not(.rv):active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge-dark); transition-duration: .04s; }
.mines-stage.is-watch .mines-t { pointer-events: none; }
.mines-t:disabled { color: inherit; }
.mines-in { display: grid; place-items: center; width: 74%; height: 74%; pointer-events: none; }
.mines-in svg { display: block; width: 100%; height: 100%; overflow: visible; }

.mines-t.gem { border-color: var(--go); background: linear-gradient(180deg, rgba(43,216,129,.28), rgba(43,216,129,.08)), var(--night-2); box-shadow: 0 4px 0 var(--go-edge); }
.mines-t.hit { border-color: var(--ink-2); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)), var(--night-4); box-shadow: 0 4px 0 var(--edge-dark); z-index: 1; }
.mines-t.hit .mines-spark { transform-box: fill-box; transform-origin: center; animation: minesSpark .45s ease-in-out infinite alternate; }
@keyframes minesSpark { to { transform: scale(1.35) rotate(25deg); opacity: .7; } }
.mines-t.ghost-gem, .mines-t.ghost-bomb { opacity: .45; background: var(--night-2); border-color: var(--line); box-shadow: 0 2px 0 var(--edge-dark); }
.mines-t.ghost-bomb { opacity: .62; }
.mines-t.ghost-gem .mines-in, .mines-t.ghost-bomb .mines-in { width: 58%; height: 58%; }

.mines-board.mines-dealing .mines-t { animation: minesDeal .42s var(--spring) both; animation-delay: calc(var(--i) * 24ms); }
.mines-board .mines-t.flip { animation: minesFlip .3s var(--out); animation-delay: 0s; }
.mines-board .mines-t.flip .mines-in { animation: minesPop .45s var(--spring) .06s both; }
.mines-board .mines-t.hit.flip { animation: minesBoom .55s var(--out); }
.mines-board .mines-t.fadein { animation: minesFade .42s var(--out) both; }
@keyframes minesDeal { from { transform: scale(.55); opacity: .2; } }
@keyframes minesFlip { from { transform: scale(.88) rotateY(90deg); } }
@keyframes minesPop { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }
@keyframes minesBoom { 0% { background-color: #fff; transform: scale(1.16); } 40% { transform: scale(.94); } }
@keyframes minesFade { from { opacity: 0; transform: scale(.8); } }

.mines-plus {
  position: absolute; left: 50%; top: -6px; z-index: 3; pointer-events: none; white-space: nowrap;
  font: 800 13px/1 var(--f-ui); color: var(--go); text-shadow: 0 2px 8px rgba(0,0,0,.8);
  animation: minesRise .9s var(--out) forwards;
}
@keyframes minesRise { from { transform: translate(-50%, 6px); opacity: 0; } 20% { opacity: 1; } to { transform: translate(-50%, -20px); opacity: 0; } }

/* the side panel: what cashing out pays now, the next tile, mines and gems left */
.mines-side { position: absolute; z-index: 1; left: 22px; top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: calc(50% - var(--board) / 2 - 34px); }
.mines-lab { font: 800 12px/1.15 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.mines-now { font: 900 40px/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); transition: color .15s; }
.mines-now.up, .mines-now.win { color: var(--go); }
.mines-now.win { animation: winPop .45s var(--spring); }
.mines-now.big { color: var(--gold); }
.mines-now.lose { color: var(--ink-3); }
.mines-nx { font: 700 14px/1.3 var(--f-ui); color: var(--ink-3); }
.mines-nx b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mines-ct { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
.mines-ct i { display: inline-flex; align-items: center; gap: 5px; font-style: normal; }
.mines-ct svg { width: 22px; height: 22px; display: block; }
.mines-ct b { font: 800 14px/1 var(--f-ui); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* history: a column on the right (desktop) */
.mines-stage .mines-hist { left: auto; right: 14px; top: 14px; flex-direction: column; align-items: flex-end; }

/* result card + hint: over the middle of the board */
.mines-card, .mines-hint {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none;
}
.mines-card {
  display: grid; justify-items: center; gap: 6px; padding: 14px 22px; border-radius: 20px;
  background: rgba(13, 10, 28, .92); border: 2px solid var(--line-2); box-shadow: 0 20px 40px -12px rgba(0,0,0,.85);
  opacity: 0; transition: opacity .45s var(--out);
}
.mines-card.on { opacity: 1; }
.mines-card.on.dim { opacity: 0; }
.mines-card.pop { animation: minesCard .5s var(--spring); }
@keyframes minesCard { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
.mines-card b { font: 900 30px/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mines-card span { font: 800 15px/1 var(--f-ui); white-space: nowrap; }
.mines-card.win { border-color: var(--go); }
.mines-card.win b, .mines-card.win span { color: var(--go); }
.mines-card.big { border-color: var(--gold); }
.mines-card.big b, .mines-card.big span { color: var(--gold); }
.mines-card.lose b { color: var(--ink-2); }
.mines-card b.mines-bust { font-size: 22px; }
.mines-card.lose span { color: var(--ink-3); }
.mines-hint {
  max-width: calc(var(--board) - 24px); padding: 9px 14px; border-radius: 999px; text-align: center;
  background: rgba(13, 10, 28, .88); border: 1px solid var(--line-2); box-shadow: 0 12px 28px -10px rgba(0,0,0,.8);
  font: 800 14px/1.25 var(--f-ui); color: var(--ink); opacity: 0; transition: opacity .25s var(--out);
}
.mines-hint.on { opacity: 1; }
.mines-hint.nudge { animation: minesNudge .5s var(--spring); }
@keyframes minesNudge { 30% { transform: translate(-50%, -50%) scale(1.1); } }
.mines-stage.is-watch .mines-hint { color: var(--ink-2); }

/* the control: MINES [−] 3 mines [+] · 1 3 5 8 */
.mines-inp { padding: 0 4px; gap: 6px; }
.mines-inp input { text-align: right; }
.mines-inp .post { flex: 1; margin: 0 0 0 6px; font-size: 16px; }
.mines-step {
  appearance: none; flex: none; align-self: stretch; width: 44px; margin: 2px 0 5px; border: 0; border-radius: 11px; padding: 0;
  display: grid; place-items: center; cursor: pointer; background: var(--night-3); color: var(--ink);
  box-shadow: 0 3px 0 var(--edge-dark); -webkit-tap-highlight-color: transparent;
}
.mines-step svg { width: 18px; height: 18px; }
.mines-step:active { transform: translateY(3px); box-shadow: none; }
.mines-step:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: 0 3px 0 var(--edge-dark); }
.mines-inp.readonly .mines-step { opacity: .45; }
@media (max-width: 700px) { .mines-step { margin: 0 0 3px; } }
.mines-field.is-locked .inp { opacity: .6; }
.mines-field.is-locked > label span { color: var(--gold); }

/* phones (the stage says .is-phone when it is narrow): board on the right, the numbers in a left column */
.mines-stage.is-phone { border-radius: 18px; }
.mines-stage.is-phone .mines-board { left: auto; right: var(--mp); transform: none; }
.mines-stage.is-phone .mines-t { border-radius: 10px; }
.mines-stage.is-phone .mines-side { left: 10px; top: 10px; gap: 4px; width: calc(100% - var(--board) - var(--mp) - 20px); max-width: none; }
.mines-stage.is-phone .mines-lab { font-size: 12px; letter-spacing: .04em; }
.mines-stage.is-phone .mines-now { font-size: 20px; }
.mines-stage.is-phone .mines-nx { font-size: 13px; line-height: 1.25; }
.mines-stage.is-phone .mines-ct { flex-direction: column; gap: 5px; margin-top: 4px; }
.mines-stage.is-phone .mines-ct svg { width: 18px; height: 18px; }
.mines-stage.is-phone .mines-ct b { font-size: 13px; }
.mines-stage.is-phone .mines-hist { display: none; }
.mines-stage.is-phone .stage-chip { left: 10px; bottom: 10px; }
.mines-stage.is-phone .stage-chip .chip { width: 44px; height: 44px; }
.mines-stage.is-phone .mines-card, .mines-stage.is-phone .mines-hint { left: calc(100% - var(--mp) - var(--board) / 2); }
.mines-stage.is-phone .mines-card { padding: 12px 16px; }
.mines-stage.is-phone .mines-card b { font-size: 24px; }
.mines-stage.is-phone .mines-card span { font-size: 14px; }
.mines-stage.is-phone .mines-hint { font-size: 13.5px; }
.mines-stage.is-narrow .mines-now { font-size: 14px; letter-spacing: -.04em; }   /* a 360 phone: "1.11×" stays left of the board */
.mines-stage.is-narrow .mines-lab { letter-spacing: 0; }

/* big desktop stage (ADDENDUM §8d): the board fills the height (tiles up to ~140px), the numbers above it */
.mines-stage.is-big .mines-board { top: var(--mtop, 128px); }
.mines-stage.is-big .mines-t { border-radius: 16px; box-shadow: 0 5px 0 var(--edge-dark); }
.mines-stage.is-big .mines-t.gem { box-shadow: 0 5px 0 var(--go-edge); }
.mines-stage.is-big .mines-side { max-width: calc(100% - 150px); top: 18px; }
.mines-stage.is-big .mines-now { font-size: 44px; }
.mines-stage.is-big .mines-nx { font-size: 15px; }
.mines-stage.is-big .mines-card, .mines-stage.is-big .mines-hint { top: calc(var(--mtop, 128px) + var(--board) / 2); }
.mines-stage.is-big .mines-card b { font-size: 40px; }
.mines-stage.is-big .mines-card span { font-size: 17px; }
.mines-stage.is-big .mines-hint { font-size: 16px; }
.mines-stage.is-big .stage-chip .chip { width: 60px; height: 60px; }

@media (prefers-reduced-motion: reduce) {
  .mines-stage.is-open .mines-board:not(.mines-dealing):not(:has(.rv)) .mines-t { animation: none; }
}

/* =============================================================== big desktop stage (ADDENDUM §8d): Limbo and Dice
   scale up to the stage that fills the screen (game mode only, ≥ 1024 wide) */
@media (min-width: 1024px) and (min-height: 561px) {
  /* a huge number: about a quarter of the stage's height, never wider than the stage (--lw from limbo.js) */
  .gm-stage .limbo-num { font-size: min(clamp(96px, 26cqh, 210px), calc((100cqw - 72px) / var(--lw, 3.5))); }
  .gm-stage .limbo-need { margin-top: 22px; font-size: 19px; }
  .gm-stage .limbo-rings { width: 860px; height: 860px; }
  /* the roll number in the top part, the wide track at two-thirds: the bottom band stays free for the chat corner */
  .gm-stage .dice-mid { top: 13%; }
  .gm-stage .dice-num { font-size: min(clamp(96px, 22cqh, 190px), calc((100cqw - 72px) / 3.75)); }
  .gm-stage .dice-need { margin-top: 18px; font-size: 19px; }
  .gm-stage .dice-rail { left: 64px; right: 64px; bottom: max(116px, 27cqh); height: 64px; }
  .gm-stage .dice-track { height: 22px; margin-top: -11px; }
  .gm-stage .dice-line i { left: -9px; top: -24px; width: 18px; height: 48px; border-radius: 9px; }
  .gm-stage .dice-line i::after { top: 13px; bottom: 13px; left: 5px; right: 5px; }
  .gm-stage .dice-ticks { top: calc(50% + 30px); font-size: 15px; }
  .gm-stage .dice-rider { bottom: calc(50% + 9px); }
  .gm-stage .dice-rider .stage-chip .chip { width: 64px; height: 64px; }
}