/* frontend/rustbuckets.css — RUST BUCKETS board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Dibs / Gulls / Thin Ice precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's VECTOR palette (docs/design/Batch6/RustBucketsV2.dc.html,
 * the `.sk-flat` block). ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD: the setup card sits outside
 * `.wg-root`. Players are SHAPE + LETTER first (circle Y, square 1, diamond 2, triangle 3, hexagon 4,
 * pentagon 5, octagon 6 — the `[data-shape]` rules), colour second; the seven colours are one lightness, so
 * in greyscale only the shapes and the letters differ, on purpose (the owner is colourblind).
 *
 * ── 🎨 THE PIXEL STYLE COMES LATER, AS A TOGGLE (mock F10) ────────────────────
 * Radii, fonts and colours are variables (`--wg-r*`, `--wg-ui`). ⛔ The seat marker's roundness is NOT one
 * of them — `.wg-mk[data-shape="circle"]` hard-codes `border-radius: 50%`, so a pixel theme that zeroes the
 * radii cannot turn the circle into a second square (the Thin Ice M3 lesson, pre-fixed here).
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * ONE DOM, two arrangements by CSS grid areas. Every row and column is a FIXED size except the two boxes
 * that are allowed to breathe (the wagon stage and the siding). SIX rival slots always exist (an unused one
 * is NO SEAT); the phone's rival ROW COUNT is fixed for the whole game by `[data-rows]` (ruling d), because
 * a player count never changes mid-game. Feedback changes colour, glow, brightness or a 1px nudge — never
 * size or spacing (house rule 2).
 *
 * ⛔ THE CHIP GEOMETRY IS SHARED WITH rustbuckets.js. `wgPack()` computes the packed height from gapX 5,
 * gapY 5 and ring 8; `.wg-chips` gap, `.wg-grp` padding and `.wg-grp` border below MUST agree with those
 * three numbers, and rustbuckets-board.test.html measures the rendered height against wgPack's answer.
 */

#rustbuckets-game-screen, .wg-root {
  --wg-bg1: oklch(.30 .012 190); --wg-bg2: oklch(.245 .012 195); --wg-bg3: oklch(.20 .012 198);
  --wg-txt: oklch(.945 .008 95); --wg-dim: oklch(.72 .006 180); --wg-dim2: oklch(.565 .006 180);
  --wg-panel: rgba(255, 255, 255, .045); --wg-panel2: rgba(255, 255, 255, .025);
  --wg-line: rgba(236, 235, 229, .12); --wg-line2: rgba(236, 235, 229, .26);
  --wg-accent: oklch(.76 .14 55); --wg-accentBg: oklch(.76 .14 55 / .14); --wg-youBg: oklch(.76 .14 55 / .055);
  --wg-accentGlow: oklch(.76 .14 55 / .5); --wg-accentInk: oklch(.22 .04 55);
  --wg-live: oklch(.82 .12 195); --wg-liveGlow: oklch(.82 .12 195 / .45);
  --wg-good: oklch(.79 .13 152); --wg-goodBg: oklch(.79 .13 152 / .14);
  --wg-bad: oklch(.72 .15 30); --wg-badBg: oklch(.72 .15 30 / .14);
  --wg-rust1: oklch(.545 .105 42); --wg-rust2: oklch(.435 .09 42); --wg-rust3: oklch(.355 .075 42);
  --wg-plate: oklch(.855 .035 88); --wg-plateInk: oklch(.235 .025 70);
  --wg-wheel: oklch(.255 .008 60); --wg-hub: oklch(.60 .006 80);
  --wg-chip: oklch(.80 .035 85); --wg-chipInk: oklch(.235 .018 75);
  --wg-chipHollow: oklch(.80 .035 85 / .13); --wg-chipLine: rgba(0, 0, 0, .35);
  --wg-coal: oklch(.375 .004 70); --wg-coalRim: rgba(255, 255, 255, .5);
  --wg-c0: oklch(.80 .13 62); --wg-c1: oklch(.80 .12 200); --wg-c2: oklch(.80 .12 150);
  --wg-c3: oklch(.80 .12 320); --wg-c4: oklch(.80 .12 255); --wg-c5: oklch(.80 .12 105); --wg-c6: oklch(.80 .12 20);
  --wg-seatInk: oklch(.20 .01 240);
  --wg-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --wg-rBox: 14px; --wg-rCard: 10px; --wg-rBtn: 9px; --wg-rChip: 6px;
}

/* ── the setup card ───────────────────────────────────────────────────────── */
.wg-setup-card { max-width: 640px; margin: 0 auto; text-align: left; }
.wg-setup-eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--wg-accent); font-weight: 800; }
.wg-setup-title { margin: 6px 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.wg-setup-blurb { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--wg-dim); }
.wg-setup-blurb b { color: var(--wg-txt); }
.wg-setup-row { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.wg-setup-lab { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--wg-dim); min-width: 74px; }
.wg-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.wg-opt {
  min-width: 46px; padding: 8px 14px; border-radius: var(--wg-rBtn); font: inherit; font-weight: 800; font-size: 14px;
  background: var(--wg-panel); color: var(--wg-txt); border: 1px solid var(--wg-line2); cursor: pointer;
  transition: filter .12s, box-shadow .12s, transform .08s;
}
.wg-opt:hover { filter: brightness(1.15); box-shadow: 0 0 0 2px var(--wg-accent); }
.wg-opt:active { transform: translateY(1px); filter: brightness(.86); }
.wg-opt[data-on="1"] { background: var(--wg-accentBg); border-color: var(--wg-accent); color: var(--wg-accent); }
.wg-setup-note {
  margin: 0 0 12px; padding: 10px 12px; border-radius: var(--wg-rCard); background: var(--wg-panel2);
  border: 1px solid var(--wg-line); font-size: 13px; line-height: 1.55; color: var(--wg-dim);
}
.wg-setup-note b { color: var(--wg-txt); }
.wg-setup-hint { margin: 0 0 18px; font-size: 12.5px; line-height: 1.55; color: var(--wg-dim2); }
.wg-setup-hint b { color: var(--wg-dim); }
.wg-start {
  width: 100%; padding: 14px; border: 0; border-radius: var(--wg-rBtn); cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 800; letter-spacing: .06em;
  background: linear-gradient(180deg, oklch(.80 .14 58), oklch(.66 .14 48)); color: var(--wg-accentInk);
  transition: filter .12s, box-shadow .12s, transform .08s;
}
.wg-start:hover { filter: brightness(1.12); box-shadow: 0 0 0 2px var(--wg-accent), 0 0 20px -6px var(--wg-accentGlow); }
.wg-start:active { transform: translateY(1px); filter: brightness(.88); }

/* ── seat markers: SHAPE + LETTER, colour last ────────────────────────────── */
.wg-mk {
  --mk: 20px;
  width: var(--mk); height: var(--mk); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  background: var(--wg-c0); color: var(--wg-seatInk); font-style: normal; position: relative;
  box-shadow: inset 0 0 0 1.2px var(--wg-seatInk);
}
.wg-mk > b { font-size: calc(var(--mk) * .56); font-weight: 900; line-height: 1; font-family: var(--wg-ui); }
.wg-mk.sm { --mk: 13px; }
.wg-mk[data-o="0"] { background: var(--wg-c0); }
.wg-mk[data-o="1"] { background: var(--wg-c1); }
.wg-mk[data-o="2"] { background: var(--wg-c2); }
.wg-mk[data-o="3"] { background: var(--wg-c3); }
.wg-mk[data-o="4"] { background: var(--wg-c4); }
.wg-mk[data-o="5"] { background: var(--wg-c5); }
.wg-mk[data-o="6"] { background: var(--wg-c6); }
/* ⛔ NOT A VARIABLE: a pixel theme that zeroes every radius must not turn the circle into a square. */
.wg-mk[data-shape="circle"] { border-radius: 50%; }
.wg-mk[data-shape="square"] { border-radius: 2px; }
.wg-mk[data-shape="diamond"] { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.wg-mk[data-shape="tri"] { clip-path: polygon(50% 4%, 100% 100%, 0 100%); }
.wg-mk[data-shape="tri"] > b { transform: translateY(15%); font-size: calc(var(--mk) * .44); }
.wg-mk[data-shape="hex"] { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.wg-mk[data-shape="pent"] { clip-path: polygon(50% 0, 100% 36%, 82% 100%, 18% 100%, 0 36%); }
.wg-mk[data-shape="oct"] { clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }

/* ── the board shell ──────────────────────────────────────────────────────── */
.wg-root {
  position: relative; display: grid; box-sizing: border-box; margin: 0 auto;
  background: radial-gradient(130% 110% at 50% -10%, var(--wg-bg1) 0%, var(--wg-bg2) 55%, var(--wg-bg3) 100%);
  color: var(--wg-txt); font-family: var(--wg-ui); font-variant-numeric: tabular-nums;
  overflow: hidden; border-radius: var(--wg-rBox);
}
.wg-root * { box-sizing: border-box; }
.wg-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wg-dim); white-space: nowrap; }
.wg-one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* head */
.wg-head { grid-area: head; display: flex; align-items: center; gap: 10px; min-width: 0; }
.wg-brand { font-size: 10px; font-weight: 900; letter-spacing: .26em; color: var(--wg-accent); white-space: nowrap; }
.wg-status {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: var(--wg-panel); border: 1px solid var(--wg-line); border-radius: var(--wg-rCard); padding: 0 12px;
}
.wg-status { height: 100%; }
.wg-status[data-k="you"], .wg-status[data-k="forced"] { box-shadow: 0 0 0 2px var(--wg-accent); }
.wg-statmk { flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.wg-status .wg-mk { --mk: 24px; }
.wg-cup { font-style: normal; font-size: 18px; }
.wg-status b { flex: 0 0 auto; width: 268px; font-size: 14px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-status[data-k="you"] b, .wg-status[data-k="forced"] b { color: var(--wg-accent); }
.wg-status[data-k="bot"] b { color: var(--wg-live); }
.wg-status[data-k="over"] b { color: var(--wg-good); }
.wg-status small { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--wg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-wagonno { flex: 0 0 auto; width: 96px; text-align: right; }
.wg-menu {
  flex: 0 0 auto; width: 34px; height: 30px; border-radius: var(--wg-rBtn); border: 1px solid var(--wg-line2);
  background: var(--wg-panel); color: var(--wg-txt); font-size: 15px; cursor: pointer;
}

/* the rival rail */
.wg-rail { grid-area: rail; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.wg-railhd { flex: 0 0 auto; }
.wg-tiles { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.wg-tile {
  flex: 1 1 0; min-height: 0; position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: 4px; padding: 7px 9px; text-align: left; font: inherit; color: inherit;
  background: var(--wg-panel); border: 1px solid var(--wg-line); border-radius: var(--wg-rCard);
  cursor: pointer; overflow: hidden; transition: filter .12s, box-shadow .12s, transform .08s;
}
.wg-tile:hover { background: rgba(255, 255, 255, .07); box-shadow: 0 0 0 1px var(--wg-line2); }
.wg-tile:active { transform: translateY(1px); filter: brightness(.88); }
.wg-tile[data-turn="1"] { box-shadow: 0 0 0 2px var(--wg-live); animation: wg-pulse 1.6s ease-in-out infinite; }
.wg-tile[data-win="1"] { box-shadow: 0 0 0 2px var(--wg-good); }
.wg-tile[data-empty="1"] {
  cursor: default; background: transparent; border-style: dashed; align-items: center; justify-content: center;
  animation: none; box-shadow: none;
}
.wg-tile[data-empty="1"]:hover { background: transparent; box-shadow: none; }
.wg-tile[data-empty="1"] .wg-lbl { color: var(--wg-dim2); }
.wg-trow { display: flex; align-items: center; gap: 7px; height: 24px; flex: 0 0 auto; }
.wg-trow .wg-mk { --mk: 20px; }
.wg-tname { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ⛔ M6 — FIXED WIDTH. A turn mark appearing must never shorten the name beside it. */
.wg-tmark { flex: 0 0 auto; width: 92px; height: 14px; display: flex; align-items: center; }
.wg-tcpl { flex: 0 0 auto; width: 84px; height: 21px; display: flex; align-items: center; justify-content: flex-end; }
/* The foot row: the squashed siding, then the bill in a fixed slot. wgSquash reads the chips box's own width. */
.wg-tfoot { display: flex; align-items: center; gap: 7px; height: 24px; flex: 0 0 auto; min-width: 0; }
.wg-tbill { margin-left: auto; flex: 0 0 auto; width: 104px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--wg-dim); white-space: nowrap; }
.wg-tbill b { font-size: 13.5px; color: var(--wg-txt); }
.wg-deciding, .wg-nextmk, .wg-lowest { font-size: 10px; font-weight: 800; letter-spacing: .09em; white-space: nowrap; }
.wg-deciding { color: var(--wg-live); }
.wg-nextmk { color: var(--wg-dim); }
.wg-lowest { color: var(--wg-good); }
.wg-dots { font-style: normal; animation: wg-think 1.1s ease-in-out infinite; }
.wg-cpl {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 21px; padding: 0 7px;
  border-radius: 999px; background: var(--wg-accentBg); border: 1px solid var(--wg-accent);
  color: var(--wg-accent); font-size: 10px; font-weight: 800; letter-spacing: .06em; white-space: nowrap;
}
.wg-tchips { flex: 1 1 auto; display: flex; align-items: center; gap: 3px; height: 24px; overflow: hidden; min-width: 0; }
.wg-gchip, .wg-gmore {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 4px;
  border-radius: var(--wg-rChip); font-weight: 800; white-space: nowrap; line-height: 1;
}
.wg-gchip { background: var(--wg-chip); color: var(--wg-chipInk); box-shadow: inset 0 -2px 0 var(--wg-chipLine); }
.wg-gchip.train { background: var(--wg-accentBg); color: var(--wg-txt); box-shadow: inset 0 0 0 1.5px var(--wg-accent); }
.wg-gmore { border: 1px dashed var(--wg-line2); color: var(--wg-dim); }
.wg-nogrp, .wg-nochips { font-size: 10px; font-weight: 700; color: var(--wg-dim2); letter-spacing: .1em; text-transform: uppercase; }

/* the decision column */
.wg-mid { grid-area: mid; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.wg-stage {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 24px; background: var(--wg-panel2); border: 1px solid var(--wg-line); border-radius: var(--wg-rBox);
}
.wg-deck { flex: 0 0 auto; width: 110px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wg-deckcards { position: relative; width: 76px; height: 92px; }
.wg-deckcard, .wg-deckghost {
  position: absolute; left: calc(var(--i, 0) * 4px); top: calc(8px - var(--i, 0) * 4px); width: 68px; height: 88px;
  border-radius: var(--wg-rChip); background: linear-gradient(160deg, oklch(.36 .012 195), oklch(.275 .012 198));
  border: 1px solid var(--wg-line2);
}
.wg-deckghost { left: 0; background: none; border: 2px dashed var(--wg-line2); }
/* ⛔ Positioned against .wg-deck (110px), not the 76px card stack centred inside it — so it is placed from the
   stack's left edge plus the FULL stack's top-card offset (layer 2: +8px). It was a fixed left: 8px, which sat
   17px left of the cards (owner playtest 2026-09-16). It is a FIXED slot on purpose: following the top card as
   the stack thins moved it 4px per layer, which the locked-layout walk rejected. */
.wg-deckn {
  position: absolute; left: calc(50% - 38px + 8px); top: 0; width: 68px; height: 88px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.wg-deck { position: relative; }
.wg-unseen { font-size: 10px; font-weight: 700; color: var(--wg-dim2); white-space: nowrap; }

/* the wagon on offer — ⛔ INERT (M7): no pointer, no hover, not a button */
.wg-wagon { position: relative; flex: 0 0 auto; width: 250px; height: 190px; pointer-events: none; }
.wg-wagon[data-gone="1"] { opacity: .35; }
.wg-heap { position: absolute; left: 20px; right: 20px; top: 0; height: 66px; }
.wg-lump {
  position: absolute; width: 27px; height: 19px; background: var(--wg-coal); border-radius: 38% 46% 40% 50%;
  box-shadow: inset 1.5px 1.5px 0 var(--wg-coalRim), 0 0 0 1px rgba(0, 0, 0, .6), 0 2px 0 rgba(0, 0, 0, .45);
  left: calc(50% + (var(--i) - (var(--k) - 1) / 2) * 28px - 13.5px + var(--r) * 3px);
  bottom: calc(var(--r) * 16px); transform: rotate(var(--rot, 0deg));
}
.wg-wbody {
  position: absolute; left: 0; right: 0; top: 45px; height: 95px; border-radius: 8px 8px 4px 4px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, var(--wg-rust1), var(--wg-rust2) 70%, var(--wg-rust3));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .12), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 3px 0 rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
}
.wg-wplate {
  width: 115px; height: 68px; display: flex; align-items: center; justify-content: center;
  background: var(--wg-plate); color: var(--wg-plateInk); border-radius: var(--wg-rChip);
  font-size: 53px; font-weight: 900; line-height: 1; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
}
.wg-hook { position: absolute; top: 85px; width: 13px; height: 7px; background: var(--wg-wheel); border-radius: 2px; }
.wg-hook.l { left: -10px; } .wg-hook.r { right: -10px; }
.wg-wheel {
  position: absolute; top: 128px; width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle, var(--wg-hub) 0 22%, var(--wg-wheel) 26%); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}
.wg-wheel.a { left: 34px; } .wg-wheel.b { right: 34px; }
.wg-coalcol { flex: 0 0 auto; width: 110px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
/* sized for "99" so the slot never changes width as the pile grows */
.wg-count { font-size: 50px; line-height: 1; width: 2.2ch; text-align: center; font-weight: 800; }
.wg-trip {
  display: flex; align-items: center; justify-content: center; gap: 5px; width: 96px; height: 26px;
  border-radius: 999px; border: 1px solid var(--wg-line2); color: var(--wg-dim);
  font-size: 11px; font-weight: 800; letter-spacing: .1em; white-space: nowrap;
}
.wg-trip[data-hot="1"] { border-color: var(--wg-accent); color: var(--wg-accent); background: var(--wg-accentBg); }

/* the preview */
.wg-prev {
  flex: 0 0 auto; height: 66px; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px;
  background: var(--wg-panel); border: 1px solid var(--wg-line); border-radius: var(--wg-rBox);
}
.wg-prevtxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wg-prevtxt b { font-size: 13.5px; font-weight: 800; }
.wg-prevtxt > span { font-size: 12px; color: var(--wg-dim); white-space: pre; }
.wg-delta {
  flex: 0 0 auto; width: 112px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--wg-rCard); font-weight: 800;
}
.wg-delta { align-items: stretch; text-align: center; }
.wg-delta b { font-size: 22px; line-height: 1; }
.wg-delta small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.wg-delta[data-k="good"] { background: var(--wg-goodBg); color: var(--wg-good); box-shadow: inset 0 0 0 1.5px var(--wg-good); }
.wg-delta[data-k="bad"] { background: var(--wg-badBg); color: var(--wg-bad); box-shadow: inset 0 0 0 1.5px var(--wg-bad); }
.wg-delta[data-k="flat"] { background: var(--wg-panel2); color: var(--wg-dim); box-shadow: inset 0 0 0 1.5px var(--wg-line2); }

/* the two buttons — always in the same place, always the same size */
.wg-btns { flex: 0 0 auto; display: flex; gap: 10px; height: 72px; }
.wg-btn {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: var(--wg-rBtn); border: 1px solid var(--wg-line2); cursor: pointer; font: inherit;
  transition: filter .12s, box-shadow .12s, transform .08s; white-space: nowrap;
}
.wg-btn b { font-size: 18px; font-weight: 800; letter-spacing: .08em; }
.wg-btn b em { font-style: normal; font-size: 15px; opacity: .85; }
.wg-btn small { width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 700; opacity: .8; }
.wg-btn.take { background: linear-gradient(180deg, oklch(.80 .14 58), oklch(.66 .14 48)); color: var(--wg-accentInk); border-color: transparent; }
.wg-btn.no { background: linear-gradient(180deg, oklch(.36 .008 190), oklch(.285 .008 195)); color: var(--wg-txt); }
.wg-btn:not(:disabled):hover { filter: brightness(1.14); box-shadow: 0 0 0 2px var(--wg-accent), 0 0 18px -4px var(--wg-accentGlow); }
.wg-btn:not(:disabled):active { transform: translateY(1px); filter: brightness(.84); box-shadow: inset 0 2px 7px rgba(0, 0, 0, .5); }
.wg-btn[data-forced="1"]:not(:disabled) { animation: wg-force 1.4s ease-in-out infinite; }
/* ⛔ NOT ALLOWED looks DIFFERENT — dashed, hatched, desaturated, not-allowed cursor. Never hidden. */
.wg-btn:disabled {
  cursor: not-allowed; filter: saturate(.15); opacity: .55; color: var(--wg-dim);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 6px, rgba(255, 255, 255, 0) 6px 12px), var(--wg-panel2);
  border: 1px dashed var(--wg-line2); box-shadow: none; transform: none; animation: none;
}

/* your siding + the yard log */
.wg-right { grid-area: right; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.wg-siding {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  background: var(--wg-panel); border: 1px solid var(--wg-line); border-radius: var(--wg-rBox);
}
.wg-root[data-turn="you"] .wg-siding { background: var(--wg-youBg); }
.wg-shead { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 22px; }
.wg-shead .wg-lbl { color: var(--wg-txt); font-size: 11px; }
.wg-scoal { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.wg-scoal .wg-lump { position: static; width: 15px; height: 11px; }
/* ⛔ A FIXED width, not a min-width: 2ch held "11" but a wider pair of digits grew it 1px and moved "coal" beside it —
   the locked-layout walk caught it only when the random game happened to cross those numbers (found 2026-09-16). */
.wg-scoal b { flex: 0 0 auto; width: 2.6ch; text-align: right; }
.wg-sbill { flex: 0 0 auto; height: 18px; font-size: 12px; color: var(--wg-dim); white-space: nowrap; overflow: hidden; }
.wg-sbill b { font-size: 15px; color: var(--wg-txt); }
/* ⛔ GEOMETRY SHARED WITH wgPack(): gap 5px, .wg-grp padding 2px + 2px border = ring 8, chip gap 2px. */
.wg-chips { flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; overflow: hidden; }
.wg-grp {
  display: inline-flex; flex-wrap: wrap; align-content: flex-start; gap: 2px; padding: 2px; flex: 0 0 auto;
  border: 2px solid transparent; border-radius: calc(var(--wg-rChip) + 3px);
}
.wg-grp.train { border-color: var(--wg-accent); background: var(--wg-accentBg); }
/* ruling (e) — a train wider than the box takes a whole line and wraps INSIDE its own ring */
.wg-grp.wrap { flex: 0 0 100%; }
.wg-grp.glow { animation: wg-glow 1.4s ease-in-out infinite; }
/* ⛔ M7 — a siding chip is INERT: a span, no pointer, no hover rule anywhere in this file. */
.wg-chip {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: var(--wg-rChip);
  background: var(--wg-chip); color: var(--wg-chipInk); font-weight: 800; line-height: 1;
  box-shadow: inset 0 -3px 0 var(--wg-chipLine);
}
.wg-chip.free { background: var(--wg-chipHollow); color: var(--wg-chip); box-shadow: inset 0 0 0 1.5px var(--wg-chip); }
.wg-chip.fresh { outline: 2px solid var(--wg-txt); outline-offset: 1px; }
.wg-log {
  flex: 0 0 auto; display: flex; flex-direction: column; padding: 7px 12px;
  background: var(--wg-panel); border: 1px solid var(--wg-line); border-radius: var(--wg-rBox);
}
.wg-log > .wg-lbl { height: 18px; display: flex; align-items: center; }
/* M9 — TEN rows, each a fixed height, so the panel never grows or shrinks */
.wg-logrow { height: 19px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--wg-dim); white-space: nowrap; overflow: hidden; }
.wg-logrow[data-top="1"] { color: var(--wg-txt); }
.wg-logrow span { overflow: hidden; text-overflow: ellipsis; }

.wg-feed { grid-area: feed; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11.5px; color: var(--wg-dim); }
.wg-feed small { font-size: 9px; letter-spacing: .18em; color: var(--wg-dim2); flex: 0 0 auto; }
.wg-feed b { color: var(--wg-txt); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-feed span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .7; }

/* ── screen-level siblings: flights, the sheet, the hand-off ──────────────── */
/* ⛔ These sit on .wg-root, not inside a panel — a clipped arc is the bug they exist to avoid. */
.wg-fx { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 40; }
.wg-fly { position: absolute; animation: wg-flyx .62s cubic-bezier(.3, .7, .3, 1) forwards; }
.wg-fly > i { display: block; animation: wg-flyy .62s cubic-bezier(.3, .4, .5, 1) forwards; }
.wg-flywag {
  display: flex; align-items: center; justify-content: center; width: 46px; height: 40px; border-radius: var(--wg-rChip);
  background: var(--wg-chip); color: var(--wg-chipInk); font-size: 20px; font-weight: 900; box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
}
.wg-flylump { position: static; display: block; width: 16px; height: 12px; }
.wg-clank {
  position: absolute; display: flex; align-items: center; padding: 3px 8px; border-radius: 999px;
  background: var(--wg-txt); color: var(--wg-seatInk); font-size: 11px; font-weight: 900; letter-spacing: .12em;
  animation: wg-clank .9s ease-out .3s both;
}
.wg-scrim { position: absolute; inset: 0; background: rgba(6, 8, 9, .62); z-index: 45; }
.wg-scrim[data-on="0"] { display: none; }
.wg-sheet {
  position: absolute; z-index: 46; background: oklch(.245 .012 197); border: 1px solid var(--wg-line2);
  color: var(--wg-txt); box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, .9);
  display: flex; flex-direction: column; gap: 8px; padding: 12px 16px;
}
.wg-sheet[data-on="0"] { display: none; }
.wg-sheethd { display: flex; align-items: center; gap: 8px; height: 34px; flex: 0 0 auto; }
.wg-sheethd .wg-mk { --mk: 22px; }
.wg-sheethd b { font-size: 15px; font-weight: 800; }
.wg-x {
  margin-left: auto; width: 44px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--wg-rBtn); border: 1px solid var(--wg-line2); background: var(--wg-panel);
  color: var(--wg-txt); font: inherit; font-size: 15px; cursor: pointer; transition: box-shadow .12s, transform .08s, filter .12s;
}
.wg-x:hover { box-shadow: 0 0 0 2px var(--wg-accent); }
.wg-x:active { transform: translateY(1px); filter: brightness(.85); }
.wg-sheetsub { flex: 0 0 auto; font-size: 11.5px; color: var(--wg-dim); white-space: nowrap; }
.wg-sheet .wg-chips { flex: 1 1 auto; }
.wg-sheetfoot { flex: 0 0 auto; height: 22px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--wg-dim); }
.wg-sheetfoot[data-on="1"] { color: var(--wg-accent); }
.wg-handoff {
  position: absolute; z-index: 48; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px;
  background: oklch(.245 .012 197); border: 1px solid var(--wg-line2); border-radius: var(--wg-rBox);
  box-shadow: 0 22px 60px -20px rgba(0, 0, 0, .9); animation: wg-rise .35s ease-out both;
}
.wg-handoff[data-on="0"] { display: none; }
.wg-hrows { display: flex; flex-direction: column; gap: 2px; }
.wg-hrow { display: flex; align-items: center; gap: 8px; height: 24px; font-size: 13px; }
.wg-hrow .wg-mk { --mk: 17px; }
.wg-hnm { width: 52px; font-weight: 800; }
.wg-hsub { color: var(--wg-dim); width: 132px; white-space: nowrap; }
.wg-hbill { width: 32px; text-align: right; }
.wg-hwin { margin-left: auto; color: var(--wg-good); font-weight: 800; font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; }
.wg-see { margin-top: auto; height: 42px; flex: 0 0 auto; flex-direction: row; }

/* end screen rows */
.wg-endrows { display: flex; flex-direction: column; gap: 4px; }
.wg-endrow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--wg-rCard); background: rgba(255, 255, 255, .04); }
.wg-endrow[data-win="1"] { box-shadow: inset 0 0 0 1.5px var(--wg-good); }
.wg-endnm { display: flex; align-items: center; gap: 7px; font-weight: 800; flex: 1 1 auto; }
.wg-endnm .wg-mk { --mk: 17px; }
.wg-endst { color: var(--wg-dim); font-size: 12px; white-space: nowrap; }
.wg-endsc { font-weight: 800; min-width: 40px; text-align: right; }
.wg-endnote { margin-top: 8px; font-size: 11.5px; color: var(--wg-dim2); }

@keyframes wg-think { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes wg-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--wg-live), 0 0 6px -2px var(--wg-liveGlow); }
  50% { box-shadow: 0 0 0 2px var(--wg-live), 0 0 22px 1px var(--wg-liveGlow); }
}
@keyframes wg-force {
  0%, 100% { box-shadow: 0 0 0 2px var(--wg-accent), 0 0 8px -2px var(--wg-accentGlow); }
  50% { box-shadow: 0 0 0 2px var(--wg-accent), 0 0 26px 2px var(--wg-accentGlow); }
}
@keyframes wg-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--wg-accent); }
  50% { box-shadow: 0 0 0 2px var(--wg-accent), 0 0 18px 2px var(--wg-accentGlow); }
}
@keyframes wg-flyx { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(var(--dx)); opacity: 0; } }
@keyframes wg-flyy { 0% { transform: translateY(0); } 45% { transform: translateY(var(--arc)); } 100% { transform: translateY(var(--dy)); } }
@keyframes wg-clank { 0% { transform: scale(.4); opacity: 0; } 30% { transform: scale(1.15); opacity: 1; } 65% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes wg-rise { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .wg-tile[data-turn="1"], .wg-btn[data-forced="1"], .wg-grp.glow, .wg-dots, .wg-handoff { animation: none; }
}

/* ── 🌐 MP (rustbuckets_mp.js on the same board) ──────────────────────────────
   ⛔ Nothing here takes space: the clock is an ABSOLUTE strip on the head's bottom edge, a leaver's tile keeps
   its size and only dims, and a scrolling name lives inside the slot that already clipped it (locked layout). */
.wg-head { position: relative; }
.wg-clock {
  position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px; pointer-events: none;
  background: var(--wg-live); transform-origin: left center; transform: scaleX(0); opacity: 0; transition: opacity .2s;
}
.wg-clock[data-on="1"] { opacity: .85; }
.wg-clock[data-mine="1"] { background: var(--wg-accent); }
.wg-clock[data-low="1"] { background: var(--wg-bad, #e0664f); }
.wg-tile[data-left="1"] { opacity: .5; }
.wg-leftmk { font-size: 10px; font-weight: 800; letter-spacing: .09em; white-space: nowrap; color: var(--wg-dim); }
/* ⭐ The name marquee (wgMarquee): two copies with a gap, the pair slid by exactly one copy, so the loop is seamless. */
.wg-nm.wg-marq-on { text-overflow: clip; }
.wg-marq { display: inline-flex; white-space: nowrap; animation: wg-marq var(--wg-marq-dur, 8s) linear 1.2s infinite; }
.wg-marq > span { padding-right: 22px; }
.wg-hnm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 0 0 auto; }
/* A flex item will not shrink below its content without min-width 0 — and then it never overflows, so it never
   scrolls: it pushes the fixed turn-mark slot out of the tile instead (a solo name is never long enough to show it). */
.wg-tname { min-width: 0; }
.wg-sheethd b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@keyframes wg-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wg-marq { animation: none; } }

/* ══ DESKTOP — ONE fixed box, 1280 × 553 ══════════════════════════════════════
 * ⛔ A MEASUREMENT IN THREE COPIES: here, WG_FIT_W / WG_FIT_H in rustbuckets.js, and board-fit.js.
 * rustbuckets-board.test.html asserts all three agree. 553 = the mock's 637 less its 84px chat strip.
 */
@media (min-width: 1000px) {
  #rustbuckets-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .wg-root {
    width: 1280px; height: 553px; padding: 14px;
    grid-template-columns: 322px minmax(0, 1fr) 300px;
    grid-template-rows: 48px minmax(0, 1fr) 20px;
    grid-template-areas: "head head head" "rail mid right" "feed feed feed";
    column-gap: 12px; row-gap: 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 26px 60px -30px #000;
  }
  .wg-head { grid-area: head; }
  .wg-menu { display: none; }
  .wg-log { height: 224px; }
  /* the sheet becomes a card over the stage (ruling a: the same markup on both layouts) */
  .wg-sheet { left: 348px; top: 92px; width: 420px; height: 300px; border-radius: var(--wg-rBox); }
  .wg-scrim { display: none !important; }
  .wg-handoff { left: 441px; top: 84px; width: 420px; height: 252px; }
}

/* ══ PHONE — a column that runs unscaled, 384 × 812 and 360 × 740 ═══════════ */
@media (max-width: 999px) {
  /* ⛔ No .wrap padding BELOW the column (2026-09-28): it sat under the fold, past the chat strip's 84px, and
     ran the page 20px past the viewport — a phantom scroll, and in a pane whose scrollbar takes width, a 15px
     narrower column that cut COAL ON IT / TRIP off the stage. wgFitPhone also counts it now, should it return. */
  #rustbuckets-game-screen .wrap { padding-bottom: 0; }
  .wg-root {
    width: 100%; height: var(--wg-phone-h, 694px); padding: 10px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 32px auto 152px 54px 56px minmax(0, 1fr) 18px;
    grid-template-areas: "head" "rail" "mid" "prev" "btns" "right" "feed";
    row-gap: 6px; border-radius: 12px;
  }
  /* ⭐ The phone splits the decision column into three grid rows, so the stage cannot squeeze the
     buttons: the DOM is the same, the areas differ. */
  .wg-mid { display: contents; }
  .wg-stage { grid-area: mid; padding: 0 10px; }
  .wg-prev { grid-area: prev; height: auto; padding: 5px 6px 5px 9px; gap: 6px; }
  .wg-btns { grid-area: btns; height: 56px; }
  .wg-brand, .wg-wagonno { display: none; }
  .wg-status { padding: 0 8px; gap: 7px; }
  .wg-statmk { width: 20px; height: 20px; }
  .wg-status .wg-mk { --mk: 20px; }
  .wg-status b { width: 176px; font-size: 12.5px; }
  .wg-status small { display: none; }
  .wg-railhd { display: none; }
  /* ruling (d) — the row count is fixed for the whole game: one row at 3–4, two at 5–7 */
  .wg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .wg-root[data-rows="1"] .wg-tiles { grid-template-rows: 60px; }
  .wg-root[data-rows="2"] .wg-tiles { grid-template-rows: 60px 60px; }
  .wg-root[data-rows="1"] .wg-tile:nth-child(n + 4) { display: none; }
  .wg-tile { padding: 5px 6px; gap: 2px; }
  /* ⛔ THE PHONE TILE IS A FIXED 3-ROW GRID. As one wrapping flex row (mark · name · turn · CPL · bill) it
     needed 86px of an 81px tile at 360, so the CPL badge wrapped onto a line of its own and pushed the chips
     row to 59–77px of a 60px tile — every rival siding was below the tile's bottom edge on a phone.
     Row 1: mark · name · turn mark. Row 2: bill · CPL. Row 3: the squashed siding. 16 + 14 + 18 = 48 = the
     inner height of a 60px tile. rustbuckets-board.test.html measures every slot inside its tile. */
  .wg-tile:not([data-empty]) {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 16px 14px 18px;
    column-gap: 4px; row-gap: 0; align-items: center; align-content: start;
  }
  .wg-tile:not([data-empty]) .wg-trow, .wg-tile:not([data-empty]) .wg-tfoot { display: contents; }
  .wg-trow .wg-mk { grid-column: 1; grid-row: 1; }
  .wg-tname { grid-column: 2; grid-row: 1; min-width: 0; }
  .wg-tmark { grid-column: 3; grid-row: 1; }
  .wg-tbill { grid-column: 1 / 3; grid-row: 2; }
  .wg-tcpl { grid-column: 3; grid-row: 2; }
  .wg-tchips { grid-column: 1 / 4; grid-row: 3; }
  .wg-trow { height: 16px; gap: 4px; }
  .wg-trow .wg-mk { --mk: 15px; }
  .wg-tname { font-size: 10.5px; }
  /* M2/M6 — on the phone the mark is a single glyph in a 12px slot, and the CHAIN badge takes the
     place the bot tag used to have, so "does the next player want this?" survives the narrow tile. */
  .wg-tmark { width: 12px; height: 12px; justify-content: center; }
  .wg-deciding, .wg-nextmk { font-size: 10px; }
  .wg-deciding b, .wg-nextmk b, .wg-tmark .wg-dots { display: none; }
  .wg-tcpl { width: 22px; height: 14px; margin-left: 0; }
  .wg-cpl { width: 22px; height: 14px; padding: 0; }
  .wg-cpl b { display: none; }
  .wg-tbill { width: auto; margin-left: 0; font-size: 9.5px; text-align: left; height: 12px; line-height: 12px; }
  .wg-tchips { height: 18px; }
  /* ⛔ The stage row must fit its box: deck + wagon + coal column + gaps was 322px of a 294px stage at 384
     (and 304 of 274 at 360), so "COAL ON IT" and the TRIP pill were cut off at the stage edge. */
  .wg-stage { gap: 4px; }
  .wg-stage .wg-deck { width: 58px; }
  .wg-coalcol .wg-lbl { font-size: 8.5px; letter-spacing: .06em; }
  .wg-deckcards { width: 46px; height: 56px; }
  .wg-deckcard, .wg-deckghost { width: 40px; height: 52px; }
  .wg-deckn { left: calc(50% - 23px + 8px); width: 40px; height: 52px; font-size: 17px; }
  .wg-unseen, .wg-deck .wg-lbl { font-size: 8.5px; }
  .wg-wagon { width: 168px; height: 138px; }
  .wg-heap { left: 14px; right: 14px; height: 48px; }
  .wg-lump { width: 19px; height: 14px; left: calc(50% + (var(--i) - (var(--k) - 1) / 2) * 20px - 9.5px + var(--r) * 2px); bottom: calc(var(--r) * 11px); }
  .wg-wbody { top: 32px; height: 70px; }
  .wg-wplate { width: 84px; height: 50px; font-size: 39px; }
  .wg-hook { top: 62px; } .wg-wheel { top: 92px; width: 24px; height: 24px; }
  .wg-wheel.a { left: 22px; } .wg-wheel.b { right: 22px; }
  .wg-coalcol { width: 60px; gap: 4px; }
  .wg-count { font-size: 34px; }
  .wg-trip { width: 58px; height: 20px; font-size: 9px; }
  .wg-prevtxt b { font-size: 11.5px; }
  .wg-prevtxt > span { font-size: 9.5px; white-space: nowrap; }
  .wg-delta { width: 64px; height: 42px; }
  .wg-delta b { font-size: 17px; }
  .wg-delta small { font-size: 8px; }
  .wg-btn b { font-size: 14px; }
  .wg-btn b em { font-size: 12px; }
  .wg-btn small { font-size: 9.5px; }
  .wg-right { gap: 0; }
  .wg-log { display: none; }
  .wg-siding { padding: 6px 8px; }
  .wg-shead { height: 20px; gap: 6px; }
  .wg-shead .wg-lbl { font-size: 9px; }
  .wg-sbill { font-size: 10.5px; height: 16px; }
  .wg-feed { font-size: 10px; }
  .wg-feed span { display: none; }
  /* the full-siding sheet is a bottom sheet; it stops at the board's edge so the chat bar stays visible */
  .wg-sheet { left: 0; right: 0; bottom: 0; height: 262px; border-radius: var(--wg-rBox) var(--wg-rBox) 0 0; }
  .wg-handoff { left: 20px; right: 20px; top: 96px; height: 236px; }
  .wg-hsub { width: 104px; font-size: 11px; }
}
@media (max-width: 375px) {
  .wg-root { padding: 8px; row-gap: 5px; grid-template-rows: 30px auto 136px 50px 50px minmax(0, 1fr) 18px; }
  .wg-wagon { width: 144px; height: 124px; }
  .wg-wplate { width: 76px; height: 44px; font-size: 34px; }
  .wg-status b { width: 160px; font-size: 11.5px; }
  .wg-count { font-size: 30px; }
  .wg-tname { font-size: 10px; }
}

/* ── the rules card (index.html #rustbuckets-rules-overlay) ─────────────────────────────────────────────────
   Owner playtest 2026-09-16: the card grew a "Playing it well" section, so it now scrolls on most screens.
   The BODY scrolls and "Got it" stays pinned below it; while there is more below, the text fades out at the
   bottom and a small down arrow sits at the right. Both go at the end (wgRulesMoreState sets data-more). */
#rustbuckets-rules-overlay .wg-rules-card { display: flex; flex-direction: column; overflow: hidden; }
#rustbuckets-rules-overlay .wg-rules-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#rustbuckets-rules-overlay .wg-rules-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
#rustbuckets-rules-overlay .wg-rules-scroll[data-more="1"] {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
}
#rustbuckets-rules-overlay .wg-rules-more {
  position: absolute; right: 18px; bottom: 6px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0;
  font: inherit; font-size: 18px; line-height: 1; color: #ddd; cursor: pointer;
  background: rgba(40, 44, 44, .92); border: 1px solid #555; box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transition: opacity .18s, visibility 0s linear .18s;
}
#rustbuckets-rules-overlay .wg-rules-scroll[data-more="1"] + .wg-rules-more {
  opacity: 1; visibility: visible; transition: opacity .18s; animation: wg-rules-bob 1.6s ease-in-out infinite;
}
#rustbuckets-rules-overlay .wg-rules-more:hover { background: rgba(60, 66, 66, .95); }
@keyframes wg-rules-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
#rustbuckets-rules-overlay .wg-rules-tips { margin-top: 14px; }
#rustbuckets-rules-overlay .wg-rules-tips h3 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #bbb; margin: 0 0 6px; }
#rustbuckets-rules-overlay .wg-rules-tips ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.45; color: #ccc; }
#rustbuckets-rules-overlay .wg-rules-tips li + li { margin-top: 5px; }
#rustbuckets-rules-overlay .wg-rules-note { font-size: 12px; color: #888; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  #rustbuckets-rules-overlay .wg-rules-scroll[data-more="1"] + .wg-rules-more { animation: none; }
}