/* frontend/skyline.css — SKYLINE (id `skyline`, prefix `skl`) board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Gulls / Swarm / High Ground precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * The SHELL and every panel read the player's board scheme (GameTheme's --pgr-* tokens — Design's theme table is the same
 * set, Skyline.dc.html L460–473), Arcade through `gm-arcade` on the screen (2 px accent panel borders, rounder corners).
 * PLAYER colours are NOT here: skyline.js writes --skl-p0…3 (+ --skl-pNink, the ink chosen by lightness) from
 * frontend/player-colours.js, the ONE source a later Settings colourblind mode feeds. ⭐ Ownership keeps Design's SHAPES
 * (● ■ ▲ ◆) printed in INK on the owner's tile (SK-F2): in greyscale two of the four default colours sit close, and on
 * this board the shape is the only ownership cue that survives. Every lit state carries an ICON (+ ⇧ ↑ ✕ "N+").
 *
 * ── Geometry is the mock's (the FEEL SPEC in docs/design/batch15-skyline-mock-review.md) ─────────
 * DESKTOP: ONE design box 1160 × 553, scaled as a unit by BoardFit (×1.072 when the chat collapses to its pill). Columns
 * 272 / 528 / 312, gap 12, pad 12. Left: round card 140 + rival cards 119 ×3 (3p: the third slot stays, empty). Middle:
 * the city, 2 × 2 blocks of 258, gap 12, block pad 8, header 20 + 6, lot gap 6 (lots ≈ 76 × 69). Right: feed 150
 * (3 rows × 34) + the hand card (header 32 · dice row 72 · pieces 72 · preview 38 · Build 44).
 * PHONE (384 × 812, survives 360 × 740): one column, unscaled — top 30 · seats 60 · the CITY (the flexible band, a square)
 * · feed 38 (+ SK-F3's spare rows) · hand 106 (56 dice + maps + pieces, 44 preview + Build). The three PC columns are
 * `display: contents` there.
 * ⛔ SK-F1 / SK-F2 phone floors: a 3×3 lot map beside each die (7 px cells), owner badge 14 px, every live number / tag
 * / chip ≥ 11 px; skyline-board.test.html MEASURES them at 360 × 740 (lot ≥ 44, badge ≥ 14, piece buttons ≥ 40 wide).
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every slot is a FIXED size except the phone's city. Feedback changes colour, glow or a ≤ 3 px translate — never size or
 * spacing. Controls disable (⊘ + greyscale / hatch), never hide. The toast, the tower card, the scoring panel and the
 * flying chips are SCREEN-LEVEL siblings in `.skl-layer` (never inside the BoardFit target, never position:fixed).
 */

#skyline-game-screen, .skl-root, .skl-layer {
  --skl-bg: var(--pgr-bg, radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%));
  --skl-solid: var(--pgr-solid, #141519);
  --skl-seat: var(--pgr-seat, rgba(255, 255, 255, .03)); --skl-panel: var(--pgr-panel, rgba(255, 255, 255, .04));
  --skl-line: var(--pgr-line, rgba(255, 255, 255, .09));
  --skl-txt: var(--pgr-txt, #e9e8e4); --skl-dim: var(--pgr-dim, #9a9ca2);
  --skl-sel: var(--pgr-sel, oklch(.74 .14 152)); --skl-selBg: var(--pgr-selBg, oklch(.34 .07 152));
  --skl-selInk: var(--pgr-solid, #111111);
  --skl-btn: var(--pgr-btn, linear-gradient(180deg, #34373e, #26282e)); --skl-btnTxt: var(--pgr-btnTxt, #f1f0ec);
  --skl-font: var(--pgr-font, 'Outfit', system-ui, sans-serif);
  --skl-panelBd: 1px solid var(--skl-line);
  --skl-rS: 8px; --skl-rM: 10px; --skl-rL: 14px; --skl-rB: 12px;
  --skl-lot: color-mix(in oklch, var(--skl-txt) 5%, transparent); --skl-lotBd: color-mix(in oklch, var(--skl-txt) 9%, transparent);
  /* the lit windows on a tower tile (Design's WIN) */
  --skl-win: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0, 0, 0, .09) 7px 9px), repeating-linear-gradient(0deg, transparent 0 7px, rgba(0, 0, 0, .09) 7px 9px);
  /* player colours — overwritten per seat by skyline.js from PlayerColours (these are only the pre-paint fallback) */
  --skl-p0: #4fe07c; --skl-p1: #ff5c5c; --skl-p2: #ffd83d; --skl-p3: #6f5fe8;
  --skl-p0ink: #0b0c0f; --skl-p1ink: #0b0c0f; --skl-p2ink: #0b0c0f; --skl-p3ink: #ffffff;
  --skl-pme: #4fe07c; --skl-pmeink: #0b0c0f;   /* MY colour by name — skyline.js sets it from sklMe() (seat 0 is not me online) */
}
#skyline-game-screen.gm-arcade, .gm-arcade .skl-root, .gm-arcade ~ .skl-layer, #skyline-game-screen.gm-arcade .skl-layer {
  --skl-panelBd: 2px solid color-mix(in oklch, var(--skl-sel) 60%, transparent);
  --skl-rS: 10px; --skl-rM: 14px; --skl-rL: 10px; --skl-rB: 14px;
}

/* ── keyframes. ⛔ pops animate the `scale` / `translate` PROPERTIES, never `transform` (predicely_scale_keyframe_trap) ── */
@keyframes skl-drop { 0% { translate: 0 -26px; opacity: .25; } 100% { translate: 0 0; opacity: 1; } }
@keyframes skl-land { 0% { scale: 1.05 .93; } 55% { scale: .98 1.02; translate: 0 -2px; } 100% { scale: 1; translate: 0 0; } }
@keyframes skl-thud { 0%, 100% { translate: 0 0; } 40% { translate: 0 3px; } }
@keyframes skl-flip { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0deg); } }
@keyframes skl-dust { 0% { opacity: .9; scale: .7; } 100% { opacity: 0; scale: 1.35; } }
@keyframes skl-settle { 0% { box-shadow: 0 0 26px 4px var(--skl-sel); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes skl-crown { 0% { scale: .5; translate: 0 -8px; opacity: 0; } 70% { scale: 1.12; translate: 0 0; opacity: 1; } 100% { scale: 1; } }
@keyframes skl-newring { 0%, 100% { outline-color: var(--skl-sel); } 50% { outline-color: transparent; } }
@keyframes skl-ring { 0%, 100% { box-shadow: 0 0 0 2px var(--skl-sel); } 50% { box-shadow: 0 0 0 3px var(--skl-sel), 0 0 14px 2px var(--skl-sel); } }

/* ── setup card (on the screen's palette) ───────────────────────────────── */
#skyline-game-screen { background: var(--skl-bg); color: var(--skl-txt); }
#skyline-area { position: relative; }
.skl-setup-card { max-width: 560px; margin: 24px auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; font-family: var(--skl-font); background: var(--skl-panel); color: var(--skl-txt); border: var(--skl-panelBd); }
.skl-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--skl-dim); font-weight: 700; }
.skl-setup-title { margin: 0; font-size: 30px; }
.skl-setup-blurb, .skl-setup-hint { margin: 0; line-height: 1.55; font-size: 14px; }
.skl-setup-hint { color: var(--skl-dim); font-size: 12.5px; }
.skl-setup-row { display: flex; align-items: center; gap: 12px; }
.skl-setup-lab { width: 72px; font-weight: 700; font-size: 13px; color: var(--skl-dim); }
.skl-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.skl-opt { min-width: 64px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--skl-line); background: var(--skl-seat); color: var(--skl-txt); font: 700 14px var(--skl-font); cursor: pointer; transition: box-shadow .15s, transform .12s; }
.skl-opt[data-on="1"] { background: var(--skl-sel); color: var(--skl-selInk); border-color: transparent; }
.skl-opt:active { transform: translateY(1px); }
.skl-start { align-self: flex-start; margin-top: 6px; height: 46px; padding: 0 26px; border-radius: 12px; border: 1px solid var(--skl-line); background: var(--skl-btn); color: var(--skl-btnTxt); font: 800 16px var(--skl-font); cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); transition: filter .12s, transform .12s; }
.skl-start:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
@media (hover: hover) { .skl-start:hover { filter: brightness(1.12); } .skl-opt:hover { box-shadow: 0 0 0 2px var(--skl-txt); } }
.skl-endrows { display: flex; flex-direction: column; gap: 6px; }
/* ⭐ owner, 2026-10-03: NO side stripe — the whole card wears the player's colour (a full border + a hint of it in the
   background); the winner's border is solid and its tint a step stronger. The name never wraps ("Bot / 1"). */
.skl-endrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; border-radius: 10px;
  border: 1.5px solid color-mix(in oklch, var(--skl-pc, #888) 55%, transparent); background: color-mix(in oklch, var(--skl-pc, #888) 12%, transparent); }
.skl-endrow[data-win="1"] { border: 2px solid var(--skl-pc, #888); background: color-mix(in oklch, var(--skl-pc, #888) 24%, transparent); font-weight: 800; }
.skl-endnm { flex: none; white-space: nowrap; }
.skl-endst { min-width: 0; text-align: right; }
.skl-endnote { margin-top: 10px; font-size: 12px; opacity: .7; }

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

/* the owner SHAPES — ● You · ■ · ▲ · ◆ (Design's shape(); a diamond by clip-path so a flip transform never fights it) */
.skl-sh { display: inline-block; flex: none; width: var(--skl-shs, 11px); height: var(--skl-shs, 11px); background: var(--skl-shc, currentColor); }
.skl-sh:not([data-sh]), .skl-sh[data-sh=""] { visibility: hidden; }
.skl-sh[data-sh="0"] { --skl-shc: var(--skl-p0); border-radius: 50%; }
.skl-sh[data-sh="1"] { --skl-shc: var(--skl-p1); clip-path: inset(7% round 12%); }
.skl-sh[data-sh="2"] { --skl-shc: var(--skl-p2); clip-path: polygon(50% 4%, 98% 94%, 2% 94%); }
.skl-sh[data-sh="3"] { --skl-shc: var(--skl-p3); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.skl-sh[data-ink="1"] { background: var(--skl-oi, #111); }

/* ── avatar placeholders ── */
.skl-av { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--skl-seat); border: 1px dashed var(--skl-line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--skl-dim); }
.skl-avs { width: 30px; height: 30px; font-size: 10px; }
.skl-avb { position: absolute; right: -3px; bottom: -3px; --skl-shs: 16px; outline: 2px solid var(--skl-solid); }
.skl-avs .skl-avb { --skl-shs: 13px; }
.skl-avb[data-sh="1"], .skl-avb[data-sh="2"], .skl-avb[data-sh="3"] { outline: none; filter: drop-shadow(0 0 1.5px var(--skl-solid)); }

/* ── the round card (PC) ── */
.skl-round { flex: none; padding: 10px 13px 11px; display: flex; flex-direction: column; gap: 5px; }
.skl-rh { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 24px; }
.skl-rh > span:first-child { font-size: 20px; font-weight: 700; white-space: nowrap; }
.skl-rshort { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.skl-startp { height: 20px; line-height: 20px; align-self: flex-start; font-size: 12px; white-space: nowrap; font-weight: 500; padding: 0 7px; border-radius: 8px; background: var(--skl-seat); }
.skl-startp[data-me="1"] { background: var(--skl-sel); color: var(--skl-selInk); font-weight: 700; }
.skl-startp[data-me="2"] { font-weight: 700; }
.skl-order { display: grid; grid-template-columns: repeat(var(--skl-n, 4), minmax(0, 1fr)); gap: 6px; margin-top: auto; }
.skl-ord { position: relative; height: 40px; padding: 5px 4px; border-radius: 8px; background: var(--skl-seat); border: 1px solid var(--skl-line); display: flex; flex-direction: column; justify-content: space-between; min-width: 0; transition: box-shadow .2s; }
.skl-ord[data-gone="1"] { display: none; }
.skl-ord[data-cur="1"] { box-shadow: inset 0 0 0 2px var(--skl-sel), 0 0 12px -3px var(--skl-sel); }
.skl-ordn { display: flex; align-items: center; gap: 3px; min-width: 0; --skl-shs: 8px; }
.skl-ordn b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skl-ordp { display: flex; gap: 3px; }
.skl-ordp i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--skl-dim); }
.skl-ordp i[data-st="gone"] { display: none; }
.skl-ordp i[data-st="done"] { border-color: rgba(0, 0, 0, .4); }
.skl-ordp i[data-st="done"][data-p="0"] { background: var(--skl-p0); } .skl-ordp i[data-st="done"][data-p="1"] { background: var(--skl-p1); }
.skl-ordp i[data-st="done"][data-p="2"] { background: var(--skl-p2); } .skl-ordp i[data-st="done"][data-p="3"] { background: var(--skl-p3); }
.skl-ordp i[data-st="now"] { border: 2px solid var(--skl-sel); }
.skl-ordt { position: absolute; top: -7px; right: 4px; font-size: 9px; font-weight: 800; letter-spacing: .08em; padding: 0 4px; border-radius: 4px; line-height: 13px; opacity: 0; }
.skl-ordt[data-on="1"] { opacity: 1; }
.skl-ordt[data-k="first"] { background: var(--skl-txt); color: var(--skl-solid); }
/* ⛔ OPAQUE (owner playtest .666): --skl-seat is 3 % white, so on the CURRENT seat the gold ring + glow showed through "LAST" */
.skl-ordt[data-k="last"] { background: var(--skl-solid); color: var(--skl-txt); border: 1px solid var(--skl-line); }

/* ── rival cards (PC) ── */
.skl-riv { position: relative; flex: none; height: 119px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; transition: box-shadow .2s; }
.skl-riv[data-empty="1"] { visibility: hidden; }
.skl-riv[data-cur="1"] { box-shadow: inset 0 0 0 3px var(--skl-sel), 0 0 22px -4px var(--skl-sel); }
.skl-rr1 { display: flex; align-items: center; gap: 10px; }
.skl-rnm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.skl-rnm b { font-size: 15px; font-weight: 700; white-space: nowrap; }
.skl-rnm em { font-size: 12px; color: var(--skl-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skl-rpts { width: 56px; flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.skl-rpts b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.skl-rpts em { font-size: 11px; color: var(--skl-dim); }
.skl-rr2 { display: flex; align-items: center; gap: 6px; height: 34px; }
.skl-rdice { display: flex; gap: 6px; }
.skl-rdw { display: flex; align-items: center; gap: 3px; padding: 2px; border-radius: 7px; transition: box-shadow .15s; }
.skl-rdw[data-aim="1"] { box-shadow: 0 0 0 2px var(--skl-sel), 0 0 14px 2px var(--skl-sel); }
.skl-rdw[data-new="1"] { outline: 2px dashed var(--skl-sel); outline-offset: 1px; }
.skl-rdin { width: 24px; height: 24px; display: flex; }
.skl-rdw .skl-map { --skl-mc: 5px; gap: 1px; }
.skl-rleft { font-size: 11px; color: var(--skl-dim); }
.skl-rpc { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; width: 18px; height: 34px; }
.skl-rpc i { width: 12px; border-radius: 2px; background: var(--skl-rc); border: 1px solid rgba(0, 0, 0, .35); }
.skl-riv[data-p="0"] { --skl-rc: var(--skl-p0); } .skl-riv[data-p="1"] { --skl-rc: var(--skl-p1); } .skl-riv[data-p="2"] { --skl-rc: var(--skl-p2); } .skl-riv[data-p="3"] { --skl-rc: var(--skl-p3); }
.skl-rpc b { font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.skl-rpc[data-n="0"] i { background: transparent; border: 1px dashed var(--skl-dim); }
.skl-rpc[data-n="0"] b { color: var(--skl-dim); }
.skl-rst { height: 15px; margin-top: auto; font-size: 12px; color: var(--skl-dim); white-space: nowrap; }
.skl-rst[data-on="1"] { color: var(--skl-txt); font-weight: 700; }
.skl-tag1 { position: absolute; top: -8px; left: 12px; background: var(--skl-txt); color: var(--skl-solid); font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 1px 6px; border-radius: 6px; opacity: 0; }
.skl-tag1[data-on="1"] { opacity: 1; }

/* the 3×3 lot map beside a die (SK-F1) */
.skl-map { display: grid; grid-template-columns: repeat(3, var(--skl-mc, 9px)); grid-template-rows: repeat(3, var(--skl-mc, 9px)); gap: 2px; flex: none; }
.skl-map i { border-radius: 2px; background: var(--skl-seat); border: 1px solid var(--skl-line); }
.skl-map i[data-on="1"] { background: var(--skl-sel); border-color: transparent; }
.skl-map i[data-on="2"] { background: var(--skl-dim); border-color: transparent; }

/* ── the city ── */
.skl-citybox { display: flex; align-items: flex-start; justify-content: center; min-height: 0; }
.skl-city { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.skl-blk { min-width: 0; min-height: 0; display: flex; flex-direction: column; box-shadow: none; }
.skl-bh { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.skl-bl { display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--skl-seat); border: 1px solid var(--skl-line); font-weight: 800; flex: none; }
/* the live majority slot — FIXED width (locked layout); the crown / TIE pill lands in this same slot at scoring */
.skl-maj { display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; color: var(--skl-dim); font-weight: 700; flex: none; transition: background .15s; }
.skl-maj .skl-sh[data-on="0"] { display: none; }
.skl-maj[data-mode="lead"] { color: var(--skl-txt); }
.skl-maj[data-mode="crown"] { background: var(--skl-sel); color: var(--skl-selInk); box-shadow: 0 0 14px -2px var(--skl-sel); }
.skl-maj[data-mode="crown"] .skl-sh { background: var(--skl-selInk); }
.skl-maj[data-mode="tie"] { border: 1.5px dashed var(--skl-txt); color: var(--skl-txt); }
.skl-maj[data-pop="1"] { animation: skl-crown 180ms cubic-bezier(.3, 1.4, .5, 1) both; }
.skl-lots { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }

/* a LOT / a TOWER tile */
.skl-lot { position: relative; min-width: 0; min-height: 0; border-radius: var(--skl-rS); background: var(--skl-lot); border: 1px solid var(--skl-lotBd); cursor: pointer;
  outline: 0 solid transparent; transition: box-shadow .15s, filter .15s, translate .15s, opacity .15s; }
.skl-lot[data-o="0"] { --skl-oc: var(--skl-p0); --skl-oi: var(--skl-p0ink); } .skl-lot[data-o="1"] { --skl-oc: var(--skl-p1); --skl-oi: var(--skl-p1ink); }
.skl-lot[data-o="2"] { --skl-oc: var(--skl-p2); --skl-oi: var(--skl-p2ink); } .skl-lot[data-o="3"] { --skl-oc: var(--skl-p3); --skl-oi: var(--skl-p3ink); }
.skl-lot[data-st="tower"] { background-color: var(--skl-oc); background-image: var(--skl-win); border: 1px solid rgba(0, 0, 0, .35); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.skl-badge { position: absolute; top: var(--skl-pad); left: var(--skl-pad); --skl-shs: var(--skl-bdg); }
.skl-lot[data-st="empty"] .skl-badge, .skl-lot[data-st="empty"] .skl-num, .skl-lot[data-st="empty"] .skl-strip { display: none; }
.skl-num { position: absolute; left: 0; right: calc(var(--skl-strip) + var(--skl-pad)); top: calc(var(--skl-bdg) * .4); bottom: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--skl-numf); font-weight: 800; color: var(--skl-oi); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.skl-strip { position: absolute; right: calc(var(--skl-pad) - 1px); top: var(--skl-stripTop); bottom: var(--skl-pad); width: var(--skl-strip); display: flex; flex-direction: column-reverse; gap: 1px; background: rgba(0, 0, 0, .55); padding: 1px; border-radius: 2px; }
.skl-strip i { min-height: 0; border-radius: 1px; }
.skl-mark { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: var(--skl-markf); font-weight: 300; color: var(--skl-sel); line-height: 1; pointer-events: none; }
.skl-chip { position: absolute; top: calc(var(--skl-pad) - 2px); right: calc(var(--skl-pad) - 2px); min-width: calc(var(--skl-chipf) + 6px); height: calc(var(--skl-chipf) + 5px); padding: 0 3px; border-radius: 4px;
  font-size: var(--skl-chipf); font-weight: 800; line-height: calc(var(--skl-chipf) + 5px); text-align: center; box-shadow: 0 1px 0 rgba(0, 0, 0, .35); display: none; pointer-events: none; }
.skl-chip[data-on="1"] { display: block; }
.skl-chip[data-k="take"], .skl-chip[data-k="need"] { background: var(--skl-sel); color: var(--skl-selInk); }
.skl-chip[data-k="raise"] { background: #ffffff; color: #111111; }
.skl-chip[data-k="illegal"] { background: #111111; color: #ffffff; }
.skl-chip[data-k="ghost"] { background: var(--skl-gc); color: var(--skl-gi); border: 1px dashed var(--skl-gi); }
.skl-star { position: absolute; left: var(--skl-pad); bottom: calc(var(--skl-pad) - 1px); font-size: var(--skl-starf); color: var(--skl-oi); line-height: 1; display: none; pointer-events: none; }
.skl-star[data-on="1"] { display: block; }
.skl-fxt { position: absolute; left: 50%; bottom: calc(var(--skl-fxf) * -.7); translate: -50% 0; background: #111111; color: #ffffff; font-size: var(--skl-fxf); font-weight: 800; padding: 1px 5px; border-radius: 4px;
  white-space: nowrap; letter-spacing: .04em; line-height: 1.35; box-shadow: 0 0 0 1px var(--skl-sel); z-index: 2; display: none; pointer-events: none; }
.skl-fxt[data-on="1"] { display: block; }
.skl-fxt[data-k="tie"] { background: var(--skl-solid); color: var(--skl-txt); box-shadow: 0 0 0 1px var(--skl-txt); }
.skl-dust { position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--skl-txt); opacity: 0; pointer-events: none; }
/* lit states (a die picked) — every one an outline + an icon, never a recolour alone */
.skl-lot[data-dim="1"] { opacity: .34; }
.skl-lot[data-lit="new"] { outline: 2px dashed var(--skl-sel); outline-offset: -5px; }
.skl-lot[data-lit="new"] .skl-mark { display: flex; }
.skl-lot[data-lit="take"] { outline: 3px solid var(--skl-sel); outline-offset: 2px; box-shadow: 0 0 16px 1px var(--skl-sel); }
.skl-lot[data-lit="need"], .skl-lot[data-lit="raise"] { outline: 2px solid var(--skl-sel); outline-offset: 2px; }
.skl-lot[data-lit="illegal"] { outline: 2px dashed var(--skl-dim); outline-offset: 2px; filter: saturate(.45); cursor: help; }
.skl-lot[data-tgt="1"] { outline: 3px solid var(--skl-txt); outline-offset: 2px; box-shadow: 0 0 22px 3px var(--skl-sel); translate: 0 -2px; opacity: 1; }
.skl-lot[data-tgt="1"] .skl-mark { display: none; }
.skl-lot[data-tap="1"] { outline: 3px solid var(--skl-txt); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(0, 0, 0, .35); }
.skl-lot[data-spot="spot"] { outline: 3px solid var(--skl-sel); outline-offset: 2px; box-shadow: 0 0 30px 8px var(--skl-sel); }
.skl-lot[data-spot="tie"] { outline: 2px dashed var(--skl-txt); outline-offset: 2px; }
@media (hover: hover) { .skl-lot[data-st="tower"]:hover, .skl-lot[data-lit]:not([data-lit=""]):not([data-lit="illegal"]):hover { translate: 0 -2px; filter: brightness(1.15); } }
.skl-lot:active { translate: 0 1px; filter: brightness(.88); }
/* the landing (FEEL SPEC): drop 220 ease-in + land; TAKEOVER: + thud 220–300, badge flip 300–560, glow settle to 1600 */
.skl-lot[data-anim="drop"] { animation: skl-drop 220ms ease-in both, skl-land 180ms ease-out 220ms both; }
.skl-lot[data-anim="take"] { animation: skl-drop 220ms ease-in both, skl-thud 80ms linear 220ms both, skl-settle 1040ms ease-out 560ms both; }
.skl-lot[data-anim="take"] .skl-badge { animation: skl-flip 260ms ease-in-out 300ms both; }
.skl-lot[data-anim="take"] .skl-dust { animation: skl-dust 340ms ease-out 220ms both; }

/* ── the feed ── */
.skl-feed { flex: none; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.skl-feedh { font-size: 11px; letter-spacing: .12em; color: var(--skl-dim); font-weight: 700; height: 13px; line-height: 13px; flex: none; }
.skl-fl { display: flex; min-width: 0; color: var(--skl-dim); font-weight: 500; flex: none; }
.skl-fl[data-fit="0"] { display: none; }
.skl-fl[data-hot="1"] { color: var(--skl-txt); font-weight: 700; }
.skl-fl[data-vs="1"] { color: var(--skl-txt); }
.skl-fl .skl-sh { margin-top: 4px; }
.skl-fic { width: 12px; flex: none; text-align: center; font-weight: 800; color: var(--skl-dim); }
.skl-fl[data-k="take"] .skl-fic { color: var(--skl-sel); }
.skl-fl > span { flex: 1; min-width: 0; }

/* ── the hand ── */
.skl-hand { position: relative; min-height: 0; transition: box-shadow .2s; }
.skl-hand[data-my="1"] { box-shadow: inset 0 0 0 3px var(--skl-sel), 0 0 26px -8px var(--skl-sel); }
.skl-hh { display: flex; align-items: center; gap: 9px; }
.skl-hname { font-size: 15px; font-weight: 700; }
.skl-htag { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 2px 7px; border-radius: 7px; white-space: nowrap; background: var(--skl-seat); color: var(--skl-dim); border: 1px dashed var(--skl-line); }
.skl-htag[data-my="1"] { background: var(--skl-sel); color: var(--skl-selInk); border-color: transparent; }
.skl-hpts { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.skl-hptsl { font-size: 11px; color: var(--skl-dim); }
.skl-lab { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .1em; color: var(--skl-dim); font-weight: 700; height: 13px; line-height: 13px; }
.skl-lab span + span { letter-spacing: 0; font-weight: 500; }
.skl-dice { display: flex; align-items: center; }
.skl-dw { flex: 1; display: flex; align-items: center; min-width: 0; }
.skl-die { position: relative; flex: none; display: flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; border-radius: 10px;
  outline: 0 solid transparent; outline-offset: 3px; transition: translate .15s, box-shadow .15s, filter .15s; }
.skl-die[data-st="picked"] { outline: 3px solid var(--skl-sel); box-shadow: 0 0 22px 4px var(--skl-sel); translate: 0 -3px; }
.skl-die[data-st="locked"] { cursor: default; }
.skl-die[data-st="locked"] .skl-din { filter: grayscale(1) brightness(.7); opacity: .5; }
.skl-die[data-new="1"] { outline: 2px dashed var(--skl-sel); animation: skl-newring 1.2s steps(2) 1; }
/* 🌐 SKB4: my spent die waits for the server's new face — dimmed further than a locked die */
.skl-die[data-spent="1"] .skl-din { filter: grayscale(1) brightness(.55); opacity: .3; }
/* 🌐 SKB8: a seat that LEFT or is OUT stays on the table (its towers score) but reads as gone */
.skl-riv[data-out="1"], .skl-seat[data-out="1"] { opacity: .55; }
@media (hover: hover) { .skl-die[data-st="idle"]:hover { outline: 2px solid var(--skl-txt); translate: 0 -2px; } }
.skl-die[data-st="idle"]:active, .skl-die[data-st="picked"]:active { translate: 0 2px; outline: 3px solid var(--skl-sel); }
.skl-din { display: flex; }
.skl-dbadge, .skl-pcbadge { position: absolute; display: none; font-size: 10px; font-weight: 800; line-height: 17px; height: 17px; border-radius: 9px; text-align: center; box-shadow: 0 0 0 2px var(--skl-solid); white-space: nowrap; pointer-events: none; z-index: 3; }
.skl-dbadge[data-on="1"], .skl-pcbadge[data-on="1"] { display: block; }
.skl-dbadge { top: -9px; right: -10px; padding: 0 5px; }
.skl-pcbadge { top: -8px; right: -8px; width: 17px; }
.skl-dbadge[data-k="ok"], .skl-dbadge[data-k="new"], .skl-pcbadge[data-k="ok"] { background: var(--skl-sel); color: var(--skl-selInk); }
.skl-dbadge[data-k="lock"], .skl-pcbadge[data-k="lock"] { background: #111111; color: #ffffff; }
.skl-dmeta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.skl-fname { font-size: 11px; line-height: 1.2; color: var(--skl-dim); white-space: nowrap; }
.skl-pcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; }
.skl-pc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; border-radius: var(--skl-rB); background: var(--skl-seat); border: var(--skl-panelBd);
  cursor: pointer; outline: 0 solid transparent; outline-offset: 2px; transition: translate .15s, box-shadow .15s, filter .15s; }
.skl-pcb { display: flex; flex-direction: column; gap: 2px; }
.skl-pcb i { background: var(--skl-pme); border-radius: 2px; border: 1px solid rgba(0, 0, 0, .35); }
.skl-pcl { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.skl-pc[data-st="picked"] { outline: 3px solid var(--skl-sel); box-shadow: 0 0 18px 2px var(--skl-sel); translate: 0 -3px; background: var(--skl-panel); }
@media (hover: hover) { .skl-pc[data-st="idle"]:hover { outline: 2px solid var(--skl-txt); translate: 0 -2px; } }
.skl-pc[data-st="idle"]:active, .skl-pc[data-st="picked"]:active { outline: 3px solid var(--skl-sel); translate: 0 1px; }
.skl-pc[data-st="none"] { opacity: .42; cursor: default; background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(127, 127, 127, .18) 5px 7px); }
.skl-pc[data-st="none"] .skl-pcb i { background: transparent; border: 1px dashed var(--skl-dim); }
.skl-pc[data-st="none"] .skl-pcl { color: var(--skl-dim); text-decoration: line-through; }
.skl-pc[data-st="locked"] { cursor: default; filter: grayscale(1); opacity: .5; }
.skl-prev { font-size: 12.5px; line-height: 1.4; overflow: hidden; }
.skl-build { flex: none; height: 44px; border-radius: var(--skl-rB); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; cursor: pointer;
  background: transparent; color: var(--skl-dim); border: 2px dashed var(--skl-line); transition: translate .12s, filter .12s, box-shadow .12s;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.skl-build[data-st="on"] { background: var(--skl-btn); color: var(--skl-btnTxt); border: 1px solid var(--skl-line); box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
@media (hover: hover) { .skl-build[data-st="on"]:hover { filter: brightness(1.12); translate: 0 -1px; box-shadow: 0 5px 0 rgba(0, 0, 0, .3), 0 0 16px -2px var(--skl-sel); } }
.skl-build[data-st="on"]:active { translate: 0 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.skl-build[data-st="off"], .skl-build[data-st="locked"] { cursor: default; }
/* 🌐 SKB8: "Take my seat back" in the same box — 12 px on two lines (the phone's slot is 104 px; Fives' shape) */
.skl-build[data-k="reclaim"] { font-size: 12px; white-space: normal; line-height: 1.15; text-align: center; padding: 0 6px; }
.skl-vdiv { display: none; }

/* ── phone-only bands (hidden on PC) ── */
.skl-top, .skl-seats { display: none; }

/* ══ the SCREEN-LEVEL layer: toast · tower card · scoring panel · flying chips (SK-F5) ══ */
.skl-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; font-family: var(--skl-font); color: var(--skl-txt); }
.skl-toast { position: absolute; display: none; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: var(--skl-rB); background: var(--skl-sel); color: var(--skl-selInk); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6); }
.skl-toast[data-on="1"] { display: flex; }
.skl-toh { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; letter-spacing: .04em; --skl-shs: 13px; }
.skl-tos { font-size: 12.5px; line-height: 1.4; opacity: .92; }
.skl-card { position: absolute; display: none; flex-direction: column; gap: 6px; padding: 11px 13px; border-radius: var(--skl-rB); background: var(--skl-solid); border: 2px solid var(--skl-txt); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .75); pointer-events: auto; }
.skl-card[data-on="1"] { display: flex; }
.skl-ch { display: flex; align-items: baseline; gap: 8px; }
.skl-ch b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.skl-ch span { flex: 1; font-size: 12px; color: var(--skl-dim); white-space: nowrap; display: flex; align-items: center; gap: 4px; justify-content: flex-end; --skl-shs: 11px; }
.skl-cx { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--skl-line); background: var(--skl-seat); cursor: pointer; font-size: 12px; }
.skl-crow { display: grid; grid-template-columns: 16px 52px 1fr 26px; align-items: center; gap: 8px; height: 20px; --skl-shs: 13px; }
.skl-crow b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.skl-cbar { height: 8px; border-radius: 4px; background: var(--skl-seat); overflow: hidden; }
.skl-cbar i { display: block; height: 100%; border-radius: 4px; }
.skl-crow em { font-size: 14px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.skl-cstack { font-size: 11.5px; color: var(--skl-dim); line-height: 1.4; }
.skl-cfoot { font-size: 12.5px; line-height: 1.4; border-top: 1px solid var(--skl-line); padding-top: 7px; }
.skl-score { position: absolute; display: none; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--skl-rL); background: var(--skl-solid); border: 2px solid var(--skl-sel); box-shadow: 0 20px 44px -12px rgba(0, 0, 0, .7); pointer-events: auto; overflow: hidden; }
.skl-score[data-on="1"] { display: flex; }
.skl-seh { font-size: 11px; letter-spacing: .14em; color: var(--skl-dim); font-weight: 700; margin-top: 4px; }
.skl-set { font-size: 22px; font-weight: 800; margin-top: -4px; }
.skl-shd, .skl-srow { display: grid; grid-template-columns: 1fr 34px 34px 34px 40px 40px; gap: 4px; align-items: center; font-variant-numeric: tabular-nums; }
.skl-shd { font-size: 10.5px; color: var(--skl-dim); letter-spacing: .06em; font-weight: 700; }
.skl-shd span:not(:first-child), .skl-srow > *:not(:first-child) { text-align: right; }
.skl-srow { height: 28px; border-top: 1px solid var(--skl-line); font-size: 14px; }
.skl-sname { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; min-width: 0; white-space: nowrap; --skl-shs: 12px; }
.skl-srow b { font-weight: 800; }
.skl-srow b:last-child { font-size: 16px; }
.skl-sblks { display: flex; flex-direction: column; gap: 2px; }
.skl-sblk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; height: 20px; white-space: nowrap; color: var(--skl-dim); --skl-shs: 11px; }
.skl-sblk[data-k="crown"] { color: var(--skl-txt); }
.skl-sblk > b { width: 14px; font-weight: 800; }
.skl-sblk > i { width: 16px; text-align: center; }
.skl-sblk em { overflow: hidden; text-overflow: ellipsis; }
.skl-stall { font-size: 13px; line-height: 1.4; }
.skl-snext { margin-top: auto; font-size: 13px; line-height: 1.4; border-top: 1px solid var(--skl-line); padding-top: 8px; color: var(--skl-dim); }
.skl-sgo { flex: none; height: 44px; border-radius: var(--skl-rB); font-size: 16px; font-weight: 800; cursor: pointer; background: var(--skl-btn); color: var(--skl-btnTxt); border: 1px solid var(--skl-line); box-shadow: 0 4px 0 rgba(0, 0, 0, .3); transition: translate .12s, filter .12s, opacity .2s; }
.skl-sgo[data-st="off"] { opacity: .45; cursor: default; box-shadow: none; }
@media (hover: hover) { .skl-sgo[data-st="on"]:hover { filter: brightness(1.12); } }
.skl-sgo[data-st="on"]:active { translate: 0 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.skl-chipfly { position: absolute; left: 0; top: 0; margin: -11px 0 0 -18px; min-width: 36px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--skl-sel); color: var(--skl-selInk); font-size: 13px; font-weight: 800; line-height: 22px; text-align: center; display: none; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .6); }
.skl-chipfly[data-on="1"] { display: block; }

/* the rules card's FACE → LOTS chart (SK-F1). The card is RulesSheet's fixed dark window, not the board scheme. */
.skl-rchart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin-top: 12px; }
.skl-rface { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; }
.skl-rface b { width: 14px; font-weight: 800; text-align: right; }
.skl-rface em { font-style: normal; color: #b8bac0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skl-rmap { display: grid; grid-template-columns: repeat(3, 9px); grid-template-rows: repeat(3, 9px); gap: 2px; flex: none; }
.skl-rmap i { border-radius: 2px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.skl-rmap i[data-on="1"] { background: #6fd18f; border-color: transparent; }
@media (max-width: 480px) { .skl-rchart { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  .skl-root .skl-lot, .skl-root .skl-badge, .skl-root .skl-dust, .skl-root .skl-maj, .skl-root .skl-die { animation: none !important; }
}

/* ══ DESKTOP: ONE box, scaled by BoardFit ══ */
@media (min-width: 1000px) {
  #skyline-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .skl-root { width: 1160px; height: 553px; padding: 12px; display: grid; grid-template-columns: 272px 528px 312px; gap: 12px;
    --skl-bdg: 14px; --skl-numf: 24px; --skl-strip: 6px; --skl-chipf: 11px; --skl-markf: 30px; --skl-fxf: 10px; --skl-starf: 11px; --skl-pad: 5px; --skl-stripTop: 22px; }
  .skl-left { gap: 10px; }
  .skl-round { height: 140px; }
  .skl-citybox { height: 529px; }
  .skl-city { width: 528px; height: 528px; grid-template-columns: 258px 258px; grid-template-rows: 258px 258px; gap: 12px; }
  .skl-blk { padding: 8px; }
  .skl-bh { height: 20px; margin-bottom: 6px; }
  .skl-bl { width: 20px; height: 20px; font-size: 12px; }
  .skl-maj { gap: 5px; height: 20px; min-width: 128px; padding: 0 7px; border-radius: 10px; font-size: 11.5px; --skl-shs: 11px; }
  .skl-maj[data-mode="crown"] { font-size: 13px; }
  .skl-lots { gap: 6px; }
  .skl-right { gap: 12px; }
  .skl-feed { height: 150px; padding: 10px 12px; gap: 5px; }
  .skl-fl { height: 34px; align-items: flex-start; gap: 7px; --skl-shs: 11px; }
  .skl-fl[data-hot="1"] { background: var(--skl-seat); border-radius: 6px; margin: 0 -4px; padding: 0 4px; }
  .skl-fic { font-size: 12.5px; line-height: 17px; }
  .skl-fl > span { font-size: 12.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* ⛔ LOCKED LAYOUT: the column is the card's width, never its content's — online the Build slot can read "Take my seat
     back" (SKB8) and an auto column grew with it (skyline-mp §4 caught 264 → 280 px) */
  .skl-hand { flex: 1; padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 32px 13px 72px 13px 72px 38px 44px; gap: 8px; }
  .skl-row1, .skl-row2 { display: contents; }
  .skl-hh { grid-row: 1; } .skl-dlab { grid-row: 2; } .skl-dice { grid-row: 3; gap: 10px; } .skl-plab { grid-row: 4; } .skl-pcs { grid-row: 5; gap: 8px; } .skl-prev { grid-row: 6; } .skl-build { grid-row: 7; width: 100%; }
  .skl-plab { display: block; }
  .skl-dw { gap: 10px; }
  .skl-din { width: 56px; height: 56px; }
  .skl-pc { padding: 6px 4px; gap: 5px; height: 72px; }
  .skl-pcb i { width: 26px; height: 7px; }
  .skl-pcl { font-size: 11.5px; }
  .skl-score .skl-sgo { width: 100%; }
}

/* ══ PHONE (unscaled, 384 × 812 → 360 × 740): one column, the square CITY the flexible band ══ */
@media (max-width: 999px) {
  #skyline-game-screen.skl-playing .wrap { padding: 0 2px; max-width: none; }
  #skyline-game-screen.skl-playing .topbar { display: none; }
  #skyline-game-screen.skl-playing.skl-topbar-open .topbar { display: flex; }
  /* NOTCH SWEEP (predicely_notch_safe_area): the topbar carried the inset; hiding it, we carry it — PADDING, never margin */
  #skyline-game-screen.skl-playing:not(.skl-topbar-open) > .wrap { padding-top: env(safe-area-inset-top, 0px); }
  .skl-root { width: 100%; height: var(--skl-phone-h, 694px); padding: 8px; display: flex; flex-direction: column; gap: 6px;
    /* ⛔ SK-F2 — the floors: badge 14, every live number / chip / tag ≥ 11 */
    --skl-bdg: 14px; --skl-numf: 16px; --skl-strip: 4px; --skl-chipf: 11px; --skl-markf: 22px; --skl-fxf: 11px; --skl-starf: 11px; --skl-pad: 3px; --skl-stripTop: 19px; }
  .skl-left { display: none; }
  .skl-mid, .skl-right { display: contents; }
  .skl-top { order: 1; display: flex; flex: none; height: 30px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
  .skl-topt { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; white-space: nowrap; min-width: 0; overflow: hidden; --skl-shs: 10px; }
  .skl-tstart { font-size: 11px; font-weight: 700; white-space: nowrap; padding: 2px 7px; border-radius: 7px; background: var(--skl-seat); border: 1px solid var(--skl-line); margin-left: auto; }
  .skl-tstart[data-me="1"] { background: var(--skl-sel); color: var(--skl-selInk); }
  .skl-menu { display: flex; flex: none; width: 28px; height: 24px; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--skl-line); background: var(--skl-panel); font-size: 13px; cursor: pointer; }
  .skl-seats { order: 2; display: grid; flex: none; height: 60px; grid-template-columns: repeat(var(--skl-n, 4), minmax(0, 1fr)); gap: 6px; }
  .skl-seat { position: relative; height: 60px; padding: 4px 6px; border-radius: var(--skl-rB); background: var(--skl-seat); border: var(--skl-panelBd); display: flex; flex-direction: column; justify-content: space-between; min-width: 0; transition: box-shadow .2s; }
  .skl-seat[data-me="1"] { background: var(--skl-panel); }
  .skl-seat[data-cur="1"] { box-shadow: inset 0 0 0 2px var(--skl-sel), 0 0 14px -3px var(--skl-sel); }
  .skl-sr1 { display: flex; align-items: center; gap: 4px; min-width: 0; height: 18px; --skl-shs: 11px; }
  .skl-snm { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .skl-spts { font-size: 16px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
  .skl-sr2 { display: flex; align-items: center; gap: 3px; height: 16px; }
  .skl-sr2 em { margin-left: auto; font-size: 11px; color: var(--skl-dim); white-space: nowrap; }
  .skl-sdin { width: 16px; height: 16px; display: flex; flex: none; }
  .skl-sr3 { font-size: 11px; line-height: 13px; height: 13px; color: var(--skl-dim); white-space: nowrap; overflow: hidden; }
  .skl-stag { position: absolute; top: -7px; right: 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 0 4px; border-radius: 4px; line-height: 13px; opacity: 0; }
  .skl-stag[data-on="1"] { opacity: 1; }
  .skl-stag[data-k="first"] { background: var(--skl-txt); color: var(--skl-solid); }
  .skl-stag[data-k="now"] { background: var(--skl-sel); color: var(--skl-selInk); }
  /* the city: a square of whatever the bands leave (SK-F3: a width-bound phone centres it; the spare goes to the feed) */
  .skl-citybox { order: 3; flex: 1; container-type: size; align-items: center; }
  .skl-city { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); gap: 6px; }
  .skl-blk { padding: 4px; border-radius: var(--skl-rM); }
  .skl-bh { height: 14px; margin-bottom: 3px; gap: 4px; }
  .skl-bl { width: 14px; height: 14px; font-size: 11px; border-radius: 4px; }
  .skl-maj { gap: 3px; height: 14px; min-width: 62px; padding: 0 4px; border-radius: 7px; font-size: 11px; line-height: 14px; --skl-shs: 9px; }
  .skl-lots { gap: 4px; }
  .skl-feed { order: 4; height: calc(var(--skl-feed-rows, 2) * 15px + 8px); padding: 4px 6px; gap: 1px; border-radius: var(--skl-rB); background: var(--skl-seat); }
  .skl-feedh { display: none; }
  .skl-fl { height: 14px; align-items: center; gap: 5px; --skl-shs: 9px; }
  .skl-fl .skl-sh { margin-top: 0; }
  .skl-fic { width: 10px; font-size: 11px; line-height: 14px; }
  .skl-fl > span { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .skl-hand { order: 5; flex: none; height: 106px; display: flex; flex-direction: column; gap: 6px; padding: 0; background: none; border: 0; }
  .skl-hand[data-my="1"] { box-shadow: none; }
  .skl-hh, .skl-dlab, .skl-plab { display: none; }
  .skl-row1 { display: flex; align-items: center; gap: 6px; height: 56px; }
  .skl-dice { gap: 6px; flex: none; }
  .skl-dw { flex: none; gap: 3px; }
  .skl-din { width: 42px; height: 42px; }
  .skl-dmeta .skl-map { --skl-mc: 7px; gap: 1px; }
  .skl-fname { display: none; }
  .skl-vdiv { display: block; width: 1px; align-self: stretch; margin: 4px 0; background: var(--skl-line); flex: none; }
  .skl-pcs { flex: 1; height: 56px; gap: 4px; }
  .skl-pc { padding: 4px 2px; gap: 3px; height: 56px; }
  .skl-pcb i { width: 22px; height: 5px; }
  .skl-pcl { font-size: 11px; }
  .skl-row2 { display: flex; align-items: center; gap: 8px; height: 44px; }
  .skl-prev { flex: 1; min-width: 0; font-size: 12px; line-height: 1.3; max-height: 32px; }
  .skl-build { width: 104px; }
  .skl-toast { padding: 7px 11px; gap: 2px; min-height: 60px; justify-content: center; }
  .skl-toh { font-size: 13.5px; }
  .skl-tos { font-size: 11.5px; line-height: 1.35; }
  .skl-score { gap: 2px; padding: 7px 10px; }
  .skl-score .skl-seh { margin-top: 2px; }
  .skl-score .skl-set { font-size: 16px; margin-top: 0; }
  .skl-score .skl-shd { display: none; }
  .skl-score .skl-srow { height: 20px; font-size: 12px; grid-template-columns: 1fr 28px 28px 28px 34px 34px; }
  .skl-score .skl-sname { font-size: 12px; }
  .skl-score .skl-sblks { flex-direction: row; flex-wrap: wrap; gap: 2px 10px; }
  .skl-score .skl-sblk { font-size: 11.5px; height: 16px; }
  .skl-score .skl-stall { font-size: 11.5px; }
  .skl-score .skl-snext { font-size: 11.5px; padding-top: 4px; }
  .skl-score .skl-sgo { height: 40px; margin-top: 4px; }
}