@font-face {
  font-family: "Anybody";
  src: url("/fonts/Anybody-VF.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/SchibstedGrotesk-VF.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --crude: #0c0a08;
  --tar: #16120e;
  --tar-2: #211a14;
  --rule: #3b3026;
  --bone: #f4ead5;
  --bone-2: #bdb09a;
  --gold: #f4b83a;
  --flare: #ff5d2e;
  --oxblood: #8f2e1e;
  /* Oxblood lifted for text: 5.9:1 on tar, 6.2:1 on crude. The world draws the rival in oxblood. */
  --oxblood-lit: #d87464;
  /* Shades of the two accents, used only for pressed depth and plinths. */
  --gold-lit: #f8c862;
  --gold-deep: #a8741c;
  --gold-press: #e2a52c;
  /* The arcade controls: the mural's vermilion, acid green, dusty blue and deep teal, each with
     a lit rim, a hover face and a dark skirt. */
  --verm: #f45b25; --verm-lit: #f8b793; --verm-hover: #f6895c; --verm-press: #c8441e; --verm-deep: #8e2f17;
  --acid: #94be61; --acid-lit: #c2db8e; --acid-deep: #386632;
  --dusty: #6f9dab; --dusty-lit: #c3dbe0; --dusty-hover: #8db5c1; --dusty-deep: #2f5866;
  --teal: #0d2a28; --teal-lit: #285a46;
  /* The cabinet's walnut (the bezel's own ramp), its brass, and the cream of the gauge face. */
  --wood-0: #2a170d; --wood-1: #43261a; --wood-2: #5e3823; --wood-3: #7b4b2e; --wood-4: #9c6640;
  --brass: #a97c2c; --brass-0: #5e4119; --brass-lit: #fbdd95;
  --cream: #f6e9d5; --cream-shade: #b49a74; --deck: #1b110b;
  --mast-h: 66px;
  /* Pixel art for CSS borders, nine-sliced: eight arcade caps (ring, lit rim, face, skirt; slice 2 2 3 2)
     and the riveted walnut plate (slice 4). One art pixel is --a (caps) or --pa (plates) device px. */
  --cap-verm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='6' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%23F8B793'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='2' width='6' height='1' fill='%23F45B25'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%23F45B25'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='4' width='6' height='1' fill='%238E2F17'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='5' width='6' height='1' fill='%238E2F17'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%230C0A08'/%3E%3C/svg%3E");
  --cap-dusty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='6' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%23C3DBE0'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='2' width='6' height='1' fill='%236F9DAB'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%236F9DAB'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='4' width='6' height='1' fill='%232F5866'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='5' width='6' height='1' fill='%232F5866'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%230C0A08'/%3E%3C/svg%3E");
  --cap-acid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='6' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%23C2DB8E'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='2' width='6' height='1' fill='%2394BE61'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%2394BE61'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='4' width='6' height='1' fill='%23386632'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='5' width='6' height='1' fill='%23386632'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%230C0A08'/%3E%3C/svg%3E");
  --cap-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='6' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%23285A46'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='2' width='6' height='1' fill='%230D2A28'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%230D2A28'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='4' width='8' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='5' width='8' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%230C0A08'/%3E%3C/svg%3E");
  --cap-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='6' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%23F8C862'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='2' width='6' height='1' fill='%23F4B83A'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%23F4B83A'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='4' width='6' height='1' fill='%23A8741C'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='5' width='6' height='1' fill='%23A8741C'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%230C0A08'/%3E%3C/svg%3E");
  --cap-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='6' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%23FFFBF2'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='2' width='6' height='1' fill='%23F6E9D5'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%23F6E9D5'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='4' width='6' height='1' fill='%23B49A74'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='5' width='6' height='1' fill='%23B49A74'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%230C0A08'/%3E%3C/svg%3E");
  --cap-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='6' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%239C6640'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='2' width='6' height='1' fill='%235E3823'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%235E3823'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='4' width='6' height='1' fill='%232A170D'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='5' width='6' height='1' fill='%232A170D'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%230C0A08'/%3E%3C/svg%3E");
  --cap-dead: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='6' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%233B3026'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='2' width='6' height='1' fill='%23211A14'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%23211A14'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='4' width='8' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='5' width='8' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%230C0A08'/%3E%3C/svg%3E");
  --plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='10' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23FBDD95'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23A97C2C'/%3E%3Crect x='3' y='1' width='6' height='1' fill='%239C6640'/%3E%3Crect x='9' y='1' width='1' height='1' fill='%23FBDD95'/%3E%3Crect x='10' y='1' width='1' height='1' fill='%23A97C2C'/%3E%3Crect x='11' y='1' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23A97C2C'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%235E4119'/%3E%3Crect x='3' y='2' width='6' height='1' fill='%237B4B2E'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%23A97C2C'/%3E%3Crect x='10' y='2' width='1' height='1' fill='%235E4119'/%3E%3Crect x='11' y='2' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%239C6640'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%237B4B2E'/%3E%3Crect x='3' y='3' width='6' height='1' fill='%232A170D'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%235E3823'/%3E%3Crect x='10' y='3' width='1' height='1' fill='%2343261A'/%3E%3Crect x='11' y='3' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%239C6640'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%237B4B2E'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%232A170D'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%237B4B2E'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%235E3823'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%2343261A'/%3E%3Crect x='11' y='4' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%239C6640'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%237B4B2E'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%232A170D'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%237B4B2E'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%235E3823'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%2343261A'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%239C6640'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%237B4B2E'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%232A170D'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%237B4B2E'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%235E3823'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%2343261A'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%239C6640'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%237B4B2E'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%232A170D'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%237B4B2E'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%235E3823'/%3E%3Crect x='10' y='7' width='1' height='1' fill='%2343261A'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%239C6640'/%3E%3Crect x='2' y='8' width='7' height='1' fill='%237B4B2E'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%235E3823'/%3E%3Crect x='10' y='8' width='1' height='1' fill='%2343261A'/%3E%3Crect x='11' y='8' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%23FBDD95'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%23A97C2C'/%3E%3Crect x='3' y='9' width='6' height='1' fill='%235E3823'/%3E%3Crect x='9' y='9' width='1' height='1' fill='%23FBDD95'/%3E%3Crect x='10' y='9' width='1' height='1' fill='%23A97C2C'/%3E%3Crect x='11' y='9' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%23A97C2C'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%235E4119'/%3E%3Crect x='3' y='10' width='6' height='1' fill='%2343261A'/%3E%3Crect x='9' y='10' width='1' height='1' fill='%23A97C2C'/%3E%3Crect x='10' y='10' width='1' height='1' fill='%235E4119'/%3E%3Crect x='11' y='10' width='1' height='1' fill='%230C0A08'/%3E%3Crect x='1' y='11' width='10' height='1' fill='%230C0A08'/%3E%3C/svg%3E");
  --text: "Schibsted Grotesk", system-ui, sans-serif;
  --display: "Anybody", "Schibsted Grotesk", sans-serif;
  --pad: 28px;
  --ledger: 384px;
  --gap: 28px;
  --warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath fill-rule='evenodd' d='M9 0 18 16H0L9 0Zm-1 5v6h2V5H8Zm0 7v2h2v-2H8Z'/%3E%3C/svg%3E");
  --drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 0 1.5 7.2A5.6 5.6 0 0 0 6 16a5.6 5.6 0 0 0 4.5-8.8L6 0Z'/%3E%3C/svg%3E");
}

/* ── Base ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { background: conic-gradient(rgb(246 233 213 / 2.4%) 25%, transparent 0 50%, rgb(246 233 213 / 2.4%) 0 75%, transparent 0) 0 0 / 8px 8px, var(--crude); scrollbar-color: var(--rule) var(--crude); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: relative; margin: 0; min-height: 100dvh; color: var(--bone); font: 400 15px/1.5 var(--text); font-synthesis: none; -webkit-font-smoothing: antialiased; caret-color: var(--gold); }
::selection { background: var(--gold); color: var(--crude); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--crude); }
::-webkit-scrollbar-thumb { background: var(--rule); border: 2px solid var(--crude); }
button, input, select { font: inherit; color: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
strong, b { font-weight: 700; }
svg { display: block; width: 24px; height: 24px; flex: 0 0 auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
a { color: var(--bone); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--gold); }

.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.skip-link { position: fixed; z-index: 60; top: -80px; left: 12px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--gold); color: var(--crude); font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 12px; }
.eyebrow { display: block; color: var(--bone-2); font: 700 11px/1.25 var(--text); letter-spacing: .16em; text-transform: uppercase; }
.pixel-art { shape-rendering: crispEdges; image-rendering: pixelated; }

/* ── Controls ───────────────────────────────────────────────────────────── */
/* Plain buttons are flat walnut. Every real control is a pixel cap: a crude ring with notched
   corners, a lit rim, a face and a dark skirt, nine-sliced from the --cap-* art (one art pixel is
   --a). Hover brightens the cap; a press drops it a pixel into its skirt. */
button, .primary-button, .secondary-button {
  min-width: 44px; min-height: 44px; padding: 10px 16px;
  border: 2px solid var(--crude); border-radius: 0;
  background: var(--wood-2); color: var(--bone);
  font-weight: 700; line-height: 1.2;
}
button:hover:not(:disabled) { filter: brightness(1.14); }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
button:disabled { color: var(--bone-2); }
:where(.primary-button, .secondary-button, .account-button, .browser-button, .primary-nav button, .share-button, .upgrade-buy, .status-rank, .upgrade-ready, .card-ready, .group-tab, .cards-button, .pick-card, .sheet-close, .embed-toolbar > button, .embed-upgrade button, .ranking-tabs button, .side-tabs button, .tab-bar button, .tailor-tab, .wardrobe-buy, .notice-page .notice-action) {
  --a: 2px; --cap-img: var(--cap-wood); --cap-face: var(--wood-2); --cap-ink: var(--bone);
}
:is(.primary-button, .secondary-button, .account-button, .browser-button, .primary-nav button, .share-button, .upgrade-buy, .status-rank, .upgrade-ready, .card-ready, .group-tab, .cards-button, .pick-card, .sheet-close, .embed-toolbar > button, .embed-upgrade button, .ranking-tabs button, .side-tabs button, .tab-bar button, .tailor-tab, .wardrobe-buy, .notice-page .notice-action) {
  border: solid transparent; border-width: calc(2 * var(--a)) calc(2 * var(--a)) calc(3 * var(--a));
  border-image: var(--cap-img) 2 2 3 2 stretch;
  background: var(--cap-face) padding-box; color: var(--cap-ink); box-shadow: none;
}
:is(.primary-button, .secondary-button, .account-button, .browser-button, .primary-nav button, .share-button, .upgrade-buy, .status-rank, .upgrade-ready, .card-ready, .group-tab, .cards-button, .pick-card, .sheet-close, .embed-toolbar > button, .embed-upgrade button, .ranking-tabs button, .side-tabs button, .tab-bar button, .tailor-tab, .wardrobe-buy, .notice-page .notice-action):hover:not(:disabled):not([aria-disabled="true"]) { color: var(--cap-ink); filter: brightness(1.12); }
:is(.primary-button, .secondary-button, .account-button, .browser-button, .primary-nav button, .share-button, .upgrade-buy, .status-rank, .upgrade-ready, .card-ready, .group-tab, .cards-button, .pick-card, .sheet-close, .embed-toolbar > button, .embed-upgrade button, .ranking-tabs button, .side-tabs button, .tab-bar button, .tailor-tab, .wardrobe-buy, .notice-page .notice-action):active:not(:disabled):not([aria-disabled="true"]) { translate: 0 var(--a); filter: brightness(.94); }
.primary-button, .notice-page .notice-action { --cap-img: var(--cap-verm); --cap-face: var(--verm); --cap-ink: var(--crude); }
.secondary-button, .share-button { --cap-img: var(--cap-dusty); --cap-face: var(--dusty); --cap-ink: var(--crude); }
.account-button { --cap-img: var(--cap-cream); --cap-face: var(--cream); --cap-ink: var(--wood-0); }
.ranking-tabs button[aria-pressed="true"], .side-tabs button[aria-pressed="true"], .tab-bar button[aria-current="true"], .tailor-tab[aria-selected="true"] { --cap-img: var(--cap-teal); --cap-face: var(--teal); --cap-ink: var(--gold); }
:is(.primary-button, .secondary-button, .account-button, .browser-button, .primary-nav button, .share-button, .upgrade-buy, .status-rank, .upgrade-ready, .card-ready, .group-tab, .cards-button, .pick-card, .sheet-close, .embed-toolbar > button, .embed-upgrade button, .ranking-tabs button, .side-tabs button, .tab-bar button, .tailor-tab, .wardrobe-buy, .notice-page .notice-action):is(:disabled, [aria-disabled="true"]) { --cap-img: var(--cap-dead); --cap-face: #211a14; --cap-ink: var(--bone-2); filter: none; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 4px; background: transparent; border-color: transparent; color: var(--gold); }
.text-button:hover:not(:disabled) { filter: none; text-decoration: underline; text-underline-offset: 4px; }
.text-button svg { width: 16px; height: 16px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 44px; background: transparent; border-color: transparent; }
.icon-button svg { width: 20px; height: 20px; }
input, select { min-width: 0; min-height: 44px; padding: 10px 12px; border: 2px solid var(--wood-0); border-radius: 0; background: var(--crude); box-shadow: inset 0 2px 0 #000, 0 2px 0 var(--wood-3); color: var(--bone); }
input::placeholder { color: #8f846f; }
input[readonly] { color: var(--bone-2); }
select { color-scheme: dark; }

/* ── Page frame and masthead ────────────────────────────────────────────── */
.page-shell { width: min(1600px, 100%); margin: 0 auto; padding: 0 var(--pad); }
/* The page plank: a walnut rail as wide as the window behind the masthead, a string of bulbs
   along its foot. It sits behind the page, so the masthead keeps its own box. */
body::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: var(--mast-h); pointer-events: none;
  background:
    linear-gradient(90deg, var(--brass-lit) 0 4px, transparent 0) 10px calc(100% - 11px) / 28px 4px repeat-x,
    linear-gradient(90deg, var(--gold) 0 4px, transparent 0) 24px calc(100% - 11px) / 28px 4px repeat-x,
    linear-gradient(var(--wood-4) 0 2px, var(--wood-2) 0 3px, var(--wood-1) 0 calc(100% - 6px), var(--wood-0) 0 calc(100% - 3px), var(--crude) 0);
}
.masthead { position: relative; display: flex; align-items: center; gap: 22px; height: var(--mast-h); padding: 0 0 10px; }
.brand { display: flex; align-items: center; min-height: 44px; flex: 0 0 auto; color: var(--bone); }
.brand-wide { width: 290px; height: 30px; }
.brand-stack { display: none; width: 86px; height: 40px; }
.primary-nav { display: flex; flex: 0 0 auto; gap: 6px; margin-left: auto; }
.primary-nav button { font-size: 14px; }
.primary-nav button span { padding-left: 4px; color: var(--brass-lit); }
.primary-nav .nav-share { --cap-img: var(--cap-dusty); --cap-face: var(--dusty); --cap-ink: var(--crude); display: inline-flex; align-items: center; gap: 8px; }
.primary-nav .nav-share svg { width: 16px; height: 16px; flex: 0 0 auto; }
.primary-nav .nav-share .nav-share-text { padding-left: 0; color: inherit; white-space: nowrap; }
.header-actions { display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.help-button { display: none; }

/* Sound and motion: a speaker in the desktop header opens a popover; on phones the same controls sit in More.
   Every control is at least 44 px tall. */
.settings-button { display: none; flex: 0 0 auto; height: 44px; color: var(--bone); }
body[data-f-ui]:not(.embed) .settings-button { display: inline-flex; }
body:not([data-f-sound]) .setting-row[data-setting="muted"], body:not([data-f-sound]) .setting-row[data-setting="music"], body:not([data-f-sound]) .setting-row[data-setting="effects"], body:not([data-f-shake]) .setting-row[data-setting="shake"] { display: none; }
.settings-button[aria-expanded="true"] { color: var(--gold); }
.settings-popover { position: absolute; z-index: 40; top: calc(100% - 6px); right: 0; width: min(360px, calc(100vw - 24px)); padding: 12px 14px 14px; border: 2px solid var(--wood-0); background: var(--wood-1); box-shadow: inset 0 2px 0 var(--wood-3), 0 6px 0 rgb(0 0 0 / 45%); }
.settings-popover[hidden] { display: none; }
.settings-heading { margin: 0 0 8px; color: var(--brass-lit); font: 900 13px/1 var(--display); font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; }
.settings-controls { display: grid; gap: 6px; }
.setting-row { display: grid; align-items: center; gap: 4px 10px; min-height: 44px; padding: 0 12px; border: 2px solid var(--crude); background: var(--wood-0); color: var(--bone); text-align: left; }
.setting-switch { grid-template-columns: minmax(0, 1fr) auto; }
.setting-switch b, .setting-slider label { font-size: 15px; line-height: 1.2; }
.setting-state { color: var(--bone-2); font-size: 13px; font-weight: 700; }
.setting-switch[aria-checked="true"] .setting-state { color: var(--acid); }
.setting-switch[data-setting="muted"][aria-checked="true"] .setting-state { color: var(--flare); }
.setting-switch:disabled { opacity: .6; }
.setting-slider { grid-template-columns: minmax(96px, 7.5em) minmax(0, 1fr) 3.2em; }
.setting-slider input[type="range"] { width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; accent-color: var(--acid); cursor: pointer; }
.setting-value { color: var(--bone-2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.setting-slider[data-muted="true"] { opacity: .6; }
#settingsDialogControls { padding: 8px 0 4px; }
@media (max-width: 699px) { body[data-f-ui]:not(.embed) .settings-button { display: none; } }
.embed .settings-button, .embed .settings-popover { display: none; }
.account-button { min-width: 0; max-width: 100%; font-size: 14px; line-height: 1.15; text-align: center; }
.browser-button { font-size: 13px; }

/* ── Toasts: claim prompt, storage and connection notices ───────────────── */
/* A small riveted plate with a lamp: gold for news, flare when the line is down. */
.toast { --pa: 2px; position: fixed; z-index: 30; left: 50%; top: 84px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(660px, calc(100% - 24px)); padding: 4px 4px 4px 8px; border: solid transparent; border-width: calc(4 * var(--pa)); border-image: var(--plate) 4 stretch; background: var(--deck) padding-box; font-size: 14px; line-height: 1.45; }
.toast::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; background: var(--gold); box-shadow: inset -2px -2px 0 var(--gold-deep), inset 2px 2px 0 var(--brass-lit); }
.toast p { flex: 1; min-width: 0; }
.toast button { flex: 0 0 auto; }
.toast strong { color: var(--gold); }
.connection-notice { background: #2e1109 padding-box; }
.connection-notice::before { background: var(--flare); box-shadow: inset -2px -2px 0 var(--oxblood), inset 2px 2px 0 #ffb394; }
.connection-notice .notice-title { color: var(--flare); font-family: var(--display); font-stretch: 110%; font-weight: 900; text-transform: uppercase; letter-spacing: .01em; margin-right: 4px; }
.notice a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); font-weight: 700; }
.claim-prompt { top: auto; bottom: 22px; left: auto; right: 22px; transform: none; width: min(470px, calc(100% - 24px)); }
.claim-prompt strong { display: block; font-family: var(--display); font-stretch: 105%; font-weight: 900; text-transform: uppercase; }
.claim-prompt span { color: var(--bone-2); font-size: 13px; }
.claim-prompt .text-button { color: var(--bone-2); }
/* Storage and connection notices sit over the headline slot, aligned to the page grid
   (phone: full width under the masthead; embed: the top bar). */
@media (min-width: 700px) {
  .notice { top: 80px; left: max(var(--pad), calc(50% - 800px + var(--pad))); width: calc(min(1600px, 100%) - 2 * var(--pad)); transform: none; }
}
@media (min-width: 1100px) {
  .notice { width: calc(min(1600px, 100%) - 2 * var(--pad) - var(--ledger) - var(--gap)); }
}

/* ── Desktop composition: stage column + ledger ─────────────────────────── */
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--ledger); column-gap: var(--gap); padding-top: 16px; align-items: start; }
.stage-column, .ledger-column { min-width: 0; }
/* Grouping wrappers: invisible except in the upright-tablet layout, which lays the two groups side by side. */
.side-top, .side-main { display: contents; }

/* Field bar: above the cabinet it holds only what appears on demand (the inviter's chip, and on a
   phone's Field tab the heading and presence). The desktop and tablet heading is gone; "Dig beside
   me" lives in the header and "N digging now" on the stage. */
.field-bar { position: relative; z-index: 2; container: field-bar / inline-size; display: flex; align-items: flex-end; gap: 14px 20px; min-height: 86px; padding-bottom: 12px; }
.field-ident { flex: 1 1 auto; min-width: 0; }
.field-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.field-kicker .eyebrow { color: var(--gold); }
.field-presence { display: inline-flex; align-items: center; gap: 8px; color: var(--bone-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.live-mark { width: 8px; height: 8px; flex: 0 0 auto; background: var(--gold); animation: live-pulse 1.6s steps(2, jump-none) infinite; }
/* Live: filled gold. Connecting, reconnecting or polling: hollow gold. Lost: flare, with flare text. */
:is(.field-presence, .digging-now):is([data-mode="connecting"], [data-mode="reconnecting"], [data-mode="polling"]) .live-mark { background: transparent; box-shadow: inset 0 0 0 2px var(--gold); }
:is(.field-presence, .digging-now)[data-mode="offline"] .live-mark { background: var(--flare); animation: none; }
.field-presence[data-mode="offline"] #fieldPresence { color: var(--flare); }
.digging-now[data-mode="offline"] #diggingNowText { color: var(--flare); }
@keyframes live-pulse { 50% { opacity: .35; } }
.field-name { font: 900 clamp(42px, 4.3vw, 68px)/.84 var(--display); letter-spacing: -.012em; text-transform: uppercase; }
.field-title { display: inline-flex; align-items: flex-end; column-gap: .2em; max-width: 100%; min-height: 44px; padding: 0; color: var(--bone); font: inherit; letter-spacing: inherit; text-align: left; text-transform: inherit; }
#derbyTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: .04em; }
.fw-tight { font-stretch: 58%; }
.fw-wide { font-stretch: 132%; }
.inviter-chip { flex: 0 1 auto; display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 0; padding: 6px 12px; border: 1px solid var(--flare); border-left-width: 6px; background: var(--deck); box-shadow: 0 3px 0 var(--crude); text-align: left; }
.inviter-chip .eyebrow { flex: 0 0 auto; color: var(--flare); white-space: nowrap; }
.inviter-chip strong { flex: 0 1 auto; min-width: 0; font: 900 20px/1 var(--display); font-stretch: 104%; text-transform: uppercase; }
.inviter-chip span:last-child { flex: 0 0 auto; color: var(--bone-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.share-button { flex: 0 0 auto; align-self: center; margin-bottom: -6px; font-size: 14px; }
/* Desktop and tablet: the heading block is gone, so the cabinet rises under the masthead. The
   heading text stays for screen readers; the field bar is only as tall as the chip it may hold. */
@media (min-width: 700px) {
  body:not(.embed) .field-bar { justify-content: flex-end; min-height: 0; padding: 0; }
  body:not(.embed) .field-ident { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body:not(.embed) .share-button { display: none; }
  body:not(.embed) .inviter-chip { margin-bottom: 12px; }
}

/* Discovery and away telegrams take over the status bar (phone) or the masthead (desktop and
   tablet) for a few seconds, never the stage; the embed shows them in its own top bar. */
.discovery-banner { position: absolute; z-index: 4; top: -4px; bottom: 8px; left: 0; right: 0; display: flex; align-items: center; gap: 8px 26px; padding: 8px 22px; background: var(--flare); color: var(--crude); box-shadow: inset 0 0 0 3px var(--flare), inset 0 0 0 5px var(--crude), 6px 6px 0 var(--oxblood); animation: headline-in .32s steps(8, end); }
.discovery-banner.is-gold { background: var(--gold); box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 5px var(--crude), 6px 6px 0 var(--gold-deep); }
.discovery-head { display: grid; gap: 5px; flex: 0 1 auto; min-width: 0; }
.discovery-kicker { font: 800 11px/1.3 var(--text); letter-spacing: .18em; text-transform: uppercase; }
.discovery-title { font: 900 clamp(32px, 3.4vw, 50px)/.84 var(--display); font-stretch: 124%; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.discovery-body { display: grid; gap: 4px; flex: 1 1 0; min-width: 0; }
.discovery-line { font-size: 15px; font-weight: 700; line-height: 1.25; }
.discovery-reward { font-size: 13px; font-weight: 800; letter-spacing: .04em; }
@keyframes headline-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (min-width: 700px) {
  body:not(.embed) .discovery-banner { position: fixed; z-index: 35; top: 0; bottom: auto; left: max(var(--pad), calc(50% - 800px + var(--pad))); right: auto; width: calc(min(1600px, 100%) - 2 * var(--pad)); height: calc(var(--mast-h) - 8px); gap: 6px 22px; padding: 4px 18px; pointer-events: none; }
  body:not(.embed) .discovery-head { gap: 2px; }
  body:not(.embed) .discovery-title { font-size: clamp(26px, 2.6vw, 36px); font-stretch: 104%; }
  body:not(.embed) .discovery-line { font-size: 14px; line-height: 1.2; }
  body:not(.embed) .discovery-reward { font-size: 12px; }
}

/* Stage: the arcade cabinet. The bezel canvas fills the frame; bezel.mjs sets --bezel-* so the
   world's canvas sits on the screen inside the rails, both at whole device pixels. */
.scene-frame { position: relative; height: clamp(380px, calc(100dvh - 380px), 680px); overflow: hidden; background: var(--crude); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.scene-frame.is-dragging { cursor: grabbing; }
/* The stage shakes on a dig: the picture jumps whole pixels and settles, in at most 200 ms. The frame clips it;
   the script sets --shake-px and --shake-ms and names the zone (data-shake): green a satisfying downward punch,
   yellow a light knock, red the hardest, an erratic jarring jolt. Never under reduced motion or with the Screen
   shake setting off. */
#siteScene.is-shaking { animation: stage-shake-yellow var(--shake-ms, 110ms) steps(1, end) 1; }
#siteScene.is-shaking[data-shake="green"] { animation-name: stage-shake-green; }
#siteScene.is-shaking[data-shake="red"] { animation-name: stage-shake-red; }
@keyframes stage-shake-green {
  0% { translate: 0 var(--shake-px); }
  30% { translate: calc(var(--shake-px) * .2) calc(var(--shake-px) * -.5); }
  55% { translate: 0 calc(var(--shake-px) * .3); }
  80% { translate: 0 calc(var(--shake-px) * -.1); }
  100% { translate: 0 0; }
}
@keyframes stage-shake-yellow {
  0% { translate: calc(var(--shake-px) * -.5) calc(var(--shake-px) * .5); }
  40% { translate: calc(var(--shake-px) * .5) calc(var(--shake-px) * -.5); }
  100% { translate: 0 0; }
}
@keyframes stage-shake-red {
  0% { translate: calc(var(--shake-px) * -1) calc(var(--shake-px) * .4); }
  12% { translate: var(--shake-px) calc(var(--shake-px) * -.6); }
  25% { translate: calc(var(--shake-px) * -.8) calc(var(--shake-px) * -.2); }
  37% { translate: calc(var(--shake-px) * .9) calc(var(--shake-px) * .5); }
  50% { translate: calc(var(--shake-px) * -.6) calc(var(--shake-px) * .7); }
  62% { translate: calc(var(--shake-px) * .5) calc(var(--shake-px) * -.5); }
  75% { translate: calc(var(--shake-px) * -.3) calc(var(--shake-px) * .3); }
  87% { translate: calc(var(--shake-px) * .2) calc(var(--shake-px) * -.2); }
  100% { translate: 0 0; }
}
.scene-frame:focus-visible { outline-offset: -3px; }
.bezel { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
#siteScene { position: absolute; top: var(--bezel-top, 0px); left: var(--bezel-left, 0px); display: block; width: calc(100% - var(--bezel-left, 0px) - var(--bezel-right, 0px)); height: calc(100% - var(--bezel-top, 0px) - var(--bezel-bottom, 0px)); image-rendering: pixelated; }

/* The line rail: the field's standings as a walnut ruler under the stage, leader to the left. */
.line-rail { display: flex; align-items: stretch; min-height: 44px; background: var(--wood-1); box-shadow: inset 0 0 0 2px var(--crude), inset 0 4px 0 var(--wood-3), inset 0 -5px 0 var(--wood-0); }
.rail-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 16px; border: 0; border-right: 2px solid var(--crude); background: transparent; color: var(--gold); font: 800 12px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.rail-button:hover:not([aria-disabled="true"]) { background: var(--wood-2); filter: none; }
.rail-button svg { width: 12px; height: 12px; }
.rail-behind, .rail-me { border-right: 0; border-left: 2px solid var(--crude); }
.rail-me svg { width: 9px; height: 18px; }
.rail-button[aria-disabled="true"] { color: #a79b84; cursor: default; }
.rail-short { display: none; }
.rail-readout { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; padding: 0 12px; white-space: nowrap; }
.rail-range { overflow: hidden; text-overflow: ellipsis; font: 900 19px/1 var(--display); font-stretch: 84%; text-transform: uppercase; font-variant-numeric: tabular-nums; }
@media (min-width: 700px) and (max-width: 1279px) { .rail-range { font-size: clamp(15px, 1.65vw, 19px); } }
.rail-you { color: var(--gold); font-size: 13px; font-weight: 800; }

/* The well dock: the cabinet's control deck. The big gauge, the readout, and DIG and CAP & SELL as arcade
   buttons; the 2× boost and the feedback line share the deck. The drill and readout wrappers lay their
   children straight onto the deck's grid, so every layout places them by area. Modes come from
   #wellDock[data-mode]: loading, drill, down (rig resting) and center; the last two are written over the gauge. */
.well-dock { --boost-w: 150px; --gauge-w: 232px; --dig-w: 104px; --cap-w: 104px; position: relative; margin: 12px 0 6px; }
.well-panel {
  --pa: 2px; position: relative; display: grid; grid-template-columns: var(--gauge-w) minmax(0, 1fr) var(--dig-w) var(--cap-w) var(--boost-w); grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "gauge read dig cap boost" "gauge note note note note"; gap: 8px 12px; min-width: 0; min-height: 144px; padding: 1px 2px;
  border: solid transparent; border-width: calc(4 * var(--pa)); border-image: var(--plate) 4 stretch; background: var(--deck) padding-box;
}
.drill-panel { display: contents; }

/* Arcade controls are pixel-stepped caps: ::before is the keyline, ::after the cap with a lit
   rim, a glint and a dark skirt. Labels sit on the cap in its face colour. */
.dig-button, .cap-button, .boost-button {
  --pixel-step: polygon(calc(4 * var(--px)) 0, calc(100% - 4 * var(--px)) 0, calc(100% - 4 * var(--px)) var(--px), calc(100% - 2 * var(--px)) var(--px), calc(100% - 2 * var(--px)) calc(2 * var(--px)), calc(100% - var(--px)) calc(2 * var(--px)), calc(100% - var(--px)) calc(4 * var(--px)), 100% calc(4 * var(--px)), 100% calc(100% - 4 * var(--px)), calc(100% - var(--px)) calc(100% - 4 * var(--px)), calc(100% - var(--px)) calc(100% - 2 * var(--px)), calc(100% - 2 * var(--px)) calc(100% - 2 * var(--px)), calc(100% - 2 * var(--px)) calc(100% - var(--px)), calc(100% - 4 * var(--px)) calc(100% - var(--px)), calc(100% - 4 * var(--px)) 100%, calc(4 * var(--px)) 100%, calc(4 * var(--px)) calc(100% - var(--px)), calc(2 * var(--px)) calc(100% - var(--px)), calc(2 * var(--px)) calc(100% - 2 * var(--px)), var(--px) calc(100% - 2 * var(--px)), var(--px) calc(100% - 4 * var(--px)), 0 calc(100% - 4 * var(--px)), 0 calc(4 * var(--px)), var(--px) calc(4 * var(--px)), var(--px) calc(2 * var(--px)), calc(2 * var(--px)) calc(2 * var(--px)), calc(2 * var(--px)) var(--px), calc(4 * var(--px)) var(--px));
  --cap: 100%; --ring: var(--crude); --ink: var(--crude);
  position: relative; isolation: isolate; min-width: 0; border: 0; background: transparent; color: var(--ink);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.dig-button::before, .dig-button::after, .cap-button::before, .cap-button::after, .boost-button::before, .boost-button::after { content: ""; position: absolute; z-index: -1; pointer-events: none; clip-path: var(--pixel-step); }
.dig-button::before, .cap-button::before, .boost-button::before { left: calc(50% - var(--cap) / 2); top: 0; width: var(--cap); height: var(--cap); background: var(--ring); }
.dig-button::after, .cap-button::after, .boost-button::after {
  left: calc(50% - var(--cap) / 2 + var(--px)); top: var(--px); width: calc(var(--cap) - 2 * var(--px)); height: calc(var(--cap) - 2 * var(--px));
  background: linear-gradient(var(--lit) 0 0) calc(2 * var(--px)) calc(2 * var(--px)) / calc(2 * var(--px)) var(--px) no-repeat, linear-gradient(var(--lit) 0 var(--px), var(--face) 0 calc(100% - 2 * var(--px)), var(--skirt) 0);
}
/* Pressed: the face drops a pixel into its skirt. */
.dig-button:active:not(:disabled)::after, .dig-button.is-pressed::after, .dig-button.is-cooling:not(:disabled)::after, .cap-button:active:not(:disabled)::after, .boost-button:active:not(:disabled)::after {
  background: linear-gradient(var(--skirt) 0 var(--px), var(--lit) 0 calc(2 * var(--px)), var(--face) 0 calc(100% - var(--px)), var(--skirt) 0);
}
.dig-button:active:not(:disabled) > *, .dig-button.is-pressed > *, .dig-button.is-cooling:not(:disabled) > *, .cap-button:active:not(:disabled) > *, .boost-button:active:not(:disabled) > * { translate: 0 var(--px); }

/* The shovel's bite: the last dig's depth rises off the deck. */
.bite-pop { position: absolute; z-index: 5; left: 50%; top: -10px; display: flex; align-items: center; gap: 6px; margin: 0; padding: 3px 10px 2px 6px; background: var(--crude); border: 2px solid var(--gold); color: var(--gold); font: 900 20px/1 var(--display); font-stretch: 80%; white-space: nowrap; pointer-events: none; transform: translate(-50%, 0); animation: bite-rise .9s steps(8, end) forwards; }
.bite-pop[data-tone="bone"] { border-color: var(--bone); color: var(--bone); }
.bite-pop[data-tone="flare"] { border-color: var(--flare); color: var(--flare); }
.bite-icon .px-icon { display: block; width: 22px; height: 22px; }
@keyframes bite-rise { from { opacity: 0; transform: translate(-50%, 12px); } 20% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -30px); } }
/* A resting rig, or dead center, is written over the gauge. */
.rig-line { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; margin: 0; padding: 4px; background: rgb(12 10 8 / 86%); color: var(--flare); font: 900 18px/1.1 var(--display); font-stretch: 72%; text-align: center; text-transform: uppercase; }

.gauge-frame { grid-area: gauge; position: relative; min-width: 0; min-height: 0; background: var(--crude); }
.gauge { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.well-readout { grid-area: read; display: grid; align-content: center; gap: 8px; min-width: 0; }
.pressure-line { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 6px; margin: 0; }
.pressure-line .eyebrow { grid-column: 1 / -1; }
.pressure-line b { font: 900 42px/.8 var(--display); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.pressure-line b[data-level="danger"] { color: var(--flare); }
.pressure-max { color: var(--bone-2); font-size: 13px; font-weight: 700; white-space: nowrap; }
.well-line { display: grid; gap: 3px; margin: 0; color: var(--bone-2); font-size: 13px; font-weight: 700; }
.well-line span:first-child { color: var(--bone); }

/* DIG: the vermilion hero button, a shovel on its face; CAP & SELL: dusty blue, gold past the danger line.
   On the deck each is a round cap with its key printed underneath. */
.dig-button, .cap-button { --px: 7px; --cap: 84px; display: grid; grid-template-rows: var(--cap) auto; align-content: start; justify-items: center; gap: 5px; padding: 0; text-align: center; }
.dig-label, .cap-label { grid-row: 1; align-self: center; margin-top: calc(-1 * var(--px)); padding: 0 2px; background: var(--face); color: var(--ink); }
.dig-button { grid-area: dig; --face: var(--verm); --lit: var(--verm-lit); --skirt: var(--verm-deep); }
.dig-label { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font: 900 23px/1 var(--display); font-stretch: 70%; letter-spacing: .02em; }
.dig-icon { display: block; width: 30px; height: 30px; }
.dig-icon .px-icon { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.dig-hint { grid-row: 2; color: var(--bone-2); font: 800 11px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.dig-button:hover:not(:disabled) { --face: var(--verm-hover); }
.dig-button[data-zone="green"] { --face: var(--acid); --lit: var(--acid-lit); --skirt: var(--acid-deep); }
.dig-button[data-zone="red"] { --face: var(--oxblood); --lit: var(--verm-hover); --skirt: #5c1c12; --ink: var(--bone); }
.dig-button:disabled, .cap-button:disabled { --face: var(--tar-2); --lit: var(--rule); --skirt: var(--crude); --ring: var(--rule); --ink: var(--bone-2); }
/* The bit is still turning, or the dig is on its way: DIG rests pressed. */
.dig-button.is-cooling:not(:disabled):not(.is-pressed) { --face: var(--verm-press); }
.cap-button { grid-area: cap; --face: var(--dusty); --lit: var(--dusty-lit); --skirt: var(--dusty-deep); }
.cap-label { max-width: calc(var(--cap) - 4 * var(--px)); font: 900 18px/.95 var(--display); font-stretch: 72%; }
.cap-detail { grid-row: 2; color: var(--bone); font-size: 11px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.cap-button:hover:not(:disabled) { --face: var(--dusty-hover); }
.well-dock[data-risk="danger"] .cap-button:not(:disabled) { --face: var(--gold); --lit: var(--gold-lit); --skirt: var(--gold-deep); }
.well-dock[data-risk="danger"] .cap-button:not(:disabled) .cap-detail { color: var(--gold); }

/* The 2× boost: an arcade cap like STRIKE and CAP & SELL. Gold when one is ready, cream while it
   runs (its meter counts down along the foot of the face), dark when none is earned yet. */
.boost-button {
  grid-area: boost; --px: 3px; --face: var(--tar-2); --lit: var(--rule); --skirt: var(--crude); --ring: var(--rule); --ink: var(--bone-2);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 14px calc(8px + 2 * var(--px)); text-align: left;
}
.boost-button > :not(.boost-meter) { background: var(--face); color: var(--ink); }
.boost-mark { font: 900 48px/.78 var(--display); font-stretch: 58%; }
.boost-copy { display: grid; gap: 4px; min-width: 0; }
.boost-copy b { font-size: 14px; line-height: 1.2; }
.boost-copy small { font-size: 12px; line-height: 1.3; }
.boost-meter { position: absolute; left: calc(2 * var(--px)); right: calc(2 * var(--px)); bottom: calc(2 * var(--px) + 3px); height: 4px; background: rgb(12 10 8 / 28%); }
.boost-meter i { display: block; height: 100%; background: var(--verm-deep); transform: scaleX(var(--boost-left, 0)); transform-origin: left; }
.boost-button:not(:disabled) { --face: var(--gold); --lit: var(--gold-lit); --skirt: var(--gold-deep); --ring: var(--crude); --ink: var(--crude); }
.boost-button:hover:not(:disabled) { --face: var(--gold-lit); --lit: var(--brass-lit); }
.boost-button.is-active { --face: var(--cream); --lit: #fffbf2; --skirt: var(--cream-shade); --ring: var(--crude); --ink: var(--wood-0); cursor: default; }
.boost-button.is-active .boost-mark { color: var(--verm-deep); }

.action-feedback { grid-area: note; min-width: 0; margin: 0; color: var(--bone); font-size: 13px; line-height: 1.35; }
.action-feedback[data-tone="note"] { color: var(--bone-2); }

/* Notes under the stage */
.stage-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-top: 10px; color: var(--bone-2); font-size: 13px; }
.field-wire { flex: 1 1 100%; color: var(--gold); font-weight: 700; }
.offline-summary { order: -1; flex: 1 1 100%; padding: 10px 14px; background: var(--deck); border: 2px solid var(--wood-2); border-left: 6px solid var(--gold); color: var(--bone); font-weight: 700; }
.stage-key { display: flex; flex-wrap: wrap; gap: 6px; font: 800 11px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.stage-key span { padding: 4px 6px 3px; }
.key-you { background: var(--gold); color: var(--crude); }
.key-inviter { background: var(--flare); color: var(--crude); }
.key-rival { background: var(--oxblood); color: var(--bone); }
.key-field { color: var(--bone); box-shadow: inset 0 0 0 1px var(--bone-2); }
.hit-rate { font-size: 12px; }

/* Walnut plates: a bevelled walnut rail with brass rivets in its corners (the --plate art, sliced
   4) around a dark deck. --pa is one art pixel in device px. */
:is(.depth-block, .rival-panel, .geology-panel, .shop-panel, .standings-panel, .cards-panel, .field-roster, .strata-panel) {
  --pa: 2px; padding: 8px 10px 10px;
  border: solid transparent; border-width: calc(4 * var(--pa)); border-image: var(--plate) 4 stretch; background: var(--deck) padding-box;
}

/* Field roster: the text equivalent of the claims drawn in the world */
.field-roster { margin-top: 18px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-heading h2 { font: 900 30px/.9 var(--display); font-stretch: 70%; letter-spacing: -.005em; text-transform: uppercase; }
.field-roster h2 { font-size: 24px; color: var(--bone-2); }
.shaft-ledger { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ledger-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; background: var(--wood-0); border-left: 4px solid var(--wood-3); font-size: 13px; }
.ledger-item strong { min-width: 0; }
.ledger-depth { grid-row: span 2; align-self: center; font: 800 18px/1 var(--display); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.ledger-tag { color: var(--bone-2); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.ledger-item.is-player { border-left-color: var(--gold); }
.ledger-item.is-player .ledger-tag, .ledger-item.is-player strong { color: var(--gold); }
.ledger-item.is-inviter { border-left-color: var(--flare); }
.ledger-item.is-rival { border-left-color: var(--oxblood); }
.ledger-item.is-inviter .ledger-tag, .ledger-item.is-inviter strong { color: var(--flare); }
.ledger-item.is-rival .ledger-tag, .ledger-item.is-rival strong { color: var(--oxblood-lit); }
.empty-copy { color: var(--bone-2); font-size: 13px; padding: 8px 0; }

/* The way down: every stratum to Earth's center; reached ones lit in their world colours */
.strata-panel { margin-top: 18px; }
.strata-panel h2 { font-size: 24px; color: var(--bone-2); }
.strata-count { color: var(--bone-2); font-size: 13px; font-weight: 700; white-space: nowrap; }
.strata-count b { color: var(--gold); }
.strata-strip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; margin: 16px 0 0; padding: 0; list-style: none; }
.stratum { position: relative; display: grid; align-content: start; gap: 7px; min-width: 0; }
.stratum-chip { display: block; height: 14px; background: var(--wood-0); box-shadow: inset 0 0 0 2px var(--wood-1); }
.stratum.is-reached .stratum-chip { background: linear-gradient(var(--stratum-lit) 0 3px, var(--stratum) 3px); box-shadow: none; }
.stratum.is-current .stratum-chip { box-shadow: 0 0 0 2px var(--crude), 0 0 0 4px var(--gold); }
.stratum.is-current::before { content: ""; position: absolute; top: -14px; left: 50%; border: 5px solid transparent; border-top-color: var(--gold); transform: translateX(-50%); }
.stratum-name { color: #8f846f; font-size: clamp(10px, .78vw, 11px); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.stratum.is-reached .stratum-name { color: var(--bone-2); }
.stratum.is-current .stratum-name { color: var(--gold); }

/* ── Ledger column: the cabinet's side panels ───────────────────────────── */
.ledger-column { display: grid; gap: 14px; align-content: start; }
/* Depth on a cream gauge face, scrip in a deep-teal window. */
.depth-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; }
.depth-stat, .scrip-stat { min-width: 0; padding: 8px 12px 10px; border: 2px solid var(--crude); }
.depth-stat { background: var(--cream); color: var(--wood-0); box-shadow: inset 3px 3px 0 var(--cream-shade); }
.depth-stat .eyebrow { color: var(--wood-2); }
.depth-stat strong { display: block; margin-top: 6px; overflow: hidden; font: 900 clamp(54px, 5.2vw, 76px)/.78 var(--display); font-stretch: 54%; letter-spacing: -.018em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.depth-stat .unit { margin-left: .06em; color: var(--wood-2); font-size: .4em; font-stretch: 112%; letter-spacing: 0; }
.depth-stat strong.is-ticking { color: var(--verm-press); }
.scrip-stat { background: var(--teal); box-shadow: inset 3px 3px 0 var(--crude); text-align: right; }
.scrip-stat strong { display: inline-flex; align-items: baseline; gap: 5px; margin-top: 6px; color: var(--gold); font: 900 38px/.8 var(--display); font-stretch: 66%; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.scrip-stat strong::before { content: ""; flex: 0 0 auto; width: 1.1em; height: 1.1em; align-self: center; background: var(--currency-icon) center / contain no-repeat; image-rendering: pixelated; }
.stratum-line { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 2px; color: var(--bone-2); font-size: 13px; line-height: 1.45; }
.stratum-line strong { color: var(--bone); font-family: var(--display); font-stretch: 96%; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }

.rival-panel { padding: 10px 12px 12px; }
.rival-callout { display: grid; gap: 4px; }
/* A rival in your field is a button that centres the line on them. */
.rival-jump { display: inherit; gap: inherit; align-items: inherit; width: 100%; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; white-space: inherit; }
.rival-jump:hover .rival-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rival-kicker { color: var(--bone-2); font: 800 11px/1.25 var(--text); letter-spacing: .16em; text-transform: uppercase; }
.rival-name { display: block; color: var(--bone); font: 900 27px/.92 var(--display); font-stretch: 112%; text-transform: uppercase; }
.rival-line { font-size: 14px; line-height: 1.4; }
.rival-gap { font: 900 22px/.9 var(--display); font-stretch: 62%; }
.rival-callout.has-rival { padding-left: 12px; border-left: 6px solid var(--oxblood); }
.rival-callout.has-rival .rival-kicker, .rival-callout.has-rival .rival-name, .rival-callout.has-rival .rival-gap { color: var(--oxblood-lit); }
.rival-callout.is-leading .rival-kicker, .rival-callout.is-leading .rival-gap { color: var(--gold); }
.kicker-short { display: none; }

/* Next discovery: a segmented lamp bar; lit lamps are gold, unlit ones walnut. */
.next-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.next-heading strong { font: 800 17px/1.1 var(--display); font-stretch: 96%; text-transform: uppercase; text-align: right; }
.progress-track { position: relative; height: 18px; margin-top: 10px; overflow: hidden; background: var(--wood-0); border: 2px solid var(--crude); box-shadow: 0 2px 0 var(--wood-3); }
.progress-track::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--wood-2) 0 10px, transparent 10px 12px); }
.progress-track span { position: relative; display: block; width: 100%; height: 100%; background: linear-gradient(var(--brass-lit) 0 3px, var(--gold) 0 calc(100% - 3px), var(--gold-deep) 0); transform: scaleX(0); transform-origin: left; transition: transform .25s steps(5, end); }
.progress-track::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 10px, var(--wood-0) 10px 12px); }
.discovery-progress-copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-top: 9px; color: var(--bone-2); font-size: 13px; }
#discoveryReward { color: var(--gold); font-weight: 700; }

/* The Baron's Shop: race-program cards, each a small riveted plate with an acid-green buy cap */
.shop-panel { padding: 10px 10px 12px; }
.shop-panel > .section-heading .eyebrow { white-space: nowrap; }
/* The tool in your hands: its name, the ladder of six tools (the ones behind you lit), and what the next needs. */
.tool-card { --pa: 1px; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 10px; padding: 6px; border: solid transparent; border-width: calc(4 * var(--pa)); border-image: var(--plate) 4 stretch; background: linear-gradient(90deg, var(--teal), var(--wood-0)) padding-box; }
.tool-art { display: grid; place-items: center; width: 56px; height: 56px; background: var(--crude); border: 2px solid var(--gold-deep); }
.tool-art .px-icon { display: block; width: 44px; height: 44px; image-rendering: pixelated; }
.tool-body { display: grid; gap: 4px; min-width: 0; }
.tool-text { display: grid; gap: 1px; min-width: 0; }
.tool-kicker { color: var(--gold); }
.tool-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font: 900 21px/1 var(--display); font-stretch: 90%; text-transform: uppercase; }
.tool-level { color: var(--gold); font: 800 12px/1 var(--text); letter-spacing: .08em; }
.tool-next { color: var(--bone-2); font-size: 12px; line-height: 1.3; }
.tool-ladder { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.tool-step { display: grid; place-items: center; width: 26px; height: 26px; background: var(--crude); border: 2px solid var(--wood-2); }
.tool-step .px-icon { display: block; width: 20px; height: 20px; image-rendering: pixelated; }
.tool-step[data-state="future"] .px-icon { filter: grayscale(1) brightness(.5); }
.tool-step[data-state="current"] { border-color: var(--gold); }
.tool-bar { height: 6px; }
.tool-bar i { background: var(--gold); }
.group-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.group-tab { position: relative; min-height: 44px; padding: 0 2px; font: 900 14px/1 var(--display); font-stretch: 68%; letter-spacing: .03em; text-transform: uppercase; }
.group-tab[aria-pressed="true"] { --cap-img: var(--cap-teal); --cap-face: var(--teal); --cap-ink: var(--gold); }
.group-dot { position: absolute; top: -5px; right: -3px; display: none; width: 12px; height: 12px; background: var(--acid); border: 2px solid var(--crude); }
.group-tab.has-ready .group-dot { display: block; }
.shop-group { margin-top: 12px; }
.shop-group-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 10px 5px; background: var(--wood-1); border-left: 4px solid var(--brass); box-shadow: inset 0 2px 0 var(--wood-3), inset 0 -2px 0 var(--wood-0); }
.shop-group-label .eyebrow { margin-bottom: 0; color: var(--bone); font-size: 12px; }
.group-count { color: var(--gold); font: 700 12px/1 var(--text); white-space: nowrap; }
.shop-group > .shop-cards { margin-top: 8px; }
.shop-cards { display: grid; gap: 8px; }
/* One blade at a time: the pair sits in a dashed brass frame. */
.blade-choice { display: grid; gap: 8px; padding: 8px; border: 2px dashed var(--brass); }
.blade-note { margin: 0; color: var(--gold); font: 700 12px/1.3 var(--text); }
.upgrade-card { --pa: 1px; display: grid; grid-template-columns: 56px minmax(0, 1fr) 84px; align-items: center; gap: 10px; padding: 6px; border: solid transparent; border-width: calc(4 * var(--pa)); border-image: var(--plate) 4 stretch; background: var(--wood-0) padding-box; }
.upgrade-card.is-affordable { background: var(--teal) padding-box; }
.upgrade-card.is-owned { background: linear-gradient(90deg, #14301f, var(--wood-0)) padding-box; }
.upgrade-art { display: grid; place-items: center; width: 56px; height: 56px; background: var(--crude); border: 2px solid var(--wood-3); }
.upgrade-art .px-icon { display: block; width: 44px; height: 44px; image-rendering: pixelated; }
.upgrade-body { min-width: 0; }
.upgrade-title { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
.upgrade-name { font: 900 20px/.95 var(--display); font-stretch: 90%; text-transform: uppercase; }
.upgrade-level { padding: 3px 5px 2px; border: 2px solid var(--wood-3); color: var(--bone-2); font: 800 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
/* What an upgrade gives (+) and what it costs you (−): a sign on a colour, never colour alone. */
.upgrade-fx { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 6px; margin: 3px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.fx-sign { display: grid; place-items: center; width: 16px; height: 16px; color: var(--crude); font: 900 14px/1 var(--display); }
.fx-plus .fx-sign { background: var(--acid); }
.fx-minus .fx-sign { background: var(--flare); }
.upgrade-afford { display: grid; gap: 4px; margin-top: 6px; }
.afford-bar { position: relative; display: block; height: 6px; background: var(--wood-2); }
.afford-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 6px, var(--crude) 6px 8px); }
.afford-bar i { display: block; height: 100%; background: var(--bone-2); transform: scaleX(var(--afford, 0)); transform-origin: left; }
.is-affordable .afford-bar i { background: var(--gold); }
.afford-text { overflow: hidden; color: var(--bone-2); font-size: 12px; line-height: 1.35; }
.is-affordable .afford-text { color: var(--gold); font-weight: 700; }
.upgrade-buy { --cap-img: var(--cap-acid); --cap-face: var(--acid); --cap-ink: var(--crude); display: grid; place-items: center; align-content: center; gap: 4px; min-height: 60px; padding: 4px 2px; }
.upgrade-buy-label { font: 800 11px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.upgrade-buy-cost { display: inline-flex; align-items: baseline; gap: 3px; font: 900 23px/.9 var(--display); font-stretch: 66%; font-variant-numeric: tabular-nums; }
.upgrade-buy-cost::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; align-self: center; background: var(--currency-icon) center / contain no-repeat; image-rendering: pixelated; }
.upgrade-buy-cost.is-word { font: 800 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; }
.upgrade-buy-cost.is-word::before { display: none; }
/* Bought and finished: a quiet cap. The relief valve is a switch: gold when on, wood when off. */
.upgrade-card:is(.is-owned, [data-state="maxed"]) .upgrade-buy:disabled { --cap-img: var(--cap-teal); --cap-face: var(--teal); --cap-ink: var(--gold); }
.upgrade-buy[data-mode="toggle"] { --cap-img: var(--cap-wood); --cap-face: var(--wood-3); --cap-ink: var(--bone); }
.upgrade-buy[data-mode="toggle"][data-on="true"] { --cap-img: var(--cap-gold); --cap-face: var(--gold); --cap-ink: var(--crude); }
.upgrade-buy[data-mode="toggle"] .upgrade-buy-label { font: 900 22px/1 var(--display); font-stretch: 70%; letter-spacing: .02em; }
.shop-foot { display: grid; gap: 6px; margin-top: 12px; }
.cards-button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 44px; padding: 0 12px; font: 900 15px/1 var(--display); font-stretch: 76%; letter-spacing: .03em; text-align: left; text-transform: uppercase; }
.cards-count { min-width: 24px; padding: 4px 5px 3px; background: var(--crude); color: var(--gold); text-align: center; }
.cards-next { margin-left: auto; color: var(--bone-2); font: 600 12px/1.2 var(--text); letter-spacing: 0; text-transform: none; }
.shop-foot-note { margin: 0; color: var(--bone-2); font-size: 12px; line-height: 1.4; }

/* Ready chips: one tap to buy the cheapest upgrade in reach, one to open a waiting card. */
.ready-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.ready-chips .card-ready { margin-top: 10px; }
.upgrade-ready, .card-ready { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 44px; padding: 4px 14px; font: 700 12px/1.1 var(--text); white-space: nowrap; }
.ready-sep { display: none; }
.upgrade-ready { --cap-img: var(--cap-acid); --cap-face: var(--acid); --cap-ink: var(--crude); display: none; }
@media (max-width: 699px) { body:not(.embed) .upgrade-ready:not([hidden]) { display: inline-flex; } }
body:not(.embed) .ready-chips .card-ready, .embed .ready-chips .card-ready { margin-top: 0; }
/* Desktop and tablet: the chips hang from the stage's top edge, over the sky, like the phone's: never over the line's rank text or buttons. */
@media (min-width: 700px) { body:not(.embed) .ready-chips { position: relative; z-index: 4; align-items: flex-start; height: 0; } body:not(.embed) .ready-chips .card-ready { margin-top: 30px; margin-bottom: 0; } }
.card-ready { --cap-img: var(--cap-gold); --cap-face: var(--gold); --cap-ink: var(--crude); display: inline-grid; grid-template-columns: 22px auto; column-gap: 8px; align-items: center; }
.card-ready .ready-icon { display: block; grid-row: 1 / 3; width: 22px; height: 22px; }
.card-ready .ready-icon .px-icon { display: block; width: 22px; height: 22px; image-rendering: pixelated; }
.upgrade-ready b, .card-ready b { font: 900 14px/1 var(--display); font-stretch: 76%; letter-spacing: .04em; text-transform: uppercase; }
.digging-now { position: absolute; z-index: 3; left: calc(var(--bezel-left, 0px) + 14px); bottom: calc(var(--bezel-bottom, 0px) + 8px); display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 4px 10px 4px 8px; background: rgb(12 10 8 / 82%); border: 2px solid var(--wood-3); color: var(--bone); font: 800 12px/1 var(--text); letter-spacing: .02em; white-space: nowrap; pointer-events: none; }
.tool-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; margin: 0 0 6px; color: var(--bone-2); font: 700 12px/1.2 var(--text); }
.tool-line b { color: var(--gold); font: 900 15px/1 var(--display); font-stretch: 80%; text-transform: uppercase; }
.tool-line > span:last-child { white-space: nowrap; }
.tool-line-icon .px-icon { display: block; width: 20px; height: 20px; image-rendering: pixelated; }

/* Cards: the pick-one-of-three and the hand you hold. Rare cards wear a gold frame; a cost always carries a − sign. */
.card-sheet { width: min(640px, calc(100% - 24px)); }
.card-offer { display: grid; gap: 8px; margin: 0 0 8px; }
.pick-card { position: relative; display: block; width: 100%; padding: 6px; text-align: left; --cap-img: var(--cap-wood); --cap-face: var(--wood-1); --cap-ink: var(--bone); }
.pick-card.is-picked { --cap-img: var(--cap-gold); --cap-face: var(--teal); }
.pick-card.is-picked::after { content: "Picked"; position: absolute; top: 6px; right: 8px; padding: 2px 6px 1px; background: var(--gold); color: var(--crude); font: 800 11px/1.1 var(--text); letter-spacing: .1em; text-transform: uppercase; }
.card-face { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; }
.card-face.is-big { grid-template-columns: 72px minmax(0, 1fr); }
.card-art { display: grid; place-items: center; width: 56px; height: 56px; background: var(--crude); border: 3px solid var(--wood-3); }
.is-big .card-art { width: 72px; height: 72px; }
.card-art .px-icon { display: block; width: 44px; height: 44px; image-rendering: pixelated; }
.is-big .card-art .px-icon { width: 56px; height: 56px; }
.card-face[data-rarity="rare"] .card-art { border-color: var(--gold); box-shadow: 0 0 0 2px var(--crude), 0 0 0 4px var(--gold-deep); }
.card-text { display: grid; gap: 4px; min-width: 0; }
.card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.card-name { font: 900 20px/1 var(--display); font-stretch: 86%; text-transform: uppercase; }
.card-rarity { padding: 3px 5px 2px; border: 2px solid var(--wood-3); color: var(--bone-2); font: 800 11px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.card-face[data-rarity="rare"] .card-rarity { border-color: var(--gold); color: var(--gold); }
.card-text .upgrade-fx { margin: 0; font-size: 13px; }
.held-cards { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.held-card { padding: 6px; background: var(--wood-0); border: 2px solid var(--wood-2); }
.card-sheet .sheet-head { padding-bottom: 20px; margin-bottom: 12px; }
.card-sheet .sheet-intro { margin-bottom: 12px; font-size: 14px; line-height: 1.45; }
.card-foot { align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.card-queued { color: var(--bone-2); font-size: 13px; }
@media (min-width: 640px) {
  .card-offer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pick-card .card-face.is-big { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 18px; text-align: center; }
  .pick-card .is-big .card-art { width: 96px; height: 96px; }
  .pick-card .is-big .card-art .px-icon { width: 76px; height: 76px; }
  .pick-card .card-head { justify-content: center; }
  .pick-card .upgrade-fx { text-align: left; }
}

/* Standings */
.rank-badge { color: var(--gold); font: 900 22px/1 var(--display); font-stretch: 70%; white-space: nowrap; }
.ranking-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.ranking-tabs button { padding: 6px 2px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ranking-list { margin: 0; padding: 0; list-style: none; }
.ranking-row { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; min-height: 50px; padding: 7px 0; border-bottom: 2px solid var(--wood-1); }
button.ranking-row { width: 100%; border-width: 0 0 2px; border-color: var(--wood-1); background: transparent; color: var(--bone); font: inherit; text-align: left; }
button.ranking-row:hover { filter: none; }
button.ranking-row:hover .ranking-name { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.rank-number { color: var(--bone-2); font: 900 22px/1 var(--display); font-stretch: 58%; font-variant-numeric: tabular-nums; }
.ranking-who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ranking-name { flex: 0 1 auto; font-weight: 600; }
/* Names are shown whole (ui/names.mjs): one line, a slightly smaller line, then broken at a seam. */
.fit-name { display: inline-block; max-width: 100%; min-width: 0; vertical-align: bottom; white-space: nowrap; }
.fit-name.is-wrapped { white-space: normal; overflow-wrap: anywhere; }
.claim-handle { font-weight: 800; }
.ranking-figures { display: grid; justify-items: end; gap: 3px; }
.ranking-depth { font: 800 17px/1 var(--display); font-stretch: 82%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranking-gap { color: var(--bone-2); font-size: 12px; line-height: 1; white-space: nowrap; }
.ranking-gap.is-ahead { color: var(--flare); font-weight: 700; }
.ranking-row.is-player { background: var(--wood-0); box-shadow: -10px 0 0 var(--wood-0), 10px 0 0 var(--wood-0); }
.ranking-row.is-player::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 4px; background: var(--gold); }
.ranking-row.is-player .rank-number, .ranking-row.is-player .ranking-name { color: var(--gold); }
.ranking-row.is-inviter .ranking-name { color: var(--flare); }
.ranking-row.is-rival .ranking-name { color: var(--oxblood-lit); }
/* Role tags are filled like the world's claim tabs: You gold, Inviter flare, Rival oxblood. */
/* digger.fans ticket badge: a cream ticket stub with stepped notches and a dashed tear line after
   the star. The claim shows it full size, the standings as a compact chip. */
.fan-badge-line { margin: 0 0 14px; }
.fan-badge, .fan-chip { --n: 4px; display: inline-flex; align-items: center; gap: 6px; background: var(--cream); color: var(--wood-0); font: 800 11px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; clip-path: polygon(0 0, 100% 0, 100% calc(50% - var(--n)), calc(100% - var(--n)) calc(50% - var(--n)), calc(100% - var(--n)) calc(50% + var(--n)), 100% calc(50% + var(--n)), 100% 100%, 0 100%, 0 calc(50% + var(--n)), var(--n) calc(50% + var(--n)), var(--n) calc(50% - var(--n)), 0 calc(50% - var(--n))); }
.fan-badge { --n: 6px; padding: 9px 18px 8px; font-size: 12px; }
.fan-badge::before, .fan-chip::before { content: "\2605"; letter-spacing: 0; padding-right: 8px; border-right: 2px dashed var(--cream-shade); color: var(--verm-deep); }
.fan-badge:hover, .fan-chip:hover { background: var(--gold); color: var(--crude); }
.fan-badge:focus-visible, .fan-chip:focus-visible { outline-offset: -4px; }
.ranking-list li { position: relative; }
.ranking-row.has-fan { padding-bottom: 28px; }
.fan-chip { --n: 3px; position: absolute; z-index: 1; left: 44px; bottom: 6px; padding: 3px 8px 2px; font-size: 10px; letter-spacing: .08em; }
.tailor-card[data-earned="true"] .tailor-item-state { color: var(--bone-2); }
.tailor-card[data-earned="true"][data-owned="true"] .tailor-item-state { color: var(--gold); }
.tag { flex: 0 0 auto; padding: 3px 5px 2px; font: 800 10px/1.1 var(--text); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.tag-you { background: var(--gold); color: var(--crude); }
.tag-inviter { background: var(--flare); color: var(--crude); }
.tag-rival { background: var(--oxblood); color: var(--bone); }

.embed-toolbar, .tab-bar, .more-panel, .status-bar, .side-tabs, .cards-panel, .field-legend, .tailor-item-short, .tailor-panel-head, .preview-item, .slot-short, .head-phone, .acct-short, .acct-icon, .bundle-deal, .group-tabs { display: none; }
.wardrobe-sheet:not(.as-panel) #previewBuyButton { display: none; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; padding: 12px 0 26px; border-top: 6px double var(--wood-2); color: var(--bone-2); font-size: 12px; }
.page-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; }
.page-footer button, .page-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--bone-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.page-footer button:hover:not(:disabled), .page-footer a:hover { color: var(--gold); }

/* ── Dialogs: one sheet design for every moment ─────────────────────────── */
/* A walnut plate around a dark deck, a string of bulbs under the title like a marquee. */
.sheet { --pa: 3px; width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0 16px 22px; overflow-y: auto; color: var(--bone); border: solid transparent; border-width: calc(4 * var(--pa)); border-image: var(--plate) 4 stretch; background: var(--deck) padding-box; }
.sheet[open] { animation: sheet-in .18s steps(3, end); }
@keyframes sheet-in { from { transform: translateY(14px); } }
.sheet::backdrop { background: rgb(12 10 8 / 86%); }
.sheet-close-form { position: absolute; top: 8px; right: 8px; }
.sheet-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
.sheet-close svg { width: 18px; height: 18px; }
.sheet-head { position: relative; padding: 22px 48px 24px 0; margin-bottom: 18px; }
.sheet-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: linear-gradient(90deg, var(--brass-lit) 0 4px, transparent 0) 4px 2px / 24px 4px repeat-x, linear-gradient(90deg, var(--gold) 0 4px, transparent 0) 16px 2px / 24px 4px repeat-x, var(--wood-1); box-shadow: inset 0 0 0 2px var(--crude); }
.sheet-head .eyebrow { color: var(--gold); }
.sheet-head h2 { margin-top: 10px; font: 900 48px/.86 var(--display); font-stretch: 60%; letter-spacing: -.01em; text-transform: uppercase; }
.sheet-intro { margin-bottom: 18px; color: var(--bone-2); font-size: 15px; line-height: 1.6; }
.sheet label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.sheet small, .fine-print { display: block; margin-top: 10px; color: var(--bone-2); font-size: 13px; line-height: 1.55; }
.field-row { display: flex; gap: 8px; align-items: stretch; }
.field-row input { flex: 1; width: 100%; }
.field-row button { flex: 0 0 auto; }
.wide-button { width: 100%; margin-top: 12px; min-height: 52px; font-size: 16px; }
.sheet-status { min-height: 1.5em; margin: 14px 0 4px; color: var(--gold); font-size: 14px; line-height: 1.55; }
.sheet-status:empty { margin: 0; min-height: 0; }
.sheet-status[data-tone="note"] { color: var(--bone-2); }
/* Errors are boxed with a flare rule and a warning mark, never colour alone; success stays plain gold. */
.sheet-status[data-tone="error"], .action-feedback[data-tone="error"] { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--wood-0); border: 2px solid var(--flare); border-left-width: 6px; color: var(--bone); font-weight: 700; line-height: 1.45; }
.sheet-status[data-tone="error"]::before, .action-feedback[data-tone="error"]::before { content: ""; flex: 0 0 auto; width: 18px; height: 16px; margin-top: 2px; background: var(--flare); -webkit-mask: var(--warn) center / contain no-repeat; mask: var(--warn) center / contain no-repeat; }
.sheet-foot { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--wood-1); }

/* The sign-in terms are a cream card pinned to the cabinet. */
.permission-card { margin-bottom: 14px; padding: 14px 16px; background: var(--cream); color: var(--wood-0); border: 2px solid var(--crude); box-shadow: inset 3px 3px 0 var(--cream-shade); }
.permission-card .eyebrow { color: var(--wood-2); }
.permission-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; }
.permission-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
.permission-list b { color: var(--verm-deep); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; font-weight: 700; }
.permission-list span { color: var(--wood-1); }
.permission-card .fine-print { color: var(--wood-2); }
.claim-detail { margin-bottom: 4px; padding: 12px 14px; background: var(--wood-0); border: 2px solid var(--wood-1); border-left: 4px solid var(--brass); color: var(--bone-2); font-size: 14px; line-height: 1.55; }

/* The tailor is a fitting room, not an upgrade shop: preview first, wear deliberately. */
.wardrobe-sheet { width: min(960px, calc(100% - 24px)); }
.wardrobe-sheet .sheet-head { margin-bottom: 12px; }
.wardrobe-sheet .sheet-head h2 { font-size: clamp(38px, 5vw, 58px); }
.wardrobe-sheet[data-reviewing="true"] .sheet-head h2 { font-size: 32px; line-height: 1; }
.tailor-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 18px; }
.payment-state { flex: 1 1 300px; color: var(--bone-2); font-size: 14px; line-height: 1.5; }
.test-mode { padding: 7px 10px; border: 2px dashed var(--gold); color: var(--gold); font-size: 12px; font-weight: 800; }
.wardrobe-fitting { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.tailor-mannequin { --pa: 2px; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 4px; border: solid transparent; border-width: calc(4 * var(--pa)); border-image: var(--plate) 4 stretch; background: repeating-linear-gradient(90deg, transparent 0 15px, rgb(246 233 213 / 5%) 15px 16px) padding-box, var(--teal) padding-box; text-align: center; }
.tailor-mannequin canvas { display: block; width: 216px; height: 176px; max-width: 100%; image-rendering: pixelated; }
.tailor-mannequin figcaption { flex: 1; width: 100%; }
.tailor-mannequin figcaption strong { display: block; margin-top: 6px; font: 800 23px/1.1 var(--display); font-stretch: 75%; }
.tailor-mannequin figcaption p { margin: 8px 0 12px; color: var(--bone-2); font-size: 12px; line-height: 1.5; }
.tailor-fit-actions { display: flex; flex-direction: column; width: 100%; }
.tailor-fit-actions button { font-size: 13px; }
.tailor-catalog { min-width: 0; }
.tailor-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.tailor-tab { min-width: 44px; padding: 6px 2px; font-size: 13px; }
.tailor-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
/* Each piece is a small riveted plate: dark when buyable, teal when owned (a gold ring while worn),
   hatched with a ticket stub while it is still to be earned. */
.tailor-card { --pa: 1px; position: relative; display: flex; flex-direction: column; min-width: 0; border: solid transparent; border-width: calc(4 * var(--pa)); border-image: var(--plate) 4 stretch; background: var(--wood-0) padding-box; }
.tailor-card[data-owned="true"] { background: var(--teal) padding-box; }
.tailor-card[data-earned="true"][data-owned="false"] { background: repeating-linear-gradient(135deg, var(--wood-0) 0 8px, #33200f 8px 16px) padding-box; }
.tailor-card[data-earned="true"]::after { content: ""; position: absolute; top: 6px; right: 6px; width: 20px; height: 12px; background: var(--cream); clip-path: polygon(0 0, 100% 0, 100% 3px, calc(100% - 3px) 3px, calc(100% - 3px) 9px, 100% 9px, 100% 100%, 0 100%, 0 9px, 3px 9px, 3px 3px, 0 3px); }
.tailor-card[data-earned="true"][data-owned="true"]::after { background: var(--gold); }
.tailor-card[data-wearing="true"] { box-shadow: 0 0 0 2px var(--gold); }
.wardrobe-choice { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; min-width: 0; padding: 14px 12px 10px; border: 0; border-bottom: 3px solid transparent; background: transparent; text-align: left; }
.wardrobe-choice[aria-pressed="true"] { background: var(--crude); box-shadow: inset 0 0 0 2px var(--gold); }
.wardrobe-choice:disabled { background: transparent; }
.wardrobe-choice svg, .tailor-default-art { width: 48px; height: 48px; margin-bottom: 4px; }
.tailor-default-art { display: flex; align-items: center; justify-content: center; color: var(--bone-2); font-size: 36px; font-weight: 400; }
.tailor-item-name { min-height: 2.5em; font: 800 15px/1.25 var(--text); overflow-wrap: anywhere; }
.tailor-item-blurb { flex: 1; color: var(--bone-2); font-size: 12px; font-weight: 400; line-height: 1.5; }
.tailor-item-state { display: block; color: var(--gold); font-size: 12px; font-weight: 800; line-height: 1.5; }
.tailor-card[data-wearing="true"] .tailor-item-state::before { content: "✓ "; }
.tailor-try-label { padding-top: 4px; color: var(--bone-2); font-size: 11px; font-weight: 600; }
.wardrobe-choice[aria-pressed="true"] .tailor-try-label { color: var(--gold); }
.tailor-card .wardrobe-buy { margin: 8px; padding: 10px 4px; font-size: 12px; }
.wardrobe-buy { --cap-img: var(--cap-acid); --cap-face: var(--acid); --cap-ink: var(--crude); }
.tailor-bundles { margin-top: 18px; }
.tailor-bundle { --pa: 2px; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 6px 8px; border: solid transparent; border-width: calc(4 * var(--pa)); border-image: var(--plate) 4 stretch; background: var(--wood-0) padding-box; }
.tailor-bundle > svg { width: 56px; height: 56px; }
.tailor-bundle h3 { margin: 4px 0; font: 800 25px/1 var(--display); font-stretch: 70%; }
.tailor-bundle p { color: var(--bone-2); font-size: 12px; line-height: 1.5; }
.tailor-bundle-controls { display: grid; justify-items: end; gap: 6px; }
.tailor-bundle-controls button { font-size: 13px; }
.tailor-pledge { margin-top: 16px; padding: 12px 14px; border-left: 4px solid var(--brass); background: var(--wood-0); color: var(--bone-2); font-size: 13px; line-height: 1.55; }
.tailor-pledge strong { color: var(--gold); }
.tailor-account { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 10px; }
.tailor-account .fine-print { flex: 1 1 200px; margin: 0; font-size: 12px; }
.wardrobe-arrivals { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; margin: 12px 0 18px; padding: 14px; border: 2px solid var(--gold); background: var(--wood-0); font-size: 14px; }
.wardrobe-arrivals .eyebrow { grid-column: 1; color: var(--gold); }
.wardrobe-arrivals p:not(.eyebrow) { grid-column: 1; }
.wardrobe-arrivals button { grid-column: 2; grid-row: 1 / 3; }
.checkout-confirmation { padding: 8px 0 4px; font-size: 15px; line-height: 1.6; }
.checkout-confirmation > .eyebrow { color: var(--gold); margin-bottom: 16px; }
.checkout-item { float: right; margin: 0 0 12px 16px; padding: 12px; background: var(--teal); border: 2px solid var(--crude); box-shadow: inset 3px 3px 0 var(--crude); }
.checkout-item svg { width: 80px; height: 80px; }
.checkout-confirmation h3 { font: 900 36px/1.05 var(--display); font-stretch: 70%; }
.checkout-price { margin: 12px 0 18px; color: var(--gold); font: 900 46px/1 var(--display); font-stretch: 65%; }
.checkout-confirmation .field-row { clear: both; flex-wrap: wrap; margin-top: 22px; }
.checkout-confirmation .field-row button { flex: 1 1 180px; min-height: 48px; }
@media (max-width: 760px) {
  .wardrobe-fitting { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tailor-mannequin { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; align-items: center; text-align: left; }
  .tailor-mannequin canvas { width: 120px; height: 100px; }
  .tailor-mannequin figcaption strong { font-size: 21px; }
  .tailor-mannequin figcaption p { margin-bottom: 0; }
  .tailor-fit-actions { grid-column: 1 / -1; flex-direction: row; gap: 8px; }
  .tailor-fit-actions .primary-button { flex: 1; }
}
@media (max-width: 479px) {
  .wardrobe-sheet.sheet { padding: 0 14px 16px; }
  .wardrobe-sheet .sheet-head { padding-top: 20px; margin-bottom: 10px; }
  .wardrobe-sheet .sheet-head h2 { font-size: 36px; line-height: .95; }
  .wardrobe-sheet .sheet-head .eyebrow { font-size: 9px; letter-spacing: .12em; }
  .tailor-notice { margin-bottom: 12px; }
  .payment-state { font-size: 12px; }
  .tailor-mannequin { grid-template-columns: 112px minmax(0, 1fr); padding: 8px; gap: 6px 10px; }
  .tailor-mannequin canvas { width: 112px; height: 112px; }
  .tailor-mannequin figcaption .eyebrow { font-size: 9px; }
  .tailor-mannequin figcaption strong { font-size: 19px; }
  .tailor-mannequin figcaption p { font-size: 11px; }
  .tailor-fit-actions { gap: 4px; }
  .tailor-fit-actions button { padding-inline: 6px; font-size: 12px; }
  .tailor-tab { font-size: 11px; }
  .tailor-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tailor-default { grid-column: 1 / -1; }
  .tailor-default .wardrobe-choice { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 8px; }
  .tailor-default .tailor-default-art { grid-row: 1 / 3; width: 32px; height: 32px; margin: 0; font-size: 28px; }
  .tailor-default .tailor-item-name { min-height: 0; font-size: 13px; }
  .tailor-default .tailor-item-blurb { grid-column: 2; font-size: 10px; }
  .tailor-default .tailor-item-state { grid-column: 3; grid-row: 1; font-size: 11px; }
  .tailor-default .tailor-try-label { grid-column: 3; grid-row: 2; font-size: 10px; }
  .wardrobe-choice { padding: 12px 10px 10px; }
  .tailor-item-name { font-size: 13px; }
  .tailor-item-blurb { font-size: 11px; }
  .tailor-bundle { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .tailor-bundle > svg { width: 40px; height: 40px; }
  .tailor-bundle h3 { font-size: 23px; }
  .tailor-bundle-controls { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
  .tailor-pledge { font-size: 12px; padding: 10px; }
  .wardrobe-arrivals { grid-template-columns: minmax(0, 1fr); font-size: 12px; }
  .wardrobe-arrivals button { grid-column: 1; grid-row: auto; justify-self: start; }
  .checkout-item { padding: 8px; margin-left: 8px; }
  .checkout-item svg { width: 48px; height: 48px; }
  .checkout-confirmation h3 { font-size: 28px; }
  .checkout-price { font-size: 38px; }
}

.help-list > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-top: 2px solid var(--wood-1); }
.help-list > div:first-child { border-top: 0; padding-top: 0; }
.help-list dt { align-self: start; padding: 8px 4px 6px; background: var(--teal); border: 2px solid var(--crude); box-shadow: inset 0 3px 0 var(--teal-lit), 0 3px 0 var(--crude); color: var(--gold); font: 900 22px/1 var(--display); font-stretch: 70%; text-align: center; text-transform: uppercase; }
.help-list dd { color: var(--bone-2); font-size: 14px; line-height: 1.6; }
.help-legal { margin-top: 10px; padding-top: 14px; border-top: 2px solid var(--wood-1); font-size: 14px; }
.help-legal nav { display: flex; gap: 22px; margin-top: 4px; }
.help-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); font-weight: 700; }

.share-sheet { width: min(700px, calc(100% - 24px)); }
.share-frame { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; margin: 9px 9px 14px; background: var(--crude); box-shadow: 0 0 0 3px var(--crude), 0 0 0 7px var(--wood-3), 0 0 0 9px var(--crude); }
.share-frame img { display: block; width: 100%; height: 100%; }
.share-developing { position: absolute; inset: 0; display: grid; place-items: center; color: var(--bone-2); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: repeating-linear-gradient(135deg, var(--crude) 0 10px, var(--wood-0) 10px 20px); }
.share-preview { margin-bottom: 18px; }
.share-preview figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; font-size: 14px; font-weight: 700; }
.snapshot-stamp { padding: 3px 7px 2px; border: 2px solid var(--gold); color: var(--gold); font: 900 12px/1.2 var(--display); font-stretch: 110%; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-2deg); }
.snapshot-note { margin: 0 0 18px; color: var(--bone-2); font-size: 14px; line-height: 1.55; }
.share-x-link { width: 100%; margin-top: 14px; min-height: 52px; font-size: 16px; }
.share-x-link[aria-disabled="true"] { pointer-events: none; }

/* ── Legal pages (server/legal.mjs) ─────────────────────────────────────── */
.legal-page { width: min(780px, calc(100% - 40px)); margin: 0 auto; padding: 0 0 56px; font-size: 16px; line-height: 1.75; }
/* The legal pages' masthead sits on the same walnut plank as the game's (body:has sizes it). */
body:has(.legal-page) { --mast-h: 76px; }
.legal-masthead { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0 12px; height: var(--mast-h); padding-bottom: 10px; }
.legal-masthead a { display: inline-flex; align-items: center; min-height: 44px; }
.legal-masthead img { display: block; width: min(232px, 42vw); height: auto; }
.legal-masthead .legal-back { color: var(--brass-lit); font-weight: 700; text-decoration: none; white-space: nowrap; }
.legal-masthead .legal-back:hover { text-decoration: underline; }
.legal-kicker { margin-top: 48px; color: var(--gold); }
.legal-page h1 { margin: 12px 0 20px; font: 900 clamp(72px, 16vw, 144px)/.8 var(--display); font-stretch: 54%; letter-spacing: -.01em; text-transform: uppercase; }
.legal-page h2 { margin: 36px 0 8px; padding-top: 14px; border-top: 2px solid var(--wood-1); font: 900 28px/1 var(--display); font-stretch: 84%; text-transform: uppercase; }
.legal-page p { margin-bottom: 14px; color: var(--bone-2); }
.legal-page p.legal-kicker { margin-bottom: 0; color: var(--gold); }
.legal-page h1 + p { padding: 14px 18px; border: 2px solid var(--wood-1); border-left: 6px solid var(--brass); background: var(--deck); color: var(--bone); font-size: 17px; }
.legal-page main a { color: var(--gold); font-weight: 700; }
.legal-page footer { margin-top: 48px; padding-top: 14px; border-top: 6px double var(--wood-2); color: var(--bone-2); font-size: 13px; }
.legal-page footer p { margin: 0; }
.legal-page footer nav { display: flex; gap: 22px; }
.legal-page footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone); font-weight: 700; }
.legal-page footer a[aria-current="page"] { color: var(--gold); }

/* ── Notice pages (server/notice.mjs): failed links in the legal-page shell ── */
.notice-page { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: 28px; }
.notice-page main { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 32px 0 40px; }
.notice-page p.legal-kicker { margin: 0; color: var(--flare); }
.notice-page h1 { margin: 14px 0 22px; }
.notice-page h1 + p { max-width: 34em; }
.notice-page main p:last-child { margin: 10px 0 0; }
.notice-page .notice-action { --a: 3px; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 52px; padding: 0 22px; font: 800 17px/1 var(--text); text-decoration: none; }
.notice-page footer { margin-top: 0; }
/* Inside the 480 × 480 in-post player: one screen, no scrolling, every target at least 44 px. */
.notice-compact { width: calc(100% - 24px); padding-bottom: 8px; font-size: 14px; line-height: 1.5; }
body:has(.notice-compact) { --mast-h: 44px; }
body:has(.notice-compact)::before { background: linear-gradient(var(--wood-4) 0 2px, var(--wood-2) 0 3px, var(--wood-1) 0 calc(100% - 3px), var(--crude) 0); }
.notice-compact .legal-masthead { height: 44px; min-height: 44px; padding-bottom: 0; }
.notice-compact .legal-masthead img { width: 168px; }
.notice-compact main { padding: 12px 0 16px; }
.notice-compact h1 { margin: 8px 0 12px; font-size: 60px; }
.notice-compact h1 + p { padding: 10px 14px; font-size: 14px; }
.notice-compact .notice-action { --a: 2px; min-height: 48px; font-size: 15px; }
.notice-compact footer { padding-top: 8px; font-size: 11px; line-height: 1.4; }

/* ── Large desktop ──────────────────────────────────────────────────────── */
@media (min-width: 1680px) {
  .scene-frame { height: clamp(380px, calc(100dvh - 380px), 720px); }
}

/* ── Narrow desktop ─────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  :root { --ledger: 352px; --pad: 22px; --gap: 22px; }
  .brand-wide { width: 252px; height: 26px; }
  .ledger-column { padding-left: 0; }
  .well-dock { --gauge-w: 196px; --dig-w: 96px; --cap-w: 96px; --boost-w: 128px; }
  .upgrade-card { grid-template-columns: 52px minmax(0, 1fr) 82px; gap: 10px; }
  .upgrade-art { width: 52px; height: 52px; }
  .upgrade-art .px-icon { width: 42px; height: 42px; }
}

/* ── Stacked layouts (tablet and phone) share one set of grid areas ───── */
@media (max-width: 1099px) {
  .stage-column, .ledger-column { display: contents; }
  .field-bar { grid-area: field; }
  .scene-frame { grid-area: world; }
  .line-rail { grid-area: rail; }
  .well-dock { grid-area: dig; }
  .stage-notes { grid-area: notes; }
  .depth-block { grid-area: stats; }
  .rival-panel { grid-area: rival; }
  .geology-panel { grid-area: next; }
  .shop-panel { grid-area: shop; }
  .standings-panel { grid-area: standings; }
  .field-roster { grid-area: roster; }
  .strata-panel { grid-area: strata; margin-top: 0; }
  .depth-block, .rival-panel, .geology-panel, .strata-panel, .shop-panel, .standings-panel, .field-roster { margin-top: 14px; }
  .ready-chips { grid-area: ready; }
  .upgrade-art .px-icon { width: 42px; height: 42px; }
}

@media (min-width: 700px) and (max-width: 959px) {
  .brand-wide { width: 220px; height: 23px; }
  .masthead { gap: 12px; }
  .primary-nav button[data-open="wardrobeDialog"], .primary-nav button[data-open="helpDialog"] { display: none; }
  .help-button { display: inline-flex; color: var(--bone-2); }
  /* The speaker takes the (i)'s place in the header so the account button keeps its width; How to play stays in the footer. */
  body[data-f-ui]:not(.embed) .help-button { display: none; }
}
/* A handle that wraps to two lines (ui/names.mjs) still sits inside the masthead's 56 px: the cap's skirt and rim leave no room for padding above and below it. */
@media (min-width: 700px) { body:not(.embed) .account-button:has(.acct-full.is-wrapped) { padding-block: 2px; } }
/* ── Phone: full-bleed stage, poster numerals, DIG in the thumb zone ───── */
@media (max-width: 699px) {
  :root { --pad: 16px; --mast-h: 56px; }
  body { font-size: 14px; }
  body::before { background: linear-gradient(90deg, var(--brass-lit) 0 3px, transparent 0) 8px calc(100% - 7px) / 20px 3px repeat-x, linear-gradient(90deg, var(--gold) 0 3px, transparent 0) 18px calc(100% - 7px) / 20px 3px repeat-x, linear-gradient(var(--wood-4) 0 2px, var(--wood-2) 0 3px, var(--wood-1) 0 calc(100% - 4px), var(--crude) 0); }
  .masthead { gap: 8px; padding: 0 0 6px; }
  .brand-wide { display: none; }
  .brand-stack { display: block; width: 77px; height: 36px; }
  .primary-nav { gap: 0; }
  .primary-nav button { padding: 8px 10px; font-size: 14px; }
  .primary-nav button:not(:first-child) { display: none; }
  .account-button { padding: 8px 10px; font-size: 13px; }
  .field-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kicker share" "name name" "inviter inviter"; align-items: center; min-height: 0; gap: 4px 10px; padding-bottom: 10px; }
  .field-ident { display: contents; }
  .field-kicker { grid-area: kicker; gap: 10px; margin: 0; min-width: 0; }
  .field-presence { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  .field-name { grid-area: name; min-width: 0; font-size: clamp(30px, 9.6vw, 44px); }
  .field-title { min-height: 40px; }
  .share-button { grid-area: share; margin: 0; padding: 8px 12px; font-size: 13px; }
  .inviter-chip { grid-area: inviter; min-width: 0; max-width: none; display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; margin-top: 4px; padding: 7px 10px; border-right-width: 1px; border-left-width: 6px; text-align: left; }
  .inviter-chip .eyebrow, .inviter-chip span:last-child { flex: 0 0 auto; white-space: nowrap; }
  .inviter-chip strong { flex: 0 1 auto; min-width: 0; font-size: 16px; }
  .discovery-banner { top: -4px; bottom: auto; min-height: calc(100% - 2px); flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; padding: 8px 14px; }
  .discovery-head { gap: 2px; }
  .discovery-title { font-size: clamp(28px, 9vw, 40px); white-space: normal; }
  .discovery-line { font-size: 14px; }
  .discovery-reward { display: none; }
  /* The first phone screen holds the stage, depth, the rival ticker and DIG without scrolling. */
  .scene-frame { margin: 0 calc(-1 * var(--pad)); height: max(220px, min(100vw, calc(100dvh - 520px))); }
  .line-rail { margin: 0 calc(-1 * var(--pad)); }
  .rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rail-short { display: inline; }
  .rail-button { padding: 0 13px; }
  .rail-readout { flex-direction: column; gap: 3px; padding: 0 6px; }
  .rail-range { max-width: 100%; font-size: 15px; }
  .rail-you { font-size: 11px; }
  :is(.depth-block, .rival-panel, .geology-panel, .shop-panel, .standings-panel, .field-roster, .strata-panel) { --pa: 1px; padding: 6px 8px 8px; margin-top: 8px; }
  .depth-block { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "depth scrip" "depth stratum"; align-items: stretch; gap: 4px 8px; margin-top: 6px; }
  .depth-stat { grid-area: depth; padding: 5px 10px 6px; }
  .scrip-stat { grid-area: scrip; padding: 5px 10px 6px; }
  .depth-stat .eyebrow, .scrip-stat .eyebrow { font-size: 10px; }
  .depth-stat strong { margin-top: 4px; font-size: clamp(44px, 13.5vw, 56px); }
  .scrip-stat strong { margin-top: 4px; font-size: clamp(26px, 8vw, 34px); }
  .stratum-line { grid-area: stratum; justify-content: flex-end; align-self: end; margin: 0; font-size: 12px; line-height: 1.3; text-align: right; }
  .stratum-line span { display: none; }
  .rival-panel { padding: 0 8px; margin-top: 6px; }
  .rival-callout { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; white-space: nowrap; }
  .rival-callout.has-rival { padding-left: 10px; border-left-width: 4px; }
  .rival-kicker { flex: 0 0 auto; font-size: 10px; letter-spacing: .14em; }
  .kicker-long, .rival-tail { display: none; }
  .kicker-short { display: inline; }
  .rival-name { flex: 0 1 auto; min-width: 0; font-size: 17px; line-height: 1; font-stretch: 100%; }
  .rival-line { flex: 0 0 auto; font-size: 13px; }
  .rival-gap { font-size: 18px; }
  .stage-notes { padding: 12px 0 14px; font-size: 13px; }
  .stage-key, .hit-rate { display: none; }
  .shop-panel > .section-heading { display: none; }
  .standings-panel .section-heading h2 { font-size: 22px; }
  .upgrade-card { grid-template-columns: 52px minmax(0, 1fr) 80px; gap: 8px; padding: 4px; }
  .upgrade-art { width: 52px; height: 52px; }
  .upgrade-art .px-icon { width: 42px; height: 42px; }
  .field-roster { margin-top: 14px; }
  .strata-panel h2 { font-size: 20px; }
  .strata-strip { gap: 2px; }
  .stratum-chip { height: 12px; }
  .stratum-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .shaft-ledger { grid-template-columns: minmax(0, 1fr); }
  /* The deck in the thumb zone: the gauge with the pressure beside it, STRIKE, CAP & SELL and
     the boost in one row, and the feedback line under them. */
  .well-dock { --boost-w: 56px; margin: 0; }
  .well-panel { grid-template-columns: minmax(0, 1fr) 88px var(--boost-w); grid-template-rows: 36px 58px auto; grid-template-areas: "gauge gauge psi" "dig cap boost" "note note note"; gap: 6px 8px; min-height: 0; padding: 0; background: none; border: 0; }
  .well-readout { display: contents; }
  .pressure-line { grid-area: psi; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 3px; min-width: 0; }
  .pressure-line .eyebrow { align-self: auto; font-size: 9px; letter-spacing: .04em; }
  .pressure-line b { font-size: 24px; }
  .pressure-max, .well-line, .dig-hint, .cap-key { display: none; }
  .dig-button, .cap-button { --cap: 100%; grid-template-rows: auto; align-content: center; gap: 2px; }
  .dig-button { --px: 5px; }
  .dig-label { font-size: 32px; font-stretch: 80%; }
  .cap-button { --px: 4px; grid-template-rows: auto auto; }
  .cap-label { max-width: none; font-size: 15px; font-stretch: 74%; white-space: nowrap; }
  .cap-detail, .well-dock[data-risk="danger"] .cap-button:not(:disabled) .cap-detail { grid-row: 2; padding: 0 2px; background: var(--face); color: var(--ink); font-size: 11px; }
  .boost-button { --px: 4px; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: 3px; padding: 4px 2px calc(2px + 2 * var(--px)); overflow: hidden; text-align: center; }
  .boost-mark { font-size: 28px; }
  .boost-copy b { font-size: 9px; line-height: 1.05; }
  .boost-copy small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .action-feedback { font-size: 12px; line-height: 1.3; }
  .page-footer { display: block; margin-top: 26px; padding-bottom: 20px; }
  .page-footer nav { gap: 0 18px; margin-top: 4px; }
  .toast { top: 70px; padding: 2px 2px 2px 6px; font-size: 13px; flex-wrap: wrap; }
  .toast::before { display: none; }
  .toast p { flex-basis: 100%; }
  .claim-prompt { right: 12px; left: 12px; width: auto; }
  .sheet { --pa: 2px; padding: 0 12px 18px; }
  .sheet-head { padding-top: 22px; }
  .sheet-head h2 { font-size: 40px; }
  .help-list > div { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
  .help-list dt { font-size: 20px; }
}

@media (max-width: 359px) {
  :root { --pad: 12px; }
  .masthead { gap: 4px; }
  .brand-stack { width: 66px; height: 31px; }
  .primary-nav button { padding: 8px 6px; font-size: 13px; }
  .account-button { padding: 8px 8px; font-size: 12px; }
  .field-presence { font-size: 11px; }
  :is(.depth-block, .rival-panel, .geology-panel, .shop-panel, .standings-panel, .field-roster, .strata-panel) { padding: 4px 6px 6px; margin-top: 6px; }
  .depth-block { margin-top: 4px; gap: 3px 6px; }
  .rival-panel { padding: 0 6px; margin-top: 4px; }
  .depth-stat, .scrip-stat { padding: 3px 8px 4px; }
  .depth-stat strong { margin-top: 2px; font-size: 40px; }
  .scrip-stat strong { margin-top: 2px; }
  .well-dock { --boost-w: 52px; }
  .well-panel { grid-template-columns: minmax(0, 1fr) 80px var(--boost-w); grid-template-rows: 36px 58px auto; gap: 6px; }
  .dig-label { font-size: 28px; }
  .cap-label { font-size: 14px; }
  .field-kicker .eyebrow { display: none; }
  .share-button svg { display: none; }
  .field-row { flex-wrap: wrap; }
  .field-row input { flex-basis: 100%; }
  .field-row button { flex: 1; }
  .upgrade-card { grid-template-columns: 48px minmax(0, 1fr) 76px; gap: 8px; }
  .upgrade-art { width: 48px; height: 48px; }
  .upgrade-art .px-icon { width: 38px; height: 38px; }
  .upgrade-name { font-size: 18px; }
}

/* ── Phone: one screen, five tabs ───────────────────────────────────────────
   The app is exactly as tall as the visible viewport (--app-h from visualViewport, else 100dvh)
   and the document never scrolls. A status bar (depth, scrip, your rank, your account) crowns every
   tab; Dig (stage, ticker and deck), Upgrades, Field, Outfits and More are one tab each, chosen from a
   bar at the foot with a pixel icon and a label; a tab replaces the stage and the deck while the game
   runs on beneath it. Lists inside a panel scroll in the panel, never the page. Everything is
   scoped to body:not(.embed): the in-post player keeps its own layout. All text is at least 12 px
   and every control at least 44 px. Names are never shortened: they wrap. */
@media (max-width: 699px) {
  :root { --mast-h: 52px; }
  html:has(body[data-tab]:not(.embed)) { overflow: hidden; overflow: clip; overscroll-behavior: none; }
  body[data-tab]:not(.embed) { --tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px)); height: var(--app-h, 100dvh); min-height: 0; overflow: hidden; overflow: clip; overscroll-behavior: none; }
  body:not(.embed)::before { background: linear-gradient(var(--wood-4) 0 2px, var(--wood-2) 0 3px, var(--wood-1) 0 calc(100% - 3px), var(--crude) 0); }
  body:not(.embed) .eyebrow { font-size: 12px; }
  body:not(.embed) .page-shell { display: grid; grid-template-rows: var(--mast-h) minmax(0, 1fr); width: 100%; height: 100%; padding: 0; }
  body:not(.embed) .page-footer { display: none; }

  /* The status bar replaces the masthead on every tab: the brand lives on the cabinet's marquee. */
  body:not(.embed) .masthead { align-items: stretch; height: var(--mast-h); gap: 4px; padding: 4px 6px; }
  body:not(.embed) :is(.brand, .primary-nav, .help-button) { display: none; }
  body:not(.embed) .status-bar { display: flex; flex: 1 1 auto; min-width: 0; gap: 4px; }
  body:not(.embed) .status-bar p { display: grid; align-content: center; min-width: 0; height: 100%; margin: 0; padding: 0 7px; overflow: hidden; border: 2px solid var(--crude); }
  body:not(.embed) .status-bar strong { display: block; overflow: hidden; font: 900 24px/1 var(--display); font-stretch: 60%; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
  body:not(.embed) .status-bar p span { display: block; overflow: hidden; font: 700 12px/1.1 var(--text); white-space: nowrap; }
  body:not(.embed) .status-depth { flex: 1.2 1 auto; background: var(--cream); color: var(--wood-0); box-shadow: inset 2px 2px 0 var(--cream-shade); }
  body:not(.embed) .status-depth span { color: var(--wood-2); }
  body:not(.embed) .status-scrip { flex: 1 1 auto; background: var(--teal); box-shadow: inset 2px 2px 0 var(--crude); text-align: right; }
  body:not(.embed) .status-scrip strong { color: var(--gold); font-size: 22px; }
  body:not(.embed) .status-scrip span { color: var(--bone-2); }
  body:not(.embed) .status-rank { flex: 0 0 auto; padding: 4px 6px; font: 900 15px/1 var(--display); font-stretch: 72%; white-space: nowrap; }
  body:not(.embed) .header-actions { flex: 0 1 auto; min-width: 0; margin-left: 0; }
  body:not(.embed) .account-button { --a: 1px; max-width: 30vw; min-width: 48px; height: 100%; min-height: 44px; padding: 0 1px; font-size: 12px; line-height: 1.1; overflow-wrap: anywhere; text-align: center; white-space: normal; }
  body:not(.embed) .acct-full { display: none; }
  body:not(.embed) .acct-short { display: inline-block; letter-spacing: -.05em; }
  /* A handle that cannot be shown whole in two 12 px lines (ui/app.mjs fitAccountChip) gives the chip to a pixel account icon; its label names the handle. */
  body:not(.embed) .account-button.is-icon .acct-short { display: none; }
  body:not(.embed) .account-button.is-icon .acct-icon { display: block; width: 24px; height: 24px; margin: 0 auto; }
  body:not(.embed) .account-button.is-icon { padding: 0 6px; }
  /* The depth window on Dig and Upgrades is the status bar's: no second plaque. */
  body:not(.embed) .depth-block { display: none; }

  /* Gusher, blowout, tanks-full and away telegrams cover the status bar, on any tab. */
  body:not(.embed) .discovery-banner { position: fixed; z-index: 35; inset: 0 0 auto; height: var(--mast-h); min-height: 0; flex-direction: row; align-items: center; gap: 10px; padding: 0 10px; box-shadow: none; }
  body:not(.embed) :is(.discovery-kicker, .discovery-reward) { display: none; }
  body:not(.embed) .discovery-head { flex: 0 0 auto; }
  body:not(.embed) .discovery-title { font-size: 22px; white-space: nowrap; }
  body:not(.embed) .discovery-body { flex: 1 1 0; min-width: 0; }
  body:not(.embed) .discovery-line { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  body:not(.embed) .toast, body:not(.embed) .claim-prompt { top: calc(var(--mast-h) + 4px); bottom: auto; left: 8px; right: 8px; width: auto; transform: none; }
  body:not(.embed) :is(.stage-notes, .field-roster) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* The screen: the Dig tab's stage, ticker and deck, or one panel in their place, above the tab bar. */
  body:not(.embed) main { min-height: 0; }
  body:not(.embed) .game-layout { position: relative; height: 100%; min-height: 0; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 0; padding: 0; align-items: stretch; }
  body[data-tab="dig"]:not(.embed) .game-layout { grid-template-areas: "world world" "rival next" "dig dig" "tabs tabs"; grid-template-rows: minmax(0, 1fr) 56px auto var(--tabbar-h); }
  body[data-tab="shop"]:not(.embed) .game-layout { grid-template-areas: "shop shop" "tabs tabs"; grid-template-rows: minmax(0, 1fr) var(--tabbar-h); }
  body[data-tab="field"]:not(.embed) .game-layout { grid-template-areas: "head head" "invite invite" "rail rail" "standings standings" "share share" "tabs tabs"; grid-template-rows: auto auto auto minmax(0, 1fr) auto var(--tabbar-h); }
  body[data-tab="tailor"]:not(.embed) .game-layout { grid-template-areas: "blank blank" "tabs tabs"; grid-template-rows: minmax(0, 1fr) var(--tabbar-h); }
  body[data-tab="more"]:not(.embed) .game-layout { grid-template-areas: "strata strata" "more more" "tabs tabs"; grid-template-rows: auto minmax(0, 1fr) var(--tabbar-h); }
  body:not(.embed) :is(.stage-column, .ledger-column, .field-bar) { display: contents; }
  body:not(.embed) :is(.scene-frame, .rival-panel, .geology-panel, .well-dock, .shop-panel, .standings-panel, .line-rail, .share-button, .inviter-chip, .field-ident, .strata-panel, .more-panel, .ready-chips) { display: none; }
  body[data-tab="dig"]:not(.embed) :is(.scene-frame, .well-dock) { display: block; }
  body[data-tab="dig"]:not(.embed) :is(.rival-panel, .geology-panel, .ready-chips) { display: flex; }
  body[data-tab="shop"]:not(.embed) .shop-panel { display: flex; }
  body[data-tab="field"]:not(.embed) .field-ident { display: grid; }
  body[data-tab="field"]:not(.embed) .inviter-chip { display: flex; }
  body[data-tab="field"]:not(.embed) .line-rail { display: grid; }
  body[data-tab="field"]:not(.embed) .standings-panel { display: flex; }
  body[data-tab="field"]:not(.embed) .share-button { display: inline-flex; }
  body[data-tab="more"]:not(.embed) .strata-panel { display: block; }
  body[data-tab="more"]:not(.embed) .more-panel { display: flex; }

  /* Dig: the cabinet stage, a one-line-plus ticker under it. The upgrade chip floats under the marquee. */
  body:not(.embed) .scene-frame { grid-area: world; height: auto; min-height: 0; margin: 0; }
  body:not(.embed) .ready-chips { grid-area: world; z-index: 4; align-self: start; justify-self: center; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; max-width: calc(100% - 12px); margin-top: 34px; }
  body:not(.embed) :is(.upgrade-ready, .card-ready) { --a: 2px; min-width: 0; max-width: 100%; min-height: 44px; padding: 3px 9px; }
  body:not(.embed) .upgrade-ready { --cap-img: var(--cap-acid); --cap-face: var(--acid); --cap-ink: var(--crude); }
  body:not(.embed) :is(.upgrade-ready, .card-ready) b { font: 900 14px/1 var(--display); font-stretch: 76%; letter-spacing: .04em; text-transform: uppercase; }
  body:not(.embed) :is(.upgrade-ready, .card-ready):disabled { opacity: .7; }
  body:not(.embed) .ready-sep { display: none; }
  body:not(.embed) :is(.rival-panel, .geology-panel) { flex-direction: column; justify-content: center; min-width: 0; margin: 0; padding: 0 8px; border: 0; border-image: none; background: var(--deck); box-shadow: inset 0 3px 0 var(--wood-1); }
  body:not(.embed) .rival-panel { grid-area: rival; }
  body:not(.embed) .geology-panel { grid-area: next; border-left: 2px solid var(--wood-1); }
  /* The ticker is a sentence, not a row: "Leader: Roughneck Hattie · 2.1 m ahead", wrapping before it ever clips. */
  body:not(.embed) .rival-callout { display: block; min-height: 0; overflow: hidden; font-size: 13px; line-height: 1.1; white-space: normal; overflow-wrap: anywhere; }
  body:not(.embed) .rival-jump { display: block; min-height: 44px; padding: 0; overflow-wrap: anywhere; white-space: normal; }
  body:not(.embed) .rival-callout.has-rival { padding-left: 8px; border-left-width: 4px; }
  body:not(.embed) :is(.rival-callout, .rival-jump) > :is(.rival-kicker, .rival-line) { display: inline; }
  body:not(.embed) :is(.rival-callout, .rival-jump) > .rival-name { display: inline-block; }
  body:not(.embed) .rival-kicker { font-size: 12px; letter-spacing: .04em; }
  body:not(.embed) .kicker-long { display: none; }
  body:not(.embed) .kicker-short { display: inline; }
  body:not(.embed) .rival-kicker::after { content: ":"; }
  body:not(.embed) .rival-kicker { margin-right: .4em; }
  body:not(.embed) .rival-name { font-size: 14px; font-stretch: 84%; line-height: 1.1; }
  body:not(.embed) .rival-name ~ .rival-line::before { content: " · "; }
  body:not(.embed) .rival-tail { display: none; }
  body:not(.embed) .rival-line { font-size: 13px; }
  body:not(.embed) .rival-gap { font-size: 16px; white-space: nowrap; }
  body:not(.embed) .geology-panel .eyebrow, body:not(.embed) .discovery-progress-copy { display: none; }
  body:not(.embed) .next-heading strong { font-size: 12px; letter-spacing: .02em; line-height: 1.15; text-align: left; }
  body:not(.embed) .progress-track { height: 10px; margin-top: 4px; }

  /* The deck, in thumb reach: the gauge with its pressure, then DIG, CAP & SELL and the 2× boost,
     and a two-line feedback. A resting rig shows over the gauge, so the deck never changes height. */
  body:not(.embed) .well-dock { position: relative; z-index: 0; isolation: isolate; grid-area: dig; margin: 0; padding: 14px 8px 8px; }
  body:not(.embed) .well-dock::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, var(--brass-lit) 0 3px, transparent 0) 8px 3px / 20px 3px repeat-x, linear-gradient(90deg, var(--gold) 0 3px, transparent 0) 18px 3px / 20px 3px repeat-x, linear-gradient(var(--wood-4) 0 2px, var(--wood-2) 0 3px, var(--wood-1) 0); }
  body:not(.embed) .well-panel { grid-template-columns: minmax(0, 1fr) 100px var(--boost-w); grid-template-rows: 36px 56px 32px; grid-template-areas: "gauge gauge psi" "dig cap boost" "note note note"; gap: 6px; }
  /* The streak is drawn on the gauge itself (its heat bar and multiplier socket): the strip gets a little taller instead of a row of its own. */
  body[data-f-streak]:not(.embed) .well-panel { grid-template-rows: 46px 56px 32px; }
  body:not(.embed) .pressure-line { gap: 0; overflow: visible; }
  body:not(.embed) .pressure-line .eyebrow { font-size: 12px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
  body:not(.embed) .pressure-line b { font-size: 22px; }
  body:not(.embed) .dig-label { flex-direction: row; gap: 6px; }
  body:not(.embed) .dig-icon { width: 28px; height: 28px; }
  body:not(.embed) .tool-line { margin: 0 0 2px; }
  body:not(.embed) .rig-line { font-size: 15px; }
  body:not(.embed) .cap-detail, body:not(.embed) .well-dock[data-risk="danger"] .cap-button:not(:disabled) .cap-detail { font-size: 12px; }
  body:not(.embed) .boost-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body:not(.embed) .action-feedback { display: -webkit-box; height: 32px; overflow: hidden; font-size: 12px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  body:not(.embed) .action-feedback[data-tone="error"] { display: flex; align-items: center; padding: 2px 8px; }

  /* The tab bar: a pixel icon over each label. */
  body:not(.embed) .tab-bar { grid-area: tabs; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; height: var(--tabbar-h); padding: 6px 6px calc(2px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(var(--wood-4) 0 2px, var(--wood-2) 0 3px, var(--wood-0) 0); }
  body:not(.embed) .tab-bar button { --a: 2px; position: relative; display: grid; grid-template-rows: 24px auto; justify-items: center; align-content: center; gap: 1px; min-width: 0; min-height: 44px; padding: 0 1px; font: 900 12px/1 var(--display); font-stretch: 70%; letter-spacing: .03em; text-transform: uppercase; touch-action: manipulation; }
  body:not(.embed) .tab-icon { width: 24px; height: 24px; shape-rendering: crispEdges; }
  body:not(.embed) .tab-label { max-width: 100%; overflow: visible; white-space: nowrap; }
  body:not(.embed) .tab-badge { position: absolute; top: -7px; right: -2px; min-width: 20px; height: 20px; padding: 0 4px; border: 2px solid var(--crude); background: var(--flare); color: var(--crude); font: 900 12px/16px var(--text); letter-spacing: 0; text-align: center; }

  /* Upgrades: the tool in your hands, the four groups as tabs, one group's rows at a time, then your cards.
     It all fits at 360 × 640; only below that does the panel scroll inside itself. */
  body[data-tab="shop"]:not(.embed) .shop-panel { grid-area: shop; display: flex; flex-direction: column; gap: 6px; min-height: 0; margin: 6px 8px; padding: 6px; overflow-y: auto; position: relative; }
  body:not(.embed) .shop-panel > .section-heading, body:not(.embed) .shop-group-label { display: none; }
  body:not(.embed) .tool-card { margin: 0; }
  body:not(.embed) .group-tabs { display: grid; }
  body:not(.embed) .shop-group { margin: 0; }
  body:not(.embed) .upgrade-list .shop-group { display: none; }
  body:not(.embed) .upgrade-list[data-group="digging"] .shop-group[data-group="digging"], body:not(.embed) .upgrade-list[data-group="pressure"] .shop-group[data-group="pressure"], body:not(.embed) .upgrade-list[data-group="oil"] .shop-group[data-group="oil"], body:not(.embed) .upgrade-list[data-group="crew"] .shop-group[data-group="crew"] { display: block; }
  body:not(.embed) .shop-foot { margin-top: auto; }
  body:not(.embed) .upgrade-card { grid-template-columns: 44px minmax(0, 1fr) 76px; gap: 8px; padding: 4px; }
  body:not(.embed) .upgrade-art { width: 44px; height: 44px; }
  body:not(.embed) .upgrade-art .px-icon { width: 36px; height: 36px; }
  body:not(.embed) .upgrade-buy { min-height: 52px; }
  body:not(.embed) .upgrade-name { font-size: 18px; }
  body:not(.embed) .upgrade-afford { margin-top: 2px; }
  body:not(.embed) .upgrade-afford .afford-bar { display: none; }
  body:not(.embed) .upgrade-fx { margin-top: 2px; }
  body:not(.embed) .blade-choice { gap: 6px; padding: 6px; }
  body:not(.embed) .tool-card { grid-template-columns: 48px minmax(0, 1fr); padding: 4px 6px; }
  body:not(.embed) .tool-art { width: 48px; height: 48px; }
  body:not(.embed) .tool-art .px-icon { width: 38px; height: 38px; }
  body:not(.embed) .upgrade-level { font-size: 12px; }
  body:not(.embed) .upgrade-buy-label { font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
  body:not(.embed) .shop-foot-note { display: none; }

  /* Field: the heading and presence, the line's navigation, the standings and the invitation. */
  body[data-tab="field"]:not(.embed) .field-ident { position: static; grid-area: head; gap: 0; height: auto; margin: 8px 8px 0; }
  body:not(.embed) .field-name { grid-area: auto; order: 1; font-size: clamp(24px, 7vw, 30px); line-height: 1.05; }
  body:not(.embed) .field-kicker { grid-area: auto; order: 2; position: static; margin: 2px 0 0; pointer-events: auto; }
  body:not(.embed) .field-kicker .eyebrow { display: none; }
  body:not(.embed) .field-presence { max-width: 100%; overflow: visible; font-size: 12px; white-space: normal; }
  body:not(.embed) #fieldPresence { overflow: visible; text-overflow: clip; }
  body:not(.embed) .field-title { display: block; width: 100%; height: auto; min-height: 44px; padding: 2px 0; overflow: visible; text-align: left; text-overflow: clip; white-space: normal; }
  body:not(.embed) #derbyTitle { display: block; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
  body[data-tab="field"]:not(.embed) .inviter-chip { grid-area: invite; flex-wrap: wrap; margin: 6px 8px 0; }
  body:not(.embed) .fit-name { --fit-min: 12px; }
  body[data-tab="field"]:not(.embed) .line-rail { grid-area: rail; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "readout readout readout readout" "leader ahead behind me"; margin: 8px 8px 0; }
  body:not(.embed) .rail-readout { grid-area: readout; flex-direction: row; justify-content: space-between; min-height: 36px; border-bottom: 2px solid var(--crude); }
  body:not(.embed) .rail-leader { grid-area: leader; }
  body:not(.embed) .rail-ahead { grid-area: ahead; }
  body:not(.embed) .rail-behind { grid-area: behind; }
  body:not(.embed) .rail-me { grid-area: me; }
  body:not(.embed) .rail-button { gap: 5px; padding: 0 4px; font-size: 12px; letter-spacing: .04em; }
  body:not(.embed) .rail-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  body:not(.embed) .rail-short { display: none; }
  body:not(.embed) .rail-you { font-size: 12px; }
  body[data-tab="field"]:not(.embed) .standings-panel { grid-area: standings; flex-direction: column; min-height: 0; margin: 8px 8px 0; }
  body:not(.embed) .standings-panel .ranking-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  body:not(.embed) .ranking-name { line-height: 1.2; }
  body:not(.embed) .ranking-who { flex-wrap: wrap; row-gap: 3px; }
  body:not(.embed) .tag { font-size: 12px; letter-spacing: .06em; }
  body:not(.embed) .fan-chip { font-size: 12px; min-height: 44px; bottom: 4px; }
  body:not(.embed) .ranking-row.has-fan { padding-bottom: 52px; }
  body[data-tab="field"]:not(.embed) .share-button { grid-area: share; align-self: stretch; margin: 8px; }

  /* More: the menu, the way down and the fine print. */
  body[data-tab="more"]:not(.embed) .strata-panel { grid-area: strata; margin: 8px 8px 0; }
  body[data-tab="more"]:not(.embed) .more-panel { grid-area: more; flex-direction: column; gap: 8px; min-height: 0; margin: 8px; overflow-y: auto; }
  .more-row { position: relative; display: grid; gap: 2px; flex: 0 0 auto; min-height: 56px; padding: 8px 36px 8px 14px; border: 2px solid var(--crude); background: var(--wood-1); box-shadow: inset 0 2px 0 var(--wood-3), inset 0 -3px 0 var(--wood-0); text-align: left; }
  .more-row::after { content: "›"; position: absolute; top: 50%; right: 14px; translate: 0 -55%; color: var(--gold); font: 900 26px/1 var(--display); }
  .more-row b { font-size: 16px; line-height: 1.2; }
  .more-row span { color: var(--bone-2); font-size: 12px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
  .more-legal { display: flex; flex: 0 0 auto; gap: 8px; }
  .more-legal a { display: inline-flex; flex: 1; align-items: center; justify-content: center; min-height: 44px; background: var(--deck); border: 2px solid var(--wood-1); color: var(--gold); font-weight: 700; text-decoration: none; }
  .more-fine { color: var(--bone-2); font-size: 12px; line-height: 1.45; }

  /* Outfits: the Baron's tailor as a storefront, the wardrobe dialog shown in place (not modal) between the
     status bar and the tab bar. A big try-on over Wear and Buy, category chips, two-column cards, the bundle
     as a banner. It fits 360 × 640 without scrolling; smaller screens may scroll inside the panel. */
  .wardrobe-sheet.as-panel { position: fixed; z-index: 10; inset: var(--mast-h) 0 var(--tabbar-h); width: auto; max-width: none; height: auto; max-height: none; margin: 0; --pa: 1px; padding: 0 8px 6px; overflow-y: auto; animation: none; }
  .wardrobe-sheet.as-panel[open] { display: flex; flex-direction: column; }
  .wardrobe-sheet.as-panel .sheet-close-form { display: none; }
  .wardrobe-sheet.as-panel .sheet-head { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .wardrobe-sheet.as-panel .tailor-panel-head { display: block; flex: 0 0 auto; margin: 4px 0 4px; color: var(--bone-2); font-size: 12px; line-height: 1.3; }
  .wardrobe-sheet.as-panel .tailor-panel-head b { color: var(--bone); font: 900 13px/1.2 var(--display); font-stretch: 74%; letter-spacing: .02em; text-transform: uppercase; }
  .wardrobe-sheet.as-panel .tailor-notice { flex: 0 0 auto; margin: 0 0 4px; gap: 4px 8px; }
  .wardrobe-sheet.as-panel .payment-state { flex-basis: 100%; font-size: 12px; line-height: 1.3; }
  .wardrobe-sheet.as-panel[data-pay="ready"] .payment-state { display: none; }
  .wardrobe-sheet.as-panel .test-mode { padding: 1px 6px; font-size: 12px; }
  .wardrobe-sheet.as-panel .sheet-status { flex: 0 0 auto; margin: 0; font-size: 12px; }
  .wardrobe-sheet.as-panel .sheet-status:empty { display: none; }
  .wardrobe-sheet.as-panel > #wardrobeBrowse { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-height: 0; }
  .wardrobe-sheet.as-panel .wardrobe-fitting { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-height: 0; }
  .wardrobe-sheet.as-panel .tailor-mannequin { --pa: 1px; position: relative; display: flex; flex-direction: column; flex: 1 1 auto; align-items: stretch; min-height: 100px; padding: 2px; }
  .wardrobe-sheet.as-panel .tailor-mannequin canvas { flex: 1 1 0; align-self: flex-end; width: 56%; height: 0; min-height: 0; }
  .wardrobe-sheet.as-panel .tailor-mannequin figcaption { flex: 0 0 auto; }
  .wardrobe-sheet.as-panel .tailor-mannequin figcaption .eyebrow, .wardrobe-sheet.as-panel .tailor-mannequin figcaption p { display: none; }
  /* The try-on stands on the right; what it wears is written on the left (under the test-mode badge, when there is one). */
  .wardrobe-sheet.as-panel { --cap-top: 6px; }
  .wardrobe-sheet.as-panel:has(#testModeBadge:not([hidden])) { --cap-top: 32px; }
  .wardrobe-sheet.as-panel .tailor-mannequin figcaption strong { position: absolute; top: var(--cap-top); left: 8px; width: 42%; margin: 0; color: var(--gold); font: 800 12px/1.2 var(--text); letter-spacing: .04em; text-align: left; text-transform: uppercase; }
  .wardrobe-sheet.as-panel .tailor-mannequin figcaption .preview-item { position: absolute; top: calc(var(--cap-top) + 16px); left: 8px; display: block; width: 42%; color: var(--bone); font: 700 13px/1.2 var(--text); text-align: left; overflow-wrap: anywhere; }
  .wardrobe-sheet.as-panel .tailor-mannequin figcaption { padding: 0; }
  .wardrobe-sheet.as-panel[data-pay="ready"] .tailor-notice { position: relative; z-index: 3; height: 0; margin: 0; }
  .wardrobe-sheet.as-panel[data-pay="ready"] .test-mode { position: absolute; top: 8px; left: 8px; background: rgb(12 10 8 / 80%); }
  .wardrobe-sheet.as-panel .tailor-fit-actions { flex-direction: row; gap: 6px; margin-top: 2px; }
  .wardrobe-sheet.as-panel .tailor-fit-actions button { flex: 1 1 0; min-width: 44px; padding: 2px 6px; font-size: 13px; }
  .wardrobe-sheet.as-panel .tailor-fit-actions #resetOutfitButton { flex: 0 0 auto; padding-inline: 8px; }
  .wardrobe-sheet.as-panel .tailor-catalog { flex: 0 0 auto; }
  .wardrobe-sheet.as-panel .tailor-tabs { gap: 4px; margin-bottom: 4px; }
  .wardrobe-sheet.as-panel .tailor-tab { padding-inline: 0; font-size: 13px; }
  .wardrobe-sheet.as-panel .slot-full { display: none; }
  .wardrobe-sheet.as-panel .slot-short { display: inline; }
  /* Five suits (the Bikini makes the fifth) still fit beside the try-on at 360 × 640: three tight rows. */
  .wardrobe-sheet.as-panel .tailor-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .wardrobe-sheet.as-panel .tailor-card { min-height: 44px; }
  .wardrobe-sheet.as-panel .tailor-default { grid-column: auto; }
  .wardrobe-sheet.as-panel .tailor-card .wardrobe-buy { display: none; }
  .wardrobe-sheet.as-panel .wardrobe-choice { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; align-content: center; gap: 0 6px; min-height: 44px; padding: 1px 5px; }
  .wardrobe-sheet.as-panel .wardrobe-choice > svg, .wardrobe-sheet.as-panel .tailor-default-art { grid-row: 1 / 3; width: 32px; height: 32px; margin: 0; font-size: 26px; }
  .wardrobe-sheet.as-panel .tailor-item-name { grid-column: 2; min-height: 0; font-size: 12px; line-height: 1.05; }
  .wardrobe-sheet.as-panel .tailor-item-blurb, .wardrobe-sheet.as-panel .tailor-try-label { display: none; }
  .wardrobe-sheet.as-panel .tailor-item-state, .wardrobe-sheet.as-panel .tailor-default .tailor-item-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wardrobe-sheet.as-panel .tailor-item-short { display: block; grid-column: 2; grid-row: 2; color: var(--gold); font-size: 12px; font-weight: 800; line-height: 1.05; }
  .wardrobe-sheet.as-panel .tailor-card[data-earned="true"] .tailor-item-short { color: var(--bone-2); }
  .wardrobe-sheet.as-panel .tailor-card[data-earned="true"][data-owned="true"] .tailor-item-short, .wardrobe-sheet.as-panel .tailor-card[data-wearing="true"] .tailor-item-short { color: var(--gold); }
  .wardrobe-sheet.as-panel .tailor-card[data-wearing="true"] .tailor-item-short::before { content: "✓ "; }
  .wardrobe-sheet.as-panel .tailor-card[data-earned="true"] .wardrobe-choice { padding-right: 26px; }
  .wardrobe-sheet.as-panel .tailor-card[data-earned="true"]::after { top: 4px; right: 4px; }
  .wardrobe-sheet.as-panel .tailor-bundles { flex: 0 0 auto; margin-top: 0; }
  .wardrobe-sheet.as-panel .tailor-bundle { --pa: 1px; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 0 8px; align-items: center; min-height: 44px; padding: 0 6px; background: linear-gradient(90deg, var(--teal), var(--wood-0)) padding-box; }
  .wardrobe-sheet.as-panel .tailor-bundle > svg { width: 32px; height: 32px; }
  .wardrobe-sheet.as-panel .tailor-bundle .eyebrow, .wardrobe-sheet.as-panel .tailor-bundle p { display: none; }
  .wardrobe-sheet.as-panel .tailor-bundle h3 { margin: 0; color: var(--bone-2); font: 600 12px/1.2 var(--text); }
  .wardrobe-sheet.as-panel .bundle-deal { display: block; color: var(--gold); font: 900 20px/1.05 var(--display); font-stretch: 70%; text-transform: uppercase; }
  .wardrobe-sheet.as-panel .tailor-bundle-controls { grid-column: 3; display: grid; justify-items: end; gap: 0; }
  .wardrobe-sheet.as-panel .tailor-bundle .wardrobe-buy { margin: 0; padding: 2px 8px; font-size: 13px; }
  .wardrobe-sheet.as-panel .tailor-bundle-controls:has(.wardrobe-buy:not([hidden])) .tailor-item-state { display: none; }
  /* The pledge and the account's fine print live on the More tab here; a guest buys through Buy, which asks for sign-in. */
  .wardrobe-sheet.as-panel > #wardrobeBrowse > .tailor-pledge, .wardrobe-sheet.as-panel .tailor-account .fine-print { display: none; }
  .wardrobe-sheet.as-panel .tailor-account { flex: 0 0 auto; margin: 0; }
  .wardrobe-sheet.as-panel #restoreButton { min-height: 44px; padding-block: 0; font-size: 12px; }
}
/* Short phones (360 × 640 and its kin): the shop rows give up their price line so a whole group still fits. */
@media (max-width: 699px) and (max-height: 720px) {
  body:not(.embed) .upgrade-card { grid-template-columns: 40px minmax(0, 1fr) 72px; gap: 6px; padding: 2px 3px; }
  body:not(.embed) .upgrade-art { width: 40px; height: 40px; }
  body:not(.embed) .upgrade-art .px-icon { width: 32px; height: 32px; }
  body:not(.embed) .upgrade-buy { min-height: 44px; }
  body:not(.embed) .upgrade-afford, body:not(.embed) .shop-foot-note { display: none; }
  body:not(.embed) .upgrade-name { font-size: 17px; }
  body:not(.embed) .tool-card { grid-template-columns: 40px minmax(0, 1fr); padding: 3px 6px; gap: 8px; }
  body:not(.embed) .tool-art { width: 40px; height: 40px; }
  body:not(.embed) .tool-art .px-icon { width: 32px; height: 32px; }
  body:not(.embed) .tool-body { gap: 2px; }
  body:not(.embed) .blade-choice { gap: 4px; padding: 4px; }
  body:not(.embed) .shop-cards { gap: 4px; }
  body:not(.embed) .tool-bar { display: none; }
  body:not(.embed) .shop-panel { gap: 4px; padding: 4px 6px; margin: 4px 8px; }
  body:not(.embed) .upgrade-fx { margin-top: 1px; line-height: 1.12; }
  body:not(.embed) .upgrade-title { gap: 0 8px; }
  body:not(.embed) .tool-word { display: none; }
  body:not(.embed) .tool-next { line-height: 1.15; white-space: nowrap; }
  /* Below 360 px the line keeps the next tool and its level; the count of levels to go gives way (the ladder bar says it too). */
  @media (max-width: 359px) { body:not(.embed) .tool-togo { display: none; } }
  body:not(.embed) .blade-note { font-size: 12px; line-height: 1.1; text-align: center; }
  body:not(.embed) .blade-choice { border-width: 1px; }
  /* The blade's buy button already says IN USE or SWITCH, so its level badge gives up its line. */
  body:not(.embed) .blade-choice .upgrade-level { display: none; }
}
/* The pick-one-of-three has to fit whichever three cards come: short phones drop the intro line and tighten the cards. */
@media (max-width: 699px) and (max-height: 720px) {
  body:not(.embed) #cardIntro { display: none; }
  body:not(.embed) .card-offer { gap: 5px; margin-bottom: 4px; }
  body:not(.embed) .pick-card { padding: 4px; }
  body:not(.embed) .card-face { gap: 8px; }
  body:not(.embed) .card-art, body:not(.embed) .is-big .card-art { width: 48px; height: 48px; }
  body:not(.embed) .card-art .px-icon, body:not(.embed) .is-big .card-art .px-icon { width: 38px; height: 38px; }
  body:not(.embed) .card-face.is-big { grid-template-columns: 48px minmax(0, 1fr); }
}
@media (max-width: 699px) and (max-height: 680px) { body:not(.embed) .tool-ladder { display: none; } body:not(.embed) .blade-note { font-size: 12px; line-height: 1.1; } }
@media (max-width: 479px) {
  body:not(.embed) .rail-me .rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body:not(.embed) .rail-me .rail-short { display: inline; }
}
@media (max-width: 359px) {
  body:not(.embed) .tab-bar button { letter-spacing: 0; }
  body:not(.embed) .status-bar strong { font-size: 22px; }
  body:not(.embed) .status-bar p { padding: 0 5px; }
  /* Under 360 px the widest handles take four ticker lines (kicker, name on two, gap): the row grows from 56 to 68 px. */
  body[data-tab="dig"]:not(.embed) .game-layout { grid-template-rows: minmax(0, 1fr) 68px auto var(--tabbar-h); }
}

/* ── Desktop and tablet: one screen ──────────────────────────────────────────
   From 700 px up the page never scrolls, like the phone's: the app is as tall as the visible
   viewport (--app-h from visualViewport, else 100dvh) and everything is sized to fit it. The
   stage and deck sit on the left and take the height that is left; the right column stacks the
   depth and money plates, the rival and the next discovery above a tabbed panel (Upgrades,
   Field, Your cards), one panel at a time. Under 900 px (a tablet held upright) the same parts
   stack: stage and deck above, plates and panel side by side below. A side panel may scroll
   inside itself only when the viewport is under 720 px tall. Scoped to body:not(.embed). */
@media (min-width: 700px) {
  :root { --mast-h: 60px; --foot-h: 30px; }
  html:has(body:not(.embed)) { overflow: hidden; overflow: clip; overscroll-behavior: none; }
  body:not(.embed) { height: var(--app-h, 100dvh); min-height: 0; overflow: hidden; overflow: clip; overscroll-behavior: none; }
  body:not(.embed) .page-shell { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--mast-h) minmax(0, 1fr) var(--foot-h); height: 100%; }
  body:not(.embed) .masthead { min-width: 0; padding-bottom: 6px; }
  body:not(.embed) main { min-height: 0; }
  body:not(.embed) .game-layout { grid-template-columns: minmax(0, 1fr) var(--ledger); grid-template-rows: minmax(0, 1fr); grid-template-areas: "stage side"; align-items: stretch; height: 100%; min-height: 0; padding: 10px 0 8px; }
  body:not(.embed) .stage-column { grid-area: stage; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  body:not(.embed) .ledger-column { grid-area: side; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }

  /* Footer: one slim line. Its links keep a 44 px hit area that reaches past the line. */
  body:not(.embed) .page-footer { height: var(--foot-h); margin: 0; padding: 0; border-top: 2px solid var(--wood-1); }
  body:not(.embed) .page-footer p { margin: 0; white-space: nowrap; }
  body:not(.embed) .page-footer nav { flex-wrap: nowrap; gap: 0 18px; }
  body:not(.embed) .page-footer :is(button, a) { position: relative; min-height: 0; height: var(--foot-h); }
  body:not(.embed) .page-footer :is(button, a)::after { content: ""; position: absolute; inset: -7px -6px; }
}
/* Tablet widths: the sentence may take two lines. */
@media (min-width: 700px) and (max-width: 959px) {
  body:not(.embed) .page-footer { gap: 12px; }
  body:not(.embed) .page-footer p { min-width: 0; font-size: 11px; line-height: 1.1; white-space: normal; }
  body:not(.embed) .page-footer nav { flex: 0 0 auto; gap: 0 14px; }
  body:not(.embed):not([data-f-ui]) .page-footer nav [data-open="helpDialog"] { display: none; }
}
@media (min-width: 700px) {
  /* The stage column: stage, rail, deck, and the way down in one thin strip. */
  body:not(.embed) .field-bar { flex: 0 0 auto; }
  body:not(.embed) .scene-frame { flex: 1 1 0; height: auto; min-height: 150px; }
  body:not(.embed) .line-rail { flex: 0 0 auto; }
  body:not(.embed) .well-dock { flex: 0 0 auto; margin: 8px 0 0; }
  body:not(.embed) .stage-notes { flex: 0 0 auto; padding: 0; }
  body:not(.embed) .stage-notes > :not([hidden]) { margin-top: 8px; }
  body:not(.embed) .strata-panel { flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 8px 0 0; --pa: 1px; padding: 4px 10px 6px; }
  body:not(.embed) .strata-panel .section-heading { gap: 12px; white-space: nowrap; }
  body:not(.embed) .strata-panel h2 { font-size: 17px; }
  body:not(.embed) .strata-strip { margin: 9px 0 0; gap: 3px; }
  body:not(.embed) .stratum-chip { height: 12px; }
  body:not(.embed) .stratum.is-current::before { top: -9px; border-width: 4px; }
  body:not(.embed) .stratum-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* The right column. Plates first, kept short; the panel takes what is left. */
  body:not(.embed) :is(.depth-block, .rival-panel, .geology-panel) { flex: 0 0 auto; margin: 0; }
  body:not(.embed) .depth-block { --pa: 1px; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 6px 8px 7px; }
  body:not(.embed) .depth-stat { grid-area: 1 / 1; }
  body:not(.embed) .scrip-stat { grid-area: 1 / 2; }
  body:not(.embed) :is(.depth-stat, .scrip-stat) { padding: 4px 10px 6px; }
  body:not(.embed) :is(.depth-stat, .scrip-stat) .eyebrow { font-size: 10px; letter-spacing: .14em; }
  body:not(.embed) .depth-stat strong { margin-top: 2px; font-size: clamp(40px, 6.4vh, 58px); }
  body:not(.embed) .scrip-stat { display: flex; flex-direction: column; justify-content: space-between; min-width: 124px; }
  body:not(.embed) .scrip-stat strong { margin-top: 0; font-size: clamp(26px, 4.2vh, 36px); }
  body:not(.embed) .scrip-stat strong::before { width: 28px; height: 28px; margin-right: 1px; }
  body:not(.embed) .stratum-line { grid-area: 2 / 1 / 3 / 3; flex-wrap: nowrap; gap: 0 10px; margin: 0; overflow: hidden; font-size: 12px; line-height: 1.3; white-space: nowrap; }
  body:not(.embed) .stratum-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body:not(.embed) .rival-panel { --pa: 1px; padding: 0 8px; }
  body:not(.embed) .rival-callout { display: block; min-height: 44px; padding: 2px 0; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
  body:not(.embed) .rival-callout.has-rival { padding-left: 10px; border-left-width: 4px; }
  body:not(.embed) .rival-jump { display: block; min-height: 44px; padding: 0; white-space: normal; overflow-wrap: anywhere; }
  body:not(.embed) :is(.rival-callout, .rival-jump) > :is(.rival-kicker, .rival-line) { display: inline; }
  body:not(.embed) :is(.rival-callout, .rival-jump) > .rival-name { display: inline-block; }
  body:not(.embed) .rival-kicker { margin-right: .4em; font-size: 10px; letter-spacing: .14em; }
  body:not(.embed) .rival-kicker::after { content: ":"; }
  body:not(.embed) .kicker-long, body:not(.embed) .rival-tail { display: none; }
  body:not(.embed) .kicker-short { display: inline; }
  body:not(.embed) .rival-name { font-size: 17px; line-height: 1.1; font-stretch: 100%; }
  body:not(.embed) .rival-name ~ .rival-line::before { content: " · "; }
  body:not(.embed) .rival-line { font-size: 13px; line-height: 1.25; }
  body:not(.embed) .rival-gap { font-size: 16px; white-space: nowrap; }
  body:not(.embed) .geology-panel { --pa: 1px; padding: 5px 10px 7px; }
  body:not(.embed) .geology-panel .tool-line { display: none; }
  body:not(.embed) .next-heading { gap: 8px; }
  body:not(.embed) .next-heading .eyebrow { font-size: 10px; white-space: nowrap; }
  body:not(.embed) .next-heading strong { font-size: 14px; line-height: 1.15; }
  body:not(.embed) .progress-track { height: 12px; margin-top: 5px; }
  body:not(.embed) .discovery-progress-copy { flex-wrap: nowrap; gap: 8px; margin-top: 4px; font-size: 12px; line-height: 1.25; }

  /* Side tabs: Upgrades, Field, Your cards. */
  body:not(.embed) .side-tabs { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  body:not(.embed) .side-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 2px; font: 900 15px/1 var(--display); font-stretch: 72%; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
  body:not(.embed) .side-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; background: var(--flare); color: var(--crude); font: 900 12px/1 var(--text); font-style: normal; }
  body:not(.embed) .side-badge:not([hidden]) { position: absolute; top: -6px; right: -3px; }

  /* One panel at a time. */
  body:not(.embed) :is(.shop-panel, .standings-panel, .cards-panel) { flex: 1 1 0; display: none; flex-direction: column; gap: 6px; min-height: 0; margin: 0; --pa: 1px; padding: 6px; overflow: hidden; }
  body[data-side="upgrades"]:not(.embed) .shop-panel, body[data-side="field"]:not(.embed) .standings-panel, body[data-side="cards"]:not(.embed) .cards-panel { display: flex; }
  body:not(.embed) .shop-panel > .section-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Upgrades: the tool, the four group tabs, and one group at a time. */
  body:not(.embed) .tool-card { margin: 0; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 3px 6px; }
  body:not(.embed) .tool-art { width: 44px; height: 44px; }
  body:not(.embed) .tool-art .px-icon { width: 34px; height: 34px; }
  body:not(.embed) .tool-name { font-size: 18px; }
  body:not(.embed) .tool-body { gap: 2px; }
  body:not(.embed) .group-tabs { display: grid; }
  body:not(.embed) .shop-group-label, body:not(.embed) .shop-foot { display: none; }
  body:not(.embed) .shop-group { margin: 0; }
  body:not(.embed) .upgrade-list { display: block; }
  body:not(.embed) .upgrade-list .shop-group { display: none; }
  body:not(.embed) .upgrade-list[data-group="digging"] .shop-group[data-group="digging"], body:not(.embed) .upgrade-list[data-group="pressure"] .shop-group[data-group="pressure"], body:not(.embed) .upgrade-list[data-group="oil"] .shop-group[data-group="oil"], body:not(.embed) .upgrade-list[data-group="crew"] .shop-group[data-group="crew"] { display: block; }
  body:not(.embed) .shop-group > .shop-cards { margin-top: 0; gap: 6px; }
  body:not(.embed) .upgrade-card { grid-template-columns: 44px minmax(0, 1fr) 76px; gap: 8px; padding: 3px 4px; }
  body:not(.embed) .upgrade-art { width: 44px; height: 44px; }
  body:not(.embed) .upgrade-art .px-icon { width: 34px; height: 34px; }
  body:not(.embed) .upgrade-name { font-size: 17px; }
  body:not(.embed) .upgrade-level { font-size: 12px; }
  body:not(.embed) .upgrade-fx { margin-top: 1px; font-size: 12px; line-height: 1.2; }
  body:not(.embed) .upgrade-afford { margin-top: 2px; }
  body:not(.embed) .upgrade-afford .afford-bar { display: none; }
  body:not(.embed) .upgrade-buy { min-height: 46px; }
  body:not(.embed) .upgrade-buy-label { font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
  body:not(.embed) .blade-choice { gap: 6px; padding: 5px; }
  body:not(.embed) .blade-note { font-size: 12px; line-height: 1.1; }

  /* Field: standings and the headframes in one panel; a legend at the foot. */
  body:not(.embed) .standings-panel .section-heading { flex: 0 0 auto; align-items: center; }
  body:not(.embed) .standings-panel .section-heading h2 { font-size: 18px; color: var(--bone-2); }
  body:not(.embed) .rank-badge { font-size: 19px; }
  body:not(.embed) .ranking-tabs { flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; gap: 4px; }
  body:not(.embed) .ranking-tabs button { min-height: 40px; padding-block: 2px; font-size: 12px; letter-spacing: .06em; }
  body:not(.embed) .ranking-list { flex: 0 0 auto; }
  body:not(.embed) .ranking-row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 0 8px; min-height: 0; padding: 3px 0; }
  body:not(.embed) .ranking-row.is-player { box-shadow: -6px 0 0 var(--wood-0), 6px 0 0 var(--wood-0); }
  body:not(.embed) .ranking-row.is-player::before { left: -6px; }
  body:not(.embed) .rank-number { font-size: 19px; }
  body:not(.embed) .ranking-who { flex-wrap: wrap; row-gap: 2px; }
  body:not(.embed) .ranking-name { font-size: 14px; line-height: 1.15; }
  body:not(.embed) .ranking-depth { font-size: 16px; }
  body:not(.embed) .ranking-gap { display: none; }
  body:not(.embed) .standings-panel:not([data-board="view"]) .field-roster, body:not(.embed) .standings-panel[data-board="view"] .ranking-list { display: none; }
  body:not(.embed) .standings-panel .field-roster { flex: 0 0 auto; margin: 0; padding: 0; border: 0; border-image: none; background: none; }
  body:not(.embed) .field-roster .section-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body:not(.embed) .shaft-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; }
  body:not(.embed) .shaft-ledger li:nth-child(n + 13) { display: none; }
  body:not(.embed) .ledger-item { padding: 3px 8px; gap: 0 8px; }
  body:not(.embed) .ledger-item strong { font-size: 13px; line-height: 1.2; }
  body:not(.embed) .ledger-depth { font-size: 16px; }
  body:not(.embed) .field-legend { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: auto; padding-top: 6px; }

  /* Your cards: a hand of tiles and the selected card in full. */
  body:not(.embed) .cards-panel { gap: 8px; }
  body:not(.embed) .cards-panel-next { margin: 0; color: var(--bone-2); font-size: 13px; line-height: 1.3; }
  body:not(.embed) .hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
  body:not(.embed) .hand:empty { display: none; }
  body:not(.embed) .hand-tile { display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-width: 44px; min-height: 44px; padding: 2px; background: var(--crude); border: 2px solid var(--wood-3); }
  body:not(.embed) .hand-tile[data-rarity="rare"] { border-color: var(--gold-deep); }
  body:not(.embed) .hand-tile[aria-pressed="true"] { background: var(--teal); border-color: var(--gold); box-shadow: 0 0 0 2px var(--crude), 0 0 0 4px var(--gold-deep); }
  body:not(.embed) .hand-tile .px-icon { display: block; width: 100%; max-width: 40px; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
  body:not(.embed) .hand-detail { padding: 8px; background: var(--wood-0); border: 2px solid var(--wood-2); }
  body:not(.embed) .hand-detail .empty-copy { padding: 0; }
  body:not(.embed) .cards-panel .wide-button { flex: 0 0 auto; width: 100%; }
}

/* The deck: on a narrower stage the readout and the boost give up width. */
@media (min-width: 700px) and (max-width: 1199px) {
  body:not(.embed) .well-dock { --gauge-w: 176px; --dig-w: 84px; --cap-w: 84px; --boost-w: 92px; }
  body:not(.embed) .well-panel { column-gap: 8px; }
  body:not(.embed) .boost-button { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: 3px; padding: 4px 2px calc(2px + 2 * var(--px)); text-align: center; }
  body:not(.embed) .boost-mark { font-size: 34px; }
  body:not(.embed) .boost-copy small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body:not(.embed) .boost-copy b { font-size: 11px; line-height: 1.1; }
  body:not(.embed) .rail-button { gap: 6px; padding: 0 10px; }
  body:not(.embed) .rail-readout { gap: 8px; padding: 0 6px; }
  body:not(.embed) .dig-button, body:not(.embed) .cap-button { --cap: 72px; --px: 6px; }
}

/* Upright tablets: the stage and deck on top, the plates and the panel side by side below. */
@media (min-width: 700px) and (max-width: 899px) {
  :root { --side-h: clamp(340px, 41dvh, 430px); }
  body:not(.embed) .game-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--side-h); grid-template-areas: "stage" "side"; row-gap: 8px; }
  body:not(.embed) .well-dock { --gauge-w: 232px; --dig-w: 104px; --cap-w: 104px; --boost-w: 150px; }
  body:not(.embed) .strata-panel { display: none; }
  body:not(.embed) .ledger-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-rows: minmax(0, 1fr); align-content: stretch; gap: 0 12px; }
  body:not(.embed) :is(.side-top, .side-main) { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
}

/* Heights under 960 px: the stratum's name moves up beside "Your depth", the tool card loses its ladder,
   the upgrade cards lose their price line and tighten, and the lists give up their second lines. */
@media (min-width: 700px) and (max-height: 959px), (min-width: 700px) and (max-width: 899px) {
  :root { --mast-h: 56px; }
  body:not(.embed) .game-layout { padding-top: 8px; }
  body:not(.embed) .ledger-column { gap: 6px; }
  body:not(.embed) .tool-ladder, body:not(.embed) .tool-bar { display: none; }
  body:not(.embed) .tool-card { grid-template-columns: 38px minmax(0, 1fr); padding: 2px 6px; }
  body:not(.embed) .tool-art { width: 38px; height: 38px; }
  body:not(.embed) .tool-art .px-icon { width: 30px; height: 30px; }
  body:not(.embed) .tool-name { font-size: 16px; }
  body:not(.embed) .upgrade-afford { display: none; }
  body:not(.embed) .upgrade-fx { margin-top: 0; }
  body:not(.embed) .upgrade-card { grid-template-columns: 40px minmax(0, 1fr) 80px; padding: 0 3px; }
  body:not(.embed) .upgrade-buy-cost { gap: 2px; font-size: 21px; }
  body:not(.embed) .upgrade-art { width: 40px; height: 40px; }
  body:not(.embed) .upgrade-art .px-icon { width: 32px; height: 32px; }
  body:not(.embed) .upgrade-buy { min-height: 44px; }
  body:not(.embed) .blade-choice { gap: 4px; padding: 4px; }
  body:not(.embed) .shop-group > .shop-cards { gap: 4px; }
  body:not(.embed) .group-tabs .group-tab { min-height: 40px; }
  body:not(.embed) .ranking-row { padding: 1px 0; }
}
/* Side by side with the stage and under 960 px tall, the stratum's name sits beside "Your depth" instead of taking a row. */
@media (min-width: 1200px) and (max-height: 959px) {
  body:not(.embed) .stratum-line { grid-area: 1 / 1; z-index: 1; align-self: start; justify-self: end; max-width: 62%; margin: 2px 2px 0 0; padding: 3px 10px 0 4px; background: var(--cream); pointer-events: none; }
  body:not(.embed) .stratum-line strong { color: var(--wood-1); font-size: 12px; letter-spacing: .1em; }
  body:not(.embed) .stratum-line span { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) and (max-height: 959px) {
  body:not(.embed) .stratum-line { display: none; }
}
/* Heights under 860 px: the tool card folds into one line on the next-discovery plate. */
@media (min-width: 700px) and (max-height: 859px), (min-width: 700px) and (max-width: 899px) {
  body:not(.embed) .tool-card { display: none; }
  body:not(.embed) .geology-panel .tool-line { display: flex; margin: 0 0 2px; }
  body:not(.embed) .hit-rate { display: none; }
}
/* Heights under 780 px: that line goes too, and the rival and the tabs take a little less. */
@media (min-width: 700px) and (max-height: 779px) {
  body:not(.embed) .geology-panel .tool-line { display: none; }
  body:not(.embed) .side-tabs button { min-height: 38px; }
  body:not(.embed) .rival-callout, body:not(.embed) .rival-jump { min-height: 40px; }
  body:not(.embed) .group-tabs .group-tab { min-height: 36px; }
  body:not(.embed) .ranking-tabs button { min-height: 36px; }
  body:not(.embed) :is(.shop-panel, .standings-panel, .cards-panel) { gap: 4px; }
  body:not(.embed) .field-legend { padding-top: 2px; }
  body:not(.embed) .shaft-ledger li:nth-child(n + 9) { display: none; }
  body:not(.embed) .ledger-item { padding: 2px 8px; }
  body:not(.embed) .rank-number { font-size: 17px; }
  body:not(.embed) .upgrade-name { font-size: 16px; }
  body:not(.embed) .upgrade-fx { line-height: 1.12; }
  body:not(.embed) .blade-choice { border-width: 1px; padding: 3px; }
}
@media (min-width: 700px) {
  body:not(.embed) .ranking-row.has-fan { padding-bottom: 26px; }
  body:not(.embed) .fan-chip { bottom: 4px; }
}
/* Under 720 px tall a side panel scrolls inside itself; the page still never does. */
@media (min-width: 700px) and (max-height: 719px) {
  body:not(.embed) :is(.shop-panel, .standings-panel, .cards-panel) { overflow-y: auto; }
}
/* Tall windows have room for the second lines. */
@media (min-width: 900px) and (min-height: 960px) {
  body:not(.embed) .ranking-gap { display: block; }
  body:not(.embed) .ranking-row { padding: 4px 0; }
  body:not(.embed) .stratum-line { white-space: normal; }
}

/* ── Embed / framed Player Card: the world gets the height ──────────────── */
body.embed { --mast-h: 44px; height: 100dvh; overflow: hidden; font-size: 13px; }
body.embed::before { background: linear-gradient(var(--wood-4) 0 2px, var(--wood-2) 0 3px, var(--wood-1) 0 calc(100% - 3px), var(--crude) 0); }
.embed .page-shell { display: grid; grid-template-rows: 44px minmax(0, 1fr) 14px; width: 100%; height: 100dvh; padding: 0; }
.embed .masthead { height: 44px; gap: 4px; padding: 0 0 0 8px; }
.embed .brand { min-height: 44px; }
.embed .brand-wide { display: none; }
.embed .brand-stack { display: block; width: 64px; height: 30px; }
.embed .primary-nav, .embed .account-button { display: none; }
.embed .header-actions { flex: 0 0 184px; width: 184px; justify-content: flex-end; gap: 0; margin-left: auto; }
.embed .help-button { display: inline-flex; color: var(--bone-2); }
.embed .browser-button { width: 140px; min-height: 44px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.embed main { min-height: 0; }
.embed .game-layout { height: 100%; display: grid; grid-template-columns: 146px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 44px 52px 44px; grid-template-areas: "world world" "rail rail" "stats dig" "toolbar toolbar"; align-items: stretch; gap: 4px 8px; padding: 0 8px 2px; }
.embed .stage-column, .embed .ledger-column { display: contents; }
.embed .field-bar { position: fixed; z-index: 3; top: 0; left: 80px; right: 188px; display: block; height: 44px; min-height: 0; padding: 0; container-type: normal; }
.embed .field-ident { display: flex; flex-direction: column-reverse; justify-content: center; height: 44px; }
.embed .field-kicker { margin: 0; }
.embed .field-kicker .eyebrow { display: none; }
.embed .field-presence { font-size: 11px; }
.embed .field-name { font-size: 20px; line-height: .9; }
.embed .field-title { min-height: 26px; }
.embed .inviter-chip, .embed .share-button { display: none; }
.embed .scene-frame { grid-area: world; height: auto; min-height: 0; margin: 0 -8px; }
.embed .line-rail { grid-area: rail; margin: -4px -8px 0; }
.embed .depth-block { grid-area: stats; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; }
.embed .depth-block .eyebrow, .embed .stratum-line { display: none; }
.embed .depth-stat { padding: 1px 6px 2px; border-width: 2px; }
.embed .depth-stat strong { margin: 0; font-size: 32px; line-height: .8; }
.embed .scrip-stat { text-align: left; padding: 0; border: 0; background: none; box-shadow: none; }
.embed .scrip-stat strong { margin: 0; font-size: 18px; }
.embed .scrip-stat strong::after { content: attr(data-unit); margin-left: 2px; color: var(--bone-2); font: 700 11px/1 var(--text); letter-spacing: .04em; }
.embed .rival-panel, .embed .geology-panel, .embed .shop-panel, .embed .standings-panel, .embed .field-roster, .embed .strata-panel, .embed .mobile-tabs, .embed .stage-notes { display: none; }
.embed .well-dock { position: static; grid-area: dig; margin: 0; }
.embed .well-dock::before { display: none; }
.embed #boostButton, .embed .well-readout { display: none; }
/* One row: the gauge beside DIG and CAP & SELL. Feedback stays for screen readers; a resting rig shows over the gauge. */
.embed .well-panel { height: 100%; min-height: 0; padding: 0; background: none; border: 0; gap: 6px; grid-template-columns: minmax(0, 1fr) 96px 80px; grid-template-rows: 46px; grid-template-areas: "gauge dig cap"; }
.embed .action-feedback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.embed .dig-button, .embed .cap-button { --px: 4px; height: 46px; gap: 1px; }
.embed .dig-label { font-size: 25px; }
.embed .dig-icon { width: 20px; height: 20px; }
.embed .dig-label { flex-direction: row; gap: 4px; }
.embed .bite-pop { display: none; }
/* The ready chips hang from the stage's top edge, over the sky, clear of the rail; the digging count lives in the header's presence line. */
.embed .ready-chips { grid-area: world; z-index: 4; align-self: start; justify-self: center; margin: 6px 0 0; }
.embed .upgrade-ready:not([hidden]) { display: inline-flex; }
.embed .digging-now { display: none; }
.embed .cap-label { font-size: 13px; }
.embed .cap-detail { font-size: 10px; }
.embed .embed-toolbar { grid-area: toolbar; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .74fr) minmax(0, 1fr); gap: 6px; }
.embed .embed-toolbar > button { min-height: 44px; padding: 4px 6px; font-size: 13px; white-space: nowrap; }
.embed .embed-upgrade { display: grid; grid-template-columns: minmax(0, 1fr) 50px; min-width: 0; }
.embed .embed-upgrade select { height: 44px; padding: 4px 6px; font-size: 13px; }
.embed .embed-upgrade button { min-height: 44px; padding: 4px; font-size: 13px; }
.embed #embedBuyButton { --cap-img: var(--cap-acid); --cap-face: var(--acid); --cap-ink: var(--crude); }
.embed .embed-boost { --cap-img: var(--cap-gold); --cap-face: var(--gold); --cap-ink: var(--crude); }
.embed .embed-boost.is-active { --cap-img: var(--cap-cream); --cap-face: var(--cream); --cap-ink: var(--wood-0); }
.embed .embed-share { --cap-img: var(--cap-dusty); --cap-face: var(--dusty); --cap-ink: var(--crude); }
.embed .page-footer { display: flex; align-items: center; margin: 0; padding: 0 8px; border: 0; font-size: 10px; line-height: 1; letter-spacing: -.005em; }
.embed .page-footer nav { display: none; }
.embed .discovery-banner { position: fixed; z-index: 35; inset: 0 0 auto; height: 44px; min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 0 12px; box-shadow: none; }
.embed .discovery-kicker, .embed .discovery-reward { display: none; }
.embed .discovery-head { flex: 0 0 auto; }
.embed .discovery-title { font-size: 24px; }
.embed .discovery-body { flex: 1 1 0; }
.embed .discovery-line { overflow: hidden; font-size: 12px; line-height: 1.2; }
.embed .toast { top: 0; left: 0; right: 0; transform: none; width: auto; min-height: 44px; padding: 0 0 0 10px; gap: 8px; flex-wrap: nowrap; border: 0; border-image: none; background: var(--wood-1); box-shadow: inset 0 -3px 0 var(--crude), inset 0 -5px 0 var(--wood-3); font-size: 12px; line-height: 1.3; }
.embed .connection-notice { background: #2e1109; }
.embed .toast p { flex-basis: auto; }
.embed .claim-prompt { bottom: auto; }
.embed .claim-prompt span { display: none; }
.embed .toast .primary-button { padding-inline: 12px; }
.embed .sheet { --pa: 2px; width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 0 10px 12px; }
.embed .sheet-head { padding: 16px 44px 20px 0; margin-bottom: 12px; }
.embed .sheet-head h2 { font-size: 34px; }
.embed .help-list > div { grid-template-columns: 70px minmax(0, 1fr); padding: 9px 0; }

/* ── Compact Player Card: X's 274–360 px squares ─────────────────────────────
   The world keeps at least half the frame. Controls are at least 40 px (STRIKE, CAP & SELL and the
   survey spots 44+), text at least 11 px. The depth and scrip totals sit on the stage as a plaque,
   the footer's legal line stays in the help sheet, and the line rail appears only when the frame is
   tall enough (360 px) to keep the stage at half. */
@media (max-width: 360px) {
  body.embed { --mast-h: 40px; }
  .embed .page-shell { grid-template-rows: 40px minmax(0, 1fr); }
  .embed .page-footer { display: none; }
  .embed .masthead { height: 40px; padding: 0 0 0 6px; }
  .embed .brand { min-height: 40px; }
  .embed .brand-stack { width: 52px; height: 24px; }
  .embed .header-actions { flex: 0 0 auto; width: auto; }
  .embed .icon-button.help-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  .embed .browser-button { width: auto; min-height: 40px; padding: 0 8px; font-size: 11px; }
  .embed .browser-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .embed .field-bar { left: 62px; right: 104px; height: 40px; }
  .embed .field-ident { position: relative; display: block; height: 40px; }
  .embed .field-title { display: block; width: 100%; height: 40px; padding-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .embed .field-name { font-size: 17px; line-height: 1; }
  .embed #derbyTitle { display: block; overflow: hidden; text-overflow: ellipsis; }
  .embed .field-kicker { position: absolute; left: 0; right: 0; bottom: 3px; pointer-events: none; }
  .embed .field-presence { max-width: 100%; overflow: hidden; }
  .embed .field-presence #fieldPresence { overflow: hidden; text-overflow: ellipsis; }
  .embed .game-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 46px 40px; grid-template-areas: "world" "dig" "toolbar"; gap: 3px; padding: 0 8px 3px; }
  .embed .line-rail { display: none; }
  .embed .depth-block { grid-area: world; align-self: start; justify-self: start; z-index: 2; margin: 4px 0 0; padding: 3px 5px; gap: 2px; background: var(--crude); }
  .embed .depth-stat { padding: 1px 5px 3px; }
  .embed .depth-stat strong { font-size: 24px; }
  .embed .scrip-stat strong { font-size: 15px; }
  .embed .well-panel { grid-template-columns: minmax(0, 1fr) 84px 72px; }
  .embed .dig-label { font-size: 23px; }
  .embed .cap-label { font-size: 12px; }
  .embed .cap-detail { font-size: 11px; }
  .embed .embed-toolbar { grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, 1fr); gap: 4px; }
  .embed .embed-toolbar > button { min-width: 40px; min-height: 40px; padding: 2px 1px; font-size: 11px; line-height: 1.05; white-space: normal; }
  .embed .embed-upgrade { grid-template-columns: minmax(0, 1fr) 40px; }
  .embed .embed-upgrade select { height: 40px; min-height: 40px; padding: 2px 3px; font-size: 11px; }
  .embed .embed-upgrade button { min-height: 40px; padding: 2px; font-size: 11px; }
  .embed .discovery-banner { height: 40px; }
  .embed .discovery-title { font-size: 20px; }
  .embed .discovery-line { font-size: 11px; }
  .embed .toast { min-height: 40px; font-size: 11px; }
}
@media (max-width: 360px) and (min-height: 350px) {
  .embed .game-layout { grid-template-rows: minmax(0, 1fr) 40px 46px 40px; grid-template-areas: "world" "rail" "dig" "toolbar"; }
  .embed .line-rail { display: flex; min-height: 40px; margin: 0 -8px; }
  .embed .rail-button { min-width: 40px; min-height: 40px; padding: 0 10px; }
  .embed .rail-range { font-size: 15px; }
}

/* The taller streak gauge on a very short phone: the deck gives the pixels back so the stage keeps its height (320 × 568). */
@media (max-width: 699px) and (max-height: 600px) {
  body[data-f-streak]:not(.embed) .well-dock { padding-top: 10px; padding-bottom: 6px; }
  body[data-f-streak]:not(.embed) .well-panel { grid-template-rows: 40px 50px 30px; gap: 4px; }
}

body:not([data-f-ui]) .more-row[data-open="settingsDialog"] { display: none; }
/* More keeps all five rows on a short phone (the Sound and motion row joined them). */
@media (max-width: 699px) and (max-height: 720px) { body[data-tab="more"]:not(.embed) .more-row { min-height: 48px; padding-block: 4px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── Opening curtain (ui/curtain.mjs; ui/curtain-boot.js marks a first visit) ───────────────── */
/* Until the canvas is painted the page is plain crude-oil pleats (near-black green, a teal-blue glint), so nothing flashes. */
html.curtain-on { background: repeating-linear-gradient(90deg, #07120f 0 5px, #0b1b16 5px 8px, #173a35 8px 9px, #10271f 9px 11px, #0b1b16 11px 14px, #040b09 14px 18px); }
html.curtain-on body { visibility: hidden; }
.curtain { position: fixed; inset: 0; z-index: 9000; width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; cursor: pointer; }
.curtain[data-state="lifting"], .curtain[data-state="fading"] { pointer-events: none; cursor: auto; }

/* Preview builds only (PREVIEW_LABEL): a corner ribbon that never takes a tap. */
.preview-ribbon { position: fixed; z-index: 8000; top: calc(env(safe-area-inset-top, 0px) + 9px); left: -31px; width: 98px; padding: 1px 0; background: var(--flare); color: var(--crude); font: 900 8px/1.5 var(--text); letter-spacing: .16em; text-align: center; opacity: .85; transform: rotate(-45deg); pointer-events: none; user-select: none; }