/* frontend/ramp.css — Ramp board, both layouts and both schemes.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Pachisi precedent (pachisi.css
 * header). Two things make that the right call here too: a board suite that
 * slices its block out of style.css has broken on someone else's append more
 * than once (the Senet "slice to END OF FILE" trap), and a stylesheet of its own
 * cannot be swallowed by, or swallow, the next game's block.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable in the two scheme blocks below, lifted from the
 * mock's own COLOUR IS DATA block. CLASSIC is wood, felt and brass; ARCADE is
 * the same geometry, glassy. ⛔ Game accents are LITERALS: `--pgr-accent` IS
 * `--pgr-line` in Classic (layout-schemes.js), so deriving from it goes
 * invisible silently (the Senet finding). ⛔ The Arcade hook is the CLASS
 * `gm-arcade` that GameTheme.apply toggles on the SCREEN — never `is-arcade`,
 * never `[data-scheme]` (the Pachisi finding).
 *
 * ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD: the setup card lives
 * outside .rp-root, and a var() fallback is not a scope (Pachisi again).
 */

/* ── CLASSIC ─────────────────────────────────────────────────────────────── */
/* The MP idle bar floats OVER the board rather than taking a row of its own (see the note
   in index.html beside #rp-mp-timeout-bar): .mp-timeout-float is `position: absolute`, so
   this wrap has to be what it is absolute TO. */
#ramp-game-screen .wrap { position: relative; }

#ramp-game-screen, .rp-root {
  --rp-bg: linear-gradient(180deg, #22231e 0%, #171814 55%, #0f100d 100%);
  --rp-board: linear-gradient(180deg, #33291d, #241c13);
  --rp-panel: rgba(238, 228, 205, .055);
  --rp-surface: #26261f;
  --rp-line: rgba(233, 222, 198, .16);
  --rp-track: rgba(0, 0, 0, .42);
  --rp-txt: #efe7d4;
  --rp-dim: rgba(239, 231, 212, .56);
  --rp-t1: linear-gradient(180deg, #2c4034, #26382d);
  --rp-t2: linear-gradient(180deg, #31493b, #2a4034);
  --rp-t3: linear-gradient(180deg, #375244, #2f483b);
  --rp-t4: linear-gradient(180deg, #3d5c4b, #345041);
  --rp-riser: rgba(176, 138, 66, .5);
  --rp-tierink: #e4d6b4;
  --rp-tierdim: rgba(228, 214, 180, .5);
  --rp-edgeband: linear-gradient(180deg, #1a120b, #0d0906);
  --rp-edgeink: #9b7c4a;
  --rp-brass: #b08a42;
  --rp-brass-soft: rgba(176, 138, 66, .22);
  --rp-risk: #d0674b;
  --rp-risk-soft: rgba(168, 72, 47, .28);
  --rp-pad: linear-gradient(180deg, #26261f, #191913);
  --rp-ring: rgba(233, 222, 198, .14);
  --rp-pipink: #17130e;
  --rp-pod: rgba(230, 214, 176, .14);
  --rp-podbd: #c9a75e;
  --rp-btn: linear-gradient(180deg, #bd9855, #96742f);
  --rp-btntxt: #221a09;
  --rp-p1: #d9b45c;
  --rp-p2: #7fa3c2;
  --rp-p3: #c4655a;
  --rp-p4: #93ab68;
}

/* ── ARCADE — the same ramp, glassy ─────────────────────────────────────── */
#ramp-game-screen.gm-arcade, .gm-arcade .rp-root {
  --rp-bg: radial-gradient(125% 115% at 50% -14%, #341a72 0%, #1a0c40 55%, #0a0520 100%);
  --rp-board: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  --rp-panel: rgba(255, 255, 255, .08);
  --rp-surface: #1d1340;
  --rp-line: rgba(255, 255, 255, .18);
  --rp-track: rgba(0, 0, 0, .38);
  --rp-txt: #f5f1ff;
  --rp-dim: rgba(245, 241, 255, .62);
  --rp-t1: linear-gradient(180deg, rgba(88, 132, 230, .34), rgba(64, 100, 200, .2));
  --rp-t2: linear-gradient(180deg, rgba(40, 176, 214, .36), rgba(30, 136, 180, .2));
  --rp-t3: linear-gradient(180deg, rgba(44, 206, 150, .38), rgba(30, 160, 118, .22));
  --rp-t4: linear-gradient(180deg, rgba(214, 222, 76, .42), rgba(160, 176, 50, .24));
  --rp-riser: rgba(255, 255, 255, .34);
  --rp-tierink: #f5f1ff;
  --rp-tierdim: rgba(245, 241, 255, .6);
  --rp-edgeband: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .3));
  --rp-edgeink: #ff6f7d;
  --rp-brass: #ffd84a;
  --rp-brass-soft: rgba(255, 216, 74, .24);
  --rp-risk: #ff5a6e;
  --rp-risk-soft: rgba(255, 90, 110, .3);
  --rp-pad: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  --rp-ring: rgba(255, 255, 255, .18);
  --rp-pod: rgba(255, 216, 74, .16);
  --rp-podbd: #ffd84a;
  --rp-btn: linear-gradient(180deg, #ff6b6b, #d8404f);
  --rp-btntxt: #fff3f0;
  --rp-p1: #f5cf4a;
  --rp-p2: #5cb8f5;
  --rp-p3: #ff6fae;
  --rp-p4: #62e39a;
}
#ramp-game-screen [data-o="1"] { --rp-pc: var(--rp-p1); }
#ramp-game-screen [data-o="2"] { --rp-pc: var(--rp-p2); }
#ramp-game-screen [data-o="3"] { --rp-pc: var(--rp-p3); }
#ramp-game-screen [data-o="4"] { --rp-pc: var(--rp-p4); }
/* The end screen lives outside the game screen; its swatches need the palette too. */
.rp-endrows { --rp-p1: #d9b45c; --rp-p2: #7fa3c2; --rp-p3: #c4655a; --rp-p4: #93ab68; }
.rp-endrow[data-o="1"] { --rp-pc: var(--rp-p1); }
.rp-endrow[data-o="2"] { --rp-pc: var(--rp-p2); }
.rp-endrow[data-o="3"] { --rp-pc: var(--rp-p3); }
.rp-endrow[data-o="4"] { --rp-pc: var(--rp-p4); }

/* ── the shell (MOBILE first — unscaled, a separate arrangement) ─────────── */
.rp-root {
  --rp-die: 28px;
  --rp-puck: 50px;
  --rp-anchor-y: 16px;
  --rp-trayd: 20px;
  --rp-tierfs: 17px;
  position: relative;
  box-sizing: border-box;
  height: var(--rp-phone-h, 700px);
  display: grid;
  grid-template-areas: "head" "rail" "ramp" "side" "feed" "throw";
  grid-template-columns: minmax(0, 1fr);
  /* the side row is sized for its content: padding 10 + border 2 + caption 8 + gap 4
   * + two 14px chip rows and their 2px gap = 54. At 40 the second row clipped. */
  grid-template-rows: 30px 46px minmax(0, 1fr) 54px 18px 236px;
  gap: 6px;
  padding: 6px 6px 6px;
  background: var(--rp-bg);
  color: var(--rp-txt);
  border-radius: 22px;
  overflow: hidden;
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.rp-root * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.rp-cap { font: 700 8px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; color: var(--rp-dim); white-space: nowrap; }

/* head */
.rp-head { grid-area: head; display: flex; align-items: center; gap: 8px; min-width: 0; }
.rp-title { font: 800 15px/1 Georgia, 'Times New Roman', serif; letter-spacing: .02em; }
.rp-badge { font: 800 8px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; padding: 5px 7px; border-radius: 5px;
  background: var(--rp-panel); border: 1px solid var(--rp-line); color: var(--rp-dim); white-space: nowrap; }
.rp-headspace { flex: 1; }
.rp-round { font: 700 9px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; color: var(--rp-dim); white-space: nowrap; }
.rp-turn { font: 800 9px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; padding: 5px 7px; border-radius: 5px;
  background: var(--rp-panel); border: 1px solid var(--rp-line); color: var(--rp-txt); white-space: nowrap;
  width: 124px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.rp-turn[data-mine="1"] { color: var(--rp-brass); border-color: var(--rp-brass); }
.rp-info { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--rp-line); background: var(--rp-panel);
  color: var(--rp-dim); font: 700 12px/1 Georgia, serif; cursor: pointer; padding: 0; }

/* rail */
.rp-rail { grid-area: rail; display: flex; flex-direction: row; gap: 6px; min-width: 0; min-height: 0; }
.rp-seat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 5px 8px; border-radius: 11px; background: var(--rp-panel); border: 1.5px solid var(--rp-line); }
.rp-seat[data-active="1"] { background: var(--rp-brass-soft); border-color: var(--rp-brass); }
.rp-seatrow { display: flex; align-items: center; gap: 5px; min-width: 0; }
.rp-swatch { flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--rp-pc); display: inline-block; }
.rp-seatnm { flex: 1 1 auto; min-width: 0; font: 700 11px/1 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-seattot { font: 800 17px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.rp-slots { display: flex; gap: 3px; flex: none; }
.rp-slots i { width: 7px; height: 7px; border-radius: 2px; border: 1px solid var(--rp-line); background: transparent; }
.rp-slots i[data-on="1"] { background: var(--rp-pc); }
.rp-seatspace { flex: 1; }
.rp-expo { flex: none; display: flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%;
  background: var(--rp-risk-soft); border: 1px solid var(--rp-risk); font: 800 8px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--rp-risk); }
.rp-expo[data-on="0"] { opacity: 0; }

/* the ramp */
.rp-rampwrap { grid-area: ramp; position: relative; min-height: 0; min-width: 0; }
.rp-ramp { position: absolute; inset: 0; border-radius: 16px; background: var(--rp-board); border: 1px solid var(--rp-line);
  overflow: hidden; touch-action: none; cursor: crosshair; }
.rp-edgeband { position: absolute; left: 0; right: 0; top: 0; background: var(--rp-edgeband); display: flex; align-items: center; padding-left: 12px; }
.rp-edgeband span { font: 800 8px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .2em; color: var(--rp-edgeink); white-space: nowrap; }
.rp-tier { position: absolute; left: 0; right: 0; border-top: 2px solid var(--rp-riser); }
.rp-tier[data-m="1"] { background: var(--rp-t1); }
.rp-tier[data-m="2"] { background: var(--rp-t2); }
.rp-tier[data-m="3"] { background: var(--rp-t3); }
.rp-tier[data-m="4"] { background: var(--rp-t4); }
.rp-tiermul { position: absolute; top: 50%; transform: translateY(-50%); font: 800 var(--rp-tierfs)/1 Georgia, serif; color: var(--rp-tierink); opacity: .85; }
.rp-tiername { position: absolute; top: 50%; transform: translateY(-50%); font: 700 8px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; color: var(--rp-tierdim); white-space: nowrap; }
.rp-aimsvg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.rp-aimsvg polyline { fill: none; stroke: var(--rp-podbd); stroke-width: 2.5; stroke-dasharray: 7 6; vector-effect: non-scaling-stroke; }
.rp-aimsvg[data-risk="1"] polyline { stroke: var(--rp-risk); }
.rp-aimsvg[data-on="0"] { opacity: 0; }
.rp-pod { position: absolute; z-index: 2; transform: translate(-50%, -50%); border-radius: 50%; background: var(--rp-pod);
  border: 2px dashed var(--rp-podbd); box-shadow: 0 0 22px -6px var(--rp-podbd); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.rp-pod span { font: 800 var(--rp-tierfs)/1 Georgia, serif; color: var(--rp-podbd); }
.rp-pod[data-risk="1"] { border-color: var(--rp-risk); box-shadow: 0 0 22px -6px var(--rp-risk); }
.rp-pod[data-risk="1"] span { color: var(--rp-risk); }
.rp-pod[data-on="0"] { opacity: 0; }
.rp-dice { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rp-die { position: absolute; width: var(--rp-die); height: var(--rp-die); will-change: left, top, transform; }
/* ⭐ DIE COLOUR IDENTIFIES THE OWNER (the brief), but the body is the renderer's
 * skin — the human keeps what they equipped and each bot has its own. So the owner
 * is carried by a RING and a PLINTH in the seat colour, never by tinting the skin.
 * A 3px ring alone read weakly at BoardFit's ~0.8 scale; the plinth is what a die
 * is recognised by at a glance across the ramp. */
.rp-die::before { content: ""; position: absolute; left: -14%; right: -14%; bottom: -20%; height: 42%; border-radius: 50%;
  background: var(--rp-pc); opacity: .62; filter: blur(1px); z-index: -1; }
.rp-die { isolation: isolate; }
.rp-dieface { width: 100%; height: 100%; border-radius: 24%; transform: rotate(var(--rp-rot, 0deg));
  box-shadow: 0 0 0 4px var(--rp-pc), 0 6px 12px -4px rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; }
.rp-dieface > * { flex: none; }
.rp-die-fallback { display: flex; align-items: center; justify-content: center; border-radius: 22%; background: #f4efe2; color: #111; font-weight: 800; }
.rp-die[data-exposed="1"] .rp-dieface { outline: 2px dashed var(--rp-risk); outline-offset: 5px; }
.rp-die[data-contact="1"] .rp-dieface { box-shadow: 0 0 0 4px var(--rp-pc), 0 0 0 8px var(--rp-brass), 0 0 22px 2px var(--rp-brass); }
.rp-die[data-fly="1"] .rp-dieface { filter: blur(1.2px); box-shadow: 0 0 0 4px var(--rp-pc), 0 14px 26px -8px rgba(0, 0, 0, .8); }
.rp-die[data-fly="1"]::before { opacity: .3; }
.rp-die[data-off="1"] { opacity: .3; transition: opacity .35s ease; }
/* ⭐ THE THROWN DIE ROLLS AS A CUBE (ramp-roll.js builds six faces on a preserve-3d
 * parent; ramp.js turns it per frame). The flat face's ring and motion blur come off
 * while it rolls: a flat square halo behind a turning cube reads as a tile, and a
 * filter on the perspective parent is a flattening risk. The plinth keeps the owner. */
.rp-die[data-roll="1"] .rp-dieface { position: relative; perspective: calc(var(--rp-die) * 12); box-shadow: none; filter: none; border-radius: 0; }
.rp-cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.rp-cubeslot { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rp-cubeg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.rp-cubeg > * { flex: none; }
/* A PIXEL skin rolls on a canvas redrawn in whole columns (ramp.js rpDrawPixelRoll);
 * upscaled by a whole factor, never smoothed. */
.rp-pixroll { flex: none; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.rp-chip { position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%); font: 800 9px/1 ui-monospace, Menlo, Consolas, monospace;
  white-space: nowrap; padding: 2px 4px; border-radius: 4px; background: rgba(0, 0, 0, .55); color: var(--rp-txt); opacity: .4; }
.rp-die[data-mine="1"] .rp-chip { opacity: 1; }
.rp-chip:empty { display: none; }
.rp-hand { position: absolute; z-index: 4; width: var(--rp-die); height: var(--rp-die); transform: translate(-50%, -60%); border-radius: 22%;
  background: linear-gradient(160deg, var(--rp-pc), color-mix(in oklab, var(--rp-pc) 72%, #000)); border: 2px solid rgba(255, 255, 255, .45);
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .6); pointer-events: none; transition: transform .15s ease, opacity .15s ease; }
.rp-hand[data-lift="1"] { transform: translate(-50%, -78%); box-shadow: 0 14px 22px -8px rgba(0, 0, 0, .8); }
.rp-hand[data-on="0"] { opacity: 0; }
.rp-throwline { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 34%; height: 7px; border-radius: 8px 8px 0 0; background: var(--rp-brass); opacity: .85; z-index: 1; }
.rp-throwlab { position: absolute; right: 8px; bottom: 5px; font: 700 8px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .18em; color: var(--rp-dim); z-index: 1; }
.rp-shout { position: absolute; z-index: 5; left: 50%; top: 11%; transform: translateX(-50%); padding: 7px 12px; border-radius: 9px;
  background: var(--rp-risk-soft); border: 1px solid var(--rp-risk); font: 800 12px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em;
  color: var(--rp-risk); white-space: nowrap; pointer-events: none; transition: opacity .2s ease; }
.rp-shout[data-tone="good"] { background: var(--rp-brass-soft); border-color: var(--rp-brass); color: var(--rp-brass); }
.rp-shout[data-on="0"] { opacity: 0; }

/* side — your dice, in words */
.rp-side { grid-area: side; display: flex; flex-direction: column; gap: 4px; padding: 5px 8px; border-radius: 10px; background: var(--rp-panel);
  border: 1px solid var(--rp-line); min-height: 0; min-width: 0; overflow: hidden; }
.rp-mine { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 14px; gap: 2px 6px; min-width: 0; }
.rp-mine span { min-width: 0; font: 800 9px/14px ui-monospace, Menlo, Consolas, monospace; color: var(--rp-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-mine span[data-risk="1"] { color: var(--rp-risk); }

/* feed */
.rp-feed { grid-area: feed; display: flex; align-items: center; gap: 7px; padding: 0 4px; min-width: 0; overflow: hidden; }
.rp-feeddot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--rp-dim); }
.rp-feed span { font: 600 11px/1.2 system-ui, sans-serif; color: var(--rp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-feed[data-tone="risk"] span { color: var(--rp-risk); }
.rp-feed[data-tone="risk"] .rp-feeddot { background: var(--rp-risk); }
.rp-feed[data-tone="good"] span { color: var(--rp-brass); }
.rp-feed[data-tone="good"] .rp-feeddot { background: var(--rp-brass); }

/* the throw row */
.rp-throw { grid-area: throw; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 40px minmax(0, 1fr) 26px;
  grid-template-areas: "ra rb" "pad pad" "tray tray"; gap: 6px 5px; min-height: 0; min-width: 0; }
.rp-reads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; min-width: 0; }
.rp-reads-a { grid-area: ra; }
.rp-reads-b { grid-area: rb; }
.rp-read { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 9px; background: var(--rp-panel);
  border: 1px solid var(--rp-line); min-width: 0; overflow: hidden; }
.rp-readk { font: 700 8px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; color: var(--rp-dim); white-space: nowrap; }
.rp-readv { font: 800 13px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--rp-txt); white-space: nowrap; }
.rp-read[data-tone="dim"] .rp-readv { color: var(--rp-dim); }
.rp-read[data-tone="risk"] { border-color: var(--rp-risk); }
.rp-read[data-tone="risk"] .rp-readv { color: var(--rp-risk); }
.rp-read[data-tone="fine"] { border-color: var(--rp-brass); }
.rp-read[data-tone="fine"] .rp-readv { color: var(--rp-brass); }
.rp-hist { grid-area: hist; display: none; }
.rp-pad { grid-area: pad; position: relative; border-radius: 14px; background: var(--rp-pad); border: 1px solid var(--rp-line); overflow: hidden;
  min-height: 0; touch-action: none; cursor: grab; }
.rp-pad[data-dis="1"] { cursor: default; }
.rp-pad[data-dis="1"] .rp-rings, .rp-pad[data-dis="1"] .rp-padlab, .rp-pad[data-dis="1"] .rp-meter { opacity: .45; filter: saturate(.55); }
.rp-rings { position: absolute; width: 0; height: 0; pointer-events: none; }
.rp-rings i { position: absolute; left: 0; top: 0; border-radius: 50%; border: 1px dashed var(--rp-ring); transform: translate(-50%, -50%); }
.rp-rings i:nth-child(1) { width: calc(var(--rp-pullmax) * .5); height: calc(var(--rp-pullmax) * .5); }
.rp-rings i:nth-child(2) { width: calc(var(--rp-pullmax) * 1); height: calc(var(--rp-pullmax) * 1); }
.rp-rings i:nth-child(3) { width: calc(var(--rp-pullmax) * 1.5); height: calc(var(--rp-pullmax) * 1.5); }
.rp-rings i:nth-child(4) { width: calc(var(--rp-pullmax) * 2); height: calc(var(--rp-pullmax) * 2); border-style: solid; }
.rp-rings i.rp-cancelring { width: calc(var(--rp-cancel) * 2); height: calc(var(--rp-cancel) * 2); border: 1.5px solid var(--rp-dim); background: rgba(0, 0, 0, .18); }
.rp-padlab { position: absolute; left: 50%; top: 5px; transform: translateX(-50%); font: 700 8px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .14em; color: var(--rp-dim); white-space: nowrap; pointer-events: none; }
.rp-band { position: absolute; width: 3px; transform-origin: 50% 0; border-radius: 3px; pointer-events: none;
  background: linear-gradient(180deg, var(--rp-podbd), color-mix(in oklab, var(--rp-podbd) 40%, transparent)); }
.rp-band[data-on="0"] { opacity: 0; }
.rp-puck { position: absolute; width: var(--rp-puck); height: var(--rp-puck); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 28%, color-mix(in oklab, var(--rp-pc) 82%, #fff), var(--rp-pc) 62%, color-mix(in oklab, var(--rp-pc) 70%, #000));
  border: 2px solid rgba(255, 255, 255, .5); box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .7); display: flex; align-items: center; justify-content: center; }
.rp-puck span { font: 800 12px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--rp-pipink); }
.rp-puck[data-on="0"] { opacity: 0; }
.rp-fine { position: absolute; left: 8px; top: 8px; padding: 4px 6px; border-radius: 6px; background: var(--rp-brass-soft); border: 1px solid var(--rp-brass);
  font: 800 8px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; color: var(--rp-brass); pointer-events: none; }
.rp-fine[data-on="0"] { opacity: 0; }
.rp-meter { position: absolute; right: 8px; top: 8px; bottom: 8px; width: 14px; border-radius: 7px; background: var(--rp-track); border: 1px solid var(--rp-line);
  overflow: hidden; pointer-events: none; }
.rp-meter i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(180deg, var(--rp-brass), color-mix(in oklab, var(--rp-brass) 55%, #000)); }
.rp-meter i[data-risk="1"] { background: linear-gradient(180deg, var(--rp-risk), color-mix(in oklab, var(--rp-risk) 55%, #000)); }
.rp-meter b { position: absolute; left: 0; right: 0; top: 20%; height: 1px; background: var(--rp-risk); opacity: .75; }
.rp-hint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; pointer-events: none; }
.rp-hint[data-on="0"] { opacity: 0; }
.rp-hintx { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--rp-dim); display: flex; align-items: center; justify-content: center;
  font: 700 9px/1 system-ui, sans-serif; color: var(--rp-dim); }
.rp-hint span:last-child { font: 700 8px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; color: var(--rp-dim); white-space: nowrap; }
.rp-wait { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); font: 800 11px/1.5 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .16em; color: var(--rp-dim); text-align: center; white-space: nowrap; pointer-events: none; }
.rp-wait[data-on="0"] { opacity: 0; }
.rp-tray { grid-area: tray; display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; }
.rp-traydice { display: flex; gap: 5px; flex: none; }
.rp-traydice i { width: var(--rp-trayd); height: var(--rp-trayd); border-radius: 22%; border: 1px solid var(--rp-line);
  background: linear-gradient(160deg, var(--rp-pc), color-mix(in oklab, var(--rp-pc) 74%, #000)); }
.rp-traydice i[data-on="0"] { opacity: .16; }
.rp-traydice i[data-next="1"] { box-shadow: 0 0 0 2px var(--rp-brass); }
.rp-traynote { margin-left: auto; font: 800 9px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .1em; padding: 5px 8px; border-radius: 8px;
  background: var(--rp-panel); border: 1px solid var(--rp-line); color: var(--rp-dim); white-space: nowrap; }

/* the end screen's standings */
.rp-endrows { display: flex; flex-direction: column; gap: 6px; }
.rp-endrow { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.rp-endrow[data-win="1"] { border-color: #c9a75e; }
.rp-endnm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.rp-endrd { flex: none; font-size: 10px; font-weight: 700; opacity: .6; white-space: nowrap; }
.rp-endsc { flex: none; font-size: 15px; font-weight: 900; }

/* the setup card */
.rp-setup-card { max-width: 520px; margin: 0 auto; }
.rp-seg { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.rp-seg button { flex: 1 1 0; min-width: 62px; padding: 7px 6px; border-radius: 9px; cursor: pointer; background: rgba(255, 255, 255, .05);
  border: 1.5px solid rgba(255, 255, 255, .16); color: inherit; font-family: inherit; font-size: 14px; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rp-seg button small { font-size: 9px; font-weight: 600; opacity: .7; }
.rp-seg button.rp-seg-active { border-color: var(--rp-brass); background: var(--rp-brass-soft); }
.rp-setup-note { font-size: 12px; opacity: .7; margin: 4px 0 10px; line-height: 1.5; min-height: 18px; }
.rp-startbtn { display: block; width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--rp-btn); color: var(--rp-btntxt); font: 800 15px/1 inherit; font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  .rp-hand, .rp-shout, .rp-die[data-off="1"] { transition: none; }
}

/* ── PHONE — unscaled. The ramp is the flexible row; rpFitPhone() measures the
 * height the screen actually has, WITH the chat bar's reservation. */
@media (max-width: 999px) {
  /* ⛔ `.wrap`'s gutter on a phone is width the ramp needs (Can't Stop's 327-vs-350 finding). */
  #ramp-game-screen.rp-playing .wrap { padding: 0; }
  /* The ONE state-dependent rule, labelled as such in the mock: past eight dice on a
   * phone the on-board value chips drop away — the bands collide before the dice do.
   * The side panel carries your values in words. Desktop keeps every chip. */
  .rp-ramp[data-dense="1"] .rp-chip { display: none; }
}

/* ── DESKTOP — one design box, scaled as a unit by BoardFit. ⛔ Three copies of
 * 1240 × 700: here, RP_FIT_W/RP_FIT_H in ramp.js, and board-fit.js. */
@media (min-width: 1000px) {
  #ramp-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .rp-root {
    --rp-die: 44px;
    --rp-puck: 54px;
    --rp-anchor-y: 22px;
    --rp-trayd: 32px;
    --rp-tierfs: 26px;
    width: 1240px;
    height: 700px;
    grid-template-areas: "head head head" "rail ramp side" "feed feed feed" "throw throw throw";
    grid-template-columns: 232px minmax(0, 1fr) 250px;
    grid-template-rows: 40px minmax(0, 1fr) 24px 196px;
    gap: 10px 12px;
    padding: 14px 16px 16px;
    border-radius: 22px;
  }
  .rp-cap { font-size: 9px; }
  .rp-title { font-size: 23px; }
  .rp-badge { font-size: 9px; padding: 6px 8px; }
  .rp-round { font-size: 11px; }
  .rp-turn { font-size: 11px; width: 190px; padding: 6px 9px; }
  .rp-info { width: 28px; height: 28px; font-size: 14px; }
  .rp-rail { flex-direction: column; gap: 8px; }
  .rp-seat { flex: 0 0 74px; padding: 10px 14px; gap: 7px; border-radius: 13px; }
  .rp-swatch { width: 12px; height: 12px; border-radius: 4px; }
  .rp-seatnm { font-size: 14px; }
  .rp-seattot { font-size: 26px; }
  .rp-slots i { width: 10px; height: 10px; border-radius: 3px; }
  .rp-expo { width: 18px; height: 18px; font-size: 10px; }
  .rp-ramp { border-radius: 18px; }
  .rp-edgeband span { font-size: 10px; }
  .rp-tiername { font-size: 10px; }
  .rp-chip { font-size: 11px; padding: 2px 5px; }
  .rp-shout { font-size: 15px; padding: 9px 14px; }
  .rp-side { padding: 10px 12px; gap: 7px; border-radius: 12px; }
  .rp-mine { grid-template-columns: 1fr; grid-auto-rows: 32px; gap: 6px; }
  .rp-mine span { font: 800 12px/30px ui-monospace, Menlo, Consolas, monospace; padding: 0 9px; border-radius: 8px; border: 1px solid transparent; }
  .rp-mine span[data-on="1"] { background: var(--rp-track); border-color: var(--rp-line); }
  .rp-mine span[data-risk="1"] { background: var(--rp-risk-soft); border-color: var(--rp-risk); }
  .rp-feed { padding: 0 6px; gap: 9px; }
  .rp-feed span { font-size: 14px; }
  .rp-throw { grid-template-columns: 232px minmax(0, 1fr) 250px; grid-template-rows: 46px minmax(0, 1fr);
    grid-template-areas: "ra pad rb" "hist pad tray"; gap: 8px 12px; }
  .rp-readk { font-size: 9px; }
  .rp-readv { font-size: 17px; }
  .rp-reads { gap: 6px; }
  .rp-hist { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 12px; background: var(--rp-panel); border: 1px solid var(--rp-line); min-height: 0; overflow: hidden; }
  .rp-histrow { display: flex; align-items: center; gap: 8px; height: 22px; min-width: 0; }
  .rp-histrow span { flex: 1; min-width: 0; font: 600 11px/1 system-ui, sans-serif; color: var(--rp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rp-histrow b { flex: none; font: 800 11px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--rp-txt); }
  .rp-histrow[data-tone="good"] b { color: var(--rp-brass); }
  .rp-histrow[data-tone="risk"] b { color: var(--rp-risk); }
  .rp-pad { border-radius: 16px; }
  .rp-padlab { font-size: 9px; top: 7px; }
  .rp-fine { font-size: 9px; left: 10px; top: 10px; padding: 5px 8px; }
  .rp-meter { width: 18px; right: 10px; top: 10px; bottom: 10px; border-radius: 9px; }
  .rp-hint span:last-child { font-size: 9px; }
  .rp-wait { font-size: 13px; }
  .rp-tray { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 9px; padding: 10px 12px; border-radius: 12px;
    background: var(--rp-panel); border: 1px solid var(--rp-line); min-height: 0; }
  .rp-traydice { gap: 8px; }
  .rp-traynote { margin-left: 0; font-size: 10px; padding: 0; background: none; border: 0; }
}