/* The main page as the game's own menus: a dungeon crawler's quest log, map, loot screen and party roster.
   Night indigo and dungeon stone are the fields, key gold is the one metal, and each of the six stages wears the
   colour of its door. Type is pixel only: Jacquard 24 for titles, Jersey 20 for everything read.
   Nothing is rounded, blurred or graded: frames are stepped box-shadows, shade is a second flat colour or a dither. */
:root {
  --night: #1b1733; --stone: #2e2a4a; --stone-hi: #48426f; --stone-lo: #221e3b; --pit: #0f0c22; --gold: #f2c230; --gold-hi: #ffe27a; --gold-lo: #b8861a;
  --text: #f1ecff; --dim: #bdb5e4; --d1: #a8322f; --d2: #d39a1e; --d3: #4f7a3a; --d4: #3f6f8f; --d5: #6a4a9a; --d6: #c2562a;
  --title: "Jacquard 24", "Jersey 20", monospace; --ui: "Jersey 20", ui-monospace, monospace;
  --frame: 0 -4px 0 0 var(--pit), 0 4px 0 0 var(--pit), -4px 0 0 0 var(--pit), 4px 0 0 0 var(--pit);
  --bevel: inset 0 4px 0 0 var(--stone-hi), inset 4px 0 0 0 var(--stone-hi), inset 0 -4px 0 0 var(--stone-lo), inset -4px 0 0 0 var(--stone-lo);
  --dither: repeating-conic-gradient(var(--pit) 0 25%, transparent 0 50%) 0 0 / 4px 4px;
  --flags: none; --coin: none; --key: none;
}
* { box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--night); color: var(--text); font: 400 22px/1.32 var(--ui); overflow-x: hidden; letter-spacing: .01em; }
a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--gold-hi); }
b { font-weight: 400; color: var(--gold); }
.hide { display: none !important; }
.mono, code { font-family: var(--ui); letter-spacing: .04em; }
canvas { image-rendering: pixelated; }

/* ---------- windows ---------- */
.win { background: var(--stone); box-shadow: var(--frame), var(--bevel), 12px 12px 0 0 rgba(15, 12, 34, .55); position: relative; }
.win-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--c, var(--gold)); color: var(--ct, var(--night)); font: 400 20px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; padding: 8px 14px 7px; box-shadow: inset 0 -4px 0 0 rgba(15, 12, 34, .32), inset 0 4px 0 0 rgba(255, 255, 255, .28); }
.win-bar b { color: inherit; }
.win-body { padding: 18px 22px 20px; }
.px-btn { display: inline-block; border: 0; padding: 0 0 6px; background: none; cursor: pointer; text-decoration: none; font: inherit; }
.px-btn span { display: block; background: var(--stone-hi); color: var(--text); font: 400 24px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; padding: 13px 20px 12px; box-shadow: var(--frame), inset 0 4px 0 0 #6a63a0, inset 0 -6px 0 0 #2a2648, 0 6px 0 0 var(--pit), 0 10px 0 0 var(--pit); }
.px-btn.gold span { background: var(--gold); color: var(--night); box-shadow: var(--frame), inset 0 4px 0 0 var(--gold-hi), inset 0 -6px 0 0 var(--gold-lo), 0 6px 0 0 #6b4d0c, 0 10px 0 0 var(--pit); }
.px-btn:hover span { background: #5b5490; } .px-btn.gold:hover span { background: #ffd24a; }
.px-btn:active span { transform: translateY(6px); box-shadow: var(--frame), inset 0 4px 0 0 #2a2648, inset 0 -2px 0 0 #6a63a0, 0 4px 0 0 var(--pit); }
.px-btn.gold:active span { box-shadow: var(--frame), inset 0 4px 0 0 var(--gold-lo), inset 0 -2px 0 0 var(--gold-hi), 0 4px 0 0 var(--pit); }
.px-btn.small span { font-size: 20px; padding: 10px 16px 9px; }
.px-btn[disabled] span { background: var(--stone-lo); color: var(--dim); }

/* ---------- the hero: the live vault, and the title window ---------- */
.hero { position: relative; min-height: max(100svh, 660px); display: grid; grid-template: "nav nav" auto "main tally" 1fr / minmax(0, 1fr) auto; align-items: end; gap: 24px; padding: 0 clamp(18px, 3.4vw, 56px) clamp(30px, 6vh, 60px); background: var(--pit); overflow: hidden; }
.hero-world { position: absolute; inset: 0; }
#game { position: absolute; inset: 0; display: block; pointer-events: none; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--dither), var(--night); background-size: 8px 8px, auto; z-index: 3; box-shadow: 0 -4px 0 0 var(--pit); }
.tabs-top { grid-area: nav; justify-self: end; position: relative; z-index: 2; display: flex; gap: 12px; align-self: start; padding-top: 14px; }
.tabs-top a { background: var(--stone); color: var(--text); font: 400 19px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 9px 12px 8px; box-shadow: var(--frame), var(--bevel); }
.tabs-top a:first-child { background: var(--gold); color: var(--night); box-shadow: var(--frame), inset 0 4px 0 0 var(--gold-hi), inset 0 -4px 0 0 var(--gold-lo); }
.tabs-top a:hover { background: var(--stone-hi); } .tabs-top a:first-child:hover { background: #ffd24a; }
.win-main { grid-area: main; width: min(640px, 100%); z-index: 2; margin-bottom: 14px; }
.win-main .win-body { padding: 20px 24px 22px; }
.title-row { display: flex; align-items: center; gap: 20px; }
.brand-mark { width: 168px; height: 168px; flex: none; image-rendering: auto; margin: -6px 0 -6px -8px; }
.logotype { margin: 0; font: 400 clamp(96px, 10vw, 150px)/.8 var(--ui); color: var(--gold); text-shadow: 4px 0 0 var(--pit), 0 4px 0 var(--pit), 4px 4px 0 var(--pit), 8px 8px 0 var(--d1); letter-spacing: .06em; }
.kick { margin: 14px 0 0; font: 400 24px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.say { margin: 18px 0 20px; font-size: 24px; line-height: 1.26; max-width: 27em; }
.go { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.win-foot { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 18px; padding-top: 14px; box-shadow: inset 0 4px 0 0 var(--stone-lo); }
.chip-x, .cachip { display: inline-flex; align-items: center; gap: 8px; background: var(--pit); color: var(--text); border: 0; cursor: pointer; text-decoration: none; font: 400 20px/1 var(--ui); letter-spacing: .06em; padding: 8px 11px 7px; box-shadow: var(--frame), inset 0 4px 0 0 #000; }
.cachip b { color: var(--gold); letter-spacing: .12em; }
.chip-x:hover, .cachip:hover { color: var(--gold); }
.win-tally { grid-area: tally; width: 318px; z-index: 2; margin-bottom: 14px; --c: var(--d4); --ct: #fff6dc; }
.win-tally .win-body { padding: 10px 16px 12px; }
.win-tally dl { margin: 0; }
.win-tally dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0 5px; box-shadow: inset 0 -2px 0 0 var(--stone-lo); }
.win-tally dt { color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-size: 19px; }
.win-tally dd { margin: 0; white-space: nowrap; }
.win-tally dd b { font-size: 26px; line-height: 1; }
.win-tally small { font-size: 18px; color: var(--dim); }
.tally-last { margin: 10px 0 0; font-size: 19px; line-height: 1.2; min-height: 1.2em; }
.tally-last i { font-style: normal; color: var(--gold); }

/* ---------- sections ---------- */
.folio { background: var(--flags) 0 0 / 128px 128px, var(--night); image-rendering: pixelated; }
.leaf { padding: 76px clamp(18px, 3.4vw, 56px) 70px; position: relative; }
.leaf > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.leaf:nth-child(even) { background: var(--stone); box-shadow: inset 0 8px 0 0 var(--pit), inset 0 12px 0 0 var(--stone-hi), inset 0 -8px 0 0 var(--pit), inset 0 -12px 0 0 var(--stone-lo); }
.leaf-head { margin-bottom: 42px; }
.sec-no { margin: 0 0 12px; display: inline-flex; align-items: center; gap: 12px; background: var(--pit); color: var(--gold); font: 400 20px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; padding: 7px 12px 6px 10px; box-shadow: var(--frame); }
.sec-no::before { content: ""; width: 32px; height: 18px; background: var(--key) center / contain no-repeat; image-rendering: pixelated; }
.leaf h2 { margin: 0; font: 400 clamp(54px, 6.4vw, 92px)/.92 var(--title); color: var(--text); text-shadow: 4px 4px 0 var(--pit); }
.lede { margin: 18px 0 0; font-size: 25px; line-height: 1.26; color: var(--dim); max-width: 32em; }
.lede b { color: var(--gold); }
.sub-h { margin: 56px auto 22px; font: 400 26px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 16px; }
.sub-h::after { content: ""; flex: 1; height: 8px; background: var(--dither); background-size: 8px 8px; }

/* the week: quest entries and the map */
.week-grid { display: grid; grid-template-columns: 368px minmax(0, 1fr); gap: 56px; align-items: start; }
.plan-col { position: sticky; top: 22px; }
.plan { margin: 0; background: var(--pit); box-shadow: var(--frame), 12px 12px 0 0 rgba(15, 12, 34, .55); }
.plan .win-bar { --ct: var(--night); }
.plan canvas { display: block; width: 360px; max-width: 100%; height: auto; margin: 4px; }
.plan figcaption { padding: 10px 14px 12px; display: grid; gap: 2px; background: var(--stone); box-shadow: var(--bevel); }
.plan figcaption b { font-size: 24px; line-height: 1.05; }
.plan figcaption span { color: var(--dim); font-size: 20px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; }
.step { display: grid; grid-template-columns: minmax(0, 1fr) 496px; grid-template-areas: "head head" "text plate" "roles roles"; align-items: start; background: var(--stone); box-shadow: var(--frame), var(--bevel), 12px 12px 0 0 rgba(15, 12, 34, .55); }
.step.flip { grid-template-columns: 496px minmax(0, 1fr); grid-template-areas: "head head" "plate text" "roles roles"; }
.step-text { display: contents; }
.step h3 { grid-area: head; margin: 0; padding: 12px 20px 11px 18px; background: var(--c); color: var(--ct); font: 400 40px/1 var(--title); display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 14px; align-items: center; box-shadow: inset 0 -4px 0 0 rgba(15, 12, 34, .32), inset 0 4px 0 0 rgba(255, 255, 255, .26); }
.step .lock { width: 48px; height: 48px; }
.step .num { font: 400 26px/1 var(--ui); background: var(--pit); color: var(--gold); padding: 6px 9px 5px; min-width: 34px; text-align: center; }
.step-text > p { grid-area: text; margin: 0; padding: 22px 26px 22px 26px; font-size: 23px; align-self: center; }
.roles { grid-area: roles; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; background: var(--night); box-shadow: inset 0 4px 0 0 var(--pit), inset 12px 0 0 0 var(--c); padding: 8px 14px 10px 26px; }
.roles > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 9px 12px 8px 0; box-shadow: inset 0 -2px 0 0 var(--stone); align-content: start; }
.roles dt { font-size: 19px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); padding-top: 2px; }
.roles dd { margin: 0; font-size: 21px; line-height: 1.22; }
.roles .lim dd b, .ledger b, .rule-list b { background: var(--pit); color: var(--gold); padding: 0 6px; }
.plate { grid-area: plate; margin: 0; background: var(--pit); padding: 8px; display: grid; align-content: start; }
.plate canvas { display: block; width: 480px; max-width: 100%; height: auto; aspect-ratio: 5 / 3; background: var(--pit); }
.plate figcaption { font-size: 20px; line-height: 1.2; padding: 9px 4px 4px; color: var(--dim); }
.plate figcaption b { background: var(--c); color: var(--ct); padding: 1px 7px 0; margin-right: 6px; text-transform: uppercase; letter-spacing: .1em; }

/* the purse: a loot screen */
.purse-grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 60px; align-items: start; }
.purse-now { --c: var(--gold); background: var(--night); }
.purse-now .win-body { padding: 16px 20px 16px; display: grid; }
#loot-chest { width: 256px; height: 160px; justify-self: center; background: var(--flags) 0 0 / 64px 64px, var(--stone-lo); box-shadow: var(--frame); margin: 6px 0 16px; width: 100%; height: auto; aspect-ratio: 64 / 40; }
.purse-lab { margin: 0; font-size: 20px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.purse-sum { margin: 2px 0 2px; display: flex; align-items: baseline; gap: 12px; }
.purse-sum b { font: 400 92px/.9 var(--title); color: var(--gold); text-shadow: 4px 4px 0 var(--pit); }
.purse-sum span { font-size: 30px; letter-spacing: .1em; color: var(--gold); }
.purse-addr { margin: 8px 0 14px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.purse-addr .mono { font-size: 17px; word-break: break-all; color: var(--dim); flex: 1 1 100%; line-height: 1.1; }
.tiny { font: 400 19px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--night); background: var(--gold); border: 0; padding: 5px 9px 4px; cursor: pointer; text-decoration: none; box-shadow: var(--frame); margin: 4px; }
.tiny:hover { background: var(--gold-hi); color: var(--night); }
.purse-facts { width: 100%; border-collapse: collapse; }
.purse-facts tr { box-shadow: inset 0 2px 0 0 var(--stone); }
.purse-facts th { text-align: left; font-weight: 400; font-size: 20px; line-height: 1.15; padding: 8px 8px 7px 26px; color: var(--dim); background: var(--coin) 0 50% / 16px 16px no-repeat; image-rendering: pixelated; }
.purse-facts td { text-align: right; padding: 8px 0 7px; white-space: nowrap; font-size: 22px; color: var(--gold); }
.ledger { width: 100%; border-collapse: separate; border-spacing: 0 8px; margin-top: -8px; }
.ledger th { width: 230px; text-align: left; vertical-align: top; font-weight: 400; font-size: 20px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--night); background: var(--gold); padding: 12px 14px 10px; box-shadow: inset 0 -4px 0 0 var(--gold-lo), inset 0 4px 0 0 var(--gold-hi); }
.ledger td { padding: 10px 16px 10px; font-size: 22px; line-height: 1.26; background: var(--night); box-shadow: inset 0 4px 0 0 var(--pit), inset 0 -4px 0 0 #2a2552; }

/* the rules, the doors, the kinds */
.rules-grid { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 60px; align-items: center; }
.rule-list { margin: 0; padding: 0; list-style: none; counter-reset: r; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 14px 30px; }
.rule-list li { counter-increment: r; position: relative; padding: 12px 14px 11px 66px; font-size: 22px; line-height: 1.22; background: var(--stone); box-shadow: var(--frame), var(--bevel); min-height: 62px; }
.rule-list li::before { content: counter(r); position: absolute; left: 4px; top: 4px; bottom: 4px; width: 48px; display: grid; place-items: center; font: 400 40px/1 var(--title); color: var(--night); background: var(--gold); }
.rule-list li:nth-child(1)::before { background: var(--d1); color: #fff6dc; } .rule-list li:nth-child(2)::before { background: var(--d2); } .rule-list li:nth-child(3)::before { background: var(--d3); color: #fff6dc; }
.rule-list li:nth-child(4)::before { background: var(--d4); color: #fff6dc; } .rule-list li:nth-child(5)::before { background: var(--d5); color: #fff6dc; } .rule-list li:nth-child(6)::before { background: var(--d6); color: #fff6dc; }
.wheel { margin: 0; text-align: center; cursor: pointer; }
.wheel canvas { width: 208px; height: 208px; display: block; margin: 0 auto; }
.wheel figcaption { font-size: 19px; color: var(--dim); margin-top: 8px; text-transform: uppercase; letter-spacing: .1em; }
.doors { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.doors li { background: var(--stone); box-shadow: var(--frame), 8px 8px 0 0 rgba(15, 12, 34, .55); display: grid; grid-template-rows: auto 1fr; }
.doors canvas { display: block; width: 100%; height: 156px; object-fit: contain; object-position: 50% 100%; background: var(--c); padding-top: 10px; box-shadow: inset 0 -8px 0 0 rgba(15, 12, 34, .4), inset 0 4px 0 0 rgba(255, 255, 255, .22); }
.doors .d1 { --c: var(--d1); } .doors .d2 { --c: var(--d2); } .doors .d3 { --c: var(--d3); } .doors .d4 { --c: var(--d4); } .doors .d5 { --c: var(--d5); } .doors .d6 { --c: var(--d6); }
.doors div { padding: 10px 12px 12px; display: grid; gap: 2px; align-content: start; box-shadow: var(--bevel); }
.doors b { font: 400 30px/1 var(--title); color: var(--text); } .doors .open b { color: var(--gold); }
.doors span { font-size: 20px; line-height: 1.12; }
.doors small { font-size: 18px; color: var(--dim); line-height: 1.1; }
.kinds { margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 22px; }
.kinds div { padding: 12px 16px 13px; background: var(--stone); box-shadow: var(--frame), var(--bevel), inset 0 12px 0 0 var(--c); padding-top: 22px; }
.kinds div:nth-child(1) { --c: var(--d1); } .kinds div:nth-child(2) { --c: var(--d2); } .kinds div:nth-child(3) { --c: var(--d3); } .kinds div:nth-child(4) { --c: var(--d4); } .kinds div:nth-child(5) { --c: var(--d5); } .kinds div:nth-child(6) { --c: var(--d6); }
.kinds dt { font: 400 30px/1 var(--title); color: var(--gold); }
.kinds dd { margin: 5px 0 0; font-size: 21px; line-height: 1.22; }

/* send your agent */
.send-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 60px; align-items: start; }
.dialog { --c: var(--d3); --ct: #fff6dc; background: var(--pit); }
.msg { margin: 0; white-space: pre-wrap; word-break: break-word; font: 400 23px/1.24 var(--ui); letter-spacing: .03em; color: var(--text); padding: 16px 20px 18px; background: var(--pit); }
.msg::after { content: ""; display: inline-block; width: 12px; height: 20px; background: var(--gold); margin-left: 6px; vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.letter-go { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 26px; }
.calls { margin: 0; padding: 0; list-style: none; counter-reset: c; display: grid; gap: 8px; }
.calls li { counter-increment: c; display: grid; grid-template-columns: 40px 250px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--night); padding: 4px 14px 4px 4px; box-shadow: inset 0 4px 0 0 var(--pit), inset 0 -4px 0 0 #2a2552; }
.calls li::before { content: counter(c); display: grid; place-items: center; height: 38px; font: 400 28px/1 var(--title); color: var(--night); background: var(--gold); }
.calls code { font-size: 21px; color: var(--gold); }
.calls span { font-size: 21px; line-height: 1.15; }
.fine { font-size: 21px; line-height: 1.24; color: var(--dim); margin: 16px 0 0; }
.slip { --c: var(--d5); --ct: #fff6dc; }
.slip h3 { margin: 0; font: 400 38px/1 var(--title); color: var(--text); }
.slip .fine { margin: 6px 0 16px; } .slip .fine b { color: var(--gold); }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field span { font-size: 19px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.field input { font: 400 22px/1.1 var(--ui); letter-spacing: .03em; color: var(--text); background: var(--pit); border: 0; padding: 12px 12px 10px; width: 100%; outline: none; box-shadow: var(--frame), inset 0 4px 0 0 #000; margin: 4px 0; }
.field input:focus { box-shadow: 0 -4px 0 0 var(--gold), 0 4px 0 0 var(--gold), -4px 0 0 0 var(--gold), 4px 0 0 0 var(--gold), inset 0 4px 0 0 #000; }
.field input::placeholder { color: #8d85b8; }
.f-err { color: #ff9d8a; margin: 0 0 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 10px; }
.slip .msg { font-size: 19px; margin: 8px 0 14px; box-shadow: var(--frame); }

/* the board: the party roster */
.register { display: grid; gap: 10px; }
.reg-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0; align-items: stretch; background: var(--stone); box-shadow: var(--frame), var(--bevel); min-height: 72px; }
.reg-row.d1 { --c: var(--d1); } .reg-row.d2 { --c: var(--d2); --ct: var(--night); } .reg-row.d3 { --c: var(--d3); } .reg-row.d4 { --c: var(--d4); } .reg-row.d5 { --c: var(--d5); } .reg-row.d6 { --c: var(--d6); } .reg-row.key { --c: var(--gold); --ct: var(--night); }
.reg-row.none { min-height: 0; background: var(--stone-lo); }
.reg-door { display: grid; align-content: center; gap: 1px; background: var(--c); color: var(--ct, #fff6dc); padding: 8px 14px 7px; box-shadow: inset 0 -4px 0 0 rgba(15, 12, 34, .32), inset 0 4px 0 0 rgba(255, 255, 255, .24); }
.reg-door b { font: 400 32px/1 var(--title); color: inherit; }
.reg-door span { font-size: 19px; line-height: 1; text-transform: uppercase; letter-spacing: .08em; }
.reg-row.none .reg-door b { font-size: 26px; }
.reg-who { list-style: none; margin: 0; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; }
.reg-row.none .reg-who { padding: 0; }
.reg-who li { display: flex; gap: 12px; align-items: flex-start; min-width: 230px; }
.reg-who .face { flex: none; width: 48px; height: 48px; background: var(--pit); box-shadow: var(--frame); display: grid; place-items: center; margin: 4px; }
.reg-who .face canvas { display: block; }
.reg-who .nm { display: grid; grid-template-columns: auto auto 1fr; column-gap: 8px; align-items: center; line-height: 1.1; }
.reg-who .nm b { font-size: 25px; color: var(--text); }
.reg-who small, .reg-who q { grid-column: 1 / -1; font-size: 19px; color: var(--dim); }
.reg-who q { color: var(--gold); quotes: "\201C" "\201D"; }
.house { font: 400 16px/1 var(--ui); font-style: normal; letter-spacing: .1em; color: var(--night); background: var(--dim); padding: 3px 5px 2px; }
.dot { width: 10px; height: 10px; background: #5a5488; display: inline-block; box-shadow: 0 0 0 2px var(--pit); }
.dot.on { background: #7fd15a; }
.board-go { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin: 44px auto 0; }

/* the bottom of the dungeon */
.colophon { background: var(--pit); color: var(--dim); padding: 30px clamp(18px, 3.4vw, 56px) 30px; display: grid; gap: 8px; box-shadow: inset 0 8px 0 0 var(--gold); }
.colophon p { margin: 0; }
.col-name { font-size: 26px; color: var(--text); } .col-name b { font: 400 38px/1 var(--title); margin-right: 4px; }
.col-links { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 21px; text-transform: uppercase; letter-spacing: .1em; }
.col-treasury { font-size: 18px; color: #8d85b8; word-break: break-all; }

/* ---------- narrower ---------- */
@media (max-width: 1280px) {
  .week-grid { grid-template-columns: 308px minmax(0, 1fr); gap: 40px; }
  .plan canvas { width: 300px; }
  .step, .step.flip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "plate" "text" "roles"; }
  .plate { justify-items: start; }
  .purse-grid { grid-template-columns: 360px minmax(0, 1fr); gap: 44px; }
  .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body { font-size: 20px; }
  .hero { grid-template: "nav" auto "tally" 1fr "main" auto / minmax(0, 1fr); gap: 16px; padding-bottom: 36px; }
  .tabs-top { justify-self: stretch; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 14px 18px 8px; gap: 12px; }
  .tabs-top a { white-space: nowrap; font-size: 17px; padding: 8px 9px 7px; }
  .win { box-shadow: var(--frame), var(--bevel), 6px 6px 0 0 rgba(15, 12, 34, .55); }
  .win-tally { align-self: end; width: 100%; margin-bottom: 0; }
  .win-tally .win-bar { display: none; }
  .win-tally .win-body { padding: 8px 14px 8px; }
  .win-tally dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .win-tally dl div { padding: 3px 0 2px; }
  .win-tally dt { font-size: 16px; } .win-tally dd b { font-size: 20px; } .win-tally small { font-size: 16px; }
  .tally-last { font-size: 17px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .win-main { margin-bottom: 0; } .win-main .win-body { padding: 14px 16px 16px; }
  .win-bar { font-size: 17px; padding: 6px 12px 5px; }
  .title-row { gap: 12px; } .brand-mark { width: 104px; height: 104px; margin-left: -4px; }
  .logotype { font-size: 92px; text-shadow: 4px 4px 0 var(--pit), 6px 6px 0 var(--d1); } .kick { font-size: 17px; margin-top: 10px; letter-spacing: .14em; }
  .say { font-size: 20px; margin: 12px 0 16px; }
  .px-btn span { font-size: 21px; padding: 11px 15px 10px; }
  .win-foot { margin-top: 14px; padding-top: 12px; } .chip-x, .cachip { font-size: 18px; }
  .leaf { padding: 54px 18px 50px; } .leaf-head { margin-bottom: 30px; }
  .leaf h2 { font-size: 52px; } .lede { font-size: 21px; }
  .week-grid, .purse-grid, .rules-grid, .send-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .plan-col { position: static; max-width: 368px; } .plan canvas { width: calc(100% - 8px); }
  .steps { gap: 34px; }
  .step h3 { font-size: 30px; gap: 9px; padding: 10px 12px 9px 12px; } .step .lock { width: 32px; height: 32px; } .step .num { font-size: 22px; min-width: 28px; padding: 5px 7px 4px; }
  .step-text > p { padding: 14px 16px; font-size: 20px; }
  .roles { grid-template-columns: 1fr; padding: 6px 12px 8px 22px; } .roles > div { grid-template-columns: 92px minmax(0, 1fr); padding-right: 0; } .roles dt { font-size: 17px; letter-spacing: .06em; } .roles dd { font-size: 20px; }
  .plate canvas { width: 100%; image-rendering: auto; } .plate figcaption { font-size: 18px; }
  .purse-sum b { font-size: 76px; }
  .ledger th { width: auto; display: block; } .ledger td { display: block; font-size: 20px; } .ledger { border-spacing: 0; margin: 0; } .ledger tr { display: block; margin-bottom: 10px; }
  .rule-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } .rule-list li { font-size: 20px; }
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .kinds { grid-template-columns: minmax(0, 1fr); }
  .msg { font-size: 20px; }
  .calls li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 0; padding-bottom: 8px; } .calls span { grid-column: 2; } .calls code, .calls span { font-size: 19px; }
  .reg-row { grid-template-columns: minmax(0, 1fr); } .reg-row.none { grid-template-columns: minmax(0, 1fr); } .reg-who li { min-width: 0; }
  .sub-h { font-size: 22px; margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) { .msg::after { animation: none; } }