/* Layout: the page is one walk down a brass pipe. Each section is a stop on it. Story items sit on aged paper (.sheet), tools and facts on riveted metal plates (.plate), the main action is brushed gold. Same kit as the game itself, one deliberate night look. */
:root {
  --bg: #16191a;
  --ink: #ece4d2;
  --muted: #a7a191;
  --line: #3d4446;
  --gold: #e3a72f;
  --gold-ink: #f0c25a;
  --on-gold: #2a1c04;
  --alert: #e0573e;
  --paper: #e8dab7;
  --paper-ink: #201d17;
  --paper-muted: #5b5244;
  --paper-line: #b8a985;
  --metal-1: #2b3133;
  --metal-2: #1c2022;
  --teal-1: #2c4a52;
  --teal-2: #1b3036;
  --display: "Big Shoulders Stencil Display", "Saira Stencil One", "Big Shoulders Display", "Arial Narrow", Arial, sans-serif;
  --display-plain: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --crosshair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1c04' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Cpath d='M12 2v6M12 16v6M2 12h6M16 12h6'/%3E%3C/svg%3E");
  --rivets: radial-gradient(circle at 9px 9px, #b9b19c 0 1.5px, #5d584c 2.5px, transparent 3.5px), radial-gradient(circle at calc(100% - 9px) 9px, #b9b19c 0 1.5px, #5d584c 2.5px, transparent 3.5px), radial-gradient(circle at 9px calc(100% - 9px), #b9b19c 0 1.5px, #5d584c 2.5px, transparent 3.5px), radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #b9b19c 0 1.5px, #5d584c 2.5px, transparent 3.5px);
  --grid: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 22px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.55;
  background-color: var(--bg);
  background-image: var(--grain), radial-gradient(120% 60% at 50% 0%, #252b2d 0%, #141718 70%);
  background-attachment: fixed;
}
a { color: var(--gold-ink); }
:where(a, button, input, summary, [tabindex]):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 74rem; margin-inline: auto; padding-inline: 1rem; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.3rem, 5.5vw, 3.6rem); line-height: 0.92; letter-spacing: 0.005em; color: #efe6d0; text-shadow: 0 2px 0 rgba(0,0,0,0.5); }
h3 { font-family: var(--display-plain); font-weight: 800; text-transform: uppercase; font-size: 1.4rem; line-height: 1.05; letter-spacing: 0.03em; }
p { margin: 0; }
.eyebrow { font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.lede { font-size: 1.15rem; max-width: 36rem; }
.muted { color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack > * { min-width: 0; }
.note { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }

/* Paper sheet: tokens re-scoped so text inside reads as ink on paper */
.sheet {
  --ink: var(--paper-ink); --muted: var(--paper-muted); --line: var(--paper-line); --alert: #9b2c1c; --gold-ink: #855700;
  position: relative; isolation: isolate; color: var(--paper-ink); border-radius: 0.3rem;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at calc(100% - 1.15rem) 1.15rem, #d9d2bf 0 2px, #8b8371 3px, #4b463b 5px, rgba(0,0,0,0.35) 6px, transparent 7px),
    var(--grain),
    radial-gradient(140% 120% at 50% 40%, rgba(255,255,255,0) 55%, rgba(120,90,40,0.28) 100%),
    linear-gradient(175deg, #efe2c0, #e3d2aa 60%, #d9c597);
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 14px 30px rgba(0,0,0,0.55);
}
.sheet.stacked::before, .sheet.stacked::after { content: ""; position: absolute; z-index: -1; border-radius: 0.3rem; box-shadow: 0 8px 18px rgba(0,0,0,0.45); }
.sheet.stacked::before { inset: 5px -5px -7px 4px; transform: rotate(1.1deg); background: linear-gradient(170deg, #d6c393, #c4ad7b); }
.sheet.stacked::after { inset: 3px 3px -4px -4px; transform: rotate(-0.8deg); background: linear-gradient(170deg, #ddcca2, #cdb788); }
.sheet h2 { color: var(--paper-ink); text-shadow: none; }
.sheet .eyebrow { color: #3f392e; }
.stamp-red { position: absolute; top: 0.7rem; right: 2.2rem; font-family: var(--display); font-weight: 900; font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(165,40,30,0.6); border: 3px solid rgba(165,40,30,0.55); border-radius: 0.3rem; padding: 0 0.45rem; transform: rotate(7deg); pointer-events: none; mix-blend-mode: multiply; }

/* Metal plate: dark, faint grid, gold corner brackets, four rivets */
.plate {
  position: relative; color: var(--ink); border-radius: 0.45rem; border: 1px solid #4b5254;
  background-color: var(--metal-2);
  background-image: var(--rivets), var(--grid), var(--grain), linear-gradient(180deg, var(--metal-1), var(--metal-2));
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -2px 0 rgba(0,0,0,0.4) inset, 0 10px 22px rgba(0,0,0,0.45);
}
.plate.teal { background-image: var(--rivets), var(--grid), var(--grain), linear-gradient(180deg, var(--teal-1), var(--teal-2)); border-color: #4d6b72; }
.plate::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none; opacity: 0.85;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 16px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) top left / 2px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 16px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) top right / 2px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 16px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 16px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom right / 2px 16px no-repeat;
}
.plate h3 { color: var(--gold-ink); }

/* Buttons: brushed gold for the main action, dark metal for the rest */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: inherit; font-weight: 700; min-height: 3rem; padding: 0.6rem 1.2rem; border-radius: 0.45rem; text-decoration: none; cursor: pointer;
  color: #ece4d2; border: 1.5px solid #6c7273; background: linear-gradient(180deg, #353c3e, #1f2325); box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 3px 8px rgba(0,0,0,0.4); }
.btn:hover { border-color: var(--gold); color: #ece4d2; }
.btn.gold { color: var(--on-gold); border: 1px solid #6b4d10; padding-right: 2.9rem;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 3px), linear-gradient(180deg, #f6d878 0%, #e4b03c 45%, #c48e1f 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -2px 0 rgba(90,60,5,0.45) inset, 0 0 0 3px rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.45); }
.btn.gold::after { content: ""; position: absolute; right: 0.9rem; top: 50%; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); background: var(--crosshair) center / contain no-repeat; opacity: 0.85; }
.btn.gold:hover { color: var(--on-gold); filter: brightness(1.05); }
.btn.gold:active { transform: translateY(2px); }
.btn.small { min-height: 2.5rem; padding: 0.35rem 2.4rem 0.35rem 0.95rem; font-size: 0.95rem; }
.btn.small::after { right: 0.7rem; width: 1rem; height: 1rem; }

/* Header: riveted metal bar */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; border-bottom: 1px solid #4b5254;
  background-image: radial-gradient(circle at 10px 50%, #b9b19c 0 1.4px, #5d584c 2.4px, transparent 3.4px), radial-gradient(circle at calc(100% - 10px) 50%, #b9b19c 0 1.4px, #5d584c 2.4px, transparent 3.4px), var(--grain), linear-gradient(180deg, #30373a, #1b1f21);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.55rem; }
.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: #efe6d0; }
.brand svg { width: 1.8rem; height: auto; flex: none; }
.brand b { font-family: var(--display); font-weight: 900; font-size: 1.45rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a:not(.btn) { color: #ece4d2; text-decoration: none; font-weight: 700; font-size: 0.92rem; }
.nav a:not(.btn):hover { color: var(--gold-ink); }
.nav .links { display: flex; gap: 1.4rem; }
@media (max-width: 760px) { .nav .links { display: none; } }

/* The trail: a brass pipe down the left side, with a pin at every stop */
.trail { position: relative; }
.stop { position: relative; padding-block: clamp(3rem, 7vw, 5rem); }
.stop-mark { display: none; }
@media (min-width: 1100px) {
  .trail { padding-left: 4.5rem; }
  .trail::before { content: ""; position: absolute; left: 1.35rem; top: 2rem; bottom: 3rem; width: 7px; border-radius: 4px;
    background: repeating-linear-gradient(180deg, transparent 0 220px, #5e5038 220px 232px, transparent 232px 240px), linear-gradient(90deg, #5e5038, #c9b48a 40%, #8d7a55 70%, #4a3f2c); box-shadow: 0 0 6px rgba(0,0,0,0.6); }
  .stop-mark { display: block; position: absolute; left: -4.5rem; top: clamp(3rem, 7vw, 5rem); width: 3rem; }
  .stop-mark svg { width: 2.2rem; margin-left: 0.32rem; height: auto; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.6)); }
}

/* Hero */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; } }
.hero h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(3.2rem, 8.4vw, 5.6rem); line-height: 0.88; color: #efe6d0; text-shadow: 0 3px 0 rgba(0,0,0,0.55); }
.hero h1 .gold { color: var(--gold-ink); display: block; }
.hero h1 .row-pin { display: inline-flex; align-items: flex-end; gap: 0.12em; }
.hero h1 .row-pin svg { width: 0.6em; height: auto; transform-origin: 50% 100%; animation: drop 900ms cubic-bezier(.3,1.6,.5,1) 200ms both; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5)); }
@keyframes drop { 0% { transform: translateY(-1.1em) scale(0.9); } 60% { transform: translateY(0) scale(1.04, 0.94); } 100% { transform: none; } }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }
.ticks { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.92rem; color: var(--muted); list-style: none; margin: 0; padding: 0; }
.ticks li::before { content: ""; display: inline-block; width: 0.75rem; height: 0.4rem; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg) translateY(-0.15rem); margin-right: 0.5rem; }

/* Warm-up cipher on paper */
.cipher { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; transform: rotate(-1deg); }
@media (max-width: 600px) { .cipher { transform: none; } }
.cipher h2 { font-size: 2.2rem; }
.keeper { font-family: var(--mono); font-size: 1rem; line-height: 1.45; border-left: 3px solid #9b2c1c; padding-left: 0.8rem; }
.cipher-body { display: grid; gap: 1rem; align-items: center; }
/* The card decides its own layout: wheel above the letters when it is narrow, side by side when there is room */
.cipher { container-type: inline-size; }
@container (min-width: 36rem) { .cipher-body { grid-template-columns: 10.5rem minmax(0, 1fr); } }
.tiles { min-width: 0; }
.wheel { width: 100%; max-width: 10.5rem; margin-inline: auto; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45)); }
.wheel text { font-family: var(--mono); font-weight: 700; }
.wheel .inner { transition: transform 260ms cubic-bezier(.4,1.4,.5,1); transform-origin: 0 0; }
@media (prefers-reduced-motion: reduce) { .wheel .inner { transition: none; } }
.tiles { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.6rem; align-items: center; }
.tiles .lbl { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-muted); }
/* Every letter shares the width evenly, so the whole word always stays on one line */
.word { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.25rem; min-width: 0; max-width: 21rem; }
.word span { min-width: 0; aspect-ratio: 0.82; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: clamp(0.85rem, 2.4cqi, 1.15rem); border-radius: 0.25rem; }
.word.coded span { background: rgba(255,250,235,0.45); border: 1.5px solid #9d8f70; color: var(--paper-ink); }
.word.plain span { background: linear-gradient(180deg, #2a3032, #15181a); color: #f0c25a; border: 1px solid #4b5254; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); }
.word.plain.solved span { background: linear-gradient(180deg, #f6d878, #d9a33a); color: var(--on-gold); border-color: #6b4d10; animation: pop 380ms ease both; }
.word.plain.solved span:nth-child(2) { animation-delay: 40ms; } .word.plain.solved span:nth-child(3) { animation-delay: 80ms; }
.word.plain.solved span:nth-child(4) { animation-delay: 120ms; } .word.plain.solved span:nth-child(5) { animation-delay: 160ms; }
.word.plain.solved span:nth-child(6) { animation-delay: 200ms; } .word.plain.solved span:nth-child(7) { animation-delay: 240ms; }
.word.plain.solved span:nth-child(8) { animation-delay: 280ms; } .word.plain.solved span:nth-child(9) { animation-delay: 320ms; }
@keyframes pop { 50% { transform: translateY(-5px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .word.plain.solved span { animation: none; } }
.controls { display: flex; align-items: center; gap: 0.5rem; }
.turn { font: inherit; font-weight: 700; font-size: 1rem; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 0.45rem; border: 1.5px solid #6c7273; background: linear-gradient(180deg, #353c3e, #1f2325); color: #ece4d2; cursor: pointer; }
.turn:hover { border-color: var(--gold); }
.controls input[type="range"] { flex: 1 1 8rem; min-width: 0; accent-color: #c48e1f; }
.cipher-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; border-top: 1.5px dashed var(--paper-line); padding-top: 0.8rem; }
.clock { font-family: var(--mono); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; color: #f0c25a; background: linear-gradient(180deg, #2a3032, #15181a); border: 1px solid #4b5254; border-radius: 0.35rem; padding: 0.15rem 0.6rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); }
.clock small { font-size: 0.75rem; color: #ff8b72; margin-left: 0.35rem; }
.hint-btn { font: inherit; font-weight: 700; font-size: 0.88rem; border-radius: 0.4rem; padding: 0.4rem 0.8rem; cursor: pointer; color: #ece4d2; border: 1.5px solid #6c7273; background: linear-gradient(180deg, #353c3e, #1f2325); }
.hint-btn:disabled { opacity: 0.5; cursor: default; }
.hint { font-family: var(--mono); font-size: 0.95rem; border: 1px dashed #9b2c1c; border-radius: 0.35rem; padding: 0.5rem 0.7rem; }
.win { font-family: var(--mono); font-size: 0.95rem; background: linear-gradient(180deg, #2a3032, #15181a); color: #ece4d2; border-radius: 0.35rem; padding: 0.85rem 1rem; border: 1px solid #4b5254; }
.win b { color: #f0c25a; }
.win a { color: #f0c25a; font-weight: 700; }

/* Quick facts: four plates */
.facts { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { padding: 1.3rem 1.1rem 1.2rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.55rem; }
.fact svg { width: 2.6rem; height: 2.6rem; color: var(--gold-ink); filter: drop-shadow(0 0 6px rgba(240,194,90,0.25)); }
.fact h3 { font-size: 1.2rem; color: var(--gold-ink); }
.fact p { color: var(--muted); font-size: 0.92rem; }
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } }

/* How it plays: gold pins on a brass line */
.route { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.route li { position: relative; display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; padding-bottom: 1.8rem; }
.route li::before { content: ""; position: absolute; left: 1.45rem; top: 3.6rem; bottom: 0.2rem; width: 5px; border-radius: 3px; background: linear-gradient(90deg, #5e5038, #c9b48a 45%, #5e5038); }
.route li:last-child::before { display: none; }
.route .pin { position: relative; width: 3.2rem; height: 3.9rem; }
.route .pin svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.55)); }
.route .pin span { position: absolute; left: 0; right: 0; top: 0.55rem; text-align: center; font-family: var(--display-plain); font-weight: 900; font-size: 1.35rem; color: var(--on-gold); }
.route li:last-child .pin svg { filter: saturate(0) brightness(1.55) drop-shadow(0 4px 4px rgba(0,0,0,0.55)); }
.route h3 { font-size: 1.35rem; padding-top: 0.5rem; }
.route p { color: var(--muted); max-width: 30rem; margin-top: 0.3rem; }
@media (min-width: 980px) {
  .route { grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
  .route li { grid-template-columns: 1fr; padding-bottom: 0; }
  .route li::before { left: 3.6rem; right: -1.2rem; top: 1.45rem; bottom: auto; width: auto; height: 5px; background: linear-gradient(180deg, #5e5038, #c9b48a 45%, #5e5038); }
}
.split { display: grid; gap: 1.5rem 2rem; }
@media (min-width: 900px) { .split { grid-template-columns: 0.8fr 1.2fr; align-items: end; } }

/* Case files: manila folders */
.cases { display: grid; gap: 1.2rem; }
.poster { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center bottom; border-radius: 0.25rem; background: #1c2022; box-shadow: 0 10px 22px rgba(0,0,0,0.45); border: 3px solid #f4ead1; }
.case { padding: 1.5rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.55rem; }
.case .tab { position: absolute; top: -1.55rem; left: 1.2rem; font-family: var(--mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.9rem 0.25rem; border-radius: 0.4rem 0.4rem 0 0; color: var(--paper-ink); background: linear-gradient(180deg, #efe2c0, #e8dab7); }
.case .town { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.5rem, 6vw, 3.4rem); line-height: 0.85; color: var(--paper-ink); }
.case .title { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; }
.case p:not(.town):not(.title) { font-family: var(--mono); font-size: 0.98rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { font-size: 0.8rem; font-weight: 700; border: 1.5px solid var(--paper-ink); border-radius: 999px; padding: 0.15rem 0.65rem; }
.chip.live { background: linear-gradient(180deg, #2a3032, #15181a); color: #f0c25a; border-color: #15181a; }
.featured { display: grid; gap: 1.2rem; }
@media (min-width: 640px) { .featured { grid-template-columns: minmax(12rem, 16rem) 1fr; align-items: center; gap: 1.8rem; } }
.featured .poster { max-width: 16rem; margin-inline: auto; transform: rotate(-1.8deg); }
.featured .copy { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.minis { display: grid; gap: 1.2rem; }
@media (min-width: 480px) { .minis { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .minis { grid-template-columns: repeat(4, 1fr); } }
.mini { padding: 1.1rem 1rem 1rem; gap: 0.45rem; }
.mini .poster { margin-bottom: 0.4rem; transform: rotate(0.8deg); }
.mini .town { font-size: 2rem; }
.mini .title { font-size: 0.92rem; }
.mini p:not(.town):not(.title) { font-size: 0.9rem; color: var(--paper-muted); }

/* Passport and map, side by side on wide screens */
.duo { display: grid; gap: 2rem; }
@media (min-width: 980px) { .duo { grid-template-columns: 1fr 1fr; align-items: start; } }
.book { padding: 1.4rem; }
.book-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1.5px dashed rgba(236,228,210,0.25); padding-bottom: 0.7rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.book-head b { font-family: var(--display-plain); font-weight: 900; text-transform: uppercase; font-size: 1.4rem; letter-spacing: 0.06em; color: var(--gold-ink); }
.book-head span { font-family: var(--mono); font-variant-numeric: tabular-nums; color: #ece4d2; }
.stamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.stamp-btn { font: inherit; aspect-ratio: 1; max-width: 100%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; cursor: pointer; padding: 0.4rem; transition: transform 200ms ease;
  color: #bcd6d8; background: radial-gradient(circle at 40% 35%, #315a62, #16292e 75%); border: 3px solid #6f9aa0; box-shadow: inset 0 0 0 4px #16292e, inset 0 0 0 6px #6f9aa0, 0 4px 10px rgba(0,0,0,0.45); }
.stamp-btn svg { width: 36%; height: auto; }
.stamp-btn span { font-family: var(--display-plain); font-weight: 800; text-transform: uppercase; font-size: clamp(0.72rem, 2.4vw, 0.95rem); letter-spacing: 0.05em; line-height: 1; text-align: center; }
.stamp-btn:hover { transform: rotate(-6deg) scale(1.03); color: #eef7f7; }
.stamp-btn[aria-pressed="true"] { color: var(--on-gold); background: radial-gradient(circle at 40% 35%, #f6d878, #c48e1f 80%); border-color: #6b4d10; box-shadow: inset 0 0 0 4px #c48e1f, inset 0 0 0 6px #6b4d10, 0 0 14px rgba(240,194,90,0.45); transform: rotate(-8deg); animation: thunk 300ms ease; }
@keyframes thunk { 0% { transform: scale(1.4) rotate(6deg); } 100% { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .stamp-btn, .stamp-btn[aria-pressed="true"] { animation: none; transition: none; } }
.stamp-btn.finale { color: #ff9b84; border-color: #a5463a; box-shadow: inset 0 0 0 4px #16292e, inset 0 0 0 6px #a5463a, 0 4px 10px rgba(0,0,0,0.45); cursor: default; }
.stamp-btn.finale:hover { transform: none; }
.stamp-btn.finale.open { color: #fff; background: radial-gradient(circle at 40% 35%, #e0573e, #8f2a1b 80%); animation: thunk 300ms ease; transform: rotate(5deg); }
.mapbox { padding: 1.2rem; }
.map svg { width: 100%; height: auto; display: block; }
.map .land { fill: #2b3437; stroke: #c9b48a; stroke-width: 2.5; stroke-linejoin: round; }
.map .city-dot { fill: #c9b48a; opacity: 0.6; }
.map text { font-family: var(--display-plain); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.map .pulse { fill: none; stroke: var(--gold); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map .pulse { animation: none; opacity: 0.5; } }
.vote { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.vote label { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.vote .row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.vote input { font: inherit; flex: 1 1 10rem; min-width: 0; min-height: 3rem; padding: 0.5rem 0.8rem; border-radius: 0.45rem; border: 1.5px solid #3d4446; background: #121516; color: #ece4d2; box-shadow: inset 0 2px 5px rgba(0,0,0,0.6); }
.vote input::placeholder { color: var(--muted); opacity: 0.8; }
.vote .out { font-family: var(--mono); font-size: 0.9rem; color: var(--gold-ink); min-height: 1.2em; }
.vote .fine { font-size: 0.8rem; color: var(--muted); }

/* Ways to play */
.ways { display: grid; gap: 1.2rem; }
@media (min-width: 720px) { .ways { grid-template-columns: repeat(2, 1fr); } }
.way { padding: 1.4rem; display: grid; grid-template-columns: 3.6rem 1fr; gap: 1rem; align-items: start; }
.way .badge { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; color: var(--on-gold); background: radial-gradient(circle at 40% 35%, #f6d878, #c48e1f 80%); box-shadow: inset 0 0 0 3px #c48e1f, inset 0 0 0 5px #6b4d10, 0 4px 10px rgba(0,0,0,0.5); }
.way .badge svg { width: 1.9rem; height: 1.9rem; }
.way .stack { gap: 0.45rem; }
.way h3 { font-size: 1.5rem; }
.way dl { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.8rem; margin: 0.3rem 0 0; font-size: 0.92rem; }
.way dt { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); padding-top: 0.12rem; }
.way dd { margin: 0; color: var(--muted); }

/* Scoreboards */
.boards { display: grid; gap: 2rem; }
@media (min-width: 900px) { .boards { grid-template-columns: 1fr 1fr; align-items: start; } }
.rules { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.rules li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.6rem; color: var(--muted); }
.rules li b { color: #ece4d2; }
.rules svg { width: 1.4rem; height: 1.4rem; color: var(--gold-ink); margin-top: 0.15rem; }
.board { overflow: hidden; padding: 0.6rem 0.6rem 0.3rem; }
.board-tabs { display: flex; gap: 0.4rem; padding: 0.4rem 0.4rem 0.7rem; }
.board-tabs button { font: inherit; font-weight: 700; font-size: 0.85rem; flex: 1 1 0; min-width: 0; padding: 0.55rem 0.3rem; border-radius: 0.4rem; cursor: pointer; color: #ece4d2; border: 1.5px solid #6c7273; background: linear-gradient(180deg, #353c3e, #1f2325); }
.board-tabs button[aria-selected="true"] { color: var(--on-gold); border-color: #6b4d10; background: linear-gradient(180deg, #f6d878, #c48e1f); }
.board .screen { margin: 0 0.4rem; border-radius: 0.35rem; background: #0d1112; border: 1px solid #3a4244; box-shadow: inset 0 0 18px rgba(0,0,0,0.9); overflow-x: auto; }
.board table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board th, .board td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid #1f2729; color: #ece4d2; }
.board th { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.board td { font-family: var(--mono); }
.board td.n { text-align: right; font-weight: 700; color: #f0c25a; text-shadow: 0 0 8px rgba(240,194,90,0.45); }
.board th.n { text-align: right; }
.board td.rank { font-family: var(--display-plain); font-weight: 900; font-size: 1.3rem; color: #f0c25a; width: 3rem; }
.board td.who { color: var(--muted); font-style: italic; }
.board tr:last-child td { border-bottom: 0; }
.board .cap { padding: 0.8rem 0.6rem; font-family: var(--mono); font-size: 0.82rem; color: var(--muted); }

/* FAQ: paper slips */
.faq { display: grid; gap: 0.55rem; max-width: 50rem; }
.faq details { border-radius: 0.3rem; color: var(--paper-ink);
  background-image: var(--grain), linear-gradient(175deg, #efe2c0, #e1cfa4); box-shadow: 0 4px 10px rgba(0,0,0,0.45); border-left: 5px solid transparent; }
.faq details[open] { border-left-color: var(--gold); background-image: var(--grain), linear-gradient(175deg, #f5e7c2, #e8d39b); }
.faq summary { cursor: pointer; list-style: none; padding: 0.9rem 1.1rem; font-weight: 700; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 0.6rem; height: 0.6rem; border-right: 2.5px solid var(--paper-ink); border-bottom: 2.5px solid var(--paper-ink); transform: rotate(45deg) translateY(-0.15rem); transition: transform 200ms ease; flex: none; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding: 0 1.1rem 1rem; color: var(--paper-muted); max-width: 42rem; font-family: var(--mono); font-size: 0.98rem; }

/* Footer: metal */
footer { border-top: 1px solid #4b5254; background-image: var(--grain), linear-gradient(180deg, #23292b, #15181a); }
footer .wrap { padding-block: 2.5rem 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 800px) { footer .wrap { grid-template-columns: 1fr 1.4fr; } }
.small-print { font-family: var(--mono); font-size: 0.82rem; color: var(--muted); }

/* ---------- Multi-page additions (2026-10-16) ---------- */
.skip-link { position: absolute; left: -999px; top: 0.5rem; z-index: 50; background: var(--gold); color: var(--on-gold); padding: 0.5rem 0.9rem; border-radius: 0.4rem; font-weight: 700; }
.skip-link:focus { left: 0.5rem; }
.nav a[aria-current="page"]:not(.btn) { color: var(--gold-ink); }
.crumbs { font-family: var(--mono); font-size: 0.82rem; color: var(--muted); padding-top: 1.4rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.3rem; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-ink); }
a.case-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
a.case-link:hover .title, a.case-link:focus-visible .title { text-decoration: underline; text-underline-offset: 3px; }
.more { font-family: var(--mono); font-weight: 700; font-size: 0.9rem; color: #855700; }
.chip.working { border-style: dashed; }

/* Poster stand-in for games with no art yet: a stamped plate */
.poster.blank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; padding: 1rem; text-align: center;
  background-image: var(--grid), var(--grain), linear-gradient(180deg, var(--teal-1), var(--teal-2)); color: #bcd6d8; }
.poster.blank svg { width: 34%; height: auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5)); }
.poster.blank b { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.7rem; line-height: 0.95; color: #efe6d0; }
.poster.blank span { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* Game page */
.game-hero { padding-block: 1.6rem clamp(2rem, 5vw, 3.5rem); }
.game-hero .case { margin-top: 2rem; }
.game-hero .featured { align-items: start; }
@media (min-width: 640px) { .game-hero .featured { grid-template-columns: minmax(12rem, 18rem) 1fr; } .game-hero .featured .poster { max-width: 18rem; } }
.game-hero h1.town { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.8rem, 8vw, 4.6rem); line-height: 0.85; color: var(--paper-ink); }
.game-hero .title { font-family: var(--mono); font-weight: 700; font-size: 1.25rem; }
.status-stamp { top: 0.9rem; right: 1.6rem; }
.notify { display: flex; flex-direction: column; gap: 0.6rem; border-top: 1.5px dashed var(--paper-line); padding-top: 1rem; margin-top: 0.3rem; }
.notify h2 { font-size: 1.6rem; }
.notify label.lbl { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.notify .row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.notify input[type="email"], .vote input[type="email"] { font: inherit; flex: 1 1 13rem; min-width: 0; min-height: 3rem; padding: 0.5rem 0.8rem; border-radius: 0.45rem; border: 1.5px solid #3d4446; background: #121516; color: #ece4d2; box-shadow: inset 0 2px 5px rgba(0,0,0,0.6); }
.notify input::placeholder { color: #8e887a; }
.notify .tick { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.92rem; }
.notify .tick input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; accent-color: #855700; flex: none; }
.notify .fine, .vote .fine { font-size: 0.8rem; color: var(--muted); }
.out { font-family: var(--mono); font-size: 0.92rem; min-height: 1.2em; font-weight: 700; }
.out[data-tone="bad"] { color: var(--alert); }
.sheet .out[data-tone="good"] { color: #2f5d1f; }
.out[data-tone="good"] { color: #8fd18f; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.game-body { display: grid; gap: 2rem; padding-bottom: clamp(3rem, 7vw, 5rem); }
@media (min-width: 960px) { .game-body { grid-template-columns: 1.25fr 0.75fr; align-items: start; } }
.game-body .story { display: flex; flex-direction: column; gap: 1rem; }
.game-body .story p { max-width: 40rem; }
.game-body h2 { font-size: clamp(1.9rem, 4.2vw, 2.6rem); }
.suspects { display: grid; gap: 0.9rem; }
@media (min-width: 640px) { .suspects { grid-template-columns: 1fr 1fr; } }
.suspect { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.suspect b { font-family: var(--display-plain); font-weight: 800; text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.02em; }
.suspect p { font-family: var(--mono); font-size: 0.92rem; }
.puzzles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.puzzles li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.7rem; align-items: start; }
.puzzles li svg { width: 1.6rem; height: 1.6rem; color: var(--gold-ink); margin-top: 0.1rem; }
.puzzles b { display: block; }
.puzzles span { color: var(--muted); font-size: 0.95rem; }
.gamecard { padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.9rem; }
@media (min-width: 960px) { .gamecard { position: sticky; top: 5rem; } }
.gamecard dl { margin: 0; display: grid; gap: 0.75rem; }
.gamecard dt { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.gamecard dd { margin: 0.1rem 0 0; }
.gamecard dd.tbc { color: var(--muted); font-style: italic; }
.fiction { font-size: 0.88rem; color: var(--muted); }

/* Games index and simple pages */
.page-head { padding-block: 1.6rem 1.8rem; display: flex; flex-direction: column; gap: 1rem; }
.page-head h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.8rem, 7vw, 4.4rem); line-height: 0.9; color: #efe6d0; }
.grid-cases { display: grid; gap: 1.4rem; padding-bottom: clamp(3rem, 7vw, 5rem); }
@media (min-width: 560px) { .grid-cases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid-cases { grid-template-columns: repeat(4, 1fr); } }
.prose { max-width: 44rem; display: flex; flex-direction: column; gap: 1rem; padding-bottom: clamp(3rem, 7vw, 5rem); }
.prose h2 { font-size: 1.9rem; margin-top: 1rem; }
.prose ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.9rem; }
.foot-links a { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Colour by game type (2026-10-16) ----------
   Gold, black and cream stay the brand: header, buttons, the main call to action.
   Each type of game adds one accent, used on its cards, chips, tabs and page details.
   --accent is for dark backgrounds, --accent-ink for text on dark, --accent-paper for text on the cream case files. */
:root {
  --town: #e3a72f; --town-ink: #f0c25a; --town-paper: #855700;
  --trail: #2fb5a3; --trail-ink: #6fd8c8; --trail-paper: #0b6156;
  --mega: #e4553f; --mega-ink: #ff8a73; --mega-paper: #9b2c1c;
  --limited: #9a7ae6; --limited-ink: #bfa8f5; --limited-paper: #5a3ea6;
  --live: #3d9be9; --live-ink: #86c3f7; --live-paper: #1b5c99;
}
.kind-town { --accent: var(--town); --accent-ink: var(--town-ink); --accent-paper: var(--town-paper); }
.kind-trail { --accent: var(--trail); --accent-ink: var(--trail-ink); --accent-paper: var(--trail-paper); }
.kind-mega { --accent: var(--mega); --accent-ink: var(--mega-ink); --accent-paper: var(--mega-paper); }
.kind-limited { --accent: var(--limited); --accent-ink: var(--limited-ink); --accent-paper: var(--limited-paper); }
.kind-live { --accent: var(--live); --accent-ink: var(--live-ink); --accent-paper: var(--live-paper); }

/* Case files: a coloured band across the top and a coloured tab edge */
.case[class*="kind-"] { box-shadow: inset 0 6px 0 var(--accent), 0 1px 0 rgba(255,255,255,0.35) inset, 0 14px 30px rgba(0,0,0,0.55); }
.case[class*="kind-"] .tab { box-shadow: inset 0 3px 0 var(--accent); color: var(--accent-paper); }
.case[class*="kind-"] .poster { border-color: var(--accent); }
.case[class*="kind-"] .more { color: var(--accent-paper); }
.chip.kind { background: var(--accent, var(--gold)); border-color: var(--accent, var(--gold)); color: #15191a; }
.poster.blank { background-image: var(--grid), var(--grain), linear-gradient(180deg, color-mix(in srgb, var(--accent, #2c4a52) 45%, #1c2022), #1c2022); color: #e9f2f1; }

/* Game page details pick up the accent */
.game-page .game-body .eyebrow { color: var(--accent-ink); }
.game-page .puzzles li svg { color: var(--accent-ink); }
.game-page .gamecard { --gold: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, #4b5254); }
.game-page .gamecard h3 { color: var(--accent-ink); }
.game-page.kind-trail .gamecard { background-image: var(--rivets), var(--grid), var(--grain), linear-gradient(180deg, var(--teal-1), var(--teal-2)); }

/* Games index: one section per type with a colour key */
.kind-block { padding-top: 0.4rem; }
.kind-head { display: flex; align-items: center; gap: 0.7rem; font-size: 2rem; color: var(--accent-ink); }
.kind-head .swatch { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(0,0,0,0.4), 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); flex: none; }
.kind-note { margin: 0.4rem 0 1.2rem; }

/* Ways to play: each badge in its type colour */
.way[class*="kind-"] { --gold: var(--accent); }
.way[class*="kind-"] .badge { color: #15191a; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent) 80%); box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 5px color-mix(in srgb, var(--accent) 50%, #000), 0 4px 10px rgba(0,0,0,0.5); }
.way[class*="kind-"] h3, .way[class*="kind-"] dt { color: var(--accent-ink); }

/* Header account button and footer navigation */
.btn.acct { min-height: 2.5rem; padding: 0.35rem 0.95rem; font-size: 0.95rem; }
.btn.acct[aria-current="page"] { border-color: var(--gold); color: var(--gold-ink); }
@media (max-width: 420px) { .btn.acct { padding-inline: 0.7rem; } .top .btn.gold.small { padding-right: 0.9rem; } .top .btn.gold.small::after { display: none; } }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; align-content: start; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0.35rem 0.95rem; border-radius: 0.45rem; text-decoration: none; font-weight: 700; font-size: 0.92rem;
  color: #ece4d2; border: 1.5px solid #6c7273; background: linear-gradient(180deg, #353c3e, #1f2325); }
.foot-nav a:hover, .foot-nav a[aria-current="page"] { border-color: var(--gold); color: var(--gold-ink); }

/* Contact and account pages */
.contact-form { max-width: 40rem; padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(3rem, 7vw, 5rem); }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; min-height: 3rem; padding: 0.55rem 0.8rem; border-radius: 0.45rem; border: 1.5px solid #3d4446; background: #121516; color: #ece4d2; box-shadow: inset 0 2px 5px rgba(0,0,0,0.6); }
.field textarea { resize: vertical; min-height: 9rem; }
.contact-form .fine { font-size: 0.8rem; color: var(--muted); }
.account-grid { display: grid; gap: 2rem; padding-bottom: clamp(3rem, 7vw, 5rem); }
@media (min-width: 900px) { .account-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.perks li { padding: 0.4rem 0; }
.account-card { padding: 1.4rem; }
.account-card .notify { border-top: 0; padding-top: 0; margin-top: 0; }
.cf-turnstile { min-height: 65px; }

/* ---------- Locations, filters and boards (2026-10-16) ---------- */
.town-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.town-chip { display: inline-flex; flex-direction: column; gap: 0.05rem; min-width: 7.5rem; padding: 0.55rem 0.9rem; border-radius: 0.5rem; text-decoration: none;
  color: #ece4d2; border: 1.5px solid #4d6b72; background: linear-gradient(180deg, var(--teal-1), var(--teal-2)); box-shadow: 0 4px 10px rgba(0,0,0,0.35); }
.town-chip b { font-family: var(--display-plain); font-weight: 800; text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.03em; line-height: 1.05; }
.town-chip span { font-family: var(--mono); font-size: 0.78rem; color: #bcd6d8; }
.town-chip:hover { border-color: var(--gold); }
.town-chip:hover b { color: var(--gold-ink); }
.region-row { display: flex; flex-direction: column; gap: 0.7rem; }
.region-row h3 a, .region-block h2 a { color: inherit; text-decoration: none; }
.region-row h3 a:hover, .region-block h2 a:hover { color: var(--gold-ink); }
.regions { display: flex; flex-direction: column; gap: 2rem; }
.region-block { display: flex; flex-direction: column; gap: 0.8rem; }
.region-block h2 { font-size: clamp(2rem, 5vw, 2.8rem); }
.region-block .state { font-family: var(--mono); font-size: 1rem; text-transform: none; letter-spacing: 0.1em; }
.row-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.filters { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.8rem; padding: 1rem; border-radius: 0.5rem; border: 1px solid #3d4446; background: rgba(0,0,0,0.25); }
.filter-row { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.filter-label { font-family: var(--mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); min-width: 4rem; }
.btn.small-f { min-height: 2.4rem; padding: 0.3rem 0.85rem; font-size: 0.9rem; }
.btn.small-f .swatch { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--accent); display: inline-block; }
.btn.small-f[aria-pressed="true"] { color: var(--on-gold); border-color: #6b4d10; background: linear-gradient(180deg, #f6d878, #c48e1f); }
.filters .out { margin: 0; color: var(--muted); font-weight: 400; }
[data-filtered-out] { display: none !important; }

.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
@media (min-width: 720px) { .board-list { grid-template-columns: 1fr 1fr; } }
.board-list a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.95rem; border-radius: 0.45rem; text-decoration: none; color: #ece4d2;
  border: 1.5px solid #4b5254; background: linear-gradient(180deg, #2b3133, #1c2022); }
.board-list a:hover { border-color: var(--gold); }
.board-list span { font-family: var(--mono); color: var(--muted); }
.trail > .crumbs, .trail > .page-head { position: relative; }
#passport > .stack { max-width: 38rem; }

/* Account page (assets/hunt-account.js shows one panel at a time) */
.account-card[data-loading] .acct-panel, .account-card[data-loading] .acct-top { visibility: hidden; }
.account-card form { display: flex; flex-direction: column; gap: 0.9rem; }
.account-card h2 { font-size: 1.6rem; }
.account-card h3 { font-size: 1.15rem; margin-top: 1.4rem; }
.acct-panel { display: flex; flex-direction: column; gap: 0.8rem; }
.acct-panel[hidden], .acct-top[hidden], .gsi[hidden], [data-guest-note][hidden], [data-name-prompt][hidden] { display: none; }
.acct-top { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.1rem; }
.acct-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1.5px dashed var(--paper-line); }
.acct-tabs button { font: inherit; font-weight: 700; min-height: 2.9rem; padding: 0.4rem 0.6rem; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1.5px; color: var(--paper-muted); cursor: pointer; }
.acct-tabs button[aria-selected="true"] { color: var(--paper-ink); border-bottom-color: #855700; }
.field .hint { font-size: 0.82rem; color: var(--muted); margin: 0; }
.guest-note, .name-prompt { font-size: 0.92rem; padding: 0.6rem 0.8rem; border-left: 3px solid #855700; background: rgba(133,87,0,0.08); margin: 0; }
.account-card .fine { font-size: 0.85rem; color: var(--muted); margin: 0; }
.account-card .out:empty { display: none; }
.gsi { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.gsi .or { display: flex; align-items: center; gap: 0.7rem; width: 100%; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0; }
.gsi .or::before, .gsi .or::after { content: ""; flex: 1; border-top: 1px solid var(--paper-line); }
.account-card details.danger { margin-top: 1.2rem; border-top: 1.5px dashed var(--paper-line); padding-top: 0.9rem; }
.account-card details.danger summary { cursor: pointer; font-weight: 700; color: var(--alert); }
.account-card details.danger form { margin-top: 0.8rem; }
@media (max-width: 899px) { .account-grid .account-card { order: -1; } }
.top .btn.acct { white-space: nowrap; max-width: 11rem; overflow: hidden; }
.field .hint { border: 0; padding: 0; background: none; font-family: var(--body); }
.board tr.you td { color: var(--gold-ink); font-weight: 700; }

/* Player dashboard on /account/ (signed in). Plates for the player's own numbers, case-file paper for games and
   badges, colour-by-type accents on game cards. Credits, invites and email preferences are placeholders. */
[data-signed-out][hidden], [data-dashboard][hidden] { display: none; }
.dash { display: grid; gap: 2rem; padding-bottom: clamp(3rem, 7vw, 5rem); }
.dash-card { padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.dash-card h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.dash-card h3 { font-size: 1.1rem; }
.dash .btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }
.dash-pair { display: grid; gap: 2rem; }
@media (min-width: 900px) { .dash-pair { grid-template-columns: 1fr 1fr; align-items: start; } }

.dash-head { padding: 1.5rem 1.3rem; display: flex; flex-direction: column; gap: 1.2rem; }
.dash-head .who { display: flex; gap: 1rem; align-items: center; min-width: 0; }
.dash-head .who > div { min-width: 0; }
.badge-initial { flex: none; width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 2.3rem; color: var(--on-gold);
  background: radial-gradient(circle at 40% 35%, #f6d878, #c48e1f 80%); box-shadow: inset 0 0 0 3px #c48e1f, inset 0 0 0 5px #6b4d10, 0 0 14px rgba(240,194,90,0.35); }
.player-name { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 0.9; color: #efe6d0; overflow-wrap: anywhere; }
.dash-head .since { font-family: var(--mono); font-size: 0.9rem; color: var(--muted); margin: 0.3rem 0 0; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 0; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats div { border: 1px solid rgba(236,228,210,0.18); border-radius: 0.35rem; padding: 0.6rem 0.75rem; background: rgba(0,0,0,0.22); }
.stats dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.stats dd { margin: 0.15rem 0 0; font-family: var(--display-plain); font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.dash-head .name-prompt { color: #ece4d2; background: rgba(227,167,47,0.12); }
.dash-head .name-prompt a { color: var(--gold-ink); }

.game-group { display: flex; flex-direction: column; gap: 0.6rem; }
.game-group + .game-group { border-top: 1.5px dashed var(--paper-line); padding-top: 0.9rem; }
.game-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
@media (min-width: 640px) { .game-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .game-cards { grid-template-columns: repeat(3, 1fr); } .game-cards.compact { grid-template-columns: repeat(4, 1fr); } }
.game-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.75rem 0.85rem; border: 1px solid var(--paper-line); border-left: 5px solid var(--accent, var(--gold)); border-radius: 0.35rem; background: rgba(255,255,255,0.22); min-width: 0; }
.game-card .kind-tag { font-family: var(--mono); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-paper, var(--paper-muted)); }
.game-card b { font-family: var(--display-plain); font-weight: 900; text-transform: uppercase; font-size: 1.15rem; line-height: 1.05; overflow-wrap: anywhere; }
.game-card .line { font-size: 0.9rem; color: var(--paper-muted); }
.game-card .links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-top: 0.3rem; }
.game-card .more { font-weight: 700; color: #855700; }
.game-card .chip { font-size: 0.72rem; }
.game-cards .empty, .spots .empty, .badges .empty { list-style: none; border: 1.5px dashed var(--line); border-radius: 0.35rem; padding: 0.7rem 0.8rem; color: var(--muted); font-size: 0.92rem; grid-column: 1 / -1; }

.spots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.spots li:not(.empty) { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.8rem; padding: 0.6rem 0; border-bottom: 1px dashed rgba(236,228,210,0.2); }
.spots b { font-family: var(--display-plain); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.spots span { grid-column: 1; font-family: var(--mono); font-size: 0.86rem; color: var(--muted); }
.spots a { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; }
.spots .empty { margin-top: 0.7rem; }

.dash .book .stamps { grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 0.8rem; }
a.stamp-btn { text-decoration: none; }
a.stamp-btn:hover { transform: rotate(-4deg); }
.stamp-btn.got { color: var(--on-gold); background: radial-gradient(circle at 40% 35%, #f6d878, #c48e1f 80%); border-color: #6b4d10; box-shadow: inset 0 0 0 4px #c48e1f, inset 0 0 0 6px #6b4d10, 0 0 14px rgba(240,194,90,0.45); transform: rotate(-8deg); }
.stamp-btn:not(.got) { opacity: 0.6; }
/* Not yet stamped: a locked silhouette, so the whole map and the finish line show from the start (2026-10-19). */
.stamp-btn.locked { opacity: 0.5; background: transparent; border-style: dashed; box-shadow: none; filter: grayscale(1); }
.stamp-btn.locked svg { opacity: 0.55; }
.stamp-btn.starter.got { background: radial-gradient(circle at 40% 35%, #9fe0d0, #2f8f7b 80%); border-color: #1d5a4c; box-shadow: inset 0 0 0 4px #2f8f7b, inset 0 0 0 6px #1d5a4c, 0 0 14px rgba(120,210,190,0.4); color: #0f2a24; }

.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
@media (min-width: 720px) { .badges { grid-template-columns: repeat(3, 1fr); } }
.badge { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.75rem; border: 1.5px dashed var(--paper-line); border-radius: 0.35rem; min-width: 0; }
.badge .medal { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: #cbbd98; color: #8a7d5e; margin-bottom: 0.2rem; }
.badge .medal svg { width: 50%; height: auto; }
.badge b { font-family: var(--display-plain); font-weight: 900; text-transform: uppercase; font-size: 1.02rem; line-height: 1.05; }
.badge span { font-size: 0.86rem; color: var(--paper-muted); }
.badge em { font-style: normal; font-family: var(--mono); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-muted); margin-top: 0.2rem; }
.badge.got { border-style: solid; border-color: #855700; background: rgba(227,167,47,0.12); }
.badge.got .medal { background: radial-gradient(circle at 40% 35%, #f6d878, #c48e1f 80%); color: var(--on-gold); box-shadow: inset 0 0 0 2px #6b4d10; }
.badge.got em { color: #2f5d1f; }

.credits .balance { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; padding: 0.7rem 0.85rem; border: 1px solid rgba(236,228,210,0.18); border-radius: 0.35rem; background: rgba(0,0,0,0.22); }
.credits .balance span { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.credits .balance b { font-family: var(--display-plain); font-weight: 900; text-transform: uppercase; font-size: 1.3rem; color: var(--gold-ink); }
.redeem { display: flex; flex-direction: column; gap: 0.35rem; }
.redeem label { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.redeem .row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.redeem input { font: inherit; flex: 1 1 10rem; min-width: 0; min-height: 3rem; padding: 0.5rem 0.8rem; border-radius: 0.45rem; border: 1.5px solid #3d4446; background: #121516; color: #ece4d2; }
.redeem input:disabled { opacity: 0.6; }
.credits .soon { align-self: flex-start; margin: 0; font-family: var(--display); font-weight: 900; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: #ff9b84; border: 3px solid #a5463a; border-radius: 0.3rem; padding: 0 0.45rem; transform: rotate(-3deg); }

.settings:focus { outline: none; }
.set-grid { display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .set-grid { grid-template-columns: 1fr 1fr; } }
.set { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.set h3 { color: var(--gold-ink); margin-top: 0.4rem; }
.set form { display: flex; flex-direction: column; gap: 0.8rem; }
.set .row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dash .fine { font-size: 0.85rem; color: var(--muted); margin: 0; }
.dash .out:empty { display: none; }
.own-email { font-family: var(--mono); font-weight: 700; overflow-wrap: anywhere; margin: 0; }
.settings details.danger { margin-top: 0.6rem; border-top: 1.5px dashed rgba(236,228,210,0.25); padding-top: 0.9rem; }
.settings details.danger summary { cursor: pointer; font-weight: 700; color: #ff8a73; }
.settings details.danger form { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.8rem; }
.game-cards.compact { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.compact .game-card { padding: 0.6rem 0.65rem; }
.compact .game-card b { font-size: 0.98rem; }
.compact .game-card .kind-tag { font-size: 0.66rem; }
.compact .game-card .links { margin-top: 0.1rem; }

/* Tester access (2026-10-17) */
.access-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0; padding: 0.7rem 0.85rem; border-radius: 0.35rem; border: 1px solid rgba(127,208,159,0.45); background: rgba(127,208,159,0.08); }
.access-state b { color: #7fd09f; }
.code-new { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 560px) { .code-new { grid-template-columns: 2fr 1fr; } }
.code-new select { font: inherit; min-height: 3rem; padding: 0.4rem 0.6rem; border-radius: 0.45rem; border: 1.5px solid #3d4446; background: #121516; color: #ece4d2; width: 100%; }
.codes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.codes li { display: grid; gap: 0.25rem; padding: 0.6rem 0.75rem; border-radius: 0.35rem; border: 1px solid rgba(236,228,210,0.18); background: rgba(0,0,0,0.22); }
.codes li.off { opacity: 0.55; }
.codes code { font-family: var(--mono); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.08em; color: var(--gold-ink); }
.codes .line { font-size: 0.88rem; color: var(--muted); }
.codes .links { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.board .house-tag { display: inline-block; vertical-align: middle; font-family: var(--mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-gold); background: linear-gradient(180deg, #f6d878, #c48e1f); border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.2rem; white-space: nowrap; }

/* Dashboard tabs: one section at a time; the bar scrolls sideways on a phone. */
.dash-tabs [role="tablist"] { position: relative; display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: none; padding: 0.2rem 0.1rem 0.4rem; -webkit-overflow-scrolling: touch; }
.dash-tabs [role="tablist"]::-webkit-scrollbar { display: none; }
.dash-tabs button { font: inherit; font-weight: 700; font-size: 0.95rem; white-space: nowrap; min-height: 2.75rem; padding: 0.4rem 1.05rem; border-radius: 999px; cursor: pointer; color: #ece4d2; border: 1.5px solid #6c7273; background: linear-gradient(180deg, #353c3e, #1f2325); flex: none; }
.dash-tabs button:hover { border-color: var(--gold); }
.dash-tabs button[aria-selected="true"] { color: var(--on-gold); border-color: #6b4d10; background: linear-gradient(180deg, #f6d878, #c48e1f); }
.dash-tabs button[hidden], .dash-panel[hidden] { display: none; }
.dash-panel { display: grid; gap: 2rem; min-width: 0; }
.dash > .dash-tabs { margin-bottom: -0.8rem; }
.dash { grid-template-columns: minmax(0, 1fr); } .dash-tabs { min-width: 0; }

/* team: a team code with its QR on the lead's phone, and who has joined */
.team-none, .team-on { display: flex; flex-direction: column; gap: 0.9rem; }
.team-none[hidden], .team-on[hidden], .team-code[hidden], [data-join-note][hidden], .team [hidden] { display: none; }
.team select { font: inherit; min-height: 3rem; padding: 0.4rem 0.6rem; border-radius: 0.45rem; border: 1.5px solid #3d4446; background: #121516; color: #ece4d2; width: 100%; }
.team-for { margin: 0; }
.team-code { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; padding: 0.9rem; border-radius: 0.45rem; border: 1px solid rgba(236,228,210,0.18); background: rgba(0,0,0,0.22); }
.team-code .qr { width: min(12rem, 60vw); flex: none; border-radius: 0.3rem; overflow: hidden; background: #fff; }
.team-code .qr svg { display: block; width: 100%; height: auto; }
.team-code b { display: block; font-family: var(--mono); font-weight: 700; font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: 0.14em; color: var(--gold-ink); line-height: 1.1; }
.team-code .fine { margin: 0; }
.team-list li { grid-template-columns: 1fr auto; }
.team-list li b { grid-column: 1; }
.team-list li .line { grid-column: 1; }
.team-list li .links { grid-column: 2; grid-row: 1 / span 2; }
.team-list li.empty { list-style: none; border: 1.5px dashed var(--line); background: none; color: var(--muted); font-size: 0.92rem; }
.account-card .tick { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; line-height: 1.45; }
.account-card .tick input { width: 1.25rem; height: 1.25rem; margin-top: 0.12rem; accent-color: #855700; flex: none; }
/* Leaderboard period buttons (All time, This year, This month) and the Beat the house tag */
.board-periods { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.6rem; }
.board-periods button { font: inherit; font-weight: 700; font-size: 0.8rem; min-height: 2.2rem; padding: 0.2rem 0.8rem; border-radius: 999px; cursor: pointer; color: #ece4d2; border: 1.5px solid #6c7273; background: transparent; }
.board-periods button:hover { border-color: var(--gold); }
.board-periods button[aria-pressed="true"] { color: var(--on-gold); border-color: #6b4d10; background: linear-gradient(180deg, #f6d878, #c48e1f); }
.board .beat-tag { display: inline-block; vertical-align: middle; font-family: var(--mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8fd18f; border: 1px solid #5d8f5d; border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.2rem; white-space: nowrap; }

/* Game page narrator clip (apply_narrator.py) */
.narrator { display: grid; gap: 0.5rem; margin: 0.6rem 0 0.2rem; }
.narr-play { justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; }
.narr-play svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.narr-play[aria-pressed="true"] svg path { d: path("M7 5h4v14H7zM13 5h4v14h-4z"); }
.narr-play small { opacity: 0.75; font-weight: 700; }
.narr-words { font-style: italic; font-size: 0.95rem; opacity: 0.9; margin: 0; }
/* Purchases list on the account page (Credits tab) */
.purchases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.purchases li:not(.empty) { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.8rem; padding: 0.55rem 0; border-bottom: 1px dashed rgba(236,228,210,0.2); }
.purchases b { font-family: var(--display-plain); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.purchases span { grid-column: 1; font-family: var(--mono); font-size: 0.86rem; color: var(--muted); }
.purchases a { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; }
.purchases .empty { border: 1.5px dashed var(--line); border-radius: 0.35rem; padding: 0.6rem 0.8rem; color: var(--muted); font-size: 0.92rem; }
.game-card .chip.owned { border-color: #2f5d1f; color: #2f5d1f; }
.game-card .unlock { display: block; margin-top: 0.35rem; }
.game-card .unlock[hidden] { display: none; }
.dash-games .out:not(:empty) { margin: 0 0 0.6rem; }
.purchases .refund { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-top: 0.2rem; }
.purchases .refund-state { margin: 0; font-family: var(--mono); font-size: 0.86rem; color: var(--gold-ink); }
.purchases .refund-form { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.purchases .refund-form[hidden] { display: none; }
.purchases .refund-form label { display: flex; flex-direction: column; gap: 0.25rem; }
.purchases .refund-form label span { grid-column: auto; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.purchases .refund-form select, .purchases .refund-form textarea { width: 100%; font: inherit; min-height: 3rem; padding: 0.55rem 0.8rem; border-radius: 0.45rem; border: 1.5px solid #3d4446; background: #121516; color: #ece4d2; box-shadow: inset 0 2px 5px rgba(0,0,0,0.6); }
.purchases .refund-form textarea { resize: vertical; min-height: 6rem; }
.purchases .refund button.more { background: none; border: 0; padding: 0.2rem 0; cursor: pointer; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.purchases .refund .fine { margin: 0; }
.credits .voucher { margin: 0.4rem 0 0; font-family: var(--mono); font-size: 0.86rem; color: var(--gold-ink); }
.credits .voucher[hidden] { display: none; }