/* frontend/ladybuglanes.css — LADYBUG LANES board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Swarm / Gulls precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock (docs/design/batch8/Arrows.dc.html pal(), l.233–269): CLASSIC
 * (charcoal) by default, ARCADE when GameTheme puts `gm-arcade` on the screen — recolour only: same box, same
 * sizes. ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD: the setup card sits outside `.ll-root`.
 * Players are SHAPE first — ● ▲ ■ ◆ on every leaf, arrow, row and log line — colour only repeats it; a state is
 * an icon + fill + border style, never a recolour alone. The owner is colourblind: every frame reads in greyscale.
 *
 * ── Geometry is the mock's ──────────────────────────────────────────────────
 * board() l.333–495: the desktop design box is 1280 × 553 (the mock's 637 less its 84px chat strip) — three columns
 * (status · garden · log) over rows 56 / flex / 220 dock, garden cell 54 + a 16px margin = 518 square. The phone is
 * rows 40 · 50 · garden · log (≥ 2 lines) · dock 82, cell = min(width limit, height left) — set by llFitPhone().
 * Everything inside the garden is absolutely positioned in garden px by ladybuglanes.js, from --ll-c / --ll-m.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * ONE DOM, two arrangements. Every row is a FIXED size except the phone's LOG. Every text box is a fixed width or
 * fills its slot. Feedback changes colour, glow or a 1px transform — never size or spacing.
 */

#ladybuglanes-game-screen, .ll-root {
  --ll-bg: radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%);
  --ll-panel: rgba(255, 255, 255, .035); --ll-panel2: rgba(0, 0, 0, .24); --ll-line: rgba(255, 255, 255, .1);
  --ll-txt: #e9e8e4; --ll-dim: #8f9197; --ll-solid: #1b1c21;
  --ll-btn: linear-gradient(180deg, #f0cb62, #d2a843); --ll-btnTxt: #2a2008;
  --ll-p0: #f2c14e; --ll-p1: #ef7d4a; --ll-p2: #5fb4f0; --ll-p3: #c79cf0;
  --ll-grass: #2f5b37; --ll-grass2: #2a5232; --ll-edge: #1a3420; --ll-leaf: #94c962;
  --ll-bug: #e04a3a; --ll-bugHead: #17110f; --ll-bugRim: #fff3df;
  --ll-spider: #1a171c; --ll-spiderRing: #f3eee4;
  --ll-trail: rgba(255, 244, 214, .36); --ll-spTrail: #ff8a7a;
  --ll-hatch: repeating-linear-gradient(135deg, rgba(127, 127, 127, .22) 0 5px, transparent 5px 10px);
  --ll-ui: 'Avenir Next', 'Segoe UI', system-ui, sans-serif; --ll-mono: ui-monospace, Menlo, Consolas, monospace;
  --ll-R: 12px; --ll-bd: 1px; --ll-w: 700;
  --ll-vec: polygon(50% 0, 100% 52%, 67% 52%, 67% 100%, 33% 100%, 33% 52%, 0 52%);
}
/* ARCADE — recolour only (GameTheme: `gm-arcade` on the screen). The mock's arcade pal() on its Blue scheme. */
#ladybuglanes-game-screen.gm-arcade, .gm-arcade .ll-root {
  --ll-bg: radial-gradient(135% 120% at 50% -10%, #0c1a3a 0%, #14285e 45%, #1e3a8a 100%);
  --ll-panel: rgba(255, 255, 255, .07); --ll-panel2: rgba(0, 0, 0, .26); --ll-line: color-mix(in oklch, #60a5fa 48%, transparent);
  --ll-txt: #ffffff; --ll-dim: rgba(255, 255, 255, .66); --ll-solid: #0b0b1c;
  --ll-btn: #60a5fa; --ll-btnTxt: #161616;
  --ll-p0: #60a5fa; --ll-p1: #f472b6; --ll-p2: #facc15; --ll-p3: #f1f1f1;
  --ll-grass: rgba(0, 0, 0, .40); --ll-grass2: rgba(0, 0, 0, .27); --ll-edge: #60a5fa; --ll-leaf: #3ee08a;
  --ll-trail: rgba(255, 255, 255, .32);
  --ll-ui: system-ui, 'Segoe UI', Roboto, sans-serif; --ll-R: 16px; --ll-bd: 2px; --ll-w: 800;
}

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

/* ── the board root (phone first) ─────────────────────────────────────── */
.ll-root {
  --ll-c: 38px; --ll-m: 10px; --ll-gt: calc(var(--ll-c) * 9 + var(--ll-m) * 2);
  --ll-pad: 8px; --ll-gap: 6px; --ll-sb: max(12px, calc(var(--ll-c) * .32));
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--ll-phone-h, 740px); padding: var(--ll-pad);
  display: grid; gap: var(--ll-gap);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 40px 50px var(--ll-gt) minmax(0, 1fr) 82px;
  grid-template-areas: "top die" "players players" "garden garden" "feed feed" "dock dock";
  background: var(--ll-bg); color: var(--ll-txt); font-family: var(--ll-ui);
  border-radius: 20px;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.ll-root *, .ll-root *::before, .ll-root *::after { box-sizing: border-box; }
.ll-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }
.ll-root i, .ll-root em { font-style: normal; }
.ll-root [hidden] { display: none !important; }
.ll-panel, .ll-top, .ll-players, .ll-die, .ll-feed, .ll-dock { background: var(--ll-panel); border: var(--ll-bd) solid var(--ll-line); border-radius: var(--ll-R); min-width: 0; min-height: 0; }
.ll-ttl { display: none; flex: none; font: 700 10px/1 var(--ll-mono); letter-spacing: .12em; color: var(--ll-dim); }

/* seat identity: [data-o] sets --ll-p; the SYMBOL is the identity, the colour repeats it */
.ll-root [data-o="0"] { --ll-p: var(--ll-p0); }
.ll-root [data-o="1"] { --ll-p: var(--ll-p1); }
.ll-root [data-o="2"] { --ll-p: var(--ll-p2); }
.ll-root [data-o="3"] { --ll-p: var(--ll-p3); }
/* 🌐 "me" (MP slice B): the viewer's own seat colour — the picked square, the ghost box, the petals, the tray, the chosen
   way, the gold trails. Seat 0 in solo; the server's seat online (.ll-root[data-me], set by ladybuglanes.js llMe()). ⛔ The
   Ramp .402 lesson reached the CSS in Ring Out: a "mine" colour keyed to seat 0 paints a seat-1 viewer in a rival's colour. */
.ll-root { --ll-me: var(--ll-p0); }
.ll-root[data-me="1"] { --ll-me: var(--ll-p1); }
.ll-root[data-me="2"] { --ll-me: var(--ll-p2); }
.ll-root[data-me="3"] { --ll-me: var(--ll-p3); }
.ll-sym { flex: none; grid-area: sym; width: 16px; height: 16px; border-radius: 6px; background: var(--ll-p); color: #111; font-size: 10px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }

/* ── top: round · phase pill · AR-M5 clock slot · ☰ ─────────────────── */
.ll-top { grid-area: top; display: flex; align-items: center; gap: 5px; padding: 0 6px; }
.ll-round { flex: none; display: flex; align-items: baseline; gap: 2px; }
.ll-rlbl { font: 700 11px/1 var(--ll-mono); letter-spacing: .1em; color: var(--ll-dim); }
.ll-rnum { font-size: 20px; font-weight: calc(var(--ll-w) + 100); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; line-height: 1; }
.ll-rof { font-size: 12px; color: var(--ll-dim); font-weight: 600; }
.ll-phase { flex: 1 1 0; min-width: 0; height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 7px; border-radius: 99px; border: 1.5px solid var(--ll-txt); color: var(--ll-txt); }
.ll-phase[data-kind="wait"] { border-style: dashed; }
.ll-phase[data-kind="run"], .ll-phase[data-kind="reveal"] { background: var(--ll-txt); color: var(--ll-solid); }
.ll-phase[data-kind="spider"], .ll-phase[data-kind="spiderNone"] { background: var(--ll-solid); color: var(--ll-txt); border: 1.5px solid var(--ll-spTrail); box-shadow: 0 0 0 3px rgba(255, 138, 122, .18); }
.ll-phase[data-kind="spiderNone"] { border-style: dashed; box-shadow: none; }
.ll-phtxt { flex: 1 1 0; min-width: 0; font: 800 10px/1 var(--ll-mono); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-pips { flex: none; display: flex; gap: 2px; }
.ll-pip { width: 5px; height: 5px; border-radius: 50%; border: 1.5px solid currentColor; }
.ll-pip[data-lit="1"] { background: currentColor; }
.ll-phase[data-kind="spider"] .ll-pips, .ll-phase[data-kind="spiderNone"] .ll-pips { visibility: hidden; }
.ll-clock { flex: none; width: 34px; height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; border-radius: 99px; border: 1.5px dashed var(--ll-line); color: var(--ll-dim); font: 800 11px/1 var(--ll-mono); font-variant-numeric: tabular-nums; }
.ll-clockic { display: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; }
.ll-clock[data-live="1"] { border-style: solid; border-color: var(--ll-txt); color: var(--ll-txt); }
.ll-menu { flex: none; width: 28px; height: 26px; border: 1.5px solid var(--ll-line) !important; border-radius: 99px; cursor: pointer; font-size: 13px; background: var(--ll-panel2); color: var(--ll-txt); }
.ll-menu:active { transform: translateY(1px); }

/* ── players ─────────────────────────────────────────────────────────── */
.ll-players { grid-area: players; display: grid; grid-template-columns: repeat(var(--ll-n, 4), minmax(0, 1fr)); gap: var(--ll-gap); background: none; border: 0; }
.ll-root[data-n="2"] .ll-players { --ll-n: 2; }
.ll-root[data-n="3"] .ll-players { --ll-n: 3; }
.ll-prow { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sym name name" "score score stat"; align-items: center; column-gap: 5px; row-gap: 1px; padding: 5px 6px; background: var(--ll-panel); border: var(--ll-bd) solid var(--ll-line); border-radius: var(--ll-R); }
.ll-prow[data-you="1"] { background: var(--ll-panel2); }
.ll-prow[data-glow="spider"] { box-shadow: 0 0 0 2px var(--ll-spTrail), 0 0 16px -4px var(--ll-spTrail); }
.ll-av { display: none; }
.ll-pname { grid-area: name; min-width: 0; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.ll-prow[data-you="1"] .ll-pname { font-weight: 800; }
.ll-pscore { grid-area: score; font-size: 17px; font-weight: calc(var(--ll-w) + 100); font-variant-numeric: tabular-nums; min-width: 2.2ch; line-height: 1; }
.ll-pstat { grid-area: stat; flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 99px; font: 800 12px/1 var(--ll-mono); letter-spacing: .04em; white-space: nowrap; overflow: hidden; background: transparent; color: var(--ll-dim); border: 1.5px dashed var(--ll-dim); }
.ll-pstat:is([data-st="ready"], [data-st="placed"], [data-st="win"]) { background: var(--ll-txt); color: var(--ll-solid); border: 1.5px solid var(--ll-txt); box-shadow: 0 0 10px -2px var(--ll-txt); }
.ll-pstat[data-st="cancel"] { background: var(--ll-hatch), var(--ll-panel2); color: var(--ll-txt); border: 1.5px dashed var(--ll-txt); }
.ll-pstat[data-st="done"], .ll-pstat[data-st="missed"] { border-style: dotted; }
.ll-pstat[data-st="left"] { border-style: dotted; opacity: .6; }

/* ── spawn die ───────────────────────────────────────────────────────── */
.ll-die { grid-area: die; display: flex; flex-direction: row-reverse; align-items: center; gap: 6px; padding: 0 6px 0 8px; }
.ll-compass { display: flex; flex: none; }
.ll-gchip { display: none; }
.ll-dieslot { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--ll-panel2); border: 1.5px dashed var(--ll-line); overflow: hidden; }
.ll-dieslot[data-live="1"] { border-style: solid; border-color: var(--ll-txt); }
.ll-dieface { display: flex; align-items: center; justify-content: center; }
.ll-dieface > b { font: 900 16px/1 var(--ll-mono); }
.ll-dieghost { display: block; width: 50%; height: 50%; border-radius: 3px; border: 1.5px dashed var(--ll-line); }
.ll-dietxt { font: 800 11px/1 var(--ll-mono); width: 30px; text-align: center; color: var(--ll-txt); white-space: nowrap; overflow: hidden; }

/* ── the garden (everything inside is absolute, in garden px) ─────────── */
.ll-garden { grid-area: garden; position: relative; width: var(--ll-gt); height: var(--ll-gt); justify-self: center; align-self: start; }
.ll-field { position: absolute; left: var(--ll-m); top: var(--ll-m); width: calc(var(--ll-c) * 9); height: calc(var(--ll-c) * 9); display: grid; grid-template-columns: repeat(9, var(--ll-c)); grid-template-rows: repeat(9, var(--ll-c));
  background: repeating-conic-gradient(var(--ll-grass) 0 25%, var(--ll-grass2) 0 50%) 0 0 / calc(var(--ll-c) * 2) calc(var(--ll-c) * 2);
  border-radius: 8px; box-shadow: 0 0 0 calc(var(--ll-bd) + 1px) var(--ll-edge); z-index: 1; }
.gm-arcade .ll-field { box-shadow: 0 0 0 calc(var(--ll-bd) + 1px) var(--ll-edge), 0 0 26px -6px var(--ll-edge); }
.ll-sq { position: relative; border: 0; background: transparent; cursor: pointer; border-radius: 6px; transition: box-shadow .12s, background .12s; }
.ll-sq[data-st="lock"] { cursor: default; }
.ll-sq[data-st="no"] { cursor: not-allowed; }
.ll-sq[data-st="picked"] { box-shadow: inset 0 0 0 2px var(--ll-me); }
.ll-sq:active:not([data-st="lock"]):not([data-st="no"]) { box-shadow: inset 0 4px 10px rgba(0, 0, 0, .6), inset 0 0 0 2px var(--ll-me); }
@media (hover: hover) {
  .ll-sq[data-st="idle"]:hover { box-shadow: inset 0 0 0 2px var(--ll-txt); background: rgba(255, 255, 255, .08); }
  .ll-sq[data-st="no"]:hover { background: var(--ll-hatch); }
  .ll-sq[data-st="no"]:hover::after { content: '⊘'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--ll-c) * .4); font-weight: 900; color: var(--ll-txt); opacity: .8; }
}
.ll-nest { position: absolute; border-radius: 50%; border: 1.5px dotted var(--ll-trail); z-index: 2; pointer-events: none; }
.ll-gate { position: absolute; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: var(--ll-panel2); border: 1.5px dashed var(--ll-line); z-index: 2; pointer-events: none; }
.ll-gate[data-open="1"] { background: var(--ll-txt); border: 1.5px solid var(--ll-txt); box-shadow: 0 0 12px var(--ll-txt); }
.ll-gchev { display: block; width: calc(var(--ll-m) - 6px); height: calc(var(--ll-m) - 6px); background: var(--ll-dim); clip-path: var(--ll-vec); }
.ll-gate[data-open="1"] .ll-gchev { background: var(--ll-solid); }
.ll-gate[data-g="T"] .ll-gchev { transform: rotate(180deg); }
.ll-gate[data-g="R"] .ll-gchev { transform: rotate(270deg); }
.ll-gate[data-g="L"] .ll-gchev { transform: rotate(90deg); }

.ll-leaf { position: absolute; width: var(--ll-c); height: var(--ll-c); display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; }
.ll-leafbg { position: absolute; inset: calc(var(--ll-c) * .06); background: linear-gradient(135deg, var(--ll-leaf), color-mix(in oklch, var(--ll-leaf) 70%, #000)); border-radius: 8% 70% 8% 70%; box-shadow: 0 0 0 2.5px var(--ll-p), 0 3px 6px rgba(0, 0, 0, .4); }
.ll-leafsym { position: relative; width: calc(var(--ll-c) * .46); height: calc(var(--ll-c) * .46); border-radius: 50%; background: rgba(0, 0, 0, .72); color: var(--ll-p); font-size: calc(var(--ll-c) * .29); line-height: 1; display: flex; align-items: center; justify-content: center; font-weight: 900; }
.ll-pile { position: absolute; right: calc(var(--ll-c) * -.16); bottom: calc(var(--ll-c) * -.14); min-width: calc(var(--ll-c) * .5); height: max(14px, calc(var(--ll-c) * .34)); padding: 0 3px; border-radius: 99px; background: var(--ll-solid); border: 1.5px solid var(--ll-p); color: var(--ll-txt); font-size: max(10px, calc(var(--ll-c) * .24)); font-weight: 800; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; z-index: 4; }
.ll-pile[data-glow="1"] { box-shadow: 0 0 0 2px var(--ll-txt), 0 0 14px var(--ll-spTrail); }
.ll-pile[data-tick="1"] { animation: ll-tick1 .18s ease-out; }
.ll-pile[data-tick="2"] { animation: ll-tick2 .18s ease-out; }
.ll-fc { position: absolute; left: calc(var(--ll-c) * -.18); top: calc(var(--ll-c) * -.16); height: max(14px, calc(var(--ll-c) * .32)); padding: 0 4px; border-radius: 99px; background: var(--ll-solid); border: 1.5px dashed var(--ll-txt); color: var(--ll-txt); font: 800 max(9px, calc(var(--ll-c) * .22)) var(--ll-mono); display: flex; align-items: center; white-space: nowrap; z-index: 4; }
.ll-fc[data-kind=""] { display: none; }
.ll-fc[data-kind="spider"] { border-color: var(--ll-spTrail); }

.ll-trails, .ll-arrows, .ll-bugs, .ll-fx { position: absolute; inset: 0; pointer-events: none; }
.ll-trails { z-index: 3; }
.ll-trail { position: absolute; border-radius: 3px; }
.ll-tplain { background: var(--ll-trail); }
.ll-tgold { background: var(--ll-me); }
.ll-tsp { background-color: transparent; }
.ll-tend { position: absolute; border-radius: 50%; border: 1.5px solid var(--ll-trail); }
.ll-tend.ll-tgold { background: none; border-color: var(--ll-me); }

/* arrows: shape + owner symbol badge (● ▲ ■ ◆ at the drawn size: max(12px, .32 cell)) */
.ll-arrows { z-index: 4; }
.ll-arrow { position: absolute; border-radius: calc(var(--ll-c) * .18); background: color-mix(in oklch, var(--ll-p) 30%, rgba(0, 0, 0, .5)); border: 2px solid var(--ll-p); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; }
.ll-chev { display: block; width: 60%; height: 60%; background: var(--ll-p, var(--ll-txt)); clip-path: var(--ll-vec); }
.ll-asym { position: absolute; left: calc(var(--ll-sb) * -.4); top: calc(var(--ll-sb) * -.4); width: var(--ll-sb); height: var(--ll-sb); border-radius: 50%; background: var(--ll-solid); color: var(--ll-p); border: 1.5px solid var(--ll-p); font-size: calc(var(--ll-sb) * .6); line-height: 1; display: flex; align-items: center; justify-content: center; }
.ll-aflag { position: absolute; right: calc(var(--ll-sb) * -.4); top: calc(var(--ll-sb) * -.4); width: var(--ll-sb); height: var(--ll-sb); border-radius: 50%; background: var(--ll-txt); color: var(--ll-solid); font-size: calc(var(--ll-sb) * .64); font-weight: 900; line-height: 1; display: flex; align-items: center; justify-content: center; }
.ll-arrow:is([data-mode="oldest"], [data-mode="lifts"]) { outline: 2px dashed var(--ll-txt); outline-offset: 2px; }
.ll-ghost { border-style: dashed; background: rgba(0, 0, 0, .3); box-shadow: 0 0 calc(var(--ll-c) * .4) var(--ll-p); z-index: 2; }
.ll-ghost .ll-chev { opacity: .7; }
.ll-ghost[data-mode="ghostLocked"] { background: rgba(0, 0, 0, .45); box-shadow: none; }
.ll-fxarrow { width: calc(var(--ll-c) * .78); height: calc(var(--ll-c) * .78); margin: calc(var(--ll-c) * .11); }
.ll-fxarrow[data-mode="lift"] { border-style: dashed; }

/* ladybugs (the mock's CSS stand-in, bugV l.290–299) — facing is the dark head cap with a light rim */
.ll-bugs { z-index: 5; }
.ll-bug { position: absolute; left: 0; top: 0; will-change: transform; }
.ll-brot { position: absolute; inset: 0; }
.ll-bbody { position: absolute; left: 10%; top: 18%; width: 80%; height: 82%; border-radius: 50%; background: var(--ll-bug); box-shadow: 0 0 0 1.5px var(--ll-bugRim), 0 2px 3px rgba(0, 0, 0, .45); }
.ll-bline { position: absolute; left: calc(50% - .75px); top: 40%; width: 1.5px; height: 58%; background: var(--ll-bugHead); opacity: .85; }
.ll-bsp1, .ll-bsp2 { position: absolute; top: 56%; width: 19%; height: 19%; border-radius: 50%; background: var(--ll-bugHead); }
.ll-bsp1 { left: 22%; }
.ll-bsp2 { left: 59%; }
.ll-bhead { position: absolute; left: 24%; top: 0; width: 52%; height: 38%; border-radius: 50% 50% 40% 40%; background: var(--ll-bugHead); box-shadow: 0 0 0 1.5px var(--ll-bugRim); }
.ll-bn { position: absolute; right: -35%; bottom: -30%; padding: 0 3px; border-radius: 99px; background: var(--ll-solid); color: var(--ll-txt); font-size: max(9px, calc(var(--ll-c) * .2)); font-weight: 800; border: 1px solid var(--ll-txt); line-height: 1.3; z-index: 2; white-space: nowrap; }

.ll-spider { position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: transform var(--ll-hop, 260ms) linear, opacity .26s; }
.ll-root[data-phase="plan"] .ll-spider, .ll-root[data-phase="wait"] .ll-spider, .ll-root[data-phase="reveal"] .ll-spider { transition: opacity .26s; }
.ll-srot { position: absolute; inset: 0; }
.ll-sbody { position: absolute; inset: 8%; border-radius: 50%; background: var(--ll-spider); box-shadow: 0 0 0 2px var(--ll-spiderRing), 0 3px 6px rgba(0, 0, 0, .5); }
.ll-shead { position: absolute; left: 35%; top: -6%; width: 30%; height: 30%; border-radius: 50%; background: var(--ll-spiderRing); }
.ll-sglyph { position: relative; color: var(--ll-spiderRing); font-size: calc(var(--ll-c) * .4); line-height: 1; font-weight: 900; }
.ll-spider[data-hit="1"] { filter: drop-shadow(0 0 8px var(--ll-spTrail)); z-index: 8; }
.ll-spider[data-fade="1"] { opacity: 0; }

.ll-ghostbox { position: absolute; border: 2px dashed var(--ll-me); border-radius: 8px; box-shadow: 0 0 14px var(--ll-me); z-index: 6; pointer-events: none; }
.ll-ghostbox[data-on="0"] { display: none; }

/* PC radial (AR-M1: never on a phone) — petals folded inside the garden box by llRadial() */
.ll-petals { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.ll-petals[data-on="0"] { display: none; }
.ll-petal { position: absolute; width: 38px; height: 38px; border-radius: 50%; background: var(--ll-solid); border: 2px solid var(--ll-me) !important; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; box-shadow: 0 4px 10px rgba(0, 0, 0, .45); transition: filter .12s, box-shadow .12s; }
.ll-petal .ll-chev { width: 44%; height: 44%; background: var(--ll-me); }
.ll-petal[data-st="chosen"] { background: var(--ll-me); box-shadow: 0 0 0 2px var(--ll-solid), 0 0 16px var(--ll-me); }
.ll-petal[data-st="chosen"] .ll-chev { background: var(--ll-solid); }
.ll-petal:active { transform: translateY(1px); filter: brightness(.82); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6); }
@media (hover: hover) { .ll-petal:hover { box-shadow: 0 0 0 2px var(--ll-txt), 0 0 14px -2px var(--ll-me); filter: brightness(1.18); } }

/* fx — absolute, inside the garden (they scale with it) */
.ll-fx { z-index: 10; }
.ll-fx > * { position: absolute; }
.ll-puff { border-radius: 50%; border: 3px dotted var(--ll-txt); opacity: .9; animation: ll-puff .86s ease-out forwards; }
.ll-canceltag { transform: translateX(-50%); width: 80px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 99px; background: var(--ll-txt); color: var(--ll-solid); font: 900 10px/1 var(--ll-mono); letter-spacing: .06em; }
.ll-arcbug { z-index: 2; filter: drop-shadow(0 0 6px var(--ll-p)); }
.ll-plus, .ll-minus { transform: translate(-50%, -50%); padding: 1px 7px; border-radius: 99px; font-size: max(12px, calc(var(--ll-c) * .36)); font-weight: 900; white-space: nowrap; border: 2px solid var(--ll-solid); animation: ll-float .9s ease-out forwards; }
.ll-plus { background: var(--ll-p); color: #111; }
.ll-minus { background: var(--ll-spTrail); color: #111; font-size: max(14px, calc(var(--ll-c) * .5)); animation-duration: 1.16s; }
.ll-streak { height: 3px; transform-origin: 0 50%; background: linear-gradient(90deg, transparent, var(--ll-spTrail)); animation: ll-fade .9s ease-out forwards; }
.ll-scatter { opacity: .6; }

@keyframes ll-puff { 0% { transform: scale(.4); opacity: 0 } 30% { transform: scale(1); opacity: .9 } 100% { transform: scale(1.25); opacity: 0 } }
@keyframes ll-float { 0% { opacity: 0; margin-top: 6px } 20% { opacity: 1; margin-top: 0 } 70% { opacity: 1 } 100% { opacity: 0; margin-top: -14px } }
@keyframes ll-fade { 0% { opacity: .9 } 100% { opacity: 0 } }
@keyframes ll-tick1 { 0% { transform: scale(1) } 50% { transform: scale(1.25) } 100% { transform: scale(1) } }
@keyframes ll-tick2 { 0% { transform: scale(1) } 50% { transform: scale(1.25) } 100% { transform: scale(1) } }

/* ── feed ────────────────────────────────────────────────────────────── */
.ll-feed { grid-area: feed; display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; overflow: hidden; }
.ll-fline { flex: none; height: 16px; display: flex; gap: 8px; align-items: baseline; opacity: .82; }
.ll-fline[data-top="1"] { opacity: 1; }
.ll-fr { flex: none; width: 22px; font: 800 9.5px/1 var(--ll-mono); color: var(--ll-dim); }
.ll-ft { min-width: 0; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-fline[data-top="1"] .ll-ft { font-weight: 700; }

/* ── dock ────────────────────────────────────────────────────────────── */
.ll-dock { grid-area: dock; display: flex; flex-direction: column; gap: 6px; background: none; border: 0; }
.ll-tray { flex: none; height: 28px; display: flex; gap: 5px; align-items: stretch; }
.ll-tlbl { flex: none; width: 40px; align-self: center; font: 800 10px/1 var(--ll-mono); letter-spacing: .08em; color: var(--ll-dim); }
/* ⛔ ONE border width in every state: a flex item's base size includes its border, so a 1.5 → 2px swap moved the
   phone slots 1.3px at the reveal (the suite's locked-layout walk caught it) */
.ll-tslot { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 8px; border: 2px solid var(--ll-me); background: var(--ll-panel2); }
.ll-tslot[data-st="empty"] { border: 2px dashed var(--ll-line); background: transparent; opacity: .6; }
.ll-tslot:is([data-st="oldest"], [data-st="lifts"]) { border: 2px dashed var(--ll-txt); }
.ll-tchev { flex: none; width: 14px; height: 14px; background: var(--ll-me); }
.ll-tslot[data-st="empty"] .ll-tchev { background: var(--ll-dim); opacity: .35; }
.ll-tcoord { font: 800 12px/1 var(--ll-mono); }
.ll-ttag { margin-left: auto; font: 800 11px/1 var(--ll-mono); letter-spacing: .04em; color: var(--ll-dim); white-space: nowrap; }
.ll-tslot:is([data-st="oldest"], [data-st="lifts"]) .ll-ttag { color: var(--ll-txt); }
.ll-ctrl { flex: none; height: 48px; display: flex; gap: 6px; align-items: stretch; }
.ll-pad { flex: none; display: flex; gap: 4px; align-items: center; }
.ll-dir { width: 44px; height: 44px; border-radius: 11px; background: var(--ll-panel2); border: var(--ll-bd) solid var(--ll-line); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: filter .12s, box-shadow .12s; color: var(--ll-txt); }
.ll-dir .ll-chev { width: 44%; height: 44%; background: var(--ll-txt); }
.ll-dir[data-st="chosen"] { background: var(--ll-me); box-shadow: 0 0 0 2px var(--ll-solid), 0 0 16px var(--ll-me); }
.ll-dir[data-st="chosen"] .ll-chev { background: var(--ll-solid); }
.ll-dir[data-st="off"] { background: var(--ll-hatch), var(--ll-panel2); border-style: dashed; opacity: .5; cursor: not-allowed; }
.ll-dir[data-st="off"] .ll-chev { background: var(--ll-dim); }
.ll-dir:active:not([data-st="off"]) { transform: translateY(1px); filter: brightness(.82); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6); }
@media (hover: hover) { .ll-dir:is([data-st="idle"], [data-st="chosen"]):hover { box-shadow: 0 0 0 2px var(--ll-txt), 0 0 14px -2px var(--ll-me); filter: brightness(1.18); } }
.ll-ccol { flex: 1 1 0; min-width: 0; display: flex; }
.ll-plan, .ll-hint { display: none; }
.ll-confirm { width: 100%; height: 48px; border-radius: 12px; background: var(--ll-btn); color: var(--ll-btnTxt); border: var(--ll-bd) solid var(--ll-line); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7); font: 900 14px var(--ll-ui); letter-spacing: .06em; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter .12s, box-shadow .12s; }
.ll-confirm:is([data-st="off"], [data-st="locked"]) { background: var(--ll-hatch), var(--ll-panel2); color: var(--ll-dim); border-style: dashed; box-shadow: none; cursor: not-allowed; }
.ll-confirm[data-st="off"] { opacity: .5; }
.ll-confirm[data-st="locked"] { opacity: .85; }
.ll-confirm[data-st="on"]:active { transform: translateY(1px); filter: brightness(.85); box-shadow: inset 0 3px 10px rgba(0, 0, 0, .55); }
@media (hover: hover) { .ll-confirm[data-st="on"]:hover { filter: brightness(1.12); box-shadow: 0 0 0 2px var(--ll-txt), 0 0 20px -4px var(--ll-me); } }

/* the end screen rows (GameEndScreen, outside the root: its own palette-free rules) */
.ll-endrows { display: flex; flex-direction: column; gap: 6px; }
.ll-endrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.ll-endrow[data-win="1"] { box-shadow: inset 0 0 0 2px currentColor; }
.ll-endnm { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.ll-endrow .ll-sym { width: 20px; height: 20px; border-radius: 6px; color: #111; }
.ll-endrow .ll-sym[data-o="0"] { background: #f2c14e; } .ll-endrow .ll-sym[data-o="1"] { background: #ef7d4a; }
.ll-endrow .ll-sym[data-o="2"] { background: #5fb4f0; } .ll-endrow .ll-sym[data-o="3"] { background: #c79cf0; }
.ll-endst { font-size: 12px; opacity: .75; }
.ll-endsc { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.ll-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

/* ── PUZZLE MODE (slice 2) — the same slots, other words; nothing here changes a box's size ─────────────── */
.ll-opt-mode { width: auto; padding: 0 14px; }
.ll-pack-total { font: 800 13px var(--ll-mono); color: var(--ll-p0); letter-spacing: .06em; }
.ll-tier { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ll-tierhd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ll-tierhd b { font-size: 15px; }
.ll-tierhd span { flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--ll-dim); }
.ll-tierhd em { font: 800 12px var(--ll-mono); color: var(--ll-dim); }
.ll-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ll-tile { height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 10px; border: 1.5px solid var(--ll-line); background: var(--ll-panel); color: var(--ll-txt); cursor: pointer; font-family: var(--ll-ui); transition: box-shadow .12s, transform .1s; }
.ll-tile[data-stars="2"] { border-color: var(--ll-p0); background: color-mix(in oklch, var(--ll-p0) 16%, transparent); }
.ll-tile[data-stars="1"] { border-style: dashed; border-color: var(--ll-p0); }
.ll-tile[data-last="1"] { box-shadow: 0 0 0 2px var(--ll-txt); }
.ll-tnum { font-size: 17px; font-weight: 800; line-height: 1; }
.ll-tstars { font-size: 11px; line-height: 1; color: var(--ll-p0); letter-spacing: .1em; }
/* an EARNED star is the gold ★, an unearned one a dim outline-weight ★ — ☆ beside ★ read the same at 11px */
.ll-tstars i[data-on="0"] { color: var(--ll-dim); opacity: .45; }
.ll-tile:active { transform: translateY(1px); }
@media (hover: hover) { .ll-tile:hover { box-shadow: 0 0 0 2px var(--ll-p0); } }

.ll-root[data-mode="puzzle"] .ll-gate, .ll-root[data-mode="puzzle"] .ll-gchip, .ll-root[data-mode="puzzle"] .ll-pips { visibility: hidden; }
/* WALLS (a bar along the shared edge of two squares) and HOLES (a pit): puzzle terrain, above the grass, under the
   leaves and walkers. A wall reads in greyscale as a light bar with a dark core; a hole as a dark disc with a rim. */
.ll-terrain { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ll-wall { position: absolute; border-radius: 3px; background: linear-gradient(90deg, #d9cdb2, #b9a98a); box-shadow: 0 0 0 1.5px #2b2418, 0 2px 4px rgba(0, 0, 0, .5); }
.ll-wall[data-dir="D"] { background: linear-gradient(180deg, #d9cdb2, #b9a98a); }
.ll-hole { position: absolute; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #000 0 48%, #1d1812 68%, #3a2f22 100%); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .9), 0 0 0 2px rgba(0, 0, 0, .35); }
.ll-hole[data-glow="1"] { box-shadow: inset 0 3px 6px rgba(0, 0, 0, .9), 0 0 0 2.5px var(--ll-spTrail), 0 0 16px var(--ll-spTrail); }
.ll-fall { z-index: 3; }
.ll-fallsp { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ll-spider); box-shadow: 0 0 0 2px var(--ll-spiderRing); }
.ll-root[data-spider="0"] .ll-spider, .ll-root[data-spider="0"] .ll-nest { visibility: hidden; }
/* a FIXED arrow (o = −1): owned by nobody — grey + hatched, no badge (the hatch reads in greyscale) */
.ll-root [data-o="-1"] { --ll-p: #a9abb2; }
.ll-arrow[data-o="-1"] { background: var(--ll-hatch), rgba(0, 0, 0, .5); }
.ll-sq[data-st="mine"] { cursor: pointer; }
@media (hover: hover) {
  .ll-sq[data-st="mine"]:hover::after { content: '⤒'; position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: 2px 4px; font-size: calc(var(--ll-c) * .3); font-weight: 900; color: var(--ll-txt); z-index: 6; }
}
.ll-root[data-mode="puzzle"] .ll-tslot[data-st="live"] { cursor: pointer; }
.ll-phase[data-kind="solved"] { background: var(--ll-p0); color: #161616; border-color: var(--ll-p0); }
.ll-phase[data-kind="failed"] { background: var(--ll-solid); color: var(--ll-txt); border: 1.5px dashed var(--ll-spTrail); }
.ll-clock[data-tog="1"] { cursor: pointer; font-size: 15px; }
.ll-bug[data-lost="1"] .ll-bbody { box-shadow: 0 0 0 2px var(--ll-spTrail), 0 0 12px var(--ll-spTrail); }
.ll-pzinfo .ll-pname { font-weight: 800; }
/* the info row's score slot holds "par N" — a label, not a 22px pile count (it clipped the name at 1280) */
.ll-pzinfo .ll-pscore { font-size: 13px; font-weight: 700; color: var(--ll-dim); min-width: 0; white-space: nowrap; }
.ll-pzinfo .ll-pname { text-overflow: ellipsis; }
.ll-pzstars { display: flex; justify-content: center; gap: 6px; font-size: 34px; line-height: 1; margin: 2px 0 6px; color: #f2c14e; }
.ll-pzreward { font-weight: 600; opacity: .9; }

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

/* ── PHONE ───────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  #ladybuglanes-game-screen.ll-playing .wrap { padding: 0 2px; max-width: none; }
  #ladybuglanes-game-screen.ll-playing .topbar { display: none; }
  #ladybuglanes-game-screen.ll-playing.ll-topbar-open .topbar { display: flex; }
  /* a square is picked and no way yet: the four buttons PULSE so the eye leaves the garden for the dock. Glow and
     colour only — no size, border or transform change (locked layout). Stops the moment a way is chosen. */
  .ll-pad[data-ask="1"] .ll-dir[data-st="idle"] { animation: ll-ask 1.1s ease-in-out infinite; }
}
@keyframes ll-ask {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 2px var(--ll-me), 0 0 14px var(--ll-me); background: color-mix(in srgb, var(--ll-me) 22%, var(--ll-panel2)); }
}
/* the mock's 360 × 740 floor — same slots, same arrangement */
@media (max-width: 370px) {
  .ll-rnum { font-size: 18px; }
  .ll-top { gap: 4px; padding: 0 5px; }
  .ll-pips { gap: 2px; }
  .ll-pip { width: 5px; height: 5px; }
  .ll-clock { width: 30px; }
  .ll-menu { width: 26px; }
  .ll-dir { width: 40px; height: 44px; }
  .ll-confirm { font-size: 13px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (the mock's 1280 × 637 less the 84px chat strip) ── */
@media (min-width: 1000px) {
  #ladybuglanes-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .ll-root {
    --ll-c: 54px; --ll-m: 16px; --ll-pad: 14px; --ll-gap: 12px;
    width: 1280px; height: 553px;
    grid-template-columns: minmax(0, 1fr) var(--ll-gt) minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr) 220px;
    grid-template-areas: "top garden feed" "players garden feed" "die garden dock";
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 26px 60px -30px #000;
  }
  .ll-ttl { display: block; }
  .ll-menu { display: none; }
  /* the top row carries the AR-M5 clock slot the mock never drew, so ROUND stacks over its number (the column
     is 355px wide: round 58 + pill + clock 46, measured to fit "▶ RUN · STEP 6/6" and "✱ SPIDER · ▲ −12") */
  .ll-top { gap: 8px; padding: 0 10px; }
  .ll-round { width: 58px; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 2px; align-items: baseline; }
  .ll-rlbl { grid-column: 1 / -1; font-size: 9px; line-height: 1; margin-bottom: 2px; }
  .ll-rnum { font-size: 24px; }
  .ll-rof { font-size: 12px; }
  .ll-phase { height: 34px; padding: 0 9px; gap: 6px; }
  .ll-phtxt { font-size: 11px; }
  .ll-pips { gap: 3px; }
  .ll-pip { width: 7px; height: 7px; }
  .ll-clock { width: 46px; height: 34px; font-size: 12px; }
  .ll-clockic { display: block; }
  .ll-players { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--ll-panel); border: var(--ll-bd) solid var(--ll-line); }
  .ll-prow { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-height: 34px; padding: 0 10px; border-radius: 10px; background: transparent; border: var(--ll-bd) solid transparent; }
  .ll-prow[data-you="1"] { background: var(--ll-panel2); border-color: var(--ll-line); }
  .ll-av { display: block; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ll-panel2); border: 1.5px dashed var(--ll-dim); }
  .ll-sym { width: 22px; height: 22px; font-size: 13px; }
  .ll-pname { flex: 1 1 0; font-size: 14px; }
  .ll-pscore { font-size: 22px; text-align: right; }
  .ll-pstat { width: 108px; height: 24px; font-size: 10.5px; }
  .ll-die { flex-direction: column; align-items: center; gap: 8px; padding: 12px; }
  .ll-compass { display: grid; grid-template-columns: 78px 64px 78px; grid-template-rows: 36px 64px 36px; grid-template-areas: ". t ." "l s r" ". b ."; gap: 6px; align-items: center; justify-items: center; }
  .ll-gchip { display: flex; width: 78px; height: 36px; align-items: center; justify-content: center; text-align: center; white-space: pre-line; font: 800 10px/1.15 var(--ll-mono); letter-spacing: .05em; border-radius: 8px; background: transparent; color: var(--ll-dim); border: 1.5px dashed var(--ll-line); }
  .ll-gchip[data-g="T"] { grid-area: t; } .ll-gchip[data-g="L"] { grid-area: l; } .ll-gchip[data-g="R"] { grid-area: r; } .ll-gchip[data-g="B"] { grid-area: b; }
  .ll-gchip[data-open="1"] { background: var(--ll-txt); color: var(--ll-solid); border: 1.5px solid var(--ll-txt); box-shadow: 0 0 14px -3px var(--ll-txt); }
  .ll-dieslot { grid-area: s; width: 64px; height: 64px; border-radius: 13px; }
  .ll-dietxt { font: 600 13px var(--ll-ui); width: 100%; }
  .ll-garden { align-self: center; }
  .ll-feed { gap: 6px; padding: 12px; }
  .ll-fline { height: 22px; }
  .ll-fr { width: 26px; font-size: 10px; }
  .ll-ft { font-size: 13px; }
  .ll-dock { gap: 10px; padding: 12px; background: var(--ll-panel); border: var(--ll-bd) solid var(--ll-line); }
  .ll-tray { height: auto; display: grid; grid-template-columns: repeat(var(--ll-hand, 3), minmax(0, 1fr)); gap: 8px; }
  .ll-root[data-mode="puzzle"] .ll-tslot { padding: 0 6px; column-gap: 5px; }
  .ll-root[data-mode="puzzle"] .ll-tchev { width: 18px; height: 18px; }
  .ll-tlbl { grid-column: 1 / -1; width: auto; font-weight: 700; letter-spacing: .12em; }
  .ll-tslot { height: 52px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; column-gap: 8px; padding: 0 10px; border-radius: 10px; }
  .ll-tchev { grid-row: 1 / 3; width: 22px; height: 22px; }
  .ll-tcoord { font-size: 14px; align-self: end; }
  .ll-ttag { margin: 0; font-size: 9px; align-self: start; overflow: hidden; }
  .ll-ctrl { height: auto; flex: 1 1 0; min-height: 0; gap: 14px; }
  .ll-pad { display: grid; grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(3, 36px); grid-template-areas: ". u ." "l . r" ". d ."; gap: 4px; align-self: center; }
  .ll-dir { width: 36px; height: 36px; border-radius: 9px; }
  .ll-dir[data-d="0"] { grid-area: u; } .ll-dir[data-d="1"] { grid-area: r; } .ll-dir[data-d="2"] { grid-area: d; } .ll-dir[data-d="3"] { grid-area: l; }
  .ll-ccol { flex-direction: column; justify-content: center; gap: 8px; }
  .ll-plan { display: block; font: 800 13px var(--ll-mono); white-space: nowrap; overflow: hidden; height: 16px; }
  .ll-confirm { height: 50px; font-size: 16px; border-radius: 13px; }
  .ll-hint { display: block; font-size: 12px; line-height: 1.3; height: 16px; color: var(--ll-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* 🥀 LLM4 (MP slice B) — a leaver's leaf WILTS: greyed and dimmed, its owner's shape kept (the owner is colourblind — the
   symbol, not the colour, says whose it was). Paint only: no size, no spacing (the locked layout). */
.ll-leaf[data-wilt="1"] .ll-leafbg { filter: grayscale(1) brightness(.55); box-shadow: 0 0 0 2.5px var(--ll-dim), 0 3px 6px rgba(0, 0, 0, .4); }
.ll-leaf[data-wilt="1"] .ll-leafsym { color: var(--ll-dim); }
.ll-leaf[data-wilt="1"] .ll-pile { border-color: var(--ll-dim); color: var(--ll-dim); }
.ll-wiltbug { position: absolute; z-index: 5; pointer-events: none; }