/* frontend/pippily.css — PIPPILY board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Gulls / Swarm / Ring Out precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * The palette is the mock's CLASSIC charcoal (PippilyBoard.dc.html L41) by default, ARCADE when GameTheme puts
 * `gm-arcade` on the screen (recolour only: same box, same sizes). ⛔ THE SCREEN CARRIES THE PALETTE: the setup card
 * sits outside `.pp-root`. The well is ALWAYS dark (the mock's light themes kept it dark too): the toughness plates and
 * every player colour read against it in greyscale (the owner is colourblind).
 * ⭐ PLAYERS: a fixed Okabe–Ito set (Ring Out's), never the theme accent, and never the only mark — every seat carries
 *    its SHAPE (▲ ◆ ✚ ●) on the avatar, the standings, the feed and the tally.
 * ⭐ TOUGHNESS (owner ruling): 1 classic · 2 crystal · 3 gold · 4 bronze · 5 glowblue · 6 glowred (pippily.js PP_LOOK),
 *    each on a backplate of the mock's shape in its skin's colour (the glow skins: their GLOW colour) with a thin LIGHT
 *    OUTLINE (PP-F2 — the 5 and 6 plates vanished on the dark well in the mock). The colours below MUST match PP_LOOK
 *    (pippily-board.test.html compares them).
 *
 * ── Geometry ────────────────────────────────────────────────────────────────
 * Desktop: ONE design box 1280 × 553 — the mock's 637 less its 84px chat strip — scaled as a unit by BoardFit.
 * PP-F8: "Ball N of 10" folded into the right column, so the well is 333 × 500 (the mock's 306 × 459).
 * Phone: unscaled, 384 × 812 down to the 360 × 740 floor; the SAME DOM laid out as a grid (the side columns become
 * `display: contents`): row A you · ball · run, row B rivals, your well (the one flexible row), feed, controls.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every slot is a FIXED size except your well on a phone. Every text box is a fixed width or fills its slot.
 * Feedback changes colour, glow or a transform — never size or spacing. The tray slot exists at full size from the
 * first frame; the bean inside it scales.
 */

#pippily-game-screen, .pp-root {
  --pp-bg: radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%);
  --pp-mid: #141519;
  --pp-txt: #e9e8e4; --pp-dim: #8f9197; --pp-panel: rgba(255, 255, 255, .035); --pp-line: rgba(255, 255, 255, .1);
  --pp-acc: #5fd08c; --pp-hot: #ffc24b; --pp-track: rgba(233, 232, 228, .12);
  --pp-btn: #5fd08c; --pp-btnTxt: #0c1c12;
  --pp-well: #07090e; --pp-wellDot: rgba(255, 255, 255, .07); --pp-wall: rgba(255, 255, 255, .34);
  --pp-p0: #56b4e9; --pp-p1: #e0691a; --pp-p2: #f0e442; --pp-p3: #cc79a7;
  --pp-ui: 'Outfit', system-ui, sans-serif;
  --pp-rad: 12px;
}
#pippily-game-screen.gm-arcade, .gm-arcade .pp-root {
  --pp-bg: radial-gradient(135% 120% at 50% -10%, #1a1530 0%, #12101f 60%, #0a0814 100%);
  --pp-mid: #12101f;
  --pp-txt: #f4f2fb; --pp-dim: rgba(244, 242, 251, .58); --pp-panel: rgba(255, 255, 255, .05); --pp-line: rgba(131, 56, 236, .45);
  --pp-acc: #ff4fa0; --pp-hot: #ffd166; --pp-track: rgba(244, 242, 251, .14);
  --pp-btn: linear-gradient(180deg, #8338EC, #6f2bd0); --pp-btnTxt: #fff;
  --pp-well: #06050d; --pp-wellDot: rgba(150, 140, 255, .09); --pp-wall: #8338ec;
  --pp-ui: 'Poppins', system-ui, sans-serif;
  --pp-rad: 16px;
}

@keyframes pp-flashp { 0%, 100% { box-shadow: none } 40% { box-shadow: 0 0 0 2px var(--pp-hot), 0 0 22px var(--pp-hot) } }
@keyframes pp-pulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

/* ── setup card (on the screen's palette) ───────────────────────────────── */
#pippily-game-screen { background: var(--pp-bg); color: var(--pp-txt); }
.pp-setup-card { max-width: 560px; margin: 24px auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; font-family: var(--pp-ui); background: var(--pp-panel); color: var(--pp-txt); border: 1px solid var(--pp-line); }
.pp-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pp-dim); font-weight: 700; }
.pp-setup-title { margin: 0; font-size: 30px; }
.pp-setup-blurb, .pp-setup-hint { margin: 0; line-height: 1.55; font-size: 14px; }
.pp-setup-hint { color: var(--pp-dim); font-size: 12.5px; }
.pp-setup-row { display: flex; align-items: center; gap: 12px; }
.pp-setup-lab { width: 64px; font-weight: 700; font-size: 13px; color: var(--pp-dim); }
.pp-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-opt { min-width: 52px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--pp-line); background: var(--pp-panel); color: var(--pp-txt); font: 700 14px var(--pp-ui); cursor: pointer; }
.pp-opt[data-on="1"] { background: var(--pp-btn); color: var(--pp-btnTxt); box-shadow: 0 0 0 2px var(--pp-txt); }
.pp-start { margin-top: 6px; height: 48px; border-radius: 12px; border: 1px solid var(--pp-line); background: var(--pp-btn); color: var(--pp-btnTxt); font: 800 17px var(--pp-ui); letter-spacing: .04em; cursor: pointer; }
.pp-start:active, .pp-opt:active { transform: translateY(1px); }
@media (hover: hover) { .pp-start:hover { filter: brightness(1.12); } .pp-opt:hover { box-shadow: 0 0 0 2px var(--pp-txt); } }

/* ── the root ───────────────────────────────────────────────────────────── */
.pp-root {
  position: relative; box-sizing: border-box; overflow: hidden;
  background: var(--pp-bg); color: var(--pp-txt); font-family: var(--pp-ui);
  user-select: none; -webkit-user-select: none;
}
.pp-root *, .pp-root *::before, .pp-root *::after { box-sizing: border-box; }
.pp-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.pp-root i, .pp-root em { font-style: normal; }
.pp-root em { font-weight: 700; letter-spacing: .16em; color: var(--pp-dim); }
[data-o="0"] { --pp-pc: var(--pp-p0); } [data-o="1"] { --pp-pc: var(--pp-p1); }
[data-o="2"] { --pp-pc: var(--pp-p2); } [data-o="3"] { --pp-pc: var(--pp-p3); }
/* 🌐 YOUR colour is your SEAT's (online you may be any seat — solo is always seat 0): pippily.js stamps .pp-root[data-me] */
.pp-root { --pp-me: var(--pp-p0); }
.pp-root[data-me="1"] { --pp-me: var(--pp-p1); } .pp-root[data-me="2"] { --pp-me: var(--pp-p2); } .pp-root[data-me="3"] { --pp-me: var(--pp-p3); }
.pp-shape { color: var(--pp-pc); font-family: system-ui, sans-serif; line-height: 1; text-align: center; }
.pp-panel, .pp-you, .pp-balls, .pp-stand, .pp-run, .pp-ctrl, .pp-feed, .pp-rival { background: var(--pp-panel); border: 1px solid var(--pp-line); border-radius: var(--pp-rad); }
.pp-av { flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--pp-pc); color: var(--pp-pc); background: rgba(255, 255, 255, .07); font-family: system-ui, sans-serif; line-height: 1; }

/* ── status chips: glyph + line style, never colour alone (AIMING… dashed · ✓ READY filled · ● BOUNCING · ■) ── */
/* ⛔ a FIXED width: "✓ READY" → "● BOUNCING" resized an auto chip and moved it (the §6 walk) */
.pp-chip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 90px; height: 18px; padding: 0 5px; border-radius: 99px; font-size: 9px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; overflow: hidden; color: var(--pp-dim); border: 1.5px solid var(--pp-line); line-height: 1; }
.pp-chip[data-st="aiming"] { border-style: dashed; }
.pp-chip[data-st="ready"] { background: var(--pp-pc); color: #111; border-color: var(--pp-pc); }
.pp-chip[data-st="bouncing"] { color: var(--pp-txt); border-color: var(--pp-pc); }

/* ── a WELL (yours and the rivals' minis share every rule; --pp-k = px per unit, --pp-die = 7.5 units) ── */
.pp-well { position: relative; --pp-k: 3px; --pp-die: 22px; --pp-wt: max(3px, calc(var(--pp-k) * 1.1));
  background: radial-gradient(var(--pp-wellDot) 1px, transparent 1.5px) 0 0 / calc(var(--pp-k) * 5) calc(var(--pp-k) * 5), var(--pp-well);
  border-radius: calc(var(--pp-k) * 5) calc(var(--pp-k) * 5) 0 0; }
.pp-well[data-mini="1"] { --pp-wt: 2px; }
.pp-wall { position: absolute; background: var(--pp-wall); pointer-events: none; }
.pp-wall-l { left: calc(var(--pp-wt) * -1); top: calc(var(--pp-wt) * -1); width: var(--pp-wt); height: calc(100% + var(--pp-wt)); border-radius: var(--pp-wt) 0 0 0; }
.pp-wall-r { right: calc(var(--pp-wt) * -1); top: calc(var(--pp-wt) * -1); width: var(--pp-wt); height: calc(100% + var(--pp-wt)); border-radius: 0 var(--pp-wt) 0 0; }
.pp-wall-t { left: 0; right: 0; top: calc(var(--pp-wt) * -1); height: var(--pp-wt); }
/* the open bottom edge: a dashed lip, nothing solid */
.pp-lip { position: absolute; left: calc(var(--pp-wt) * -1); right: calc(var(--pp-wt) * -1); top: 100%; height: 12px; border-top: 2px dashed var(--pp-dim); background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent); pointer-events: none; }
.pp-well[data-mini="1"] .pp-lip { height: 5px; border-top-width: 1px; }
.pp-dice { position: absolute; inset: 0; }
/* a die: centred on its layout point; pippily.js writes the transform (push, wobble, pop, dip) */
.pp-d { position: absolute; width: var(--pp-die); height: var(--pp-die); transform: translate(-50%, -50%); z-index: 2; pointer-events: none; --pp-psc: 1; --pp-flash: 0; --pp-lglow: 0; }
.pp-d[data-n="0"] { display: none; }
.pp-plate { position: absolute; left: 50%; top: 50%; width: calc(var(--pp-die) * var(--pp-pf)); height: calc(var(--pp-die) * var(--pp-pf)); transform: translate(-50%, -50%) scale(var(--pp-psc)); z-index: -1; }
.pp-plate-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pp-plate-svg > * { fill: var(--pp-plate); stroke: #f4f1ea; stroke-width: 1.2px; vector-effect: non-scaling-stroke; fill-opacity: .92; }
.pp-well[data-mini="1"] .pp-plate-svg > * { stroke-width: .8px; }
.pp-face { position: absolute; inset: 0; display: block; }
/* PP-F3: the drawn corner IS the collider's RR (1.3 units); the DieRenderer die fills the hitbox exactly */
.pp-face .dr-die { width: 100% !important; height: 100% !important; border-radius: calc(var(--pp-k) * 1.3) !important; }
.pp-face::after { content: ''; position: absolute; inset: 0; border-radius: calc(var(--pp-k) * 1.3); pointer-events: none; z-index: 3;
  box-shadow: 0 0 calc(var(--pp-die) * .8) calc(var(--pp-die) * .12) rgba(255, 255, 255, calc(.85 * var(--pp-flash))),
    0 0 calc(var(--pp-die) * .7) calc(var(--pp-die) * .1) color-mix(in srgb, var(--pp-hot) calc(80% * var(--pp-lglow)), transparent); }
/* the toughness set — MUST match PP_LOOK in pippily.js (the board suite compares) */
.pp-d[data-n="1"] { --pp-plate: #e3d6b8; --pp-fc: #f4ecdb; --pp-ink: #2c2820; --pp-pf: 1.4; }
.pp-d[data-n="2"] { --pp-plate: #9fc2f2; --pp-fc: #d9e8ff; --pp-ink: #26448f; --pp-pf: 1.66; }
.pp-d[data-n="3"] { --pp-plate: #d6a638; --pp-fc: #e3bb55; --pp-ink: #6d4c09; --pp-pf: 1.95; }
.pp-d[data-n="4"] { --pp-plate: #b36b30; --pp-fc: #c07d45; --pp-ink: #4a2a0d; --pp-pf: 1.8; }
.pp-d[data-n="5"] { --pp-plate: #5cb6ff; --pp-fc: #101824; --pp-ink: #9adaff; --pp-pf: 1.78; }
.pp-d[data-n="6"] { --pp-plate: #ff665a; --pp-fc: #1d0c0d; --pp-ink: #ffb0a6; --pp-pf: 1.9; }
/* the MINI die (4–15 px): a flat face in the skin's colour; pips only once a die is 8 px or more (the mock's L105) */
.pp-well[data-mini="1"] .pp-face { background-color: var(--pp-fc); border-radius: calc(var(--pp-k) * 1.3); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .5); }
.pp-d[data-n="5"] .pp-face, .pp-d[data-n="6"] .pp-face { --pp-mglow: var(--pp-plate); }
.pp-well[data-mini="1"] .pp-d[data-n="5"] .pp-face, .pp-well[data-mini="1"] .pp-d[data-n="6"] .pp-face { box-shadow: inset 0 0 0 .75px var(--pp-plate), 0 0 3px var(--pp-plate); }
.pp-well[data-pipped="1"] .pp-d .pp-face { --pp-pr: calc(var(--pp-die) * .1); }
.pp-well[data-pipped="1"] .pp-d[data-n="1"] .pp-face { background-image: radial-gradient(circle at 50% 50%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)); }
.pp-well[data-pipped="1"] .pp-d[data-n="2"] .pp-face { background-image: radial-gradient(circle at 27% 27%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 73% 73%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)); }
.pp-well[data-pipped="1"] .pp-d[data-n="3"] .pp-face { background-image: radial-gradient(circle at 26% 26%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 50% 50%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 74% 74%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)); }
.pp-well[data-pipped="1"] .pp-d[data-n="4"] .pp-face { background-image: radial-gradient(circle at 27% 27%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 73% 27%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 27% 73%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 73% 73%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)); }
.pp-well[data-pipped="1"] .pp-d[data-n="5"] .pp-face { background-image: radial-gradient(circle at 26% 26%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 74% 26%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 50% 50%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 26% 74%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 74% 74%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)); }
.pp-well[data-pipped="1"] .pp-d[data-n="6"] .pp-face { background-image: radial-gradient(circle at 28% 23%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 72% 23%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 28% 50%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 72% 50%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 28% 77%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)), radial-gradient(circle at 72% 77%, var(--pp-ink) 0 var(--pp-pr), transparent calc(var(--pp-pr) + .6px)); }
.pp-num { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: calc(var(--pp-die) * .6); color: var(--pp-ink); background: var(--pp-fc); border-radius: calc(var(--pp-k) * 1.3); }

/* the launcher (engine LX 50, LY 9 → 50%, 6%): a barrel, a pivot, and on your well the handle */
.pp-barrel { position: absolute; left: 50%; top: 6%; width: max(4px, calc(var(--pp-k) * 3.4)); height: max(7px, calc(var(--pp-k) * 8)); margin-left: calc(max(4px, calc(var(--pp-k) * 3.4)) / -2);
  transform-origin: 50% 0; background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .2)); border: 1px solid rgba(0, 0, 0, .4); border-radius: 99px; z-index: 4; pointer-events: none; }
.pp-pivot { position: absolute; left: 50%; top: 6%; width: max(8px, calc(var(--pp-k) * 7)); height: max(8px, calc(var(--pp-k) * 7)); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), rgba(255, 255, 255, .08) 60%); border: 2px solid var(--pp-wall); z-index: 4; pointer-events: none; }
.pp-well[data-mini="1"] .pp-pivot { border-width: 1px; }
.pp-handle { position: absolute; width: max(14px, calc(var(--pp-k) * 5.6)); height: max(14px, calc(var(--pp-k) * 5.6)); transform: translate(-50%, -50%); border-radius: 50%; z-index: 5; pointer-events: none;
  display: flex; align-items: center; justify-content: center; font-size: max(8px, calc(var(--pp-k) * 2.8)); font-weight: 800; line-height: 1; font-family: system-ui, sans-serif;
  background: var(--pp-acc); color: #111; border: 2px solid #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-acc) 35%, transparent), 0 0 14px var(--pp-acc); }
.pp-handle[data-st="hover"] { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pp-acc) 40%, transparent), 0 0 22px var(--pp-acc); filter: brightness(1.15); }
.pp-handle[data-st="drag"] { background: #fff; border-color: var(--pp-acc); box-shadow: 0 0 0 8px color-mix(in srgb, var(--pp-acc) 30%, transparent), 0 0 26px var(--pp-acc); }
.pp-handle[data-st="locked"], .pp-handle[data-st="blocked"] { background: rgba(0, 0, 0, .45); color: var(--pp-dim); border: 2px dashed var(--pp-dim); box-shadow: none; }
/* the guide: dots to the first contact, a ghost ball touching it, a dashed ring AROUND the die (never on its face) */
.pp-guide { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.pp-guide circle { fill: var(--pp-acc); }
.pp-guide .pp-ghost { fill: color-mix(in srgb, var(--pp-acc) 20%, transparent); stroke: var(--pp-acc); stroke-width: .45; }
.pp-target { position: absolute; width: calc(var(--pp-die) * 1.5); height: calc(var(--pp-die) * 1.5); border: 2px dashed var(--pp-acc); border-radius: calc(var(--pp-die) * .34); box-shadow: 0 0 12px -2px var(--pp-acc); z-index: 3; pointer-events: none; display: none; }
.pp-target[data-on="1"] { display: block; }
/* the ball's layer: clipped at the open bottom ONLY (playtest 2026-09-26 — the ball was drawn whole below the lip, then
   vanished). The polygon runs far past the top and sides, so a glow or orbit ring near a wall is never cut; it stops
   exactly at 100% (the dashed lip). ⛔ clip-path makes a stacking context — the layer carries the ball's z-index. */
.pp-ballclip { position: absolute; inset: 0; z-index: 4; pointer-events: none; clip-path: polygon(-100% -100%, 200% -100%, 200% 100%, -100% 100%); }
/* the ball: glow grows with the run; 1 / 2 / 3 orbit rings at the ladder's lines (ring COUNT reads in greyscale) */
.pp-ball { position: absolute; width: max(4px, calc(var(--pp-k) * 3.6)); height: max(4px, calc(var(--pp-k) * 3.6)); transform: translate(-50%, -50%); border-radius: 50%; z-index: 4; pointer-events: none;
  --pp-bc: var(--pp-pc); --pp-glow: 2;
  background: radial-gradient(circle at 35% 30%, #fff 0 35%, #dfe9ff 60%, var(--pp-bc) 100%); box-shadow: 0 0 calc(var(--pp-glow) * var(--pp-k)) calc(var(--pp-glow) * var(--pp-k) * .2) var(--pp-bc); }
.pp-ball[data-hot="1"] { --pp-bc: var(--pp-hot); background: radial-gradient(circle at 35% 30%, #fff 0 35%, #ffe7a8 60%, var(--pp-bc) 100%); }
.pp-ball[data-on="0"] { display: none; }
.pp-orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid var(--pp-hot); transform: translate(-50%, -50%); display: none; }
.pp-orbit[data-k="1"] { width: 190%; height: 190%; } .pp-orbit[data-k="2"] { width: 280%; height: 280%; border-style: dashed; opacity: .75; } .pp-orbit[data-k="3"] { width: 370%; height: 370%; opacity: .55; }
.pp-ball[data-rings="1"] .pp-orbit[data-k="1"], .pp-ball[data-rings="2"] .pp-orbit[data-k="1"], .pp-ball[data-rings="2"] .pp-orbit[data-k="2"],
.pp-ball[data-rings="3"] .pp-orbit { display: block; }
.pp-well[data-mini="0"] .pp-orbit { border-width: 2px; }
/* STUCK (owner): a ring that fills once a second, a tick when it closes */
.pp-stuck { position: absolute; left: 50%; top: 50%; width: 320%; height: 320%; transform: translate(-50%, -50%); border-radius: 50%; display: none; --pp-sf: 0%;
  background: conic-gradient(var(--pp-hot) var(--pp-sf), rgba(255, 255, 255, .15) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 76%); mask: radial-gradient(closest-side, transparent 72%, #000 76%); }
.pp-stuck[data-on="1"] { display: block; }
/* the TRAY (owner, Puyo): a grey bean that grows with the garbage waiting in it, "+N" on it. The SLOT is fixed. */
.pp-tray { position: absolute; z-index: 6; pointer-events: none; display: flex; align-items: center; justify-content: center; --pp-tk: 0; }
.pp-bean { position: absolute; left: 50%; top: 50%; width: 100%; height: 76%; border-radius: 999px; transform: translate(-50%, -50%) scale(calc(.45 + .09 * var(--pp-tk)));
  background: radial-gradient(circle at 35% 30%, #d8d8d8, #8e8e8e 55%, #5c5c5c); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55), 0 0 10px var(--pp-hot); opacity: 0; transition: opacity .12s; }
.pp-tray[data-on="1"] .pp-bean { opacity: 1; }
.pp-tray-n { position: relative; font-size: 13px; font-weight: 900; color: #111; line-height: 1; font-variant-numeric: tabular-nums; }
.pp-well[data-mini="1"] .pp-tray { right: 2px; top: 2px; width: 26px; height: 16px; }
.pp-well[data-mini="1"] .pp-tray-n { font-size: 9px; }
/* the drag surface: the whole well + a strip above it */
.pp-drag { position: absolute; left: -8px; right: -8px; top: -18px; bottom: 0; z-index: 7; touch-action: none; cursor: grab; }
.pp-root[data-lock="1"] .pp-drag { cursor: default; }
.pp-drain { position: absolute; left: 0; right: 0; top: calc(100% + 15px); height: 12px; font-size: 9px; line-height: 12px; font-weight: 700; letter-spacing: .16em; color: var(--pp-dim); text-align: center; white-space: nowrap; overflow: hidden; }
.pp-wellbox { position: relative; }
.pp-wellbox > .pp-well { position: absolute; inset: 0; }

/* the FX layer: one canvas over the whole root (particles, the gust, the trails) */
.pp-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

/* ── rivals ─────────────────────────────────────────────────────────────── */
.pp-rtitle { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--pp-dim); white-space: nowrap; display: flex; align-items: center; justify-content: space-between; }
.pp-menu { flex: none; width: 30px; height: 24px; border: 1px solid var(--pp-line); border-radius: 999px; cursor: pointer; font-size: 13px; background: var(--pp-panel); color: var(--pp-txt); display: none; }
.pp-rivals { display: flex; gap: 8px; min-height: 0; }
.pp-rival { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pp-rival[data-st="bouncing"] { border-color: var(--pp-pc); }
.pp-rhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 22px 22px; column-gap: 8px; row-gap: 2px; align-items: center; padding: 8px 10px 0; }
.pp-rhead .pp-av { grid-row: 1 / 3; width: 34px; height: 34px; font-size: 15px; }
.pp-rname { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-rhead .pp-chip { grid-row: 2; grid-column: 2; justify-self: start; }
.pp-rpips { grid-row: 1 / 3; grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; }
.pp-rpips em { font-size: 8px; letter-spacing: .12em; }
.pp-rpips b { font-size: 26px; line-height: 30px; font-weight: 800; font-variant-numeric: tabular-nums; width: 44px; text-align: right; }
.pp-rwell { flex: 1 1 0; min-height: 0; container-type: size; display: flex; align-items: flex-start; justify-content: center; padding-top: 14px; }
.pp-rwell > .pp-well { height: min(calc(100cqh - 22px), calc((100cqw - 22px) * 1.5)); aspect-ratio: 2 / 3; }

/* ── feed ───────────────────────────────────────────────────────────────── */
.pp-feed { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; overflow: hidden; }
.pp-feedh { font-size: 9px; font-weight: 700; letter-spacing: .18em; color: var(--pp-dim); height: 12px; }
/* ⛔ a FIXED line height — a line holding "▲"/"—" from a fallback font is 1px taller (Ring Out's §6 walk) */
.pp-feedl { flex: none; height: 18px; line-height: 18px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 6px; }
.pp-feedl > span { overflow: hidden; text-overflow: ellipsis; }
.pp-feedsym { flex: none; width: 14px; text-align: center; font-family: system-ui, sans-serif; color: var(--pp-pc); }
.pp-feedsym:not([data-o]) , .pp-feedsym[data-o=""] { color: var(--pp-dim); }
.pp-feedsym[data-o="0"] { --pp-pc: var(--pp-p0); } .pp-feedsym[data-o="1"] { --pp-pc: var(--pp-p1); } .pp-feedsym[data-o="2"] { --pp-pc: var(--pp-p2); } .pp-feedsym[data-o="3"] { --pp-pc: var(--pp-p3); }
.pp-feedl[data-old="1"] { color: var(--pp-dim); }
.pp-feedl[data-old="0"] { font-weight: 600; }
.pp-feedl[data-old="0"][data-tone="hot"] { color: var(--pp-hot); font-weight: 800; }

/* ── right column: you · ball · standings · run · controls ──────────────── */
.pp-you { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 156px; grid-template-rows: 24px 20px 1fr; column-gap: 10px; padding: 12px 14px; border: 2px solid var(--pp-me); }
.pp-av-you { grid-row: 1 / 3; width: 46px; height: 46px; font-size: 21px; }
.pp-youtxt { grid-row: 1 / 3; grid-column: 2; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-youname { font-size: 19px; line-height: 22px; }
.pp-youtxt .pp-chip { align-self: flex-start; }
.pp-youpips { grid-row: 1 / 4; grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; }
.pp-youpips em { font-size: 9px; }
.pp-youpips b { font-size: 62px; line-height: 66px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-yourank { grid-row: 3; grid-column: 1 / 3; align-self: end; font-size: 12px; color: var(--pp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-balls { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.pp-ballno { flex: none; width: 110px; font-size: 13px; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-bdots { flex: 1; display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.pp-bdot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .7); }
.pp-bdot[data-st="used"] { background: none; border: 1.5px dashed var(--pp-dim); opacity: .55; }
.pp-bdot[data-st="cur"] { background: #fff; box-shadow: 0 0 0 2px var(--pp-acc), 0 0 10px var(--pp-acc); }
.pp-ballsleft { flex: none; width: 52px; text-align: right; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--pp-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-stand { display: flex; flex-direction: column; padding: 9px 14px 6px; }
.pp-standh { font-size: 9px; height: 16px; }
.pp-srow { height: 24px; display: grid; grid-template-columns: 34px 18px minmax(0, 1fr) 80px 48px; align-items: center; column-gap: 4px; font-size: 13px; }
.pp-srow[data-empty="1"] { visibility: hidden; }
.pp-srank { font-size: 10px; font-weight: 700; color: var(--pp-dim); font-variant-numeric: tabular-nums; }
.pp-srow[data-me="1"] .pp-sname { font-weight: 700; }
.pp-sname { white-space: nowrap; overflow: hidden; }
.pp-sst { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--pp-dim); text-align: right; white-space: nowrap; overflow: hidden; }
.pp-spips { font-size: 17px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.pp-run { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 14px 34px 1fr; padding: 10px 14px; overflow: hidden; }
.pp-run[data-flash="1"] { animation: pp-flashp .5s ease-out; box-shadow: 0 0 0 2px var(--pp-hot), 0 0 26px var(--pp-hot); }
.pp-runh { grid-column: 1 / 3; font-size: 9px; }
.pp-count { grid-row: 2; font-size: 36px; line-height: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-count[data-hot="1"] { text-shadow: 0 0 16px var(--pp-hot); }
.pp-runtxt { grid-row: 2; grid-column: 2; font-size: 16px; line-height: 34px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.pp-meter { grid-row: 3; grid-column: 1 / 3; position: relative; align-self: end; height: 34px; }
.pp-cells { display: flex; gap: 3px; height: 10px; }
.pp-cell { flex: 1; border-radius: 3px; background: rgba(255, 255, 255, .08); border: 1px solid transparent; }
.pp-cell[data-line="1"] { border-color: var(--pp-txt); }
.pp-cell[data-on="1"] { background: var(--pp-acc); }
.pp-cell[data-on="hot"] { background: var(--pp-hot); }
.pp-tags { position: absolute; left: 0; right: 0; top: 14px; height: 18px; }
.pp-tag { position: absolute; left: var(--pp-at); top: 0; width: 34px; height: 18px; margin-left: -17px; display: flex; align-items: center; justify-content: center; border-radius: 4px;
  font-size: 11px; font-weight: 800; color: var(--pp-dim); border: 1px dashed var(--pp-line); white-space: nowrap; }
.pp-tag[data-on="1"] { background: var(--pp-hot); color: #1a1200; border: 1px solid var(--pp-hot); }
/* PP-F7: the BIG RUN stamp — ON the run panel, never over the well */
.pp-stamp { position: absolute; right: 10px; top: 8px; width: 132px; height: 28px; padding: 0 6px; display: flex; visibility: hidden; justify-content: center; align-items: center; overflow: hidden; transform: rotate(-4deg); border: 2px solid var(--pp-hot); border-radius: 8px;
  background: rgba(0, 0, 0, .6); color: var(--pp-hot); font-size: 14px; font-weight: 900; letter-spacing: .08em; text-shadow: 0 0 10px var(--pp-hot); white-space: nowrap; }
.pp-stamp[data-on="1"] { visibility: visible; }
.pp-ctrl { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.pp-timer { position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; }
.pp-tring { position: absolute; inset: 0; border-radius: 50%; }
.pp-timer[data-low="1"] { outline: 2px dashed var(--pp-acc); outline-offset: 3px; }
.pp-timer[data-low="1"] .pp-tin b { animation: pp-pulse 1s ease-in-out infinite; }
.pp-tin { position: absolute; inset: 8px; border-radius: 50%; background: var(--pp-mid); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.pp-tin b { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-tin em { font-size: 9px; margin-top: 3px; letter-spacing: .1em; }
.pp-ctxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-ctxt em { font-size: 9px; }
.pp-ctxt span { font-size: 11px; line-height: 15px; color: var(--pp-dim); height: 30px; overflow: hidden; }
.pp-ready { flex: none; width: 150px; height: 60px; border-radius: 12px; background: var(--pp-btn); color: var(--pp-btnTxt); border: 2px solid rgba(0, 0, 0, .25);
  font-size: 17px; font-weight: 800; letter-spacing: .12em; cursor: pointer; white-space: nowrap; overflow: hidden; padding: 0 6px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 20px -6px var(--pp-acc); transition: filter .12s, transform .08s; }
.pp-ready:active:not(:disabled) { filter: brightness(.84); transform: translateY(2px); }
@media (hover: hover) { .pp-ready:hover:not(:disabled) { filter: brightness(1.14); box-shadow: 0 0 18px -2px rgba(255, 255, 255, .35); } .pp-menu:hover { box-shadow: 0 0 0 2px var(--pp-txt); } }
.pp-ready:disabled { background: rgba(0, 0, 0, .18); color: var(--pp-dim); border: 2px dashed var(--pp-line); font-size: 13px; font-weight: 700; letter-spacing: .08em; cursor: not-allowed; box-shadow: none; }

/* ── PP-M5 the tally (a screen-level layer INSIDE the root, never fixed) ── */
.pp-tally { position: absolute; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .62); }
.pp-tally[data-on="1"] { display: flex; }
.pp-tcard { width: min(540px, calc(100% - 24px)); padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 8px; border-radius: 20px; background: #12141b; border: 2px solid var(--pp-acc); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.pp-ttitle { text-align: center; font-size: 22px; letter-spacing: .14em; }
.pp-tsub { text-align: center; font-size: 12px; color: var(--pp-dim); }
.pp-trows { display: flex; flex-direction: column; gap: 8px; }
.pp-trow { height: 42px; display: grid; grid-template-columns: 28px 76px minmax(0, 1fr) 46px 64px; align-items: center; column-gap: 10px; padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--pp-line); }
.pp-trow[data-win="1"] { border: 2px solid var(--pp-pc); background: color-mix(in srgb, var(--pp-pc) 22%, transparent); }
.pp-trow .pp-shape { font-size: 15px; }
.pp-tname { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.pp-tbar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pp-tbar i { display: block; height: 100%; width: 0; background: var(--pp-pc); }
.pp-tnum { font-size: 24px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.pp-tst { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-align: center; color: var(--pp-dim); white-space: nowrap; }
.pp-trow[data-win="1"] .pp-tst { color: var(--pp-txt); }

/* ── end screen rows ────────────────────────────────────────────────────── */
.pp-endrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid rgba(127, 127, 127, .2); }
.pp-endrow[data-win="1"] { font-weight: 800; }
.pp-endnm { display: flex; align-items: center; gap: 8px; }
.pp-endnm .pp-shape { font-size: 16px; width: 1.2em; }
.pp-endst { font-size: 13px; opacity: .8; }
.pp-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .pp-root *, .pp-root *::before, .pp-root *::after { animation: none !important; transition: none !important; }
}

/* ── PHONE — one grid from the same DOM: A you · ball · run / B rivals / your well / feed / controls ── */
@media (max-width: 999px) {
  #pippily-game-screen.pp-playing .wrap { padding: 0 2px; max-width: none; }
  #pippily-game-screen.pp-playing .topbar { display: none; }
  #pippily-game-screen.pp-playing.pp-topbar-open .topbar { display: flex; }
  /* the notch: the hidden .topbar carried the safe-area inset (predicely_notch_safe_area; test/_safe_area_top.test.js).
     ⛔ PADDING, never margin (.476: a margin collapsed through the screen and the page scrolled by the notch). */
  #pippily-game-screen.pp-playing:not(.pp-topbar-open) > .wrap { padding-top: env(safe-area-inset-top, 0px); }
  .pp-root {
    --pp-rowA: 52px; --pp-rowB: 116px;
    width: 100%; height: var(--pp-phone-h, 720px); padding: 8px;
    display: grid; grid-template-columns: 94px minmax(0, 1fr) 118px;
    grid-template-rows: var(--pp-rowA) var(--pp-rowB) minmax(0, 1fr) 22px 58px;
    grid-template-areas: "you balls run" "rivals rivals rivals" "well well well" "feed feed feed" "ctrl ctrl ctrl";
    gap: 6px;
  }
  /* two or three rivals: the 49-px minis need 106 (one rival's 66-px mini keeps 116) — playtest 2026-09-26 */
  .pp-root[data-n="3"], .pp-root[data-n="4"] { --pp-rowB: 106px; }
  .pp-left, .pp-right { display: contents; }
  .pp-rtitle, .pp-stand { display: none; }
  .pp-rivals { grid-area: rivals; gap: 6px; }
  .pp-feed { grid-area: feed; padding: 0 8px; justify-content: center; border-radius: 8px; }
  .pp-feedh { display: none; }
  .pp-feedl { height: 20px; line-height: 20px; font-size: 11px; }
  .pp-feedl[data-old="1"] { display: none; }
  .pp-mid { grid-area: well; min-height: 0; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 10px; }
  /* ⚖️ playtest 2026-09-26 (owner: "widen the board?" — the phone is HEIGHT-bound, so reclaim height): the drain label
     sits INSIDE the well's empty bottom band (no die reaches below y 138 of 150; ball 1 only), the drag reaches 10 px up
     not 18, and the reserve under the well is the lip alone — 46 → 18 px, ≈ +19 px of well width. */
  .pp-wellbox { height: min(calc(100cqh - 18px), calc(100cqw * 1.5)); aspect-ratio: 2 / 3; }
  .pp-drain { top: calc(100% - 15px); font-size: 8px; letter-spacing: .12em; pointer-events: none; }
  .pp-drag { top: -10px; }
  .pp-well[data-mini="0"] .pp-tray { right: 4px; top: 4px; width: 44px; height: 28px; }
  /* row A */
  .pp-you { grid-area: you; display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
  .pp-av-you { width: 30px; height: 30px; font-size: 14px; }
  .pp-youtxt { position: absolute; left: 26px; top: 28px; }
  .pp-youname, .pp-yourank { display: none; }
  .pp-youtxt .pp-chip { width: 18px; min-width: 18px; height: 18px; padding: 0; font-size: 9px; background: #111; color: var(--pp-txt); }
  .pp-youtxt .pp-chip[data-st="ready"] { background: var(--pp-pc); color: #111; }
  .pp-youpips { align-items: flex-start; }
  .pp-youpips em { font-size: 7.5px; letter-spacing: .08em; }
  .pp-youpips b { font-size: 25px; line-height: 27px; width: 40px; }
  .pp-balls { grid-area: balls; display: grid; grid-template-rows: 12px 10px 10px; row-gap: 3px; padding: 6px 8px; align-content: center; }
  .pp-ballno { width: auto; font-size: 8px; white-space: nowrap; letter-spacing: .08em; }
  .pp-bdots { justify-content: flex-start; gap: 2.6px; }
  .pp-bdot { width: 7px; height: 7px; }
  .pp-ballsleft { width: auto; text-align: left; font-size: 7.5px; }
  .pp-run { grid-area: run; grid-template-columns: minmax(0, 1fr) 40px; grid-template-rows: 18px 1fr; padding: 5px 7px; }
  .pp-runh { grid-column: 1; grid-row: 1; font-size: 8px; letter-spacing: .12em; line-height: 18px; }
  .pp-count { grid-column: 2; grid-row: 1; font-size: 18px; line-height: 18px; text-align: right; }
  .pp-runtxt { display: none; }
  .pp-meter { grid-row: 2; grid-column: 1 / 3; height: 20px; align-self: center; }
  .pp-cells { height: 6px; gap: 2px; }
  .pp-tags { top: 8px; height: 12px; }
  .pp-tag { width: 20px; margin-left: -10px; height: 12px; font-size: 7.5px; }
  .pp-stamp { right: 2px; top: 2px; width: 74px; height: 18px; font-size: 10px; padding: 0 3px; }
  /* row B: the rivals. One rival: mini left, info right. Two or three: name on top, mini below with the info beside it */
  .pp-rival { display: grid; grid-template-columns: var(--pp-mw) 20px minmax(0, 1fr); grid-template-rows: 22px 18px 1fr 30px; column-gap: 6px; padding: 7px; }
  .pp-rhead { display: contents; }
  /* ⛔ padding-top 0: the desktop rule's 14px padding squashed every phone mini to 66 × 85 — the dice and the FX went off 2:3 */
  .pp-rwell { grid-column: 1; grid-row: 1 / 5; container-type: normal; width: var(--pp-mw); height: calc(var(--pp-mw) * 1.5); padding-top: 0; align-self: center; }
  .pp-rwell > .pp-well { height: 100%; width: 100%; }
  .pp-rivals { --pp-mw: 66px; }
  .pp-rhead .pp-av { grid-column: 2; grid-row: 1; width: 20px; height: 20px; font-size: 10px; border-width: 1.5px; }
  .pp-rname { grid-column: 3; grid-row: 1; font-size: 11px; }
  .pp-rhead .pp-chip { grid-column: 2 / 4; grid-row: 2; justify-self: start; width: 70px; height: 15px; font-size: 7px; padding: 0 4px; }
  .pp-rpips { grid-column: 2 / 4; grid-row: 4; align-items: flex-start; }
  .pp-rpips em { font-size: 7px; }
  .pp-rpips b { font-size: 24px; line-height: 24px; text-align: left; }
  .pp-rivals[data-nr="2"], .pp-rivals[data-nr="3"] { --pp-mw: 49px; }
  .pp-rivals[data-nr="2"] .pp-rival, .pp-rivals[data-nr="3"] .pp-rival { grid-template-columns: var(--pp-mw) minmax(0, 1fr); grid-template-rows: 18px 16px 1fr 26px; padding: 5px 6px; column-gap: 5px; row-gap: 3px; }
  .pp-rivals[data-nr="2"] .pp-rwell, .pp-rivals[data-nr="3"] .pp-rwell { grid-row: 2 / 5; align-self: end; }
  .pp-rivals[data-nr="2"] .pp-rhead .pp-av, .pp-rivals[data-nr="3"] .pp-rhead .pp-av { grid-column: 1; grid-row: 1; width: 18px; height: 18px; }
  .pp-rivals[data-nr="2"] .pp-rname, .pp-rivals[data-nr="3"] .pp-rname { grid-column: 1 / 3; grid-row: 1; padding-left: 22px; }
  .pp-rivals[data-nr="2"] .pp-rhead .pp-chip, .pp-rivals[data-nr="3"] .pp-rhead .pp-chip { grid-column: 2; grid-row: 2; justify-self: stretch; }
  .pp-rivals[data-nr="2"] .pp-rpips, .pp-rivals[data-nr="3"] .pp-rpips { grid-column: 2; grid-row: 4; }
  .pp-rivals[data-nr="3"] .pp-rpips b { font-size: 20px; }
  /* PP-F5: at 4 players the chip is a glyph only (pippily.js writes it) — a square slot */
  .pp-root[data-glyph="1"] .pp-rhead .pp-chip { justify-self: start; width: 20px; padding: 0; font-size: 9px; }
  /* controls */
  .pp-ctrl { grid-area: ctrl; padding: 2px 4px; gap: 8px; }
  .pp-timer { width: 52px; height: 52px; }
  .pp-tin { inset: 6px; }
  .pp-tin b { font-size: 18px; }
  .pp-tin em { font-size: 7px; }
  .pp-ctxt span { font-size: 10.5px; line-height: 14px; height: 28px; }
  .pp-ready { width: 158px; height: 50px; font-size: 15px; }
  .pp-ready:disabled { font-size: 11.5px; }
  .pp-menu { display: flex; align-items: center; justify-content: center; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 22px; font-size: 12px; }
  .pp-tcard { padding: 14px 10px 10px; }
  .pp-trow { height: 38px; grid-template-columns: 22px 58px minmax(0, 1fr) 36px 50px; column-gap: 6px; padding: 0 8px; }
  .pp-tnum { font-size: 20px; }
}
/* the mock's 360 × 740 floor: same slots, a little tighter */
@media (max-width: 370px) {
  .pp-root { grid-template-columns: 88px minmax(0, 1fr) 110px; padding: 6px; gap: 5px; }
  .pp-ready { width: 146px; }
  .pp-rivals { --pp-mw: 62px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (the mock's 1280 × 637 less the 84px chat strip) ── */
@media (min-width: 1000px) {
  #pippily-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .pp-root {
    width: 1280px; height: 553px; padding: 14px;
    display: flex; flex-direction: row; gap: 14px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 26px 60px -30px #000;
  }
  .pp-left, .pp-right { flex: none; width: 372px; display: flex; flex-direction: column; min-height: 0; }
  .pp-left { gap: 8px; }
  .pp-rtitle { height: 18px; padding-left: 4px; }
  .pp-rivals { flex: 1 1 0; }
  .pp-feed { flex: none; height: 116px; }
  .pp-mid { flex: 1 1 0; min-width: 0; position: relative; }
  /* PP-F8: the well is 333 × 500 — "Ball N of 10" lives in the right column now */
  /* ⛔ centred with calc(), NEVER a transform: the FX layer maps wells through offsetLeft, which cannot see a
     transform (a translateX(-50%) put every particle on your well 166 px to the right) */
  .pp-wellbox { position: absolute; left: calc(50% - 166.5px); top: 6px; width: 333px; height: 500px; }
  .pp-well[data-mini="0"] .pp-tray { left: calc(100% + 12px); top: 0; width: 58px; height: 40px; }
  .pp-right { gap: 8px; }
  .pp-you { flex: none; height: 112px; }
  .pp-balls { flex: none; height: 46px; }
  .pp-stand { flex: none; height: 126px; }
  .pp-run { flex: none; height: 96px; }
  .pp-ctrl { flex: 1 1 0; min-height: 0; }
  .pp-rivals[data-nr="3"] .pp-rhead { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 20px 18px 30px; padding: 6px 7px 0; column-gap: 6px; }
  .pp-rivals[data-nr="3"] .pp-rhead .pp-av { grid-row: 1; width: 22px; height: 22px; font-size: 11px; }
  .pp-rivals[data-nr="3"] .pp-rname { font-size: 12px; }
  .pp-rivals[data-nr="3"] .pp-rhead .pp-chip { grid-row: 2; grid-column: 1 / 3; }
  .pp-rivals[data-nr="3"] .pp-rpips { grid-row: 3; grid-column: 1 / 3; flex-direction: row; align-items: baseline; justify-content: space-between; }
  .pp-rivals[data-nr="3"] .pp-rpips b { font-size: 22px; line-height: 28px; }
}