/*  USHER · one sheet
    The source design: a 9 % grey night, gold on hover, a serif for the big
    lines, a script for the small ones, a sans for everything else, 2 px radii,
    a full-screen slider opened by the scroll, letters that rise one at a time.
    Ours: the night turns a shade of plum, the brass and the velvet of the
    hall replace pure black where an object is drawn, and the ushers' board
    replaces the product gallery. */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/instrumentserif-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/instrumentserif-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Luxurious Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/luxuriousscript-latin.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('assets/fonts/manrope-latin.woff2') format('woff2'); }

:root {
  --night: #16131a;            /* the 9 % ground of the source, turned a shade of plum */
  --night-2: #221c27;
  --ink: #16131a;
  --cream: #f4eee1;
  --paper: #fbf8f1;
  --white: #ffffff;
  --gold: #cb9d06;             /* the hover gold of the source */
  --brass: #d4a24c;            /* the posts, the coins, the letters on the board */
  --brass-light: #f0d38a;
  --brass-deep: #8f6a24;
  --velvet: #9b1b30;
  --velvet-deep: #5e0f1e;
  --stage: #3a6ea5;            /* the cold one: you, and what you brought */
  --stage-deep: #2f5d8d;
  --ember: #e8452a;
  --muted: rgba(22, 19, 26, 0.55);
  --muted-2: rgba(22, 19, 26, 0.4);
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --script: 'Luxurious Script', 'Brush Script MT', cursive;
  --sans: 'Manrope', 'Segoe UI', Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius: 2px;
  --pad: 5%;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cream);
  background: var(--night);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.docs { background: var(--cream); color: var(--ink); }
body::before { content: ''; position: fixed; inset: 0; z-index: 70; pointer-events: none; background: url("data:image/png;base64,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") repeat; background-size: 72px 72px; opacity: 0.5; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── the bar: transparent over the hall, black once you scroll ────────── */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: 16px 16px;
  background: transparent;
  transition: background 0.35s, padding 0.35s, box-shadow 0.35s;
}
.nav.is-solid {
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(80px);
  backdrop-filter: blur(80px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  padding: 8px 16px;
}
.nav-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; transition: width 0.3s, height 0.3s; }
.is-solid .brand-mark { width: 28px; height: 28px; }
.brand-name { font-family: var(--serif); font-size: 22px; letter-spacing: 0.14em; color: var(--brass-light); }
.nav-links { display: none; justify-content: center; gap: 28px; }
.nav-links a { font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: rgba(244, 238, 225, 0.86); text-decoration: none; transition: color 0.3s; }
.nav-links a:hover { color: var(--gold); }
.nav-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: hsl(0 0% 97.3%); color: hsl(0 0% 9%);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}
.pill:hover { background: var(--gold); color: var(--white); }
.pill:disabled { opacity: 0.6; cursor: wait; }
.wallet-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.45; }
.wallet-label { white-space: nowrap; }
.pill.is-on .wallet-dot { background: #3fbf7a; opacity: 1; }
.pill.is-off .wallet-dot { background: var(--ember); opacity: 1; }

.round {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(244, 238, 225, 0.1); color: var(--cream);
  border: 1px solid rgba(244, 238, 225, 0.22);
  text-decoration: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.round:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }
.round svg { width: 18px; height: 18px; }
.round:disabled { opacity: 0.4; cursor: default; }
.menu-btn { display: inline-flex; }

.menu {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
.menu a { font-family: var(--serif); font-size: 36px; color: var(--cream); text-decoration: none; transition: color 0.3s; }
.menu a:hover { color: var(--gold); }
body.menu-open { overflow: hidden; }

/* ── the floating nav, on the right ───────────────────────────────────── */

.fnav {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 50;
  display: none; flex-direction: column; gap: 16px;
}
.fnav-btn {
  display: flex; align-items: center; height: 48px; border-radius: 999px;
  background: #000; color: #fff; text-decoration: none; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.3s, border-color 0.3s;
}
.fnav-ic { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; flex: none; }
.fnav-ic svg { width: 18px; height: 18px; }
.fnav-label { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; letter-spacing: 0.04em; padding-right: 0; transition: max-width 0.3s, padding 0.3s; }
.fnav-btn:hover, .fnav-btn:focus-visible { background: var(--gold); border-color: var(--gold); }
.fnav-btn:hover .fnav-label, .fnav-btn:focus-visible .fnav-label { max-width: 160px; padding-right: 20px; }
.fnav-btn.is-active { border-color: var(--brass); }

/* ── the hero: three drawn scenes, opened by the scroll ───────────────── */

.hero { position: relative; height: calc(100vh + 300vh); background: var(--night); }
.hero-panel { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.scene { position: absolute; inset: 0; will-change: clip-path; }
.scene svg { width: 100%; height: 100%; }
#scene-3 { clip-path: ellipse(0% 0% at 50% 50%); }
.s1-sweep { animation: sweep 16s linear infinite; }
.s1-chandelier { opacity: 0.9; }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(2200px); } }
/* the rope of the hall: hooked while the camera is wide, loose once it is close */
.s1-hooked, .s1-loose { transition: opacity 0.45s; }
.s1-loose { opacity: 0; transform-box: view-box; transform-origin: 542px 540px; animation: sway 5.5s ease-in-out infinite alternate; }
.scene.is-close .s1-hooked { opacity: 0; }
.scene.is-close .s1-loose { opacity: 1; }
.s1-hook { transform-box: fill-box; transform-origin: 100% 0; transition: transform 0.5s var(--spring); }
.scene.is-close .s1-hook { transform: rotate(-80deg); }
@keyframes sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.s3-big { font-family: var(--serif); font-size: 92px; letter-spacing: -0.02em; fill: #16131a; }
.s3-small { font-family: var(--sans); font-size: 19px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; fill: #9b1b30; }

.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(22, 19, 26, 0.84) 0%, rgba(22, 19, 26, 0.46) 42%, rgba(22, 19, 26, 0) 70%),
    linear-gradient(0deg, rgba(22, 19, 26, 0.88) 0%, rgba(22, 19, 26, 0) 40%),
    linear-gradient(180deg, rgba(22, 19, 26, 0.6) 0%, rgba(22, 19, 26, 0) 24%);
}
.hero-script {
  position: absolute; left: 0; right: 0; top: 0;
  padding: calc(80px + 60px) 16px 0;
  text-align: center;
  font-family: var(--script); font-weight: 400; font-size: 12vw; line-height: 1;
  color: var(--brass-light);
}
.hero-copy {
  position: absolute; left: var(--pad); right: var(--pad); top: 50%;
  max-width: 500px;
  opacity: 0; transform: translateY(calc(-52% + 24px));
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.hero-copy.is-in { opacity: 1; transform: translateY(-52%); }
.eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.eyebrow-chip { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-light); border: 1px solid rgba(212, 162, 76, 0.45); padding: 6px 10px; border-radius: var(--radius); }
.eyebrow-token { font-size: 13px; letter-spacing: 0.06em; color: var(--cream); }
.tagline { font-family: var(--serif); font-size: clamp(26px, 2.7vw, 40px); line-height: 1.12; color: var(--cream); margin-bottom: 16px; }
.sub { font-size: 15px; font-weight: 400; line-height: 1.65; color: rgba(244, 238, 225, 0.8); max-width: 520px; margin-bottom: 24px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-title {
  position: absolute; left: 0; right: 0; bottom: 40px; margin: 0;
  text-align: center; padding: 0 16px;
  font-family: var(--serif); font-weight: 400; font-size: 27vw; line-height: 1; letter-spacing: -0.04em;
  white-space: nowrap; color: var(--cream);
  pointer-events: none;
}

/* letters rising one at a time */
.split { display: inline; }
.split-word { display: inline-block; white-space: nowrap; }
.split-char {
  display: inline-block;
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(var(--start, 0ms) + var(--i, 0) * var(--stagger, 30ms));
  padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1 !important;
}
.is-in .split-char { opacity: 1; transform: none; }

/* ── buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 32px; border-radius: var(--radius);
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.06em;
  text-decoration: none; border: 1px solid transparent;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn-ink { background: #000; color: #fff; }
.btn-ink:hover { background: var(--gold); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #000; }
.btn-cream { background: hsl(0 0% 97.3%); color: hsl(0 0% 9%); }
.btn-cream:hover { background: var(--gold); color: #fff; }
.btn-line { background: transparent; color: var(--cream); border-color: rgba(244, 238, 225, 0.5); }
.btn-line:hover { border-color: var(--gold); color: var(--gold); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(22, 19, 26, 0.28); padding: 10px 18px; font-size: 12.5px; margin-top: 8px; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ── the hall ─────────────────────────────────────────────────────────── */

.toy { background: var(--cream); color: var(--ink); padding: 88px var(--pad) 64px; }
.toy-head { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.script-title { font-family: var(--script); font-weight: 400; font-size: 36px; line-height: 1; color: var(--velvet); margin-bottom: 10px; }
.toy-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 62px); line-height: 1; letter-spacing: -0.02em; margin-bottom: 14px; }
.toy-lead { font-size: 15.5px; font-weight: 400; line-height: 1.6; color: rgba(22, 19, 26, 0.72); }
.toy-lead b { color: var(--ink); font-weight: 600; }

.hall-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hall-scene { background: var(--night); border: 1px solid rgba(212, 162, 76, 0.5); box-shadow: inset 0 0 0 4px var(--night), inset 0 0 0 5px rgba(212, 162, 76, 0.28), 0 24px 50px -24px rgba(0, 0, 0, 0.8); border-radius: var(--radius); overflow: hidden; }
.hall-svg { width: 100%; height: auto; }

.fig { transition: opacity 0.45s; }
.fig.is-arriving, .fig.is-leaving { opacity: 0; }
.fig-shadow { fill: #000; opacity: 0.45; }
.fig-halo { fill: var(--brass); opacity: 0; transition: opacity 0.5s; }
.fig-body { fill: #3d3446; transition: fill 0.25s; }
.fig-head { fill: #4d4257; transition: fill 0.25s; }
.fig-cap { fill: var(--brass); }
.fig-led .fig-body { fill: #6b2436; }
.fig-led .fig-head { fill: #7e2e40; }
.fig-you .fig-body { fill: var(--stage); }
.fig-you .fig-head { fill: #6a9bd2; }
.fig-you .fig-halo { fill: var(--stage); opacity: 0.38; }
.fig-mine .fig-body { fill: var(--stage-deep); }
.fig-mine .fig-head { fill: #4c80b8; }
.fig-mine .fig-halo { fill: var(--stage); opacity: 0.2; }
.fig-grand .fig-body { fill: #4d4b7a; }
.fig-grand .fig-head { fill: #6663a0; }
.fig-staff .fig-body { fill: var(--velvet); }
.fig-staff .fig-head { fill: #e9cfa6; }
.staff.is-lit .fig-halo { opacity: 0.55; }
.fig-label { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: 0.02em; fill: rgba(244, 238, 225, 0.62); }
.fig-you .fig-label { fill: #9cc4ee; font-weight: 700; }
.fig-mine .fig-label { fill: #9cc4ee; }
.fig-staff .fig-label { fill: var(--brass-light); font-weight: 600; }
.fig.is-trading .fig-head, .fig.is-trading .fig-body { fill: var(--brass-light); }

.rope { fill: none; stroke: #3a0a12; stroke-width: 10; stroke-linecap: round; }
.rope-shadow { fill: none; stroke: #000; stroke-width: 8; stroke-linecap: round; opacity: 0.3; transform: translate(0, 5px); }
.rope-body { fill: none; stroke: var(--velvet); stroke-width: 7.4; stroke-linecap: round; }
.rope-hi { fill: none; stroke: #c9435c; stroke-width: 2.4; stroke-linecap: round; opacity: 0.72; transform: translate(-1px, -1.8px); }
.rope-sheen { fill: none; stroke: #eaa0ad; stroke-width: 0.9; stroke-linecap: round; opacity: 0.55; transform: translate(-1.2px, -2.6px); }
.rope-tip { fill: url(#u-brass-r); stroke: var(--brass-deep); stroke-width: 1; }
.hook { transform-box: fill-box; transform-origin: 100% 0; transition: transform 0.35s var(--spring); }
.hook.is-open { transform: rotate(-80deg); }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.1s ease-in-out infinite alternate; }
@keyframes flicker { from { transform: scaleY(0.9) scaleX(1.04); } to { transform: scaleY(1.1) scaleX(0.94); } }
.puff { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.puff.is-on { animation: puff 0.65s ease-out forwards; }
@keyframes puff { 0% { opacity: 0.9; transform: scale(0.5); } 100% { opacity: 0; transform: scale(2) translateY(-14px); } }

.coins { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.coin {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  transition: transform 0.76s cubic-bezier(0.3, 0, 0.2, 1);
  will-change: transform;
}
.coin i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbe6a8, var(--brass) 55%, var(--brass-deep));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
  animation: hop 0.76s ease-in-out;
}
@keyframes hop { 50% { transform: translateY(-28px) scale(1.3); } }
.coin-burn i { background: radial-gradient(circle at 35% 30%, #ffd08a, var(--ember) 55%, #7a1020); }
.coin.is-landed i { animation: land 0.26s ease-out forwards; }
@keyframes land { to { transform: scale(1.9); opacity: 0; } }

.ribbon-wrap { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid rgba(212, 162, 76, 0.35); background: #0f0b12; overflow: hidden; }
.ribbon-label { flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 238, 225, 0.4); }
.ribbon { display: flex; gap: 8px; overflow: hidden; white-space: nowrap; flex: 1; min-width: 0; min-height: 28px; }
.tr {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 500; color: rgba(244, 238, 225, 0.72);
  padding: 5px 9px; border: 1px solid rgba(244, 238, 225, 0.14); border-radius: var(--radius);
  animation: slidein 0.35s var(--ease-out);
}
@keyframes slidein { from { opacity: 0; transform: translateX(-16px); } }
.tr b { color: var(--brass-light); font-weight: 600; }
.tr i { font-style: normal; color: var(--brass); }
.tr-burn { color: #e08a7a; border-color: rgba(232, 69, 42, 0.4); }
.tr-you b { color: #9cc4ee; }
.tr-mine { border-color: rgba(58, 110, 165, 0.7); }

.board { background: linear-gradient(180deg, #4a0c17 0%, #3a0912 60%, #2c0710 100%); border: 1px solid rgba(212, 162, 76, 0.55); box-shadow: inset 0 0 0 4px #3a0912, inset 0 0 0 5px rgba(212, 162, 76, 0.3), 0 24px 50px -24px rgba(0, 0, 0, 0.8); border-radius: var(--radius); padding: 18px 18px 14px; color: var(--cream); display: flex; flex-direction: column; min-height: 320px; }
.board-title { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: 0.02em; color: var(--brass-light); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(212, 162, 76, 0.45); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.board-head, .row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 70px 60px; gap: 8px; align-items: baseline; }
.board-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(244, 238, 225, 0.4); padding: 0 6px 6px; }
.board-head span:last-child { text-align: right; }
.board-rows { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.row { padding: 7px 6px; font-size: 13px; border-radius: var(--radius); transition: transform 0.45s var(--ease-out), background 0.3s, box-shadow 0.3s; }
.r-rank { font-family: var(--serif); font-size: 15px; color: var(--brass); }
.r-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-brought { color: rgba(244, 238, 225, 0.55); font-size: 11.5px; white-space: nowrap; }
.r-paid { text-align: right; font-variant-numeric: tabular-nums; color: var(--brass-light); font-weight: 700; }
.row.is-you { background: rgba(58, 110, 165, 0.32); box-shadow: inset 0 0 0 1px rgba(122, 170, 220, 0.7); }
.row.is-you .r-name { color: #9cc4ee; font-weight: 700; }
.row.is-mine { background: rgba(212, 162, 76, 0.12); }
.row.is-hit { background: rgba(212, 162, 76, 0.4); }
.row.is-new { animation: rowin 0.5s var(--ease-out); }
@keyframes rowin { from { opacity: 0; transform: translateX(14px); } }
.pop { animation: pop 0.35s var(--spring); }
@keyframes pop { 50% { transform: scale(1.18); } }
.board-foot { margin-top: auto; padding-top: 12px; font-size: 11.5px; font-weight: 400; line-height: 1.5; color: rgba(244, 238, 225, 0.45); }

.toy-controls { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 24px; align-items: start; }
.ctl-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); margin-bottom: 8px; }
.ctl-hint { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.plaque {
  background: linear-gradient(180deg, #4a0c17, #2c0710); border: 1px solid var(--brass); box-shadow: inset 0 0 0 3px #3a0912, inset 0 0 0 4px rgba(212, 162, 76, 0.35); border-radius: var(--radius);
  padding: 12px 18px; min-height: 58px; display: flex; align-items: center;
  font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--brass-light);
}
.plaque.is-none { color: #e08a7a; border-color: var(--velvet); }
.plaque.pop { animation: plaque-pop 0.45s var(--spring); }
@keyframes plaque-pop { 50% { transform: scale(1.05); } }
.plaque.shake { animation: shake 0.4s; }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

.pick-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pick {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--paper); border: 1px solid rgba(22, 19, 26, 0.18); border-radius: var(--radius);
  padding: 12px 14px 10px; min-width: 108px;
  transition: transform 0.25s var(--spring), border-color 0.25s, background 0.25s, opacity 0.3s;
}
.pick:hover { border-color: var(--gold); transform: translateY(-3px); }
.pick:active { transform: scale(0.96); }
.portrait { width: 56px; height: 56px; margin-bottom: 4px; }
.pick-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.pick-role { font-size: 11px; font-weight: 400; letter-spacing: 0.04em; color: var(--muted); }
.is-entered .pick { opacity: 0.55; }
.is-entered .pick:hover { transform: none; border-color: var(--velvet); }
.pick-none { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s; }
.pick-none:hover { color: var(--gold); }
.picks.nudge { animation: nudge 0.5s; }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.action-row { display: flex; gap: 8px; flex-wrap: wrap; }
body:not(.is-entered) .btn-ghost { display: none; }
body:not(.is-entered) .action-row .btn { opacity: 0.6; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip { display: inline-flex; align-items: baseline; gap: 10px; padding: 8px 14px; border: 1px solid rgba(22, 19, 26, 0.16); background: var(--paper); border-radius: var(--radius); }
.chip small { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.chip b { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; display: inline-block; }
.chip.pop { animation: none; }
.chip.pop b { animation: pop 0.35s var(--spring); }
.chip-cut b { color: var(--stage-deep); }
.chip-brought b { color: var(--ink); }
.chip-burned b { color: var(--velvet); }
.chip-paid b { color: var(--brass-deep); }
.plaque-wrap, .toy-actions { min-width: 0; }

.toy-note { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; color: var(--ink); min-height: 2.9em; max-width: 920px; }
.toy-note.flash { animation: notein 0.4s var(--ease-out); }
@keyframes notein { from { opacity: 0.3; transform: translateY(4px); } }
.toy-note.is-burn, .toy-note.is-refuse { color: var(--velvet); }
.toy-note.is-you, .toy-note.is-mine { color: var(--stage-deep); }
.toy-note.is-level { color: var(--brass-deep); }

/* ── the marquee ──────────────────────────────────────────────────────── */

.mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent); }
.mq-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.mq:hover .mq-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq-half { display: flex; align-items: center; gap: 48px; padding-right: 48px; }
.mq-item { font-size: 14px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0, 0, 0, 0.58); white-space: nowrap; }
.mq-sep { color: var(--brass); font-size: 10px; }
.programme { margin-top: 28px; padding: 12px 0; border-top: 1px solid rgba(22, 19, 26, 0.12); border-bottom: 1px solid rgba(22, 19, 26, 0.12); }
.programme .mq-item.is-you { color: var(--stage-deep); }

/* ── the rule, word by word ───────────────────────────────────────────── */

.rule { background: var(--white); color: #000; padding: 96px 6% 96px; text-align: center; }
.rule .script-title { color: #000; font-size: 32px; margin-bottom: 20px; }
.rule-text { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 36px; text-transform: uppercase; color: #000; margin: 0 auto 36px; max-width: 1120px; }
.rw-block { display: block; transform-origin: 50% 100%; transform: rotate(3deg); will-change: transform; }
.rw { display: inline-block; opacity: 0.1; filter: blur(4px); will-change: opacity, filter; }
.rule-btn { padding: 12px 32px; }
.mq-rule { margin-top: 64px; }

/* ── how it works: four cards on velvet ───────────────────────────────── */

.play {
  position: relative; padding: 96px var(--pad); color: var(--cream); overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(240, 211, 138, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.72)),
    repeating-linear-gradient(90deg, #4a0c17 0px, #8a1a2e 46px, #5a0f1d 92px, #93203a 150px, #4d0e18 196px);
}
.play::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 58px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent), repeating-linear-gradient(90deg, #3e0a13 0px, #8f1c31 22px, #4d0e18 44px, #9b1b30 66px, #3e0a13 88px); border-bottom: 3px solid #d4a24c; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); }
.play::after { content: ''; position: absolute; left: 0; right: 0; top: 58px; height: 14px; background: repeating-linear-gradient(90deg, transparent 0 3px, #d4a24c 3px 5px, transparent 5px 9px); opacity: 0.8; }
.play-inner { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; }
.play-title { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.4; text-transform: uppercase; text-align: center; margin-bottom: 36px; color: var(--cream); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.card {
  background: linear-gradient(180deg, #120d14, #0a070c); padding: 28px 18px; border-radius: var(--radius);
  border: 1px solid rgba(212, 162, 76, 0.42); box-shadow: inset 0 0 0 4px #0c080e, inset 0 0 0 5px rgba(212, 162, 76, 0.22), 0 30px 50px -30px rgba(0, 0, 0, 0.9);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  transform: translateY(80px);
  transition: transform 0.7s var(--ease-out);
}
.card.in { transform: none; }
.card-ic { width: 48px; height: 48px; transition: transform 0.4s var(--spring); }
.card:hover .card-ic { transform: translateY(-4px) scale(1.06); }
.card-num { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--brass-light); }
.card h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--cream); }
.card p { font-size: 13.5px; font-weight: 400; line-height: 1.6; color: rgba(244, 238, 225, 0.72); }

/* ── the law ──────────────────────────────────────────────────────────── */

.law { background: var(--cream); color: var(--ink); padding: 96px var(--pad); }
.law-inner { max-width: 880px; margin: 0 auto; }
.law h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 50px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 28px; }
.laws { display: flex; flex-direction: column; }
.law-line { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid rgba(212, 162, 76, 0.45); align-items: baseline; }
.law-line:last-child { border-bottom: 1px solid rgba(212, 162, 76, 0.45); }
.law-tag { font-family: var(--serif); font-size: 22px; color: var(--velvet); }
.law-line p { font-size: 16px; font-weight: 400; line-height: 1.55; }
.law-note { margin-top: 26px; font-family: var(--serif); font-style: italic; font-size: 18px; color: rgba(22, 19, 26, 0.72); }
.law-note a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brass); transition: color 0.3s; }
.law-note a:hover { color: var(--gold); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s, transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ── the footer ───────────────────────────────────────────────────────── */

.footer { background: var(--white); }
.foot-top { background: var(--white); color: #000; padding: 48px var(--pad) 40px; display: grid; grid-template-columns: 1fr; gap: 32px; }
.foot-brand { min-width: 0; }
.foot-kicker { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45); margin-bottom: 10px; }
.foot-line { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; color: #000; text-decoration: none; transition: color 0.3s; }
.foot-line:hover { color: var(--gold); }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.foot-col h3 { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45); margin-bottom: 12px; }
.foot-col a { display: block; font-size: 15px; font-weight: 500; color: #000; text-decoration: none; padding: 4px 0; transition: color 0.3s; }
.foot-col a:hover { color: var(--gold); }
.foot-bar { background: #000; color: rgba(255, 255, 255, 0.4); padding: 16px var(--pad); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.foot-legal { font-size: 12px; font-weight: 400; line-height: 1.6; max-width: 900px; }
.foot-legal code { font-family: inherit; color: rgba(255, 255, 255, 0.65); }
.foot-links { display: flex; gap: 18px; }
.foot-links a { font-size: 12px; color: rgba(255, 255, 255, 0.4); text-decoration: none; transition: color 0.3s; }
.foot-links a:hover { color: #fff; }

/* ── docs: the law of the hall ────────────────────────────────────────── */

.doc { max-width: 1180px; margin: 0 auto; padding: 110px var(--pad) 72px; display: grid; grid-template-columns: 1fr; gap: 36px; }
.toc { font-size: 12.5px; line-height: 1.9; }
.toc h2 { font-family: var(--script); font-weight: 400; font-size: 34px; line-height: 1; color: var(--velvet); margin-bottom: 10px; }
.toc a { display: block; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; padding-left: 10px; transition: color 0.25s, border-color 0.25s; }
.toc a:hover, .toc a.active { color: var(--ink); border-color: var(--brass); }
.doc article { max-width: 720px; min-width: 0; }
.doc h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 62px); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 20px; }
.doc .lead { font-size: 17px; font-weight: 400; line-height: 1.6; color: rgba(22, 19, 26, 0.78); }
.doc .note { margin: 26px 0 0; padding: 16px 18px; border-left: 2px solid var(--brass); background: rgba(212, 162, 76, 0.1); font-size: 14px; font-weight: 400; line-height: 1.65; }
.doc section { margin-top: 56px; scroll-margin-top: 100px; }
.doc h2 { font-family: var(--serif); font-weight: 400; font-size: 27px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(22, 19, 26, 0.14); }
.doc h2 .n { font-family: var(--script); font-size: 30px; color: var(--velvet); margin-right: 12px; }
.doc p, .doc li { font-size: 15px; font-weight: 400; line-height: 1.75; color: rgba(22, 19, 26, 0.82); }
.doc p + p { margin-top: 14px; }
.doc ul.bullets { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; list-style: none; }
.doc ul.bullets li { padding-left: 18px; position: relative; }
.doc ul.bullets li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 1px; background: var(--velvet); }
.doc b { color: var(--ink); font-weight: 600; }
.doc code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.88em; background: rgba(22, 19, 26, 0.06); padding: 2px 6px; border-radius: var(--radius); overflow-wrap: anywhere; }
.doc .law-line p { font-size: 15px; }
.params { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.params th, .params td { text-align: left; padding: 12px 10px; border-bottom: 1px solid rgba(22, 19, 26, 0.12); vertical-align: top; }
.params th { font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; }
.params td { color: rgba(22, 19, 26, 0.82); font-weight: 400; }
.params td:last-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.faq details { border-bottom: 1px solid rgba(22, 19, 26, 0.14); padding: 16px 0; }
.faq summary { cursor: pointer; font-size: 15.5px; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--velvet); font-family: var(--serif); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "\00d7"; }
.faq p { margin-top: 12px; }
.doc-foot { max-width: 1180px; margin: 0 auto; padding: 32px var(--pad) 48px; font-size: 12px; font-weight: 400; line-height: 1.8; color: var(--muted); border-top: 1px solid rgba(22, 19, 26, 0.12); }
.doc-foot a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(22, 19, 26, 0.25); transition: color 0.3s; }
.doc-foot a:hover { color: var(--gold); }
.doc-foot code { font-family: inherit; color: var(--ink); }

/* ── wider screens ────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .nav { padding: 16px 40px; }
  .nav.is-solid { padding: 8px 40px; }
  .nav-inner { grid-template-columns: 1fr auto 1fr; }
  .nav-links { display: flex; }
  .menu-btn { display: none; }
  .brand-mark { width: 44px; height: 44px; }
  .is-solid .brand-mark { width: 32px; height: 32px; }
  .fnav { display: flex; right: 24px; }
  .hero-script { font-size: 3vw; }
  .hero-copy { left: var(--pad); right: auto; }
  .hero-title { bottom: -26px; padding: 0; font-size: clamp(110px, 19vw, 360px); }
  .rule { padding: 128px 18%; }
  .rule-text { font-size: 40px; line-height: 56px; }
  .mq-rule { margin-top: 140px; }
  .play { padding: 128px var(--pad); }
  .play-title { font-size: 40px; }
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card { padding: 32px 22px; }
  .foot-top { grid-template-columns: 1.2fr 1fr; padding: 80px 64px 64px; }
  .foot-bar { padding: 16px 64px; }
  .toy-controls { grid-template-columns: 220px minmax(0, 1fr) auto; }
  .toy { padding: 110px var(--pad) 72px; }
}

@media (min-width: 768px) and (max-height: 820px) {
  /* a short screen: the copy climbs a little so the giant name never touches the buttons */
  .hero-copy { top: 45%; }
  .hero-title { font-size: clamp(100px, 17vw, 320px); }
}

@media (min-width: 900px) {
  :root { --pad: max(5%, 84px); }   /* room for the floating nav on the right */
  .hall-wrap { grid-template-columns: minmax(0, 1fr) 300px; }
  .doc { grid-template-columns: 200px minmax(0, 1fr); gap: 56px; }
  .toc { position: sticky; top: 100px; align-self: start; }
}

@media (max-width: 767px) {
  .fig-label { display: none; }
  .hero-copy .sub { font-size: 13.5px; margin-bottom: 16px; max-width: 100%; }
  .hero-copy { top: 52%; }
  .tagline { font-size: 24px; }
  .hero-script { padding-top: 92px; line-height: 1.1; }
  .nav-actions { gap: 6px; }
  .nav-actions .pill { padding: 8px 11px; font-size: 11.5px; }
  .round { width: 34px; height: 34px; }
  .round svg { width: 16px; height: 16px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 18px; letter-spacing: 0.1em; }
  .board-head, .row { grid-template-columns: 24px minmax(0, 1fr) 64px 56px; }
}

/* ── less motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .split-char { transition: none; opacity: 1; transform: none; }
  .hero-copy { transition: none; opacity: 1; transform: translateY(-52%); }
  .s1-sweep, .s1-loose, .flame, .mq-track { animation: none; }
  .s1-hooked, .s1-loose, .s1-hook { transition: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .card { transition: none; transform: none; }
  .rw { opacity: 1 !important; filter: none !important; }
  .rw-block { transform: none !important; }
  .coin i { animation: none; }
  .row { transition: background 0.3s; }
  .pick:hover { transform: none; }
}