/* Truck Wars 2035 — ink on ivory paper, the look of the cards. */
:root {
  --paper: #F4F1E8;
  --paper-2: #E7E2D3;
  --ink: #1B1A17;
  --wash: #8C8A84;
  --red: #A8342A;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Yu Mincho", "Times New Roman", serif;
  --gutter: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow: hidden;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .1  0 0 0 0 .09  0 0 0 .06 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

#app { position: fixed; inset: 0; overflow: hidden; }
#screens { position: absolute; inset: 0; }
.screen { position: absolute; inset: 0; overflow: hidden; animation: screen-in .18s ease-out; }
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }

button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
img { -webkit-user-drag: none; user-select: none; }
.sym { width: 1em; height: 1em; flex: none; display: block; }

/* ------------------------------------------------------------ the pointing hand */
#hand {
  position: fixed; left: 0; top: 0; width: 48px; height: 36px;
  pointer-events: none; z-index: 2000; display: none;
}
#hand.is-on { display: block; }
#hand svg { width: 48px; height: 36px; display: block; filter: drop-shadow(1px 1px 0 rgba(27, 26, 23, .45)); animation: hand-bob .5s steps(1) infinite; }
#hand[data-dir="up"] svg { transform: rotate(-90deg); }
@keyframes hand-bob { 0% { translate: 0 0; } 50% { translate: 0 2px; } }
body.hand-cursor, body.hand-cursor * { cursor: none !important; }

/* ------------------------------------------------------------ buttons */
.btn {
  appearance: none; -webkit-appearance: none;
  position: relative; cursor: pointer;
  min-height: 50px; padding: 12px 22px;
  font-family: var(--serif); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 2px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4.5px var(--ink), 3px 4px 0 rgba(27, 26, 23, .35);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  touch-action: manipulation;
}
.btn:hover, .btn:focus-visible {
  background: var(--ink); color: var(--paper); outline: none;
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4.5px var(--paper), 3px 4px 0 rgba(27, 26, 23, .35);
}
.btn:active { transform: translate(2px, 3px); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4.5px var(--paper); }
.btn-lg { font-size: 1.2rem; min-height: 58px; }
.btn i { font-style: normal; }

.chip {
  appearance: none; cursor: pointer; min-width: 52px; min-height: 46px; padding: 8px 14px;
  font-family: var(--serif); font-weight: 700; letter-spacing: .12em; font-size: 1rem;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
}
.chip.is-on { background: var(--ink); color: var(--paper); }
.chip:hover, .chip:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.icon-btn {
  appearance: none; cursor: pointer; width: 48px; height: 48px; padding: 0;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 2px;
  display: inline-grid; place-items: center;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--ink);
}
.icon-btn:hover, .icon-btn:focus-visible { background: var(--ink); color: var(--paper); outline: none; box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--paper); }

/* ------------------------------------------------------------ the card */
.tw-card {
  position: relative; display: block; width: 100%; aspect-ratio: 2 / 3;
  cursor: pointer; outline: none; perspective: 900px;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.tw-card:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.tw-body { position: absolute; inset: 0; transition: transform .22s ease, filter .22s ease, opacity .22s ease; transform-origin: 50% 50%; }
.tw-face { position: absolute; inset: 0; overflow: hidden; border-radius: 3.6% / 2.4%; background: var(--paper); box-shadow: 0 1px 0 rgba(27, 26, 23, .5), 0 5px 12px rgba(27, 26, 23, .28); }
.tw-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-card:not(.is-facedown) .tw-body > .tw-cardback { display: none; }
/* B: rule 175: no card is greyed or washed out; the reason is a symbol on it */
.tw-card.is-tapped .tw-body { transform: rotate(90deg) scale(.66); }
.tbl .tw-card.is-fallen .tw-body { filter: grayscale(1) contrast(.92) brightness(.94); } /* B: a fallen card lying on the TABLE is a state of the fight; elsewhere it keeps its colours (rule 175) */
.tw-marks { position: absolute; inset: 0; pointer-events: none; }
.tw-crack { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .8; vector-effect: non-scaling-stroke; }
.tw-fallen-mark {
  position: absolute; right: 6%; top: 5%; width: 27%; aspect-ratio: 1; border-radius: 50%;
  background: var(--paper); color: var(--red); border: 2px solid var(--ink);
  display: grid; place-items: center;
}
.tw-fallen-mark .sym { width: 68%; height: 68%; }
.tw-sealed .tw-face { border: 2px solid var(--ink); }

/* the drawn face of a card whose old image carried a generic title: painting only, our own frame */
.cf { container-type: inline-size; background: var(--paper); color: var(--ink); }
.cf-frame { position: absolute; inset: 1.6%; border: max(1px, .5cqw) solid var(--ink); box-shadow: inset 0 0 0 1.1cqw var(--paper), inset 0 0 0 1.5cqw var(--ink); pointer-events: none; }
.cf-num { position: absolute; left: 0; right: 0; top: 1.4%; text-align: center; font-size: 4.6cqw; line-height: 1; letter-spacing: .12em; font-weight: 700; }
.cf-paint { position: absolute; overflow: hidden; background: var(--paper-2); }
.cf-band { background: var(--paper); z-index: 1; padding: 0 2%; }
.cf-img { position: absolute; max-width: none; display: block; }
/* JEV-061: a skill painting is shown WHOLE - fitted inside the illustration box, never stretched (rule 182) and never clipped, so the feet stay on the card. */
.cf[data-paint="whole"] .cf-img { object-fit: contain; }
.cf-band { position: absolute; left: 3.4%; right: 3.4%; top: 90%; bottom: 2.4%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .6cqw; overflow: hidden; }
.cf-name { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.02; text-wrap: balance; }
.cf-sub { font-size: 2.6cqw; letter-spacing: .16em; line-height: 1; }

/* hover lift and flip */
#lift-layer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.tw-lift {
  position: fixed; perspective: 1400px; pointer-events: none; container-type: inline-size;
  filter: drop-shadow(0 16px 22px rgba(27, 26, 23, .45));
}
.tw-lift.is-pinned, .tw-lift.is-flipped { pointer-events: auto; cursor: pointer; }
.tw-lift-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.tw-lift .tw-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: none; }
.tw-lift .tw-lore { transform: rotateY(180deg); }

.tw-lore { background: var(--paper); color: var(--ink); }
.tw-lore-frame {
  position: absolute; inset: 4cqw; border: .7cqw solid var(--ink);
  box-shadow: inset 0 0 0 1.5cqw var(--paper), inset 0 0 0 2cqw var(--ink);
  padding: 7.5cqw 6cqw 6cqw; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2.6cqw;
  overflow: hidden;
}
.tw-lore-name { font-size: 7.6cqw; line-height: 1.12; letter-spacing: .04em; font-weight: 700; text-wrap: balance; }
.tw-lore-numeral { font-size: 4.8cqw; letter-spacing: .2em; color: var(--red); font-weight: 700; }
.tw-lore-type { font-size: 3.7cqw; letter-spacing: .16em; text-transform: uppercase; }
.tw-lore-nums { list-style: none; margin: 1cqw 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.6cqw 4.4cqw; }
.tw-lore-nums li { display: flex; align-items: center; gap: 1.3cqw; font-size: 5.6cqw; }
.tw-lore-nums .sym { width: 6.4cqw; height: 6.4cqw; }
.tw-lore-nums b { font-weight: 700; }
.tw-lore-mat b { font-size: 4.4cqw; }
.tw-lore-text { font-size: 4.6cqw; line-height: 1.38; margin-top: 1.2cqw; text-wrap: pretty; }

/* ------------------------------------------------------------ top bar */
.topbar {
  position: absolute; left: 0; right: 0; top: 0; height: calc(56px + var(--safe-top)); padding: var(--safe-top) 10px 0;
  display: flex; align-items: center; justify-content: space-between; z-index: 20;
}
.topbar-title { font-size: 1.3rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; display: flex; align-items: baseline; gap: 12px; }
.topbar-title .count { font-size: .95rem; letter-spacing: .06em; color: var(--ink); }
.topbar-spacer { width: 48px; }
/* JOB-2026100518: the left end of the topbar holds more than the back button now (the Quick Run button sits beside it): the two keep
   their own group, so the bank stays in the middle and the purse on the right. */
.topbar-group { display: inline-flex; align-items: center; gap: 8px; }
.bank { display: flex; align-items: center; gap: 8px; font-size: 1.6rem; font-weight: 700; }
.bank .sym { width: 24px; height: 24px; }
.bank-next { font-size: 1.05rem; color: var(--red); font-variant-numeric: tabular-nums; margin-left: 4px; }
.bank-next:empty { display: none; }

/* ------------------------------------------------------------ title */
.title { background: var(--paper); }
.title-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; }
.title-head { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 6.5vh); text-align: center; padding: 0 var(--gutter); }
.title-name { font-size: clamp(2.2rem, 11vw, 4.8rem); line-height: 1.02; letter-spacing: .1em; font-weight: 700; display: flex; flex-direction: column; align-items: center; color: var(--ink); }
.title-name span { display: block; }
.title-year { color: var(--red); letter-spacing: .3em; padding-left: .3em; }
.title-line { margin-top: 1em; font-size: clamp(.72rem, 3.3vw, 1.05rem); letter-spacing: .3em; font-weight: 700; color: var(--ink); }
.title[data-tone="paper"] .title-name, .title[data-tone="paper"] .title-line { color: var(--paper); text-shadow: 0 2px 0 var(--ink), 0 0 14px rgba(27, 26, 23, .8); }
.title[data-tone="paper"] .title-year { color: var(--paper); }
.title-menu {
  position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 5vh);
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 var(--gutter);
}
.title-menu .btn { width: min(70vw, 300px); }
.title-row { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 4px; }
.chip-icon .sym { width: 22px; height: 22px; }

/* R7/R11 (JEV-2026100905): the folded doors of the title. They stand in a strip of their own, out of the menu's column at
   the foot of the screen, so the three plates and the radio toast keep their free space at every size. A stranger is met
   with PARTIR alone and sees nothing here. */
.title-door { position: absolute; left: 12px; right: 12px; top: calc(var(--safe-top) + 6px); display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; z-index: 30; pointer-events: none; }
.title-door[hidden] { display: none; }
.door-btn { pointer-events: auto; appearance: none; cursor: pointer; min-height: 38px; padding: 5px 11px; font-family: var(--serif); font-weight: 700; letter-spacing: .06em; font-size: .8rem; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; box-shadow: 2px 3px 0 rgba(27, 26, 23, .35); }
.door-btn:hover, .door-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (max-width: 430px) { .door-btn { font-size: .74rem; padding: 5px 9px; } }
@media (max-height: 480px) and (min-aspect-ratio: 14/10) {
  .title-door { top: auto; bottom: calc(var(--safe-bottom) + 8px); left: 12px; right: auto; max-width: 44vw; justify-content: flex-start; }
}

/* ------------------------------------------------------------ road */
.road-screen { background: var(--paper); }
.road-stage { position: absolute; left: 0; right: 0; top: calc(56px + var(--safe-top)); bottom: 0; }
.road-screen .road, .return-screen .road { position: absolute; inset: 0; }
.road-svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.leg { fill: none; }
.leg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.leg-edge { stroke: var(--ink); }
.leg-paper { stroke: var(--paper); }
.leg-wash { stroke: var(--wash); opacity: .42; }
.leg-dash { stroke: var(--ink); stroke-dasharray: 9 13; stroke-linecap: butt !important; }
.leg.is-closed { opacity: .32; }
.dust-dot { fill: var(--ink); }
.road-cards { position: absolute; inset: 0; }
.road-node { position: absolute; left: 0; top: 0; z-index: 2; }
.road-node .tw-card { transition: transform .18s ease-out; }
/* on the road a closed place is grayed but never see-through: the road must not show through a card */
.road-node.is-next .tw-card { filter: drop-shadow(0 0 0 var(--ink)); }
.road-node.is-selected { z-index: 6; }
.road-node.is-selected .tw-card { transform: translateY(-12px) scale(1.12); }
.road-node.is-next .tw-face { box-shadow: 0 0 0 2px var(--red), 0 6px 14px rgba(27, 26, 23, .35); }
.road-tag {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 8px); white-space: nowrap;
  display: flex; align-items: center; gap: 6px; padding: 4px 10px; z-index: 3;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font-size: .98rem; font-weight: 700;
  box-shadow: 2px 3px 0 rgba(27, 26, 23, .35);
}
.road-tag .sym { width: 16px; height: 16px; }
.road-tag.is-short { border-style: dashed; background: #DAD5C6; }
.road-node.is-selected .road-tag { transform: translate(-50%, 16px); }
.road-done {
  position: absolute; right: -7px; top: -7px; width: 28px; height: 28px; border-radius: 50%; z-index: 3;
  background: var(--paper); border: 2px solid var(--ink); color: var(--ink); display: grid; place-items: center;
}
.road-done .sym { width: 18px; height: 18px; }
.road-truck { position: absolute; left: 0; top: 0; z-index: 8; filter: drop-shadow(2px 4px 3px rgba(27, 26, 23, .4)); }
.road-fan { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 5; display: none; }
.is-fan-open .road-fan { display: block; }
.fan-card { position: absolute; pointer-events: auto; transform-origin: 50% 100%; transition: translate .15s ease-out; }
.fan-card:hover { translate: 0 -12px; }
.gobar { position: absolute; left: 0; right: 0; bottom: calc(var(--fan-visible, 100px) - 6px); display: flex; justify-content: center; z-index: 10; pointer-events: none; }
.gobar .btn { pointer-events: auto; width: min(80vw, 340px); }
.road-stage.is-short .gobar { display: none; }
.is-driving .fan-card, .is-driving .road-node { pointer-events: none; }

/* ------------------------------------------------------------ cartes */
.cartes { background: var(--paper); }
.cartes-scroll { position: absolute; left: 0; right: 0; top: calc(56px + var(--safe-top)); bottom: 0; overflow-y: auto; overflow-x: hidden; padding: 0 var(--gutter) 60px; }
.cartes-group { max-width: 1240px; margin: 0 auto; }
.cartes-group h2 { font-size: 1.1rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; border-bottom: 2px solid var(--ink); padding: 18px 0 6px; margin: 0 0 14px; }

/* ------------------------------------------------------------ film */
.film { background: var(--ink); }
.film-stage { position: absolute; inset: 0; background: #000; }
.film-stage.is-stills { background: var(--paper); }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.film-skip { position: absolute; top: calc(var(--safe-top) + 12px); right: 12px; z-index: 30; min-height: 46px; padding: 8px 16px; }
.film-skip .sym { width: 20px; height: 20px; }
.film-view { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--safe-top) + 64px) 18px calc(var(--safe-bottom) + 24px); }
.film-panels { flex: 0 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: center; justify-items: center; min-height: 0; }
.film-panels[data-count="0"] { display: block; }
.film-panels[data-count="1"] { grid-template-columns: 1fr; }
.film-panel { border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); background: var(--paper); transform: rotate(var(--tilt, 0deg)); overflow: hidden; max-width: 100%; }
.film-panels[data-count="1"] .film-panel { grid-column: 1; }
.film-panel.is-main { grid-column: 1 / -1; }
.film-panels[data-count="1"] .film-panel.is-main .film-painting { height: min(52dvh, 72vw * 1.15); }
.film-panels:not([data-count="1"]) .film-panel.is-main .film-painting { height: 30dvh; }
.film-panel.is-side .film-painting { height: 17dvh; }
.film-painting { display: block; overflow: hidden; max-width: 100%; }
.film-painting-img { width: 100%; height: 100%; background-repeat: no-repeat; animation: film-drift 14s ease-out forwards; }
/* Keep the entire illustration visible throughout the gentle approach. */
@keyframes film-drift { from { transform: scale(.96); } to { transform: scale(1); } }
/* JEV-080214 (item 1): a full-frame still may never expose the stage behind it, so its approach only ever goes
   further in (never below 1 like film-drift does on a tilted card panel). The rule that names it lives with the
   canonical stills block below. */
@keyframes film-drift-cover { from { transform: scale(1); } to { transform: scale(1.035); } }
.film-stage.is-paused .film-painting-img { animation-play-state: paused; }
.film-caption {
  margin: 22px auto 0; width: min(100%, 720px); padding: 12px 16px; min-height: 5.2em;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 4px 0 var(--ink);
  font-size: clamp(1.05rem, 4.3vw, 1.4rem); line-height: 1.35; text-align: center; color: var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.film-caption.is-radio { border-style: dashed; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: clamp(.95rem, 3.8vw, 1.25rem); text-align: left; }
.film-caption.is-slate { background: transparent; border: 0; box-shadow: none; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; }
.film-caption.is-objective { background: var(--paper); border: 3px double var(--red); color: var(--red); box-shadow: none; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; transform: rotate(-3deg); }
.film-caption.is-quote { font-style: italic; }
.film-speaker { font-style: normal; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .78em; color: var(--red); }
/* JEV-080212 (B9): the canonical caption fallback of a film whose video a hold refuses (the three Dossier IV films)
   or that has no file at all. The record's own painting covers the film's own frame like a film frame, the caption
   sits at the foot of it, and a scene with no eligible public painting keeps its paper with the explicit
   data-visual-coverage="missing" state instead of a stand-in image. */
.film-stage.is-canonical-stills .film-view { padding: 0; justify-content: flex-end; }
.film-stage.is-canonical-stills .film-panels { position: absolute; inset: 0; margin: 0; }
.film-stage.is-canonical-stills .film-panel { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; background: transparent; border: 0; box-shadow: none; transform: none; }
.film-stage.is-canonical-stills .film-panel.is-side { display: none; }
/* JEV-080214 (item 1): the single-panel and landscape rules above (0,5,0) used to win the cascade over the old
   canonical-stills rule (0,4,0), which left the picture in a 322.9 px (phone) / 468 px (desktop) band at the top of
   a black stage. This selector is (0,6,0) and beats both, so the record's own scene image really occupies the
   film's own frame. The painting IS the frame; the illustration inside it is measured to cover that frame through
   its own aspect ratio (film.js data-cover-ar), so it is never stretched and never leaves a letterbox band. */
.film-stage.is-canonical-stills .film-panels .film-panel.is-main .film-painting {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  display: flex; align-items: center; justify-content: center;
}
/* The illustration of a full-frame still is measured to cover the painting box (film.js coverPainting). A flex item
   shrinks by default, which would squeeze the cover back into the frame and stretch the picture: it never shrinks
   here, and its approach only ever goes further in (never below the frame, unlike film-drift on a card panel). */
.film-stage.is-canonical-stills .film-panels .film-panel.is-main .film-painting .film-painting-img {
  flex: none; animation-name: film-drift-cover;
}
.film-stage.is-canonical-stills.is-covered { background: #000; }
.film-stage.is-canonical-stills .film-caption { position: relative; z-index: 2; width: min(92%, 720px); margin: 0 auto calc(var(--safe-bottom) + 18px); }
.film-stage.is-canonical-stills[data-visual-coverage="missing"] .film-caption { margin: auto; }
/* JEV-080214 (item 1): the slate was left transparent, i.e. ink #1B1A17 on the black stage (1.21:1). Over the
   actual painting that is not legible, so inside the canonical still it takes the same opaque paper plate as the
   narration, the quote and the radio: the ink then sits on a known colour at 15.41:1 wherever the picture is. */
.film-stage.is-canonical-stills .film-caption.is-slate { background: var(--paper); border: 0; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }

/* ------------------------------------------------------------ return */
.return-screen { background: var(--paper); }
.ret-board { position: absolute; inset: 0; background: var(--paper); }
.ret-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ret-scroll { position: absolute; left: 0; right: 0; top: 0; bottom: calc(86px + var(--safe-bottom)); overflow-y: auto; overflow-x: hidden; padding: calc(var(--safe-top) + 18px) 16px 12px; }
.ret-rows { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.ret-head { margin-bottom: 10px; }
.ret-head span { display: inline-block; padding: 5px 14px; background: var(--paper); border: 2px solid var(--ink); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--ink); font-size: 1.05rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.ret-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + var(--safe-bottom)); display: flex; gap: 12px; justify-content: center; }
.ret-bar .btn { min-width: 150px; }
.ret-scroll { display: flex; flex-direction: column; }
.ret-rows { margin: auto auto 0; width: 100%; }  /* safe centering: never clips the top when the rows are taller than the screen */
.ret-board.is-won .ret-rows { margin: auto; }
.ret-board.is-lost .ret-head { text-align: center; }

/* W3: JOB-2026100702 (rule 231, the spine): one lit card on the return screen: the upgrade that matters now. It sits
   over the bar, marked like the road's own lit card, and one tap buys it; CONTINUER skips it. The host stays empty and
   hidden when the crew is whole: nothing to buy, nothing on the screen. */
.ret-up-host { position: absolute; left: 16px; right: 16px; bottom: calc(86px + var(--safe-bottom)); display: flex; justify-content: center; pointer-events: none; z-index: 4; }
.ret-up-host:empty { display: none; }
.ret-scroll:has(+ .ret-up-host:not(:empty)) { bottom: calc(170px + var(--safe-bottom)); }
.ret-up { pointer-events: auto; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; max-width: 420px; padding: 8px 14px; font-family: var(--serif); color: var(--ink); background: var(--paper); border: 3px solid var(--ink); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5.5px var(--ink), 4px 6px 0 rgba(27, 26, 23, .4); }
.ret-up:hover, .ret-up:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.ret-up-sym { display: inline-flex; flex: none; }
.ret-up-name { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; }
.ret-up-line { font-style: normal; font-size: .82rem; opacity: .85; }
.ret-up-price { display: inline-flex; align-items: center; gap: 4px; flex: none; font-variant-numeric: tabular-nums; font-weight: 700; }
.ret-up-price .sym { width: 1em; height: 1em; } /* rule 160: the glyph beside a number is never taller than the number */
.ret-up.is-short { border-color: var(--red); }
.ret-up.is-short .ret-up-price { color: var(--red); }

@media (min-width: 900px) and (min-height: 700px) {
  .ret-scroll { padding-left: 72px; padding-right: 72px; }
  .ret-head { text-align: center; }
  .film-view { padding-top: calc(var(--safe-top) + 24px); }
}
@media (min-aspect-ratio: 11/10) {
  .film-panels { display: flex; flex-direction: row; gap: 22px; align-items: center; justify-content: center; }
  .film-panel.is-main .film-painting, .film-panels[data-count="1"] .film-panel.is-main .film-painting { height: 52dvh; }
  .film-panel.is-side .film-painting { height: 34dvh; }
  .film-view { padding-top: calc(var(--safe-top) + 20px); }
  .film-caption { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #hand svg { animation: none; }
  .film-painting-img { animation: none; }
  .screen { animation: none; }
}

/* rule 37 and 42: large cards (270 px on a desktop, two per row on a phone), every row centered, an incomplete last row too */
.cartes-grid, .ret-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 16px; }
.cartes-cell, .ret-cell { width: clamp(150px, calc((100vw - 48px) / 2), 270px); min-width: 0; }
.ret-rows { align-items: center; }
@container (max-width: 95px) { .cf-sub { display: none; } .cf-band { top: 89%; } }

/* the lost row: the same card size as the rows above, turned sideways (tapped) and gray, its frame and name at full contrast */
.ret-row-lost .ret-cell { --cw: clamp(150px, calc((100vw - 48px) / 2), 270px); width: calc(var(--cw) * 1.56); height: calc(var(--cw) * 1.06); position: relative; }
.ret-row-lost .ret-cell .tw-card { position: absolute; left: 50%; top: 50%; width: var(--cw); transform: translate(-50%, -50%); }
.ret-row-lost .tw-card.is-tapped .tw-body { transform: rotate(90deg) scale(1); }
.ret-row-lost .tw-card.is-fallen .tw-face { box-shadow: 0 2px 8px rgba(27, 26, 23, .45); }

/* the back of a card: a quote (people) or a code (AIs and machines) */
.tw-quote { margin: 1cqw 0 0; font-style: italic; font-size: 6.2cqw; line-height: 1.22; text-wrap: balance; }
.tw-code { position: relative; width: 100%; margin-top: .6cqw; padding: 2cqw 8cqw 2cqw 2.4cqw; border: .5cqw solid var(--ink); background: rgba(27, 26, 23, .05); text-align: left; }
.tw-code-text { display: block; font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 3.5cqw; line-height: 1.3; letter-spacing: 0; white-space: normal; overflow-wrap: normal; word-break: keep-all; user-select: text; -webkit-user-select: text; cursor: text; }
.tw-code[data-kind="morse"] .tw-code-text { font-size: 5cqw; letter-spacing: .1em; word-spacing: .35em; }
.tw-code-copy { position: absolute; right: 1.2cqw; top: 1.2cqw; width: 7cqw; height: 7cqw; padding: 0; border: .4cqw solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.tw-code-copy .sym { width: 4.6cqw; height: 4.6cqw; }
.tw-lore-frame { gap: 1.8cqw; }

/* ------------------------------------------------------------ scenes (rule 53): panels of paper and ink */
.scene { background: var(--paper); }
.scene-stage { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 62px) 16px calc(var(--safe-bottom) + 16px); gap: 14px; }
.scene-art { flex: 0 0 62%; min-height: 0; display: grid; place-items: center; }
.scene-frame { width: 100%; height: 100%; border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); overflow: hidden; background: var(--paper-2); transform: rotate(-.4deg); }
.scene-frame img { width: 100%; height: 100%; object-fit: contain; display: block; transform-origin: 50% 55%; } /* B: rule 182: a landscape painting in a tall frame is fitted whole on the paper, never cut through its subject */
.scene-text { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.scene.scene .scene-stage.no-art .scene-art { display: none; }
.scene-stage.no-art .scene-text { flex: 1; }
.scene-line { width: min(100%, 720px); padding: 12px 16px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); font-size: clamp(1.05rem, 4.3vw, 1.4rem); line-height: 1.38; text-align: center; color: var(--ink); display: flex; gap: 14px; align-items: center; justify-content: center; }
.scene-line p { text-wrap: pretty; }
.scene-line.is-slate { background: transparent; border: 0; box-shadow: none; letter-spacing: .28em; text-transform: uppercase; font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.scene-line.is-radio { border-style: dashed; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: clamp(.95rem, 3.8vw, 1.25rem); text-align: left; }
.scene-line.is-quote { font-style: italic; text-align: left; }
.scene-speaker { flex: none; width: clamp(54px, 15vw, 84px); aspect-ratio: 2 / 3; position: relative; }
.scene-speaker .tw-face { position: absolute; inset: 0; }
.scene-skip { position: absolute; top: calc(var(--safe-top) + 12px); right: 12px; z-index: 30; min-height: 46px; padding: 8px 16px; }
.scene-skip .sym { width: 20px; height: 20px; }
@media (min-aspect-ratio: 11/10) {
  .scene-stage { flex-direction: row; padding: calc(var(--safe-top) + 24px) 28px calc(var(--safe-bottom) + 24px); gap: 28px; }
  .scene-art { flex: 0 0 60%; }
  .scene-text { flex: 1 1 0; }
  .scene-stage.no-art .scene-text { margin: 0 auto; max-width: 720px; }
}

/* ------------------------------------------------------------ the team: cards with their gear fanned under them */
.team { background: var(--paper); }
.team-scroll { position: absolute; left: 0; right: 0; top: calc(56px + var(--safe-top)); bottom: 0; overflow-y: auto; overflow-x: hidden; padding: 8px var(--gutter) 60px; }
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 18px; margin: 0 auto; max-width: 1400px; }
.team-cell { --w: clamp(120px, calc((100vw - 60px) / 2), 230px); width: var(--w); padding-bottom: calc(var(--w) * 0.62); position: relative; }
.fan-stack { position: relative; width: 100%; aspect-ratio: 2 / 3; }
.fan-host { position: absolute; inset: 0; z-index: 10; }
.fan-gear { position: absolute; left: 0; width: 100%; aspect-ratio: 2 / 3; transform-origin: 50% 8%; }
.fan-more { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 700; z-index: 12; }

/* ------------------------------------------------------------ the menu sheet and the radio */
.sheet { position: absolute; inset: 0; z-index: 900; display: grid; place-items: center; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(27, 26, 23, .5); }
.sheet-card { position: relative; width: min(92vw, 560px); max-height: 86dvh; overflow-y: auto; padding: 22px; background: var(--paper); border: 3px solid var(--ink); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6.5px var(--ink), 6px 8px 0 rgba(27, 26, 23, .45); }
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px; }
.sheet-entry { appearance: none; cursor: pointer; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font-family: var(--serif); font-weight: 700; font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; box-shadow: 3px 4px 0 rgba(27, 26, 23, .3); }
.sheet-entry.is-on { background: var(--paper-2); }
.sheet-entry:hover, .sheet-entry:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.sheet-close { appearance: none; cursor: pointer; position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--ink); color: var(--ink); padding: 0; }
.sheet-close.is-inline { position: static; flex: none; }
.sheet-close:hover, .sheet-close:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.sheet-grid + .sheet-close { display: none; }
.radio-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.radio-head h2 { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 1.15rem; letter-spacing: .18em; text-transform: uppercase; }
.stations { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.station-btn, .tune { appearance: none; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); }
.station.is-on > .station-btn { background: var(--ink); color: var(--paper); }
.station-btn:hover, .station-btn:focus-visible, .tune:hover, .tune:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; }
.tunes { list-style: none; margin: 6px 0 0 14px; padding: 0; display: grid; gap: 6px; }
.tune { font-size: .98rem; border-width: 1.5px; justify-content: space-between; }
.tune.is-on { background: var(--paper-2); font-weight: 700; }
.tune .fx { display: inline-flex; align-items: center; gap: 1px; font-style: normal; color: var(--red); }

/* the name of the station that starts, shown for two seconds; the radio indicator with the effect of the tune */
.radio-toast { position: absolute; left: 50%; top: calc(var(--safe-top) + 64px); transform: translateX(-50%); z-index: 800; display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 4px 0 rgba(27, 26, 23, .4); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .95rem; pointer-events: none; white-space: nowrap; }
.radio-toast.is-hidden { display: none; }
.radio-ind { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.radio-ind .fx { display: inline-flex; align-items: center; color: var(--ink); }
.radio-ind .fx.is-down { color: var(--red); }

.ret-pay { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 4px 14px; background: var(--paper); border: 2px solid var(--ink); font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 2px 3px 0 rgba(27, 26, 23, .3); }
.road-waypoint { z-index: 1; }
.road-waypoint.is-closed .tw-card { opacity: 1; }
.sheet-entry .sym { width: 34px; height: 34px; }

/* ------------------------------------------------------------ the hour: sky behind the cards, crossfaded in 1.5 s */
.wash-host { isolation: isolate; }
.wash-host > .wash-backdrop { z-index: -2; }
.has-wash > .topbar { background: var(--paper); }
.has-wash > .city-feedback:not(:empty) { background: var(--paper); padding: 4px 8px; }
#wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: transparent; }
#wash * { pointer-events: none; }
.wash-sky { position: absolute; left: var(--sky-left, 0%); top: var(--sky-top, 0%); width: var(--sky-width, 100%); height: var(--sky-height, 40%); overflow: hidden; container-type: size; mask-image: linear-gradient(#000 0 70%, transparent 100%); }
.wash-starfield { position: absolute; inset: 0; opacity: 0; transition: opacity var(--wash-ms, 1500ms) ease-in-out; }
.wash-star { position: absolute; border-radius: 50%; background: #fff4d9; box-shadow: 0 0 2px rgba(244, 236, 218, .35); }
.wash-star.is-bright::before, .wash-star.is-bright::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1px; height: 6px; background: rgba(255, 247, 224, .42); transform: translate(-50%, -50%); }
.wash-star.is-bright::after { transform: translate(-50%, -50%) rotate(90deg); }
#wash[data-moment="night"] .wash-starfield { opacity: 1; }
.wash-orbit { --celestial: clamp(8px, 30cqh, 32px); position: absolute; top: max(2px, calc(42% - var(--celestial) / 2)); right: max(12px, 8%); width: calc(var(--celestial) * 3); height: calc(var(--celestial) * 3); transform: rotate(0deg); transition: transform var(--wash-ms, 1500ms) ease-in-out; }
.wash-sun, .wash-moon { position: absolute; left: var(--celestial); width: var(--celestial); height: var(--celestial); border-radius: 50%; transition: opacity var(--wash-ms, 1500ms) ease-in-out; }
.wash-sun { top: 0; background: radial-gradient(circle at 44% 42%, #fff4cf 0 34%, #f4d695 67%, rgba(233, 176, 101, .72) 88%, transparent 100%); box-shadow: 0 0 5px rgba(247, 208, 137, .36); filter: blur(.25px); }
.wash-sun::before { content: ''; position: absolute; inset: -100%; border-radius: 50%; background: radial-gradient(circle, rgba(249, 198, 101, .32) 12%, rgba(244, 186, 94, .16) 30%, rgba(231, 164, 73, .05) 48%, transparent 69%); }
#wash[data-moment="dusk"] .wash-sun { background: radial-gradient(circle at 44% 42%, #ffe8b3 0 34%, #eabd7d 67%, rgba(215, 148, 86, .68) 88%, transparent 100%); }
.wash-moon { bottom: 0; opacity: 0; transform: rotate(180deg); background: radial-gradient(ellipse at 62% 29%, rgba(116, 118, 112, .22) 0 9%, transparent 19%), radial-gradient(ellipse at 73% 57%, rgba(133, 130, 119, .25) 0 12%, transparent 25%), radial-gradient(ellipse at 43% 69%, rgba(129, 130, 122, .2) 0 7%, transparent 15%), radial-gradient(circle at 48% 36%, rgba(255, 248, 220, .4) 0 17%, transparent 45%), radial-gradient(circle at 60% 40%, #e8e4ce 0 38%, #cac9bb 74%, #a7aca8 100%); box-shadow: 0 0 4px rgba(231, 231, 208, .13); }
.wash-moon::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse 82% 105% at -6% 42%, rgba(20, 30, 40, .96) 0 48%, rgba(32, 42, 49, .84) 64%, rgba(55, 62, 64, .37) 80%, transparent 97%); }
.wash-moon::after { content: ''; position: absolute; inset: -90%; border-radius: 50%; background: radial-gradient(circle, transparent 16%, rgba(207, 221, 237, .24) 24%, rgba(187, 211, 238, .12) 38%, rgba(171, 197, 225, .035) 53%, transparent 69%); }
#wash[data-moment="dawn"] .wash-orbit { transform: rotate(-35deg); }
#wash[data-moment="dusk"] .wash-orbit { transform: rotate(90deg); }
#wash[data-moment="night"] .wash-orbit { transform: rotate(180deg); }
#wash[data-moment="night"] .wash-sun { opacity: 0; }
#wash[data-moment="night"] .wash-moon { opacity: 1; }
.wash-clouds { position: absolute; inset: 0; opacity: 0; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 14% 86%, transparent); transition: opacity var(--wash-ms, 1500ms) ease-in-out; }
.wash-clouds::before, .wash-clouds::after { content: ''; position: absolute; left: -40%; top: -12%; width: 160%; height: 62%; background: radial-gradient(ellipse at 18% 45%, rgba(216, 224, 230, .8) 0 12%, transparent 36%), radial-gradient(ellipse at 47% 20%, rgba(213, 222, 230, .75) 0 14%, transparent 40%), radial-gradient(ellipse at 80% 47%, rgba(223, 229, 235, .8) 0 15%, transparent 37%); filter: blur(9px); animation: wash-cloud-drift 65s linear infinite alternate; }
.wash-clouds::after { top: 3%; left: -20%; opacity: .65; transform: scaleX(-1); animation-delay: -35s; animation-duration: 90s; }
@keyframes wash-cloud-drift { from { translate: -5% 0; } to { translate: 18% 4%; } }
#wash[data-moment="night"] .wash-clouds { opacity: 0; }
#wash:is([data-weather="overcast"], [data-weather="rain"], [data-weather="snow"]) .wash-clouds { opacity: .8; }
#wash[data-moment="night"]:is([data-weather="overcast"], [data-weather="rain"], [data-weather="snow"]) .wash-clouds { opacity: .28; }
#wash:is([data-weather="overcast"], [data-weather="rain"], [data-weather="snow"]) .wash-starfield, #wash:is([data-weather="overcast"], [data-weather="rain"], [data-weather="snow"]) .wash-orbit { opacity: 0; }
.wash-rain, .wash-snow { display: none; position: absolute; inset: 0; overflow: hidden; }
#wash[data-weather="rain"] .wash-rain, #wash[data-weather="snow"] .wash-snow { display: block; }
.wash-rain::before { content: ''; position: absolute; inset: -60%; background-image: repeating-linear-gradient(108deg, transparent 0 47px, rgba(217, 230, 241, .5) 48px, transparent 49px 98px), repeating-linear-gradient(108deg, transparent 0 83px, rgba(217, 230, 241, .22) 84px, transparent 85px 149px); background-size: 183px 290px, 239px 370px; mask-image: repeating-linear-gradient(0deg, transparent 0 15px, #000 19px 39px, transparent 44px 94px); animation: wash-rain-fall .95s linear infinite; }
@keyframes wash-rain-fall { from { transform: translate3d(35px, -130px, 0); } to { transform: translate3d(-35px, 130px, 0); } }
.wash-snow i { position: absolute; width: var(--flake); height: var(--flake); border-radius: 50%; background: #fff; opacity: .8; box-shadow: 0 0 3px rgba(244, 248, 255, .45); animation: wash-snow-fall var(--fall) var(--delay) linear infinite; }
@keyframes wash-snow-fall { from { transform: translate3d(0, -65vh, 0); } to { transform: translate3d(var(--drift), 45vh, 0); } }
#wash[data-exposure="indoor"][data-weather], #wash[data-exposure="window"]:not(.has-window) { background-color: transparent; }
#wash[data-exposure="indoor"][data-weather] > *, #wash[data-exposure="indoor"] .wash-orbit, #wash[data-exposure="window"]:not(.has-window) > *, #wash[data-exposure="window"]:not(.has-window) .wash-orbit { display: none; }
html[data-screen="film"] #wash, html[data-screen="title"] #wash { display: none; }
.hour-mark { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.hour-mark .sym { width: 20px; height: 20px; }
#wash.is-instant, #wash.is-instant *, #wash.is-instant *::before, .reduce-motion #wash, .reduce-motion #wash *, .reduce-motion #wash *::before { transition: none; }
.reduce-motion #wash *, .reduce-motion #wash *::before, .reduce-motion #wash *::after { animation: none; }
@media (prefers-reduced-motion: reduce) { #wash, #wash *, #wash *::before { transition: none; } #wash *, #wash *::before, #wash *::after { animation: none; } }

/* ------------------------------------------------------------ the Codex: one fan per class (point 13) */
.cdx-stage { overflow-x: hidden; overflow-y: hidden; padding: 0; }
.cdx-stage.is-scrolling { overflow-y: auto; }
.cdx-canvas { position: relative; width: 100%; height: 100%; }
.cdx-fan { position: absolute; transition: left .32s ease, top .32s ease, width .32s ease, height .32s ease, opacity .25s ease; }
.cdx-hand { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; scrollbar-width: thin; }
.cdx-track { position: relative; height: 100%; }
.cdx-slot { position: absolute; transform-origin: 50% 118%; transition: left .32s ease, top .32s ease, width .32s ease, height .32s ease, transform .32s ease; }
.cdx-slot .tw-card { width: 100%; height: 100%; }
.cdx-slot.is-folded { pointer-events: none; }
.cdx-tab { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 34px; min-width: 76px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px 10px 0 0; color: var(--ink); cursor: pointer; font: inherit; font-size: .78rem; letter-spacing: .06em; z-index: 1; }
.cdx-fan.is-open .cdx-tab { background: var(--ink); color: var(--paper); }
.cdx-tab .sym { width: 20px; height: 20px; }
.cdx-n { font-variant-numeric: tabular-nums; }
.cdx-fan::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .cdx-fan, .cdx-slot { transition: none; } }

.radio-toast .rt-tune { font-weight: 400; letter-spacing: .04em; text-transform: none; opacity: .8; }

/* J: JOB-034, item 4: the line of a returning player: the card of the place in hand, the hourglass and its turns, and
   +N for the turns that came back while he was away. Symbols and numbers only, two seconds, under the top bar. */
.resume-line { position: absolute; left: 50%; top: calc(var(--safe-top) + 64px); transform: translateX(-50%); z-index: 805; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 4px 0 rgba(27, 26, 23, .4); pointer-events: none; white-space: nowrap; }
.resume-line.is-hidden { display: none; }
.resume-line .rl-place { display: block; width: 32px; height: 48px; object-fit: cover; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--paper-2); }
.resume-line .rl-turns { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.resume-line .rl-turns .sym { width: 22px; height: 22px; }
.resume-line .rl-gain { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--red); }

/* ------------------------------------------------------------ the bottom fan is the menu (point 15) */
.mfan { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; pointer-events: none; }
.road-screen > .mfan { position: absolute; }
.mfan-card { appearance: none; position: absolute; padding: 0; cursor: pointer; pointer-events: auto; border: 2px solid var(--ink); border-radius: 6px; background-color: var(--paper); background-size: cover; background-position: 50% 30%; color: var(--ink); transform-origin: 50% 100%; transform: rotate(var(--rot, 0deg)); transition: left .28s ease, transform .22s ease, opacity .22s ease, translate .22s ease; box-shadow: 2px 3px 0 rgba(27, 26, 23, .35), inset 0 0 0 2px var(--paper); }
.mfan-card:hover, .mfan-card:focus-visible { translate: 0 -8px; outline: none; }
.mfan-card.is-open { translate: 0 -16px; transform: rotate(0deg) scale(1.06); }
.mfan-card.is-here { box-shadow: 2px 3px 0 rgba(27, 26, 23, .35), inset 0 0 0 2px var(--paper), 0 0 0 2px var(--ink); }
.mfan-sym { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); width: 62%; aspect-ratio: 1; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; }
.mfan-sym .sym { width: 62%; height: 62%; }
.mfan-dot { position: absolute; right: -5px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); }
.mfan-dot[hidden] { display: none; }
.mfan-card.is-glow { animation: mfan-glow 1.1s ease-out 1; }
@keyframes mfan-glow { 0% { filter: none; } 30% { filter: drop-shadow(0 0 10px rgba(255, 210, 120, .95)) brightness(1.2); } 100% { filter: none; } }
.mfan-fly { position: fixed; width: 28px; height: 42px; z-index: 3000; pointer-events: none; border: 2px solid var(--ink); border-radius: 3px; background: var(--paper) url(../assets/ui/card-back.svg) center/cover; box-shadow: 2px 3px 0 rgba(27, 26, 23, .4); } /* H: the path is relative to css/ (a 404 the first time a card flew to the menu) */
.sheet-fan { place-items: end center; }
.sheet-fan .sheet-scrim { background: rgba(27, 26, 23, .35); }
.sheet-fan .mfan { animation: mfan-up .26s cubic-bezier(.2, .8, .3, 1); }
.sheet-fan .mfan { bottom: var(--lift, 0px); } /* B: the cards of the menu card of a phone dock rise above the dock */
@keyframes mfan-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.road-screen .mfan { z-index: 6; }
@media (prefers-reduced-motion: reduce) { .sheet-fan .mfan, .mfan-card { animation: none; transition: none; } }

/* ------------------------------------------------------------ song cards (point 12) */
.cf-sub .sym { width: 4.6cqw; height: 4.6cqw; vertical-align: middle; }
.tw-song .tw-lore-frame { gap: 2cqw; }
.song-town { font-size: 3.6cqw; opacity: .75; text-transform: capitalize; display: flex; align-items: center; gap: 1cqw; justify-content: center; }
.song-fx { justify-content: center; }
.song-counts { display: flex; align-items: center; justify-content: center; gap: 3.4cqw; margin-top: 2cqw; }
.song-listens { display: inline-flex; align-items: center; gap: 1.6cqw; font-size: 6cqw; }
.song-vote, .song-play { appearance: none; cursor: pointer; width: 10cqw; height: 10cqw; display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; padding: 0; }
.song-vote.is-on { background: var(--ink); color: var(--paper); }
.song-vote:hover, .song-play:hover { background: var(--paper-2); }
.song-vote.is-on:hover { background: var(--ink); }

/* ------------------------------------------------------------ the three modes (point 8) */
.mode-row { display: flex; gap: 12px; justify-content: center; align-items: flex-end; margin: -2px 0 2px; }
.mode-card { appearance: none; cursor: pointer; width: 46px; height: 64px; display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 5px; padding: 0; box-shadow: 2px 3px 0 rgba(27, 26, 23, .35), inset 0 0 0 2px var(--paper); transition: transform .18s ease, background .18s ease; opacity: .8; }
.mode-card .sym { width: 30px; height: 30px; stroke-width: 2.6; }
.mode-card.is-on { transform: translateY(-8px); background: var(--ink); color: var(--paper); opacity: 1; box-shadow: 2px 5px 0 rgba(27, 26, 23, .45); }
.mode-card:hover, .mode-card:focus-visible { outline: none; opacity: 1; }
.mode-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 42px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); color: var(--ink); }
.mode-mark .sym { width: 20px; height: 20px; stroke-width: 2.6; }
.ret-board .mode-mark { position: absolute; left: 14px; top: calc(var(--safe-top) + 12px); z-index: 5; }

/* ------------------------------------------------------------ the team: pool, give, badges, the back of a world card and the tree (point 5) */
.pool-card { appearance: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 84px; height: 120px; margin: 4px auto 14px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 3px 4px 0 rgba(27, 26, 23, .35), inset 0 0 0 3px var(--paper), inset 0 0 0 4.5px var(--ink); font-family: var(--serif); transition: transform .18s ease; flex: none; }
.pool-card.is-giving { transform: translateY(-6px); background: var(--ink); color: var(--paper); }
.pool-row { display: flex; align-items: center; gap: 6px; font-size: 1.15rem; }
.pool-row b { font-variant-numeric: tabular-nums; }
.team-scroll { display: flex; flex-direction: column; align-items: stretch; }
.team-unit { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.team-instance-name { max-width: 18ch; margin: 0; font-size: 14px; font-weight: 600; text-align: center; }
.team-instance-host { max-width: 22ch; margin: 4px 0; font-size: 12px; text-align: center; }
.unit-badges { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; }
.unit-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; list-style: none; margin: 0; padding: 0; }
.unit-nums li { display: flex; align-items: center; gap: 3px; font-size: .95rem; }
.wb-level { display: flex; align-items: center; justify-content: center; gap: 8px; }
.wb-lv { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; border: 2px solid var(--ink); border-radius: 50%; font-weight: 700; font-size: .9rem; background: var(--paper); }
.wb-bar { display: block; width: 90px; height: 8px; border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--paper); }
.wb-bar i { display: block; height: 100%; background: var(--ink); }
.give-mark { appearance: none; cursor: pointer; position: absolute; right: 2px; top: -6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); padding: 0; z-index: 5; }
.give-mark[hidden] { display: none; }
.team-unit.is-pickable .give-mark { background: var(--ink); color: var(--paper); animation: give-pulse 1.1s ease-in-out infinite; }
@keyframes give-pulse { 50% { transform: scale(1.18); } }
.give-mark:hover, .give-mark:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.lvl-pop { position: absolute; left: 50%; top: 30%; margin-left: -18px; display: flex; align-items: center; gap: 2px; font-weight: 700; color: #b3261e; z-index: 8; pointer-events: none; }
.give-card { display: flex; gap: 18px; align-items: center; padding: 18px; width: min(94vw, 620px); }
.give-face { flex: none; width: clamp(90px, 22vw, 150px); }
.give-body { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.give-row { display: flex; align-items: center; gap: 6px; }
.give-row.is-off { opacity: .45; }
.give-sym { flex: none; }
.give-slider { flex: 1; min-width: 60px; accent-color: var(--ink); height: 28px; }
.give-step, .give-max { appearance: none; cursor: pointer; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); padding: 0; }
.give-step:hover, .give-max:hover, .give-step:focus-visible, .give-max:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.give-n { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.give-why { flex: none; }
.give-go { align-self: flex-end; width: 64px; min-width: 64px; height: 48px; position: relative; display: grid; place-items: center; padding: 0; }
.give-go:disabled { opacity: .4; }
.give-refuse { position: absolute; right: -8px; top: -12px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; }
/* the back of a world card */
.wb .wb-extras { display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; margin-top: 1cqw; }
.wb .wb-badges { display: flex; flex-wrap: wrap; justify-content: center; }
.wb-skills { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.wb-tattoos, .wb-scars { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font-size: 3.6cqw; }
.wb-tattoos li { display: flex; align-items: center; gap: 6px; }
.wb-tattoos .is-off { opacity: .25; }
.wb-scars li { display: flex; align-items: center; gap: 4px; }
.wb-humanity { display: flex; gap: 6px; }
.wb-humanity i { width: 3.4cqw; height: 3.4cqw; border: 1.5px solid var(--ink); border-radius: 50%; }
.wb-humanity i.is-on { background: var(--ink); }
.wb-trade { font-size: 3.6cqw; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.wb-round { appearance: none; cursor: pointer; display: grid; place-items: center; width: 9cqw; height: 9cqw; min-width: 30px; min-height: 30px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); padding: 0; }
.wb-round.is-on, .wb-round:hover { background: var(--ink); color: var(--paper); }
.sk-costs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; font-size: 2.8cqw; }
.sk-costs i { display: inline-flex; align-items: center; gap: 1px; font-style: normal; }
.team-cell { isolation: isolate; }
@media (max-width: 520px) {
  .give-card { padding: 12px; gap: 10px; }
  .give-face { width: 72px; }
  .give-step, .give-max { width: 30px; height: 30px; }
  .give-row { gap: 4px; }
  .give-slider { min-width: 40px; }
  .give-n { min-width: 2.6ch; font-size: 1rem; }
}

/* ------------------------------------------------------------ the road stop (point 7) */
.stop-card-sheet { width: min(94vw, 720px); padding: 18px; max-height: 84dvh; overflow-y: auto; }
.stop-grid { display: flex; flex-wrap: wrap; gap: 14px 12px; justify-content: center; }
.stop-card { appearance: none; cursor: pointer; position: relative; width: 150px; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 6px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 2px 3px 0 rgba(27, 26, 23, .35), inset 0 0 0 2px var(--paper); font: inherit; transition: transform .18s ease, background .18s ease; }
.stop-card.is-lifted { transform: translateY(-10px) scale(1.06); background: var(--paper-2); box-shadow: 3px 6px 0 rgba(27, 26, 23, .45), inset 0 0 0 2px var(--paper); }
.stop-card:hover:not(.is-off), .stop-card:focus-visible { outline: none; background: var(--paper-2); }
.stop-target { display: block; width: 52px; min-height: 0; }
.stop-target:empty { display: none; }
.stop-target .tw-card { width: 100%; }
.stop-price { display: inline-flex; align-items: center; gap: 4px; font-size: 1.1rem; }
.stop-price s { opacity: .55; font-size: .9rem; }
.stop-price b { font-variant-numeric: tabular-nums; }
.stop-supplies { display: inline-flex; gap: 4px; }
.stop-supply.is-missing { color: var(--red); outline: 2px dashed var(--red); outline-offset: 2px; border-radius: 4px; } /* H2: rule 175: never faded: what is missing is drawn in red */
.stop-why { position: absolute; right: -6px; top: -8px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; font-style: normal; }
/* H2: rule 177: a card of the stop shows the state it acts on */
.stop-act { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper-2); }
.stop-act .sym { width: 30px; height: 30px; }
.stop-name { font-size: .92rem; line-height: 1.15; text-align: center; text-wrap: balance; }
.stop-rows { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: stretch; }
.stop-row { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: .82rem; font-variant-numeric: tabular-nums; }
.stop-row b { font-weight: 700; }
.stop-row em { font-style: normal; opacity: .8; }
.stop-row.is-more { justify-content: center; opacity: .8; }
.stop-face { width: 30px; flex: none; }
.stop-face .tw-card { width: 100%; }
.stop-line { font-size: .78rem; line-height: 1.2; text-align: center; text-wrap: balance; }
.stop-idle { position: absolute; left: -6px; top: -8px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; font-style: normal; }
.stop-none { display: grid; place-items: center; padding: 20px; }

/* ------------------------------------------------------------ the board of pieces (point 6) */
.board { background: #3a2a1c; overflow: hidden; }
.board-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.board-top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; background: transparent; }
.board-title { display: grid; place-items: center; color: #f3f0e6; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.board-stage { position: absolute; inset: 0; }
.board-threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.board-thread { fill: none; stroke: #b3261e; stroke-width: 2; stroke-linecap: round; opacity: .9; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.board-piece { appearance: none; cursor: pointer; position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 3px; box-shadow: 2px 3px 3px rgba(0, 0, 0, .45); }
.board-piece b { font-size: .7rem; letter-spacing: .12em; }
.board-pin { position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #b3261e; box-shadow: 0 1px 2px rgba(0, 0, 0, .6), inset -1px -1px 2px rgba(0, 0, 0, .35); }
.board-piece:hover, .board-piece:focus-visible { outline: none; translate: 0 -4px; }
.board-empty { position: absolute; width: 10px; height: 10px; border: 1.5px dashed #f3f0e6; border-radius: 50%; background: rgba(0, 0, 0, .18); }
.board-truth { position: absolute; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); overflow: hidden; box-shadow: 3px 5px 6px rgba(0, 0, 0, .5); }
.board-truth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-truth .bt-name { position: absolute; left: 0; right: 0; bottom: 8%; padding: 4px 6px; background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); text-align: center; font-size: .82rem; font-weight: 700; letter-spacing: .05em; line-height: 1.15; }
.board-years { position: absolute; left: 6%; right: 6%; bottom: 14px; height: 34px; display: flex; justify-content: space-between; align-items: flex-end; border-top: 2px solid #f3f0e6; color: #f3f0e6; }
.board-years .by { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 2px; }
.board-years .by i { display: block; width: 2px; height: 8px; background: #f3f0e6; }
.board-years b { font-size: .8rem; letter-spacing: .14em; }
.board-years em { position: absolute; top: -26px; font-style: normal; color: #f3f0e6; }
.board-read { width: min(88vw, 480px); padding: 26px; font-size: 1.15rem; line-height: 1.5; text-align: center; }
.piece-pop { position: fixed; width: 32px; height: 48px; z-index: 3000; pointer-events: none; display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 2px 3px 0 rgba(27, 26, 23, .4); }

.wb .wb-extras { gap: 1.4cqw; margin-top: 0; }
.wb .wb-badges { gap: 1cqw 3.4cqw; }
.wb .wb-badges li { font-size: 4.6cqw; }
.wb .wb-level { transform: scale(.9); }
.wb .tw-lore-name { font-size: 6.6cqw; }
.wb .tw-lore-frame { gap: 1.2cqw; }
.wb .tw-lore-type { display: none; }
.wb .wb-tattoos, .wb .wb-scars { font-size: 3.2cqw; gap: 2px 8px; }
.wb .wb-humanity i { width: 2.8cqw; height: 2.8cqw; }
.wb .wb-trade { font-size: 3.2cqw; }

/* the radio chip shows for two seconds at 64 px from the top: the pool card and the board pins sit whole under it */
.team-scroll { padding-top: 66px; }
/* the chip never wider than the screen: the tune title gives way with an ellipsis */
.radio-toast { max-width: calc(100vw - 24px); box-sizing: border-box; }
.radio-toast > span { min-width: 0; }
.radio-toast .rt-tune { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .radio-toast .rt-tune { display: none; } }

/* eight badges on the back of a machine (mechanics on) keep two rows */
.wb .wb-badges { gap: .6cqw 2.6cqw; }
.wb .wb-badges li { font-size: 4.1cqw; gap: .6cqw; }
.wb .wb-badges .sym { width: 4.3cqw; height: 4.3cqw; }
.wb-tattoos li i { display: inline-flex; flex-direction: row; gap: 1px; font-style: normal; }
.wb-tattoos li i .sym { width: 3.4cqw; height: 3.4cqw; }

/* a back with a code, the numbers of the mechanics (two rows) and four lines of lore (Sparehand on the phone) kept 2px too tall: a tighter gap between its parts */
.tw-lore-frame:has(.tw-code):has(.tw-lore-nums) { gap: 1.3cqw; }

/* rule 160: an icon is never bigger than the number it carries (the cap height of a numeral is about .7 of its font size); the number stays */
b > .sym:first-child, :has(> .sym + b) > .sym, .tw-lore-nums .sym, .unit-nums .sym, .wb .wb-badges .sym, .bank .sym, .hour-mark .sym, .road-tag .sym { width: .72em; height: .72em; }
.sym-tip { position: fixed; z-index: 2000; display: flex; flex-direction: column; gap: 2px; max-width: min(78vw, 300px); padding: 7px 14px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; text-align: center; pointer-events: none; } /* JOB-066 (rule 228): a bubble that reads at a glance */
.sym-tip-name { font-weight: 700; }
.sym-tip-line { font-weight: 400; font-size: 1rem; letter-spacing: .02em; }
.cdx-tab { font-size: 1.05rem; font-weight: 700; }
.cdx-tab .sym, .sk-costs .sym { width: .72em; height: .72em; }
@media (max-width: 520px) { .mode-toast .rt-tune { display: inline; } } /* B: the mode's line stays on a phone (rule 164) */
.mode-toast { width: max-content; } /* J: JOB-051: the toast is as wide as its line, up to the page (an absolute box at left 50% is offered half the page once its line may wrap) */
.mode-toast > .sym, .mode-toast > span:not(.rt-tune) { flex: none; } /* J: JOB-051: the symbol and the name keep their width: on a phone they shrank under the line and hid its first letters */
.mode-toast .rt-tune { white-space: normal; overflow: visible; text-overflow: clip; } /* J: JOB-051: the line of a level wraps instead of being cut: the rest and the stops, its last words, are the new truths */
.road-stopmark { position: absolute; right: -8px; top: -8px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 1px 2px 0 rgba(27, 26, 23, .35); } /* B: the road stop's mark (X2 R2) */
.road-stopmark .sym { width: 18px; height: 18px; }

/* J: JOB-015 (rule 166): the card of the sound. Three rows (the music, the menus, the fights), each one a symbol that
   switches the row off, a track that steps by 5, and the number in percent beside it; the way out sits under them in
   the same column, so the pad's left / right belongs to the row and up / down walks the rows. */
.vol-card { display: flex; flex-direction: column; gap: 14px; }
.vol-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--paper-2); border: 2px solid var(--ink); box-shadow: 2px 3px 0 rgba(27, 26, 23, .25); }
.vol-row:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.vol-row.is-off { background: var(--paper); box-shadow: none; }
.vol-sym { appearance: none; cursor: pointer; flex: none; position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.vol-sym:hover, .vol-sym:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
/* a row switched off: the symbol keeps its ink and is struck across (rule 166); the row itself is never drawn grey
   (rule 175) and the glyph is never faded. The strike is drawn in currentColor so it stays visible on the paper of a row
   at rest and on the ink of a symbol held or focused (rules 160 and 164 still name and explain it above). */
.vol-row.is-off .vol-sym::after { content: ''; position: absolute; left: 4px; right: 4px; top: calc(50% - 1.5px); height: 3px; background: currentColor; transform: rotate(-38deg); }
.vol-slider { flex: 1 1 auto; min-width: 0; height: 34px; accent-color: var(--ink); touch-action: none; } /* the finger drives the track: the sheet never scrolls under it */
.vol-n { flex: none; min-width: 3.8em; text-align: right; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.vol-back { position: static; width: 100%; }

/* ------------------------------------------------------------ J60 (JOB-060, rules 173, 175, 160, 164): the skills of a card are painted cards IN COLOUR; a tap opens the large card */
.wb-tierhead { display: flex; align-items: center; justify-content: center; gap: 1.2cqw; font-size: 3cqw; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; line-height: 1; margin-top: .6cqw; }
.wb-tierhead.is-closed { color: var(--red); }
.wb-tierhead .sym { width: 3.4cqw; height: 3.4cqw; }
.wb-skill { appearance: none; position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; margin: 0; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--paper-2); color: var(--ink); cursor: pointer; font: inherit; text-align: center; box-shadow: 0 2px 5px rgba(27, 26, 23, .35); }
.wb-skill .sk-art { position: absolute; inset: 0; display: block; }
.wb-skill .sk-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-band { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5cqw; padding: 1.3cqw 1.2cqw; min-height: 34%; box-sizing: border-box; background: var(--paper); border-top: 2px solid var(--ink); }
.wb-skill .sk-name { font-size: max(10px, 3.3cqw); line-height: 1.05; text-wrap: balance; font-weight: 700; }
.wb-skill .sk-fx { font-size: max(9px, 2.9cqw); line-height: 1.1; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wb-skill .sk-fx:empty { display: none; }
.wb-skill .sk-costs { font-size: max(9px, 2.8cqw); }
.wb-skill.is-open:not(.has-why) { border-color: var(--red); box-shadow: 0 0 0 2px var(--red), 0 2px 5px rgba(27, 26, 23, .35); }
.wb-skill.is-selected { box-shadow: 0 0 0 3px var(--red), 0 2px 6px rgba(27, 26, 23, .4); }
.wb-skill:hover, .wb-skill:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; }
.sk-mark { position: absolute; top: 1cqw; right: 1cqw; width: max(24px, 7.6cqw); height: max(24px, 7.6cqw); border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 1px 2px 0 rgba(27, 26, 23, .4); font-style: normal; }
.sk-mark .sym { width: 62%; height: 62%; }
.sk-seal { background: var(--red); color: var(--paper); }
.sk-why { color: var(--red); }
.sk-ready { background: var(--red); color: var(--paper); }
.sk-large { display: flex; flex-direction: column; gap: 2.2cqw; width: 100%; flex: 1 1 auto; min-height: 0; text-align: center; box-sizing: border-box; }
/* the painting is the card: across the whole width, as tall as the room leaves it, cropped to a wide band around its subject (never squashed); the name and the effect line on a paper band at its foot */
.sk-large-art { position: relative; flex: 1 1 auto; min-height: 30cqw; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--paper-2); box-shadow: 0 3px 8px rgba(27, 26, 23, .4); }
.sk-large-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.sk-large-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.8cqw 2.4cqw 2cqw; background: var(--paper); border-top: 2px solid var(--ink); display: flex; flex-direction: column; align-items: center; gap: .5cqw; }
.sk-large-name { margin: 0; font-size: 5.4cqw; line-height: 1.08; letter-spacing: .02em; text-wrap: balance; }
.sk-large-fx { margin: 0; display: flex; flex-direction: column; gap: .3cqw; font-size: 3.8cqw; font-weight: 700; line-height: 1.18; }
.sk-large-back { position: absolute; top: 2cqw; left: 2cqw; z-index: 2; }
.sk-large-jp { position: absolute; top: 2cqw; right: 2cqw; z-index: 2; display: inline-flex; align-items: center; gap: 1cqw; padding: .5cqw 2.6cqw; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; font-size: 4.8cqw; line-height: 1.2; }
.sk-large-jp b { font-weight: 700; }
.sk-large-costs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.4cqw 3cqw; font-size: 4.2cqw; min-height: 6cqw; }
.sk-large-costs .sk-costs { font-size: 4.2cqw; gap: 1cqw 3cqw; }
.sk-teach { display: inline-flex; align-items: center; }
.sk-large-desc { margin: 0; font-size: clamp(15px, 4.5cqw, 18px); line-height: 1.34; text-wrap: pretty; text-align: left; }
.sk-large-act { display: flex; align-items: center; justify-content: center; min-height: 11cqw; margin-top: auto; }
.sk-learn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 2cqw; min-width: 40cqw; min-height: 11cqw; padding: 0 5cqw; border: 2px solid var(--ink); border-radius: 6px; background: var(--red); color: var(--paper); font: inherit; font-weight: 700; font-size: 5.6cqw; cursor: pointer; box-shadow: 2px 3px 0 var(--ink); }
.sk-learn:hover, .sk-learn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sk-large-why, .sk-large-state { display: inline-grid; place-items: center; width: 11cqw; height: 11cqw; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--red); }
.sk-large-state.sk-seal { background: var(--red); color: var(--paper); }
.sk-large-why:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* W3: JOB-019 (E1, E3; rule 175): an empty pool is a ghost: a dashed frame, the symbols in full ink, no digits; the gift button that has nothing to give keeps its colours (a dashed frame, never dimmed) */
.pool-card.is-empty { border-style: dashed; box-shadow: none; }
.give-row.is-off { opacity: 1; }
.give-go:disabled { opacity: 1; border-style: dashed; }

/* W3: JOB-019 (rule 177): the card of a road-stop service carries the painting of the one it acts on, big; the action's symbol is a small badge; the other cards it acts on stay small below */
.stop-row.is-lead { flex-direction: column; gap: 4px; }
.stop-row.is-lead .stop-face { width: 84px; }
.stop-act.is-badge { position: absolute; right: -6px; bottom: 34px; width: 30px; height: 30px; z-index: 2; background: var(--paper); }
.stop-act.is-badge .sym { width: 20px; height: 20px; }
.stop-nums { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.stop-instance-name { flex-basis: 100%; font-size: .72em; line-height: 1.15; }
.stop-card { width: 168px; }
.stop-name, .stop-line { max-width: 100%; overflow-wrap: anywhere; }
.stop-act.is-badge { right: auto; left: -6px; bottom: auto; top: 30px; }
.stop-name { padding: 0 16px; }
@media (max-width: 520px) { .stop-card { width: calc(50% - 6px); } .stop-row.is-lead .stop-face { width: 58px; } .stop-card { min-height: 0; } }

/* K: JOB-062 (rule 220): the rank mark and the kills of a card (rankmark.js): on the back, under a card of the team, on the return tarp. A rank is an honour: nothing here is a number of the game. */
.rk { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); }
.rk .rk-mark { flex: none; }
.rk-name { font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.rk-n { display: inline-flex; align-items: center; gap: 3px; font-size: 1.05rem; }
.rk-n b { font-variant-numeric: tabular-nums; }
.rk-levelrow { display: flex; flex-direction: column; align-items: center; gap: 2px; }
@media (min-width: 900px) { .rk-levelrow { flex-direction: row; gap: 12px; } }
.rk.is-small { gap: 6px; }
.rk.is-small .rk-n { font-size: .95rem; }
.ret-row-kills { width: 100%; max-width: 520px; }
.rk-rows { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rk-row { display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 2px 8px rgba(27, 26, 23, .25); }
.rk-thumb { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper) center / cover no-repeat; }
.rk-plus { display: inline-flex; align-items: center; gap: 5px; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.rk .rk-mark { width: 24px; height: 24px; }
.rk .rk-n .sym { width: 15px; height: 15px; }
.rk.is-small .rk-mark { width: 22px; height: 22px; }
.rk.is-small .rk-n .sym { width: 14px; height: 14px; }
.rk-plus .sym { width: 26px; height: 26px; }
.rk-row .rk-mark { width: 34px; height: 34px; }
.rk-rname { font-weight: 700; font-size: 1rem; margin-left: auto; text-align: right; }
.rk-rname + .rk-mark { margin-left: 0; }
.rk-row.is-arrived { border-color: var(--accent, var(--ink)); }
.rk-mark.is-arriving { animation: rk-arrive .9s cubic-bezier(.2, 1.4, .4, 1) .5s both; transform-origin: center; }
@keyframes rk-arrive { 0% { transform: scale(2.6) rotate(-14deg); opacity: 0; } 60% { transform: scale(.9) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rk-mark.is-arriving { animation: none; } }

/* ------------------------------------------------------------ K: JOB-064 (rule 228): the back of a card, its skill tree in its own room, the pool of the team screen.
   Every number is a pill that explains itself on hover (the whole pill is the target, the number too: cursor help); the symbols are as tall as their numbers (never taller: rule 160) and the numbers are bigger;
   the door of the tree is a named button at the size of the game's main buttons; the tree is a room of its own with whole skill cards; nothing important is only an icon. */
.wb .wb-badges li, .unit-nums li, .wb-level, .rk, .rk-n, .tr-pill, .pool-pill, .sk-costs i, .wb-tierhead, .wb-skills li, .wb-tattoos li, .wb-scars li, .wb-humanity, .wb-trade, .tr-tab, .wb-skill { cursor: help; }
.wb .wb-badges li { font-size: clamp(16px, 5cqw, 21px); gap: .28em; }
.wb .wb-badges li .sym { width: 1em; height: 1em; }
.wb .wb-badges { gap: .5em 1em; }
.unit-nums li { font-size: 1.12rem; gap: 4px; }
.unit-nums li .sym { width: 1em; height: 1em; }
.unit-nums { gap: 2px 12px; }
.wb-skills li { display: inline-grid; place-items: center; }
.wb .wb-tattoos, .wb .wb-scars { font-size: clamp(13px, 3.7cqw, 16px); }
.wb .wb-trade { font-size: clamp(13px, 3.6cqw, 16px); }
.wb .wb-humanity i { width: clamp(11px, 3.2cqw, 14px); height: clamp(11px, 3.2cqw, 14px); }
.wb .wb-level .wb-lv { min-width: 28px; height: 28px; font-size: 1rem; }
.wb .wb-bar { width: 100px; height: 9px; }

/* the door of the tree: the tree, the word, and the points the card can spend now */
.btn.wb-door { align-self: stretch; margin-top: auto; flex: none; flex-wrap: wrap; justify-content: center; gap: 2px 14px; min-height: 50px; padding: 5px 12px; letter-spacing: .08em; } /* at the foot of the back */
.wb .tw-lore-frame > .tw-lore-text { flex: 1 1 auto; min-height: 2.76em; width: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; overscroll-behavior: contain; }
.wb .tw-lore-frame > .tw-lore-text:focus-visible, .wb .wb-extras:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wb .tw-lore-frame.has-door { gap: .4cqw; padding: 3cqw 4.5cqw; }
.wb .tw-lore-frame.has-door .wb-extras { gap: .5cqw; flex: 0 1 auto; min-height: 4.5em; width: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; overscroll-behavior: contain; }
.wb .tw-lore-frame.has-door .wb-extras > * { flex-shrink: 0; }
.wb .tw-lore-frame.has-door .wb-badges { row-gap: .2em; }
.wb .tw-lore-frame.has-door > .tw-lore-text { margin-top: .5cqw; }
.wb .tw-lore-frame.has-door .tw-code[data-kind="morse"] .tw-code-text { font-size: 3.5cqw; letter-spacing: .05em; word-spacing: .3em; }
.wb .tw-lore-frame.has-door .tw-code[data-kind="binary"] .tw-code-text { font-size: 3.2cqw; }
.wb .tw-lore-frame.has-door .tw-code { margin-top: 0; padding-top: 1.4cqw; padding-bottom: 1.4cqw; }
.wb-door-name { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; }
.wb-door-pts { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; letter-spacing: .02em; text-transform: none; font-weight: 700; }
.wb-door .sym { flex: none; }

/* the pool of the team screen: its numbers (and from 1180 px its words and the word that gives), never a dashed box of bare icons. It lives in the TOP BAR, beside the title like the purse of the other screens:
   a lifted card keeps under the bar (card.js setLiftInset), the lesson and the radio chip stand lower, so nothing covers it */
.pool-card.pool-bar { width: auto; height: auto; min-height: 44px; flex: none; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 4px 14px; padding: 3px 14px; margin: 0 10px 0 auto; border-style: solid; box-shadow: 2px 3px 0 rgba(27, 26, 23, .35); border-radius: 6px; }
.pool-card.pool-bar.is-giving { transform: none; }
.pool-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pool-pill .sym { width: 1em; height: 1em; }
.pool-word { display: none; font-size: .88rem; font-weight: 400; letter-spacing: .02em; }
.pool-give { display: none; align-items: center; gap: 8px; padding-left: 16px; border-left: 2px solid currentColor; font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pool-give .sym { width: 1.2em; height: 1.2em; }
.team .topbar-title { font-size: 1.05rem; letter-spacing: .1em; margin-left: 12px; }
.team-scroll { padding-top: 54px; } /* the radio chip (64 to 108 px) still stands clear of the first row; the pool is no longer in the scroll */
@media (min-width: 700px) { .team .topbar-title { font-size: 1.3rem; letter-spacing: .18em; } }
@media (min-width: 900px) { .team .topbar-title { position: absolute; left: 50%; transform: translateX(-50%); margin-left: 0; } .pool-pill { font-size: 1.25rem; gap: 8px; } }
@media (min-width: 1180px) { .pool-word { display: inline; } .pool-give { display: inline-flex; } }

/* the tree: its own room. The sheet is the page: the room scrolls as a whole, a card is never cut by a window of its own */
.tree-room { place-items: center; }
.tr-panel { position: relative; width: min(98vw, 1320px); height: min(96dvh, 860px); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6.5px var(--ink), 6px 8px 0 rgba(27, 26, 23, .45); scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.tr-head { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 12px 18px 10px; background: var(--paper); border-bottom: 2px solid var(--ink); }
.tr-back { flex: none; min-height: 46px; padding: 6px 16px; }
.tr-title { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.tr-title-card { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 400; font-style: italic; letter-spacing: .03em; text-transform: none; }
.tr-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.tr-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 14px 3px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 1px 2px 0 rgba(27, 26, 23, .3); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-pill .sym { width: 1em; height: 1em; }
.tr-pill-word { font-size: .88rem; font-weight: 400; letter-spacing: .02em; }
.tr-level { padding-left: 6px; }
.tr-level .wb-level { gap: 10px; }
.tr-body { display: grid; grid-template-columns: clamp(150px, 15vw, 230px) minmax(0, 1fr); gap: 18px 22px; padding: 14px 18px 20px; align-items: start; }
.tr-side { position: sticky; top: 78px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.tr-side > .tw-card { width: 100%; cursor: default; }
.tr-who { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.tr-who-name { font-size: 1rem; line-height: 1.15; text-wrap: balance; }
.tr-who .rk { flex-wrap: wrap; }
.tr-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tr-tabs { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.tr-tab { appearance: none; position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 14px; font-family: var(--serif); font-weight: 700; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--ink); }
.tr-tab.is-on { color: var(--paper); background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3px var(--paper); }
.tr-tab:hover, .tr-tab:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; }
.tr-tab-main { display: inline-flex; align-items: center; gap: 8px; }
.tr-tab-n { font-style: normal; font-size: .85rem; letter-spacing: 0; padding: 0 7px; border: 1.5px solid currentColor; border-radius: 999px; font-variant-numeric: tabular-nums; }
.tr-tiers { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.tr-tier { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tr-tier .wb-tierhead { align-self: flex-start; justify-content: flex-start; gap: 8px; padding: 5px 12px; font-size: .95rem; letter-spacing: .14em; border: 2px solid var(--ink); background: var(--paper); margin: 0; }
.tr-tier .wb-tierhead .sym { width: 1em; height: 1em; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; }
@media (min-width: 1180px) {
  .tr-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* the skill card in the room: the sizes are the screen's, not the lifted card's (the card's container units do not exist here) */
.tree-room .wb-skill { cursor: pointer; }
.tree-room .sk-band { gap: 2px; padding: 6px 6px 7px; }
.tree-room .wb-skill .sk-name { font-size: 15px; line-height: 1.08; }
.tree-room .wb-skill .sk-fx { font-size: 13px; line-height: 1.12; }
.tree-room .wb-skill .sk-costs { font-size: 13px; gap: 0 7px; }
.tree-room .sk-costs i { gap: 2px; }
.tree-room .sk-costs .sym { width: 1em; height: 1em; }
.tree-room .sk-mark { top: 6px; right: 6px; width: 28px; height: 28px; }
.tree-room .wb-skill.is-selected { box-shadow: 0 0 0 3px var(--red), 0 2px 6px rgba(27, 26, 23, .4); }
.sk-plain { position: absolute; left: 0; right: 0; top: 0; bottom: 34%; display: grid; place-items: center; background: var(--paper-2); }
.sk-plain::before { content: ''; position: absolute; inset: 7%; border: 2px solid var(--ink); }
.sk-bigsym { width: 42%; height: 42%; color: var(--ink); }
.sk-large-plain { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper-2); padding-bottom: 22%; }
.sk-large-plain .sk-bigsym { width: 30%; height: 30%; }
/* the large card of a skill, over the tree */
.tr-large { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 12px; }
.tr-large[hidden] { display: none; }
.tr-large-scrim { position: absolute; inset: 0; background: rgba(27, 26, 23, .55); }
.tr-large-card { position: relative; container-type: inline-size; width: min(94vw, 480px); height: min(100%, 700px); display: flex; flex-direction: column; padding: 16px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6.5px var(--ink), 6px 8px 0 rgba(27, 26, 23, .5); box-sizing: border-box; }
.tr-large-card .sk-panel-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sk-learn-word { text-transform: uppercase; letter-spacing: .1em; font-size: .85em; }
/* JOB-2026100508: under the learn button, the points the crew's pool adds to a lesson this card cannot pay alone (one confirmation does both) */
.sk-from-pool { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 3px 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-size: 1.05rem; font-weight: 700; }
.sk-from-pool .sym { width: 16px; height: 16px; }
.sk-from-word { text-transform: uppercase; letter-spacing: .08em; font-size: .72em; }
/* JOB-2026100508: the crew's shared points, beside the card's own, in the tree room's header */
.tr-pool { display: inline-flex; align-items: center; gap: 2px; margin-left: 5px; padding: 1px 6px; border: 2px solid var(--ink); border-radius: 999px; font-size: .8em; font-style: normal; font-weight: 700; opacity: .8; }
.tr-pool .sym { width: 14px; height: 14px; }
/* the large card: on a narrow screen one column as before (the side block disappears into it, the second caption is hidden); on a wide one (900 px and more) the painting stands WHOLE at the left, 2:3 as it was
   painted, and its words beside it: a frame of another shape never cuts a head (rule 182) */
.sk-large-side { display: contents; }
.sk-large-cap2 { display: none; }
@media (min-width: 900px) {
  .tr-large-card { --art-h: min(calc(100dvh - 92px), 660px); width: min(94vw, calc(var(--art-h) * .6667 + 22px + 440px + 48px)); height: auto; max-height: calc(100dvh - 24px); padding: 18px 20px; display: block; container-type: normal; }
  .tr-large-card .sk-panel-card { display: block; overflow: visible; }
  .tr-large-card .sk-large { display: grid; grid-template-columns: calc(var(--art-h) * .6667) minmax(0, 1fr); gap: 0 22px; align-items: start; text-align: left; }
  .tr-large-card .sk-large-art { height: var(--art-h); min-height: 0; container-type: inline-size; }
  .tr-large-card .sk-large-art .sk-large-cap { display: none; }
  .tr-large-card .sk-large-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: var(--art-h); container-type: inline-size; }
  .tr-large-card .sk-large-cap2 { display: block; }
  .tr-large-card .sk-large-cap2 .sk-large-name { margin: 0 0 4px; }
  .tr-large-card .sk-large-costs { justify-content: flex-start; }
  .tr-large-card .sk-large-act { margin-top: auto; justify-content: flex-start; }
}
.sk-large-whyrow { display: inline-flex; align-items: center; gap: 3cqw; }
.sk-large-whytext { font-size: 4.2cqw; font-weight: 700; color: var(--red); text-align: left; line-height: 1.15; }
@media (max-width: 899px) {
  .tr-panel { width: 100vw; height: 100dvh; border-width: 0; box-shadow: none; }
  .tr-head { padding: calc(var(--safe-top) + 10px) 12px 8px; gap: 6px 10px; }
  .tr-title { flex-basis: 140px; font-size: 1rem; letter-spacing: .1em; }
  .tr-title-card { display: none; }
  .tr-pill { font-size: 1.15rem; min-height: 38px; padding: 2px 12px 2px 8px; }
  .tr-body { grid-template-columns: 1fr; padding: 12px 12px 22px; gap: 12px; }
  .tr-side { position: static; flex-direction: row; justify-content: flex-start; gap: 14px; }
  .tr-side > .tw-card { width: 78px; flex: none; }
  .tr-who { align-items: flex-start; text-align: left; }
  .tr-tab { padding: 6px 10px; letter-spacing: .04em; font-size: .92rem; }
  .tr-tab-n { display: none; } /* a phone: the names fit two rows; the count of what is learned stays in the bubble */
  .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-aspect-ratio: 11/10) and (max-height: 760px) {
  .tr-panel { height: 98dvh; }
  .tr-head { padding: 8px 16px 8px; }
  .tr-pill { min-height: 36px; }
  .tr-body { padding: 10px 16px 14px; gap: 10px 20px; }
  .tr-side { top: 62px; }
  .tr-main { gap: 10px; }
  .tr-tab { min-height: 40px; }
}
@media (prefers-reduced-motion: no-preference) { .tr-panel { animation: tr-in .18s ease-out; } @keyframes tr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* Vector chips: saved sockets, whole paintings, and the powers of the chosen holder. */
.wb-chip-door { margin-top: 0 !important; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px !important; }
.chip-room { place-items: center; }
.cr-panel { position: relative; width: min(1000px, 96vw); max-height: 94dvh; display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; overflow: hidden; box-shadow: 0 16px 50px #0007; }
.cr-head { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 2px solid var(--ink); flex: none; }
.cr-head h2 { font-size: 1.2rem; margin: 0; }
.cr-body { overflow-y: auto; padding: 16px 20px 24px; overscroll-behavior: contain; }
.cr-rule, .cr-message, .cr-bonuses { font-size: .95rem; line-height: 1.4; }
.cr-message { min-height: 1.4em; font-weight: 700; }
.cr-slots { display: grid; gap: 10px; }
.cr-slot { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); text-align: left; color: var(--ink); min-height: 66px; }
.cr-slot img { width: 58px; height: 87px; object-fit: contain; flex: none; }
.cr-slot div { flex: 1; min-width: 0; }
.cr-slot p { margin: 4px 0; font-size: .9rem; }
.cr-empty { cursor: pointer; font-size: 1rem; font-weight: 700; }
.cr-empty.is-selected { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.cr-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.cr-chip { display: flex; flex-direction: column; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.cr-chip > img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: contain; }
.cr-chip > div { display: flex; flex-direction: column; gap: 8px; padding: 12px; flex: 1; }
.cr-chip h4, .cr-chip p { margin: 0; }
.cr-chip p { font-size: .9rem; line-height: 1.35; }
.cr-chip .btn { margin-top: auto; }
.cr-slot:focus-visible, .cr-chip .btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
@media (max-width: 520px) {
  .cr-head { gap: 10px; padding: 10px; }
  .cr-head h2 { font-size: 1rem; }
  .cr-body { padding: 12px; }
  .cr-slot { gap: 8px; padding: 8px; }
  article.cr-slot { display: grid; grid-template-columns: 58px minmax(0, 1fr); }
  .cr-slot > .btn { grid-column: 2; justify-self: start; }
  .cr-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cr-chip > div { padding: 8px; }
  .cr-chip h4 { font-size: .95rem; }
}

/* Mission packs: supplied story cards unfold without obscuring or cropping their art. */
.mission-pack{z-index:1100;display:grid;place-items:center;padding:16px}
.mission-pack .sheet-scrim{background:rgba(12,10,8,.74)}
.mp-panel{position:relative;width:min(100%,1000px);max-height:calc(100dvh - 32px);overflow:auto;background:#e6dfcf;color:#241f1a;border:2px solid #53483c;box-shadow:0 15px 70px #0008;padding:24px 30px;text-align:center}
.mp-close{position:absolute;left:8px;top:8px;color:inherit}
.mp-panel h2{font-size:clamp(18px,3vw,28px);margin:2px 32px 12px;letter-spacing:.06em}
.mp-summary,.mp-note{max-width:650px;margin:8px auto;font-size:14px;line-height:1.4}
.mp-fan{display:flex;justify-content:center;align-items:center;min-height:290px;padding:28px 12px 20px;isolation:isolate}
.mp-card{width:clamp(80px,14vw,145px);aspect-ratio:2/3;flex:0 0 auto;margin-left:-25px;transform:rotate(var(--angle));transform-origin:50% 120%;animation:mp-unfold .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i)*45ms)}
.mp-card:first-child{margin-left:0}.mp-card .tw-card{width:100%;height:100%;pointer-events:none}.mp-card img{object-fit:contain}
.mp-actions{display:flex;justify-content:center;gap:12px;margin-top:18px}.mission-pack .mp-actions .btn{width:auto;height:auto;font-size:20px;padding:12px 25px;min-width:130px;min-height:48px;background:#29241e;color:#eee6d6;border:1px solid #6b5842}
.mp-actions .btn:focus-visible{outline:3px solid #aa382c;outline-offset:4px}
.mission-pack .mp-actions .btn .sym{width:22px;height:22px;flex:0 0 22px}
@keyframes mp-unfold{from{opacity:0;transform:translateY(38px) rotate(0) scale(.72)}to{opacity:1;transform:rotate(var(--angle)) scale(1)}}
@media(max-width:600px){.mission-pack{padding:8px}.mp-panel{padding:22px 12px 18px;max-height:calc(100dvh - 16px)}.mp-fan{min-height:210px;padding:30px 3px}.mp-card{width:min(92px,calc((100vw - 120px)/(var(--count)*.5 + .5)));margin-left:-30px}.mp-summary,.mp-note{font-size:13px}.mission-pack .mp-actions .btn{min-width:0;font-size:16px;padding:10px 12px}.mp-actions{gap:8px}}
@media(prefers-reduced-motion:reduce){.mp-card{animation:none}}