/* frontend/highground.css — HIGH GROUND (id `highground`) board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Gulls / Swarm / Ricochet / Puttily precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * The SHELL reads the player's board scheme (GameTheme's --pgr-* tokens — Design's theme table is the same set,
 * Highground.dc.html L263–276), Arcade through `gm-arcade` on the screen (2 px accent panel borders, rounder corners —
 * L362). The VALLEY keeps its own storybook palette in every scheme (Design's VALLEY, L291). PLAYER colours are NOT
 * here: highground.js writes --hg-p0…3 (+ --hg-pNink) from frontend/player-colours.js, the ONE source a later Settings
 * colourblind mode feeds. ⭐ The castles KEEP Design's flag SHAPES (circle · square · triangle · diamond) — my call at the
 * review, OWNER-RULED at the build stop 2026-10-01 (keep): on a dense static board the shape is the ownership cue that survives the hand-mode
 * dim (HG-F9) and greyscale. Harvest = a ROUND +N, omen = a pointed SHIELD −N on a blighted plot (house rule 5).
 *
 * ── Geometry is the mock's (the FEEL SPEC in docs/design/batch15-highground-mock-review.md) ─────────
 * DESKTOP: ONE design box 1280 × 553 (the mock's 637 less its 84 px chat strip), scaled as a unit by BoardFit; the chat
 * PILL hands the VALLEY its 40 px (the board declares 593 via data-bf-h). Columns 272 / 1fr / 316, gap 14, pad 14;
 * cards 94; dice panel 150 (slots 64); tray chips 60, secret 56 × 60, buttons 46.
 * PHONE (384 × 812, survives 360 × 740): one column — header 30 · cards 50 · the VALLEY (the one flexible row) · dice +
 * feed bar 52 · tray (chips 46, captions 12, buttons 44). The three columns are `display: contents` there.
 * ⛔ HG-F1: the phone's live numbers are FLOORED (castle pill 11 px, section sums 10 px) and the label strip is widened
 * (.8fr column / .6fr row); highground-board.test.html MEASURES the 360 × 740 board (plot ≥ 38 px, pill, sums).
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every slot is a FIXED size except the valley. Feedback changes colour, glow or a ≤ 3 px transform — never size or
 * spacing. Controls disable (hatch + 🔒), never hide. HG-F2: the result block is a fixed, top-aligned stack. Tags, pills,
 * stamps, the banner and the flying chip exist from the first frame and only show or hide. The flying chip and the
 * epoch banner are ABSOLUTE layers of the root (never fixed — BoardFit scales them with the board); the phone drag
 * ghost is the one SCREEN-level element (`.hg-dragghost` on <body>; the phone is unscaled).
 */

#highground-game-screen, .hg-root, .hg-dragghost {
  --hg-bg: var(--pgr-bg, radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%));
  --hg-solid: var(--pgr-solid, #141519);
  --hg-seat: var(--pgr-seat, rgba(255, 255, 255, .035)); --hg-panel: var(--pgr-panel, rgba(255, 255, 255, .03));
  --hg-line: var(--pgr-line, rgba(255, 255, 255, .09));
  --hg-txt: var(--pgr-txt, #e9e8e4); --hg-dim: var(--pgr-dim, #8d8f95);
  --hg-sel: var(--pgr-sel, oklch(.74 .14 152)); --hg-selBg: var(--pgr-selBg, oklch(.34 .07 152));
  --hg-btn: var(--pgr-btn, linear-gradient(180deg, #34373e, #26282e)); --hg-btnTxt: var(--pgr-btnTxt, #f1f0ec);
  --hg-font: var(--pgr-font, 'Outfit', system-ui, sans-serif);
  --hg-panelBd: 1px solid var(--hg-line);
  --hg-rS: 7px; --hg-rM: 12px; --hg-rL: 16px;
  /* the VALLEY — Design's storybook palette, the same in every scheme */
  --hg-valley: #4a6f40; --hg-field1: #a9c881; --hg-field2: #bdd38c; --hg-field3: #d9cd8f; --hg-field4: #98bd79;
  --hg-furrow: rgba(52, 74, 30, .16); --hg-blight: #8c8a78; --hg-ink: #1d2a18;
  --hg-harvest: #f8e6a8; --hg-harvestEdge: #b98f35; --hg-harvestInk: #3d2f0c;
  --hg-omen: #353c4b; --hg-omenEdge: #161a22; --hg-omenInk: #ffffff;
  --hg-mountain: #b1a693; --hg-dragon: #d4674c; --hg-mine: #e8bb4a; --hg-wizard: #8f7ce3;
  --hg-legal: #fffbe3; --hg-lit: #fff6c8; --hg-target: #ffffff; --hg-gold: #f5c542; --hg-goldInk: #2e2408;
  --hg-badge: rgba(18, 22, 16, .86); --hg-badgeTxt: #ffffff; --hg-labelTxt: #f1f5e6;
  /* player colours — overwritten per seat by highground.js from PlayerColours (these are only the pre-paint fallback) */
  --hg-p0: #4fe07c; --hg-p1: #ff5c5c; --hg-p2: #ffd83d; --hg-p3: #6f5fe8;
  --hg-p0ink: #0b0c0f; --hg-p1ink: #0b0c0f; --hg-p2ink: #0b0c0f; --hg-p3ink: #ffffff;
}
#highground-game-screen.gm-arcade, .gm-arcade .hg-root {
  --hg-panelBd: 2px solid color-mix(in oklch, var(--hg-sel) 70%, transparent);
  --hg-rS: 9px; --hg-rM: 16px; --hg-rL: 22px;
}

/* ── keyframes. ⛔ pops animate the `scale` PROPERTY, never `transform` (predicely_scale_keyframe_trap) ── */
@keyframes hg-land { 0% { scale: 1.12 .82; } 45% { scale: .94 1.06; } 100% { scale: 1; } }
@keyframes hg-cloud { 0% { opacity: 0; translate: 0 -55%; } 60% { opacity: .95; } 100% { opacity: 0; translate: 0 0; } }
@keyframes hg-shake { 0%, 100% { translate: 0 0; } 25% { translate: -2px 0; } 75% { translate: 2px 0; } }
@keyframes hg-rise { 0% { scale: 1 .2; transform-origin: 50% 100%; } 100% { scale: 1 1; } }
@keyframes hg-ridge { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hg-flame { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
@keyframes hg-glow { 0% { box-shadow: inset 0 0 0 0 var(--hg-gold); } 40% { box-shadow: inset 0 0 0 4px var(--hg-gold), 0 0 18px 2px var(--hg-gold); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
@keyframes hg-pop { 0% { scale: .2; opacity: 0; } 65% { scale: 1.16; opacity: 1; } 100% { scale: 1; opacity: 1; } }
@keyframes hg-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--hg-gold); } 50% { box-shadow: 0 0 0 2px var(--hg-gold), 0 0 16px 4px var(--hg-gold); } }
@keyframes hg-ban { 0% { opacity: 0; scale: .7; } 12% { opacity: 1; scale: 1.06; } 20% { scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

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

/* ── the root ───────────────────────────────────────────────────────────── */
.hg-root {
  position: relative; box-sizing: border-box; overflow: hidden;
  background: var(--hg-bg); color: var(--hg-txt); font-family: var(--hg-font);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.hg-root *, .hg-root *::before, .hg-root *::after { box-sizing: border-box; }
.hg-root button { font-family: inherit; margin: 0; padding: 0; color: inherit; }
.hg-root i, .hg-root em { font-style: normal; }
.hg-box { background: var(--hg-panel); border: var(--hg-panelBd); }
.hg-ph-only { display: none !important; }
.hg-left, .hg-mid, .hg-right { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

/* ── player cards ── */
.hg-pls { display: flex; flex-direction: column; gap: 8px; }
.hg-pl { position: relative; flex: none; display: flex; flex-direction: column; justify-content: space-between; background: var(--hg-seat); border: var(--hg-panelBd); border-radius: var(--hg-rL); transition: box-shadow .25s; }
.hg-pl[data-cur="1"] { box-shadow: 0 0 0 2px var(--hg-sel), 0 0 20px var(--hg-selBg); }
.hg-pl[data-sc="1"] { box-shadow: 0 0 0 2px var(--hg-gold), 0 0 20px rgba(245, 197, 66, .45); }
.hg-plr1 { display: flex; align-items: center; min-width: 0; }
.hg-plr2 { display: flex; align-items: center; }
.hg-av { position: relative; flex: none; border-radius: 50%; background: var(--hg-panel); border: 1.5px dashed var(--hg-line); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--hg-dim); }
.hg-avb, .hg-avbi { position: absolute; }
.hg-avb { background: var(--hg-ink); }
.hg-avbi { background: var(--c); --t: 2.5px; }
.hg-plnm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hg-plnm b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-plnm em { color: var(--hg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-plg { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.hg-plg b { display: block; width: 100%; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; }
.hg-plg em { display: block; width: 100%; color: var(--hg-dim); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.hg-rp { display: flex; align-items: center; background: var(--hg-panel); border: 1px solid var(--hg-line); }
.hg-rp[data-n="0"] { opacity: .4; }
.hg-rp[data-n="0"] .hg-rpn { text-decoration: line-through; }
.hg-rpg { display: flex; align-items: flex-end; justify-content: center; background: var(--c); color: var(--ci); font-weight: 800; clip-path: var(--hg-cren); }
.hg-rpn { font-weight: 700; font-variant-numeric: tabular-nums; }
.hg-psec { flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; border-radius: var(--hg-rS); border: 1.5px solid var(--hg-line); background: repeating-linear-gradient(45deg, var(--hg-panel) 0 3px, transparent 3px 6px); }
.hg-psec[data-used="1"] { border-style: dashed; background: none; color: var(--hg-dim); }
.hg-tag { position: absolute; font-weight: 800; letter-spacing: .06em; border-radius: 999px; background: var(--hg-sel); color: var(--hg-solid); white-space: nowrap; opacity: 0; transition: opacity .25s; pointer-events: none; }
.hg-tag[data-on="1"] { opacity: 1; }
.hg-tag[data-k="score"] { background: var(--hg-gold); color: var(--hg-goldInk); }
.hg-tag[data-k="neg"] { background: var(--hg-omen); color: #fff; }
/* 🌐 ONLINE (slice B, HGB4): a seat's state — "🤖 playing for <name>" (a bot holds it), "⊘ LEFT", "⊘ OUT" (retired: its
   castles stay on the board in its colour and keep their live pills). An absolute badge from the first frame, at the
   card's top-LEFT (the turn tag owns the right); a seat that left or is out dims, its gold still readable. */
.hg-stat { position: absolute; font-weight: 800; letter-spacing: .04em; border-radius: 999px; background: var(--hg-solid); color: var(--hg-txt); border: 1px solid var(--hg-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .25s; pointer-events: none; }
.hg-stat[data-on="1"] { opacity: 1; }
.hg-stat[data-k="held"] { color: var(--hg-gold); border-color: color-mix(in oklch, var(--hg-gold) 55%, transparent); }
.hg-pl[data-out="1"] .hg-plr1, .hg-pl[data-out="1"] .hg-plr2 { opacity: .55; }
/* "Take my seat back" lies OVER the action row (absolute — the row never moves); the idle bar floats over the board */
.hg-acts { position: relative; }
.hg-reclaim { position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; gap: 4px; border-radius: var(--hg-rM); border: 2px solid var(--hg-gold); background: var(--hg-solid); color: var(--hg-txt); font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; }
.hg-reclaim[data-on="1"] { display: flex; }
.hg-reclaim b { color: var(--hg-gold); }
.hg-reclaim:disabled { opacity: .6; cursor: default; }
#highground-game-screen .wrap { position: relative; }

/* the shared flag shapes (seat) + the crenellated castle body */
.hg-root, .hg-dragghost { --hg-cren: polygon(0% 0%, 22% 0%, 22% 20%, 39% 20%, 39% 0%, 61% 0%, 61% 20%, 78% 20%, 78% 0%, 100% 0%, 100% 100%, 0% 100%); --hg-shield: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%); }
.hg-sh-circle { border-radius: 50%; }
.hg-sh-square { border-radius: 2px; }
.hg-sh-triangle { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.hg-sh-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
/* ⛔ AN OUTLINE = THE INK SHAPE + THE COLOUR SHAPE ON THE SAME BOX, the colour's polygon inset by --t on every vertex
 * (Design's crenIn / shapeIn fix, mock L370–371). NEVER a smaller copy of the shape in a smaller box: that only reads
 * for a plain box or a circle — on the castle the merlons' inner walls move the wrong way and the colour pokes THROUGH
 * the ink, and a triangle's or a diamond's edges come out uneven (owner playtest 2026-10-02; slice 1 had ported the
 * mock's first draft). Insets: a right-angle vertex moves t on both axes; the triangle's apex √5·t and base corners
 * φ·t (the exact offsets in a square box); the diamond's vertices √2·t. The suite probes the ring (§12). */
.hg-shin.hg-sh-circle { clip-path: inset(var(--t) round 50%); }
.hg-shin.hg-sh-square { clip-path: inset(var(--t) round 1px); }
.hg-shin.hg-sh-triangle { clip-path: polygon(50% calc(var(--t) * 2.236), calc(100% - var(--t) * 1.618) calc(100% - var(--t)), calc(var(--t) * 1.618) calc(100% - var(--t))); }
.hg-shin.hg-sh-diamond { clip-path: polygon(50% calc(var(--t) * 1.414), calc(100% - var(--t) * 1.414) 50%, 50% calc(100% - var(--t) * 1.414), calc(var(--t) * 1.414) 50%); }

/* ── the bag ── */
.hg-bag { flex: none; margin-top: auto; padding: 10px 12px; border-radius: var(--hg-rL); display: flex; flex-direction: column; gap: 8px; }
.hg-bagh { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--hg-dim); }
.hg-bags { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hg-bs { position: relative; height: 40px; margin-bottom: 14px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--k); }
.hg-bs em { position: absolute; left: 0; right: 0; bottom: -15px; text-align: center; font-size: 9px; font-weight: 700; color: var(--hg-dim); white-space: nowrap; }
.hg-bs i { position: absolute; left: 15%; right: 15%; top: 50%; height: 2px; background: var(--hg-dim); transform: rotate(-35deg); display: none; }
.hg-bs[data-st="spent"] { background: transparent; border: 1px dashed var(--hg-line); }
.hg-bs[data-st="spent"] b { filter: grayscale(1); opacity: .35; }
.hg-bs[data-st="spent"] i { display: block; }
.hg-bs[data-st="drawn"] { box-shadow: 0 0 0 2px var(--hg-gold), 0 0 16px var(--hg-gold); }
.hg-bs[data-st="drawn"] em { color: var(--hg-gold); }
.hg-bags[data-pulse="1"], .hg-bagm[data-pulse="1"] { animation: hg-pulse .45s ease-in-out 3; border-radius: 10px; }
.hg-bm { position: relative; width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--k); }
.hg-bm i { position: absolute; left: 15%; right: 15%; top: 50%; height: 2px; background: var(--hg-dim); transform: rotate(-35deg); display: none; }
.hg-bm[data-st="spent"] { background: transparent; border: 1px dashed var(--hg-line); }
.hg-bm[data-st="spent"] b { filter: grayscale(1); opacity: .35; }
.hg-bm[data-st="spent"] i { display: block; }
.hg-bm[data-st="drawn"] { box-shadow: 0 0 0 2px var(--hg-gold), 0 0 10px var(--hg-gold); }
.hg-bagm { display: flex; gap: 3px; align-items: center; margin-left: auto; }

/* ── the header (epoch · plots left · the strip · whose turn) ── */
.hg-hdr { flex: none; display: flex; align-items: center; gap: 14px; min-width: 0; }
.hg-ep { flex: none; text-align: center; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .06em; border-radius: 999px; background: var(--hg-panel); border: var(--hg-panelBd); white-space: nowrap; }
.hg-plots { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.hg-segs { display: flex; flex: 1; min-width: 0; }
.hg-seg { flex: 1; border: 1px solid var(--hg-line); border-radius: 2px; }
.hg-seg[data-on="1"] { background: var(--hg-dim); opacity: .55; }
.hg-turnt { margin-left: auto; font-weight: 700; color: var(--hg-dim); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.hg-menu { display: none; }
.hg-hdr2 { display: none; }

/* ── the VALLEY ── */
.hg-vbox { flex: 1 1 0; min-height: 0; min-width: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
.hg-valley {
  display: grid; background: var(--hg-valley); border-radius: calc(var(--hg-rL) + 2px);
  grid-template-columns: repeat(var(--hg-C, 6), minmax(0, 1fr)) minmax(0, var(--hg-lc, .62fr));
  grid-template-rows: repeat(var(--hg-R, 5), minmax(0, 1fr)) minmax(0, var(--hg-lr, .42fr));
  width: min(100cqw, calc(100cqh * var(--hg-A, 1.2))); height: min(100cqh, calc(100cqw / var(--hg-A, 1.2)));
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .25);
  touch-action: none;
}
.hg-plot { position: relative; container-type: size; min-width: 0; min-height: 0; border-radius: 9px; background: var(--hg-fbg); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); transition: filter .15s, box-shadow .15s, transform .15s; }
.hg-plot[data-blight="1"] { background: var(--hg-blight); }
.hg-plot > * { pointer-events: none; }
.hg-art, .hg-ghost { position: absolute; inset: 0; }
.hg-ghost { opacity: .92; display: none; }
.hg-plot[data-hov="1"] .hg-ghost { display: block; }
/* legal (a tile in hand): a ring + a dashed drop ring; filled plots dim (HG-F9: ownership still reads by flag shape) */
.hg-plot[data-legal="1"] { box-shadow: inset 0 0 0 2px var(--hg-legal), 0 0 12px -2px var(--hg-legal); cursor: pointer; }
.hg-plot[data-legal="1"]::after { content: ''; position: absolute; inset: 33%; border: 2px dashed var(--hg-legal); border-radius: 50%; opacity: .9; }
.hg-plot[data-legal="1"][data-hov="1"]::after { display: none; }
.hg-plot[data-dim="1"] { filter: brightness(.62) saturate(.5); }
.hg-plot[data-lit="lit"] { box-shadow: inset 0 0 0 3px var(--hg-lit), 0 0 16px -2px var(--hg-lit); filter: brightness(1.1); }
.hg-plot[data-lit="target"] { box-shadow: inset 0 0 0 3px var(--hg-target), 0 0 16px -2px var(--hg-target); filter: brightness(1.1); }
.hg-plot[data-lit="target"]::before { content: ''; position: absolute; inset: 0; border-radius: 9px; background: repeating-linear-gradient(135deg, rgba(20, 24, 34, .26) 0 5px, transparent 5px 11px); z-index: 1; }
.hg-plot[data-hov="1"] { box-shadow: inset 0 0 0 3px var(--hg-sel), 0 0 0 3px var(--hg-sel), 0 10px 24px -6px rgba(0, 0, 0, .6); transform: translateY(-2px); z-index: 4; filter: none; }
.hg-plot[data-pend="1"] { box-shadow: inset 0 0 0 3px var(--hg-sel), 0 0 0 3px var(--hg-sel), 0 0 18px var(--hg-sel); }
.hg-plot[data-sc="1"] { box-shadow: inset 0 0 0 3px var(--hg-gold), 0 0 22px 2px var(--hg-gold); z-index: 6; }
@media (hover: hover) { .hg-plot[data-legal="1"]:hover { filter: brightness(1.1); } }

/* castle: the crenellated body (ink, then the player's colour INSET ON THE SAME BOX — see .hg-shin above), the rank
 * numeral, the flag (seat shape). --t = Design's 3.2cqh outline (mock L376), the plot's own container units. */
.hg-cb, .hg-cf { position: absolute; left: 14%; right: 14%; top: 32%; bottom: 7%; }
.hg-cb { background: var(--hg-ink); clip-path: var(--hg-cren); }
.hg-cf { --t: 3.2cqh; background: var(--c); clip-path: polygon(calc(0% + var(--t)) var(--t), calc(22% - var(--t)) var(--t), calc(22% - var(--t)) calc(20% + var(--t)), calc(39% + var(--t)) calc(20% + var(--t)), calc(39% + var(--t)) var(--t), calc(61% - var(--t)) var(--t), calc(61% - var(--t)) calc(20% + var(--t)), calc(78% + var(--t)) calc(20% + var(--t)), calc(78% + var(--t)) var(--t), calc(100% - var(--t)) var(--t), calc(100% - var(--t)) calc(100% - var(--t)), var(--t) calc(100% - var(--t))); }
.hg-cn { position: absolute; left: 0; right: 0; top: 46%; bottom: 10%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 36cqh; line-height: 1; color: var(--ci); }
.hg-fo, .hg-fi { position: absolute; left: 34%; width: 32%; top: 1%; height: 31%; }
.hg-fo { background: var(--hg-ink); }
.hg-fi { --t: 3.2cqh; background: var(--c); }
.hg-wz { position: absolute; left: 1%; bottom: 1%; font-size: 15cqh; font-weight: 800; padding: 1% 5%; border-radius: 999px; background: var(--hg-wizard); color: #fff; line-height: 1.2; z-index: 2; }
/* harvest: ROUND +N · omen: a SHIELD −N (house rule 5 — shape and sign, never colour alone) */
.hg-hve { position: absolute; inset: 12%; border-radius: 50%; background: var(--hg-harvestEdge); }
.hg-hvi { position: absolute; inset: 16%; border-radius: 50%; background: var(--hg-harvest); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 34cqh; color: var(--hg-harvestInk); line-height: 1; }
.hg-hvi span { position: relative; z-index: 2; text-shadow: 0 0 3px var(--hg-harvest), 0 0 2px var(--hg-harvest); }
/* HG-F8: a THIN Dragon slash, drawn UNDER the digit so the struck value still reads */
.hg-slash { position: absolute; left: 10%; right: 10%; top: 48.5%; height: 3%; min-height: 2px; background: var(--hg-dragon); transform: rotate(-38deg); border-radius: 2px; z-index: 1; }
.hg-hvi .hg-slash { left: -4%; right: -4%; }
.hg-ome { position: absolute; left: 12%; right: 12%; top: 9%; bottom: 9%; background: var(--hg-omenEdge); clip-path: var(--hg-shield); }
.hg-omi { position: absolute; left: 16%; right: 16%; top: 13%; bottom: 13%; background: var(--hg-omen); clip-path: var(--hg-shield); display: flex; align-items: center; justify-content: center; padding-bottom: 14%; font-weight: 800; font-size: 32cqh; color: var(--hg-omenInk); line-height: 1; }
/* specials: a tile + its emoji (Design's placeholder) + its name on PC + a tag */
.hg-spb { position: absolute; inset: 8%; border-radius: 14px; background: var(--k); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.hg-sp-M .hg-spb { inset: 0; border-radius: 9px; box-shadow: inset 0 0 0 3px var(--hg-ink); }
.hg-spe { position: absolute; left: 0; right: 0; top: 8%; text-align: center; font-size: 42cqh; line-height: 1.1; }
.hg-spn { position: absolute; left: 0; right: 0; bottom: 11%; text-align: center; font-size: 11cqh; font-weight: 800; letter-spacing: .04em; color: var(--hg-ink); white-space: nowrap; }
.hg-spt { position: absolute; right: 2%; top: 2%; font-size: 17cqh; font-weight: 800; background: var(--hg-ink); color: #fff; padding: 1% 6%; border-radius: 999px; line-height: 1.15; }
.hg-sp-G .hg-spt { color: var(--hg-gold); }
/* HG-F10: the Dragon's tag SAYS "cancels harvests" — a tiny harvest disc, slashed (not ✕+) */
.hg-dtag { position: absolute; right: 3%; top: 3%; width: 24cqh; height: 24cqh; border-radius: 50%; background: var(--hg-harvest); box-shadow: 0 0 0 1.5px var(--hg-ink); }
.hg-dtag::after { content: ''; position: absolute; left: -12%; right: -12%; top: 42%; height: 16%; background: var(--hg-dragon); transform: rotate(-38deg); border-radius: 2px; box-shadow: 0 0 0 1px var(--hg-ink); }
/* the pills: live projection (dark), a preview change (±, omen-dark when negative), the ghost castle's score (sel) */
.hg-pill, .hg-dl, .hg-hb { position: absolute; right: -3%; top: -5%; font-size: max(var(--hg-pillMin, 0px), 19cqh); font-weight: 800; padding: 2% 7%; border-radius: 999px; background: var(--hg-badge); color: var(--hg-badgeTxt); font-variant-numeric: tabular-nums; line-height: 1.15; z-index: 3; display: none; white-space: nowrap; }
.hg-pill[data-on="1"], .hg-dl[data-on="1"], .hg-hb[data-on="1"] { display: block; }
.hg-pill[data-shake="1"] { animation: hg-shake .2s linear 1; }
.hg-dl { top: auto; bottom: -12%; right: auto; left: 50%; transform: translateX(-50%); font-size: max(var(--hg-pillMin, 0px), 21cqh); font-weight: 900; background: var(--hg-gold); color: var(--hg-goldInk); box-shadow: 0 0 0 2px var(--hg-ink); z-index: 7; }
.hg-dl[data-neg="1"] { background: var(--hg-omen); color: #fff; }
.hg-hb { background: var(--hg-sel); color: var(--hg-solid); z-index: 5; }
/* the payout chip over the castle being paid, and the leave stamps */
.hg-chipb { position: absolute; left: 50%; top: -30%; transform: translateX(-50%); font-size: max(var(--hg-pillMin, 0px), 30cqh); font-weight: 900; padding: 3% 10%; border-radius: 999px; background: var(--hg-gold); color: var(--hg-goldInk); box-shadow: 0 0 0 2px var(--hg-ink), 0 8px 18px rgba(0, 0, 0, .5); white-space: nowrap; z-index: 7; line-height: 1.2; display: none; }
.hg-chipb[data-on="1"] { display: block; animation: hg-pop .25s ease-out 1; }
.hg-chipb[data-neg="1"] { background: var(--hg-omen); color: #fff; }
.hg-stamp { position: absolute; left: 10%; right: 10%; bottom: 8%; text-align: center; font-size: max(var(--hg-pillMin, 0px), 15cqh); font-weight: 800; letter-spacing: .06em; border-radius: 6px; line-height: 1.5; display: none; z-index: 4; }
.hg-stamp[data-k="gone"] { display: block; color: #fff; background: var(--hg-ink); border: 1.5px dashed #fff; }
.hg-stamp[data-k="tray"] { display: block; color: var(--hg-goldInk); background: var(--hg-gold); }
.hg-plot[data-leave="gone"] .hg-art { opacity: .28; transform: translateY(-10%); transition: opacity .6s, transform .6s; }
.hg-plot[data-leave="tray"] .hg-art { animation: hg-land .45s ease-out 2; }
/* effects (the FEEL SPEC): a 1-frame squash, the omen cloud + the 2 px shake, the Mountain rise + ridge, the Dragon flame, the Mine glow */
.hg-fx { position: absolute; inset: 0; border-radius: 9px; pointer-events: none; opacity: 0; z-index: 2; }
.hg-plot[data-fx="land"] .hg-art { animation: hg-land .18s ease-out 1; }
.hg-plot[data-fx="omen"] .hg-fx { background: radial-gradient(60% 45% at 50% 40%, rgba(40, 44, 58, .95), rgba(40, 44, 58, .55) 60%, transparent 72%); animation: hg-cloud .4s ease-out 1; }
.hg-plot[data-fx="mtn"] .hg-art { animation: hg-rise .35s ease-out 1; transform-origin: 50% 100%; }
.hg-plot[data-fx="ridge"] .hg-fx { box-shadow: inset 0 0 0 3px var(--hg-mountain); animation: hg-ridge .5s ease-out 1; animation-delay: var(--hg-d, 0ms); }
.hg-plot[data-fx="flame"] .hg-fx { background: radial-gradient(circle at 50% 70%, rgba(255, 170, 60, .85), rgba(212, 103, 76, .6) 55%, transparent 75%); animation: hg-flame .45s ease-out 1 both; animation-delay: var(--hg-d, 0ms); }
.hg-plot[data-fx="mine"] { animation: hg-glow .55s ease-out 1 both; animation-delay: var(--hg-d, 0ms); }
/* the edge strip: coordinates + the live section sums (▲ between sections, ×2 on a Gold Mine section) */
.hg-lab { position: relative; container-type: size; min-width: 0; min-height: 0; color: var(--hg-labelTxt); }
.hg-lco { position: absolute; font-weight: 700; opacity: .7; }
.hg-lab[data-d="row"] .hg-lco { left: 6%; top: 2%; font-size: max(var(--hg-coMin, 0px), 24cqw); }
.hg-lab[data-d="col"] .hg-lco { left: 4%; top: 4%; font-size: max(var(--hg-coMin, 0px), 30cqh); }
.hg-lsum { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; white-space: pre-line; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; overflow: hidden; }
.hg-lab[data-d="row"] .hg-lsum { font-size: max(var(--hg-sumMin, 0px), 30cqw); }
.hg-lab[data-d="row"][data-split="1"] .hg-lsum { font-size: max(var(--hg-sumMin, 0px), 24cqw); }
.hg-lab[data-d="col"] .hg-lsum { font-size: max(var(--hg-sumMin, 0px), 36cqh); white-space: nowrap; }
.hg-sig { display: flex; align-items: center; justify-content: center; color: var(--hg-labelTxt); opacity: .7; container-type: size; }
.hg-sig b { font-size: 48cqmin; font-weight: 700; }

/* ── the dice panel: two slots (DieRenderer draws in them), the badges, the result block ── */
.hg-dice { flex: none; display: flex; align-items: center; border-radius: var(--hg-rL); }
.hg-d { flex: none; display: flex; flex-direction: column; align-items: center; position: relative; }
.hg-dslot { position: relative; flex: none; border: 2px dashed var(--hg-line); background: var(--hg-seat); border-radius: var(--hg-rM); display: flex; align-items: center; justify-content: center; transition: box-shadow .2s; }
.hg-d[data-lock="1"] .hg-dslot { background: repeating-linear-gradient(135deg, var(--hg-panel) 0 5px, transparent 5px 10px); opacity: .55; }
.hg-d[data-f="H"] .hg-dslot { box-shadow: 0 0 0 3px var(--hg-harvest), 0 0 16px var(--hg-harvest); }
.hg-d[data-f="O"] .hg-dslot { box-shadow: 0 0 0 3px var(--hg-omen), 0 0 18px 2px rgba(0, 0, 0, .6); }
.hg-d[data-f="S"] .hg-dslot { box-shadow: 0 0 0 3px var(--hg-gold), 0 0 18px var(--hg-gold); }
.hg-d[data-f="V"] .hg-dslot { box-shadow: 0 0 0 3px var(--hg-sel), 0 0 14px var(--hg-selBg); }
.hg-din { display: flex; align-items: center; justify-content: center; }
.hg-dph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--hg-dim); letter-spacing: .05em; pointer-events: none; }
/* HG-F4: the badge's ink is SOLID (the scheme's solid background colour) — never var(--frameBg), a gradient in Classic */
.hg-db { font-weight: 800; letter-spacing: .06em; border-radius: 999px; text-align: center; white-space: nowrap; border: 1px solid var(--hg-line); color: var(--hg-dim); background: transparent; }
.hg-d[data-f="H"] .hg-db, .hg-d[data-f="O"] .hg-db, .hg-d[data-f="S"] .hg-db { background: var(--hg-txt); color: var(--hg-solid); border-color: var(--hg-txt); }
.hg-res { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* HG-F2: a FIXED, top-aligned stack — label (2 lines), tile + text (3 lines: "Ranks 2–4 leave the valley" in 94 px), sub (2 lines); nothing re-centres */
.hg-rlab { font-size: 10.5px; letter-spacing: .06em; color: var(--hg-dim); font-weight: 700; line-height: 13px; height: 26px; overflow: hidden; }
.hg-rrow { display: flex; align-items: flex-start; gap: 8px; height: 51px; }
.hg-hand { position: relative; flex: none; width: 34px; height: 34px; container-type: size; border-radius: 8px; border: 1.5px dashed var(--hg-line); }
.hg-hand[data-on="1"] { border: 0; background: var(--hg-fbg); box-shadow: 0 0 0 2px var(--hg-sel); }
.hg-rtxtw { flex: 1; min-width: 0; }
.hg-rtxt { min-width: 0; font-size: 14px; font-weight: 800; line-height: 17px; height: 51px; overflow: hidden; }
.hg-rsub { font-size: 12px; color: var(--hg-dim); line-height: 16px; height: 32px; overflow: hidden; }
.hg-rfeed { display: none; }

/* ── the feed (PC 7 lines; HG-F7: only the lines that FIT are shown) ── */
.hg-feed { position: relative; flex: 1 1 0; min-height: 84px; padding: 11px 14px; border-radius: var(--hg-rL); display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.hg-feedh { font-size: 10.5px; letter-spacing: .08em; color: var(--hg-dim); font-weight: 700; }
.hg-fl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 16px; height: 16px; flex: none; }
.hg-fl[data-fit="0"] { display: none; }
.hg-fl span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--hg-dim); }
.hg-fl:first-of-type span { color: var(--hg-txt); font-weight: 700; }
.hg-fg { position: relative; width: 13px; height: 13px; flex: none; }
.hg-fg .hg-avb, .hg-fg .hg-avbi { inset: 0; }
.hg-fg .hg-avbi { --t: 1.5px; }

/* ── the tray: rank chips + counts, the secret, Castle · Roll · Secret ── */
.hg-tray { flex: none; padding: 11px 12px 12px; background: var(--hg-seat); border: var(--hg-panelBd); border-radius: var(--hg-rL); display: flex; flex-direction: column; gap: 7px; }
.hg-trayh { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .08em; color: var(--hg-dim); font-weight: 700; }
.hg-chips { display: flex; gap: 6px; }
.hg-chip { position: relative; flex: 1; min-width: 0; border-radius: var(--hg-rM); container-type: size; background: var(--hg-panel); border: 1px solid var(--hg-line); cursor: default; transition: filter .12s, transform .12s, box-shadow .12s; }
.hg-chip[data-st="ready"] { background: var(--hg-seat); border: 1.5px solid var(--hg-sel); cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.hg-chip[data-st="selected"] { background: var(--hg-selBg); border: 1.5px solid var(--hg-sel); cursor: pointer; transform: translateY(-3px); box-shadow: 0 0 0 3px var(--hg-sel), 0 8px 18px -4px var(--hg-sel); }
.hg-chip[data-st="ready"]:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4); }
.hg-chip[data-st="none"], .hg-chip[data-st="locked"] { background: repeating-linear-gradient(135deg, var(--hg-panel) 0 5px, transparent 5px 10px); border: 1.5px dashed var(--hg-line); opacity: .6; }
@media (hover: hover) { .hg-chip[data-st="ready"]:hover { filter: brightness(1.15); box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 16px var(--hg-selBg); } }
.hg-chg { position: absolute; left: 8%; width: 42%; top: 18%; bottom: 16%; background: var(--c); clip-path: var(--hg-cren); }
.hg-chip[data-n="0"] .hg-chg { opacity: .4; }
.hg-chr { position: absolute; left: 8%; width: 42%; top: 30%; bottom: 16%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 40cqh; color: var(--ci); }
.hg-chn { position: absolute; right: 6%; top: 0; bottom: 0; display: flex; align-items: center; font-weight: 800; font-size: 30cqh; font-variant-numeric: tabular-nums; }
.hg-chip[data-n="0"] .hg-chn { text-decoration: line-through; opacity: .7; }
.hg-lk { position: absolute; right: 4%; top: 2%; font-size: 22cqh; display: none; }
.hg-chip[data-st="none"] .hg-lk, .hg-chip[data-st="locked"] .hg-lk, .hg-secret[data-st="locked"] .hg-lk { display: block; }
.hg-gap6 { flex: none; width: 6px; }
.hg-secret { position: relative; flex: none; border-radius: var(--hg-rM); container-type: size; background: var(--hg-seat); border: 1.5px solid var(--hg-harvestEdge); cursor: pointer; transition: filter .12s, transform .12s, box-shadow .12s; }
.hg-secret[data-st="locked"] { border-color: var(--hg-line); opacity: .55; cursor: default; }
.hg-secret[data-st="selected"] { box-shadow: 0 0 0 3px var(--hg-sel), 0 8px 18px -4px var(--hg-sel); transform: translateY(-3px); }
.hg-secret[data-st="used"] { border: 1.5px dashed var(--hg-line); background: transparent; cursor: default; }
.hg-secret[data-st="ready"]:active { transform: translateY(2px); }
@media (hover: hover) { .hg-secret[data-st="ready"]:hover { filter: brightness(1.15); box-shadow: 0 0 16px var(--hg-harvest); } }
.hg-secu { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 22cqh; font-weight: 800; color: var(--hg-dim); letter-spacing: .05em; }
.hg-secu::after { content: ''; position: absolute; left: 14%; right: 14%; top: 50%; height: 2px; background: var(--hg-dim); transform: rotate(-30deg); }
.hg-secret[data-st="used"] .hg-secu { display: flex; }
.hg-secret[data-st="used"] .hg-art { display: none; }
.hg-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 6px 56px; gap: 6px; font-size: 10px; color: var(--hg-dim); font-weight: 600; letter-spacing: .02em; margin-top: -2px; height: 15px; line-height: 13px; }
.hg-caps span { text-align: center; white-space: nowrap; overflow: hidden; }
.hg-gone { grid-column: span 3; border-top: 1.5px solid var(--hg-line); padding-top: 2px; }
.hg-gone[data-on="1"] { border-color: var(--hg-sel); color: var(--hg-sel); font-weight: 800; }
.hg-ret { padding-top: 3px; }
.hg-secc { grid-column: 6; padding-top: 3px; }
.hg-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.hg-act { display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--hg-rM); font-weight: 800; white-space: nowrap; background: var(--hg-btn); color: var(--hg-btnTxt); border: 1px solid var(--hg-line); cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .4); transition: filter .12s, transform .12s, box-shadow .12s; }
.hg-act i { width: 18px; text-align: center; }
.hg-act[data-st="active"] { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .4), inset 0 2px 8px rgba(0, 0, 0, .35), 0 0 0 3px var(--hg-sel); }
.hg-act[data-st="ready"]:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .4), inset 0 2px 8px rgba(0, 0, 0, .35), 0 0 0 3px var(--hg-sel); }
.hg-act[data-st="off"] { background: repeating-linear-gradient(135deg, var(--hg-panel) 0 6px, transparent 6px 12px); color: var(--hg-dim); border: 1.5px dashed var(--hg-line); box-shadow: none; cursor: not-allowed; }
@media (hover: hover) { .hg-act[data-st="ready"]:hover, .hg-act[data-st="active"]:hover { filter: brightness(1.14); } }

/* ── the epoch banner + the flying gold chip: ABSOLUTE layers of the root (never fixed) ── */
.hg-banner { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); border-radius: 999px; background: var(--hg-gold); color: var(--hg-goldInk); font-weight: 900; letter-spacing: .04em; box-shadow: 0 0 0 3px var(--hg-ink), 0 18px 40px rgba(0, 0, 0, .55); white-space: nowrap; z-index: 40; pointer-events: none; display: none; }
.hg-banner[data-on="1"] { display: block; animation: hg-ban 1.6s ease-out 1 both; }
.hg-fly { position: absolute; left: 0; top: 0; z-index: 50; pointer-events: none; display: none; font-weight: 900; border-radius: 999px; background: var(--hg-gold); color: var(--hg-goldInk); box-shadow: 0 0 0 2px var(--hg-ink); white-space: nowrap; transform: translate(-50%, -50%); }
.hg-fly[data-on="1"] { display: block; }
.hg-fly[data-neg="1"] { background: var(--hg-omen); color: #fff; }
/* the phone's drag ghost — the ONE screen-level element (the phone is unscaled) */
.hg-dragghost { position: fixed; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; z-index: 9000; pointer-events: none; display: none; container-type: size; border-radius: 10px; background: var(--hg-fbg, #bdd38c); box-shadow: 0 0 0 2px var(--hg-sel), 0 10px 24px rgba(0, 0, 0, .5); font-family: var(--hg-font); }
.hg-dragghost[data-on="1"] { display: block; }

@media (prefers-reduced-motion: reduce) {
  .hg-root .hg-art, .hg-root .hg-fx, .hg-root .hg-plot, .hg-root .hg-chipb, .hg-root .hg-pill, .hg-bags, .hg-bagm { animation: none !important; }
}

/* ══ DESKTOP: ONE box, scaled by BoardFit ══ */
@media (min-width: 1000px) {
  #highground-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .hg-root { width: 1280px; height: var(--hg-fit-h, 553px); padding: 14px; display: grid; grid-template-columns: 272px minmax(0, 1fr) 316px; gap: 14px; }
  .hg-left { gap: 8px; }
  .hg-pl { height: 94px; padding: 11px 12px; }
  .hg-plr1 { gap: 10px; }
  .hg-av { width: 38px; height: 38px; font-size: 13px; }
  .hg-avb, .hg-avbi { right: -5px; bottom: -5px; width: 20px; height: 20px; }
  .hg-plnm b { font-size: 15px; }
  .hg-plnm em { font-size: 11.5px; }
  .hg-plg { width: 92px; }
  .hg-plg b { font-size: 21px; }
  .hg-plg em { font-size: 11px; }
  .hg-plr2 { gap: 6px; }
  .hg-rp { gap: 3px; width: 46px; height: 24px; padding: 0 4px; border-radius: 7px; }
  .hg-rpg { width: 18px; height: 17px; font-size: 11px; line-height: 14px; }
  .hg-rpn { font-size: 12px; }
  .hg-psec { margin-left: auto; width: 24px; height: 28px; font-size: 13px; }
  .hg-tag { right: 10px; top: -9px; font-size: 10.5px; padding: 2px 8px; }
  .hg-stat { left: 10px; top: -9px; font-size: 10.5px; padding: 1px 8px; max-width: calc(100% - 96px); }
  .hg-reclaim { font-size: 14px; }
  .hg-mid { gap: 10px; }
  .hg-hdr { height: 34px; }
  .hg-ep { font-size: 14px; padding: 6px 0; width: 132px; }
  .hg-plots { font-size: 15px; width: 118px; }
  .hg-segs { gap: 2px; max-width: 330px; }
  .hg-seg { height: 8px; }
  .hg-turnt { font-size: 14px; width: 150px; }
  .hg-valley { gap: 5px; padding: 8px; }
  .hg-right { gap: 10px; }
  .hg-dice { height: 150px; gap: 12px; padding: 14px; }
  .hg-d { gap: 7px; }
  .hg-dslot { width: 64px; height: 64px; }
  .hg-dph { font-size: 11px; }
  .hg-db { font-size: 10.5px; padding: 2px 8px; width: 64px; }
  .hg-chip { height: 60px; }
  .hg-secret { width: 56px; height: 60px; }
  .hg-act { height: 46px; font-size: 14.5px; }
  .hg-banner { padding: 14px 28px; font-size: 22px; }
  .hg-fly { font-size: 15px; padding: 3px 10px; }
}

/* ══ PHONE (unscaled, 384 × 812 → 360 × 740): one column, the VALLEY the flexible row ══ */
@media (max-width: 999px) {
  #highground-game-screen.hg-playing .wrap { padding: 0 2px; max-width: none; }
  #highground-game-screen.hg-playing .topbar { display: none; }
  #highground-game-screen.hg-playing.hg-topbar-open .topbar { display: flex; }
  /* NOTCH SWEEP (predicely_notch_safe_area): the topbar carried the inset; hiding it, we carry it — PADDING, never margin */
  #highground-game-screen.hg-playing:not(.hg-topbar-open) > .wrap { padding-top: env(safe-area-inset-top, 0px); }
  /* ⛔ 6px at the BOTTOM (2 + 6 = the old 4 + 4: the valley keeps every px): a selected action button drops 3px and wears a 3px ring, 6px past its box, and the
     root clips (overflow: hidden) — at 4px the owner's Cancel ring was cut flat along its underside (iPhone, .644) */
  .hg-root { width: 100%; height: var(--hg-phone-h, 694px); padding: 2px 10px 6px; display: flex; flex-direction: column; gap: 6px;
    /* ⛔ HG-F1 — the floors */
    --hg-pillMin: 11px; --hg-sumMin: 10px; --hg-coMin: 8px; }
  .hg-pc-only { display: none !important; }
  .hg-ph-only { display: flex !important; }
  .hg-left, .hg-mid, .hg-right { display: contents; }
  .hg-hdr { order: 1; height: 22px; gap: 8px; }
  .hg-hdr2 { order: 1; display: flex; height: 4px; flex: none; margin-top: -3px; }
  .hg-hdr2 .hg-segs { gap: 1px; }
  .hg-hdr2 .hg-seg { height: 4px; }
  .hg-ep { font-size: 12px; padding: 0; border: 0; background: none; letter-spacing: .05em; width: 66px; text-align: left; }
  .hg-plots { font-size: 12.5px; width: 92px; }
  .hg-turnt { display: none; }
  .hg-menu { display: flex; flex: none; width: 26px; height: 22px; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--hg-line); background: var(--hg-panel); font-size: 13px; cursor: pointer; }
  .hg-pls { order: 2; flex: none; display: grid; grid-template-columns: repeat(var(--hg-pn, 2), minmax(0, 1fr)); gap: 6px; padding-top: 4px; }
  .hg-root[data-n="3"] .hg-pls { --hg-pn: 3; }
  .hg-pl { height: 50px; padding: 5px 6px; border-radius: 11px; }
  .hg-plr1 { gap: 5px; }
  .hg-av { width: 22px; height: 22px; font-size: 8px; border-width: 1px; }
  .hg-avb, .hg-avbi { right: -4px; bottom: -4px; width: 14px; height: 14px; }
  .hg-avbi { --t: 2px; }
  .hg-plnm b { font-size: 12px; }
  .hg-plg { width: 40px; }
  .hg-plg b { font-size: 13px; line-height: 1; }
  .hg-plg em { font-size: 9px; line-height: 1.1; }
  .hg-plr2 { gap: 2px; }
  /* the four pills share the row EQUALLY (flex-basis 0): their boxes never depend on the counts (locked layout) */
  .hg-rp { flex: 1 1 0; min-width: 0; justify-content: center; overflow: hidden; gap: 1px; height: 17px; padding: 0 1px; border-radius: 5px; border: 0; }
  .hg-rpg { width: 12px; height: 12px; font-size: 8px; line-height: 10px; }
  .hg-rpn { font-size: 9px; }
  .hg-psec { margin-left: 2px; width: 14px; height: 17px; font-size: 9px; border-width: 1px; }
  .hg-tag { right: 4px; top: -7px; font-size: 8px; padding: 0 5px; line-height: 13px; }
  .hg-stat { left: 4px; top: -7px; font-size: 8px; padding: 0 5px; line-height: 11px; max-width: calc(100% - 50px); }
  .hg-reclaim { font-size: 12.5px; }
  .hg-vbox { order: 3; }
  .hg-valley { gap: 3px; padding: 5px; border-radius: 12px; }
  .hg-plot { border-radius: 7px; }
  .hg-spn { display: none; }
  .hg-spe { top: 14%; font-size: 50cqh; }
  .hg-dice { order: 4; height: 52px; gap: 8px; padding: 0 8px; border-radius: 12px; }
  .hg-d { gap: 0; }
  .hg-dslot { width: 40px; height: 40px; }
  .hg-dph { font-size: 8px; }
  .hg-db { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); width: 44px; overflow: hidden; font-size: 7.5px; padding: 0; line-height: 12px; border: 0; background: var(--hg-solid); }
  .hg-res { justify-content: center; gap: 2px; flex-direction: row; align-items: center; }
  .hg-rlab, .hg-rsub { display: none; }
  .hg-rrow { flex: 1; min-width: 0; height: 40px; align-items: center; }
  .hg-rtxtw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .hg-rtxt { height: 16px; font-size: 13px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; }
  .hg-rfeed { display: block; height: 13px; font-size: 10.5px; color: var(--hg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 13px; }
  .hg-feed, .hg-bag { display: none !important; }
  .hg-tray { order: 5; padding: 0; background: none; border: 0; gap: 4px; }
  .hg-chips { gap: 5px; }
  .hg-chip { height: 46px; }
  .hg-secret { width: 50px; height: 46px; }
  .hg-gap6 { width: 0; margin-left: -5px; }
  .hg-caps { grid-template-columns: repeat(4, minmax(0, 1fr)) 0px 50px; gap: 5px; font-size: 9.5px; height: 12px; line-height: 12px; margin-top: 0; }
  .hg-gone { padding-top: 0; border-top-width: 1px; }
  .hg-ret, .hg-secc { padding-top: 0; }
  .hg-acts { gap: 6px; }
  .hg-act { height: 44px; font-size: 13.5px; }
  .hg-banner { padding: 10px 20px; font-size: 16px; }
  .hg-fly { font-size: 12px; padding: 2px 7px; }
}