/* Rob Town early access. The game's tokens (site/ui.css): ink, gold, parchment, wood, bevel buttons.
   Titan One (one weight: never bold) for buttons and numbers, Jersey 25 for body, Press Start 2P for stamps and tabs. */
:root {
  --ink: #1b1410; --ink-2: #2a201a;
  --gold: #f3c440; --gold-hi: #ffd866; --gold-lo: #b8861d;
  --red: #e5443a; --red-hi: #ff7a6e; --red-lo: #9a2a22;
  --green: #6bd46b; --green-hi: #9df09d; --green-lo: #3f9a3f;
  --parch: #f1e3bf; --parch-hi: #fff6dc; --parch-lo: #e2cf9f; --parch-2: #e9d6a8;
  --wood: #6b3f22; --wood-hi: #8b5a2b; --wood-lo: #4a2a14;
  --sky: #1a0f3a;
  --font-ui: 'Jersey 25', 'Trebuchet MS', sans-serif;
  --font-btn: 'Titan One', 'Jersey 25', sans-serif;
  --font-stamp: 'Press Start 2P', monospace;
  --drop: 0 3px 0 var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; background: var(--sky); color: var(--ink);
  font-family: var(--font-ui); font-size: 20px; line-height: 1.2;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, b, strong { font-weight: 400; font-synthesis: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.muted { opacity: .7; }
.backdrop {
  position: fixed; inset: -24px; z-index: -1;
  background: url('assets/street_day.jpg') center 38% / cover no-repeat, var(--sky);
  filter: blur(5px) saturate(1.1) brightness(.62);
}

/* ------------------------------------------------------------------ the bar */
.bar {
  position: sticky; top: 12px; z-index: 10; margin: 12px auto 0; width: min(1240px, calc(100% - 24px));
  display: flex; align-items: center; gap: 14px; padding: 8px 10px;
  background: var(--parch-hi); border: 4px solid var(--ink); border-radius: 14px; box-shadow: 0 6px 0 var(--ink), 0 14px 30px rgba(0, 0, 0, .35);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { image-rendering: pixelated; border-radius: 50%; border: 3px solid var(--ink); }
.brand-t { font-family: var(--font-btn); font-size: 28px; color: var(--gold); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: var(--drop); letter-spacing: 1px; }
.tabs { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; margin-bottom: -4px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  flex: none; text-decoration: none; font-family: var(--font-stamp); font-size: 11px; letter-spacing: 1px; line-height: 1;
  padding: 11px 12px 10px; background: var(--parch); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 0 3px 0 var(--ink);
}
.tabs a:hover { background: var(--parch-hi); transform: translateY(-1px); }
.tabs a .short { display: none; }
.tabs a.on { background: var(--gold); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px var(--gold-hi); }
.xlink { flex: none; display: flex; align-items: center; gap: 8px; text-decoration: none; background: var(--ink); color: var(--parch-hi); border-radius: 8px; padding: 10px 14px; font-family: var(--font-stamp); font-size: 11px; }
.xlink .x { font-family: system-ui, sans-serif; font-size: 16px; }

/* ------------------------------------------------------------------ pages */
.view { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 40px; }
.hero { text-align: center; margin: 12px 0 36px; }
.title {
  margin: 0; font-family: var(--font-btn); font-size: clamp(52px, 9vw, 104px); line-height: .95; color: #fff; letter-spacing: 2px;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink), 0 14px 26px rgba(0, 0, 0, .45);
}
.title.gold { color: var(--gold); }
.lead { margin: 18px 0 0; font-size: clamp(22px, 3vw, 28px); color: #fff; text-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(0, 0, 0, .6); }
.ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.chip { background: rgba(27, 20, 16, .78); color: var(--parch-hi); border: 2px solid rgba(241, 227, 191, .25); border-radius: 999px; padding: 6px 14px 7px; font-size: 18px; }
.chip b { font-family: var(--font-btn); color: var(--gold); margin-right: 6px; }

/* ------------------------------------------------------------------ bevel buttons (site/ui.css .btn) */
.btn {
  --face: var(--gold); --hi: var(--gold-hi); --lo: var(--gold-lo); --lift: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 9px 22px 13px; border: 3px solid var(--ink); border-radius: 14px; background: var(--face);
  color: #fff; font-family: var(--font-btn); font-size: 20px; line-height: 1; text-transform: uppercase; letter-spacing: 1px; text-decoration: none;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink);
  box-shadow: inset 0 4px 0 var(--hi), inset 0 -6px 0 var(--lo), 0 5px 0 var(--ink), 0 10px 16px rgba(0, 0, 0, .3);
  transform: translateY(var(--lift)); transition: transform 90ms ease-out, box-shadow 90ms ease-out, filter 90ms; cursor: pointer; user-select: none; white-space: nowrap;
}
.btn:hover { --lift: -2px; filter: brightness(1.06); box-shadow: inset 0 4px 0 var(--hi), inset 0 -6px 0 var(--lo), 0 7px 0 var(--ink), 0 14px 20px rgba(0, 0, 0, .3); }
.btn:active { --lift: 3px; box-shadow: inset 0 3px 0 var(--hi), inset 0 -3px 0 var(--lo), 0 2px 0 var(--ink); }
.btn:disabled, .btn.off { filter: grayscale(.85) brightness(.9); opacity: .6; cursor: default; --lift: 0px; pointer-events: none; }
.btn.green { --face: var(--green); --hi: var(--green-hi); --lo: var(--green-lo); }
.btn.red { --face: var(--red); --hi: var(--red-hi); --lo: var(--red-lo); }
.btn.dark { --face: #2a2430; --hi: #4a4252; --lo: #120e16; }
.btn.parch { --face: var(--parch); --hi: var(--parch-hi); --lo: var(--parch-lo); color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; }
.btn.big { min-height: 66px; font-size: 26px; padding: 12px 34px 16px; border-radius: 18px; }
.btn.small { min-height: 42px; font-size: 16px; padding: 7px 14px 10px; border-radius: 11px; border-width: 2px; box-shadow: inset 0 3px 0 var(--hi), inset 0 -4px 0 var(--lo), 0 4px 0 var(--ink); }
.btn.done { --face: var(--green); --hi: var(--green-hi); --lo: var(--green-lo); }
.btn .sub { font-family: var(--font-ui); font-size: 15px; -webkit-text-stroke: 0; text-shadow: none; text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------------ the window: a wooden frame, a tab, a tag */
.win { position: relative; margin: 34px auto 0; max-width: 820px; }
.win-tab { position: absolute; left: 22px; top: -30px; background: var(--parch-hi); border: 4px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 9px 22px 8px; font-family: var(--font-stamp); font-size: 15px; letter-spacing: 4px; z-index: 2; }
.win-tag { position: absolute; right: 18px; top: -18px; background: var(--ink); color: var(--parch-hi); border: 3px solid var(--parch-hi); outline: 3px solid var(--ink); padding: 7px 12px; font-family: var(--font-stamp); font-size: 10px; letter-spacing: 2px; z-index: 2; animation: tag 1.6s steps(2) infinite; }
@keyframes tag { 50% { color: var(--gold); } }
.win-body { background: var(--wood-hi); border: 4px solid var(--ink); border-radius: 14px; padding: 22px 18px 18px; box-shadow: inset 0 0 0 4px var(--wood), 0 8px 0 var(--ink), 0 18px 40px rgba(0, 0, 0, .45); display: grid; gap: 14px; }

/* a row: number, title + sub, action */
.row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; background: var(--parch-hi); border: 3px solid var(--ink); border-radius: 8px; padding: 12px 14px; }
.row .n { width: 40px; height: 40px; display: grid; place-items: center; font-family: var(--font-btn); font-size: 22px; background: var(--gold); border: 3px solid var(--ink); border-radius: 6px; }
.row .t { font-family: var(--font-btn); font-size: 22px; letter-spacing: .5px; }
.row .s { font-size: 17px; opacity: .72; margin-top: 2px; }
.row .act { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.row.locked { opacity: .5; filter: grayscale(.5); }
.row.locked .act { visibility: hidden; }
.row.now { box-shadow: 0 0 0 4px var(--gold), 0 0 22px rgba(243, 196, 64, .55); }
.row.done .n { background: var(--green); color: transparent; position: relative; }
.row.done .n::after { content: ''; position: absolute; width: 18px; height: 10px; border-left: 5px solid var(--ink); border-bottom: 5px solid var(--ink); transform: translateY(-3px) rotate(-45deg); }
.row .wide { grid-column: 2 / 4; }
.who { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.who img { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--ink); background: var(--parch-lo); object-fit: cover; }
.linkish { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font-size: 16px; opacity: .7; }

/* fields */
.field { display: grid; gap: 8px; background: var(--parch); border: 3px solid var(--ink); border-radius: 8px; padding: 12px 14px 14px; }
.field label, .field .lbl { font-family: var(--font-btn); font-size: 19px; }
.field .hint { font-size: 16px; opacity: .7; margin-top: -4px; }
.inp { display: flex; gap: 8px; align-items: stretch; }
.inp input, .field input, .field textarea {
  width: 100%; min-width: 0; font: inherit; font-size: 19px; color: var(--ink); background: var(--parch-hi); border: 3px solid var(--ink); border-radius: 6px; padding: 10px 12px; outline: none;
}
.field textarea { min-height: 76px; resize: vertical; }
.inp input:focus, .field input:focus, .field textarea:focus { box-shadow: 0 0 0 3px var(--gold); }
.ok {
  flex: none; width: 52px; display: grid; place-items: center; background: var(--parch-lo); border: 3px solid var(--ink); border-radius: 8px; cursor: pointer;
}
.ok svg { width: 24px; height: 24px; }
.ok.lit { background: var(--green); box-shadow: 0 0 0 3px var(--gold); }
.ok:disabled { cursor: default; opacity: .55; }
.err { color: var(--red-lo); font-size: 17px; min-height: 1em; }
.toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.toggle { font-family: var(--font-stamp); font-size: 11px; letter-spacing: 1px; background: var(--parch-hi); border: 3px solid var(--ink); border-radius: 6px; padding: 10px 12px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.toggle i { width: 14px; height: 14px; border: 2px solid var(--ink); background: #fff; display: inline-block; }
.toggle.on { background: var(--gold); }
.toggle.on i { background: var(--ink); box-shadow: inset 0 0 0 2px #fff; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* the poster step */
.poster { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
.poster canvas { width: 200px; height: 250px; border: 3px solid var(--ink); border-radius: 6px; background: var(--parch-lo); display: block; }
.poster .side { display: grid; gap: 10px; align-content: start; }
.hoods { display: flex; gap: 6px; flex-wrap: wrap; }
.hoods button { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--ink); cursor: pointer; padding: 0; }
.hoods button.on { box-shadow: 0 0 0 3px var(--gold); transform: scale(1.12); }
.say { font-size: 17px; background: var(--parch); border: 2px dashed var(--wood); border-radius: 6px; padding: 8px 10px; }

/* status pills */
.pill { display: inline-block; font-family: var(--font-stamp); font-size: 10px; letter-spacing: 1px; padding: 6px 8px; border: 2px solid var(--ink); border-radius: 4px; background: var(--parch-lo); }
.pill.pending { background: var(--gold); } .pill.approved { background: var(--green); } .pill.rejected { background: var(--red); color: #fff; } .pill.talks { background: #5ad1ff; }

/* the prize box and the done panel */
.prize { margin: 30px auto 0; max-width: 820px; background: rgba(27, 20, 16, .82); color: var(--parch-hi); border: 3px solid var(--gold); border-radius: 12px; padding: 18px 20px; display: grid; gap: 10px; }
.prize h3 { margin: 0; font-family: var(--font-btn); font-size: 26px; color: var(--gold); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.prize ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.prize .fine { font-size: 15px; opacity: .7; }
.done-panel { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.done-panel canvas { width: 300px; height: 375px; border: 3px solid var(--ink); border-radius: 6px; display: block; }
.big-stamp { font-family: var(--font-btn); font-size: 40px; color: var(--green); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: var(--drop); transform: rotate(-3deg); display: inline-block; }
.stat { display: flex; gap: 14px; flex-wrap: wrap; }
.stat div { background: var(--parch); border: 3px solid var(--ink); border-radius: 8px; padding: 8px 12px; min-width: 110px; }
.stat b { display: block; font-family: var(--font-btn); font-size: 30px; }
.stat span { font-size: 16px; opacity: .75; }
.board { display: grid; gap: 6px; }
.board .li { display: grid; grid-template-columns: 34px 36px 1fr auto; gap: 10px; align-items: center; background: var(--parch); border: 2px solid var(--ink); border-radius: 6px; padding: 6px 10px; font-size: 18px; }
.board .li img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; background: var(--parch-lo); }
.board .li .r { font-family: var(--font-btn); }

/* home: the four verbs */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.card { background: var(--parch-hi); border: 4px solid var(--ink); border-radius: 12px; padding: 16px; box-shadow: 0 6px 0 var(--ink); }
.card h3 { margin: 0 0 6px; font-family: var(--font-btn); font-size: 26px; color: var(--gold); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.card p { margin: 0; font-size: 19px; }
.countdown { font-family: var(--font-stamp); font-size: 13px; color: var(--gold); margin-top: 18px; text-shadow: 0 2px 0 var(--ink); letter-spacing: 1px; }
.soon { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 18px; background: var(--parch-hi); border: 3px solid var(--ink); border-radius: 8px; }

/* footer, toast */
.foot { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 40px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--parch-hi); font-size: 17px; text-shadow: 0 2px 0 var(--ink); }
.foot a { color: var(--gold); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; background: var(--ink); color: var(--parch-hi); border: 3px solid var(--gold); border-radius: 10px; padding: 10px 18px; font-size: 19px; transition: transform .25s ease-out, visibility 0s linear .25s; z-index: 50; max-width: calc(100% - 32px); }
.toast.on { transform: translate(-50%, 0); visibility: visible; transition: transform .25s ease-out; }

/* ------------------------------------------------------------------ phone */
@media (max-width: 760px) {
  body { font-size: 18px; }
  .bar { position: relative; top: 0; margin-top: 8px; width: calc(100% - 16px); flex-wrap: wrap; gap: 8px; padding: 8px; }
  .brand-t { font-size: 22px; }
  .brand img { width: 32px; height: 32px; }
  .xlink { margin-left: auto; padding: 9px 10px; }
  .xlink .h { display: none; }
  .tabs { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; overflow: visible; }
  .tabs a { font-size: 9px; padding: 10px 2px 9px; text-align: center; letter-spacing: 0; }
  .tabs a .long { display: none; }
  .tabs a .short { display: inline; }
  .view { width: calc(100% - 24px); padding-top: 34px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .row { grid-template-columns: 40px 1fr; padding: 12px; }
  .row .n { width: 36px; height: 36px; font-size: 19px; }
  .row .t { font-size: 20px; }
  .row .act { grid-column: 1 / 3; justify-content: stretch; }
  .row .act .btn { flex: 1; }
  .row .wide { grid-column: 1 / 3; }
  .poster { grid-template-columns: 1fr; justify-items: center; }
  .poster .side { width: 100%; }
  .done-panel { grid-template-columns: 1fr; justify-items: center; }
  .done-panel canvas { width: min(300px, 100%); height: auto; aspect-ratio: 1080 / 1350; }
  .two { grid-template-columns: 1fr; }
  .win-body { padding: 18px 10px 12px; }
  .win-tag { font-size: 7px; letter-spacing: 1px; padding: 6px 8px; right: 8px; top: -16px; }
  .stat div { flex: 1; min-width: 0; padding: 8px 10px; }
  .win-tab { font-size: 12px; letter-spacing: 2px; left: 10px; padding: 9px 12px 8px; }
  .btn.big { font-size: 22px; padding: 12px 22px 16px; }
}
@media (max-width: 400px) { .cards { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ review round 1 (mac-ad): quest-list rows, tickets, sprites */
.spr { display: inline-block; background-image: url('assets/sprites_day.png'); background-repeat: no-repeat; image-rendering: pixelated; flex: none; vertical-align: middle; }
/* a done or locked step is one line; the open step is the only card */
.row.mini { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 8px 14px; }
.row.mini .n { width: 32px; height: 32px; font-size: 17px; border-width: 2px; }
.row.mini .t { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.row.mini .res { display: flex; align-items: center; gap: 10px; justify-content: flex-end; font-size: 17px; min-width: 0; }
.row.mini .res img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; }
.row.mini .res a { color: var(--wood); }
.row.done.mini .n::after { width: 13px; height: 7px; border-width: 0 0 4px 4px; }
.row.locked { opacity: .62; filter: none; background: var(--parch-2); }
.row.locked .n { background: var(--parch-lo); }
.row.now.nudge { animation: nudge .5s ease-out 2; }
@keyframes nudge { 30% { transform: translateX(-6px); } 60% { transform: translateX(6px); } }
.btn.full { width: 100%; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hoods { display: grid; grid-template-columns: repeat(8, 30px); gap: 6px; }
/* the ticket strip (home) and the chip (other tabs) */
.tickets { display: flex; gap: 10px; flex-wrap: wrap; }
.tk { display: inline-flex; align-items: center; gap: 8px; background: var(--parch); color: var(--ink); border: 3px solid var(--ink); border-radius: 8px; padding: 6px 12px 6px 8px; font-family: var(--font-btn); font-size: 17px; letter-spacing: .5px; }
.tk b { font-size: 20px; color: var(--green-lo); }
.tk i { font-family: var(--font-ui); font-style: normal; font-size: 15px; opacity: .7; }
.tchip-wrap { max-width: 820px; margin: 22px auto 0; text-align: center; }
.tchip { display: inline-flex; align-items: center; gap: 8px; background: rgba(27, 20, 16, .85); color: var(--parch-hi); border: 2px solid var(--gold); border-radius: 999px; padding: 7px 16px 8px 10px; font-family: var(--font-btn); font-size: 15px; letter-spacing: .5px; cursor: pointer; }
.tchip b { color: var(--gold); font-size: 18px; }
.tchip u { font-family: var(--font-ui); font-size: 16px; color: var(--gold); margin-left: 4px; }
#tchip-more .prize { margin-top: 12px; text-align: left; }
.card .art { height: 76px; display: flex; align-items: flex-end; margin-bottom: 8px; }
.card { display: flex; flex-direction: column; align-items: flex-start; }
/* alliances: the offers in two even columns */
.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.toggle { font-family: var(--font-btn); font-size: 16px; letter-spacing: .5px; justify-content: flex-start; padding: 9px 12px 10px; }
@media (max-width: 760px) {
  .row.mini { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 8px 10px; gap: 8px; }
  .row.mini .res { font-size: 15px; gap: 6px; }
  .row.mini .res img { display: none; }
  .row.mini .res span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row.mini .t { font-size: 17px; }
  .hoods { grid-template-columns: repeat(8, 1fr); width: 100%; }
  .hoods button { width: 100%; height: auto; aspect-ratio: 1; }
  .pair { grid-template-columns: 1fr; }
  .tk { font-size: 15px; }
  .tchip { font-size: 13px; padding: 6px 12px 7px 8px; }
}

/* ------------------------------------------------------------------ home: the live street (owner-approved hero) */
.stage { position: relative; width: 100vw; margin: -48px 0 0 calc(50% - 50vw); height: clamp(560px, 72vh, 680px); overflow: hidden; background: #140c2e; }
.world { position: absolute; left: 0; top: 0; will-change: transform; }
.world img, .world canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; user-select: none; pointer-events: none; }
.stage::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 44% 58% at 62% 45%, rgba(12, 7, 30, .62), rgba(12, 7, 30, 0) 72%), linear-gradient(to bottom, rgba(26, 15, 58, 0) 78%, var(--sky) 100%); }
.stage-in { position: relative; z-index: 2; height: 100%; width: min(1100px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: center; }
.hero-card { position: relative; justify-self: end; }
.hero-card canvas { display: block; width: 360px; height: 450px; transform: rotate(-3deg); filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .55)); }
.could { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%) rotate(-3deg); background: var(--gold); color: var(--ink); border: 3px solid var(--ink); border-radius: 6px; padding: 6px 10px; font-family: var(--font-stamp); font-size: 11px; letter-spacing: 1px; white-space: nowrap; box-shadow: 0 4px 0 var(--ink); }
.hero-copy { display: grid; justify-items: start; gap: 14px; }
.hero-copy .title { font-size: clamp(56px, 7vw, 96px); }
.hero-copy .lead { margin: 0; }
.hero-copy .chips { justify-content: flex-start; margin-top: 0; }
.hero-copy .countdown { margin-top: 0; }
.textlink { color: var(--parch-hi); font-size: 19px; text-shadow: 0 2px 0 var(--ink); text-underline-offset: 3px; }
.textlink:hover { color: var(--gold); }
@media (max-width: 760px) {
  .stage { margin-top: -34px; height: auto; padding: 22px 0 26px; }
  .world { height: 100% !important; }
  .stage-in { grid-template-columns: 1fr; gap: 14px; justify-items: center; text-align: center; width: calc(100% - 24px); }
  .hero-card { justify-self: center; }
  .hero-card canvas { width: min(70vw, 300px); height: auto; aspect-ratio: 1080 / 1350; }
  .hero-copy { justify-items: center; gap: 10px; }
  .hero-copy .title { display: none; }
  .hero-copy .chips { justify-content: center; }
  .could { font-size: 9px; }
  .stage::before { background: linear-gradient(to bottom, rgba(12, 7, 30, .15), rgba(12, 7, 30, .55) 55%, rgba(26, 15, 58, 1) 100%); }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .stage-in { grid-template-columns: 300px 1fr; gap: 28px; }
  .hero-card canvas { width: 290px; height: 362px; }
}
@media (max-width: 760px) { .hero-copy { margin-top: 12px; } }

/* step 1: your X handle (no X login). "@" is a fixed prefix; the picture appears inside the field once the handle parses; the
   glove waits under the field until then; under 420 px the field and THAT'S ME stack full width */
.claim { display: grid; gap: 6px; min-width: 0; position: relative; padding-bottom: 22px; } /* the room the glove's lower half hangs into */
.claim .err:empty, #h-more:empty { display: none; }
.hrow { display: flex; gap: 10px; align-items: stretch; }
.at { flex: 1; min-width: 0; display: flex; align-items: center; background: var(--parch-hi); border: 3px solid var(--ink); border-radius: 6px; padding: 0 8px 0 12px; }
.at:focus-within { box-shadow: 0 0 0 3px var(--gold); }
.at > span { font-family: var(--font-btn); font-size: 22px; opacity: .55; margin-right: 2px; }
.at input { flex: 1; min-width: 0; font: inherit; font-size: 21px; color: var(--ink); background: none; border: 0; outline: none; padding: 10px 0; }
.hav { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; flex: none; background: var(--parch-lo); }
.glove { position: absolute; left: 50%; top: 0; height: 42px; pointer-events: none; z-index: 2; animation: glove 0.9s ease-in-out infinite; transition: left .25s, top .25s; }
.row:has(.claim), .row:has(.poster) { padding-bottom: 14px; }
.row.now .err.wide:empty { display: none; } /* no reserved line under a link field until there is something to say */
.glove[hidden], .hrow .btn[hidden] { display: none; }
@keyframes glove { 50% { transform: translateY(-6px); } }
.recover .wide { grid-column: auto; } /* the link field's row span is for step rows, not this panel */
.recover { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; background: var(--parch); border: 3px solid var(--ink); border-radius: 8px; padding: 12px 14px; }
.recover .t { font-family: var(--font-btn); font-size: 20px; }
.recover .s { font-size: 17px; opacity: .72; }
.recover .linkish { justify-self: center; }
.recover .code { font-family: var(--font-stamp); font-size: 14px; line-height: 1.6; background: var(--parch-hi); border: 3px dashed var(--ink); border-radius: 6px; padding: 10px 12px; user-select: all; overflow-wrap: anywhere; }
.reading { font-size: 17px; opacity: .75; animation: reading 1.4s ease-in-out infinite; }
@keyframes reading { 50% { opacity: .35; } }
@media (max-width: 420px) {
  .hrow { flex-direction: column; }
  .hrow .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .glove, .reading { animation: none; } }

/* ================================================================== landing v2 (10-19): one page, one path
   the hero holds the sign-up; the same panel becomes the three-beat track, then the reward + recruit engine */
.stage { height: auto; min-height: clamp(560px, 72vh, 680px); padding: 36px 0; display: flex; align-items: center; }
.stage-in { height: auto; width: min(1100px, calc(100% - 48px)); grid-template-columns: 400px minmax(0, 460px); justify-content: center; }
.hero-card canvas { width: 380px; height: 475px; }
.hero-card canvas.stamp-in { animation: stampin .42s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes stampin { 0% { transform: rotate(-3deg) scale(1.08); filter: brightness(1.6) drop-shadow(0 14px 24px rgba(0, 0, 0, .55)); } 100% { transform: rotate(-3deg) scale(1); } }
.burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.burst .bc { position: absolute; left: -16px; top: -16px; animation: coin var(--t) cubic-bezier(.15, .7, .4, 1) forwards; }
@keyframes coin { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 120px)) scale(1); opacity: 0; } }

.pitch { display: grid; gap: 14px; justify-items: stretch; background: rgba(20, 12, 40, .72); border: 3px solid rgba(241, 227, 191, .18); border-radius: 18px; padding: 22px 22px 18px; backdrop-filter: blur(2px); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.pitch .title { font-size: clamp(52px, 6vw, 84px); line-height: .9; margin: 0; }
.pitch .lead { margin: 0; font-size: 24px; }
.promise { display: grid; gap: 2px; color: var(--parch-hi); }
.promise b { font-family: var(--font-btn); font-size: 22px; color: var(--gold); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; font-weight: 400; letter-spacing: .3px; }
.promise span { font-size: 20px; }
.claimbox { display: grid; gap: 10px; }
.claimbox .at { min-height: 60px; }
.claimbox .at input { font-size: 24px; }
.claimbox .btn.big { width: 100%; }
.trust { color: rgba(241, 227, 191, .75); font-size: 17px; text-align: center; margin-top: -4px; }
.pitch .err { color: var(--red-hi); text-shadow: 0 1px 0 var(--ink); }
.pitch .err:empty { display: none; }
.crowd { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--parch-hi); font-size: 18px; min-height: 30px; }
.crowd b { color: var(--gold); font-weight: 400; font-family: var(--font-btn); }
.faces { display: flex; }
.faces img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); margin-left: -8px; background: var(--parch-lo); object-fit: cover; }
.faces img:first-child { margin-left: 0; }

/* the track: three pips and the prize at the end, visible from the start (Brawl Stars Trophy Road) */
.pitch-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--parch-hi); font-size: 17px; }
.pitch-h .tag { font-family: var(--font-stamp); font-size: 12px; color: var(--gold); letter-spacing: 1px; }
.pitch-h .linkish { color: var(--parch-hi); font-size: 16px; }
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; align-items: center; }
.track li { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 10px; background: rgba(241, 227, 191, .12); color: rgba(241, 227, 191, .6); font-family: var(--font-stamp); font-size: 11px; letter-spacing: 1px; }
.track li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; }
.track li i svg { width: 12px; height: 12px; }
.track li.done { background: var(--green); color: var(--ink); }
.track li.done i { background: var(--parch-hi); border-color: var(--ink); }
.track li.now { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 3px var(--parch-hi); }
.track li.wait { background: rgba(243, 196, 64, .35); color: var(--parch-hi); animation: reading 1.4s ease-in-out infinite; }
.track li.chest { background: none; color: var(--gold); font-family: var(--font-ui); font-size: 16px; letter-spacing: 0; padding: 0 2px; }
.track li.chest b { font-family: var(--font-btn); font-weight: 400; }
.beat { display: grid; gap: 10px; background: var(--parch-hi); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 14px; }
.bt { font-family: var(--font-btn); font-size: 22px; letter-spacing: .3px; }
.beat .s, .climb .s { font-size: 17px; opacity: .75; }
.taps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tap { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border: 3px solid var(--ink); border-radius: 10px; background: var(--parch); font-family: var(--font-btn); font-size: 16px; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.tap i { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--ink); display: grid; place-items: center; background: var(--parch-hi); }
.tap i svg { width: 13px; height: 13px; }
.tap.on { background: var(--green); }
.tap:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.nudge { animation: nudge .5s ease-out 2; }
.beat .reading { font-family: var(--font-btn); color: var(--wood); }

/* in: the reward, then the recruit engine */
.inbadge { justify-self: center; font-family: var(--font-btn); font-size: clamp(44px, 5vw, 64px); color: var(--gold); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: var(--drop); transform: rotate(-2deg); }
.pitch .line { text-align: center; color: var(--parch-hi); font-size: 20px; }
.pitch .line b { color: var(--gold); font-family: var(--font-btn); font-weight: 400; }
.tix { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--parch-hi); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 10px; font-size: 19px; }
.tix b { font-family: var(--font-btn); font-weight: 400; font-size: 26px; color: var(--green-lo); }
.climb { display: grid; gap: 10px; background: var(--parch-hi); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 14px; }
.ladder { position: relative; height: 14px; background: var(--parch-lo); border: 3px solid var(--ink); border-radius: 999px; margin: 14px 10px 10px; }
.ladder .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); border-radius: 999px; }
.ladder .mark { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--parch-hi); border: 3px solid var(--ink); display: grid; place-items: center; }
.ladder .mark b { font-family: var(--font-btn); font-weight: 400; font-size: 13px; }
.ladder .mark.hit { background: var(--gold); }
.boosts { display: grid; gap: 8px; }
.boost { display: grid; gap: 8px; background: rgba(241, 227, 191, .1); border: 2px dashed rgba(241, 227, 191, .35); border-radius: 10px; padding: 8px 10px; color: var(--parch-hi); text-decoration: none; font-size: 18px; }
.boost .brow { display: flex; align-items: center; gap: 10px; }
.boost .brow > span:nth-child(2) { flex: 1; }
.boost .plus { font-family: var(--font-btn); color: var(--green); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; font-size: 20px; }
.boost .inp input { font-size: 16px; padding: 6px 10px; }
.boost .err:empty { display: none; }
a.boost:hover { border-color: var(--gold); }

/* below the fold */
.how { margin: 34px auto 0; display: grid; gap: 18px; max-width: 900px; }
.beats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.b3 { display: grid; justify-items: center; text-align: center; gap: 4px; background: var(--parch-hi); border: 4px solid var(--ink); border-radius: 12px; padding: 16px 10px 14px; box-shadow: 0 6px 0 var(--ink); }
.b3 .art { height: 104px; display: flex; align-items: flex-end; }
.b3 h3 { margin: 4px 0 0; font-family: var(--font-btn); font-size: 26px; font-weight: 400; color: var(--gold); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.b3 p { margin: 0; font-size: 19px; }
.draw { display: grid; gap: 10px; justify-items: center; text-align: center; color: var(--parch-hi); }
.draw .tickets { justify-content: center; }
.draw p { margin: 0; font-size: 18px; opacity: .85; }
.sheet { margin: 26px auto 0; max-width: 620px; }
.sheet h2 { margin: 0 0 10px; text-align: center; font-family: var(--font-btn); font-weight: 400; font-size: 26px; color: var(--gold); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.page-card { margin: 26px auto 0; max-width: 680px; display: grid; gap: 14px; justify-items: stretch; background: var(--wood-hi); border: 4px solid var(--ink); border-radius: 14px; padding: 20px; box-shadow: inset 0 0 0 4px var(--wood), 0 8px 0 var(--ink); }
.page-card > .bt { color: var(--parch-hi); text-align: center; -webkit-text-stroke: 0; }
.page-card > .btn { justify-self: center; }
.page-card .status { display: flex; align-items: center; gap: 10px; background: var(--parch-hi); border: 3px solid var(--ink); border-radius: 8px; padding: 8px 12px; font-size: 18px; }
.page-card .err:empty { display: none; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .stage { padding: 16px 0 22px; min-height: 0; }
  .stage-in { grid-template-columns: minmax(0, 1fr); width: calc(100% - 24px); gap: 10px; }
  .hero-card canvas { width: min(56vw, 230px); }
  .could { bottom: -10px; }
  .pitch { padding: 14px 12px 12px; gap: 10px; text-align: left; }
  .pitch .title, .pitch .lead { display: none; }
  .promise { text-align: center; }
  .promise b { font-size: 20px; }
  .promise span { font-size: 18px; }
  .track li { font-size: 9px; padding: 7px 2px; gap: 4px; }
  .track li i { width: 14px; height: 14px; }
  .tap { font-size: 14px; }
  .beats3 { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .b3 { padding: 10px 4px; }
  .b3 .art { height: 70px; transform: scale(.7); transform-origin: bottom center; }
  .b3 h3 { font-size: 18px; -webkit-text-stroke: 2px var(--ink); }
  .b3 p { font-size: 15px; }
  .how { width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) { .hero-card canvas.stamp-in, .track li.wait, .nudge { animation: none; } }
.bar { justify-content: space-between; } /* no tabs: the logo and the X link */
/* landing v2, measured fixes: one-line title, ticked taps never look like the primary, readable empty board, even ticket rows */
.pitch .title { font-size: clamp(48px, 4.6vw, 66px); white-space: nowrap; }
.tap.on { background: var(--parch-hi); }
.tap.on i { background: var(--green); }
.sheet .board .s { color: var(--parch-hi); text-align: center; }
.draw .tickets { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; }
@media (max-width: 760px) {
  .hero-card canvas { width: min(52vw, 210px); height: auto; aspect-ratio: 1080 / 1350; }
  .stage.mine .hero-card canvas { width: min(36vw, 140px); } /* once claimed, the task leads; the poster shrinks */
  .stage.mine .could { display: none; }
  .draw .tickets { grid-template-columns: 1fr 1fr; width: 100%; }
  .draw .tk { justify-content: center; }
}
.btn[hidden] { display: none; }
.beats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .how { width: auto; }
  .draw .tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .draw .tk { min-width: 0; font-size: 14px; padding: 6px 8px 6px 6px; }
}
/* landing v2, UI review round 2 */
.hero-card canvas { width: 420px; height: 525px; }
.stage-in { grid-template-columns: 440px minmax(0, 460px); }
.burst .bc { animation: collect .85s cubic-bezier(.3, .1, .3, 1) both; }
@keyframes collect { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 12% { opacity: 1; } 38% { transform: translate(var(--dx), var(--dy)) scale(1); } 100% { transform: translate(var(--tx), var(--ty)) scale(.7); opacity: .9; } }
.tix.pop, .tix-chip.pop { animation: tixpop .22s ease-out; }
@keyframes tixpop { 50% { transform: scale(1.08); } }
.tap.on { background: var(--green); box-shadow: none; transform: translateY(2px); color: var(--ink); }
.tap.on i { background: var(--parch-hi); }
.tap .ext { font-size: 14px; opacity: .7; }
.track li:not(.done):not(.now):not(.wait):not(.chest) { background: transparent; box-shadow: inset 0 0 0 2px rgba(241, 227, 191, .55); color: var(--parch-hi); }
.share { display: grid; gap: 8px; }
@media (max-width: 1100px) and (min-width: 761px) { .hero-card canvas { width: 340px; height: 425px; } .stage-in { grid-template-columns: 360px minmax(0, 440px); } }
@media (max-width: 760px) {
  .hero-card canvas { width: min(52vw, 210px); height: auto; }
  .stage.done .hero-card canvas { width: min(62vw, 250px); } /* the member's poster, their face, is the trophy */
  .stage-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) { .promise b { font-size: 19px; } }
.ladder-cap { display: flex; justify-content: space-between; margin: -6px 2px 0; font-size: 14px; opacity: .65; }
/* the gang goal: one rung at a time */
.goal { display: grid; gap: 6px; background: rgba(27, 20, 16, .55); border: 2px solid rgba(243, 196, 64, .55); border-radius: 12px; padding: 10px 12px; color: var(--parch-hi); }
.goal-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.goal-t span { font-family: var(--font-stamp); font-size: 10px; letter-spacing: 2px; color: var(--gold); }
.goal-t b { font-family: var(--font-btn); font-weight: 400; font-size: 18px; color: var(--parch-hi); }
.goal-bar { height: 12px; background: rgba(241, 227, 191, .18); border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.goal-bar .fill { height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold)); }
.goal-r { font-size: 17px; }
.goal.done .goal-t { justify-content: center; gap: 8px; }
.how-h { margin: 0; text-align: center; font-family: var(--font-btn); font-weight: 400; font-size: 28px; color: var(--gold); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
@media (max-width: 760px) { .how-h { font-size: 22px; } .b3 h3 { font-size: 15px; } }

/* daylight (owner 10-19): the page sits on the day river's blue; the hero's shade and the panels turn from night purple to deep water */
:root { --sky: #2b4660; }
.stage { background: #8ecef4; }
.stage::before { background: radial-gradient(ellipse 44% 58% at 62% 45%, rgba(14, 26, 40, .5), rgba(14, 26, 40, 0) 72%), linear-gradient(to bottom, rgba(43, 70, 96, 0) 78%, var(--sky) 100%); }
.pitch { background: rgba(16, 28, 44, .74); }
.backdrop { filter: blur(5px) saturate(1.05) brightness(.55); }
@media (max-width: 760px) {
  .stage::before { background: linear-gradient(to bottom, rgba(14, 26, 40, .08), rgba(14, 26, 40, .45) 55%, var(--sky) 100%); }
}
.goal.quiet { padding: 8px 12px; text-align: center; }

/* ================================================================== the whole page on the street (owner 10-19)
   the live day street is fixed behind every page; the game's hanging sign replaces the header bar; no section below */
.scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #8ecef4; }
.scene .world { position: absolute; left: 0; top: 0; }
.scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(14, 26, 40, 0) 55%, rgba(14, 26, 40, .45) 100%); }
.backdrop { display: none; }
.signbar { position: relative; display: flex; justify-content: center; pointer-events: none; }
.sign-link { pointer-events: auto; display: block; line-height: 0; }
#sign { display: block; margin-bottom: -26px; } /* the sway is drawn in the canvas (early.js signSway); -26 = the in-canvas shadow (18) + the swing's room (8) */ /* no CSS filter: the shadow is drawn in the canvas (iPhone Safari blurred the filtered, swaying sign) */
@keyframes signsway { 0%, 100% { transform: rotate(-0.8deg); } 50% { transform: rotate(0.8deg); } }
.xpill { position: absolute; top: 12px; right: 14px; pointer-events: auto; display: flex; align-items: center; gap: 8px; text-decoration: none; background: var(--ink); color: var(--parch-hi); border: 3px solid var(--parch-hi); outline: 3px solid var(--ink); border-radius: 10px; padding: 8px 12px; font-family: var(--font-stamp); font-size: 11px; letter-spacing: 1px; }
.xpill .x { font-family: system-ui, sans-serif; font-size: 16px; }
.view { padding-top: 6px; }
.stage { width: auto; margin: 0; min-height: 0; padding: 10px 0 18px; background: none; overflow: visible; display: block; }
.stage::before { display: none; }
.stage-in { margin: 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 10px; border-top: 2px dashed rgba(241, 227, 191, .25); }
.perks-h { grid-column: 1 / -1; text-align: center; font-family: var(--font-stamp); font-size: 10px; letter-spacing: 2px; color: var(--gold); }
.perk { display: grid; justify-items: center; text-align: center; gap: 2px; color: var(--parch-hi); }
.perk .art { height: 34px; display: flex; align-items: flex-end; }
.perk b { font-family: var(--font-btn); font-weight: 400; font-size: 14px; color: var(--gold); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; letter-spacing: .3px; }
.perk span:last-child { font-size: 15px; opacity: .85; }
.hero .title { font-size: clamp(40px, 6vw, 64px); }
.foot { text-shadow: 0 2px 0 var(--ink), 0 0 8px rgba(0, 0, 0, .6); }
@media (max-width: 760px) {
  .xpill { top: 8px; right: 8px; padding: 6px 8px; }
  .xpill .h { display: none; }
  .stage { padding-top: 4px; }
  .stage-in { gap: 8px; }
}

.perk .art { height: 52px; }
@media (max-width: 760px) { .xpill { display: none; } } /* the sign takes the width on a phone; X is in the footer */
/* UI review, the street round: readable perks, a blur behind the panel, the X icon on phones too, a tighter ladder */
.pitch { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.perks-h { font-family: var(--font-btn); font-size: 14px; letter-spacing: .5px; color: var(--parch-hi); }
.perk span:last-child { font-size: 14px; color: var(--parch-hi); opacity: 1; }
.climb { gap: 6px; padding: 10px 14px; }
.climb .ladder { margin: 12px 10px 8px; }
@media (max-width: 760px) {
  .xpill { display: flex; top: 8px; right: 6px; padding: 5px 7px; border-width: 2px; outline-width: 2px; }
  .xpill .x { font-size: 14px; }
}
.inbadge { font-size: clamp(36px, 4vw, 52px); -webkit-text-stroke: 3px var(--ink); }
.pitch.done-p, .stage.done .pitch { gap: 10px; }
.boost-link[hidden] { display: none; }
.boost-link { display: grid; gap: 4px; }
.ladder-cap { margin-top: -4px; }
.foot { padding: 6px 0 14px; }
.stage { padding: 4px 0 8px; }
.stage.done .pitch { padding: 16px 18px 14px; }
.stage.done .tix { padding: 7px; }
@media (max-width: 760px) { .stage:not(.mine) .hero-card canvas { width: min(46vw, 184px); } }
@media (max-width: 400px) { .perk b { font-size: 12px; } }
@media (max-width: 400px) { .perk .wide-only { display: none; } } /* one baseline for the three perks on a phone */
/* "Is this you?" under the field; the poster's tag while we look */
.who-is { min-height: 0; text-align: center; color: var(--parch-hi); font-size: 17px; }
.who-is:empty { display: none; }
.who-is b { color: var(--gold); font-family: var(--font-btn); font-weight: 400; }
.who-is .typo { color: var(--red-hi); }
.could.finding { animation: reading 1.2s ease-in-out infinite; }

/* the X mark: an SVG sized to the text, centred (the 𝕏 character sat off the pixel font's line) */
.xg { width: 14px; height: 14px; flex: none; display: block; }
.xpill { align-items: center; gap: 9px; line-height: 1; padding: 9px 12px; }
.xpill .x { display: none; }
.xpill .h { display: block; line-height: 1; padding-top: 1px; }
/* the tabs: planks like the sign (wood, ink edge, nails, cream Titan One with the ink drop), hung top left on short ropes */
.planks { position: absolute; top: 0; left: 14px; display: flex; gap: 10px; align-items: flex-start; pointer-events: auto; }
.plank { position: relative; display: block; margin-top: 16px; padding: 9px 14px 8px; background: #8a5330; border: 3px solid #24160f; border-radius: 7px; box-shadow: inset 0 3px 0 #b07a4a, 0 4px 0 #24160f, 0 8px 12px rgba(0, 0, 0, .3);
  font-family: var(--font-btn); font-size: 16px; letter-spacing: .5px; color: #fff3d6; text-decoration: none; -webkit-text-stroke: 3px #24160f; paint-order: stroke fill; transform-origin: 50% -16px; transition: transform .15s; }
.plank::before, .plank::after { content: ''; position: absolute; top: -19px; width: 2px; height: 16px; background: #8a6a3e; }
.plank::before { left: 14px; } .plank::after { right: 14px; }
.plank:hover { transform: rotate(-2deg); }
.plank:active { transform: translateY(2px); }
.plank.on { background: #a2683c; color: #f3c440; box-shadow: inset 0 3px 0 #c4925f, 0 4px 0 #24160f, 0 0 0 3px #f3c440, 0 8px 12px rgba(0, 0, 0, .3); }
.foot { justify-content: space-between; align-items: center; }
.foot-x { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); line-height: 1; }
.foot-links { display: none; }
@media (max-width: 1240px) and (min-width: 761px) { .planks { flex-direction: column; gap: 4px; } .plank { margin-top: 12px; font-size: 14px; } .plank + .plank::before, .plank + .plank::after { height: 10px; top: -13px; } }
@media (max-width: 760px) {
  .signbar { flex-direction: column; align-items: center; }
  .planks { position: static; justify-content: center; gap: 8px; margin-top: -4px; }
  .plank { margin-top: 10px; padding: 7px 10px 6px; font-size: 13px; }
  .plank::before, .plank::after { top: -13px; height: 10px; }
  .xpill { padding: 6px 7px; }
  .xpill .xg { width: 13px; height: 13px; }
}
@media (max-width: 760px) { .xpill .h { display: none; } }

/* the ticket counter: a chip at the top of every page, the panel it opens */
.tix-chip { position: absolute; top: 12px; right: 210px; pointer-events: auto; display: flex; align-items: center; gap: 7px; background: #8a5330; color: #fff3d6; border: 3px solid #24160f; border-radius: 10px; padding: 7px 12px 6px 8px; box-shadow: inset 0 3px 0 #b07a4a, 0 4px 0 #24160f; font-family: var(--font-btn); font-size: 15px; letter-spacing: .4px; cursor: pointer; -webkit-text-stroke: 3px #24160f; paint-order: stroke fill; line-height: 1; }
.tix-chip .coin { width: 24px; height: 24px; flex: none; background: url('assets/sprites_day.png') -1827px -2076px / 3072px 2145px no-repeat; image-rendering: pixelated; -webkit-text-stroke: 0; }
.tix-chip b { font-weight: 400; color: #f3c440; font-size: 18px; }
.tix-chip:hover { transform: translateY(-1px); }
.tsheet-bg { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(10, 18, 30, .55); opacity: 0; transition: opacity .18s; }
.tsheet-bg.on { opacity: 1; }
.tsheet { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 10px; background: var(--parch-hi); color: var(--ink); border: 4px solid var(--ink); border-radius: 16px; padding: 20px 18px 16px; box-shadow: inset 0 0 0 4px var(--parch-lo), 0 10px 0 var(--ink), 0 24px 50px rgba(0, 0, 0, .5); transform: translateY(12px); transition: transform .18s; }
.tsheet-bg.on .tsheet { transform: none; }
.ts-x { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 3px solid var(--ink); border-radius: 50%; background: var(--parch); font-size: 24px; line-height: 1; cursor: pointer; }
.ts-h { text-align: center; font-family: var(--font-btn); font-size: 26px; color: var(--gold); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ts-n { display: flex; justify-content: center; align-items: center; gap: 10px; }
.ts-n b { font-family: var(--font-btn); font-weight: 400; font-size: 52px; color: var(--green-lo); line-height: 1; }
.ts-why { text-align: center; font-size: 19px; }
.ts-why b { font-family: var(--font-btn); font-weight: 400; }
.prizes, .earn { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tier { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: baseline; background: #24160f; color: var(--parch-hi); border-radius: 10px; padding: 9px 12px; }
.tier-n { font-family: var(--font-btn); font-size: 17px; color: var(--gold); }
.tier-w { justify-self: end; font-size: 15px; opacity: .8; }
.tier-p { grid-column: 1 / -1; font-size: 17px; }
.tier.t0 { background: linear-gradient(90deg, #5e3620, #8a5330); box-shadow: inset 0 0 0 2px #f3c440; }
.tier.t0 .tier-n { font-size: 20px; }
.ts-sub { font-family: var(--font-stamp); font-size: 10px; letter-spacing: 2px; opacity: .7; text-align: center; margin-top: 4px; }
.earn li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; background: var(--parch); border: 2px solid var(--ink); border-radius: 8px; padding: 6px 10px; font-size: 17px; }
.earn li i { width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 5px; display: grid; place-items: center; background: var(--parch-hi); }
.earn li i svg { width: 14px; height: 14px; }
.earn li.got i { background: var(--green); }
.earn li.wait i { background: var(--gold); }
.earn li em { font-style: normal; opacity: .6; font-size: 15px; }
.earn li b { font-family: var(--font-btn); font-weight: 400; color: var(--green-lo); font-size: 18px; }
.ts-fine { text-align: center; font-size: 15px; opacity: .7; }
.perk-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.perk-btn span:last-child { text-decoration: underline; text-underline-offset: 3px; }
button.tix { width: 100%; cursor: pointer; font: inherit; color: var(--ink); }
button.tix u { font-size: 15px; opacity: .7; margin-left: 4px; }
@media (max-width: 1240px) and (min-width: 761px) { .tix-chip { right: 14px; top: 64px; } }
@media (max-width: 760px) { /* in the tab row: a plank like its neighbours, the coin and the count */
  .planks .tix-chip { position: static; margin-top: 10px; padding: 5px 8px 4px 6px; font-size: 13px; gap: 4px; }
  .planks .tix-chip .coin { width: 18px; height: 18px; background-position: -1370px -1557px; background-size: 2304px 1609px; }
  .planks .tix-chip #tix-chip-t { display: none; }
  .planks .tix-chip b[hidden] { display: inline; } }
.tsheet-bg[hidden] { display: none; }
/* the footer sits on the busy street: each item on its own dark pill (owner 10-19: the text read as broken over the cellar art) */
.foot { text-shadow: none; }
.foot > * { background: rgba(14, 26, 40, .78); border: 2px solid rgba(241, 227, 191, .22); border-radius: 999px; padding: 6px 12px; text-decoration: none; }
.foot-x span { text-decoration: none; }
.foot-x:hover span { text-decoration: underline; }
/* the top-right pair: one row, the same height, border and drop (owner 10-19: they weren't aligned) */
.topright { position: absolute; top: 12px; right: 14px; display: flex; gap: 10px; align-items: stretch; pointer-events: auto; }
.topright .tix-chip, .topright .xpill { position: static; height: 44px; box-sizing: border-box; margin: 0; border: 3px solid #24160f; border-radius: 10px; outline: 0; }
.topright .tix-chip { padding: 0 12px 0 8px; box-shadow: inset 0 3px 0 #b07a4a, 0 4px 0 #24160f; }
.topright .xpill { padding: 0 14px; box-shadow: inset 0 0 0 2px #fff3d6, 0 4px 0 #24160f; }
@media (max-width: 1240px) and (min-width: 761px) { .topright { flex-direction: row; } }
@media (max-width: 760px) { .topright { top: 8px; right: 6px; } .topright .xpill { height: 36px; padding: 0 9px; } }

/* the tab pages: a wooden notice board anchored over the river (the street stays in view), the title a hanging plank */
.page { min-height: calc(100vh - 230px); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 40px 0 6px; }
.page-card.board { width: min(620px, 100%); margin: 0; position: relative; gap: 12px; padding: 40px 18px 18px;
  background: repeating-linear-gradient(180deg, #8a5330 0 44px, #774626 44px 47px), #8a5330;
  border: 4px solid #24160f; border-radius: 12px; box-shadow: inset 0 4px 0 #b07a4a, 0 6px 0 #24160f, 0 18px 34px rgba(0, 0, 0, .4); }
.board::before, .board::after { content: ''; position: absolute; top: 12px; width: 6px; height: 6px; background: #4d4d5a; box-shadow: inset 2px 2px 0 #dfe3ec; }
.board::before { left: 12px; } .board::after { right: 12px; }
.board-h { position: absolute; top: -28px; left: 50%; transform: translateX(-50%) rotate(-1deg); background: #5e3620; border: 3px solid #24160f; border-radius: 8px; padding: 6px 24px 7px; box-shadow: inset 0 3px 0 #8a5330, 0 4px 0 #24160f; white-space: nowrap; }
.bh-t { font-family: var(--font-btn); font-size: 30px; letter-spacing: 1px; color: #fff3d6; -webkit-text-stroke: 5px #24160f; paint-order: stroke fill; text-shadow: 0 3px 0 #24160f; }
.board-s { text-align: center; color: #fff3d6; font-size: 19px; text-shadow: 0 2px 0 #24160f; }
.board > .bt { text-align: center; font-family: var(--font-btn); font-size: 24px; color: #f3c440; -webkit-text-stroke: 4px #24160f; paint-order: stroke fill; }
.board .field { box-shadow: 0 3px 0 rgba(36, 22, 15, .6); }
.board .status { box-shadow: 0 3px 0 rgba(36, 22, 15, .6); }
@media (max-width: 760px) { .page { min-height: calc(100vh - 250px); padding-top: 34px; } .bh-t { font-size: 22px; } .page-card.board { padding: 34px 12px 14px; } }
/* the board's form, compact (the street stays in view); nails that read as nails; toasts under the sign, not over the bottom boards */
.page-card.board { gap: 8px; }
.board .field { padding: 8px 12px 10px; gap: 4px; }
.board .field .lbl { font-size: 17px; }
.board .field .hint { font-size: 14px; margin-top: -2px; }
.board .field input, .board .inp input { padding: 7px 10px; font-size: 17px; }
.board .field textarea { min-height: 46px; padding: 7px 10px; font-size: 17px; }
.board .two { gap: 8px; }
.board .status { padding: 6px 10px; font-size: 16px; }
.board > .btn.big { min-height: 54px; font-size: 22px; padding: 8px 28px 11px; }
.board::before, .board::after { width: 8px; height: 8px; background: #dfe3ec; border: 2px solid #4d4d5a; box-shadow: none; border-radius: 1px; }
.toast { top: 178px; bottom: auto; transform: translate(-50%, -12px); opacity: 0; transition: transform .2s ease-out, opacity .2s, visibility 0s linear .2s; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 760px) { .toast { top: 206px; } }
@media (min-width: 1101px) { .stage-in { gap: 22px; } } /* poster and panel close: no half-word of the street between them (UI review) */

/* the poster hangs like the sign (owner 10-19, option B): the paper on a frame of the sign's wood, two ropes, a gentle sway */
.hero-card { transform-origin: 50% -60px; animation: signsway 7s ease-in-out infinite; }
.hero-card canvas, .hero-card canvas.stamp-in { transform: none; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); position: relative; z-index: 1; }
.pframe { position: absolute; top: 9%; left: 8%; right: 8%; bottom: 13%; background: repeating-linear-gradient(180deg, #8a5330 0 40px, #774626 40px 43px); border: 4px solid #24160f; border-radius: 10px; box-shadow: inset 0 4px 0 #b07a4a, 0 6px 0 #24160f, 0 16px 28px rgba(0, 0, 0, .35); transform: rotate(-2deg); }
.pframe::before, .pframe::after { content: ''; position: absolute; bottom: 100%; width: 3px; height: 70px; background: #8a6a3e; }
.pframe::before { left: 14%; } .pframe::after { right: 14%; }
.hero-card .could { z-index: 2; }
@keyframes stampin { 0% { transform: scale(1.06); filter: brightness(1.5) drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); } 100% { transform: scale(1); } }
@media (max-width: 760px) { .pframe::before, .pframe::after { height: 34px; } .hero-card { transform-origin: 50% -30px; } }
@media (prefers-reduced-motion: reduce) { .hero-card { animation: none; } }
.hero-card .could { bottom: 10%; } /* on the frame's bottom edge (the paper alone is shorter than the old board) */
@media (max-width: 760px) { .hero-card .could { bottom: 9%; } }
/* the poster's ropes run up out of the top of the window, like the sign's (owner 10-19: it read as floating in the sky);
   the sign, the tabs and the top-right buttons sit in front of them */
.pframe::before, .pframe::after { height: 2000px; }
@media (max-width: 760px) { .pframe::before, .pframe::after { height: 2000px; } }
.signbar { z-index: 5; }
.view { position: relative; z-index: 1; }

/* ================================================================== one notice board (owner 10-19: no ropes, nothing floating):
   the poster nailed to the left of a board in the sign's wood, the sign-up on the right; the old frame and slate panel are gone */
.pframe { display: none; }
.hero-card { animation: none; transform: none; }
.hero-card canvas, .hero-card canvas.stamp-in { filter: drop-shadow(0 5px 3px rgba(36, 22, 15, .55)); transform: rotate(-2deg); }
@keyframes stampin { 0% { transform: rotate(-2deg) scale(1.06); filter: brightness(1.5); } 100% { transform: rotate(-2deg) scale(1); } }
.nboard { position: relative; width: min(960px, calc(100% - 32px)); padding: 26px 26px 22px; gap: 14px; grid-template-columns: 400px minmax(0, 1fr); align-items: center;
  background: repeating-linear-gradient(180deg, #8a5330 0 46px, #774626 46px 49px), #8a5330;
  border: 4px solid #24160f; border-radius: 14px; box-shadow: inset 0 4px 0 #b07a4a, inset 0 -4px 0 #6b3f22, 0 7px 0 #24160f, 0 22px 40px rgba(0, 0, 0, .4); }
.nboard::before, .nboard::after { content: ''; position: absolute; top: 12px; width: 8px; height: 8px; background: #dfe3ec; border: 2px solid #4d4d5a; border-radius: 1px; }
.nboard::before { left: 12px; } .nboard::after { right: 12px; }
/* the poster's nails: two iron heads on the paper's top corners */
.pin { position: absolute; z-index: 3; top: 11.5%; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f1f3f8, #8d93a3 55%, #4d4d5a); border: 2px solid #24160f; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.pin.l { left: 20%; } .pin.r { right: 21%; top: 13%; }
.hero-card .could { bottom: 9%; transform: translateX(-50%) rotate(-3deg); }
/* the sign-up sits straight on the wood: no slate box, parchment fields, cream type with the ink drop */
.nboard .pitch { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 4px 4px 4px 8px; }
.nboard .promise b { -webkit-text-stroke: 3px #24160f; }
.nboard .promise span, .nboard .trust, .nboard .crowd, .nboard .who-is, .nboard .pitch .line, .nboard .pitch-h { text-shadow: 0 2px 0 #24160f; }
.nboard .trust { color: #fff3d6; opacity: .9; }
.nboard .goal { background: rgba(36, 22, 15, .55); border-color: #24160f; }
.nboard .perks { border-top-color: rgba(36, 22, 15, .5); }
.nboard .perks-h, .nboard .perk span:last-child { text-shadow: 0 2px 0 #24160f; }
.nboard .track li:not(.done):not(.now):not(.wait):not(.chest) { background: rgba(36, 22, 15, .45); box-shadow: inset 0 0 0 2px rgba(241, 227, 191, .5); }
.nboard .boost { background: rgba(36, 22, 15, .4); border-color: rgba(241, 227, 191, .45); }
.nboard .inbadge { -webkit-text-stroke: 4px #24160f; }
@media (min-width: 1101px) { .stage-in.nboard { gap: 18px; } }
@media (max-width: 1100px) and (min-width: 761px) { .nboard { grid-template-columns: 330px minmax(0, 1fr); } }
@media (max-width: 760px) {
  .nboard { width: calc(100% - 16px); grid-template-columns: minmax(0, 1fr); padding: 18px 12px 14px; gap: 6px; }
  .nboard .pitch { padding: 0; }
  .pin { width: 9px; height: 9px; }
}
.could[hidden] { display: none !important; }
.pin { display: none; } /* the poster art carries its own nail and the arrow */
@media (min-width: 761px) { .stage.done .nboard { padding: 16px 22px 14px; } .stage.done .hero-card canvas { width: 360px; height: 450px; } .stage.done .pitch { gap: 8px; } .stage.done .inbadge { font-size: 44px; } }
@media (min-width: 761px) { .stage.done .tix { padding: 5px; } .stage.done .climb { padding: 8px 12px; } .stage.done .boost { padding: 6px 10px; } }
/* round iron nail heads (UI review: the squares read as UI handles); a narrower board so houses show on both sides */
.nboard::before, .nboard::after, .board::before, .board::after { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 32% 32%, #e8ebf2 0 18%, #6b7080 30%, #2a2a33 75%); border: 2px solid #24160f; }
@media (min-width: 1101px) { .nboard { width: min(880px, calc(100% - 32px)); grid-template-columns: 350px minmax(0, 1fr); } .nboard .hero-card canvas { width: 350px; height: 437px; } }
/* the Band's ladder in the tickets panel: your rung lit, the next one named, the circle in gold */
.ts-n span { font-size: 18px; opacity: .7; align-self: flex-end; margin-bottom: 8px; }
.ladder2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.rung { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: baseline; background: #24160f; color: var(--parch-hi); border-radius: 10px; padding: 8px 12px; opacity: .78; }
.rung-at { grid-row: 1 / 3; align-self: center; font-family: var(--font-stamp); font-size: 10px; letter-spacing: 1px; color: #f3c440; }
.rung-n { font-family: var(--font-btn); font-size: 17px; color: #fff3d6; }
.rung-w { font-size: 15px; opacity: .85; }
.rung.got { opacity: 1; }
.rung.here { opacity: 1; box-shadow: inset 0 0 0 3px #6bd46b; }
.rung.circle { background: linear-gradient(90deg, #5e3620, #8a5330); box-shadow: inset 0 0 0 2px #f3c440; opacity: 1; }
.rung.circle .rung-n { color: #f3c440; }
.rung-now { font-family: var(--font-btn); font-weight: 400; color: var(--green-lo); font-size: 16px !important; }
.rung { grid-template-columns: 104px 1fr; } .rung-at { white-space: nowrap; }

/* ================================================================== THE CHECKLIST: a trail of four stones to the loot sack, one card
   at a time, one completion beat per step (seal → stone → coin → hop → next card, ~1 s), one finale */
.trail { position: relative; padding: 4px 0 2px; }
.trail ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr) 64px; align-items: start; position: relative; }
.trail ol::before { content: ''; position: absolute; left: 12%; right: 40px; top: 21px; border-top: 4px dashed rgba(36, 22, 15, .55); }
.stone { position: relative; display: grid; justify-items: center; gap: 5px; z-index: 1; }
.stone i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--font-btn); font-size: 18px; color: #24160f;
  background: #c9b88c; border: 3px solid #24160f; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 3px 0 #24160f; }
.stone i svg { width: 22px; height: 22px; }
.stone span { font-family: var(--font-stamp); font-size: 9px; letter-spacing: 1px; color: #fff3d6; text-shadow: 0 2px 0 #24160f; }
.stone.done i { background: var(--green); }
.stone.now i { background: var(--gold); animation: stonepulse 1.4s ease-in-out infinite; }
.stone.wait i { background: #e8c56a; animation: reading 1.2s ease-in-out infinite; }
.stone.next i { background: rgba(201, 184, 140, .55); color: rgba(36, 22, 15, .55); }
.stone.lit i { animation: stonelit .26s ease-out; }
@keyframes stonepulse { 50% { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 3px 0 #24160f, 0 0 0 6px rgba(243, 196, 64, .35); } }
@keyframes stonelit { 50% { transform: scale(1.18); filter: brightness(1.35); } }
.loot { position: relative; display: grid; justify-items: center; z-index: 1; margin-top: -4px; }
.loot b { position: absolute; bottom: -2px; right: 2px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--gold); border: 2px solid #24160f; font-family: var(--font-btn); font-weight: 400; font-size: 13px; display: grid; place-items: center; color: #24160f; }
.loot.bump { animation: lootbump .18s ease-out; }
.loot.burst { animation: lootburst .5s ease-out; }
@keyframes lootbump { 50% { transform: scale(1.18); } }
@keyframes lootburst { 30% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(.95) rotate(4deg); } }
.walker { position: absolute; top: -26px; left: calc((100% - 64px) / 4 * var(--i) + (100% - 64px) / 8 - 15px); transition: left .35s ease-in-out; pointer-events: none; z-index: 2; }
.walker.hop { animation: hop .35s ease-in-out; }
@keyframes hop { 50% { transform: translateY(-8px); } }
.qcard { position: relative; display: grid; gap: 10px; background: var(--parch-hi); color: var(--ink); border: 3px solid #24160f; border-radius: 12px; padding: 16px; box-shadow: 0 4px 0 #24160f; animation: cardin .26s cubic-bezier(.2, 1.25, .4, 1); }
@keyframes cardin { from { transform: translateY(24px); opacity: 0; } }
.qt { font-family: var(--font-btn); font-size: 24px; letter-spacing: .3px; }
.qh { font-size: 17px; opacity: .75; margin-top: -6px; }
.qtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qtile { display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; background: var(--parch); border: 3px solid #24160f; border-radius: 12px; box-shadow: 0 4px 0 #24160f; cursor: pointer; font: inherit; color: #24160f; transition: transform .07s; }
.qtile svg { width: 32px; height: 32px; fill: #24160f; stroke: #24160f; }
.qtile b { font-family: var(--font-btn); font-weight: 400; font-size: 16px; }
.qtile em { font-style: normal; font-size: 13px; opacity: .65; }
.qtile:active { transform: translateY(3px); box-shadow: 0 1px 0 #24160f; }
.qtile.opened { background: #d8e7c2; box-shadow: none; transform: translateY(3px); }
.qtile.opened em { font-family: var(--font-stamp); font-size: 9px; letter-spacing: 1px; color: var(--green-lo); opacity: 1; }
.qtile.pop svg { animation: stonelit .26s ease-out; }
.qlink { justify-self: center; font-size: 15px; }
.qfall { display: grid; gap: 6px; border-top: 2px dashed rgba(36, 22, 15, .25); padding-top: 10px; }
.qfall .inp, .qcard > .inp { gap: 6px; }
.qcard .err:empty { display: none; }
.qcard input.bad { border-color: var(--red-lo); box-shadow: 0 0 0 3px rgba(229, 68, 58, .25); }
.wchip { display: inline-flex; align-items: center; gap: 8px; justify-self: start; background: var(--parch); border: 2px solid #24160f; border-radius: 999px; padding: 4px 12px 4px 6px; font-size: 16px; }
.wchip[hidden] { display: none; }
.wchip i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #24160f; }
.qseal { position: absolute; top: 10px; right: 12px; transform: rotate(-12deg); background: #b8332b; color: #fff3d6; font-family: var(--font-btn); font-size: 14px; letter-spacing: 1px; padding: 6px 10px; border-radius: 50%; border: 3px solid #7a1f19; box-shadow: 0 0 0 3px rgba(184, 51, 43, .25); animation: sealin .22s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes sealin { 0% { transform: scale(1.7) rotate(-22deg); opacity: 0; } 70% { transform: scale(.9) rotate(-10deg); opacity: 1; } 100% { transform: scale(1) rotate(-12deg); } }
.qcoin { position: fixed; z-index: 70; pointer-events: none; animation: coinarc .45s ease-in forwards; }
@keyframes coinarc { 0% { transform: translate(0, 0) scale(1); } 45% { transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5 - 40px)) scale(1.1); } 100% { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: .8; } }
.qcoin.burst { animation: coinburst .9s cubic-bezier(.15, .7, .4, 1) forwards; }
@keyframes coinburst { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 80px)) scale(1); opacity: 0; } }
.nboard .pitch .track { display: none; }
@media (max-width: 760px) {
  body.questing #planks { display: none; } /* the checklist owns the phone screen; the tabs return on the done screen */
  .stage.mine:not(.done) .hero-card canvas { width: min(30vw, 116px); }
  .stone i { width: 36px; height: 36px; font-size: 16px; } .trail ol::before { top: 19px; }
  .qt { font-size: 22px; } .qcard { padding: 14px 12px; }
  .qtile svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .stone.now i, .stone.wait i, .qcard, .walker, .qseal { animation: none; transition: none; } }
.trail { padding-top: 34px; } .walker { top: 2px; }
.qcard .btn:disabled { filter: none; opacity: 1; transform: translateY(3px); } /* pressed, never greyed, while the beat plays */
@media (max-width: 760px) { .toast { top: auto; bottom: 16px; transform: translate(-50%, 12px); } .toast.on { transform: translate(-50%, 0); } }
/* checklist review round 2 */
.qsteps { list-style: none; margin: -2px 0 0; padding: 0; display: grid; gap: 6px; }
.qsteps li { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.qsteps li b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #24160f; color: #fff3d6; font-family: var(--font-btn); font-weight: 400; font-size: 14px; display: grid; place-items: center; }
.copied { font-family: var(--font-stamp); font-size: 9px; letter-spacing: 1px; color: var(--green-lo); background: #d8e7c2; border-radius: 999px; padding: 3px 7px; }
.copied[hidden] { display: none; }
.qring { position: fixed; z-index: 69; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 4px solid #fff; pointer-events: none; animation: qring .5s ease-out forwards; }
@keyframes qring { to { transform: scale(7); opacity: 0; } }
.qcoin.burst { animation: coinfall var(--t, .8s) cubic-bezier(.2, .6, .5, 1) forwards; }
@keyframes coinfall { 0% { transform: translate(0, 0) rotate(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 55% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) * .6)) scale(1); } 100% { transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) + 140px)) rotate(var(--r)) scale(.9); opacity: 0; } }
@keyframes lootburst { 40% { transform: scale(1.35); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }
.loot.burst { animation: lootburst .3s cubic-bezier(.2, 1.4, .4, 1); }
button.tix { justify-content: center; text-align: left; }
button.tix u { text-decoration: none; font-size: 22px; }
.stage.done .qlink { margin-top: -4px; color: #fff3d6; text-shadow: 0 2px 0 #24160f; opacity: .9; }
@media (max-width: 760px) {
  .stage.miss .hero-card, .stage.miss .pitch-h { display: none; } /* the paste field gets the room; the trail says where they are */
  .toast { top: 8px; bottom: auto; transform: translate(-50%, -12px); padding: 8px 14px; font-size: 16px; } /* a strip above everything, never on the card */
  .toast.on { transform: translate(-50%, 0); }
}
@media (max-width: 400px) { .stone span { font-size: 7px; letter-spacing: 0; } .trail ol { grid-template-columns: repeat(4, 1fr) 54px; } }
@media (max-width: 760px) { .stage.done .hero-card canvas { width: min(46vw, 180px); } .stage.done .inbadge { font-size: 36px; } }
/* 375 round: one identity line, the primary always in view, the pill never wraps */
.pitch-h { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.pitch-h .who { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.pitch-h .hh { overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 160px; }
.copied { white-space: nowrap; flex: none; }
.qsteps li { flex-wrap: nowrap; } .qsteps li > :not(b):not(.copied) { min-width: 0; }
@media (max-width: 400px) { .wide-only { display: none; } }
@media (max-width: 760px) { .stage.walletstep .hero-card, .stage.walletstep .pitch-h { display: none; } }

/* THE REWARD ROAD: one bar, the prizes standing on it, numbers under (Trophy Road / battle pass / milestone bar) */
.road { position: relative; height: 128px; margin: 4px 6px 0; }
.road-bar { position: absolute; left: 0; right: 0; top: 56px; height: 14px; border-radius: 999px; background: #d8c8a0; border: 3px solid #24160f; overflow: hidden; }
.road-bar i { display: block; height: 100%; background: linear-gradient(180deg, #ffd866, #f3c440 55%, #b8861d); }
.stop { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; width: 25%; }
.stop-ic { height: 52px; display: flex; align-items: flex-end; justify-content: center; filter: grayscale(1) brightness(.75) opacity(.55); transition: filter .2s; }
.stop.got .stop-ic, .stop.next .stop-ic { filter: none; }
.stop.next .stop-ic { animation: stopbob 1.4s ease-in-out infinite; }
@keyframes stopbob { 50% { transform: translateY(-4px); } }
.stop-n { margin-top: 2px; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 13px; display: grid; place-items: center; background: #24160f; color: #fff3d6; font-family: var(--font-btn); font-weight: 400; font-size: 14px; border: 2px solid #24160f; position: relative; z-index: 1; }
.stop.got .stop-n { background: var(--gold); color: #24160f; }
.stop.top .stop-n { background: linear-gradient(90deg, #5e3620, #8a5330); color: #f3c440; font-size: 11px; }
.stop-l { margin-top: 4px; font-family: var(--font-btn); font-size: 12px; letter-spacing: .3px; color: #24160f; white-space: nowrap; }
.road.small { height: 96px; }
.road.small .road-bar { top: 38px; height: 10px; }
.road.small .stop-ic { height: 34px; }
.road.small .stop-n { height: 20px; font-size: 12px; min-width: 24px; }
.road.small .stop.top .stop-n { font-size: 9px; }
.road.small .stop-l { font-size: 10px; }
.tsheet { gap: 12px; }
.ts-n { margin-top: 4px; }
.ts-why { font-size: 18px; }
.earn2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.etile { display: grid; justify-items: center; gap: 2px; padding: 12px 8px 10px; background: var(--parch); border: 3px solid #24160f; border-radius: 12px; box-shadow: 0 4px 0 #24160f; cursor: pointer; font: inherit; color: #24160f; text-decoration: none; }
.etile b { font-family: var(--font-btn); font-weight: 400; font-size: 16px; margin-top: 4px; }
.etile em { font-style: normal; font-family: var(--font-btn); color: var(--green-lo); font-size: 18px; }
.etile:active { transform: translateY(3px); box-shadow: 0 1px 0 #24160f; }
.ts-fine { font-size: 13px; }
.ts-h, .ladder2, .ts-sub, .earn { display: none; }
.stage .climb { padding: 10px 8px 4px; }
@media (prefers-reduced-motion: reduce) { .stop.next .stop-ic { animation: none; } }
.stop-l { font-size: 11px; } .road.small .stop-l { font-size: 9px; }
.stop.top .stop-ic { filter: none; } .stop.top:not(.got) .stop-ic { filter: drop-shadow(0 0 6px rgba(243, 196, 64, .9)); } /* the top prize glows: something to want */

/* ================================================================== the reward road v2 (UI review): you ride it, the next prize is the hero */
.tsheet-bg { background: rgba(10, 18, 30, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.ts-n { display: none; }
.hero-prize { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 6px 40px 0 0; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #3a2414, #6b3f22); border: 3px solid #24160f; box-shadow: inset 0 0 0 2px #f3c440, 0 4px 0 #24160f; color: #fff3d6; }
.hp-ic { display: grid; place-items: center; filter: drop-shadow(0 0 10px rgba(243, 196, 64, .65)); animation: stopbob 1.6s ease-in-out infinite; }
.hp-t { display: grid; gap: 2px; }
.hp-t b { font-family: var(--font-btn); font-weight: 400; font-size: 30px; line-height: 1; color: #f3c440; -webkit-text-stroke: 3px #24160f; paint-order: stroke fill; }
.hp-t > span { font-family: var(--font-btn); font-size: 17px; }
.hp-mini { display: block; height: 10px; margin-top: 4px; border-radius: 999px; background: rgba(241, 227, 191, .25); border: 2px solid #24160f; overflow: hidden; }
.hp-mini i { display: block; height: 100%; background: #f3c440; }
.hp-t em { font-style: normal; font-size: 13px; opacity: .8; }
.road { height: 112px; margin: 8px 8px 0; }
.road-bar { top: 50px; height: 14px; }
.road-bar i { width: var(--at); transition: width .6s cubic-bezier(.2, .8, .3, 1); position: relative; overflow: hidden; }
.road-bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-100%); animation: shine 1.1s .5s ease-out; }
@keyframes shine { to { transform: translateX(100%); } }
.road.fill0 .road-bar i { width: 0; } .road.fill0 .me { left: 0; }
.stop-ic { position: relative; height: 44px; filter: brightness(.55) saturate(.6); }
.stop.got .stop-ic, .stop.next .stop-ic { filter: none; }
.stop.top:not(.got) .stop-ic { filter: brightness(.8) drop-shadow(0 0 6px rgba(243, 196, 64, .9)); }
.lockb { position: absolute; right: -6px; bottom: -2px; width: 14px; height: 14px; }
.stop-n { margin-top: 4px; }
.stop-l { font-size: 10px; }
.stop.pop .stop-ic { animation: stoppop .4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes stoppop { 50% { transform: scale(1.35); } }
.me { position: absolute; top: 37px; left: var(--at); transform: translateX(-50%); display: grid; justify-items: center; transition: left .6s cubic-bezier(.2, .8, .3, 1); z-index: 3; pointer-events: none; }
.me-ring { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #c9b88c; border: 3px solid #f3c440; box-shadow: 0 0 0 2px #24160f, 0 3px 6px rgba(0, 0, 0, .35); overflow: hidden; display: grid; place-items: center; }
.me-ring img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.me b { margin-top: 2px; background: #f3c440; color: #24160f; border: 2px solid #24160f; border-radius: 999px; padding: 0 7px; font-family: var(--font-btn); font-weight: 400; font-size: 13px; }
.road .stop { z-index: 2; }
.quests { display: grid; gap: 8px; }
.quest { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 10px; align-items: center; background: var(--parch); border: 3px solid #24160f; border-radius: 12px; padding: 8px 10px; box-shadow: 0 3px 0 #24160f; }
.q-t { display: grid; } .q-t b { font-family: var(--font-btn); font-weight: 400; font-size: 16px; } .q-t span { font-size: 13px; opacity: .7; }
.quest em { font-style: normal; font-family: var(--font-btn); color: var(--green-lo); font-size: 16px; white-space: nowrap; }
.quest .btn.small { padding: 6px 12px; font-size: 14px; min-height: 0; text-decoration: none; }
.unlock-ban { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 5; background: #24160f; color: #f3c440; border: 3px solid #f3c440; border-radius: 10px; padding: 8px 16px; font-family: var(--font-btn); font-size: 20px; white-space: nowrap; animation: banin 1.4s ease-out forwards; }
@keyframes banin { 0% { transform: translate(-50%, -30px); opacity: 0; } 15% { transform: translate(-50%, 0); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.earn2 { display: none; }
@media (max-width: 400px) { .hero-prize { margin-right: 34px; gap: 10px; } .hp-ic svg { width: 64px; height: 64px; } .hp-t b { font-size: 26px; } .quest { grid-template-columns: 26px 1fr auto auto; gap: 7px; } .q-t b { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .road-bar i, .me { transition: none; } .road-bar i::after, .hp-ic, .unlock-ban { animation: none; } }
/* the rider: just your face on the bar (the hero card says the number); never past the bar's ends; under the labels */
.me { top: 43px; left: clamp(16px, var(--at), calc(100% - 16px)); }
.me-ring { width: 32px; height: 32px; }
.me b { display: none; }
.road.fill0 .me { left: 16px; }
.stop-l { position: relative; z-index: 4; background: var(--parch-hi); padding: 0 3px; border-radius: 4px; }
@media (max-width: 400px) { .q-t span { display: none; } .quest em { font-size: 14px; } }

/* the road, bigger (owner 10-19) and sized for every screen */
.tsheet { width: min(560px, 100%); padding: 22px 22px 18px; gap: 16px; }
.hero-prize { margin-right: 46px; padding: 16px 18px; gap: 18px; }
.hp-t b { font-size: 38px; } .hp-t > span { font-size: 20px; } .hp-mini { height: 12px; } .hp-t em { font-size: 14px; }
.road { height: 140px; margin: 10px 12px 0; }
.road-bar { top: 64px; height: 18px; }
.stop-ic { height: 56px; }
.stop-n { margin-top: 6px; height: 30px; min-width: 36px; font-size: 16px; }
.stop.top .stop-n { font-size: 12px; }
.stop-l { font-size: 12px; margin-top: 5px; }
.lockb { width: 16px; height: 16px; }
.me { top: 56px; } .me-ring { width: 40px; height: 40px; }
.quest { padding: 12px 14px; gap: 12px; grid-template-columns: 36px 1fr auto auto; }
.q-t b { font-size: 19px; } .q-t span { font-size: 14px; } .quest em { font-size: 19px; }
.quest .btn.small { padding: 9px 16px; font-size: 16px; }
@media (max-width: 560px) {
  .tsheet-bg { padding: 8px; align-items: end; } /* a bottom sheet on phones, full width, in the thumb zone */
  .tsheet { width: 100%; padding: 18px 14px 16px; gap: 14px; border-radius: 18px; }
  .hero-prize { margin-right: 44px; gap: 12px; padding: 12px; }
  .hp-ic svg { width: 76px; height: 76px; } .hp-t b { font-size: 32px; } .hp-t > span { font-size: 17px; }
  .road { height: 128px; margin: 6px 4px 0; } .road-bar { top: 56px; } .stop-ic { height: 48px; } .stop-ic svg { width: 42px; height: 42px; }
  .me { top: 50px; } .me-ring { width: 36px; height: 36px; }
  .stop-n { height: 26px; min-width: 30px; font-size: 14px; } .stop.top .stop-n { font-size: 10px; } .stop-l { font-size: 10px; }
  .quest { grid-template-columns: 32px 1fr auto auto; gap: 8px; padding: 10px; } .q-t b { font-size: 16px; } .quest em { font-size: 15px; }
  .quest .btn.small { padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 360px) { .stop-l { font-size: 8px; } .hp-t b { font-size: 28px; } .q-t span { display: none; } }
.me.none { display: none; }
@media (max-width: 560px) { .stop-ic svg { width: auto; height: auto; } .stop-ic svg.pix { width: 42px; height: 42px; } .lockb { width: 14px !important; height: 14px !important; } }
.topref { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left; cursor: pointer; font: inherit; color: #fff3d6; background: linear-gradient(90deg, #3a2414, #6b3f22); border: 3px solid #24160f; border-radius: 12px; padding: 10px 14px; box-shadow: inset 0 0 0 2px #f3c440, 0 3px 0 #24160f; }
.topref svg { filter: drop-shadow(0 0 6px rgba(243, 196, 64, .8)); }
.topref span { display: grid; } .topref b { font-family: var(--font-btn); font-weight: 400; font-size: 18px; color: #f3c440; } .topref em { font-style: normal; font-size: 14px; opacity: .9; }
.topref u { text-decoration: none; font-family: var(--font-btn); font-size: 15px; }
/* road v3 (UI review): numbers on the label line, the banner on the road, action icons, one invite row */
.stop-l { display: grid; justify-items: center; gap: 2px; margin-top: 30px; background: none; }
.stop-l .stop-n { margin: 0; height: 24px; min-width: 30px; font-size: 14px; }
.road { height: 150px; }
.unlock-ban { top: -8px; font-size: 16px; padding: 6px 12px; transform: translateX(-50%); }
@keyframes banin { 0% { transform: translate(-50%, -20px); opacity: 0; } 15% { transform: translate(-50%, 0); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.xq { width: 32px; display: grid; place-items: center; }
.topline { justify-self: start; font-family: var(--font-btn); font-size: 13px; color: #b8861d; text-decoration: none; margin-top: 2px; opacity: 1; }
.topref { display: none; }
@media (max-width: 560px) { .road { height: 140px; } .stop-l { margin-top: 26px; } .stop-l .stop-n { height: 22px; font-size: 13px; } }
.stop-l { margin-top: 36px; } @media (max-width: 560px) { .stop-l { margin-top: 32px; } .road { height: 146px; } }
.stop-l { margin-top: 42px; } @media (max-width: 560px) { .stop-l { margin-top: 36px; } .road { height: 150px; } }
.q-t b, .topline { white-space: nowrap; } @media (max-width: 400px) { .topline { font-size: 11px; } .quest .q-t > span { display: none; } }
/* the three perks on one line (owner 10-19): the same 64 px icon box, centred both ways; the same rows below; a bigger heading */
.perks-h { font-size: 19px; letter-spacing: .5px; margin-bottom: 4px; }
.perk { display: grid; grid-template-rows: 64px auto auto; justify-items: center; align-content: start; gap: 4px; padding: 0; margin: 0; }
.perk .art { height: 64px; width: 64px; display: grid; place-items: center; }
.perk-btn { font: inherit; line-height: inherit; color: inherit; appearance: none; -webkit-appearance: none; }
.perk b { font-size: 16px; line-height: 1.2; }
.perk span:last-child, .perk-btn span:last-child { font-size: 15px; line-height: 1.2; }
@media (max-width: 400px) { .perk .art { width: 52px; height: 52px; } .perk { grid-template-rows: 52px auto auto; } .perk b { font-size: 13px; } .perk span:last-child { font-size: 13px; } .perks-h { font-size: 17px; } }
.perk b { white-space: nowrap; } @media (max-width: 370px) { .perk b { font-size: 12px; letter-spacing: 0; } }
/* three equal tiles: the same width, the same gap, centred (owner 10-19: the spacing looked uneven with labels of different lengths) */
.perks { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; justify-items: stretch; }
.perk { background: rgba(36, 22, 15, .32); border-radius: 12px; padding: 10px 4px 12px; }
.view { padding-bottom: 24px; }
/* the poster cropped to its paper fills its column (owner 10-19: a bit bigger, less empty space) */
.hero-card canvas, .stage .hero-card canvas, .stage.done .hero-card canvas, .stage.mine .hero-card canvas, .nboard .hero-card canvas { height: auto !important; aspect-ratio: 932 / 1258; }
@media (min-width: 1101px) { .nboard .hero-card canvas { width: 350px; } }
@media (max-width: 1100px) and (min-width: 761px) { .nboard .hero-card canvas { width: 310px; } }
/* who invited you: a confirmation, or one optional field */
.invited { display: grid; justify-items: center; gap: 6px; margin-top: -4px; color: #fff3d6; font-size: 16px; text-shadow: 0 2px 0 #24160f; }
.invited:empty { display: none; }
.inv-ok b { font-family: var(--font-btn); font-weight: 400; color: #f3c440; }
.inv-open { color: #fff3d6; font-size: 15px; opacity: .85; }
.inv-open[hidden], .inv-row[hidden] { display: none; }
.inv-row { display: grid; gap: 4px; width: min(260px, 100%); }
.at.small { min-height: 40px; } .at.small input { font-size: 17px; padding: 6px 0; } .at.small > span { font-size: 17px; }
.inv-row .err:empty { display: none; }
/* log in with your wallet; the game card before launch; the wallet picker */
.relog { text-align: center; color: #fff3d6; font-size: 15px; text-shadow: 0 2px 0 #24160f; margin-top: -6px; }
.relog .linkish { color: #f3c440; font-size: 15px; opacity: 1; }
#v-login-err:empty { display: none; }
.gate { display: flex; align-items: center; gap: 12px; justify-content: center; background: rgba(36, 22, 15, .45); border: 2px dashed rgba(243, 196, 64, .6); border-radius: 12px; padding: 10px 14px; color: #fff3d6; }
.gate span { display: grid; } .gate b { font-family: var(--font-btn); font-weight: 400; font-size: 18px; color: #f3c440; } .gate em { font-style: normal; font-size: 15px; }
a.btn#play { text-decoration: none; display: grid; place-items: center; }
.wpick { display: grid; gap: 8px; } .wp { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--parch); border: 3px solid #24160f; border-radius: 12px; box-shadow: 0 3px 0 #24160f; cursor: pointer; font: inherit; } .wp img { width: 28px; height: 28px; } .wp b { font-family: var(--font-btn); font-weight: 400; font-size: 17px; }
.recover .linkish { justify-self: center; }
.recover .btn.full { font-size: 18px; }
/* small text links keep their look but get a 40 px hit area (UI review) */
.linkish { position: relative; }
.linkish::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 40px; transform: translateY(-50%); }
.pitch-h .who .linkish { margin-left: 6px; }
@media (max-width: 400px) { .stage.done .hero-card canvas { width: min(40vw, 150px); } .stage.done .inbadge { font-size: 32px; } .stage.done .gate { padding: 8px 12px; } }
@media (max-height: 700px) and (max-width: 760px) { .stage.done .hero-card canvas { width: min(32vw, 120px); } .stage.done .pitch { gap: 7px; } .stage.done .inbadge { font-size: 28px; } }
.ts-legal { margin: 2px 4px 0; font-size: 12px; line-height: 1.4; text-align: center; color: #5b3a1f; } /* the sale line (B1): 12 px, #5b3a1f on the parchment is about 8:1 */
/* contrast (review C, B3): small gold text on the panel brown was 3.6-3.8:1; this lighter gold is 4.6-4.9:1 on #8a5330 / #8b5a2b and 7:1 on the wood, and still reads as gold.
   Display text with a heavy ink stroke keeps the brand gold. */
:root { --gold-text: #ffe38a; }
.pitch-h .tag, .pitch .line b, .crowd b, .who-is b, .relog .linkish, .chip b, .tchip b, .tchip u, .goal-t span, .tier-n, .rung-at, .foot a, .foot-x, .gate b, .topref b, .inv-ok b, .countdown, .tix-chip b { color: var(--gold-text); }
.pitch-h .linkish { opacity: 1; } /* "log out" at .7 was 3.75:1 */
/* touch targets on phones (review C, B4): every tap target reaches 44 px. The tab planks grow a little; the ticket chip, the X pill and the footer pills
   keep their look and get an invisible hit area. */
@media (max-width: 760px) {
  .plank { padding-top: 12px; padding-bottom: 12px; }
  .tix-chip, .topright .xpill, .foot > a, .foot > button { position: relative; }
  .tix-chip::after, .topright .xpill::after, .foot > a::after, .foot > button::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}
.linkish::after { height: 44px; }

/* tablets and small laptops (761-1240): the sign is 471 px wide in the middle, so the top-right pair stacks in a column on the right
   edge instead of running into it (UI pass 10-20: it overlapped from 761 to 1180). Under 940 there's no room for the words: coin + count,
   X mark only (the phone look). Under 900 the poster column narrows so CLAIM MY POSTER and the three perks fit inside the board. */
@media (max-width: 1480px) and (min-width: 761px) { /* 1480: with LOG IN the row is ~470 px and met the sign up to ~1415 */
  .topright { flex-direction: column; align-items: flex-end; gap: 8px; }
}
@media (max-width: 940px) and (min-width: 761px) {
  .topright .tix-chip #tix-chip-t, .topright .xpill .h { display: none; }
  .topright .tix-chip b[hidden] { display: inline; }
  .topright .xpill { padding: 0 12px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .nboard { grid-template-columns: 250px minmax(0, 1fr); }
  .nboard .hero-card canvas { width: 250px; }
  .perk b { font-size: 14px; letter-spacing: 0; }
}

/* who invited you (owner 10-20): a second field under the @, always there and plainly optional; smaller than the @ so the order reads */
.claimbox .invited { display: grid; justify-items: stretch; gap: 4px; margin: 0; }
.claimbox .at.inv { min-height: 52px; } /* the @ field's own colours (owner 10-20: one look for both) */
.claimbox .at.inv input { font-size: 20px; padding: 8px 0; }
.claimbox .invited .err:empty { display: none; }
.claimbox .inv-ok { text-align: center; padding: 4px 0; }
/* LOG IN (owner 10-20: bigger, easy to find): top right with the tickets and X on tablets and desktops, the first thing a returning
   player looks for; on a phone the sign owns the top, so it's a real button in the panel under CLAIM */
.login-chip { pointer-events: auto; display: flex; align-items: center; gap: 7px; height: 44px; box-sizing: border-box; padding: 0 14px 0 10px; cursor: pointer;
  background: #3d8bff; color: #fff; border: 3px solid #24160f; border-radius: 10px; box-shadow: inset 0 3px 0 #8fbcff, inset 0 -3px 0 #1f5fc4, 0 4px 0 #24160f;
  font-family: var(--font-btn); font-size: 15px; letter-spacing: .4px; line-height: 1; -webkit-text-stroke: 3px #24160f; paint-order: stroke fill; } /* blue (owner 10-22): the 'connect wallet' colour, the only blue on the page; everyone should connect */
.login-chip .wg { width: 22px; height: 22px; flex: none; }
.login-chip:hover { transform: translateY(-1px); }
.login-chip:active { transform: translateY(2px); box-shadow: inset 0 3px 0 #8fbcff, 0 2px 0 #24160f; }
.login-chip[hidden] { display: none; }
.relog { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 0; }
.relog .login-in { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; cursor: pointer; /* not a .btn: CLAIM stays the one big path */
  background: var(--parch); color: var(--ink); border: 3px solid var(--ink); border-radius: 11px; box-shadow: inset 0 3px 0 var(--parch-hi), inset 0 -4px 0 var(--parch-lo), 0 4px 0 var(--ink);
  font-family: var(--font-btn); font-size: 15px; letter-spacing: .5px; line-height: 1; }
.relog .login-in:active { transform: translateY(2px); box-shadow: inset 0 3px 0 var(--parch-hi), 0 2px 0 var(--ink); }
.relog .login-in .wg { width: 20px; height: 20px; }
@media (min-width: 761px) { .relog { display: none; } }
@media (max-width: 760px) { .login-chip { display: none; } }
@media (max-width: 760px) { .claimbox .at.inv { min-height: 48px; } .claimbox .at.inv input { font-size: 19px; } }
/* short phones (375x667): the second field pushed CLAIM under the fold; the poster gives back the room */
@media (max-width: 760px) and (max-height: 700px) { .stage:not(.mine) .hero-card canvas { width: min(34vw, 132px); } }

/* WHAT THE BAND GETS (owner 10-20: copy the games): Supercell reward tiles. A wooden plank over them; three tiles in rarity
   colours (common green, epic purple, legendary gold), sun rays turning slowly behind the item, a dark strip with the name */
.rewards { display: grid; gap: 12px; padding-top: 6px; } /* no dashed rule over it (owner 10-20) */
.rw-h { display: flex; justify-content: center; }
.rw-h span { background: #5e3620; color: #f3c440; border: 3px solid #24160f; border-radius: 8px; padding: 6px 18px 7px; box-shadow: inset 0 3px 0 #8a5330, 0 4px 0 #24160f; /* the ROB THE RICH plank (owner 10-20: the ribbon's tails looked off) */
  font-family: var(--font-btn); font-size: 16px; letter-spacing: .6px; line-height: 1; -webkit-text-stroke: 3px #24160f; paint-order: stroke fill; white-space: nowrap; }
.rw-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rw { --c1: #5fcf6e; --c2: #2a8a3e; position: relative; display: grid; grid-template-rows: 1fr auto; overflow: hidden; border: 3px solid #24160f; border-radius: 14px;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .5), transparent 58%), linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 4px 0 #24160f, 0 8px 14px rgba(0, 0, 0, .25); }
.rw.rw-p { --c1: #b07cf2; --c2: #5b34a8; }
.rw.rw-y { --c1: #ffb43a; --c2: #c9600e; } /* orange-gold: the gold coin reads on it */
.rw::before { content: ''; position: absolute; left: 50%; top: 42%; width: 240px; height: 240px; margin: -120px 0 0 -120px; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 255, 255, .2) 0 12deg, transparent 12deg 30deg); border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%); mask: radial-gradient(circle, #000 20%, transparent 62%); animation: rwspin 24s linear infinite; }
@keyframes rwspin { to { transform: rotate(1turn); } }
.rw-art { position: relative; display: flex; align-items: center; justify-content: center; height: 92px; filter: drop-shadow(0 4px 0 rgba(36, 22, 15, .45)); }
.rw-lab { position: relative; display: grid; gap: 2px; justify-items: center; text-align: center; padding: 7px 4px 8px; background: rgba(24, 14, 9, .62); border-top: 2px solid rgba(36, 22, 15, .8); }
.rw-lab b { font-family: var(--font-btn); font-weight: 400; font-size: 15px; letter-spacing: .3px; line-height: 1.1; color: #fff3d6; -webkit-text-stroke: 3px #24160f; paint-order: stroke fill; white-space: nowrap; }
.rw-lab span { font-size: 14px; line-height: 1.15; color: #f1e3bf; }
.rw:hover .rw-art { transform: translateY(-2px); transition: transform .15s; }
@media (max-width: 400px) { .rw-row { gap: 7px; } .rw-art { height: 74px; } .rw-art .spr { transform: scale(.85); } .rw-lab b { font-size: 12px; letter-spacing: 0; } .rw-lab span { font-size: 12px; } .rw-h span { font-size: 14px; } }
@media (max-width: 900px) and (min-width: 761px) { .rw-lab b { font-size: 13px; letter-spacing: 0; } }
@media (prefers-reduced-motion: reduce) { .rw::before { animation: none; } }
/* the far corner is LOG IN at every width (owner 10-20, where apps keep "connect"); in the one-row layout it moves to the end */
@media (min-width: 1481px) { .topright .login-chip { order: 3; } }
/* narrow phones: EARLY ACCESS fits its tile (it was cut at 375) */
@media (max-width: 400px) { .rw-lab { padding-left: 2px; padding-right: 2px; } .rw-lab b { font-size: 11px; -webkit-text-stroke-width: 2px; } }
@media (max-width: 350px) { .rw-lab b { font-size: 10px; } .rw-lab span { font-size: 11px; } }
@media (max-width: 760px) { .nboard > .pitch { justify-self: stretch; } } /* the panel takes the board width on phones (the crowd line used to stretch it) */
.nboard .promise { text-align: center; } /* centred over the fields, like everything under it (owner 10-20) */

/* passkeys (owner 10-20): the done screen's "Save your login" row and the LOG IN sheet's two choices */
.pksave { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: rgba(24, 14, 9, .45); border: 2px solid rgba(241, 227, 191, .25); border-radius: 12px; padding: 8px 10px; color: #fff3d6; }
.pksave .kg { color: #f3c440; }
.pksave span { display: grid; gap: 1px; }
.pksave b { font-family: var(--font-btn); font-weight: 400; font-size: 16px; color: #f3c440; -webkit-text-stroke: 2px #24160f; paint-order: stroke fill; }
.pksave em { font-style: normal; font-size: 14px; line-height: 1.2; }
.pksave + .err:empty { display: none; }
.lg-opt { display: flex; align-items: center; justify-content: center; gap: 10px; }
.lg-opt .kg, .lg-opt .wg { width: 26px; height: 26px; flex: none; }
.lg-h { text-align: center; font-family: var(--font-btn); font-size: 26px; line-height: 1; color: var(--gold); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; padding: 4px 40px 4px; } /* .ts-h is hidden sheet-wide (tickets v2) */
#h-more:not(:empty) ~ .relog, #h-more:not(:empty) ~ #v-login-err { display: none; } /* the "is in the Band" box has its own log-in buttons */
.tsheet .lg-opt { box-sizing: border-box; width: 100%; min-width: 0; white-space: nowrap; } /* 375: the labels stay inside the sheet */
.tsheet #lg-err:empty { display: none; }
@media (max-width: 420px) { .tsheet .lg-opt { font-size: 17px; padding-left: 10px; padding-right: 10px; gap: 8px; } .tsheet .lg-opt .kg, .tsheet .lg-opt .wg { width: 22px; height: 22px; } }
.pitch:has(#h-more:not(:empty)) .claimbox .invited { display: none; } /* an existing member: no invite field */

/* review 10-20 (mac-cb) #1: the tickets sheet on phones. Its grid column took the widest quest row's max-content (360 px at 375), so
   the road, the quests and the sale line ran past the sheet; the column is the sheet's width now and the quest text may wrap */
.tsheet { grid-template-columns: minmax(0, 1fr); }
.quest { grid-template-columns: 32px minmax(0, 1fr) auto auto; }
@media (max-width: 400px) { .quest { grid-template-columns: 26px minmax(0, 1fr) auto auto; } }
.q-t { min-width: 0; }
@media (max-width: 430px) { .q-t b, .topline { white-space: normal; line-height: 1.15; } }
/* #2: the done poster at 761-900: the done-state 360 px canvas overflowed the 250 px column off the left of the screen */
@media (max-width: 900px) and (min-width: 761px) { .stage.done .nboard .hero-card canvas { width: 250px; height: auto; } }
@media (max-width: 1100px) and (min-width: 901px) { .stage.done .nboard .hero-card canvas { width: 310px; height: auto; } } /* the same at 901-1100: 360 px in a 330 px column covered the board edge */
/* review 10-20 (mac-cb): 44 px tap targets on phones: the quests' INVITE / GO (34), the sheet's x (40), SAVE (42) */
@media (max-width: 760px) {
  .quest .btn.small, .pksave .btn.small { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .ts-x { width: 44px; height: 44px; }
}
@media (max-width: 430px) { .pksave b { white-space: nowrap; font-size: 15px; } .pksave { gap: 8px; padding: 8px; } }

/* review 10-20 (mac-cb) batch 2 */
/* 1: an error on the wooden boards was #9a2a22 on wood (1.2:1): a parchment pill, about 7:1 */
.page-card .err:not(:empty), .board .err:not(:empty) { justify-self: center; background: var(--parch-hi); color: var(--red-lo); border: 2px solid #24160f; border-radius: 8px; padding: 6px 10px; text-shadow: none; font-size: 16px; line-height: 1.3; }
/* 4: the trail's stone labels were 7 px on phones */
@media (max-width: 400px) { .stone span { font-size: 9px; letter-spacing: 0; } .topline { font-size: 12px; } }
@media (max-width: 350px) { .stone span { font-size: 8px; } }
/* 5a: one "is it you" line at a time */
.pitch:has(#h-more:not(:empty)) #h-who { display: none; }
/* 5c */
.recover .code .nw { white-space: nowrap; }
/* 8: 44 px fields and buttons on the boards (phones) */
@media (max-width: 760px) { .board .field input, .board .inp input, .board .inp .btn, .board select { min-height: 44px; } }
/* review 10-20 (mac-cb): a reviewed whitelist application can't change: its fields read as locked, not live */
.board input:disabled, .board textarea:disabled, .page-card input:disabled, .page-card textarea:disabled { background: var(--parch-lo); color: rgba(27, 20, 16, .6); border-style: dashed; cursor: default; }

/* Save your login as a slim chip under PLAY (owner 10-20: on phones the old row sat under the fold) */
.pkchip { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 12px; cursor: pointer; background: rgba(24, 14, 9, .45); border: 2px solid rgba(241, 227, 191, .3); border-radius: 12px; color: #fff3d6; font-family: var(--font-btn); font-size: 15px; letter-spacing: .3px; }
.pkchip .kg { width: 20px; height: 20px; color: #f3c440; flex: none; }
.pkchip b { font-weight: 400; color: #f3c440; font-size: 18px; line-height: 1; }
.pkchip:hover { border-color: #f3c440; }
.pkchip + .err:empty { display: none; }
/* phones: the done panel uses the board's width (18 px side padding on top of the board's 12 left the ticket line and the chip wrapping),
   the chip stays one line; short phones: a smaller poster, so PLAY and the chip are both on the first screen at 375x667 */
@media (max-width: 760px) { .stage.done .pitch { padding-left: 4px; padding-right: 4px; } .pkchip span { white-space: nowrap; } }
@media (max-width: 400px) { .pkchip { font-size: 14px; } }
@media (max-height: 700px) and (max-width: 760px) { .stage.done .hero-card canvas { width: min(28vw, 104px); } }

/* a connected wallet that hasn't joined (owner 10-21): the chip shows its short address with its colour dot */
.login-chip.conn .wg { display: none; } .login-chip.conn::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--wdot, #3fa34d); border: 2px solid #24160f; flex: none; }
.login-chip.conn span { font-family: var(--font-ui, inherit); letter-spacing: 0; }

/* the connected wallet's sheet (owner 10-21) */
.cn-addr { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-btn); font-size: 22px; color: var(--ink); }
.cn-addr i { width: 18px; height: 18px; border-radius: 50%; background: var(--wdot); border: 3px solid var(--ink); flex: none; }
.cn-say { opacity: .85; font-size: 16px; line-height: 1.3; }
.cn-links { display: flex; justify-content: center; gap: 22px; }
.cn-links .linkish { color: var(--ink); }

/* ================================================================== the onboarding panel, redistributed (owner 10-21: "looks too empty";
   nothing new, what's there spread over the board, a little motion, the quest-board feel of a top game). On a computer the column
   stretches to the poster's height: OUTLAW No. N is the headline, the trail under it, the step card takes the middle, the
   @handle · log out line sits at the foot. The stones and the card's type grow a size. */
@media (min-width: 761px) {
  .stage.mine:not(.done) .nboard .pitch { align-self: stretch; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px; padding: 2px 4px 0 8px; }
  .stage.mine:not(.done) .nboard .pitch-h { display: contents; }
  .stage.mine:not(.done) .nboard .pitch-h .tag { grid-row: 1; font-family: var(--font-btn); font-size: 30px; line-height: 1; letter-spacing: .3px; color: var(--gold); -webkit-text-stroke: 3px #24160f; paint-order: stroke fill; text-shadow: 0 3px 0 #24160f; }
  .stage.mine:not(.done) .nboard .pitch-h .who { grid-row: 4; justify-self: center; font-size: 16px; text-shadow: 0 2px 0 #24160f; }
  .stage.mine:not(.done) .nboard .trail { grid-row: 2; }
  .stage.mine:not(.done) .nboard .qcard { grid-row: 3; align-self: stretch; align-content: center; gap: 12px; padding: 18px 18px 20px; }
  .stone i { width: 46px; height: 46px; font-size: 20px; } .stone i svg { width: 24px; height: 24px; } .stone span { font-size: 10px; }
  .trail ol::before { top: 24px; }
  .qt { font-size: 28px; } .qh { font-size: 18px; }
  .qtile { padding: 16px 6px 14px; gap: 6px; } .qtile svg { width: 36px; height: 36px; } .qtile b { font-size: 17px; }
}
/* the motion: the path's dashes march toward the loot, the outlaw bobs on his stone (two frames), the sack shakes every 5 s */
@media (prefers-reduced-motion: no-preference) {
  .trail ol::before { border-top: 0; height: 4px; background: repeating-linear-gradient(90deg, rgba(36, 22, 15, .55) 0 8px, transparent 8px 16px); animation: march 1.1s linear infinite; }
  @keyframes march { to { background-position: 16px 0; } }
  .walker .spr { animation: wbob .7s steps(1) infinite alternate; }
  @keyframes wbob { to { transform: translateY(-3px); } }
  .loot .spr { transform-origin: 50% 20%; animation: sackwig 5s ease-in-out infinite; }
  @keyframes sackwig { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-7deg); } 93% { transform: rotate(6deg); } 97% { transform: rotate(-3deg); } }
}
/* short windows (1280x720): a 320 px poster keeps the whole board on the first screen (it scrolled 37 px) */
@media (min-width: 1101px) and (max-height: 760px) {
  .nboard { grid-template-columns: 320px minmax(0, 1fr); }
  .nboard .hero-card canvas, .stage.done .nboard .hero-card canvas { width: 320px; }
  .view { padding-bottom: 10px; }
}
/* short phones (375x667): a smaller poster over the track, less air under the board (it scrolled 33–38 px) */
@media (max-width: 760px) and (max-height: 700px) {
  .stage.mine:not(.done) .hero-card canvas { width: min(26vw, 98px); }
  .view { padding-bottom: 8px; }
  .nboard { padding-top: 14px; }
}
/* the tall cards (the paste field under POST; the wallet chip while we read the post) in a short window: the column goes compact, one header line again */
@media (min-width: 761px) and (max-height: 760px) {
  .stage.mine:not(.done) .nboard .pitch:has(.qcard.tall) .pitch-h { display: flex; grid-row: 1; }
  .stage.mine:not(.done) .nboard .pitch:has(.qcard.tall) .pitch-h .tag { font-family: var(--font-stamp); font-size: 12px; letter-spacing: 1px; -webkit-text-stroke: 0; text-shadow: 0 2px 0 #24160f; }
  .stage.mine:not(.done) .nboard .pitch:has(.qcard.tall) .trail { grid-row: 2; } .stage.mine:not(.done) .nboard .pitch:has(.qcard.tall) .qcard { grid-row: 3; }
  .stage.mine:not(.done) .nboard .pitch:has(.qcard.tall) { grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; }
  .stage.mine:not(.done) .nboard .pitch:has(.qcard.tall) .qcard { gap: 8px; padding: 14px 16px; }
  .stage.mine:not(.done) .nboard .pitch:has(.qcard.tall) .qt { font-size: 24px; } .stage.mine:not(.done) .nboard .pitch:has(.qcard.tall) .qh { font-size: 16px; }
  .stage.mine:not(.done) .nboard:has(.qcard.tall) { padding-top: 18px; padding-bottom: 14px; }
}
@media (min-width: 1101px) and (max-height: 760px) { .rw-art { height: 76px; } .rw-art .spr { transform: scale(.85); } } /* the visitor's board on the first screen too (it scrolled 13 px at 1280x720) */
.ts-acct { margin: 12px 0 0; text-align: center; font-size: 14px; color: rgba(27, 20, 16, 0.7); } .ts-acct .linkish { font-size: 14px; }

/* the done screen at computer widths (owner 10-21: YOU'RE IN, the number, PLAY and the Face ID chip, nothing else; mac-cb: the column held
   242 px of content centred in 498, the same air the owner called too empty on the track). Spread like the track (f8a45c9), nothing new:
   YOU'RE IN and the number high, PLAY in the middle, the Face ID chip at the foot. Phones keep their stack (they fit exactly). */
@media (min-width: 761px) {
  .stage.done .nboard .pitch { align-self: stretch; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 6px; }
  .stage.done .nboard .inbadge { grid-row: 1; align-self: start; }
  .stage.done .nboard .line { grid-row: 2; align-self: start; }
  .stage.done .nboard #play, .stage.done .nboard .gate { grid-row: 3; align-self: center; }
  .stage.done .nboard .pkchip { grid-row: 4; align-self: end; }
}

/* ================================================================== owner 10-22 on f8a45c9 (1): the marching dashes showed through the 'next'
   stones (their fill was translucent) and the sack sat small and low. Opaque stones; the sack a stop's size, centred on the line, the line
   stops before it, the ticket badge on its corner. */
.stone.next i { background: #b5a98a; color: rgba(36, 22, 15, .55); }
.trail ol::before { right: 58px; }
.loot b { bottom: 0; right: 0; }
@media (min-width: 761px) { .loot { margin-top: 2px; } .loot .spr { zoom: 1.333; } }
@media (max-width: 760px) { .loot { margin-top: 3px; } }
/* (2): SUPPORT as a task list, the way games and apps list tasks (Hamster Kombat's Earn, Brawl Stars quests): one row per task, its icon, what
   it is, where it opens, and its state as the button (OPEN ↗ → OPENED ✓); the count and a bar on top; the first open task's button is the
   green one (one primary at a time). Same ids, same handler, the step beat unchanged. */
.qtop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qprog { font-family: var(--font-btn); font-size: 16px; color: rgba(27, 20, 16, .7); white-space: nowrap; } .qprog b { font-weight: 400; font-size: 22px; color: var(--green-lo); }
.qbar { height: 10px; border: 2px solid #24160f; border-radius: 999px; background: rgba(36, 22, 15, .12); overflow: hidden; margin-top: -4px; }
.qbar i { display: block; height: 100%; width: 0; background: linear-gradient(#9be08a, var(--green) 55%, #4fae4f); transition: width .35s ease-out; }
.qlist { display: grid; gap: 8px; }
.qtile.row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px 7px 9px; min-height: 54px; text-align: left; background: var(--parch); border-width: 2px; border-radius: 12px; box-shadow: none; transform: none; transition: none; }
.qtile.row .qic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--parch-hi); border: 2px solid #24160f; }
.qtile.row .qic svg { width: 20px; height: 20px; } .qtile.row .qic svg:last-child { display: none; }
.qtile.row .ql { display: grid; line-height: 1.15; min-width: 0; } .qtile.row .ql b { font-family: var(--font-btn); font-weight: 400; font-size: 17px; } .qtile.row .ql small { font-size: 13px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtile.row em { font-style: normal; font-family: var(--font-btn); font-size: 14px; letter-spacing: .5px; padding: 7px 12px 8px; border-radius: 10px; border: 2px solid #24160f; background: var(--parch-hi); color: var(--ink); box-shadow: 0 3px 0 #24160f; opacity: 1; white-space: nowrap; transition: transform .07s; }
.qtile.row.primary em { background: var(--green); }
.qtile.row:active { transform: none; box-shadow: none; } .qtile.row:active em { transform: translateY(2px); box-shadow: 0 1px 0 #24160f; }
.qtile.row.opened { background: #e3edd0; transform: none; box-shadow: none; }
.qtile.row.opened .qic { background: var(--green); } .qtile.row.opened .qic svg:first-child { display: none; } .qtile.row.opened .qic svg:last-child { display: block; }
.qtile.row.opened em { background: none; border-color: transparent; box-shadow: none; color: var(--green-lo); font-family: var(--font-stamp); font-size: 9px; letter-spacing: 1px; padding: 8px 4px; }
.qtile.row[data-wait] { opacity: .6; } .qtile.row[data-wait] em { background: var(--parch); box-shadow: none; }
.qtile.row.pop .qic { animation: stonelit .26s ease-out; }
@media (max-width: 760px) { .qtile.row { min-height: 48px; padding: 5px 6px 5px 7px; gap: 8px; } .qtile.row .qic { width: 32px; height: 32px; } .qtile.row .ql b { font-size: 16px; } .qtile.row em { font-size: 13px; padding: 6px 10px 7px; } .qlist { gap: 6px; } }
@media (max-width: 760px) and (max-height: 700px) { .qtile.row { min-height: 44px; } .qlist { gap: 5px; } .qbar { display: none; } .qcard[data-step="1"] { gap: 8px; } }
.qtile.row.opening em { background: var(--parch); box-shadow: none; transform: translateY(2px); font-family: var(--font-ui); font-size: 13px; letter-spacing: 0; opacity: .8; }
/* short windows: the rows tighten so the whole board stays on the first screen (1280x720 scrolled 28 px, 375x667 20 px) */
@media (min-width: 761px) and (max-height: 760px) { .qtile.row { min-height: 46px; padding: 5px 8px 5px 9px; } .qlist { gap: 6px; } .stage.mine:not(.done) .nboard .qcard[data-step="1"] { gap: 10px; padding: 14px 16px 16px; } }
@media (max-width: 760px) and (max-height: 700px) { .qtile.row { min-height: 40px; } .qtile.row .ql small { display: none; } .qcard[data-step="1"] { padding: 12px 10px 10px; } .qtile.row .qic { width: 30px; height: 30px; } }
@media (max-width: 760px) and (max-height: 700px) { .stage.mine:not(.done) .hero-card canvas { width: min(24vw, 90px); } } /* 375x667 with the task rows: 667 of 667 */
.qtile.row { justify-items: start; } /* the labels sit left; .qtile centred its tile content */
@media (max-width: 760px) and (max-height: 700px) { .stage.mine:not(.done) .nboard { padding-top: 12px; } }
@media (min-width: 761px) { .qtile.row .ql b { font-size: 19px; } .qtile.row .ql small { font-size: 14px; } } /* a size up against the 28 px card title (mac-f1) */
@media (min-width: 761px) and (max-height: 760px) { .qtile.row .ql b { font-size: 17px; } .qtile.row .ql small { font-size: 13px; } } /* 1280x720 keeps the first screen */

/* ================================================================== UX audit 10-22 (mac-f1's fresh-eyes walk), the landing's side */
/* 6: a handle that doesn't parse: the field outlined red, the error right under it */
.claimbox .at input.bad { box-shadow: 0 0 0 3px rgba(229, 68, 58, .6); }
.claimbox > .err:not(:empty) { margin-top: -4px; }
/* 4: on a computer the "Is this you?" line floats under CLAIM instead of growing the board (1280x720 scrolled 33 px when it appeared) */
.claimbox { position: relative; }
@media (min-width: 761px) { .claimbox .who-is { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; min-height: 0; } }
/* ...and while it shows it takes the WHAT THE BAND GETS plank's place (owner 10-22: the two overlapped); the tiles stay, nothing moves; not once a box fills #h-more (taken, started, prove it: mac-cb) */
@media (min-width: 761px) { .claimbox:has(#h-who:not(:empty)) ~ #h-more:empty ~ .rewards .rw-h { visibility: hidden; } }
/* 7: the check runs with live dots */
.dots::after { content: ''; display: inline-block; width: 1.4em; text-align: left; animation: dots 1.2s steps(1) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
#s-wait { text-align: center; margin-top: -2px; }
/* 7: the copied pill never breaks the step on a phone */
@media (max-width: 400px) { .copied { font-size: 8px; padding: 2px 5px; } .qsteps li { font-size: 16px; } }
/* 8: the log-out sheet */
.ask-line { text-align: center; opacity: .8; margin: 2px 0 6px; }
.tsheet .btn.red.full + .btn.parch.full { margin-top: 2px; }
/* 10: the tickets sheet: the close button clear of the prize card on phones; the link on cream in ink, not gold */
@media (max-width: 760px) { .hero-prize { margin-right: 48px; } }
.quest .topline { color: #6b3f22; opacity: 1; }
/* 11: a focus ring the board's colour on everything that takes the keyboard (the chips and the X pill had outline none) */
.plank:focus-visible, .tix-chip:focus-visible, .xpill:focus-visible, .login-chip:focus-visible, .btn:focus-visible, .qtile:focus-visible, .linkish:focus-visible, .toggle:focus-visible, .ts-x:focus-visible, .tix:focus-visible, .pkchip:focus-visible { outline: 3px solid #f3c440; outline-offset: 2px; }
/* 12: the collab toggles read left, two-line or one; five never leave an orphan (the last one spans the row) */
.toggle { text-align: left; } .toggles .toggle:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* 13: the top-right chips are one plank style at one width, LOG IN the only accent; the walker stands clear of his stone's number */
@media (min-width: 761px) { .topright .tix-chip, .topright .xpill, .topright .login-chip { min-width: 190px; justify-content: center; } } /* a computer: one width; a phone keeps its small pill */
.topright .xpill { background: #8a5330; color: #fff3d6; border: 3px solid #24160f; box-shadow: inset 0 3px 0 #b07a4a, 0 4px 0 #24160f; }
.topright .xpill .xg { color: #fff3d6; }
.walker { top: -6px; }
/* 2: a visitor's phone chip shows the coin alone, never a bare 0 */
@media (max-width: 760px) { .planks .tix-chip b[hidden] { display: none; } }
@media (max-width: 560px) { .road { height: 122px; } } /* 10: ~80 px of dead cream sat under the ladder's labels on phones */

/* under PLAY, one quiet line on what the game asks first (mac-aa's handover note: the game opens with '3 STEPS · THEN REAL RAIDS OPEN') */
.playwrap { display: grid; gap: 8px; }
.next-line { text-align: center; font-size: 15px; line-height: 1.25; color: #fff3d6; opacity: .85; text-shadow: 0 2px 0 #24160f; }
@media (min-width: 761px) { .stage.done .nboard .playwrap { grid-row: 3; align-self: center; } .next-line { font-size: 16px; } }
@media (max-width: 760px) { .playwrap { gap: 6px; } .next-line { font-size: 14px; } }
@media (max-height: 700px) and (max-width: 760px) { .stage.done .hero-card canvas { width: min(24vw, 90px); } .next-line { font-size: 13px; } } /* 375x667: the line fits under PLAY */
.stage.done .nboard .playwrap > #play, .stage.done .nboard .playwrap > .next-line { grid-row: auto; } /* inside the wrapper PLAY is first, the line under it (the column's grid-row: 3 reached in) */

/* ================================================================== the done screen on a computer (owner 10-22: 'VERY empty' on a laptop) */
/* what PLAY opens, as two tiles under it (Raid · Build) (the reward tiles' family: wood, rays, the dark label strip); phones keep the one line */
.nx { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nx li { position: relative; display: grid; border: 3px solid #24160f; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #a8774a, #6b4126 72%); box-shadow: inset 0 3px 0 rgba(255, 243, 214, .14), 0 4px 0 #24160f;
  animation: nx-in .38s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(.35s + var(--d) * .12s); }
.nx-art { display: flex; align-items: flex-end; justify-content: center; height: 96px; padding-bottom: 8px; filter: drop-shadow(0 3px 0 rgba(36, 22, 15, .45)); }
.nx b { display: block; text-align: center; padding: 6px 4px 7px; background: rgba(24, 14, 9, .62); border-top: 2px solid rgba(36, 22, 15, .8); font-family: var(--font-btn); font-weight: 400; font-size: 13px; letter-spacing: .2px; line-height: 1.1; color: #fff3d6; -webkit-text-stroke: 3px #24160f; paint-order: stroke fill; white-space: nowrap; }
.nx i { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); border: 2px solid #24160f; font: 400 13px/1 var(--font-btn); font-style: normal; color: #24160f; }
@keyframes nx-in { from { opacity: 0; transform: translateY(10px) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .nx li { animation: none; } }
@media (max-width: 760px) { .nx { display: none; } }
@media (min-width: 761px) { .nx-say { display: none; } }
@media (max-width: 1100px) and (min-width: 761px) { .nx { gap: 7px; } .nx b { font-size: 11px; letter-spacing: 0; -webkit-text-stroke-width: 2px; } .nx-art { height: 76px; padding-bottom: 6px; } .nx-art .spr { transform: scale(.8); transform-origin: 50% 100%; } }
@media (min-width: 1101px) and (max-height: 760px) { .nx-art { height: 84px; } } /* 1280x720 keeps the first screen */

/* ================================================================== the wallet on a phone (owner 10-22: 'always display the wallet there') */
/* On a computer the chip stacks top right with the tickets and X. On a phone it sits top left, mirroring the X pill top right: an icon-only
   36 px pill over the sign's corner. Not beside X (a second pill there sits on the sign's letters at 390 and under) and not in the tab
   row (hidden mid-onboarding, full at 320). The span stays for screen readers; connected, the wallet's colour dot badges the icon */
@media (max-width: 760px) {
  .topright { left: 6px; right: 6px; justify-content: space-between; pointer-events: none; } /* the sign between the two stays tappable (home) */
  .topright .login-chip, .topright .xpill { pointer-events: auto; }
  .login-chip { display: flex; position: relative; width: 36px; height: 36px; padding: 0; gap: 0; justify-content: center; box-shadow: inset 0 2px 0 #8fbcff, inset 0 -2px 0 #1f5fc4, 0 4px 0 #24160f; }
  .login-chip[hidden] { display: none; }
  .login-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .login-chip .wg, .login-chip.conn .wg { display: block; width: 20px; height: 20px; }
  .login-chip.conn::before { position: absolute; right: -6px; bottom: -6px; width: 10px; height: 10px; border-width: 2px; }
}
.nx b small { display: block; margin-top: 3px; font: 400 12px/1.1 var(--font-ui, inherit); letter-spacing: 0; color: #f1e3bf; -webkit-text-stroke: 0; }

/* ================================================================== W4 · the tickets track (owner 10-22: "the checkpoints in the bar and the bar itself"; one design on the landing and in the game).
   Markup: .trkbox > .trk > .trk-bar > i (the fill) · .trk-node.got|next|lock (one each, + .top for the top-N stop, + .crossed for the pop) · .trk-lab (<b>number</b>word).
   The node width is --nd per context: the sheet 58, the done screen 54; smaller on short windows and phones */
.trkbox { --nd: 58px; position: relative; height: calc(var(--nd) + 108px); padding: calc(var(--nd) / 2 + 4px) 0 0; overflow: visible; min-width: 0; }
.trk { position: relative; margin: 0 10px; }
.trk-bar { position: relative; height: 20px; border: 3px solid #24160f; border-radius: 12px; background: #4a3326; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .28); }
.trk-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#8ef08e, #3fa34d); border-radius: 9px 0 0 9px; border-right: 3px solid #24160f; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.trk-bar.fill0 i { width: 0 !important; transition: none; }
.trk-node { position: absolute; top: 50%; transform: translate(-50%, -50%); width: var(--nd); height: var(--nd); border-radius: 50%; background: #fff6dc; border: 4px solid #24160f; box-shadow: 0 4px 0 #24160f; display: grid; place-items: center; z-index: 2; }
.trk-node .pix { width: calc(var(--nd) * .6); height: calc(var(--nd) * .6); }
.trk-node.got { background: #ffd45a; }
.trk-node.got::after { content: '✓'; position: absolute; right: -7px; bottom: -5px; width: 22px; height: 22px; border-radius: 50%; background: #3fa34d; color: #fff; border: 3px solid #24160f; font: 800 12px/16px system-ui, sans-serif; text-align: center; }
.trk-node.next { background: #fff; box-shadow: 0 4px 0 #24160f, 0 0 0 4px #f3c440, 0 0 18px #ffd45a; animation: trk-breathe 2.4s ease-in-out infinite; }
.trk-node.lock { background: #cdbf9f; }
.trk-node.lock .pix { opacity: .4; filter: grayscale(1); }
.trk-node.lock::after { content: ''; position: absolute; right: -5px; bottom: -4px; width: 18px; height: 18px; border-radius: 5px; background: #24160f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='2' y='1' width='6' height='1' fill='%23f3c440'/%3E%3Crect x='2' y='1' width='1' height='4' fill='%23f3c440'/%3E%3Crect x='7' y='1' width='1' height='4' fill='%23f3c440'/%3E%3Crect x='1' y='4' width='8' height='6' fill='%23f3c440'/%3E%3C/svg%3E") center / 11px no-repeat; }
.trk-node.crossed { animation: trk-pop .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes trk-breathe { 50% { box-shadow: 0 4px 0 #24160f, 0 0 0 4px #f3c440, 0 0 26px #ffd45a; } }
@keyframes trk-pop { 0% { transform: translate(-50%, -50%) scale(.8); } 60% { transform: translate(-50%, -50%) scale(1.18); } 100% { transform: translate(-50%, -50%) scale(1); } }
.trk-lab { position: absolute; top: calc(50% + var(--nd) / 2 + 6px); transform: translateX(-50%); text-align: center; font: 400 12px/1.1 var(--font-btn); letter-spacing: .3px; color: #24160f; white-space: nowrap; }
.trk-lab b { display: block; font: 400 16px/1 var(--font-btn); color: #24160f; margin-bottom: 2px; }
/* on the wooden board (the done screen) the labels are parchment with an ink stroke; the you-tag's gold holds */
.nboard .trk-lab { color: #fff3d6; -webkit-text-stroke: 2px #24160f; paint-order: stroke fill; }
.nboard .trk-lab b { color: #f3c440; }
.stage.done .nboard .trkbox { --nd: 54px; }
@media (min-width: 761px) and (max-height: 760px) { .stage.done .nboard .trkbox { --nd: 46px; } }
@media (max-width: 760px) {
  .trkbox { --nd: 42px !important; }
  .trk { margin: 0 16px; }
  .trk-lab { font-size: 8.5px; letter-spacing: 0; white-space: normal; max-width: 72px; line-height: 1.05; }
  .trk-lab b { font-size: 12px; }
  .stage.done .nboard .trk { margin: 0 26px; }
  .stage.done .nboard .trkbox { height: calc(var(--nd) + 54px); }
}
@media (max-width: 760px) and (max-height: 700px) {
  .stage.done .nboard .trkbox { --nd: 36px !important; height: calc(var(--nd) + 18px); }
  .stage.done .nboard .trk-lab { display: none; }
}
@media (prefers-reduced-motion: reduce) { .trk-node.next, .trk-node.crossed { animation: none; } .trk-bar i { transition: none; } }
/* the tickets sheet around the track (W4): the header line, the links row, the legal line revealed by Rules */
.ts-who { text-align: center; font-size: 15px; color: #6b4126; margin: 2px 0 2px; }
.ts-who b { color: var(--ink); }
#tsheet-in .trkbox { height: calc(var(--nd) + 96px); }
.ts-post { margin-top: 10px; }
.ts-links { display: flex; justify-content: center; gap: 16px; margin: 12px 0 0; font-size: 13px; }
.ts-links .linkish { color: #6b4126; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
#ts-legal { margin-top: 8px; }

/* ================================================================== W3 · the done screen without a game (Phase 1: every member ends here) */
.stage.done .nboard .dn { grid-row: 3; align-self: center; width: 100%; min-width: 0; }
.dn #dn-invite { display: grid; place-items: center; text-decoration: none; }
.dn #dn-invite.did { filter: saturate(.7); }
@media (max-width: 760px) {
  .stage.done .nboard .pitch { gap: 6px; }
  .stage.done .hero-card canvas { width: min(36vw, 128px); }
  .dn { padding: 0 6px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .stage.done .hero-card canvas { width: min(28vw, 104px); }
}

/* the phone visitor at the fold (mac-d6's Phase-1 QA, N4): at 375x667 "Already in the Band? LOG IN" sat 631-675, cut by the 667 fold. The poster
   gives back 30 px on short phones (108 px wide, from 132), so the row clears the fold at 375x667 and 360x640; at 320x568 it is fully below */
@media (max-width: 760px) and (max-height: 700px) { .stage:not(.mine):not(.done) .hero-card canvas { width: min(28vw, 108px); } }

/* ================================================================== W7 · tickets v2 (owner 10-22): the waiting line, the quest rows' states, the rules line */
.trk-wait { text-align: center; font-size: 13px; color: #6b4126; margin: -6px 0 8px; }
.trk-wait b { font-family: var(--font-btn); font-weight: 400; color: var(--ink); }
.trk-wait[hidden] { display: none; }
.nboard .trk-wait { color: #fff3d6; text-shadow: 0 2px 0 #24160f; margin: -4px 0 6px; }
.nboard .trk-wait b { color: #f3c440; }
.quest .q-state { font-family: var(--font-btn); font-size: 13px; color: var(--green-lo); background: #e4f3d8; border: 2px solid var(--green-lo); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.quest.done .q-state { background: var(--green); color: #fff; border-color: #24160f; -webkit-text-stroke: 0; }
.quest .q-state.muted { color: #6b4126; background: #efe4c8; border-color: #c9b58c; }
.ts-rule { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
.ts-rule b { font-family: var(--font-btn); font-weight: 400; }
@media (max-width: 760px) { .nboard .trk-wait { display: none; } .quest .q-state { font-size: 12px; padding: 3px 8px; } }

/* ================================================================== W8 · growth (owner 10-22 late): YOUR LINK, the fee line, the sheet tabs, the board, the done line, the Yard plank, feedback, the partner tab */
/* YOUR LINK: a parchment row; the code bold; COPY parchment, the pencil; .edit = the inline form (same row, same height + the message) */
.ylink { display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px 8px; align-items: center; background: var(--parch); border: 3px solid #24160f; border-radius: 12px; padding: 7px 8px 7px 12px; box-shadow: 0 3px 0 #24160f; min-width: 0; }
.ylink .yl-k { font: 400 10px var(--font-btn); letter-spacing: 1.2px; color: #6b4126; }
.ylink .yl-t { font-family: var(--font-ui); font-size: 15px; color: #6b4126; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ylink .yl-t b { font-family: var(--font-btn); font-weight: 400; font-size: 17px; color: var(--ink); letter-spacing: .3px; }
.ylink .btn.small { padding: 6px 12px; font-size: 14px; min-height: 0; white-space: nowrap; }
.ylink .yl-copy.did { background: #e4f3d8; }
.ylink .yl-pen { width: 32px; height: 32px; border-radius: 8px; border: 2px solid #24160f; background: #fff6dc; color: var(--ink); font-size: 15px; cursor: pointer; box-shadow: 0 2px 0 #24160f; }
.ylink .yl-pen-b { grid-column: 3 / 5; }
.ylink.edit { grid-template-columns: auto 1fr auto auto; }
.ylink .yl-f { display: flex; align-items: center; gap: 2px; min-width: 0; font-family: var(--font-ui); font-size: 15px; color: #6b4126; }
.ylink .yl-f input { flex: 1; min-width: 0; width: 100%; height: 34px; border: 3px solid #24160f; border-radius: 8px; padding: 0 8px; font: 400 17px var(--font-btn); color: var(--ink); background: #fff6dc; letter-spacing: .3px; }
.ylink .yl-f input.bad { border-color: #b23b3b; }
.ylink .yl-x { width: 32px; height: 32px; border-radius: 8px; border: 2px solid #24160f; background: #fff6dc; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 0 #24160f; }
.ylink .yl-msg { grid-column: 1 / -1; font-size: 13px; line-height: 1.3; color: #6b4126; min-height: 17px; }
.ylink .yl-msg.ok { color: var(--green-lo); }
.ylink .yl-msg.bad { color: #b23b3b; }
/* the fee line (mac-3b's wording) */
/* the sheet's tabs: two planks on the parchment, the active one lit */
.ts-pane[hidden] { display: none; }
.ts-pane .ylink { margin-bottom: 0; }
/* the board: all-time top recruiters; the top N gold-ranked; your row gold, pinned under the list when past 20 */
/* the done screen's board line, the waiting line's style */
/* the plank as the Yard's door: the plank's clothes on a link, a press; .done = parchment with the ✓ */
/* feedback, in the sheet (owner 10-22: no text; HOW FUN? + 3 gold stars, an idea line only after a tap) */
.fb { display: grid; gap: 12px; justify-items: center; padding: 6px 0 2px; }
.fb .fb-h { font: 400 20px var(--font-btn); color: var(--ink); letter-spacing: .5px; }
.fb-faces { display: flex; gap: 18px; }
.fb-face { width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; font: 400 48px/56px var(--font-ui); color: transparent; -webkit-text-stroke: 3px #b8861d; transition: transform .15s; }
.fb-face:hover { transform: scale(1.1); }
.fb-face.on { color: #f3c440; -webkit-text-stroke: 3px #24160f; animation: star-pop .3s cubic-bezier(.2, 1.4, .4, 1); }
.fb-face:disabled { cursor: default; }
@keyframes star-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.fb-idea { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: 100%; max-width: 360px; }
.fb-idea[hidden] { display: none; }
.fb-idea input { min-width: 0; height: 44px; border: 3px solid #24160f; border-radius: 10px; padding: 0 12px; font: 500 15px var(--font-ui); color: var(--ink); background: #fff6dc; }
.fb-idea .btn.small { padding: 0 14px; min-height: 44px; font-size: 18px; }
.fb .fb-back { color: #6b4126; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; font: inherit; font-size: 13px; cursor: pointer; padding: 0; }
@media (prefers-reduced-motion: reduce) { .fb-face.on { animation: none; } }
/* the info dot (fee-how, bd-how): a small round "i", never a link */
.fee-how { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; border: 2px solid #24160f; background: #fff6dc; color: #24160f; font: 700 11px/1 var(--font-ui); text-decoration: none; cursor: pointer; vertical-align: -3px; padding: 0; }
.nboard .fee-how { background: #f3c440; }
/* the collab page's two kinds, the partner lead */
.ck-tabs { display: flex; justify-content: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.ck-tab { font: 400 14px var(--font-btn); letter-spacing: .5px; color: #6b4126; background: #efe4c8; border: 3px solid #24160f; border-radius: 10px; padding: 7px 14px 8px; text-decoration: none; box-shadow: 0 3px 0 #24160f; }
.ck-tab.on { background: #f3c440; color: var(--ink); }
.pf-lead { font-size: 15px; line-height: 1.4; color: var(--ink); margin: 0 0 12px; }
.pf-fine { font-size: 13px; }
/* fit: the YOUR LINK row (52 px) + the fee line + the board line joined the done screen. The room: the sub line (gone; the fee line says it),
   the YOU tag under 760 tall on computers (the chip top-right has the count), on phones POST (the sheet's Post row) instead of the Yard plank */
@media (min-width: 761px) and (max-height: 760px) { .stage.done .nboard .trkbox { height: calc(var(--nd) + 76px); } }
@media (max-width: 760px) {
  .ylink { padding: 6px 6px 6px 10px; gap: 6px; }
  .ylink .yl-k { display: none; }
  .ylink .yl-t { font-size: 13px; } .ylink .yl-t b { font-size: 15px; }
  .ylink .btn.small { padding: 6px 10px; font-size: 13px; }
  .ylink.edit .yl-k { display: inline; }
  .stage.done .hero-card canvas { width: min(33vw, 116px); }
}
/* W8 fit, second pass (measured): the Yard plank's span wrapped on phones (57 px); under 760 tall the track box gives 16 px; 375x667 gives 16 px from the poster and the track box */
@media (min-width: 761px) and (max-height: 760px) { .stage.done .nboard .trkbox { height: calc(var(--nd) + 60px); } }
@media (max-width: 760px) and (max-height: 700px) { .stage.done .hero-card canvas { width: min(26vw, 96px); } .stage.done .nboard .trkbox { height: calc(var(--nd) + 12px); } }
@media (max-width: 760px) { .stage.done .nboard .trkbox { height: calc(var(--nd) + 46px); } }
/* the edit state on phones: YOUR CODE on its own row, the field full width (the input had no room beside the label, SAVE and ×) */
@media (max-width: 760px) { .ylink.edit { grid-template-columns: 1fr auto auto; } .ylink.edit .yl-k { grid-column: 1 / -1; } .ylink .yl-f span { font-size: 13px; } }
/* order fix: the phone track-box rule (+46) landed after the short-phone one (+12) and won at 375x667; restated last */
@media (max-width: 760px) and (max-height: 700px) { .stage.done .nboard .trkbox { height: calc(var(--nd) + 12px); } }

/* ================================================================== owner 10-22 (late): the done screen is PLAY THE TUTORIAL + INVITE A FRIEND
   (the link, board, fee line, POST and the YOU tag left it); the INVITE tab is the one referral page: link, INVITE, two counts, the board */
.dn > .btn + .btn { margin-top: 12px; }
.dn #dn-yard { display: grid; place-items: center; text-decoration: none; }
@media (max-width: 760px) { .dn > .btn + .btn { margin-top: 8px; } }
.iv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.iv-stats > div { background: #fff6dc; border: 3px solid #24160f; border-radius: 12px; padding: 8px 6px 7px; text-align: center; box-shadow: 0 4px 0 #24160f; }
.iv-stats b { display: block; font: 400 26px/1.1 var(--font-btn); color: var(--ink); }
.iv-stats span { font: 400 12px var(--font-btn); letter-spacing: .5px; color: #6b4126; }
.iv .fee-how { background: #f3c440; }
.iv-partner { justify-self: center; font: 400 14px var(--font-btn); letter-spacing: .5px; color: #fff3d6; text-shadow: 0 2px 0 #24160f; text-decoration: none; }
.iv-partner:hover { text-decoration: underline; text-underline-offset: 3px; }
#iv-share:empty { display: none; }
/* phones: five things in the nav row now (HOME · INVITE · WHITELIST · COLLAB · the ticket chip); two big buttons + the track under the poster */
@media (max-width: 760px) {
  .planks { gap: 5px; }
  .plank { padding: 7px 7px 6px; font-size: 12px; }
  .planks .tix-chip { padding: 5px 6px 4px 5px; }
  .dn .btn.big { min-height: 58px; padding-top: 8px; padding-bottom: 11px; }
  .stage.done .nboard .trkbox { margin-bottom: 6px; }
}
@media (max-width: 760px) and (max-height: 760px) {
  .stage.done .hero-card canvas { width: min(22vw, 84px); }
  .dn .btn.big { min-height: 50px; font-size: 20px; }
}

/* the road to the FREE MINT (owner 10-22 late): two stops placed by count, the last one big; a coin beside every ticket number and +1 */
.spr.tkc { display: inline-block; vertical-align: -2px; margin-left: 4px; }
.btn .plus { display: inline-flex; align-items: center; margin-left: 14px; }
.dn #dn-yard, .dn #dn-invite, #ts-invite, #iv-invite { display: flex; align-items: center; justify-content: center; } /* one line: the +1 and its coin beside the words */
.btn .plus .tkc { vertical-align: 0; margin-left: 6px; }
.trk-node.final { width: calc(var(--nd) * 1.35); height: calc(var(--nd) * 1.35); }
.trk-node.final .pix { width: calc(var(--nd) * .86); height: calc(var(--nd) * .86); }
.trk-lab.final { top: calc(50% + var(--nd) * .675 + 6px); }
.trk-lab b .tkc { vertical-align: -1px; }
.trkbox { height: calc(var(--nd) * 1.2 + 62px); padding-top: calc(var(--nd) * .7 + 4px); }
.stage.done .nboard .trkbox { --nd: 60px; height: calc(var(--nd) * 1.2 + 58px); margin-bottom: 16px; }
#tsheet-in .trkbox { height: calc(var(--nd) * 1.2 + 62px); }
@media (min-width: 761px) and (max-height: 760px) { .stage.done .nboard .trkbox { --nd: 48px; height: calc(var(--nd) * 1.2 + 54px); } }
@media (max-width: 760px) { .stage.done .nboard .trkbox { --nd: 44px !important; height: calc(var(--nd) * 1.2 + 50px); } }
@media (max-width: 760px) and (max-height: 700px) { .stage.done .nboard .trkbox { --nd: 38px !important; height: calc(var(--nd) * 1.2 + 44px); } .stage.done .nboard .trk-lab { display: block; } }
.iv-stats b small { font-size: 16px; color: #6b4126; margin-left: 2px; }
.iv-stats b .tkc { vertical-align: 1px; }
@media (max-width: 760px) {
  .trk-lab, .stage.done .nboard .trk-lab { white-space: nowrap; max-width: none; }
  .dn .btn.big, #ts-invite, #iv-invite { font-size: 19px; letter-spacing: .5px; padding-left: 12px; padding-right: 12px; }
  .btn .plus { margin-left: 8px; }
  .btn .plus .tkc { transform: scale(.75); margin-left: 2px; }
}
@media (max-width: 760px) and (max-height: 700px) { .stage.done .hero-card canvas { width: min(19vw, 72px); } .stage.done .nboard .trkbox { margin-bottom: 8px; } }
@media (max-width: 760px) and (max-height: 700px) {
  .stage.done .nboard .pitch { gap: 0; }
  .stage.done .nboard .trkbox { --nd: 34px !important; height: calc(var(--nd) * 1.2 + 42px); }
  .dn .btn.big { min-height: 46px; }
  .dn > .btn + .btn { margin-top: 6px; }
}
@media (max-width: 760px) and (max-height: 700px) { .stage.done .hero-card canvas { width: min(16vw, 60px); } .stage.done .nboard .trkbox { height: calc(var(--nd) * 1.2 + 54px); } }
/* the prize (owner 10-22 late: "the major prize… more highlighted… FOMO"): on the done screen the FREE MINT stop is a big gold chest in full
   colour, rays turning behind it and a soft pulse; FREE MINT in big gold under it, then the count toward it. The lock badge stays: not yours yet */
.stage.done .nboard .trkbox.hero { --nd: 56px; height: calc(var(--nd) * 2 + 74px); padding-top: calc(var(--nd) + 8px); margin-bottom: 14px; }
.trkbox.hero .trk-node.final { width: calc(var(--nd) * 2); height: calc(var(--nd) * 2); background: radial-gradient(circle at 50% 38%, #fff4bf, #f3c440 58%, #c98a1d); box-shadow: 0 5px 0 #24160f, 0 0 0 4px #f3c440, 0 0 34px 8px rgba(255, 212, 90, .7); animation: prize-glow 2.4s ease-in-out infinite; }
.trkbox.hero .trk-node.final .pix { width: calc(var(--nd) * 1.34); height: calc(var(--nd) * 1.34); opacity: 1; filter: drop-shadow(0 3px 0 rgba(36, 22, 15, .45)); }
.trkbox.hero .trk-node.final::before { content: ''; position: absolute; inset: -55%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 228, 130, .5) 0 9deg, transparent 9deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 28%, #000 33%, transparent 70%); mask: radial-gradient(circle, transparent 28%, #000 33%, transparent 70%);
  animation: prize-spin 16s linear infinite; }
.trkbox.hero .trk-node.final.lock::after { width: 26px; height: 26px; right: 2px; bottom: 2px; }
.trk-lab.final.pzl { top: calc(50% + var(--nd) + 8px); }
.nboard .trk-lab.final.pzl b { font-size: 30px; line-height: 1; color: #f3c440; -webkit-text-stroke: 3px #24160f; paint-order: stroke fill; letter-spacing: 1px; margin-bottom: 3px; }
.trk-cnt { display: inline-flex; align-items: center; font: 400 18px/1 var(--font-btn); color: #fff3d6; }
.trk-cnt small { font-size: 14px; opacity: .8; margin-left: 1px; }
@keyframes prize-glow { 50% { box-shadow: 0 5px 0 #24160f, 0 0 0 4px #f3c440, 0 0 52px 16px rgba(255, 212, 90, .9); } }
@keyframes prize-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .trkbox.hero .trk-node.final, .trkbox.hero .trk-node.final::before { animation: none; } }
@media (min-width: 761px) and (max-height: 760px) { .stage.done .nboard .trkbox.hero { --nd: 46px; } }
@media (max-width: 760px) { .stage.done .nboard .trkbox.hero { --nd: 40px !important; height: calc(var(--nd) * 2 + 64px); } .nboard .trk-lab.final.pzl b { font-size: 22px; } .trk-cnt { font-size: 15px; } }
@media (max-width: 760px) and (max-height: 700px) { .stage.done .nboard .trkbox.hero { --nd: 32px !important; height: calc(var(--nd) * 2 + 58px); } .nboard .trk-lab.final.pzl b { font-size: 19px; } }
.stage.done .nboard .pkchip { grid-row: 4; } /* the number line went (owner 10-22 late): row 2 is empty, the chip stays at the foot */
@media (min-width: 761px) and (max-height: 760px) { .stage.done .nboard .trkbox.hero { height: calc(var(--nd) * 2 + 64px); margin-bottom: 6px; } }
@media (max-width: 760px) { .stage.done .nboard .trkbox.hero { margin-bottom: 8px; } .trkbox.hero .trk-node.final.lock::after { width: 18px; height: 18px; right: 0; bottom: 0; } }
@media (max-width: 760px) and (max-height: 700px) { .stage.done .nboard .trkbox.hero { height: calc(var(--nd) * 2 + 50px); margin-bottom: 4px; } .stage.done .nboard .inbadge { margin-bottom: -4px; } }
@media (max-height: 760px) { .stage.done .nboard .trkbox.hero { padding-top: calc(var(--nd) * .82); } }
/* owner 10-22 late (ideas 1, 2): the road is a button (the tickets sheet: how to get them), and visitors see it where the three tiles were */
.trkbox.hero { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.trkbox.hero:hover .trk-node.final, .trkbox.hero:focus-visible .trk-node.final { transform: translate(-50%, -50%) scale(1.05); }
.trkbox.hero:focus-visible { outline: 3px solid #f3c440; outline-offset: 6px; border-radius: 12px; }
.trk-cnt i { font-style: normal; margin-left: 5px; color: #f3c440; -webkit-text-stroke: 2px #24160f; paint-order: stroke fill; }
.rewards .trkbox.hero { --nd: 46px; height: calc(var(--nd) * 2 + 70px); padding-top: calc(var(--nd) + 8px); }
@media (max-width: 760px) { .rewards .trkbox.hero { --nd: 40px !important; height: calc(var(--nd) * 2 + 62px); } .rewards .trk { margin: 0 26px; } }
@media (min-width: 1101px) and (max-height: 760px) { .rewards .trkbox.hero { --nd: 40px; height: calc(var(--nd) * 2 + 62px); } }
@media (min-width: 761px) and (max-height: 760px) { .rewards .rw-h { display: none; } .rewards .trkbox.hero { --nd: 36px; height: calc(var(--nd) * 2 + 58px); padding-top: calc(var(--nd) * .8 + 4px); } } /* 1280x720: the road fits under CLAIM without its plank */
@media (min-width: 761px) and (max-height: 760px) { .rewards .trkbox.hero { height: calc(var(--nd) * 2 + 44px); } .nboard .rewards .trk-lab.final.pzl b { font-size: 22px; } .rewards .trk-cnt { font-size: 14px; } }
@media (min-width: 761px) and (max-height: 760px) { .rewards .trkbox.hero { --nd: 32px; } }
.quest em.fm { color: #b8861d; font-size: 15px; letter-spacing: .3px; } /* the top post's prize: a FREE MINT, not tickets (owner 10-22 late) */
.quest .xq .pix { width: 28px; height: 28px; }
@media (max-width: 400px) { .quest em.fm { font-size: 12px; } }
/* the tickets sheet's road is the hero too (owner 10-22 late: "highlight more the free mint, just like in the main screen"), on parchment */
#tsheet-in .trkbox.hero { --nd: 50px; height: calc(var(--nd) * 2 + 66px); padding-top: calc(var(--nd) + 6px); cursor: default; }
#tsheet-in .trkbox.hero:hover .trk-node.final { transform: translate(-50%, -50%); }
#tsheet-in .trk-lab.final.pzl b { font: 400 28px/1 var(--font-btn); color: #f3c440; -webkit-text-stroke: 3px #24160f; paint-order: stroke fill; letter-spacing: 1px; margin-bottom: 3px; }
#tsheet-in .trk-cnt { color: #24160f; } #tsheet-in .trk-cnt i { display: none; }
@media (max-width: 760px) { #tsheet-in .trkbox.hero { --nd: 38px !important; height: calc(var(--nd) * 2 + 58px); } #tsheet-in .trk-lab.final.pzl b { font-size: 21px; } }
#tsheet-in .quests { margin-top: 12px; } #tsheet-in .ts-post { margin-top: 0; } /* the tutorial row leads now (owner 10-22 late): even gaps under INVITE */
/* the ticket icon (owner 10-22 late): one drawing everywhere a ticket shows; the chip's coin sprite gives way to it */
svg.tkt { display: inline-block; flex: none; image-rendering: pixelated; }
svg.tkc { vertical-align: -2px; margin-left: 5px; }
.btn .plus svg.tkc { vertical-align: 0; margin-left: 7px; }
.tix-chip .coin, .planks .tix-chip .coin { background: none; width: auto; height: auto; display: inline-grid; place-items: center; }
.planks .tix-chip .coin svg { width: 24px; height: 15px; }
#h-go:not([hidden]), .page-card > a.btn.big, #ts-go { display: flex; align-items: center; justify-content: center; } /* :not([hidden]): the recovery card hides JOIN */
@media (max-width: 760px) { .btn .plus svg.tkc { transform: scale(.8); margin-left: 4px; } }
/* the landing's feedback box (owner 10-23: no stars, the box open) */
.fb #fb-t { width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical; margin: 10px 0 8px; padding: 10px 12px; border: 3px solid #24160f; border-radius: 12px; background: #fff6dc; color: #24160f; font: 500 16px/1.35 inherit; font-family: inherit; }
.fb #fb-t:focus { outline: none; border-color: #3fa34d; box-shadow: 0 0 0 3px rgba(63, 163, 77, .35); }
.fb-foot { display: flex; align-items: center; justify-content: space-between; }
.fb .fb-foot { width: 100%; align-self: stretch; justify-self: stretch; gap: 12px; } .fb .fb-foot .fb-back { margin: 0; position: static; }

/* YOUR SHARE on INVITE (Phase 2, mac-ab): the member's cut of friends' tax; #iv-share:empty hides it until the first week is posted */
.iv-share { background: #fff6dc; border: 3px solid #24160f; border-radius: 12px; box-shadow: 0 4px 0 #24160f; padding: 8px 10px 9px; }
.ivs-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ivs-h b { font: 400 15px var(--font-btn); letter-spacing: .5px; color: var(--ink); }
.ivs-rate { font: 400 14px var(--font-btn); color: #fff3d6; background: #3f8a3a; border: 2px solid #24160f; border-radius: 999px; padding: 1px 9px; }
.ivs-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.ivs-cols > div { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.ivs-cols span { font: 400 11px var(--font-btn); letter-spacing: .5px; color: #6b4126; }
.ivs-cols i { font: 400 17px/1.15 var(--font-btn); font-style: normal; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ivs-cols i.alt { font-size: 14px; color: #4a3020; }
.ivs-cols em { font: 400 11px var(--font-btn); font-style: normal; letter-spacing: .5px; color: #8a5a2b; }
.ivs-cols em.ok { color: #2f7a2a; }
/* INVITE: friends as two numbers (owner 10-24: 'only show those confirmed and those pending'), one line on what counts */
.iv-stats > .iv-fr2 { display: grid; grid-template-columns: 1fr 1fr; padding: 8px 2px 7px; }
.iv-fr2 > div + div { border-left: 2px dashed #c9b48a; } .iv-fr2 .pend b { color: #8a6a3e; }
.iv-rule { margin: -2px 0 0; text-align: center; font: 400 14px var(--font-btn); letter-spacing: .3px; color: #fff3d6; text-shadow: 0 2px 0 #24160f; }
.iv-fr2 span { font-size: 11px; letter-spacing: 0; } @media (max-width: 400px) { .iv-fr2 span { font-size: 10px; } }
/* the quest path (owner 10-24 v2): ROB HOUSES — EARN TICKETS — FREE MINT, round badges on one rope */
.purpose2 { position: relative; list-style: none; margin: 18px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.purpose2::before { content: ''; position: absolute; left: 16.6%; right: 16.6%; top: 34px; height: 0; border-top: 4px dashed #f3d9a0; opacity: .75; } /* the rope between the badges */
.purpose2 .pq { position: relative; display: grid; justify-items: center; gap: 8px; }
.purpose2 .pb { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #fffaf0, #f1dfb4 72%); border: 4px solid #24160f; box-shadow: 0 4px 0 #24160f, inset 0 -4px 0 rgba(0,0,0,.08); }
.purpose2 .pi { display: grid; place-items: center; } .purpose2 .pi svg { display: block; }
.purpose2 b { font: 400 14px/1 var(--font-btn); letter-spacing: .6px; color: #fff3d6; text-shadow: 0 2px 0 #24160f, 0 0 2px #24160f; white-space: nowrap; }
.purpose2 .pq-goal .pb { background: radial-gradient(circle at 50% 38%, #fff6c8, #f3c440 75%); box-shadow: 0 4px 0 #24160f, 0 0 0 5px rgba(243,196,64,.35), 0 0 22px 6px rgba(255,213,74,.45); animation: pq-glow 2.4s ease-in-out infinite; }
.purpose2 .pq-goal b { color: #ffd54a; }
@keyframes pq-glow { 50% { box-shadow: 0 4px 0 #24160f, 0 0 0 8px rgba(243,196,64,.25), 0 0 30px 10px rgba(255,213,74,.55); } }
@media (prefers-reduced-motion: reduce) { .purpose2 .pq-goal .pb { animation: none; } }
.rewards.after-path { margin-top: 2px; }
@media (max-width: 400px) { .purpose2 .pb { width: 58px; height: 58px; } .purpose2::before { top: 29px; } .purpose2 b { font-size: 12px; letter-spacing: .2px; } }