@font-face {
  font-family: 'Crimson Pro';
  src: url('fonts/crimsonpro/CrimsonPro[wght].woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'Crimson Pro';
  src: url('fonts/crimsonpro/CrimsonPro-Italic[wght].woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #efe3c6;
  --paper-shade: #d9c7a0;
  --ink: #1d1712;
  --ink-soft: #4a3d31;
  --red: #b8321f;
  --walnut: #2a1c14;
  --walnut-deep: #170f0a;
  --brass: #c99a3c;
  --brass-hot: #ffd27a;
  --verdigris: #3f8a7e;
  --verdigris-hot: #8fe0cf;
  --soot: #5a5048;
  --rule: 3px double var(--ink);
  --text: 'Crimson Pro', 'Georgia', serif;
  --cell: 72px;
  --mast-h: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  min-height: 100%;
  background-color: var(--walnut);
  background-image: var(--bg-image, none);
  background-size: 512px;
  background-blend-mode: multiply;
  color: var(--paper);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: lining-nums tabular-nums;
}
body.in-hall { --bg-image: var(--hall-image, none); background-size: cover; background-position: center; background-attachment: fixed; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Masthead: the playbill's head rule */
.mast {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  min-height: var(--mast-h);
  padding: 4px max(12px, env(safe-area-inset-right, 0px)) 4px max(12px, env(safe-area-inset-left, 0px));
  padding-top: max(4px, env(safe-area-inset-top, 0px));
  background: var(--paper); color: var(--ink);
  border-bottom: 5px double var(--ink);
}
.mast-name { font-weight: 800; font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.mast-name::first-letter { color: var(--red); }
.mast-mid { flex: 1; position: relative; min-width: 0; align-self: stretch; display: flex; align-items: center; }
.mast-stats { flex: 1; display: flex; gap: 16px; justify-content: center; font-size: 17px; white-space: nowrap; }
.notice {
  position: absolute; inset: 2px 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  padding: 0 10px; background: var(--paper); color: var(--ink);
  font-size: 16px; font-style: italic; line-height: 1.15; text-align: center;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  animation: notice-in 160ms ease-out; pointer-events: none;
}
.notice-error { color: var(--red); font-style: normal; font-weight: 700; }
.notice-discovery, .notice-patent { background: var(--red); color: var(--paper); font-style: normal; font-weight: 700; border-color: var(--red); }
@keyframes notice-in { from { opacity: 0; transform: translateY(-4px); } }
.mast-stats b { font-weight: 800; }
.mast-stats .lives { color: var(--red); letter-spacing: 0.1em; }
.mast-nav { display: flex; gap: 6px; align-items: center; }
.mast-btn {
  min-height: 44px; min-width: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1.5px solid var(--ink); color: var(--ink);
  font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
.mast-btn:active { background: var(--ink); color: var(--paper); }
.jam-link { border-color: var(--red); color: var(--red); }

.app { flex: 1; position: relative; display: flex; flex-direction: column; min-height: 0; }

/* Sheets: a boxed act on the bill */
.bill {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink);
  outline: 5px double var(--ink); outline-offset: -10px;
  padding: 22px 24px;
}
.bill h2, .bill h3 { margin: 0 0 6px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.1; }
.bill h2 { font-size: 26px; }
.bill h3 { font-size: 19px; }
.redline { color: var(--red); font-weight: 700; }
.muted { color: var(--ink-soft); }
.rule { border: 0; border-top: var(--rule); margin: 12px 0; }
.engraved { display: block; max-width: 100%; height: auto; }
.engraved-fallback { font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }

.btn {
  min-height: 46px; padding: 6px 18px;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink);
  font-weight: 800; font-size: 17px; letter-spacing: 0.07em; text-transform: uppercase;
  cursor: pointer; touch-action: manipulation;
}
.btn:active { background: var(--paper-shade); }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn-red { background: var(--red); color: var(--paper); border-color: var(--ink); }
.btn-red:active { background: #8f2416; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* Title card */
.title-screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 14px calc(20px + var(--safe-b)); }
.title-bill { max-width: 760px; width: 100%; text-align: center; padding: 34px 30px; }
.title-kicker { font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; }
.title-head { margin: 8px auto 4px; min-height: 64px; display: flex; justify-content: center; }
.title-head .engraved-fallback { font-size: clamp(38px, 9vw, 68px); line-height: 1; color: var(--ink); }
.title-goal { font-size: 22px; font-style: italic; margin: 10px 0 18px; }
.title-acts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); text-align: left; }
.act-card { border: 2px solid var(--ink); padding: 12px 14px; background: #f6edd6; display: flex; flex-direction: column; gap: 6px; }
.act-card h3 { font-size: 18px; margin: 0; }
.act-card p { margin: 0; font-size: 16px; }
.act-card .btn { margin-top: auto; font-size: 16px; letter-spacing: 0.04em; padding: 6px 10px; }
.title-figure { width: 120px; height: 160px; object-fit: contain; object-position: bottom; float: right; margin: -10px -6px 0 8px; }
.title-foot { margin-top: 18px; font-size: 15px; }

/* Workshop */
.shop {
  flex: 1; display: grid; gap: 14px; padding: 14px;
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) minmax(250px, 310px);
  grid-template-areas: 'rival bench info' 'rival cart info';
  grid-template-rows: auto 1fr;
  --cell: clamp(56px, min(calc((100vw - 690px) / 5.4), calc((100dvh - 400px) / 4.2)), 108px);
}
.area-rival { grid-area: rival; }
.area-bench { grid-area: bench; display: flex; flex-direction: column; align-items: center; }
.area-cart { grid-area: cart; }
.area-info { grid-area: info; display: flex; flex-direction: column; gap: 12px; }
.panel-label { font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper); margin: 0 0 6px; text-align: center; }

.rival-card { padding: 16px; }
.rival-top { display: flex; gap: 10px; align-items: flex-end; }
/* Portraits: the head and shoulders of a standing figure, cropped by enlarging the picture inside an oval-topped frame */
.rival-portrait, .result-portrait, .beaten-portrait {
  position: relative; overflow: hidden; flex: none;
  width: 88px; height: 112px; border-radius: 44px 44px 4px 4px;
  background: radial-gradient(circle at 50% 40%, #fff6dc, var(--paper-shade));
  border: 2px solid var(--ink); box-shadow: inset 0 0 0 3px var(--paper);
}
.rival-portrait img, .result-portrait img, .beaten-portrait img { position: absolute; width: 220%; max-width: none; left: -60%; top: -2%; }
.portrait-standin { display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800; color: var(--paper-shade); background: var(--ink); }
.rival-kicker { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.rival-name { font-weight: 800; font-size: 20px; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.03em; }
.rival-title { font-style: italic; font-size: 16px; }
.rival-habit { margin: 8px 0 4px; }
.rival-intro { font-style: italic; margin: 6px 0 10px; }
/* The rival's strength: a pip per part (hollow base, brass Improved, red Grand), the count in words, and the growth cue */
.rival-strength p { margin: 2px 0; font-size: 15px; line-height: 1.25; }
.pips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.pip { display: block; width: 12px; height: 12px; border: 2px solid var(--ink); transform: rotate(45deg); margin: 2px; }
.pip-2 { background: var(--brass); }
.pip-3 { background: var(--red); }
.rival-grew { font-weight: 700; }
.rival-grew::before { content: '\25B2  '; color: var(--red); }
.rival-card .bench { --cell: 38px; gap: 3px; }
.rival-peek { display: none; }
.bench.still .cell { cursor: default; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.rival-card .cell.locked::after { content: none; }
.rival-card .bench-frame { padding: 6px; margin-top: 4px; width: max-content; }
.rival-top > div { min-width: 0; }
.rival-name { overflow-wrap: anywhere; }

.bench-frame {
  padding: 10px; position: relative;
  background-color: #6b4a2d;
  background-image: var(--bench-image, none);
  background-size: 256px;
  background-blend-mode: multiply;
  border: 3px solid var(--walnut-deep);
  box-shadow: inset 0 0 0 2px var(--brass), 0 6px 0 var(--walnut-deep);
}
.bench { display: grid; grid-template-columns: repeat(5, var(--cell)); grid-template-rows: repeat(4, var(--cell)); gap: 4px; position: relative; }
.cell {
  position: relative; width: var(--cell); height: var(--cell);
  padding: 0; border: 1.5px solid rgba(29, 23, 18, 0.7);
  background: rgba(23, 15, 10, 0.28);
  cursor: pointer; touch-action: none; overflow: visible;
  transition: transform 120ms;
  container-type: size;
}
.cell.empty::after { content: ''; position: absolute; inset: 30%; border: 1px dashed rgba(239, 227, 198, 0.35); border-radius: 50%; }
.cell.locked { cursor: default; background: repeating-linear-gradient(45deg, rgba(23, 15, 10, 0.55) 0 6px, rgba(23, 15, 10, 0.3) 6px 12px); }
.cell.locked::after { content: 'Locked'; position: absolute; inset: auto 0 4px; font-size: 12px; text-align: center; color: var(--paper-shade); letter-spacing: 0.08em; text-transform: uppercase; }
.cell.has-part { background: var(--paper); }
.cell.selected { outline: 4px solid var(--brass-hot); outline-offset: 1px; z-index: 3; transform: translateY(-3px); }
.cell.target { box-shadow: inset 0 0 0 3px var(--brass-hot); }
.cell.hint-merge { box-shadow: inset 0 0 0 3px var(--red); }
.cell.drop-over { outline: 3px dashed var(--brass-hot); }
/* A part in a cell: the picture fills the cell; from about 58 px up the short name sits under it */
.plate { position: absolute; inset: 2px; display: flex; align-items: center; justify-content: center; pointer-events: none; container-type: size; }
.plate img { width: 100%; height: 100%; object-fit: contain; }
.cell-label { display: none; }
@container (min-height: 58px) {
  .cell > .plate { bottom: 17px; }
  .cell-label {
    display: block; position: absolute; left: 0; right: 0; bottom: 1px; pointer-events: none;
    font-size: 12px; font-weight: 700; line-height: 15px; text-align: center; color: var(--ink); letter-spacing: -0.03em;
    white-space: nowrap; overflow: hidden;
  }
  .cell-label.two { white-space: normal; line-height: 12px; letter-spacing: -0.01em; }
  .cell:has(.cell-label.two) > .plate { bottom: 25px; }
}
@container (min-height: 84px) {
  .cell > .plate { bottom: 19px; } .cell-label { font-size: 14px; line-height: 17px; }
  .cell-label.two { line-height: 14px; } .cell:has(.cell-label.two) > .plate { bottom: 29px; }
}
.plate.pair img { position: absolute; width: 74%; height: 74%; }
.plate.pair img:first-child { left: 0; top: 0; }
.plate.pair img:last-child { right: 0; bottom: 0; }
.plate.pair::after { content: ''; position: absolute; left: 44%; top: 44%; width: 12%; height: 12%; border-radius: 50%; background: radial-gradient(circle, var(--brass-hot), var(--brass) 55%, var(--ink) 60%); }
/* The bolted pair side by side (Ledger pages, the part sheet, the result card) */
.plate.pair.side img, .plate.pair.side .standin { width: 46%; height: 92%; top: 4%; bottom: auto; }
.plate.pair.side :first-child { left: 0; }
.plate.pair.side :last-child { right: 0; left: auto; }
.plate.pair.side::after { left: 45%; top: 45%; width: 10%; height: 10%; min-width: 12px; min-height: 12px; }
.standin {
  width: 86%; height: 86%; border-radius: 50%;
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, #fff7e0, var(--tag-ink, var(--paper-shade)) 120%);
  color: var(--ink); font-weight: 800; font-size: max(12px, 30cqmin); letter-spacing: 0.02em;
}
.plate.pair .standin { position: absolute; width: 62%; height: 62%; font-size: max(12px, 20cqmin); }
.plate.pair .standin:first-child { left: 0; top: 0; }
.plate.pair .standin:last-child { right: 0; bottom: 0; }
/* Level badges: II for Improved in brass, III for Grand in red; the merge tag is a red ribbon across the foot */
.lvl {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  min-width: 26px; height: 24px; padding: 0 4px;
  background: var(--brass-hot); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px;
  font-size: 14px; font-weight: 800; line-height: 20px; text-align: center; pointer-events: none;
}
.lvl.lvl-3 { background: var(--red); color: var(--paper); }
.cell-tag {
  position: absolute; left: -2px; right: 18px; top: -6px; z-index: 1; pointer-events: none;
  background: var(--red); color: var(--paper); border: 1.5px solid var(--ink);
  font-size: 12px; font-weight: 800; line-height: 15px; text-align: center; letter-spacing: 0.04em; text-transform: uppercase;
}
.hp { position: absolute; left: 3px; right: 3px; top: 3px; height: 6px; z-index: 1; background: rgba(29, 23, 18, 0.55); pointer-events: none; }
.hp > i { display: block; height: 100%; transform: scaleX(var(--hp, 1)); transform-origin: left; background: linear-gradient(90deg, var(--red), var(--brass) 60%); transition: transform 260ms; }
/* The bolt pin: a 44 px tap target whose visible pill is small, so it hides little of the two parts */
.pin {
  position: absolute; z-index: 4; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
}
.pin span {
  display: block; padding: 2px 7px; border-radius: 12px; border: 2px solid var(--ink); background: var(--red); color: var(--paper);
  font-size: 12px; font-weight: 800; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 0 0 2px var(--paper);
  animation: pin-pulse 1.4s ease-in-out infinite;
}
@keyframes pin-pulse { 50% { transform: scale(1.12); } }

.cart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.cart-head .panel-label { margin: 0; }
.cart {
  display: flex; gap: 10px; overflow-x: auto; padding: 10px 10px 12px;
  scroll-snap-type: x proximity;
  background-color: #5a3b22; background-image: var(--cart-image, none); background-size: 256px; background-blend-mode: multiply;
  border: 3px solid var(--walnut-deep); box-shadow: inset 0 0 0 2px var(--brass);
}
.offer {
  flex: none; width: 128px; scroll-snap-align: start;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); padding: 6px 6px 8px; text-align: center;
  cursor: pointer; touch-action: pan-x; position: relative;
  clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
  --cell: 92px;
}
.offer .plate { position: relative; inset: auto; width: 92px; height: 82px; margin: 0 auto; }
.offer-name { font-weight: 700; font-size: 16px; line-height: 1.1; min-height: 36px; display: flex; align-items: center; justify-content: center; }
.offer-cost { display: inline-block; margin-top: 4px; padding: 0 10px; border: 1.5px solid var(--ink); font-weight: 800; font-size: 16px; }
.offer-tag { display: block; margin-top: 5px; padding: 1px 4px; background: var(--red); color: var(--paper); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.offer-tag.offer-new { position: absolute; top: 4px; left: 10px; right: 10px; margin: 0; z-index: 1; background: var(--ink); color: var(--brass-hot); white-space: nowrap; }
.offer.poor .offer-cost { color: var(--red); border-color: var(--red); }
.offer.selected { background: #fff3cf; box-shadow: inset 0 0 0 4px var(--brass); }
.offer.sold-out { visibility: hidden; }

.info { padding: 16px; min-height: 180px; }
.info-empty { font-style: italic; color: var(--ink-soft); }
.info-name { font-weight: 800; font-size: 21px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1; }
.info-recipe { font-style: italic; color: var(--ink-soft); margin-top: 2px; }
.info-nums { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.info-nums li { padding: 1px 9px; border: 1.5px solid var(--ink); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.info-nums li:first-child { background: var(--ink); color: var(--paper); }
.info-quip { font-style: italic; margin: 6px 0 0; }
.hint-list { margin: 0; padding: 0; list-style: none; }
.hint-list li { padding: 6px 0; border-top: 1px solid var(--paper-shade); }
.ring-box { padding: 14px 16px; text-align: center; }
.ring-btn { width: 100%; min-height: 64px; font-size: 24px; letter-spacing: 0.14em; }
.gold-line { font-size: 18px; margin-bottom: 8px; }
.gold-line b { font-size: 24px; }

/* Drag ghost */
.ghost { position: fixed; z-index: 50; pointer-events: none; width: 80px; height: 80px; margin: -40px 0 0 -40px; opacity: 0.9; --cell: 80px; }
.ghost .plate { inset: 0; }

/* The replay stage */
/* In the hall the page is exactly one screen tall: the gallery, the stage and its controls always fit. */
body.in-hall { height: 100%; height: 100dvh; overflow: hidden; }
/* clip: the stamp banners start at scale 2.2 and must never widen the page on a phone */
.stage-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 14px calc(10px + var(--safe-b)); gap: 10px; overflow: clip; }
.gallery { display: flex; align-items: stretch; gap: 12px; padding: 10px 14px; }
.judges-img { width: 180px; height: 112px; margin: -6px 0 -10px; object-fit: contain; object-position: bottom; flex: none; transform-origin: 50% 100%; }
.judges-img.react { animation: judges-react 600ms ease-out; }
@keyframes judges-react { 30% { transform: translateY(-8px) rotate(-2deg); } 60% { transform: translateY(0) rotate(1.5deg); } }
.judges-standin { width: 150px; height: 96px; flex: none; display: flex; align-items: flex-end; justify-content: space-around; }
.judges-standin i { display: block; width: 38px; height: 70px; background: var(--ink); border-radius: 19px 19px 4px 4px; }
.judges-standin i:nth-child(2) { height: 82px; }
.gallery-talk { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.gallery .tick-label { font-size: 16px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.judge-line { font-size: 18px; font-style: italic; min-height: 1.35em; }
/* The cause ticker under the stage: the chain that led to the latest event, root first */
.cause-ticker {
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-left: 6px solid var(--red);
  padding: 6px 12px; font-size: 18px; font-weight: 600; line-height: 1.3; min-height: calc(2.6em + 12px);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.speed-label { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.crowd-line { font-size: 16px; color: var(--ink-soft); }
.chain-box { flex: none; min-width: 120px; text-align: center; border-left: var(--rule); padding-left: 12px; display: flex; flex-direction: column; justify-content: center; }
.chain-label { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.chain-num { font-size: 46px; font-weight: 800; line-height: 1; color: var(--red); }
.chain-best { font-size: 14px; }
.chain-num.bump { animation: bump 300ms ease-out; }
@keyframes bump { 40% { transform: scale(1.35); } }

/* Cells are sized from the stage's own box (container units): side by side, each bench gets half the width less the gap;
   the 76px and 42px are a bench's label, frame, gaps and shadow. */
.stage {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6cqw; min-height: 0; cursor: pointer;
  container-type: size;
  --cell: clamp(30px, min(calc((47cqw - 42px) / 5), calc((100cqh - 76px) / 4)), 112px);
}
.stage .cell.locked::after { content: none; }
.cell.traced { outline: 3px solid #fff2b0; outline-offset: 1px; z-index: 5; }
.trace-no {
  position: absolute; left: -6px; top: -6px; z-index: 7; min-width: 22px; height: 22px; padding: 0 4px;
  background: var(--ink); color: #fff2b0; border: 1.5px solid #fff2b0; border-radius: 11px;
  font-size: 13px; font-weight: 800; line-height: 19px; text-align: center; pointer-events: none;
}
.verdict-bar { display: flex; gap: 8px; }
.stage-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stage-side .panel-label { margin: 0; }
.stage-side.side-b .bench-frame { box-shadow: inset 0 0 0 2px var(--verdigris), 0 6px 0 var(--walnut-deep); }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.stage .cell { cursor: inherit; }
.cell.fire-a { box-shadow: 0 0 0 3px var(--brass-hot), 0 0 22px 6px var(--brass); z-index: 4; animation: fire-pop 340ms ease-out; } /* unslop-ignore: the firing glow is pillar 1 (each trigger glows), brass gaslight from DESIGN.md, shown 340 ms per fire */
.cell.fire-b { box-shadow: 0 0 0 3px var(--verdigris-hot), 0 0 22px 6px var(--verdigris); z-index: 4; animation: fire-pop 340ms ease-out; } /* unslop-ignore: the rival's firing glow, verdigris so the two sides read apart during a cascade */
@keyframes fire-pop { 35% { transform: scale(1.12); } }
.cell.struck { animation: struck 260ms linear; }
@keyframes struck { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.cell.wreck { background: var(--soot); }
.cell.wreck .plate { filter: grayscale(1) brightness(0.55) contrast(1.2); }
.cell.wreck::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(118deg, transparent 46%, var(--ink) 47%, var(--ink) 49%, transparent 50%), linear-gradient(32deg, transparent 58%, var(--ink) 59%, transparent 61%);
}
.cell.wreck .hp { display: none; }
.stage-controls { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.stage-controls .btn { min-width: 64px; }
.stage-controls .btn.on { background: var(--ink); color: var(--paper); }
.stage-banner {
  position: absolute; left: 50%; top: 50%; z-index: 8; transform: translate(-50%, -50%) rotate(-4deg);
  background: var(--paper); color: var(--red); border: 3px solid var(--red); outline: 2px solid var(--paper);
  padding: 6px 22px; font-weight: 800; font-size: clamp(26px, 5vw, 44px); letter-spacing: 0.12em; text-transform: uppercase;
  pointer-events: none; animation: stamp 900ms ease-out forwards;
}
.stage-banner.top { top: 0; font-size: clamp(20px, 3.4vw, 30px); padding: 2px 16px; }
@keyframes stamp { 0% { transform: translate(-50%, -50%) rotate(-4deg) scale(2.2); opacity: 0; } 18% { transform: translate(-50%, -50%) rotate(-4deg) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* Result card over the finished stage */
.result-layer { position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(23, 15, 10, 0.55); }
.result-card { max-width: 600px; width: 100%; text-align: center; max-height: 100%; overflow-y: auto; }
.result-head { display: flex; gap: 14px; align-items: center; justify-content: center; text-align: left; }
.result-portrait { width: 72px; height: 92px; border-radius: 36px 36px 4px 4px; }
.result-b .result-portrait img { transform: scaleX(-1); }
.result-kicker { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
/* The verdict is a rubber stamp: red for a win, ink for a loss, slanted either way */
.result-stamp {
  display: inline-block; margin: 6px 0 4px; padding: 2px 16px;
  border: 5px double var(--red); color: var(--red); transform: rotate(-4deg);
  font-size: 42px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.1;
}
.result-b .result-stamp, .season-lost .result-stamp { border-color: var(--ink); color: var(--ink); transform: rotate(3deg); }
.result-plain { font-size: 18px; font-weight: 700; }
.result-line { font-size: 18px; margin: 10px 0 4px; }
.result-nums { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin: 10px 0; padding: 8px 0; border-top: var(--rule); border-bottom: var(--rule); }
.result-nums .num { display: flex; flex-direction: column; align-items: center; min-width: 76px; }
.result-nums .num > span:last-child { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
.result-nums .engraved-fallback { font-size: 32px; line-height: 1.1; letter-spacing: 0; }
.result-nums .loss .engraved-fallback { color: var(--red); }
.result-judges p { font-style: italic; margin: 6px 0; }
.result-rival { margin: 8px 0; }
.result-found { margin: 10px 0; padding: 10px; border: 2px solid var(--red); background: #f8efd8; }
.result-found-head { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.found { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.found .plate { position: relative; inset: auto; width: 104px; height: 64px; }
.result-card .btn-row { justify-content: center; }
.result-card .btn-row .btn { min-height: 44px; padding: 4px 14px; font-size: 15px; }
.result-go { position: sticky; bottom: -22px; margin: 10px -12px -22px; padding: 10px 12px 14px; background: var(--paper); border-top: var(--rule); }
.result-go .result-next { width: 100%; max-width: 360px; min-height: 52px; }
.result-more { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto 8px; gap: 6px; }
.result-more .btn { min-height: 44px; padding: 4px 6px; font-size: 13px; line-height: 1.15; white-space: normal; }

/* Overlay sheets: Ledger, help, menu, credits */
.sheet-layer { position: fixed; inset: 0; z-index: 30; background: rgba(23, 15, 10, 0.78); display: flex; justify-content: center; padding: 12px 10px calc(12px + var(--safe-b)); }
.sheet { width: 100%; max-width: 980px; display: flex; flex-direction: column; max-height: 100%; padding: 0; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px 10px; border-bottom: var(--rule); }
.sheet-head h2 { flex: 1; margin: 0; }
.sheet-close { min-width: 120px; }
.sheet-body { overflow-y: auto; padding: 14px 22px 22px; }
.sheet-body p { margin: 0 0 10px; }

/* The Ledger: pages of parchment inside a red leather binding (the desk's ledger-cover, its middle only) */
.ledger-sheet { background-color: #7a1e16; background-image: var(--leather-image, none); background-size: 240%; background-position: 50% 45%; color: var(--paper); outline-color: var(--brass); }
.ledger-sheet .sheet-head { border-bottom-color: var(--brass); background: rgba(23, 15, 10, 0.4); }
.ledger-sheet .sheet-head h2 { color: var(--paper); text-shadow: 0 2px 0 var(--walnut-deep); }
.sheet-icon { width: 64px; height: 48px; object-fit: cover; flex: none; border-radius: 4px; }
.ledger-sheet .sheet-body > p { text-shadow: 0 1px 2px var(--walnut-deep); max-width: 80ch; }
.ledger-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.page { border: 1.5px solid var(--ink); background: #f8efd8; color: var(--ink); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; position: relative; box-shadow: 3px 4px 0 rgba(23, 15, 10, 0.45); }
.page .plate { position: relative; inset: auto; width: 180px; height: 104px; margin: 0 auto; }
.page-no { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.page-parents { text-align: center; font-size: 15px; font-style: italic; color: var(--ink-soft); }
.page-title { font-weight: 800; font-size: 18px; text-transform: uppercase; line-height: 1.1; }
.page-entry { font-size: 16px; }
.page-quip { font-size: 16px; font-style: italic; color: var(--red-deep, var(--red)); }
.page-seal { position: absolute; top: 30px; right: 8px; padding: 0 6px; border: 3px double var(--red); color: var(--red); transform: rotate(8deg); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.page.blank { background: repeating-linear-gradient(0deg, #f3e8cc 0 22px, #e7d8b3 22px 23px); }
.page.blank .blank-plate { height: 104px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.blank-plate i { width: 72px; height: 88px; border: 2px dashed var(--ink-soft); border-radius: 36px 36px 6px 6px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 34px; font-weight: 800; color: var(--ink-soft); }
.blank-plate b { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, var(--brass-hot), var(--brass) 55%, var(--ink) 60%); }
.page.blank .page-entry { font-style: italic; }
.page.fresh { box-shadow: 0 0 0 4px var(--red); }
.ledger-count { font-weight: 700; }

.menu-list { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.menu-list .btn { text-align: left; }
.credits p { max-width: 70ch; }
.credits .jam-link { display: inline-flex; align-items: center; text-decoration: none; }

/* Season end */
.season-end { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 18px 14px calc(18px + var(--safe-b)); overflow-y: auto; }
.season-bill { max-width: 820px; width: 100%; }
.upgrade-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 8px; }
.upgrade { border: 1.5px solid var(--ink); padding: 10px; display: flex; flex-direction: column; gap: 6px; background: #f6edd6; }
.upgrade.owned { background: var(--paper-shade); }
.upgrade .btn { margin-top: auto; }
.season-bill { text-align: center; }
.season-bill h2 .engraved { margin: 0 auto; }
.season-bill .upgrade-grid, .season-bill .patent-list { text-align: left; }
.beaten-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: 6px 0 10px; }
.beaten-one { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; font-size: 14px; line-height: 1.15; }
.beaten-portrait { width: 64px; height: 82px; border-radius: 32px 32px 4px 4px; }

/* The part sheet (workshop info column on a desk; a bottom sheet over the cart on a phone) */
.part-sheet { position: relative; }
.sheet-tabs { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.sheet-tabs .btn { min-height: 44px; padding: 4px 12px; font-size: 14px; }
.sheet-hide, .sel-strip { display: none; }
.info-head { display: flex; gap: 12px; align-items: center; padding-right: 92px; min-height: 76px; }
.info-head .plate { position: relative; inset: auto; flex: none; width: 76px; height: 76px; }
.info-head .plate.pair.side { width: 112px; }
.info-blurb { margin: 8px 0 4px; font-size: 18px; }
.info-idle h3 { font-size: 16px; }
.walk { margin: 0; padding-left: 22px; }
.walk li { margin: 3px 0; }
.hints { padding: 10px 16px; min-height: 0; }
.cart-empty { color: var(--paper); font-style: italic; margin: 8px 0; }
.act-no { font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); font-weight: 700; }

/* Help */
.help-goal { font-size: 21px; font-style: italic; }
.gloss { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 14px; }
.gloss dt { font-weight: 800; text-transform: capitalize; }
.gloss dd { margin: 0; }
.link-key .key-a { color: #8a6514; font-weight: 800; }
.link-key .key-b { color: var(--verdigris); font-weight: 800; }
.link-key .key-x { color: var(--red); font-weight: 800; }

/* Masthead on a phone: two rows (buttons, then stats with the notice over them) */
@media (max-width: 640px) {
  .mast { flex-wrap: wrap; gap: 4px 8px; }
  .mast-name { font-size: 18px; }
  .mast-mid { order: 3; flex-basis: 100%; min-height: 26px; }
  .mast-stats { justify-content: space-between; font-size: 16px; gap: 8px; }
  .mast-nav { margin: 0 auto; gap: 4px; }
  .notice { inset: 0; font-size: 15px; }
  .sheet-icon { display: none; }
  .sheet-head h2 { font-size: 22px; }
}
@media (max-width: 899px) {
  body:not([data-phase='title']) .mast-name { display: none; }
  .mast-btn { padding: 0 8px; font-size: 13px; }
}

/* Workshop on a phone or narrow tablet held upright: one column, the bell in a bar at the bottom */
@media (max-width: 899px) and (orientation: portrait) {
  .shop > section { min-width: 0; }
  .shop {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: 'rival' 'bench' 'cart' 'info';
    grid-template-rows: auto; padding: 10px 10px calc(96px + var(--safe-b)); gap: 10px;
    --cell: min(calc((100vw - 64px) / 5), 84px);
  }
  .shop.has-sheet { padding-bottom: calc(96px + 36dvh + var(--safe-b)); }
  .shop.has-strip { padding-bottom: calc(160px + var(--safe-b)); }
  .area-bench { scroll-margin-top: 104px; }
  .cart-head .panel-label { white-space: nowrap; letter-spacing: 0.14em; }
  .cart-head .btn { min-height: 44px; padding: 4px 12px; font-size: 14px; letter-spacing: 0.04em; }
  .rival-card { padding: 10px 12px; }
  .rival-intro, .rival-title { display: none; }
  .rival-card .rival-portrait { width: 52px; height: 64px; border-radius: 26px 26px 3px 3px; box-shadow: inset 0 0 0 2px var(--paper); }
  .rival-card .rival-name { font-size: 17px; }
  .rival-card .rival-habit { margin: 4px 0 2px; font-size: 16px; }
  .rival-card .bench { --cell: 44px; }
  .rival-card .bench-frame { margin: 6px auto 0; }
  .rival-card .cell.locked::after { content: none; }
  .area-info { gap: 10px; }
  .ring-box { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 8px 12px calc(8px + var(--safe-b)); display: flex; align-items: center; gap: 10px; border-width: 2px 0 0; outline: none; }
  .ring-box .gold-line { margin: 0; text-align: left; flex: none; }
  .ring-btn { min-height: 56px; font-size: 21px; flex: 1; }
  .part-sheet {
    position: fixed; left: 0; right: 0; bottom: calc(74px + var(--safe-b)); z-index: 14;
    max-height: 34dvh; overflow-y: auto; padding: 10px 14px; outline: none; border-width: 3px 0 0;
    box-shadow: 0 -6px 18px rgba(23, 15, 10, 0.5);
  }
  .part-sheet:not(.open) { display: none; }
  /* The slim strip over the bell bar: what is selected and its rule; Details opens the sheet */
  .sel-strip {
    display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: calc(72px + var(--safe-b)); z-index: 14;
    padding: 6px 10px 6px 14px; border-width: 2px 0 0; outline: none; box-shadow: 0 -4px 12px rgba(23, 15, 10, 0.4);
  }
  .shop.has-sheet .sel-strip { display: none; }
  .strip-text { flex: 1; min-width: 0; font-size: 16px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .strip-details { flex: none; min-height: 44px; padding: 4px 12px; font-size: 14px; }
  .sheet-hide { display: inline-block; }
  .info-head { padding-right: 150px; min-height: 64px; }
  .info-head .plate { width: 60px; height: 60px; }
  .info-head .plate.pair.side { width: 92px; }
  .info-name { font-size: 18px; }
  .part-sheet .info-blurb { margin: 4px 0 2px; font-size: 17px; }
}
@media (max-width: 899px) {
  .sheet-body { padding: 12px 14px 18px; }
  .sheet-head { padding: 12px 14px 8px; }
  .bill { padding: 16px 16px; }
  .result-go { bottom: -16px; margin-bottom: -16px; }
  .result-head { gap: 10px; }
  .result-stamp { font-size: 34px; }
  .title-bill { padding: 26px 18px; }
  .title-figure { width: 80px; height: 110px; }
}

/* Workshop on a phone on its side: your bench and the cart on the left, the part sheet and the bell on the right, the
   rival's card below (the page scrolls) */
@media (max-width: 899px) and (orientation: landscape) {
  .shop {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 290px); grid-template-areas: 'bench info' 'cart info' 'rival info';
    padding: 8px; gap: 8px; --cell: clamp(44px, calc((100vw - 380px) / 5.4), 72px);
  }
  .area-rival { justify-self: center; }
  .rival-intro { display: none; }
  .rival-card .bench { --cell: 44px; }
}

/* The bout on a portrait screen: the rival's bench on top, yours below it */
@media (max-width: 899px) and (orientation: portrait) {
  /* The stage never shrinks under its 44 px cells: when the crowd's line takes a second row or the President's long
     label takes two, the bout scrolls instead of the benches sliding under the gallery and the ticker. Skip and the
     speeds ride along the bottom of the screen, and settle under the ticker at the end of the scroll. */
  .stage-wrap { gap: 8px; overflow-y: auto; }
  .stage { flex: 1 0 auto; flex-direction: column-reverse; gap: 12px; --cell: clamp(44px, min(calc((100cqw - 42px) / 5), calc((100cqh - 170px) / 8)), 84px); }
  .stage-controls { position: sticky; bottom: calc(-10px - var(--safe-b)); z-index: 8; margin: 0 -14px calc(-10px - var(--safe-b)); padding: 4px 14px calc(4px + var(--safe-b)); background: var(--walnut-deep); box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.45); }
  .gallery { padding: 8px 10px; gap: 8px; }
  .judges-img, .judges-standin { width: 72px; height: 60px; }
  .judges-standin i { width: 20px; height: 40px; }
  .judges-standin i:nth-child(2) { height: 48px; }
  .cause-ticker { font-size: 16px; padding: 5px 10px; }
  .gallery .tick-label { font-size: 14px; }
  .judge-line { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gallery .crowd-line { display: none; }
  .chain-box { min-width: 72px; padding-left: 8px; }
  .chain-num { font-size: 32px; }
}
/* A short portrait phone (360 x 640): tighter labels and a two-line ticker. A cell is a tap target for tracing, so it
   stays 44 px tall and the stage takes the height it needs; the page scrolls a little rather than shrink them. */
@media (max-width: 899px) and (orientation: portrait) and (max-height: 720px) {
  .stage-wrap { gap: 6px; padding-top: 6px; overflow-y: auto; }
  .stage { gap: 8px; flex: none; container-type: inline-size; --cell: 44px; }
  .stage-side { gap: 2px; }
  .stage-side .panel-label { font-size: 13px; letter-spacing: 0.14em; }
  .stage .bench { gap: 2px; }
  .stage .bench-frame { padding: 6px; }
  .judges-img, .judges-standin { width: 56px; height: 46px; }
  .gallery { padding: 6px 8px; }
  .cause-ticker { -webkit-line-clamp: 2; }
}

/* A phone on its side: the gallery and controls in a column at the left, both benches side by side */
@media (orientation: landscape) and (max-height: 540px) {
  .mast { min-height: 0; padding-top: max(2px, env(safe-area-inset-top, 0px)); padding-bottom: 2px; }
  .stage-wrap {
    display: grid; grid-template-columns: minmax(190px, 27%) 1fr; grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: 'gal stage' 'tick stage' 'ctl stage'; padding: 6px 8px calc(6px + var(--safe-b)); gap: 6px 10px;
  }
  .gallery { grid-area: gal; flex-direction: column; padding: 8px 10px; gap: 4px; overflow: hidden; min-height: 0; }
  .judges-img, .judges-standin { display: none; }
  .cause-ticker { grid-area: tick; font-size: 16px; -webkit-line-clamp: 4; min-height: 0; align-self: start; }
  .judge-line { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .gallery .crowd-line { display: none; }
  .chain-box { border-left: 0; border-top: var(--rule); padding: 4px 0 0; flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
  .chain-num { font-size: 28px; }
  .stage { grid-area: stage; gap: 4cqw; --cell: clamp(30px, min(calc((48cqw - 42px) / 5), calc((100cqh - 70px) / 4)), 96px); }
  .stage-controls { grid-area: ctl; flex-wrap: wrap; justify-content: flex-start; }
  .stage-controls .btn { min-width: 48px; padding: 4px 10px; }
  /* 1x, 2x and Skip on one row: the word Speed would take a row of its own from the ticker. */
  .speed-label { display: none; }
  .result-card { padding: 12px 16px; }
  /* All three ways on from the card in one row, so the numbers and their labels stay above it. */
  .result-go { display: flex; gap: 6px; align-items: stretch; }
  .result-go .result-next { min-height: 44px; flex: 1 1 0; width: auto; }
  .result-more { flex: 2 1 0; margin: 0; }
  .result-stamp { margin: 0 auto; padding: 0 12px; }
  .result-card .result-line, .result-card .result-judges p + p, .result-card .result-rival, .result-portrait { display: none; }
  .result-card .result-nums { margin: 4px 0; padding: 2px 0; }
  .result-stamp { font-size: 28px; }
}

/* The first-run tour: one lit thing and a caption card beside it, never over it */
.tour-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.tour-card {
  position: fixed; pointer-events: auto; padding: 10px 14px 12px;
  box-shadow: 0 8px 24px rgba(23, 15, 10, 0.55), inset 0 0 0 2px var(--red);
}
.tour-no { font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.tour-text { margin: 4px 0 8px; font-size: 18px; line-height: 1.25; }
.tour-btns { display: flex; gap: 8px; justify-content: space-between; }
.tour-btns .btn { min-height: 44px; padding: 4px 14px; font-size: 15px; }
.tour-spot { outline: 4px solid var(--red); outline-offset: 3px; z-index: 6; animation: tour-glow 1.2s ease-in-out infinite; }
.offer.tour-spot { outline: 0; box-shadow: inset 0 0 0 5px var(--red); }
@keyframes tour-glow { 50% { outline-color: var(--brass-hot); } }

/* Calm motion: the player's Menu setting or the system's reduced-motion wish. Causes are still drawn (replay.js). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body.calm *, body.calm *::before, body.calm *::after { animation: none !important; transition: none !important; }
@media (max-width: 380px) {
  .mast-btn { padding: 0 6px; letter-spacing: 0.02em; }
}

/* Title card: today's Daily modifier and best */
.act-card .act-mod { font-size: 16px; padding: 4px 8px; border-left: 3px solid var(--red); background: rgba(184, 50, 31, 0.06); }
.act-card .act-best { font-weight: 700; }
.act-card .btn + .btn { margin-top: 0; }

/* The Workshop Record */
.record-sheet { max-width: 760px; }
.rec + .rec { margin-top: 14px; padding-top: 12px; border-top: var(--rule); }
.rec-nums { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 0; }
.rec-nums dt { font-size: 17px; }
.rec-nums dd { margin: 0; font-weight: 800; font-size: 18px; text-align: right; }
.rec-days { list-style: none; margin: 0; padding: 0; }
/* Patents and what each adds: the part's picture, or a hybrid's bolted pair once its page is found */
.patent-book { list-style: none; margin: 0; padding: 0; }
.patent-book li { padding: 8px 0; border-top: 1px solid var(--paper-shade); }
.patent-book li:not(.held) { color: var(--ink-soft); }
.patent-book p { margin: 2px 0 6px; }
.patent-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.patent-head > span { flex: none; white-space: nowrap; font-size: 14px; }
.granted { flex: none; padding: 0 6px; border: 2px solid var(--red); color: var(--red); font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.unlocks { display: flex; flex-direction: column; gap: 6px; }
.unlock { display: flex; align-items: center; gap: 10px; }
.unlock .plate { position: relative; inset: auto; flex: none; width: 56px; height: 56px; background: var(--paper); border: 2px solid var(--ink); }
.unlock-pair .plate { width: 92px; }
.unlock-blank { font-size: 26px; font-weight: 800; color: var(--ink-soft); }
.rec-days li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--paper-shade); }
.rec-days li.today { font-weight: 700; color: var(--red); }

/* Copy my result */
.copy-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0 4px; }
.copy-box:empty { display: none; }
.copy-box { width: 100%; max-width: 520px; text-align: left; }
.copy-text { width: 100%; font: inherit; font-size: 16px; padding: 8px; border: 2px solid var(--ink); background: #fffaf0; color: var(--ink); resize: vertical; }

/* How to play */
.howto-sheet { max-width: 820px; }
.how-step { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--paper-shade); }
.how-step h3 { display: flex; align-items: center; gap: 8px; }
.how-no { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: var(--paper); font-size: 17px; flex: none; }
.how-pics { display: flex; align-items: center; justify-content: center; gap: 4px; }
.how-part { margin: 0; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; text-align: center; line-height: 1.1; }
.how-part .plate { position: relative; inset: auto; width: 56px; height: 56px; background: var(--paper); border: 2px solid var(--ink); }
.how-pics > .how-part:only-child { width: auto; }
.how-pics > .how-part:only-child .plate { width: 110px; height: 110px; }
.how-arrow { font-size: 22px; font-weight: 800; color: var(--red); }
.how-bolt { position: relative; width: 190px; height: 110px; background: var(--paper); border: 2px solid var(--ink); }
.how-bolt .plate { inset: 4px; }
.how-pin { left: 50%; top: 50%; pointer-events: none; }
.how-quote { font-style: italic; }
.how-leads { margin: 0 0 8px; padding-left: 20px; }
.how-leads li { margin-bottom: 4px; }
.how-ring .btn { pointer-events: none; min-height: 52px; font-size: 19px; letter-spacing: 0.12em; }
@media (max-width: 560px) {
  .how-step { grid-template-columns: 1fr; }
}

/* The President: his entrance card, his Machine on the rival card, and the Exposition's ceremony */
.president-sheet { max-width: 720px; }
.pres-head { display: flex; gap: 16px; align-items: flex-end; }
.pres-figure { width: 120px; height: 170px; object-fit: contain; object-position: bottom; flex: none; }
.pres-title { font-style: italic; font-size: 16px; }
.pres-intro { font-style: italic; font-size: 17px; margin: 8px 0 0; }
.pres-name { font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.05; }
.pres-machine { margin: 8px 0 4px; display: flex; justify-content: center; text-align: center; }
.pres-machine .engraved-fallback { font-size: clamp(26px, 6vw, 40px); }
.pres-bench { display: flex; justify-content: center; }
.pres-bench .bench { --cell: min(52px, 14vw, 7.5dvh); }
.president-sheet .btn-row { justify-content: center; }
.pres-bench .cell.locked::after { content: none; }
.rival-card.president { outline: 4px double var(--red); outline-offset: -8px; }
.machine-wrap { min-width: 0; }
.machine-head { font-size: 18px; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--red); margin: 8px 0 2px; text-align: center; overflow-wrap: anywhere; }
.ceremony-head { display: flex; gap: 16px; align-items: center; justify-content: center; text-align: left; }
.ceremony-figure { width: 160px; height: 240px; object-fit: contain; object-position: bottom; flex: none; }
.season-bill.ceremony { border-color: var(--red); outline: 4px double var(--red); outline-offset: -10px; }
/* A phone on its side: the President and his line on the left, his Machine's bench on the right, nothing to scroll */
@media (orientation: landscape) and (max-height: 540px) {
  .president-sheet { max-width: 900px; }
  .president-sheet .sheet-body { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; align-items: start; }
  .president-sheet .sheet-body > * { grid-column: 1; }
  .president-sheet .pres-bench { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .president-sheet .pres-bench .bench { --cell: min(44px, 11dvh); }
  .president-sheet .btn-row { margin-top: 4px; }
  .president-sheet .pres-machine { margin: 2px 0 0; }
  .president-sheet .pres-machine .engraved { max-height: 38px; width: auto; }
  .pres-figure { width: 72px; height: 104px; }
  .pres-intro { font-size: 16px; }
}
@media (max-width: 560px) {
  .pres-figure { width: 96px; height: 150px; }
  .ceremony-head { flex-direction: column; text-align: center; }
  .ceremony-figure { width: 120px; height: 170px; }
}

/* The gallery crowd: a row of heads in hats beside its line. It stirs at a gasp and answers the verdict:
   a jeer shakes heads, a gasp jolts them back, applause bounces, higher and longer as the size class grows. */
.crowd { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crowd-heads { flex: none; display: flex; align-items: flex-end; gap: 2px; height: 26px; --amp: -4px; --times: 2; }
.crowd-heads i { display: block; position: relative; width: 11px; height: 15px; background: var(--ink-soft); border-radius: 6px 6px 2px 2px; }
.crowd-heads i:nth-child(3n)::before { content: ''; position: absolute; left: 1px; right: 1px; top: -7px; height: 7px; background: var(--ink); }
.crowd-heads i:nth-child(4n+1)::before { content: ''; position: absolute; left: -2px; right: -2px; top: -2px; height: 3px; background: var(--ink); border-radius: 2px; }
.crowd-heads i:nth-child(odd) { height: 17px; }
.crowd-heads i:nth-child(5n+2) { height: 13px; }
.crowd-medium { --amp: -6px; --times: 2; }
.crowd-large { --amp: -8px; --times: 3; }
.crowd-huge { --amp: -11px; --times: 5; }
.crowd-heads.stir i { animation: crowd-gasp 420ms ease-out; }
.crowd-heads.go i { animation: crowd-applaud 300ms ease-in-out calc(var(--times) * 2) alternate; }
.crowd-heads.go.crowd-jeer i { animation: crowd-jeer 260ms ease-in-out calc(var(--times) * 2) alternate; transform-origin: 50% 100%; }
.crowd-heads.go.crowd-gasp i { animation: crowd-gasp 520ms ease-out var(--times); }
.crowd-heads.go i:nth-child(even), .crowd-heads.stir i:nth-child(even) { animation-delay: 90ms; }
.crowd-heads.go i:nth-child(3n), .crowd-heads.stir i:nth-child(3n) { animation-delay: 170ms; }
@keyframes crowd-applaud { to { transform: translateY(var(--amp)); } }
@keyframes crowd-jeer { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes crowd-gasp { 25% { transform: translateY(var(--amp)) scale(1.08); } }
@media (max-width: 899px) and (orientation: portrait) {
  /* The crowd's line wraps under the heads, whole, never cut mid-clause */
  .gallery .crowd { flex-wrap: wrap; gap: 2px 8px; }
  .gallery .crowd-line { display: block; flex-basis: 100%; font-size: 14px; line-height: 1.2; min-width: 0; }
  .crowd-heads { height: 20px; gap: 1px; }
  .crowd-heads i { width: 8px; height: 11px; }
  .crowd-heads i:nth-child(n+11) { display: none; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .crowd-heads i { width: 8px; height: 11px; }
}

/* Show their reach: cells of your bench the rival's outputs can strike */
.reach { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin-top: 8px; }
.reach-toggle { min-height: 44px; }
.reach-toggle.on { background: var(--red); color: var(--paper); }
.reach-key { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.3; max-width: 46ch; }
.reach-key li { display: flex; gap: 6px; align-items: baseline; }
.reach-key li::before { content: ''; flex: none; width: 12px; height: 12px; border: 2px solid #ff5a3c; }
.reach-key .key-sure::before { background: rgba(255, 90, 60, 0.75); }
.reach-key .key-maybe::before { background: rgba(255, 90, 60, 0.22); border-style: dashed; }
.cell.reach-sure { box-shadow: inset 0 0 0 4px #ff5a3c, inset 0 0 0 999px rgba(255, 90, 60, 0.38); } /* unslop-ignore: a flat inset ring and tint (no blur), the warning colour of the reach overlay */
.cell.reach-maybe { outline: 3px dashed rgba(255, 90, 60, 0.85); outline-offset: -7px; box-shadow: inset 0 0 0 999px rgba(255, 90, 60, 0.1); } /* unslop-ignore: a flat dashed ring and faint tint (no blur) for the uncertain reach */

/* The Backfire Reel at the season's end: a small stage of its own above the numbers */
.reel { margin: 14px 0; padding: 10px 10px 12px; background: var(--walnut-deep); color: var(--paper); }
.reel-head { margin: 0; color: var(--brass-hot); letter-spacing: 0.06em; }
.reel-status { font-size: 15px; min-height: 1.3em; }
.reel .gallery { color: var(--ink); }
.reel-slot { display: flex; height: min(64dvh, 500px); }
.reel-slot:empty { display: none; }
.reel-slot .stage-wrap { flex: 1; padding: 6px 0 0; }
.reel-slot .stage-controls:empty { display: none; }
.reel-btns { justify-content: center; margin-top: 8px; }
@media (max-width: 899px) and (orientation: portrait) {
  .season-end { padding-left: 6px; padding-right: 6px; }
  .reel { padding: 8px 4px 10px; }
  .reel-slot { height: min(82dvh, 680px); }
  .reel .crowd { display: none; }
}
/* On a phone the reel's cells (tap targets for tracing) keep 44 px: the reel is as tall as its benches and the season's
   end scrolls past it */
@media (max-width: 899px) and (orientation: portrait) {
  .reel-slot { height: auto; }
  .reel-slot .stage { flex: none; container-type: inline-size; --cell: clamp(44px, calc((100cqw - 42px) / 5), 56px); }
}
@media (orientation: landscape) and (max-height: 540px) {
  .reel-slot { height: auto; }
  .reel-slot .stage { container-type: inline-size; --cell: clamp(44px, calc((48cqw - 42px) / 5), 56px); }
}

/* Title card, wave 7: the two quiet ways in above the acts, the Daily's notice and run of days, and a cue while more of
   the card is below the fold (it leaves once the card's end is in view) */
.title-bill { max-width: 1100px; padding-top: 22px; padding-bottom: 22px; }
.title-goal { margin-bottom: 8px; }
.title-end { height: 1px; }
.title-quiet { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 22px; margin: 0 0 12px; }
.btn.btn-quiet { min-height: 44px; padding: 4px 6px; background: none; border: 0; font-size: 16px; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.btn.btn-quiet:active { background: var(--paper-shade); }
.title-more { justify-content: center; }
.act-card .act-notice { font-size: 15px; font-style: italic; }
.act-notice .notice-head { font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.more-cue {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; height: calc(22px + var(--safe-b)); pointer-events: none;
  background: linear-gradient(rgba(23, 15, 10, 0), rgba(23, 15, 10, 0.7));
}
.more-cue::after {
  content: ''; position: absolute; left: 50%; bottom: calc(5px + var(--safe-b)); width: 9px; height: 9px; margin-left: -6px;
  border: solid var(--paper); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.more-cue.gone { visibility: hidden; }
@media (max-width: 899px) and (orientation: portrait) {
  .title-screen { align-items: flex-start; padding-top: 10px; }
  .title-bill { padding: 16px 14px; }
  .title-figure { width: 60px; height: 84px; margin: -4px -4px 0 6px; }
  .title-kicker { font-size: 13px; letter-spacing: 0.16em; }
  .title-kicker.second { display: none; }
  .title-head { min-height: 0; margin: 4px auto 0; }
  .title-bill > .rule { margin: 8px 0; }
  .title-goal { font-size: 18px; margin: 4px 0 2px; }
  .title-acts { gap: 10px; }
  .act-card { padding: 10px 12px; gap: 4px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .title-screen { align-items: flex-start; padding-top: 8px; }
  .title-bill { padding: 14px 18px; }
  .title-figure, .title-kicker { display: none; }
  .title-head .engraved { height: 44px !important; width: auto; } /* unslop-ignore: the atlas sets its height inline; a short screen needs it smaller */
  .more-cue { margin-right: 0; }
  .title-head { min-height: 0; margin: 2px auto 0; }
  .title-goal { font-size: 18px; margin: 2px 0; }
  .title-bill > .rule { margin: 6px 0; }
}

/* The phone's selection strip: the part's full name on its own line, its rule under it */
.strip-name { display: block; }
@media (max-width: 899px) and (orientation: portrait) {
  .strip-text { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .strip-rule { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; }
}
.btn.reroll-out { background: none; color: var(--paper); border-color: var(--paper-shade); font-size: 14px; letter-spacing: 0.04em; }

/* Workshop held upright on a phone: the rival's card in one row (who, then their bench at the right) and the cart above
   your bench, so the cart is in view over the bell bar without scrolling; offers a little smaller */
@media (max-width: 899px) and (orientation: portrait) {
  .shop { grid-template-areas: 'rival' 'cart' 'bench' 'info'; }
  .rival-card { display: flex; gap: 10px; align-items: flex-start; }
  .rival-card > .rival-who { flex: 1; min-width: 0; }
  .rival-card .rival-top { align-items: flex-start; }
  .rival-card .rival-portrait { width: 44px; height: 56px; }
  .rival-card .rival-name { font-size: 16px; }
  .rival-card .rival-habit { font-size: 15px; line-height: 1.25; }
  .rival-card .bench { --cell: 28px; gap: 2px; }
  .rival-card .bench-frame { margin: 0; padding: 5px; flex: none; }
  .rival-card .rival-live { display: none; }
  .rival-card .rival-peek { display: block; flex: none; }
  .rival-card .machine-wrap { flex: none; }
  .rival-card .machine-head { font-size: 14px; margin: 0 0 4px; }
  .offer { width: 112px; padding: 4px 4px 6px; }
  .offer .plate { width: 76px; height: 62px; }
  .offer-name { font-size: 15px; min-height: 34px; }
  .cart { padding: 8px; }
}

/* The bout on a phone held upright: every part carries its short label (the captions name them). The height of a cell is
   what the two stacked benches allow; its width takes the screen's spare width, so the label fits on one line under a
   smaller picture. */
@media (max-width: 899px) and (orientation: portrait) {
  .stage .bench { --cell-w: clamp(var(--cell), calc((100cqw - 60px) / 5), 96px); grid-template-columns: repeat(5, var(--cell-w)); }
  .stage .cell { width: var(--cell-w); }
  .stage .cell > .plate { bottom: 14px; }
  .stage .cell .cell-label {
    display: block; position: absolute; left: -2px; right: -2px; bottom: 0; pointer-events: none;
    font-size: 12px; font-weight: 700; line-height: 13px; text-align: center; color: var(--ink);
    letter-spacing: -0.03em; white-space: nowrap; overflow: visible;
  }
}