/* CONSENSUS dApp: the design system, lifted from the landing page so the two
   cannot drift apart.

   The landing page carries this inline because it is one document. The dApp is
   several views, so it lives here instead and every view links it. Nothing about
   the material changed in the move: same tokens, same names, same rules.

   == The one rule to keep ==
   Flat, opaque stock with a hairline edge. The frosted-glass build this
   replaced put a permanent haze between the reader and the colour underneath,
   and colour is the whole point of a board this size. A card is exactly the
   colour it says it is. --glass-sheen stays as `none` rather than being removed
   so the many `background: var(--glass-sheen), <fill>` rules stay valid. */

:root {
  --paper:    #F8F7F3;
  --paper-2:  #F1EFE9;
  --card:     #FFFFFF;
  --board:    #EEEBE2;
  --ink:      #15130E;
  --ink-2:    #5A5246;
  --ink-3:    #837968;
  --line:     #E4E0D6;
  --line-2:   #D6D0C2;

  --gold:     #A87C3A;
  --gold-lit: #D6AC5B;
  --gold-pale:#F0E2C2;

  /* The seven. Used for tiers and seats alike, in this order. */
  --c1: #B5523C;
  --c2: #DE8F2E;
  --c3: #C9A227;
  --c4: #4E9E76;
  --c5: #3A7FA6;
  --c6: #7C56A6;
  --c7: #BC4468;

  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --deed: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;

  --s--2: 0.7rem;
  --s--1: clamp(0.79rem, 0.77rem + 0.12vw, 0.87rem);
  --s-0:  clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  --s-1:  clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
  --s-2:  clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem);
  --s-3:  clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  --s-4:  clamp(2.7rem, 1.9rem + 4vw, 5.2rem);

  --pad: clamp(1.25rem, 3.4vw, 3.25rem);
  --nav-h: 68px;

  --glass-sheen: none;
  --glass-fill: var(--card);
  --glass-fill-strong: var(--card);
  --glass-ring: rgba(21,19,14,.13);
  --glass-shadow: 0 14px 30px -20px rgba(21,19,14,.28);
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Any rule that sets `display` on an element outranks the user agent's
   `[hidden] { display: none }`, so an element with both a display and a hidden
   attribute stays visible. This page toggles several panels with `hidden`, and
   one of them, the join cover, has `display: grid`: it sat over the board after
   the player had already entered. One line, rather than remembering the trap at
   every call site. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--s-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── Type ────────────────────────────────────────────── */

.deed {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

/* Match the landing page: Manrope for interface headings, Bodoni only on
   the illustrated Company cards. Keep controls on the same font stack. */
h1, h2, h3, h1.deed, h2.deed, h3.deed {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.03em;
}
button, input, select, textarea { font-family: var(--sans); }

.eyebrow {
  font-size: var(--s--2);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fine { font-size: var(--s--1); color: var(--ink-2); }

/* Every on-chain number on this site is tabular, so columns of them line up
   and a figure never jitters as it updates. */
.num { font-variant-numeric: tabular-nums; }

/* ── Buttons ─────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.78rem 1.4rem; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: var(--s--1); font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: #2A1E08;
  background: var(--gold-lit);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--glass-ring));
  box-shadow: 0 6px 18px -10px rgba(168,124,58,.7);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, filter .18s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 26px -10px rgba(168,124,58,.75); }
.btn--quiet {
  color: var(--ink);
  background: var(--glass-sheen), var(--glass-fill);
  border: 1px solid var(--glass-ring);
}
.btn--quiet:hover { border-color: var(--gold); color: var(--gold); filter: none; }
.btn--lg { padding: 0.95rem 1.9rem; font-size: var(--s-0); }
.btn--wallet { font-variant-numeric: tabular-nums; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Surfaces ────────────────────────────────────────── */

.panel {
  background: var(--glass-sheen), var(--glass-fill);
  border: 1px solid var(--glass-ring);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  padding: clamp(1.1rem, 2.2vw, 1.7rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.panel:hover {
  border-color: color-mix(in srgb, var(--gold) 35%, var(--glass-ring));
  box-shadow: 0 18px 36px -18px rgba(21,19,14,.18), 0 0 0 1px rgba(168,124,58,.12);
}

.panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem; min-height: 28px;
}

.panel__title { font-size: var(--s-1); margin: 0; }

/* ── Layout ──────────────────────────────────────────── */

.main {
  padding: clamp(1rem, 1.8vw, 1.75rem) clamp(1rem, 2vw, 2rem) 2rem;
  max-width: 1760px;
  width: 100%;
  margin: 0 auto;
}

.stack { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }

.grid-2 { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.section { margin-top: clamp(3rem, 7vw, 5.5rem); scroll-margin-top: calc(var(--nav-h) + 1rem); }

.section__head { max-width: 62ch; margin-bottom: clamp(1.2rem, 2.6vw, 2rem); }
.section__title { font-size: var(--s-2); margin: .3rem 0 .5rem; }

/* ── Top navigation ──────────────────────────────────── */

/* Three tracks, not a flex row with something absolutely positioned over it.
   The centre group was absolute so it could be centred against the whole bar,
   and it sat on top of the right-hand group as soon as that group got wide
   enough to reach it. Equal outer tracks centre the middle one honestly and
   nothing can overlap anything. */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav__brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.nav__logo {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  box-shadow: 0 0 0 1px var(--gold-pale), 0 2px 6px -2px rgba(21,19,14,.2);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__brand:hover .nav__logo {
  transform: rotate(15deg) scale(1.08);
  box-shadow: 0 0 0 1.5px var(--gold), 0 4px 12px -3px rgba(168,124,58,.35);
}
.nav__name { font-family: var(--sans); font-size: 1rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.nav__tag { font-size: var(--s--2); color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; }

.nav__links { display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.1rem); }

.nav__link {
  padding: .5rem .7rem; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink-2);
  font-size: var(--s--1); font-weight: 700;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav__link:hover { color: var(--ink); background: var(--card); }

/* `min-width: 0` because this sits in an `auto` grid column, whose floor is the content's
   own minimum. Without it the five controls refuse to wrap, the column grows past the bar,
   and the whole page scrolls sideways: 25px of it at a 654px window. */
.nav__right { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; min-width: 0; }
.nav__right .btn--wallet { padding: 0.54rem 1.15rem; font-size: var(--s--1); }

/* ── Hero ────────────────────────────────────────────── */

.hero { padding: clamp(2.5rem, 8vw, 6rem) 0 clamp(1rem, 3vw, 2rem); }
.hero__title { font-size: var(--s-4); margin: .4rem 0 .8rem; max-width: 16ch; }
.hero__lede { font-size: var(--s-1); color: var(--ink-2); max-width: 46ch; margin: 0 0 1.8rem; line-height: 1.45; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }

/* The one button the page is built around. Larger, and it carries the only
   drop shadow on the page that reads as lift rather than as a hairline. */
.btn--play {
  padding: 1.05rem 2.6rem;
  font-size: var(--s-0);
  box-shadow: 0 10px 30px -12px rgba(168,124,58,.85);
}
.btn--play:hover { box-shadow: 0 18px 40px -14px rgba(168,124,58,.9); }

/* ── Steps ───────────────────────────────────────────── */

.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.step { background: var(--card); padding: 1.1rem 1.3rem; display: grid; grid-template-columns: 2rem 1fr; gap: .2rem 1rem; align-items: baseline; }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--deed); font-size: var(--s-1); font-weight: 800; color: var(--gold);
  grid-row: span 2;
}
.step__t { font-weight: 700; }
.step__d { font-size: var(--s--1); color: var(--ink-2); grid-column: 2; }

/* ── Tier table ──────────────────────────────────────── */

.tiers { width: 100%; border-collapse: collapse; font-size: var(--s--1); }
.tiers th, .tiers td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.tiers th { font-size: var(--s--2); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; }
.tiers td { font-variant-numeric: tabular-nums; }
.tiers tr:last-child td { border-bottom: 0; }
.tier { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.tier__pip { width: 9px; height: 9px; border-radius: 999px; }

/* ── Stats ───────────────────────────────────────────── */

/* Hairlines are drawn by each cell rather than by a 1px gap over a coloured
   container. The gap trick is prettier to write, but the container colour also
   shows through any cell the auto-fit grid leaves empty on the last row, which
   reads as a large grey block sitting in the panel. Shadows only exist where a
   cell does, so an odd number of stats now ends in white space instead. The
   right and bottom edges are clipped by the container's own border. */
.stats {
  display: grid;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  box-shadow: 0 4px 14px -6px rgba(21,19,14,.08), inset 0 -2px 0 var(--line-2);
}

.stat {
  padding: 0.85rem 1rem;
  display: grid; gap: 0.18rem;
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
  transition: background-color 0.25s ease;
}
.stat:hover {
  background-color: color-mix(in srgb, var(--paper) 70%, var(--card));
}
.stat__k { font-size: var(--s--2); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.stat__v { font-size: var(--s-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat__d { font-size: var(--s--1); color: var(--ink-2); }

/* ── Chain state ─────────────────────────────────────── */

/* A value that has not arrived yet reads as a quiet placeholder rather than a
   zero, because a zero is a claim and an unloaded figure is not one. */
.pending { color: var(--ink-3); }
.pending::after { content: "..."; }

.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.6rem; border-radius: 999px;
  font-size: var(--s--2); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--glass-ring); background: var(--card); color: var(--ink-2);
}
.badge--live { color: #2F6B4F; border-color: color-mix(in srgb, var(--c4) 45%, var(--glass-ring)); }
.badge--warn { color: #8A4A20; border-color: color-mix(in srgb, var(--c2) 45%, var(--glass-ring)); }

.dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }

/* ── Notices ─────────────────────────────────────────── */

.notice {
  border: 1px solid var(--glass-ring);
  border-left: 3px solid var(--gold);
  background: var(--card);
  border-radius: var(--r-sm);
  padding: 0.85rem 1.1rem;
  font-size: var(--s--1); color: var(--ink-2);
}
.notice--warn { border-left-color: var(--c2); }

@media (max-width: 1000px) {
  /* Two rows rather than one squeezed one. Brand and wallet hold the first;
     everything you can actually press gets the full width of the second. */
  .nav {
    height: auto;
    grid-template-columns: 1fr auto;
    padding: .7rem 1rem; gap: .5rem 1rem;
  }
  .nav__tag { display: none; }
  .nav__centre { grid-row: 2; grid-column: 1 / -1; justify-self: start; overflow-x: auto; }
  .nav__right { grid-row: 1; grid-column: 2; }
  .section { scroll-margin-top: 8rem; }
}

/* Below this the right-hand group has to wrap too, or the wallet button pushes
   the outbound links off the edge. */
@media (max-width: 620px) {
  .nav { grid-template-columns: 1fr; }
  .nav__right { grid-row: 3; grid-column: 1; justify-content: flex-start; flex-wrap: wrap; }
}

/* ── The stage ───────────────────────────────────────── */

/* Where the board is drawn. Sized by aspect so the frame does not jump when the
   real thing replaces what is inside it. */
.stage {
  aspect-ratio: 16 / 9;
  min-height: 340px;
  display: grid; place-items: center;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--board);
  border: 1px solid var(--glass-ring);
  border-radius: var(--r-lg);
}

.stage__empty { max-width: 60ch; }

@media (max-width: 820px) {
  .stage { aspect-ratio: auto; min-height: 0; }
}

/* The canvas fills the stage. The fallback sits centred underneath it and is
   removed once the board has actually built, so a browser without WebGL is
   told what is missing rather than shown an empty box. */
.stage { position: relative; overflow: hidden; padding: 0; }
.stage canvas { display: block; width: 100%; height: 100%; }
.stage__fallback { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 2rem; }

/* ── The play screen ─────────────────────────────────── */

/* Wide screens keep all three panels beside each other. At laptop widths the
   board and pack share a row, with a horizontal stats panel directly below. */
.play {
  display: grid;
  gap: clamp(.8rem, 1.2vw, 1.25rem);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: stretch;
}

@media (min-width: 760px) and (max-width: 1239px) {
  .play { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .play__actions { grid-column: 1 / -1; }
  .play__actions .actions__btns { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .play__actions .referral-offer { grid-column: 1 / -1; }
  .play__actions .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .play__actions .stat:last-child { grid-column: span 2 !important; }
  .play__actions .actions .btn { white-space: normal; }
}
@media (max-width: 759px) { .play { grid-template-columns: minmax(0, 1fr); } }

/* A grid item's default `min-width: auto` is its content's minimum, not zero, so one
   stubborn figure inside a panel widens the whole column past the page. On a 375px phone
   that was 24px of sideways scroll on every screen. The panels may shrink; nothing inside
   them needs the extra, which is why nothing spills when they do. */
.play > .panel { min-width: 0; padding: clamp(.85rem, 1.25vw, 1.3rem); }
.play .panel__head { margin-bottom: .7rem; gap: .65rem; }
.play .stat { padding: .7rem .75rem; gap: .2rem; align-content: start; }
.play .stat__v { font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.35; }
.play .stat__k { letter-spacing: .07em; }
.play .stat__d { font-size: .75rem; line-height: 1.45; }
.play #unclaimed { padding-top: .65rem; }

/* ── Slots ───────────────────────────────────────────── */

/* ── 3D Tabletop Diorama Viewport ────────────────────── */

.play__slots .slotwrap.diorama-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 410px;
  min-height: 360px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #FFFFFF 0%, #F5F1E6 100%);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 2px 10px rgba(21,19,14,0.06), 0 8px 24px -10px rgba(21,19,14,0.12);
}

.diorama-stage {
  width: 100%;
  flex: 1;
  min-height: 0;
  height: auto;
  /* The renderer follows this box; its previous canvas size must not enlarge
     the next grid/flex layout when the viewport changes. */
  contain: size;
  position: relative;
}

.diorama-stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: grab;
  outline: none;
}

.diorama-stage canvas:active {
  cursor: grabbing;
}

.diorama-hud {
  position: relative;
  flex: 0 0 auto;
  margin: 0 0.85rem 0.85rem;
  z-index: 2;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 0.65rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: 0 8px 20px -6px rgba(21,19,14,0.14);
  pointer-events: none;
}

.diorama-hud__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.diorama-hud__no {
  font-size: var(--s--1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.diorama-hud__tier {
  font-size: var(--s--1);
  font-weight: 800;
  color: var(--gold);
}

.diorama-hud__stats {
  display: flex;
  justify-content: space-between;
  font-size: var(--s--2);
  color: var(--ink-2);
  font-weight: 700;
}

.diorama-hud__tip {
  font-size: 0.65rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.1rem;
  text-align: center;
}

/* ── Diorama Slots: Miniature Architectural Parcels ─── */

.slot {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: .75rem .85rem;
  min-height: 125px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--card);
  box-shadow: 0 4px 0 #D4CEBF, 0 10px 18px -4px rgba(21,19,14,.12);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease;
}

.slot:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 8px 0 #C4BCAB, 0 16px 26px -6px rgba(168,124,58,.25);
}

.slot__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .3rem;
}

.slot__no {
  font-size: var(--s--2);
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.slot__tier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .4rem;
  font-weight: 700;
  font-size: var(--s--1);
}

.slot__pip {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.slot__model {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: .35rem 0;
}

.slot__bldg {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 8px rgba(21,19,14,.18));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.slot:hover .slot__bldg {
  transform: scale(1.1) translateY(-2px);
}

.slot__rates {
  display: flex;
  flex-direction: column;
}

.slot__rate {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--ink);
}

.slot__rate-unit {
  font-size: 0.62rem;
  color: var(--ink-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.slot__footer {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.slot__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--ink-3);
  font-weight: 600;
}

/* An empty slot is a blueprint site awaiting development */
.slot--empty {
  border: 1.5px dashed var(--gold-pale);
  background: color-mix(in srgb, var(--board) 30%, #FFFFFF);
  background-image: radial-gradient(var(--gold-lit) 1px, transparent 1px);
  background-size: 8px 8px;
  box-shadow: 0 3px 0 #D8D2C4, inset 0 0 0 1px rgba(255,255,255,0.7);
}

.slot--empty:hover {
  border-color: var(--gold);
  background-color: color-mix(in srgb, var(--gold-pale) 35%, #FFFFFF);
  transform: translateY(-3px);
  box-shadow: 0 6px 0 #C8C2B4, 0 12px 20px -6px rgba(168,124,58,.2);
}

.slot__vacant-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}

.slot__vacant-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin: auto 0;
  opacity: 0.85;
}

.slot__vacant-icon {
  width: 44px;
  height: 44px;
}

.slot__vacant-text {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .02em;
}

.cover.diorama-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  place-content: center;
  align-items: center;
  gap: .4rem;
  border: 1px dashed var(--gold);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--board) 93%, transparent);
  backdrop-filter: blur(2px);
  cursor: pointer;
  text-align: center;
  padding: .6rem;
  box-shadow: 0 4px 16px -6px rgba(21,19,14,.1);
  transition: background .2s, border-color .2s, box-shadow .2s;
}

.cover.diorama-cover:hover, .cover.diorama-cover:focus-visible {
  background: var(--board);
  border-color: var(--gold);
  box-shadow: 0 8px 24px -8px rgba(168,124,58,.25);
  outline: none;
}

.cover__plaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}

.cover__icon {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 2px 4px rgba(21,19,14,.15));
}

/* How close a Company is to the ceiling that ends it. */
.bar { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: .15rem; }
.bar__fill { height: 100%; background: var(--gold); transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1); }

.tag {
  display: inline-block; padding: .05rem .4rem; border-radius: 999px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--gold-pale); color: #6A4B18;
}

/* ── The pack ────────────────────────────────────────── */

.play__pack .pack {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* The card you are buying, face up, with what can come out of it printed on it. */
.pack__card {
  width: 100%;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  padding: .7rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .65rem;
  box-shadow: 0 8px 24px -8px rgba(21,19,14,.12), inset 0 -3px 0 var(--line-2);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.pack__card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 16px 32px -12px rgba(168,124,58,.26), inset 0 -3px 0 var(--gold);
}

/* ── 3D Company Pack Showcase Diorama ────────────────── */
.pack__diorama-wrap {
  position: relative;
  width: 100%;
  height: 190px;
  min-height: 170px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #FFFFFF 0%, #F5F1E6 100%);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 2px 10px rgba(21,19,14,0.05), 0 4px 14px -6px rgba(21,19,14,0.08);
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.pack__diorama-wrap:hover {
  border-color: var(--gold);
  box-shadow: inset 0 2px 10px rgba(21,19,14,0.05), 0 8px 20px -6px rgba(168,124,58,0.25);
}

.pack-diorama-stage {
  width: 100%;
  height: 100%;
  position: relative;
}

.pack-diorama-stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  outline: none;
}

.pack__diorama-badge {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .28rem .75rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--s--2);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .03em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(21, 19, 14, 0.08);
  transition: all .2s ease;
  white-space: nowrap;
}

.pack__diorama-pip {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 4px rgba(168,124,58,0.5);
  transition: background-color .2s ease;
}

.pack__seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
}

.pack__logo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px var(--gold-pale), 0 2px 6px -2px rgba(21,19,14,.2);
}

.pack__price-box {
  text-align: center;
  display: grid;
  gap: .3rem;
}

.pack__price {
  font-family: var(--sans);
  font-size: var(--s-2);
  line-height: 1;
  margin: 0;
}

.pack__burn {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--s--1);
}

.odds {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .45rem .75rem;
  padding: .75rem .9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.odd {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: .5rem;
  align-items: center;
  font-size: var(--s--1);
  padding: .3rem .45rem;
  border-radius: var(--r-xs);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}

.odd:hover,
.odd.is-highlighted {
  background: var(--gold-wash);
  border-color: var(--gold-pale);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(168,124,58,0.12);
}

.odd__pip { width: 9px; height: 9px; border-radius: 999px; }
.odd__n { font-variant-numeric: tabular-nums; font-weight: 700; }

.pack__card .btn--play {
  width: 100%;
  padding: .95rem 1.6rem;
  margin-top: .2rem;
  box-shadow: 0 8px 24px -10px rgba(168,124,58,.8);
}

/* ── Right column: Actions & Stats ───────────────────── */

.play__actions .actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.actions__btns {
  display: grid;
  gap: .55rem;
}

.actions .btn {
  width: 100%;
  white-space: nowrap;
}

.play .panel > .fine {
  margin-top: auto !important;
  padding-top: .9rem;
}

/* ── Navigation, centred ─────────────────────────────── */

.nav__centre { display: flex; align-items: center; gap: .3rem; justify-self: center; }

.nav__here {
  padding: .5rem .9rem; border-radius: var(--r-sm);
  font-size: var(--s--1); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2);
}

/* An outbound link with a mark on it. The mark is 1em so it sits on the text's
   own baseline rhythm rather than needing to be nudged. */
.nav__out {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .7rem; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink-2);
  font-size: var(--s--1); font-weight: 700; white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav__out:hover { color: var(--ink); background: var(--card); }
.nav__out svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: 0 0 auto; }

.nav__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  color: var(--ink-2); text-decoration: none;
  transition: color .15s, background .15s;
}
.nav__icon:hover { color: var(--ink); background: var(--card); }
.nav__icon svg { width: 15px; height: 15px; fill: currentColor; }

/* ── Modals ──────────────────────────────────────────── */

/* Native <dialog>: it gets focus trapping, Escape and inertness for free, and
   this page has no framework to reimplement any of that with. */
dialog.sheet {
  border: 1px solid var(--glass-ring);
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  width: min(920px, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  overflow: auto;
}
dialog.sheet::backdrop { background: rgba(21,19,14,.42); }

.sheet__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) clamp(1.1rem, 2.4vw, 1.9rem) .9rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.sheet__body { padding: clamp(1.1rem, 2.4vw, 1.9rem); display: grid; gap: 1.2rem; }
.sheet__close {
  border: 1px solid var(--glass-ring); background: var(--card); color: var(--ink-2);
  border-radius: 999px; width: 32px; height: 32px; cursor: pointer; font-size: 16px; line-height: 1;
}
.sheet__close:hover { color: var(--ink); border-color: var(--gold); }

/* ── How to Play, as a picture rather than a list ────── */

.flow { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.card {
  position: relative;
  border: 1px solid var(--glass-ring); border-radius: var(--r-md);
  background: var(--card); padding: 1rem;
  display: grid; gap: .45rem; align-content: start;
}
.card__n {
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--gold-pale); color: #6A4B18;
  font-family: var(--deed); font-weight: 800; font-size: .85rem;
}
.card__t { font-weight: 800; font-size: var(--s--1); }
.card__d { font-size: var(--s--2); color: var(--ink-2); line-height: 1.5; }

/* The one figure the step is actually about, big enough to be the thing you see
   first. The words underneath are there to confirm it, not to deliver it. */
.card__big { font-family: var(--deed); font-size: var(--s-2); line-height: 1; }
.card__unit { font-size: var(--s--2); color: var(--ink-3); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ── Slot groups ─────────────────────────────────────── */

.slotgroup { position: relative; display: grid; gap: .55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slotgroup + .slotgroup { margin-top: .55rem; }

/* A locked group is one thing, not three. The cover sits over the whole row and
   is what the player actually interacts with. */
.cover {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; gap: .4rem; justify-items: center;
  border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--board) 92%, transparent);
  cursor: pointer; text-align: center; padding: .6rem;
  transition: background .15s, border-color .15s;
}
.cover:hover, .cover:focus-visible { background: var(--board); border-color: var(--gold); outline: none; }

.cover__label { font-size: var(--s--1); font-weight: 800; color: var(--ink-2); }
.cover__price { font-size: var(--s--2); color: var(--ink-3); }

/* The unlock button is hidden until the group is hovered or focused, which is
   what keeps a locked row quiet until someone asks it a question. */
.cover__btn { display: none; }
.cover:hover .cover__btn, .cover:focus-visible .cover__btn, .cover.is-open .cover__btn { display: inline-flex; }
.cover:hover .cover__label, .cover:focus-visible .cover__label, .cover.is-open .cover__label { display: none; }

/* ── Join: Tabletop Entry Ticket ─────────────────────── */

.join {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  border-radius: var(--r-md); padding: .75rem; text-align: center;
  background: rgba(248, 247, 243, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.join__ticket {
  background: #FFFFFF;
  border: 1.5px solid var(--gold);
  border-radius: var(--r-md);
  padding: 1.5rem 1.6rem;
  max-width: 320px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  box-shadow: 0 16px 36px -10px rgba(21,19,14,.24), 0 4px 0 var(--gold-lit);
  animation: softScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.join__seal {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.join__logo {
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--gold), 0 2px 6px rgba(21,19,14,.15);
  flex: 0 0 auto;
}

.slotwrap { position: relative; }

/* The price is the display figure and the button says one thing. Putting the
   figure inside the button made a long label that wrapped badly and buried the
   only number that mattered in the middle of a sentence. */
.join__price { margin: 0; font-size: var(--s-3); line-height: 1; letter-spacing: -0.02em; }
.join__unit { font-family: var(--sans); font-size: var(--s-0); font-weight: 700; color: var(--ink-3); letter-spacing: .04em; }
.join__usd { margin: 0; font-size: var(--s--1); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.join__what { margin: .2rem 0; font-size: var(--s--1); color: var(--ink-2); max-width: 26ch; }
.join__note { margin: 0; font-size: var(--s--2); color: var(--ink-3); min-height: 1.2em; }

.nav__out--centre { font-size: var(--s--1); font-weight: 800; letter-spacing: .04em; padding: .5rem 1rem; }
.nav__out img { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

dialog.sheet--narrow { width: min(440px, calc(100vw - 2rem)); }
dialog.sheet--narrow .sheet__body { justify-items: center; text-align: center; }

/* An action failure stays visible above the originating purchase or claim sheet. */
dialog.funds-notice { border: 2px solid #b67528; border-radius: 18px; padding: 0; box-shadow: 0 24px 90px rgba(21,19,14,.34); }
.funds-notice__body { padding: clamp(1.4rem, 5vw, 2rem); text-align: left; }
.funds-notice__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #f6dfb6; color: #754310; font: 800 1.6rem/1 var(--sans); margin-bottom: 1rem; }
.funds-notice__eyebrow { margin: 0 0 .35rem; color: #754310; font: 700 .65rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: .12em; }
.funds-notice #funds-title { font-size: clamp(1.55rem, 6vw, 2rem); line-height: 1.15; margin: 0 0 1rem; }
.funds-notice #funds-description { color: var(--ink); font-size: .95rem; line-height: 1.55; margin: 0 0 .8rem; }
.funds-notice__help { color: var(--ink-2); font-size: .85rem; line-height: 1.55; margin: 0; }
.funds-notice__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.funds-notice__actions .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; gap: .6rem; }
.funds-notice__actions [hidden] { display: none; }

/* A button that is waiting on a wallet says so and refuses a second press. */
.btn.is-busy { opacity: .7; cursor: progress; pointer-events: none; }

/* A confirmed Company, printed in the same stock as the board. */
.pack__drawn-tier {
  margin: 0; padding: .65rem 1rem; width: 100%; border: 1px solid currentColor;
  border-radius: 8px; font-size: var(--s--1); font-weight: 800;
}
.company-reveal {
  --reveal-colour: var(--c5);
  position: fixed; inset: 0; width: 100vw; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 1rem;
  border: 0; background: transparent; color: var(--ink); overflow: hidden;
}
.company-reveal[open] { display: grid; place-items: center; }
.company-reveal::backdrop {
  background: rgba(21, 19, 14, .58); transition: background .45s ease;
}
.company-reveal__scene {
  display: grid; justify-items: center; gap: 1.15rem; perspective: 1300px;
  max-width: 100%;
}
.company-reveal__heading { text-align: center; color: var(--paper); }
.company-reveal__heading .eyebrow { margin: 0 0 .35rem; color: #e3d6bc; font-size: .65rem; }
.company-reveal__heading h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.company-reveal__card {
  width: min(292px, calc(100vw - 72px), calc((100dvh - 225px) * .73));
  aspect-ratio: .73; position: relative; will-change: transform;
}
.company-reveal__turn { width: 100%; height: 100%; transform-style: preserve-3d; }
.company-reveal__front, .company-reveal__back {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 22px 65px rgba(0,0,0,.24), 0 4px 0 #c7b998;
}
.company-reveal__front {
  display: flex; flex-direction: column; background: #faf8f2;
  border: 1px solid #d9cfbc;
}
.company-reveal__serial {
  display: flex; justify-content: space-between; gap: .5rem; padding: 1rem 1rem .8rem;
  font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2);
}
.company-reveal__tier {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem; background: var(--reveal-colour); color: white;
  font-size: .85rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.company-reveal__pip { width: 5px; height: 5px; background: currentColor; transform: rotate(45deg); }
.company-reveal__art {
  flex: 1; min-height: 0; display: grid; place-items: center; position: relative;
  margin: .65rem .9rem 0; border-bottom: 1px solid var(--line-2);
  background-image: linear-gradient(#e9e4d780 1px, transparent 1px), linear-gradient(90deg, #e9e4d780 1px, transparent 1px);
  background-size: 22px 22px;
}
.company-reveal__art img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.company-reveal__monogram { font-size: 6rem; color: var(--reveal-colour); }
.company-reveal__stats { display: flex; align-items: baseline; justify-content: center; gap: .55rem; padding: .7rem .75rem .4rem; }
.company-reveal__stats strong { font-size: clamp(1.8rem, 6vh, 2.8rem); line-height: 1; }
.company-reveal__stats > span { font-size: .65rem; color: var(--ink-2); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.company-reveal__foot {
  display: flex; justify-content: space-between; gap: .3rem; margin: 0 .9rem;
  padding: .65rem 0 .9rem; font-size: .53rem; text-transform: uppercase; letter-spacing: .15em; color: var(--ink-3);
}
.company-reveal__foot [data-reveal="genesis"] { color: var(--gold); font-weight: 800; }
.company-reveal__back {
  transform: rotateY(180deg); background: #eee7d5; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem;
}
.company-reveal__back::before {
  content: ''; position: absolute; inset: 10px; border: 1px solid #ae935e70; border-radius: 7px;
}
.company-reveal__back img { border-radius: 50%; box-shadow: 0 0 0 1px var(--gold); }
.company-reveal__back .deed { font-size: 2rem; }
.company-reveal__back .eyebrow { font-size: .55rem; color: var(--gold); }
.company-reveal__controls { text-align: center; color: var(--paper); }
.company-reveal__controls > p { margin: 0 0 .75rem; font-size: .78rem; }
.company-reveal__controls .btn { min-width: 220px; }
.company-reveal__controls .company-reveal__hint { margin: .65rem 0 0; font-size: .6rem; opacity: .75; }
.company-reveal__heading, .company-reveal__controls { transition: opacity .2s; }
.company-reveal.is-placing::backdrop { background: transparent; }
.company-reveal.is-placing .company-reveal__heading,
.company-reveal.is-placing .company-reveal__controls { opacity: 0; pointer-events: none; }
.company-reveal[data-tier="oligarchic"] .company-reveal__front {
  border: 2px solid var(--gold-lit); box-shadow: 0 0 0 4px #d6ac5b26, 0 22px 65px rgba(0,0,0,.24), 0 4px 0 var(--gold);
}
.purchase-status {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 50;
  max-width: calc(100vw - 2rem); padding: .7rem 1.1rem; border: 1px solid var(--gold);
  border-radius: 10px; background: var(--paper); box-shadow: 0 4px 20px #15130e1a;
  font-size: .78rem; text-align: center; pointer-events: none;
}
.purchase-status:empty { display: none; }
@media (max-height: 560px) and (min-width: 580px) {
  .company-reveal__scene { grid-template-columns: auto auto; column-gap: 2rem; }
  .company-reveal__card { grid-row: 1 / 3; grid-column: 1; width: calc((100dvh - 50px) * .73); }
  .company-reveal__heading { align-self: end; }
  .company-reveal__controls { align-self: start; }
}

/* ── Soft & Fluid Keyframe Animations ───────────────── */

@keyframes softFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes softSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes softScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.nav {
  animation: softFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.play__slots {
  animation: softSlideUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both;
}

.play__pack {
  animation: softSlideUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.play__actions {
  animation: softSlideUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.notice {
  animation: softSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

dialog.sheet[open] {
  animation: softScaleIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

dialog.sheet::backdrop {
  animation: softFadeIn 0.25s ease both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Genesis Boost banner ─────────────────────────────
   Sits under the nav and sticks with it, because it is a countdown: scrolling
   past it would be scrolling past the reason to hurry. Gold rather than a
   warning colour, since this is an offer and not an alert. */
/* ── Referral and claim sheets ───────────────────────── */

/* Two figures side by side, because the pair is the answer: a link that brought in
   four people who have not claimed yet reads very differently from one that brought
   in nobody, and a single number cannot say which happened. */
.tally { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; width: 100%; }
.tally__cell {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); padding: .7rem .9rem; text-align: left;
}
.tally__fig {
  margin: .15rem 0 0; font-size: var(--s-2); color: var(--gold);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}

.reflist {
  width: 100%; max-height: 11rem; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.refrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding: .5rem .75rem; border-bottom: 1px solid var(--line);
  font-size: var(--s--1);
}
.refrow:last-child { border-bottom: 0; }
.refrow__who { font-family: var(--mono, ui-monospace, monospace); color: var(--ink-2); }
.refrow__paid { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; white-space: nowrap; }
/* Somebody who joined and has not claimed is not a failure, so it is not painted as one. */
.refrow__paid--none { color: var(--ink-3); font-weight: 400; }

.reflink {
  width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink-2);
  font-size: var(--s--2); font-family: var(--mono, ui-monospace, monospace);
}

/* A running total that ends in one number, so the arithmetic is visible rather than
   asserted. The two additions, the subtraction and the result all read as one column. */
.ledger {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); overflow: hidden;
}
.ledger__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .5rem .8rem; font-size: var(--s--1); color: var(--ink-2);
}
.ledger__row b { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.ledger__row--sum { border-top: 1px solid var(--line); font-weight: 700; }
.ledger__row--out b { color: var(--c2); }
.ledger__row--net {
  border-top: 1px solid var(--gold);
  background: color-mix(in srgb, var(--gold-pale) 30%, transparent);
}
.ledger__row--net b { color: var(--gold); font-size: var(--s-0); font-weight: 800; }

/* ── The testnet strip ───────────────────────────────── */

/* Not sticky, unlike the boost banner below it: two sticky strips would stack
   under the nav and eat a third of a phone screen. This one is read once, on
   arrival, which is when the network and the faucet are what somebody needs. */
.testnet {
  background: color-mix(in srgb, var(--c2) 12%, var(--paper));
  border-bottom: 1px solid color-mix(in srgb, var(--c2) 40%, var(--line));
}

.testnet__in {
  max-width: 1400px; margin: 0 auto;
  padding: .5rem clamp(1rem, 3vw, 2.5rem);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .35rem clamp(.6rem, 2vw, 1.4rem);
  font-size: var(--s--1); color: var(--ink-2);
}

.testnet__lead { margin: 0; display: flex; align-items: baseline; gap: .45rem; }
.testnet__lead strong {
  font-family: var(--sans); font-size: var(--s-0); color: var(--ink); font-weight: 600;
}
.testnet__chain {
  font-size: var(--s--2); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c2);
}

.testnet__gain { margin: 0; flex: 1 1 24ch; min-width: 0; }
.testnet__gain strong { color: var(--ink); font-weight: 800; }

.testnet__acts { display: flex; align-items: center; gap: .3rem 1rem; flex-wrap: wrap; margin-left: auto; }
.testnet__link {
  font-size: var(--s--2); letter-spacing: .04em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-3); white-space: nowrap;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.testnet__link:hover { color: var(--c2); }

/* Its own row, because it is the only line in the strip that ever changes, and a
   message that reflows the three controls beside it reads as a glitch. */
.testnet__note {
  flex-basis: 100%; margin: 0; font-size: var(--s--2); color: var(--c2); font-weight: 700;
}

@media (max-width: 46rem) {
  .testnet__acts { margin-left: 0; width: 100%; }
  .testnet__gain { flex-basis: 100%; }
}

.boost {
  /* Stay in document flow; only the navigation follows the viewport. */
  position: relative; top: auto; z-index: auto;
  background: color-mix(in srgb, var(--gold-pale) 78%, var(--paper));
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
}

/* The launch banner is the same shape as the boost banner but states a fact
   rather than an opportunity, so it is quiet ink on paper instead of gold, and
   its pip does not pulse: nothing is running yet. */
.boost--launch {
  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
  border-bottom-color: var(--line);
}
.boost--launch .boost__pip { background: var(--ink-3); animation: none; box-shadow: none; }
.boost--launch .boost__state { color: var(--ink-3); }
.boost--launch time { font-variant-numeric: tabular-nums; white-space: nowrap; }

.boost__in {
  max-width: 1400px; margin: 0 auto;
  padding: .5rem clamp(1rem, 3vw, 2.5rem);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .35rem clamp(.6rem, 2vw, 1.4rem);
  font-size: var(--s--1); color: var(--ink-2);
}

/* A slow pulse, so a live window reads as live without anything moving about. */
.boost__pip {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--gold);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent);
  animation: boostPulse 2.6s ease-out infinite;
}
@keyframes boostPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .boost__pip { animation: none; }
}

.boost__lead { margin: 0; display: flex; align-items: baseline; gap: .45rem; }
.boost__lead strong {
  font-family: var(--sans); font-size: var(--s-0); color: var(--ink); font-weight: 600;
}
.boost__state {
  font-size: var(--s--2); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}

.boost__gain { margin: 0; flex: 1 1 22ch; min-width: 0; }
.boost__gain strong { color: var(--ink); font-weight: 800; }

.boost__figs { display: flex; align-items: baseline; gap: .3rem 1rem; flex-wrap: wrap; margin-left: auto; }
.boost__fig {
  font-size: var(--s--2); letter-spacing: .04em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-3); white-space: nowrap;
}
.boost__fig b {
  font-family: var(--sans); font-size: var(--s-0); font-weight: 600;
  color: var(--gold); letter-spacing: 0; text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* The countdown is the last thing that should wrap, so on a narrow screen the
   figures take their own row rather than being pushed off the end. */
@media (max-width: 46rem) {
  .boost__figs { margin-left: 0; width: 100%; }
  .boost__gain { flex-basis: 100%; }
}

/* ── Wallet picker ────────────────────────────────────
   One row per wallet, each carrying the icon the wallet announced about
   itself rather than one this project drew, so the row a person recognises is
   the one their wallet actually shows them elsewhere. */
.wallets { display: flex; flex-direction: column; gap: .5rem; width: 100%; }

.wallet-opt {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  padding: .7rem .9rem; text-align: left; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.wallet-opt:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -12px rgba(21,19,14,.35);
}
.wallet-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.wallet-opt__icon {
  width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto;
  object-fit: cover; background: var(--paper-2);
  border: 1px solid var(--line);
}

/* Wallets that announced no icon get their initial rather than a broken image. */
.wallet-opt__letter {
  width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--gold-pale); color: var(--gold);
  font-family: var(--sans); font-size: var(--s-0); font-weight: 600;
  border: 1px solid var(--line);
}

.wallet-opt__name { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.wallet-opt__tag {
  font-size: var(--s--2); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .wallet-opt:hover { transform: none; }
}

/* ── The seat vault panel ─────────────────────────────
   Deliberately plain. It sits inside a sheet that is already a card, so a
   second card here would be a box in a box; hairlines carry the structure. */
.seatvault {
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .7rem;
}

.seatvault__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: var(--s--1);
}
.seatvault__k { color: var(--ink-3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: var(--s--2); }
.seatvault__v { font-family: var(--sans); font-size: var(--s-0); color: var(--ink); font-variant-numeric: tabular-nums; }

.seatvault__acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.seatvault__acts .btn { flex: 1 1 8rem; }

.seatvault__input {
  width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--ink);
  font: inherit; font-size: var(--s--1);
}
.seatvault__input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }


/* ── Game navigation refinement ────────────────────────
   A quiet command bar with grouped links, audio and wallet controls. Keep the
   paper opaque, and let the Genesis notice scroll away with the page. */
.nav {
  --nav-h: 76px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-height: var(--nav-h); height: auto;
  gap: clamp(.7rem, 1.5vw, 1.4rem);
  padding: .65rem clamp(1rem, 2.4vw, 2.3rem);
  background: var(--paper);
  backdrop-filter: none;
  box-shadow: 0 5px 18px -15px rgba(21,19,14,.28);
}
.nav__brand { min-width: 0; gap: .7rem; }
.nav__logo { width: 34px; height: 34px; }
.nav__wordmark { display: grid; gap: .12rem; }
.nav__name { font-size: 1.45rem; line-height: 1; }
.nav__tag { display: block; font-size: .54rem; letter-spacing: .17em; line-height: 1.3; }
.nav__centre {
  grid-row: auto; grid-column: auto;
  justify-self: center; justify-content: center;
  min-width: 0; gap: .12rem; overflow: visible;
}
.nav__out {
  min-height: 42px; padding: .55rem .7rem;
  border: 0; border-radius: 10px; background: transparent;
  font-family: var(--sans); font-size: .76rem; font-weight: 700;
  letter-spacing: 0; text-transform: none; cursor: pointer;
}
.nav__out:hover { background: var(--paper-2); color: var(--ink); }
.nav__out--trade { color: #89602a; }
.nav .nav__glyph {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav__label-short { display: none; }
.nav__utility { display: flex; align-items: center; gap: .45rem; }
.nav__audio {
  display: flex; align-items: center; gap: .1rem;
  padding: 3px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper-2);
}
.nav__sound {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-width: 38px; min-height: 36px; padding: .45rem .55rem;
  border: 0; border-radius: 8px; color: var(--ink-3); background: transparent;
  font-family: var(--sans); font-size: .66rem; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: background .18s, color .18s, box-shadow .18s;
}
.nav__sound[aria-pressed="true"] { color: #89602a; background: var(--card); box-shadow: 0 1px 4px rgba(21,19,14,.06); }
.nav__sound:hover { color: var(--ink); background: var(--card); }
.nav__audio-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .3; }
.nav__sound[aria-pressed="true"] .nav__audio-dot { opacity: 1; background: var(--gold); }
.nav__icon { width: 36px; height: 42px; border-radius: 10px; }
.nav__icon svg { width: 13px; height: 13px; }
.nav__right {
  grid-row: auto; grid-column: auto; min-width: 0;
  flex-wrap: nowrap; gap: .6rem;
}
.nav__right .badge {
  border: 0; background: transparent; padding: 0;
  font-size: .62rem; letter-spacing: .015em; text-transform: none; white-space: nowrap;
}
.nav__right .btn--wallet {
  min-height: 42px; padding: .6rem .9rem; border-radius: 11px;
  font-size: .73rem; letter-spacing: .01em; text-transform: none;
  color: var(--paper); background: var(--ink); border-color: var(--ink);
  box-shadow: none; white-space: nowrap;
}
.nav__right .btn--wallet:hover { background: #302a20; transform: translateY(-1px); box-shadow: 0 4px 12px -7px rgba(21,19,14,.4); }
.nav :is(a, button):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 1340px) {
  .nav__sound [data-audio-label] { display: none; }
  .nav__sound { min-width: 38px; padding: .45rem; }
  .nav__audio-dot { position: absolute; right: 5px; bottom: 5px; }
}
@media (max-width: 1240px) {
  .nav { grid-template-columns: minmax(0, 1fr) auto auto; gap: .25rem 1rem; padding-top: .65rem; padding-bottom: .45rem; }
  .nav__brand { grid-row: 1; grid-column: 1; }
  .nav__utility { grid-row: 1; grid-column: 2; }
  .nav__right { grid-row: 1; grid-column: 3; }
  .nav__centre { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
  .nav__out { min-height: 36px; }
  .nav__sound [data-audio-label] { display: inline; }
  .nav__sound { padding-left: .65rem; padding-right: .65rem; }
  .nav__audio-dot { position: static; }
}
@media (max-width: 760px) {
  .nav__sound [data-audio-label] { display: none; }
  .nav__sound { padding: .45rem; }
  .nav__audio-dot { position: absolute; right: 5px; bottom: 5px; }
}
@media (max-width: 620px) {
  .nav {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem .5rem; padding: .6rem .9rem .45rem;
  }
  .nav__brand { grid-row: 1; grid-column: 1; gap: .5rem; }
  .nav__logo { width: 30px; height: 30px; }
  .nav__name { font-size: 1.3rem; }
  .nav__tag { font-size: .48rem; }
  .nav__right { grid-row: 1; grid-column: 2; flex-direction: column; align-items: flex-end; gap: .25rem; }
  .nav__right .btn--wallet { order: -1; min-height: 36px; font-size: .69rem; padding: .45rem .7rem; }
  .nav__right .badge { font-size: .55rem; line-height: 1; }
  .nav__right .dot { width: 5px; height: 5px; }
  .nav__centre { grid-row: 2; grid-column: 1; justify-self: start; justify-content: flex-start; gap: .05rem; }
  .nav__label-wide { display: none; }
  .nav__label-short { display: inline; }
  .nav__out { min-height: 42px; padding: .5rem .55rem; gap: .35rem; font-size: .7rem; }
  .nav .nav__out .nav__glyph { width: 15px; height: 15px; }
  .nav__utility { grid-row: 2; grid-column: 2; justify-self: end; }
  .nav__utility > .nav__icon { display: none; }
  .nav__audio { padding: 2px; border-radius: 10px; }
  .nav__sound { min-width: 36px; min-height: 36px; }
}
@media (max-width: 360px) {
  .nav { padding-left: .6rem; padding-right: .6rem; }
  .nav__name { font-size: 1.15rem; }
  .nav__out { padding-left: .4rem; padding-right: .4rem; gap: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav { animation: none; }
  .nav__logo, .nav__sound { transition: none; }
  .nav__brand:hover .nav__logo, .nav__right .btn--wallet:hover { transform: none; }
}

/* Wallet-connected testnet content inbox. */
.content-form { display:flex; flex-direction:column; gap:.65rem; }
.content-form label { font-size:.8rem; font-weight:700; }
.content-form input { width:100%; min-width:0; padding:.85rem; border:1px solid var(--line-2); border-radius:10px; background:var(--paper); color:var(--ink); font:inherit; font-size:.85rem; }
.content-form p { margin:0; }
.content-status { min-height:1.5em; font-size:.8rem; color:var(--gold); overflow-wrap:anywhere; }

.content-step { display:flex; align-items:center; gap:.65rem; margin-top:.4rem; font-size:.8rem; }
.content-step > div { flex:1; min-width:0; }
.content-step .btn { font-size:.68rem; padding:.6rem .7rem; }
.content-step__number { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:var(--gold-pale); color:#705020; font-weight:800; flex:0 0 auto; }
.content-mission { display:grid; gap:.6rem; padding:.8rem; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.content-mission__actions { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.content-mission__actions .btn { font-size:.7rem; padding:.65rem .4rem; }
.content-form .content-check { display:flex; align-items:center; gap:.5rem; font-weight:500; }
.content-form input[type="checkbox"] { width:18px; height:18px; flex:0 0 auto; accent-color:var(--gold); padding:0; }