/* The Scandal Sheet v2 · Legendary Whores · house layer (tabloid collage) + era skins.
   Layout: one phone-width newspaper column (max 460px) on the era's desk texture; torn newsprint sheets stack down it.
   Chrome is two corner pieces anchored to the column (the Purse top right, the Menu bottom right); on the play screens
   the Sway tray is the only bar. Type is in rem so it follows the player's text size (iOS Dynamic Type through
   -apple-system-body); Special Elite never carries a sentence; labels are 0.875rem or more (0.8125rem only inside a card).
   v2 folds C's three "review fixes" layers into one rule per component. */
:root {
  /* type: a condensed poster face for headlines, a news serif for reading, a typewriter for labels and stamps */
  --f-head: 'Anton', 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', 'Arial Narrow', sans-serif;
  --f-body: 'Newsreader', 'Georgia', 'Times New Roman', serif;
  --f-type: 'Special Elite', 'Courier New', 'Courier', monospace;
  /* motion: feedback 120-250ms, sheets 300ms, signature moments up to 900ms */
  --t-fast: .16s; --t-sheet: .3s; --t-meter: .4s;
  --ease-out: cubic-bezier(.2, .9, .3, 1);
  /* chrome geometry (one place, read by layout; the JS keeps TOP_CLEAR in step) */
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --chip-h: 44px; --fab: 56px; --col: 460px;

  --stamp-l: #C8102E; --stamp-d: #FF5468;
  --good-l: #2E6B30; --good-d: #8FDB9A;
  --bad-l: #B3261E; --bad-d: #FF8F86;
  --tape: rgba(240, 222, 150, .62);
  --note-bg: #EFDD9A;
  --pin: #B3121F;
  --shadow: rgba(10, 6, 4, .45);
  --gold: #C9A24A;
  --on-mark: #FFFFFF;
  /* era posters (fixed in both themes: dark poster, light type) */
  --vic-bg: #1E140F; --vic-fg: #EFE3C8; --vic-acc: #C9A24A;
  --ww-bg: #2E3238; --ww-fg: #F2E6CF; --ww-acc: #E9A25B;
  --vg-bg: #0B0620; --vg-fg: #FFF5FB; --vg-acc: #FF2E9A; --vg-acc2: #19E6FF;

  /* era tokens, default = the house press (before a whore is chosen) */
  --f-era: 'Anton', 'Impact', sans-serif;
  --f-era-big: 'Anton', 'Impact', sans-serif;
  --desk-l: #2A2522; --desk-d: #151210;
  --paper-l: #ECE6D8; --paper-d: #26221E;
  --paper2-l: #DDD4C1; --paper2-d: #332D27;
  --ink-l: #171412; --ink-d: #ECE6D8;
  --ink2-l: #5B524A; --ink2-d: #BDB3A4;
  --accent-l: #8E1B1B; --accent-d: #FF8B7E;
  --accent2-l: #2B2522; --accent2-d: #E9DFC9;
  --card-ink: #171412; --card-bg: #F1ECE0;
  /* secondary ink and accent printed ON the card stock: fixed in both themes */
  --card-ink2: #5B524A; --card-accent: #B3102A;
  --card-pad: 18px 16px; --card-pad-sm: 10px 8px 8px;
  /* tick / cross labels on cards: their own ink so every skin passes 4.5:1 */
  --mk-good-fg: #FFFFFF; --mk-good-bg: #2E6B30; --mk-bad-fg: #FFFFFF; --mk-bad-bg: #B3261E;
  --glow: rgba(255, 236, 190, .35);
  --tex-bg: none; --tex-card: none; --tex-frame: none; --frame-slice: 0; --frame-w: 0px;
  --tex-paper-l: none; --tex-paper-d: none;

  /* resolved (light) */
  --desk: var(--desk-l); --paper: var(--paper-l); --paper2: var(--paper2-l);
  --ink: var(--ink-l); --ink2: var(--ink2-l); --accent: var(--accent-l); --accent2: var(--accent2-l);
  --stamp: var(--stamp-l); --good: var(--good-l); --bad: var(--bad-l); --tex-paper: var(--tex-paper-l);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: var(--desk-d); --paper: var(--paper-d); --paper2: var(--paper2-d);
    --ink: var(--ink-d); --ink2: var(--ink2-d); --accent: var(--accent-d); --accent2: var(--accent2-d);
    --stamp: var(--stamp-d); --good: var(--good-d); --bad: var(--bad-d); --tex-paper: var(--tex-paper-d);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --desk: var(--desk-d); --paper: var(--paper-d); --paper2: var(--paper2-d);
  --ink: var(--ink-d); --ink2: var(--ink2-d); --accent: var(--accent-d); --accent2: var(--accent2-d);
  --stamp: var(--stamp-d); --good: var(--good-d); --bad: var(--bad-d); --tex-paper: var(--tex-paper-d);
  color-scheme: dark;
}

/* ---------- era skins (palette, textures, accent type) ---------- */
:root[data-era="victorian"] {
  --f-era: 'IM Fell English SC', 'Georgia', serif; --f-era-big: 'IM Fell English SC', 'Georgia', serif;
  --desk-l: #1E140F; --desk-d: #120B08;
  --paper-l: #EFE3C8; --paper-d: #2A1F18; --paper2-l: #E2CFA6; --paper2-d: #3A2B20;
  --ink-l: #22160F; --ink-d: #EFE3C8; --ink2-l: #5A4636; --ink2-d: #CDB995;
  --accent-l: #6B1E23; --accent-d: #E8C877; --accent2-l: #8A6A22; --accent2-d: #C9A24A;
  --card-ink: #2A1A10; --card-bg: #EFE3C8; --glow: rgba(244, 223, 174, .45);
  --card-ink2: #5A4636; --card-accent: #B30F29;
  --tex-bg: url("../art-assets/victorian/skin-bg.webp");
  --tex-card: url("../art-assets/victorian/skin-card.webp");
  --tex-frame: url("../art-assets/victorian/skin-frame.webp"); --frame-slice: 120; --frame-w: 14px;
}
:root[data-era="wildwest"] {
  --f-era: 'Rye', 'Georgia', serif; --f-era-big: 'Rye', 'Georgia', serif;
  --desk-l: #2E3238; --desk-d: #1C1F23;
  --paper-l: #F2E6CF; --paper-d: #2E2923; --paper2-l: #E2CDA6; --paper2-d: #3B342B;
  --ink-l: #2B2622; --ink-d: #F2E6CF; --ink2-l: #6B5640; --ink2-d: #D9C3A0;
  --accent-l: #A3402B; --accent-d: #E9A25B; --accent2-l: #7A5C3E; --accent2-d: #C8553D;
  --card-ink: #2B2622; --card-bg: #F2E6CF; --glow: rgba(233, 162, 91, .4);
  --card-ink2: #6B5640; --card-accent: #A8321E; --card-pad: 8px 6px; --card-pad-sm: 4px 3px 3px; --card-slice: 132; --card-bw: 34px; --card-bw-sm: 14px;
  --tex-bg: url("../art-assets/wildwest/skin-bg.webp");
  --tex-card: url("../art-assets/wildwest/skin-card.webp");
  --tex-frame: url("../art-assets/wildwest/skin-frame.webp"); --frame-slice: 90; --frame-w: 10px;
  --tex-paper-l: url("../art-assets/wildwest/x-tex-wanted-paper.webp");
}
/* Vegas is dark-only by design (neon on black glass in both OS themes): it sets the resolved tokens directly, and the
   neon finish lives on its own three tokens. */
:root[data-era="vegas"] {
  --f-era: 'Bungee', 'Arial Black', sans-serif; --f-era-big: 'Monoton', 'Bungee', 'Arial Black', sans-serif;
  --neon-a: #FF2E9A; --neon-b: #19E6FF; --glass: #140A1F; --glass2: #24123A;
  --desk: #0B0620; --paper: var(--glass); --paper2: var(--glass2); --ink: #FFF5FB; --ink2: #D7C3EA;
  --accent: var(--neon-a); --accent2: var(--neon-b); --stamp: var(--neon-a); --good: #19E6A0; --bad: #FF6B7D;
  --paper-l: #FFF5FB; --ink-l: #1A0B2E;
  --tex-paper: none;
  --card-ink: #FFF5FB; --card-bg: #2A0E3D; --glow: rgba(255, 46, 154, .5);
  --card-ink2: #D7C3EA; --card-accent: #FF5FB0; --card-pad: 6px 6px; --card-pad-sm: 4px 3px 3px; --card-slice: 122; --card-bw: 32px; --card-bw-sm: 14px;
  --mk-good-fg: #1A0B2E; --mk-good-bg: #19E6A0; --mk-bad-fg: #1A0B2E; --mk-bad-bg: #FF5468;
  --tex-bg: url("../art-assets/vegas/skin-bg.webp");
  --tex-card: url("../art-assets/vegas/skin-card.webp");
  --tex-frame: url("../art-assets/vegas/skin-frame.webp"); --frame-slice: 110; --frame-w: 12px;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* iOS: the player's Dynamic Type size becomes 1rem; elsewhere 1rem follows the browser's text size */
html { font: -apple-system-body; font-family: var(--f-body); overflow-x: clip; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--desk); color: var(--ink);
  font-family: var(--f-body); font-size: 1rem; line-height: 1.45;
  overflow-x: clip; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--stamp); outline-offset: 2px; }
.noscript { color: var(--paper); padding: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; }

.desk {
  min-height: 100vh; min-height: 100dvh;
  background-color: var(--desk);
  background-image: radial-gradient(ellipse at 50% 0%, var(--glow), transparent 60%), var(--tex-bg);
  background-size: auto, 360px;
}
.col {
  max-width: var(--col); margin: 0 auto;
  padding-inline: 16px; padding-block: calc(12px + var(--safe-t)) 40px;
  display: flex; flex-direction: column; gap: 14px;
}
/* in the game the Purse floats over the top right corner, and the Menu over the bottom right */
body.in-game .col { padding-top: calc(var(--chip-h) + 18px + var(--safe-t)); padding-bottom: calc(var(--fab) + 32px + var(--safe-b) + var(--note-h, 0px)); }
body.in-game.play .col { padding-bottom: calc(16px + var(--safe-b)); }

/* ---------- house: newsprint sheets with torn edges ---------- */
.sheet {
  position: relative;
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--tex-paper);
  background-size: 160px, 420px;
  color: var(--ink);
  padding: 18px 16px 22px;
  -webkit-mask: linear-gradient(#000 0 0) center / 100% calc(100% - 14px) no-repeat,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 11px 7px repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 11px 7px repeat-x;
          mask: linear-gradient(#000 0 0) center / 100% calc(100% - 14px) no-repeat,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 11px 7px repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 11px 7px repeat-x;
}
.sheet > * + * { margin-top: 10px; }
/* the front page's later sections (hand, market, competition, what's next) share one wrapper: on a phone it is no box at
   all, so they stack in the column exactly as before; the wide layouts give it a column of its own */
.fp-more { display: contents; }

/* ---------- type scale ---------- */
.kicker { font: .875rem/1.2 var(--f-type); letter-spacing: .08em; text-transform: uppercase; color: var(--stamp); margin: 0; }
.h1, .h2, .h3 { font-family: var(--f-head); font-weight: 400; text-transform: uppercase; line-height: 1; margin: 0; text-wrap: balance; letter-spacing: .01em; }
.h1 { font-size: clamp(2.1rem, 10.5vw, 3rem); }
.h2 { font-size: 1.625rem; }
.h3 { font-size: 1.1875rem; }
.era-type { font-family: var(--f-era); text-transform: none; letter-spacing: .01em; }
.deck { font: italic 1.0625rem/1.35 var(--f-body); margin: 0; color: var(--ink2); }
.small { font-size: .9375rem; line-height: 1.35; color: var(--ink2); }
.type { font-family: var(--f-type); font-size: .875rem; letter-spacing: .02em; }
.rule { border: 0; border-top: 3px double var(--ink); margin: 12px 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 8px; border-bottom: 3px double var(--ink); padding-bottom: 4px; flex-wrap: wrap; scroll-margin-top: calc(var(--chip-h) + 24px); }
.sec-head .h2 { font-size: 1.375rem; }

/* era masthead line */
.gazette { display: grid; gap: 2px; text-align: center; border-bottom: 3px double var(--ink); padding-bottom: 6px; }
.gazette .name { font-family: var(--f-era-big); font-size: clamp(1.375rem, 7vw, 1.875rem); line-height: 1.05; color: var(--accent); text-wrap: balance; }
.gazette .dateline { display: flex; justify-content: space-between; font: .875rem/1.3 var(--f-type); color: var(--ink2); border-top: 1px solid var(--ink2); padding-top: 3px; gap: 4px 8px; flex-wrap: wrap; letter-spacing: .04em; }

/* ransom-note letters */
.ransom { display: inline-flex; flex-wrap: wrap; gap: 3px 2px; justify-content: center; line-height: 1; }
.ransom .w { display: inline-flex; gap: 2px; margin-right: 8px; }
.ransom span.l { display: inline-block; padding: 3px 4px 2px; font-size: 1em; box-shadow: 1px 2px 0 var(--shadow); }
.ransom .l.r0 { font-family: var(--f-head); background: var(--paper); color: var(--ink); }
.ransom .l.r1 { font-family: var(--f-era); background: var(--ink); color: var(--paper); }
.ransom .l.r2 { font-family: var(--f-body); font-weight: 800; font-style: italic; background: var(--paper2); color: var(--accent); }
.ransom .l.r3 { font-family: var(--f-head); background: var(--stamp); color: var(--paper); }
.ransom .l.r4 { font-family: var(--f-type); background: var(--paper2); color: var(--ink); }
.ransom .l.r5 { font-family: var(--f-body); font-weight: 800; background: var(--paper); color: var(--ink); text-transform: lowercase; }

/* stamps */
.stamp {
  display: inline-block; font: 400 1.375rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em;
  color: var(--stamp); border: 3px solid var(--stamp); padding: 6px 10px 4px; transform: rotate(-8deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.stamp.big { font-size: 2.5rem; border-width: 5px; padding: 8px 14px 4px; }
.stamp.good { color: var(--good); border-color: var(--good); }
.newstamp { display: inline-block; font: 400 .875rem/1 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); background: var(--stamp); padding: 4px 6px 3px; transform: rotate(-3deg); align-self: center; }

/* tape and pins (decorative, so they may tilt) */
.tape { position: absolute; width: 74px; height: 22px; background: var(--tape); box-shadow: 0 1px 2px var(--shadow); z-index: 2; pointer-events: none; }
.tape.tl { top: -6px; left: 10px; transform: rotate(-8deg); }
.tape.tr { top: -6px; right: 10px; transform: rotate(7deg); }
.pin { position: absolute; top: -7px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.7), var(--pin) 45%, rgba(0,0,0,.6)); box-shadow: 1px 3px 3px var(--shadow); z-index: 3; pointer-events: none; }

/* ---------- buttons ---------- */
.btn {
  min-height: 48px; padding: 10px 16px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 400 1.125rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 3px 3px 0 var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.primary { background: var(--stamp); color: var(--paper); border-color: var(--stamp); }
.btn.ghost { background: transparent; box-shadow: none; border-style: dashed; }
.btn.small { min-height: 44px; font-size: .9375rem; padding: 8px 12px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.block { width: 100%; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > .grow { flex: 1 1 140px; }
.row.tight { gap: 10px; flex-wrap: nowrap; align-items: baseline; }
.link { position: relative; background: none; border: 0; padding: 0; min-height: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font: inherit; cursor: pointer; }
/* the one sign for "tap me to learn": a dotted underline, with an invisible hit area grown to about 44px */
.x { position: relative; border: 0; border-bottom: 1.5px dotted currentColor; cursor: help; background: none; padding: 0; font: inherit; color: inherit; text-align: inherit; }
.link::before { content: ''; position: absolute; inset: -14px -8px; }
/* round 4 (finding 14): a dotted word's hit area grows sideways but only 4px up and down, so two dotted words on
   consecutive lines never overlap; the 44px height comes from the reading line-height of the bodies that carry them */
.x::before { content: ''; position: absolute; inset: -4px -8px; }
.x:hover, .x:active, .x:focus-visible { z-index: 1; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border: 1.5px solid currentColor; font: .875rem/1.15 var(--f-type); background: transparent; color: var(--ink); min-height: 40px; text-align: left; }
.chip::after { content: ''; position: absolute; inset: -3px 0; }
.chip.good { color: var(--good); }
.chip.bad { color: var(--bad); }
.chip.stamp-c { color: var(--stamp); }
.chip.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.q { color: var(--accent); border-style: dashed; }
.chip.read::before { content: '✓ '; }
.badge-auto { display: inline-flex; align-items: center; gap: 3px; font: .875rem/1 var(--f-type); text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px; background: var(--accent2); color: var(--paper); border: 0; }
.badge-stand { display: inline-flex; font: .875rem/1 var(--f-type); text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px; border: 1px dashed var(--ink2); color: var(--ink2); background: none; }

/* ---------- the corner chrome ---------- */
.chrome-top, .chrome-foot {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 30;
  width: min(var(--col), 100%); padding-inline: max(12px, env(safe-area-inset-right, 0px));
  display: flex; justify-content: flex-end; pointer-events: none;
}
.chrome-top { top: calc(8px + var(--safe-t)); }
.chrome-foot { bottom: calc(12px + var(--safe-b)); }
.chrome-top > *, .chrome-foot > * { pointer-events: auto; }
.purse {
  display: flex; align-items: center; gap: 10px; height: var(--chip-h); padding: 0 14px 0 4px;
  border: 2px solid var(--paper-l); border-radius: 999px; background: var(--ink-l); color: var(--paper-l);
  box-shadow: 0 4px 12px var(--shadow);
}
.purse .pface { position: relative; width: 34px; height: 34px; flex: none; }
.purse .pface img, .purse .pface .miss { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; font-size: 0; }
.purse .pcoin, .purse .pclock { display: inline-flex; align-items: center; gap: 4px; }
/* round 6 (finding 5): Renown to the next tier, always on screen: the number and a thin bar under it */
.purse .pren { display: inline-grid; gap: 2px; justify-items: center; }
.purse .pren small { font: 400 .875rem/1 var(--f-head); color: var(--ink2); }
.purse .pren i { display: block; width: 100%; min-width: 34px; height: 3px; background: linear-gradient(90deg, var(--good) var(--p), var(--paper2) var(--p)); }
.purse svg { width: 18px; height: 18px; flex: none; }
.purse .pcoin svg { color: var(--gold); }
.purse b { font: 400 1.125rem/1 var(--f-head); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.purse .pcoin b { min-width: 1.4ch; }
.purse .pclock b { font-size: 1rem; }
.purse.alarm { border-color: var(--stamp-d); }
.purse.alarm .pclock { color: var(--stamp-d); }
.purse.bump .pcoin { animation: bump .4s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.25); } }
.itchdots { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); display: flex; gap: 2px; }
.itchdots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--paper-l); background: var(--ink-l); }
.itchdots i.on { background: var(--stamp-d); border-color: var(--stamp-d); }
.menu-btn {
  position: relative; width: var(--fab); height: var(--fab); border-radius: 50%; border: 2px solid var(--paper-l);
  background: var(--ink-l); color: var(--paper-l); display: grid; place-items: center; align-content: center; gap: 1px;
  font: 400 .875rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 6px 16px var(--shadow);
}
.menu-btn svg { width: 24px; height: 24px; }
.menu-btn.dot::after, .navtile.dot::after { content: ''; position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--stamp-d); box-shadow: 0 0 0 2px var(--ink-l); }
.menu-btn.alarm::after, .navtile.alarm::after { background: #FF3B3B; }

/* ---------- portraits: pinned photos in era frames ---------- */
.photo { position: relative; background: var(--card-bg); padding: 6px 6px 8px; box-shadow: 2px 4px 10px var(--shadow); }
.photo .frame { position: relative; aspect-ratio: 3 / 4; max-width: 100%; border: var(--frame-w) solid transparent; border-image: var(--tex-frame) var(--frame-slice) / var(--frame-w) stretch; background: var(--ink); overflow: hidden; }
:root[data-era="house"] .photo .frame { border: 2px solid var(--ink); }
.photo .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.photo .cap { font: .875rem/1.15 var(--f-type); color: var(--card-ink); margin-top: 5px; text-align: center; letter-spacing: .04em; }
.photo .cap b { font: 400 .9375rem/1.05 var(--f-head); text-transform: uppercase; display: block; letter-spacing: .02em; }
.miss { display: grid; place-items: center; width: 100%; height: 100%; padding: 6px; text-align: center; color: var(--paper); font: 400 .9375rem/1.1 var(--f-era); background: var(--ink); }
.halftone::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.4px); background-size: 4px 4px; mix-blend-mode: multiply; }

/* ---------- cards (house anatomy, era card stock) ---------- */
.hand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  min-height: 140px; padding: var(--card-pad-sm); text-align: left;
  background: var(--card-bg) var(--tex-card) center / 100% 100% no-repeat; color: var(--card-ink);
  border: 0; box-shadow: 1px 3px 8px var(--shadow);
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
  font-family: var(--f-body);
  --ink2: var(--card-ink2); --stamp: var(--card-accent); --accent: var(--card-accent);
}
:root[data-era="wildwest"] .card:not(.curse), :root[data-era="vegas"] .card:not(.curse) {
  background: var(--card-bg); border: var(--card-bw-sm) solid transparent; border-image: var(--tex-card) var(--card-slice) fill / var(--card-bw-sm) stretch;
}
.card .top { display: flex; justify-content: space-between; align-items: center; gap: 4px; flex-wrap: wrap; row-gap: 3px; }
.card .allure { display: inline-grid; grid-auto-flow: column; place-items: center; gap: 3px; min-width: 28px; height: 26px; border-radius: 13px; padding: 0 7px; background: var(--card-ink); color: var(--card-bg); font: 400 1rem/1 var(--f-head); }
.card .allure small { font: .8125rem/1 var(--f-type); text-transform: uppercase; letter-spacing: .04em; }
.card .pocket { font: .8125rem/1 var(--f-type); border: 1px solid currentColor; padding: 2px 4px; }
.card .nm { font: 400 1rem/1.02 var(--f-head); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; overflow-wrap: anywhere; }
.card:has(.score) .nm { padding-right: 26px; }
.card .arts { display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; }
.card .art { font: .8125rem/1 var(--f-type); padding: 2px 3px; border: 1px solid currentColor; white-space: nowrap; }
.card .thumb { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border: 1px solid currentColor; }
.card .thumb.ph { display: grid; place-items: center; font-size: 2.125rem; line-height: 1; color: var(--card-ink); background: color-mix(in srgb, var(--card-accent) 14%, transparent); }
.card .marks { display: flex; flex-wrap: wrap; gap: 2px; margin-top: auto; }
.card .mk { font: .8125rem/1.1 var(--f-type); padding: 2px 3px; color: var(--mk-good-fg); background: var(--mk-good-bg); }
.card .mk.bad { color: var(--mk-bad-fg); background: var(--mk-bad-bg); }
.card .mk.seen { color: var(--card-bg); background: var(--card-ink); }
.card .score { position: absolute; right: -6px; top: -8px; min-width: 32px; height: 32px; display: grid; grid-auto-flow: column; place-items: center; background: var(--paper-l); color: var(--ink-l); border: 2px solid var(--ink-l); font: 400 1.0625rem/1 var(--f-head); transform: rotate(6deg); padding: 0 3px; }
.card .score.bad { color: var(--bad-l); border-color: var(--bad-l); }
.card .score.good { color: var(--good-l); border-color: var(--good-l); }
:root[data-era="wildwest"] .card:not(.curse) .score, :root[data-era="vegas"] .card:not(.curse) .score { right: calc(-6px - var(--card-bw-sm)); top: calc(-8px - var(--card-bw-sm)); }
/* selection and glow are drawn on the card itself (outline + shadow), so a highlight can never drift off its target */
.card.sel { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--stamp-l), 3px 8px 14px var(--shadow); }
.card.sel::before { content: 'WORKED'; position: absolute; left: 50%; top: -10px; transform: translateX(-50%) rotate(-3deg); background: var(--tape); color: var(--ink-l); font: .8125rem/1 var(--f-type); padding: 4px 8px; letter-spacing: .1em; z-index: 2; }
:root[data-era="wildwest"] .card.sel::before, :root[data-era="vegas"] .card.sel::before { top: calc(-10px - var(--card-bw-sm)); }
.card.curse { background: var(--ink-l); color: var(--paper-l); outline: 2px dashed var(--stamp-d); outline-offset: -5px; }
.card.curse .nm { color: var(--stamp-d); }
.card.glow { box-shadow: 0 0 0 3px var(--good-l), 1px 3px 8px var(--shadow); }
@media (prefers-reduced-motion: no-preference) {
  .card.glow { animation: glow 1.1s ease-in-out .5s 2; }
  .card.nudge { animation: nudge .5s ease-in-out 2; }
  .card.deal { animation: deal .45s var(--ease-out) both; }
}
@keyframes glow { 50% { box-shadow: 0 0 0 3px var(--good-l), 0 0 18px var(--good-l); } }
@keyframes nudge { 50% { transform: translateY(-8px); } }
@keyframes deal { from { transform: translateY(40px); opacity: 0; } }
.card.nudge { box-shadow: 0 0 0 3px var(--stamp-l), 1px 3px 8px var(--shadow); }

/* ---------- flippable inspect cards ---------- */
.flip { position: relative; perspective: 1200px; }
.flip .faces { position: relative; display: grid; transition: transform .55s cubic-bezier(.3, .7, .2, 1); transform-style: preserve-3d; }
.flip .face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .back { transform: rotateY(180deg); }
.flip.flipped .faces { transform: rotateY(180deg); }
.flip-hint { font: .875rem/1.3 var(--f-type); color: var(--card-ink2); text-align: center; letter-spacing: .04em; }
.flipbtn { position: absolute; top: 8px; right: 8px; z-index: 3; min-height: 40px; padding: 6px 10px; border: 2px solid var(--card-ink); background: var(--card-bg); color: var(--card-ink); font: 400 .875rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .05em; }
.flipbtn::after { content: ''; position: absolute; inset: -4px; }
:root[data-era="wildwest"] .flipbtn, :root[data-era="vegas"] .flipbtn { top: calc(8px + var(--card-bw, 0px) / 2); right: calc(8px + var(--card-bw, 0px) / 2); }
.inspect {
  background: var(--card-bg) var(--tex-card) center / 100% 100% no-repeat; color: var(--card-ink); padding: var(--card-pad);
  display: grid; gap: 10px; align-content: start; box-shadow: 0 12px 30px var(--shadow);
  --ink2: var(--card-ink2); --stamp: var(--card-accent); --accent: var(--card-accent); --good: var(--card-ink); --bad: var(--card-accent);
}
:root[data-era="wildwest"] .inspect, :root[data-era="vegas"] .inspect {
  background: var(--card-bg); border: var(--card-bw) solid transparent; border-image: var(--tex-card) var(--card-slice) fill / var(--card-bw) stretch;
}
.inspect .h2 { font-size: 1.5rem; padding-right: 76px; }
.inspect .kicker { color: var(--card-accent); padding-right: 76px; }
.inspect .art-img { max-height: 34vh; max-height: 34dvh; width: auto; max-width: 100%; justify-self: center; aspect-ratio: 1; object-fit: cover; border: 2px solid currentColor; }
.inspect .art-img.portrait { aspect-ratio: 3 / 4; object-position: 50% 12%; }
@media (max-height: 760px) { .inspect .art-img, .inspect .mini-frame { max-height: 30dvh; } }
.inspect .mini-frame { max-height: 34dvh; width: auto; justify-self: center; }
.inspect p { margin: 0; }
.inspect .chip { color: var(--card-ink); }
.inspect .chip.solid { color: var(--card-bg); background: var(--card-ink); border-color: var(--card-ink); }
.inspect .chip.bad { color: var(--card-accent); }
.inspect .x, .inspect .fact > span:first-child { color: var(--card-ink2); }
.inspect .voice { color: var(--card-ink); }
/* round 6 (finding 12): the whisper balloon keeps its light paper in every skin, so its text is the light-paper ink (in Vegas
   --card-ink is pale, and white-on-white hid the stallholder's clue) */
.inspect .balloon { color: var(--ink-l); }
.inspect .badge-stand { color: var(--card-ink2); border-color: var(--card-ink2); }
.inspect .flav, .flav { font: italic 1rem/1.35 var(--f-body); }
.facts { display: grid; gap: 8px; }
.fact { display: grid; grid-template-columns: 6.25rem 1fr; gap: 8px; align-items: baseline; font-size: .9375rem; }
.fact > span:first-child { font: .875rem/1.2 var(--f-type); text-transform: uppercase; color: var(--ink2); letter-spacing: .04em; }
.fact > span:last-child { min-width: 0; }

/* ---------- places ---------- */
.places { display: grid; gap: 12px; }
.place { position: relative; display: grid; grid-template-columns: 1fr; text-align: left; padding: 0; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.place .pimg { position: relative; aspect-ratio: 16 / 7; overflow: hidden; z-index: 0; }
.place .pimg img { width: 100%; height: 100%; object-fit: cover; }
/* the host portrait is its own button and overhangs the card body */
.place > .host { position: absolute; right: 8px; top: 0; margin-top: calc(43.75% - 42px); width: 64px; padding: 0; border: 3px solid var(--paper); box-shadow: 1px 2px 6px var(--shadow); background: var(--ink); z-index: 3; }
.place > .host img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; object-position: 50% 12%; }
.place-hit { position: absolute; inset: 0; z-index: 2; border: 0; background: transparent; padding: 0; cursor: pointer; }
.place-hit:focus-visible { outline-offset: -4px; }
.place .pbody { position: relative; z-index: 1; pointer-events: none; padding: 8px 84px 10px 10px; display: grid; gap: 4px; }
.place .pbody .h3 { font-size: 1.25rem; }
.place .kindtag { position: absolute; left: 8px; top: 8px; background: var(--ink-l); color: var(--paper-l); font: .875rem/1 var(--f-type); text-transform: uppercase; letter-spacing: .06em; padding: 5px 7px; }
.place .kindtag.k-posh { box-shadow: inset 4px 0 0 var(--good-d); }
.place .kindtag.k-gutter { box-shadow: inset 4px 0 0 var(--stamp-d); }
.place .smiles { font: .875rem/1.35 var(--f-type); color: var(--accent); }
.smiles .withit { color: var(--good); font-weight: 700; }
.place .paytag { font: 600 .9375rem/1.25 var(--f-body); color: var(--good); text-transform: none; }
.place .paytag.ah { color: var(--bad); }
.place .paytag.back { color: var(--accent); text-transform: none; }
.place.shut { opacity: .62; }
.place .shutstamp { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) rotate(-10deg); }
.place.banner { box-shadow: none; }
.place.banner .pbody { padding-right: 10px; pointer-events: auto; }
.place.banner .kindtag .x { color: inherit; }

/* ---------- punters board ---------- */
.punters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 6px; }
.punter { position: relative; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); }
.punter:nth-child(3n+1) .photo { transform: rotate(-2deg); }
.punter:nth-child(3n+2) .photo { transform: rotate(1.5deg); }
.punter:nth-child(3n) .photo { transform: rotate(-1deg); }
.punter .qs { position: absolute; right: -4px; top: 8px; display: grid; gap: 3px; z-index: 3; }
.punter .qs i { font: 400 .875rem/1 var(--f-head); font-style: normal; background: var(--stamp); color: var(--paper); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; box-shadow: 1px 1px 3px var(--shadow); }
.punter .tag { display: block; font: .9375rem/1.25 var(--f-body); text-transform: none; margin-top: 4px; color: var(--ink2); text-align: center; }
.punter .tag.host { color: var(--good); font-weight: 700; }
.locked-note { font: .9375rem/1.35 var(--f-body); color: var(--ink2); border: 1px dashed var(--ink2); padding: 8px; }
.doors { display: grid; gap: 8px; }
.door { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; min-height: 52px; padding: 8px 10px; border: 1.5px solid var(--ink); background: var(--paper2); text-align: left; color: var(--ink); }
.door b { font: 400 1rem/1.1 var(--f-head); text-transform: uppercase; }
.door .fresh { font: 400 .875rem/1 var(--f-head); color: var(--paper); background: var(--stamp); padding: 5px 7px; transform: rotate(3deg); }
.rivals { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.rival { padding: 0; border: 0; background: none; text-align: center; color: var(--ink); display: grid; gap: 4px; justify-items: center; }
.rival .photo { width: 100%; }
.rival .lbl { min-height: 18px; }
.reticule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.item { position: relative; padding: 6px; border: 1.5px solid var(--ink); background: var(--paper2); color: var(--ink); text-align: left; display: grid; gap: 4px; align-content: start; }
.item img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.item b { font: 400 .875rem/1.05 var(--f-head); text-transform: uppercase; overflow-wrap: anywhere; }
.item .small { font-size: .875rem; }
.item.on { box-shadow: 0 0 0 3px var(--stamp); }
.empty-note { font: italic .9375rem var(--f-body); color: var(--ink2); }
.market { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mcol { display: grid; grid-template-rows: 1fr auto; gap: 6px; }

/* front-page sections already seen fold to one line */
.fold-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; min-height: 48px; padding: 8px 2px; background: none; border: 0; border-bottom: 3px double var(--ink); color: var(--ink); text-align: left; }
.fold-sec .h3 { font-size: 1.25rem; }
.fold-x { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink2); }
/* what's next: the locked sections on one line, and the next rung */
.later { display: grid; gap: 8px; }
.later .kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); }
.later .kicker svg { width: 16px; height: 16px; }
.peeks { display: flex; flex-wrap: wrap; gap: 8px; }
.peek { min-height: 44px; padding: 6px 12px; border: 1.5px dashed var(--ink2); background: transparent; color: var(--ink); font: 400 1rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .03em; }
.rung { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ink2); }
.later + .rung { margin-top: 4px; }
.whatsnext > .rung:first-child { border-top: 0; padding-top: 0; }
.rungbar { position: relative; height: 10px; background: var(--paper2); border: 1.5px solid var(--ink); overflow: hidden; }
.rungbar i { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, var(--accent), var(--accent) 6px, var(--stamp) 6px, var(--stamp) 12px); transform-origin: left; }

/* sticky note: the next assignment */
.note { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; width: 100%; min-height: 52px; padding: 10px 12px 10px 14px; border: 0; text-align: left; cursor: pointer; background: var(--note-bg); color: var(--ink-l); font: .9375rem/1.3 var(--f-body); box-shadow: 2px 3px 6px var(--shadow); transform: rotate(-.6deg); scroll-margin-top: calc(var(--chip-h) + 24px); }
.note b { font: 400 .9375rem/1.2 var(--f-head); text-transform: uppercase; color: var(--stamp-l); letter-spacing: .05em; }
.note .tap { font: 400 1.5rem/1 var(--f-head); color: var(--stamp-l); }
/* the first evening's note docks at the foot of the column, beside the Menu button */
.note.docked { position: fixed; z-index: 25; bottom: calc(12px + var(--safe-b)); left: max(12px, calc(50% - var(--col) / 2 + 12px)); width: min(calc(100% - 24px - var(--fab) - 10px), calc(var(--col) - 24px - var(--fab) - 10px)); margin: 0; box-shadow: 0 6px 16px var(--shadow); }

/* the two roads */
.roadstrip { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; width: 100%; min-height: 56px; padding: 8px 10px; border: 1.5px solid var(--ink); background: var(--paper2); color: var(--ink); text-align: left; }
.roadstrip .rl { display: grid; gap: 1px; font: .875rem/1.15 var(--f-type); color: var(--ink2); letter-spacing: .04em; }
.roadstrip .rl b { font: 400 .9375rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.roadstrip .rl.no { text-align: right; }
.roadstrip .rl.st b { color: var(--good); }
.roadstrip .rl.no b { color: var(--stamp); }
.roadstrip .rlean { grid-column: 1 / -1; font: .875rem/1.2 var(--f-type); text-align: center; color: var(--ink2); }
.rail { display: flex; align-items: center; height: 12px; min-width: 64px; }
.rail .rh { flex: 1; height: 100%; background: var(--paper); border: 1.5px solid var(--ink); display: flex; overflow: hidden; }
.rail .rh.st { justify-content: flex-end; border-right: 0; }
.rail .rh.no { border-left: 0; }
.rail .rh i { display: block; height: 100%; }
.rail .rh.st i { background: var(--good); }
.rail .rh.no i { background: var(--stamp); }
.rail .rmid { width: 3px; height: 20px; background: var(--ink); }
.roadstrip.big { min-height: 64px; }
.roads { display: grid; gap: 10px; }
.roadcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.roadcol { display: grid; gap: 6px; align-content: start; padding: 10px; border: 1.5px solid var(--ink); background: var(--paper); }
.roadcol.st { box-shadow: inset 4px 0 0 var(--good); }
.roadcol.no { box-shadow: inset 4px 0 0 var(--stamp); }
.roadcol p { margin: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.steps li { display: grid; gap: 2px; font-size: .9375rem; line-height: 1.3; }
.steps li b { font: 400 1rem/1 var(--f-head); text-transform: uppercase; }
.steps li.bad b { color: var(--bad); }
.steps .x { justify-self: start; font: .875rem/1.2 var(--f-type); color: var(--ink2); letter-spacing: .04em; }
.steps .togo { font: .875rem/1.2 var(--f-type); color: var(--ink2); letter-spacing: .04em; }
.warnline { margin: 0; font-size: .9375rem; color: var(--bad); border-left: 4px solid var(--bad); padding-left: 8px; }

/* ---------- the play layer: hand, decision block, Sway tray ---------- */
.play-sheet .instr { margin: 0; }
.gent-head { display: grid; grid-template-columns: 6rem 1fr; gap: 12px; align-items: start; scroll-margin-top: calc(var(--chip-h) + 24px); }
.gent-head .meta { display: grid; gap: 6px; min-width: 0; }
.voice { font: italic 1rem/1.3 var(--f-body); color: var(--accent); margin: 0; }
.hosttag { margin: 0; font-size: .9375rem; color: var(--good); }
.taste-row { display: flex; flex-wrap: wrap; gap: 4px 6px; font: .875rem/1.2 var(--f-type); letter-spacing: .04em; }
.tg { display: inline-flex; align-items: center; gap: 2px; padding: 3px 6px; border: 1px solid currentColor; font: .875rem/1.2 var(--f-type); letter-spacing: .04em; }
.tg.good { color: var(--good); }
.tg.bad { color: var(--bad); }
.tg.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.aico { width: 1.05em; height: 1.05em; vertical-align: -0.16em; margin-right: .18em; flex: none; display: inline-block; }
.card .thumb.ph .aico.big { width: 46%; height: auto; aspect-ratio: 1; margin: 0; stroke-width: 1.6; }
.dyn { display: grid; gap: 8px; }
.dyn:empty { display: none; }
.tip { margin: 0; }
.talent-note { flex: 1 1 160px; }
.cost { margin: 0; font-size: .9375rem; line-height: 1.3; border-left: 4px solid var(--accent); padding: 4px 8px; background: var(--paper2); }
.bet { display: grid; gap: 6px; border: 2px dashed var(--stamp); padding: 8px 10px; }
.bet p { margin: 0; font-size: .9375rem; }
.bet .btn { justify-self: start; }
.slum { display: grid; gap: 8px; }
.shut-preview { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; }
.shut-preview .mini { position: relative; filter: grayscale(1); opacity: .7; border: 2px solid var(--ink); }
.shut-preview .mini img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.shut-preview .tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); background: var(--bad-l); color: var(--on-mark); font: 400 .875rem/1 var(--f-head); text-transform: uppercase; padding: 4px 5px; white-space: nowrap; }
.warn { border: 2px solid var(--bad); color: var(--bad); padding: 6px 8px; font-size: .9375rem; line-height: 1.3; margin: 0; }
.item-btn { white-space: normal; text-align: left; line-height: 1.2; }
.item-btn.kinkglow { box-shadow: 0 0 0 3px var(--good), 0 0 14px var(--good); }
.hints { border-left: 4px solid var(--accent); padding: 2px 0 2px 10px; display: grid; gap: 4px; }
.hints p { margin: 0; font-size: .9375rem; }
.hints .by { font: .875rem/1.3 var(--f-type); color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; }
details.hints summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
/* the headline slot keeps the height of the headline it last held (set by paintHl), so nothing under it jumps */
.hlslot { scroll-margin-bottom: calc(var(--tray-h, 0px) + 8px); scroll-margin-top: calc(var(--chip-h) + 24px); }
.hlslot:empty:not([style]) { display: none; }
.hlslot .hl { box-shadow: 0 3px 10px var(--shadow); animation-name: hlFade; }

/* the tray: sticky to the foot of the screen; row 1 the meter and verdict, row 2 Menu, Best Guess and the main action */
.tray { position: sticky; bottom: 0; z-index: 15; margin-inline: -16px; padding: 8px 12px calc(10px + var(--safe-b)); background: var(--paper); border-top: 3px double var(--ink); box-shadow: 0 -6px 14px var(--shadow); display: grid; gap: 8px; }
.meter { display: grid; gap: 6px; }
.meter .track { position: relative; height: 8px; background: var(--paper2); border: 1.5px solid var(--ink); }
.meter .fill { position: absolute; inset: 0; transform-origin: left; background: repeating-linear-gradient(-45deg, var(--accent), var(--accent) 6px, var(--stamp) 6px, var(--stamp) 12px); transition: transform var(--t-meter) cubic-bezier(.3, 1.4, .5, 1); }
.meter .fill.ok { background: repeating-linear-gradient(-45deg, var(--good), var(--good) 6px, var(--accent2) 6px, var(--accent2) 12px); }
.meter .mark { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 3px solid var(--ink); }
.meter .mark.del { border-left-style: dotted; }
.meter .mark.bg { border-left: 2px dashed var(--ink2); }
.meter .line { display: flex; align-items: center; gap: 10px; }
.meter .big { display: grid; justify-items: center; flex: none; min-width: 2.5rem; font: 400 2rem/.9 var(--f-head); font-variant-numeric: tabular-nums; }
.meter .big small { font: .875rem/1.2 var(--f-type); color: var(--ink2); letter-spacing: .04em; }
.vwrap { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.verdict { font: 400 1.125rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; }
.verdict.good { color: var(--good); }
.verdict.bad { color: var(--bad); }
.verdict.pop { display: inline-block; animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) both; justify-self: start; }
.sub { font-size: .9375rem; line-height: 1.25; color: var(--ink2); }
.sub .itchd { color: var(--bad); font-weight: 700; }
.why { font: inherit; background: none; border: 0; color: var(--accent); text-decoration: underline; padding: 0 4px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; margin-block: -12px; cursor: pointer; }
.meter .legend { margin-top: 2px; }
.meter .legend:empty { display: none; }
.tray-acts { display: grid; grid-template-columns: var(--chip-h) minmax(0, 1fr) minmax(0, 1.35fr); gap: 8px; align-items: stretch; }
.tray-menu { display: grid; place-items: center; align-content: center; gap: 1px; width: var(--chip-h); min-height: 48px; padding: 0; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 400 .875rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .04em; }
.tray-menu svg { width: 22px; height: 22px; }
.tray-acts .btn { min-height: 52px; padding: 6px 8px; font-size: 1.0625rem; }
.tray-acts .btn.main { flex-direction: column; gap: 2px; line-height: 1.05; }
.tray-acts .btn.hint { background: var(--paper); border-style: solid; }
.btn .lastpay { display: block; font: .875rem/1.1 var(--f-type); text-transform: uppercase; letter-spacing: .04em; opacity: .9; }
.rivalclip { display: grid; grid-template-columns: 60px 1fr; gap: 10px; align-items: center; }
.rivalclip > div { min-width: 0; }
.rivalclip .rface { padding: 0; border: 0; background: none; }
.rivalclip .rface img, .rivalclip .rface .miss { width: 60px; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%; border: 2px solid var(--ink); }
.rivalclip p { margin: 2px 0 6px; }
.rivalclip .chip, .chips .chip.bad[data-x="upstage"] { white-space: normal; line-height: 1.2; }
.ahbanner { border: 2px solid var(--bad); background: var(--paper2); padding: 10px 12px; display: grid; gap: 6px; }
.ahbanner p { margin: 0; font-size: .9375rem; }
.ahbanner .btn { justify-self: start; }
.sealwait { margin: 0; font-size: .9375rem; line-height: 1.35; border-left: 4px solid var(--good); padding: 4px 0 4px 10px; }
.awaystrip { display: grid; grid-template-columns: 1fr 44px; align-items: center; border: 1px dashed var(--ink2); padding: 4px 4px 4px 10px; }
.awaystrip .link { text-align: left; background: none; border: 0; padding: 6px 0; font: .9375rem/1.3 var(--f-body); color: var(--ink); min-height: 44px; text-decoration: none; }
.awaystrip .kicker { font-size: .875rem; margin-right: 4px; }
.arrive-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.arrive-head .kicker { margin: 0; }
.arrive-photo { width: 150px; margin: 0 auto; }
/* round 6 (finding 22): a short phone keeps the arrival portrait small, so the docked button never hides the road picks */
@media (max-height: 760px) { .arrive-photo { width: auto; max-width: 150px; } .arrive-photo img { max-height: 28dvh; width: auto; margin-inline: auto; } }
.awaystrip .close, .hl .close, .menu-head .close, .arrive-head .close { width: 44px; height: 44px; border: 0; background: none; font: 400 1.5rem/1 var(--f-head); color: var(--ink2); }

/* ---------- results ---------- */
.spinpaper { width: min(420px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; animation: spinIn .9s cubic-bezier(.15, .7, .25, 1) both; }
#app > .spinpaper { width: auto; max-height: none; overflow: visible; }
@keyframes spinIn { from { transform: scale(.05) rotate(-720deg); opacity: 0; } 60% { opacity: 1; } }
.spinpaper .sheet, .sheet.spinpaper { padding: 22px 18px 26px; }
.extra { text-align: center; display: grid; gap: 10px; justify-items: center; }
.extra .h1 { font-size: clamp(2.1rem, 10vw, 2.875rem); }
.extra > * + * { margin-top: 0; }
/* the reward image: her plate at about 40% of the screen, the stamp across its corner */
.hero { position: relative; display: grid; justify-items: center; width: 100%; }
.hero img, .hero .miss { height: 40vh; height: 40dvh; max-height: 420px; width: auto; max-width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border: 6px solid var(--paper-l); box-shadow: 2px 6px 18px var(--shadow); }
.hero.won img { border-color: var(--gold); box-shadow: 0 0 0 3px var(--ink-l), 0 0 28px rgba(201, 162, 74, .6); }
.hero .stamp { position: absolute; left: 4%; bottom: 6%; background: color-mix(in srgb, var(--paper-l) 80%, transparent); }
.hero.small img { height: 22vh; height: 22dvh; }
.payline { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font: 400 1.375rem/1 var(--f-head); }
.payline span { display: grid; gap: 2px; }
.payline small { font: .875rem/1.2 var(--f-type); text-transform: uppercase; color: var(--ink2); letter-spacing: .04em; }
.payline small .x { text-transform: inherit; }
.clash { display: grid; gap: 8px; }
.entry { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 6px; border: 1.5px solid var(--ink); background: var(--paper2); position: relative; }
.entry.me { box-shadow: inset 5px 0 0 var(--stamp); }
.entry.short { opacity: .7; }
.entry .face img, .entry .face .miss { width: 52px; height: 66px; object-fit: cover; object-position: 50% 12%; }
.entry .who { display: grid; gap: 3px; min-width: 0; }
.entry .who b { font: 400 1rem/1.05 var(--f-head); text-transform: uppercase; }
.entry .bar { height: 10px; background: var(--paper); border: 1px solid var(--ink); position: relative; overflow: hidden; }
.entry .bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform .8s cubic-bezier(.3, 1, .4, 1); }
.entry .rk { font: 400 1.625rem/1 var(--f-head); color: var(--stamp); min-width: 46px; text-align: center; }
.ustamp { justify-self: start; margin-top: 2px; font: 400 .875rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .04em; color: var(--on-mark); background: var(--bad-l); border: 0; padding: 6px 7px; transform: rotate(-2deg); cursor: help; }
.split { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-items: end; height: 130px; }
.split div { display: grid; align-content: end; gap: 3px; text-align: center; font: .875rem/1.15 var(--f-type); height: 100%; letter-spacing: .04em; }
.split i { display: block; background: var(--accent); border: 2px solid var(--ink); min-height: 6px; }
.split div.me i { background: var(--stamp); }
.split b { font: 400 1.125rem/1 var(--f-head); }
details.sums { display: grid; gap: 10px; }
details.sums > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: .875rem/1.2 var(--f-type); text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
details.sums[open] > * + * { margin-top: 10px; }
.clip-list { display: grid; gap: 10px; text-align: left; }
.teaser { margin: 0; font-size: .9375rem; color: var(--ink2); }
.teaser .h3 { color: var(--ink); }
.clip { background: var(--paper2); padding: 10px 12px; border-left: 4px solid var(--stamp); display: grid; gap: 4px; text-align: left; }
.clip .h3 { font-size: 1.125rem; }
.clip p { margin: 0; font-size: .9375rem; }
.clip.hind { border-left-color: var(--accent); }
.clip.win { border-left-color: var(--good); }
.catchrow { flex-wrap: nowrap; align-items: flex-start; }
.catchimg { width: 84px; flex: none; }
.postcard { border: 8px solid var(--paper-l); box-shadow: 2px 4px 12px var(--shadow); transform: rotate(-1.5deg); background: var(--paper-l); color: var(--ink-l); text-align: left; }
.postcard img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; max-height: 24vh; }
.postcard p { margin: 6px 4px 2px; font-size: .9375rem; line-height: 1.3; }
.postcard .overheard { color: var(--ink2-l); }
.postcard.tourist img { object-position: 50% 40%; }
.extra .postcard { width: min(320px, 100%); justify-self: center; }
/* the results page's one button stays on screen while the edition is read */
.cta-dock { position: sticky; bottom: calc(10px + var(--safe-b)); z-index: 15; padding-top: 6px; }
.cta-dock .btn { box-shadow: 3px 3px 0 var(--ink-l), 0 8px 18px var(--shadow); }

/* ---------- timelines board ---------- */
.tl-list { display: grid; gap: 14px; }
.tl { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 12px; text-align: left; border: 0; box-shadow: 3px 5px 12px var(--shadow); width: 100%; }
.tl.victorian { background: var(--vic-bg) url("../art-assets/victorian/skin-bg.webp") center / 240px; color: var(--vic-fg); --acc: var(--vic-acc); --tfont: 'IM Fell English SC', 'Georgia', serif; }
.tl.wildwest { background: var(--ww-bg) url("../art-assets/wildwest/skin-bg.webp") center / 240px; color: var(--ww-fg); --acc: var(--ww-acc); --tfont: 'Rye', 'Georgia', serif; }
.tl.vegas { background: var(--vg-bg) url("../art-assets/vegas/skin-bg.webp") center / 240px; color: var(--vg-fg); --acc: var(--vg-acc); --tfont: 'Bungee', 'Arial Black', sans-serif; }
.tl .tname { font: 400 1.25rem/1.05 var(--tfont); color: var(--acc); }
.tl .tsub { font-size: .875rem; line-height: 1.3; opacity: .95; }
.tl .tbody { display: grid; gap: 5px; align-content: start; min-width: 0; }
.tl .count { font-weight: 700; } /* the Curtain clock is words now (later on / soon / any minute now), set in the line */
.tl .tnums { display: flex; gap: 12px; font: .875rem var(--f-type); flex-wrap: wrap; }
.tl .tnums b { font: 400 1.0625rem var(--f-head); }
.tl.locked { filter: grayscale(.85); opacity: .75; }
.tl .here, .tl .cta { justify-self: start; font: 400 .9375rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .05em; background: var(--acc); color: var(--ink-l); padding: 6px 8px; }
.tl .cta { margin-top: 4px; padding: 9px 10px; }
.tl.invite { outline: 3px dashed var(--acc); outline-offset: -6px; }
.tl .lastcall { justify-self: start; font: 400 .875rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; background: var(--stamp-l); color: var(--on-mark); padding: 5px 7px; transform: rotate(-2deg); }
@media (prefers-reduced-motion: no-preference) { .tl .lastcall { animation: pulse 1.2s ease-in-out infinite; } }
@keyframes pulse { 50% { transform: rotate(-2deg) scale(1.08); } }
.prog { font: .875rem/1.35 var(--f-type); letter-spacing: .04em; }
.mini-frame { aspect-ratio: 3 / 4; overflow: hidden; border: 8px solid; max-width: 100%; }
.mini-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.mf-victorian { border-image: url("../art-assets/victorian/skin-frame.webp") 120 / 9px stretch; background: var(--vic-bg); }
.mf-wildwest { border-image: url("../art-assets/wildwest/skin-frame.webp") 90 / 7px stretch; background: var(--ww-bg); }
.mf-vegas { border-image: url("../art-assets/vegas/skin-frame.webp") 110 / 9px stretch; background: var(--vg-bg); }
.score-plate { text-align: center; display: grid; gap: 6px; justify-items: center; }
.score-plate .num { font: 400 4rem/.9 var(--f-head); font-variant-numeric: tabular-nums; color: var(--stamp); }
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; }
.ladder div { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 1.5px solid var(--ink); font: .875rem/1.1 var(--f-type); text-align: center; overflow-wrap: anywhere; letter-spacing: .04em; }
.ladder div b { font: 400 1.125rem/1 var(--f-head); }
.ladder div.on { background: var(--ink); color: var(--paper); }

/* ---------- players ---------- */
.tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tabs button { min-height: 44px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 400 .9375rem/1.05 var(--f-head); text-transform: uppercase; letter-spacing: .03em; padding: 6px; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.board { display: grid; gap: 0; }
.prow { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--ink2); background: none; text-align: left; color: var(--ink); width: 100%; min-height: 56px; }
.prow .rk { font: 400 1.625rem/1 var(--f-head); color: var(--ink2); text-align: center; }
.prow.me { background: var(--paper2); box-shadow: inset 4px 0 0 var(--stamp); }
.prow .nm { font: 400 1.125rem/1.05 var(--f-head); text-transform: uppercase; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.prow .val { font: 400 1.5rem/1 var(--f-head); font-variant-numeric: tabular-nums; text-align: right; }
.wchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wchip { display: inline-grid; grid-template-columns: 26px auto; gap: 5px; align-items: center; font: .9375rem/1.2 var(--f-body); }
.wchip img, .wchip .miss { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; font-size: 0; }
.tlb { font: .875rem/1 var(--f-type); text-transform: uppercase; padding: 2px 4px; letter-spacing: .05em; }
.tlb.victorian { background: var(--vic-bg); color: var(--vic-acc); }
.tlb.wildwest { background: var(--ww-bg); color: var(--ww-acc); }
.tlb.vegas { background: var(--vg-bg); color: var(--vg-acc2); }

/* ---------- title, pick ---------- */
.title-ransom { font-size: clamp(1.875rem, 10vw, 2.875rem); margin-top: 10px; }
.signup { display: grid; gap: 10px; }
.field { display: grid; gap: 4px; }
.field label { font: .875rem/1.2 var(--f-type); text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.field input { min-height: 48px; padding: 8px 10px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 1.0625rem var(--f-body); }
/* "Pick one for me": the die under the name field (game/names.js) */
.field .nomroll { justify-self: start; margin-top: 4px; }
.field .nomhint { margin-top: 2px; }
.field .nomhint.need { color: var(--bad); }
/* accounts (game/net.js): the password, the form's status line and hint, Letters to the Editor */
.field textarea { width: 100%; min-height: 132px; padding: 8px 10px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 1.0625rem/1.4 var(--f-body); resize: vertical; }
.formline { margin: 0; }
.formline:empty { display: none; }
.formline.need { color: var(--bad); }
.tabs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* Log in or Create account (the title signed out, and Menu > Keep your game anywhere). While the title is asking, the two
   choices are full-width buttons (.ask); once a form is open they are a pair of tabs (.tabs.two). One form at a time
   sits in #authform. */
.authpick.ask { display: grid; gap: 10px; }
#authform:empty { display: none; }
.authswap { justify-self: center; }
#login-instead { justify-self: start; }
.stars { display: flex; gap: 4px; }
.stars button { min-width: 48px; min-height: 48px; padding: 0; border: 0; background: none; color: var(--ink2); font-size: 2rem; line-height: 1; }
.stars button.on { color: var(--stamp); }
/* the street's rows (real players) are read, not tapped */
.prow.street { cursor: default; }
.prow.street:hover { background-image: none; }
.prow.street .small { display: block; }
.cork { position: relative; padding: 18px 8px 8px; }
.cork svg.string { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.suspects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; position: relative; }
.suspect { padding: 0; border: 0; background: none; text-align: center; color: var(--ink); position: relative; }
.suspect .photo { transition: transform var(--t-sheet) ease; }
.suspect:nth-child(1) .photo { transform: rotate(-3deg); }
.suspect:nth-child(2) .photo { transform: rotate(2deg) translateY(10px); }
.suspect:nth-child(3) .photo { transform: rotate(-1.5deg); }
.suspect.on .photo { transform: scale(1.04) rotate(0); box-shadow: 0 0 0 3px var(--stamp), 2px 8px 18px var(--shadow); }
.suspect .temper { display: inline-block; margin-top: 8px; font: 400 .875rem/1 var(--f-head); letter-spacing: .08em; background: var(--ink); color: var(--paper); padding: 5px 7px; transform: rotate(-2deg); }
.mini-frame.flashy { position: relative; }
.mini-frame .flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.mini-frame .flash img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
/* each suspect flashes her look twice, then rests (no endless loops) */
@media (prefers-reduced-motion: no-preference) { .mini-frame .flash { animation: flashlook 7s ease-in-out var(--flash-delay, 0s) 2; } }
@keyframes flashlook { 0%, 68%, 100% { opacity: 0; } 76%, 92% { opacity: 1; } }
.bubble { position: relative; background: var(--paper2); border: 2px solid var(--ink); padding: 10px 12px; font: italic 1.0625rem/1.35 var(--f-body); border-radius: 4px; }
.balloon { position: relative; display: block; background: var(--paper-l); color: var(--ink-l); border: 2px solid var(--ink-l); border-radius: 18px; padding: 6px 12px; font: 1rem/1.3 var(--f-body); box-shadow: 2px 2px 0 var(--ink-l); }

/* ---------- The Morning Edition (the overview) ---------- */
body.ov-mode .col { padding-block: 0; min-height: 100vh; min-height: 100dvh; }
.ov { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-block: calc(8px + var(--safe-t)) calc(10px + var(--safe-b)); gap: 8px; }
.ov-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.ov-top .kicker { color: var(--paper-l); text-shadow: 0 1px 2px #000; }
.ov-skip { background: var(--paper); min-width: 76px; }
.ov-track { flex: 1 1 auto; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; gap: 0; }
.ov-track::-webkit-scrollbar { display: none; }
.ov-track:focus-visible { outline-offset: -3px; }
.ov-page { scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 6px 2px 10px; }
.ov-sheet { display: grid; gap: 10px; align-content: start; min-height: 100%; padding: 16px 14px 20px; }
.ov-sheet > * + * { margin-top: 0; }
.ov-mast { display: grid; gap: 2px; text-align: center; border-bottom: 3px double var(--ink); padding-bottom: 6px; }
.ov-mast .name { font: 400 clamp(1.25rem, 6vw, 1.625rem)/1 var(--f-head); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.ov-mast .kicker { text-align: center; }
.ov-h { font: 400 clamp(1.875rem, 8.6vw, 2.625rem)/.98 var(--f-head); text-transform: uppercase; margin: 0; text-wrap: balance; letter-spacing: .01em; }
.ov-body { margin: 0; font-size: 1.0625rem; line-height: 1.4; }
.ov-sub { margin: 2px 0 0; font: 600 1.0625rem/1.2 var(--f-body); color: var(--ink); }
.ovroad .rpay, .ovroad .rcost { font-size: .875rem; line-height: 1.25; }
.ovroad .rcost { color: var(--ink2); }

.ov-cap { margin: 0; font: italic .9375rem/1.35 var(--f-body); color: var(--ink2); border-top: 1px solid var(--ink2); padding-top: 6px; }
.ov-pic { min-width: 0; }
/* round 5 (findings 12 and 26): one foot layout on every page. Back always sits in its own column; on the last page Next's
   slot stays (invisible, so a thumb tapping through lands on nothing) and the two choices print in a row above it */
.ov-foot { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "end end end" "dots prev next"; align-items: center; gap: 8px 10px; }
.ov-foot .dots { grid-area: dots; } .ov-foot .ov-prev { grid-area: prev; } .ov-foot .ov-next { grid-area: next; }
.ov-end { grid-area: end; display: none; grid-template-columns: 1fr 1fr; gap: 8px; }
.ov-end .btn { min-height: 48px; padding: 6px 8px; font-size: 1rem; line-height: 1.1; }
.ov-foot.end .ov-end { display: grid; }
.ov-foot.end .ov-next { visibility: hidden; }
.ov-foot .dots { display: flex; gap: 8px; }
.ov-foot .dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--paper-l); }
.ov-foot .dots i.on { background: var(--paper-l); }
.ov-prev { min-width: 48px; padding: 0 12px 0 8px; gap: 2px; font-size: 1rem; }
.ov-next { min-width: 148px; }
.ov-choice { display: grid; gap: 10px; }
.ov-choice .small { margin: 0; }
/* page 1 & the overview's pictures */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); aspect-ratio: 4 / 3; border: 3px solid var(--ink); background: var(--ink); overflow: hidden; }
.trio-cell { position: relative; background-size: cover; background-position: center; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border-right: 3px solid var(--paper-l); }
.trio-cell:last-child { border-right: 0; }
.trio-cell img, .trio-cell .miss { width: 86%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%; border: 3px solid var(--paper-l); border-bottom: 0; box-shadow: 0 -2px 10px rgba(0,0,0,.5); }
.trio-tag { position: absolute; left: 50%; top: 8px; transform: translateX(-50%) rotate(-3deg); background: var(--paper-l); color: var(--ink-l); font: 400 .875rem/1 var(--f-head); text-transform: uppercase; padding: 4px 6px; white-space: nowrap; }
.ov-demo { display: grid; gap: 8px; }
.ov-gent { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; }
.ov-gent img { width: 64px; aspect-ratio: 3 / 4; object-fit: cover; border: 2px solid var(--ink); }
.ov-gent > div { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.ov-gent .h3 { width: 100%; }
.ov-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ovc { position: relative; display: grid; gap: 4px; align-content: start; padding: 6px; min-height: 120px; border: 0; background: var(--card-bg); color: var(--card-ink); text-align: left; box-shadow: 1px 3px 8px var(--shadow); font: .8125rem/1.1 var(--f-type); transition: transform var(--t-fast) ease; }
.ovc img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border: 1px solid currentColor; }
.ovc .nm { font: 400 .9375rem/1 var(--f-head); text-transform: uppercase; }
.ovc .mk { justify-self: start; font: .8125rem/1.1 var(--f-type); padding: 2px 4px; color: var(--mk-good-fg); background: var(--mk-good-bg); }
.ovc .mk.bad { color: var(--mk-bad-fg); background: var(--mk-bad-bg); }
.ovc .score { position: absolute; right: -6px; top: -8px; min-width: 30px; height: 30px; display: grid; place-items: center; background: var(--paper-l); color: var(--ink-l); border: 2px solid var(--ink-l); font: 400 1rem/1 var(--f-head); transform: rotate(6deg); }
.ovc .score.good { color: var(--good-l); border-color: var(--good-l); }
.ovc .score.bad { color: var(--bad-l); border-color: var(--bad-l); }
.ovc.on { transform: translateY(-5px); box-shadow: 0 0 0 3px var(--stamp-l), 2px 6px 12px var(--shadow); }
.ov-meter { display: grid; gap: 4px; }
.ov-meter .track { position: relative; display: block; height: 10px; background: var(--paper2); border: 1.5px solid var(--ink); }
.ov-meter .fill { position: absolute; inset: 0; transform-origin: left; background: repeating-linear-gradient(-45deg, var(--accent), var(--accent) 6px, var(--stamp) 6px, var(--stamp) 12px); transition: transform var(--t-meter) cubic-bezier(.3, 1.4, .5, 1); }
.ov-meter .fill.ok { background: repeating-linear-gradient(-45deg, var(--good), var(--good) 6px, var(--accent2) 6px, var(--accent2) 12px); }
.ov-meter .mark { position: absolute; top: -5px; bottom: -5px; border-left: 3px solid var(--ink); }
.ov-costs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.clipcut { position: relative; display: grid; gap: 4px; align-content: start; min-height: 88px; padding: 10px; border: 0; background: var(--paper2); color: var(--ink); text-align: left; box-shadow: 1px 2px 5px var(--shadow); font-size: .9375rem; line-height: 1.25; }
.clipcut b { font: 400 1.5rem/1 var(--f-head); }
.clipcut.bad b { color: var(--bad); }
.clipcut.red { background: var(--stamp); color: var(--paper); }
.clipcut:nth-child(odd) { transform: rotate(-1deg); }
.clipcut:nth-child(even) { transform: rotate(1deg); }
.dots3 { display: inline-flex; gap: 4px; align-items: center; }
.dots3 i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; }
.dots3 i.on { background: var(--stamp); border-color: var(--stamp); }
.ov-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ovroad { display: grid; gap: 3px; align-content: start; padding: 0 0 8px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); text-align: left; }
/* round 6 (finding 7): a letterbox picture keeps both road cards, Pays and Costs included, on one screen */
.ovroad img { aspect-ratio: 5 / 2; width: 100%; object-fit: cover; }
.ovroad .mast { font: 400 1.125rem/1 var(--f-head); text-transform: uppercase; padding: 4px 8px 0; }
.ovroad .road { font: .875rem/1.2 var(--f-type); text-transform: uppercase; padding: 0 8px; letter-spacing: .04em; }
.ovroad .small { padding: 0 8px; font-size: .875rem; }
.ovroad.st { box-shadow: inset 0 -5px 0 var(--good); }
.ovroad.st .mast { color: var(--good); }
.ovroad.no { box-shadow: inset 0 -5px 0 var(--stamp); }
.ovroad.no .mast { color: var(--stamp); }
.ov-ladder { display: grid; grid-template-columns: minmax(0, 1fr) 38%; gap: 10px; align-items: end; }
.ov-ladder .rungstamp { grid-column: 1; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1.5px dashed var(--ink2); font: 400 .9375rem/1.05 var(--f-head); text-transform: uppercase; color: var(--ink2); margin-left: calc(var(--i) * 6px); }
.ov-ladder .rungstamp svg { width: 14px; height: 14px; flex: none; }
.ov-ladder .rungstamp.open { border: 2px solid var(--good); color: var(--good); }
.ov-won { grid-column: 2; grid-row: 1 / span 6; }
.ov-won img, .ov-won .miss { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border: 4px solid var(--gold); box-shadow: 2px 4px 10px var(--shadow); }

/* ---------- overlays: headlines, dialogs, the curtain ---------- */
#layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
#layer > * { pointer-events: auto; }
.hl-wrap { position: fixed; left: 50%; transform: translateX(-50%); z-index: 55; pointer-events: none; width: min(calc(var(--col) - 24px), calc(100% - 24px)); bottom: calc(12px + var(--safe-b) + max(var(--fab), var(--note-h, 0px)) + 10px); }
body:not(.in-game) .hl-wrap { bottom: calc(12px + var(--safe-b)); }
.hl { pointer-events: auto; position: relative; background: var(--paper); color: var(--ink); padding: 10px 44px 12px 12px; box-shadow: 0 8px 22px var(--shadow); border-top: 6px solid var(--stamp); animation: hlIn .4s var(--ease-out); display: grid; gap: 4px; }
.hl .h2 { font-size: 1.375rem; }
.hl p { margin: 0; font-size: .9375rem; line-height: 1.35; }
.hl .close { position: absolute; right: 2px; top: 2px; }
.hl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.hl .excl { min-height: 44px; display: inline-flex; align-items: center; }
@keyframes hlIn { from { transform: translateY(40px); opacity: 0; } }
@keyframes hlFade { from { opacity: 0; } }
.hl.out { animation: hlOut .28s ease forwards; }
@keyframes hlOut { to { transform: translateY(40px); opacity: 0; } }

.scrim { position: fixed; inset: 0; background: rgba(8, 5, 3, .62); display: grid; align-items: end; justify-items: center; grid-auto-rows: min-content; align-content: end; z-index: 60; animation: fade .25s ease; overflow-y: auto; overscroll-behavior: contain; }
.scrim.mid { align-content: center; padding: 16px; }
@keyframes fade { from { opacity: 0; } }
.mslot { width: min(440px, 100%); justify-self: center; }
.mslot:empty { display: none; }
.mslot .hl { margin-bottom: 8px; }
.sheet-up { width: min(var(--col), 100%); max-height: calc(100vh - 24px); max-height: calc(100dvh - var(--safe-t) - 24px); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); color: var(--ink); padding: 18px 16px calc(20px + var(--safe-b)); animation: up var(--t-sheet) var(--ease-out); display: grid; gap: 12px; border-top: 6px solid var(--stamp); }
@keyframes up { from { transform: translateY(40%); } }
.excl-banner { display: inline-block; justify-self: start; background: var(--stamp); color: var(--paper); font: 400 1rem/1 var(--f-head); letter-spacing: .14em; padding: 6px 10px 5px; transform: rotate(-2deg); text-transform: uppercase; }
.excl-body { margin: 0; font-size: 1.0625rem; line-height: 1.45; max-width: 34em; }
.also { display: grid; gap: 6px; }
.modal-card { width: min(380px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 24px); overflow-y: auto; overscroll-behavior: contain; }
/* the card scrolls; its actions stay on screen */
/* round 6 (finding 24): the card and its buttons are one solid sheet: no see-through gap, no page showing through */
.modal-card { background: var(--paper); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.modal-card > .flip { margin: 0; }
.modal-actions { position: sticky; bottom: 0; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 0; padding: 10px 10px calc(10px + var(--safe-b)); background: var(--paper); border-top: 3px double var(--ink); }
.modal-actions > :only-child { grid-column: 1 / -1; }
.telegram { background: var(--paper-l); color: var(--ink-l); padding: 18px 16px; font: 1.0625rem/1.45 var(--f-type); box-shadow: 0 10px 30px var(--shadow); border-top: 14px solid var(--ink-l); position: relative; }
.telegram .tt { font: 400 1.625rem/1 var(--f-head); letter-spacing: .2em; color: var(--stamp-l); }
.telegram .small { color: inherit; }
.travel { margin: 0; font: italic .9375rem/1.3 var(--f-body); color: var(--ink2); }
.gossip { display: grid; gap: 0; }
.gitem { display: grid; gap: 4px; text-align: left; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--ink2); background: none; color: var(--ink); width: 100%; }
.gitem:first-child .h3 { font-size: 1.5rem; }
.gitem .h3 { font-size: 1.125rem; }
.gitem .more { font: .9375rem/1.35 var(--f-body); color: var(--ink2); }
.gitem .rel { font: .875rem var(--f-type); color: var(--stamp); text-transform: uppercase; letter-spacing: .06em; }

/* the Menu sheet */
.menu-head { display: flex; align-items: center; justify-content: space-between; }
.tabs.two { grid-template-columns: 1fr 1fr; }
.navtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.navtile { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 92px; padding: 8px 4px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); text-align: center; }
.navtile svg { width: 26px; height: 26px; }
.navtile b { font: 400 1rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .03em; }
.navtile span { font: .875rem/1.15 var(--f-type); color: var(--ink2); letter-spacing: .04em; }
.navtile[aria-current="page"] { background: var(--ink); color: var(--paper); }
.navtile[aria-current="page"] span { color: var(--paper); }
.menulist { display: grid; gap: 0; }
.mrow { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--ink2); background: none; color: var(--ink); text-align: left; }
.mrow svg { width: 26px; height: 26px; }
.mrow > span { display: grid; gap: 2px; min-width: 0; }
.mrow b { font: 400 1.0625rem/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; }
.mrow > span > span { font-size: .9375rem; color: var(--ink2); line-height: 1.3; }
.mrow.quiet { grid-template-columns: 1fr; }
.mrow.quiet b { color: var(--ink2); }
.sw { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--paper2); border: 2px solid var(--ink); }
.sw::after { content: ''; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transition: transform var(--t-fast) ease; }
.toggle[aria-pressed="true"] .sw { background: var(--good); border-color: var(--good); }
.toggle[aria-pressed="true"] .sw::after { transform: translateX(12px); background: var(--paper); }
.me-head { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; }
.me-head > div { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.mstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mstat { display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: 8px 4px; border: 1.5px solid var(--ink); background: var(--paper2); color: var(--ink); }
.mstat b { font: 400 1.5rem/1 var(--f-head); font-variant-numeric: tabular-nums; }
.mstat > span { font: .875rem/1.15 var(--f-type); text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); text-align: center; }
.codex { display: flex; flex-wrap: wrap; gap: 8px; }
.cx { min-height: 44px; padding: 6px 10px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font: .9375rem/1.15 var(--f-body); text-align: left; }
.cx.read { border-style: dashed; color: var(--ink2); }
.endcard { text-align: center; display: grid; gap: 12px; justify-items: center; }
.endcard .rung { text-align: left; width: 100%; }

/* curtain drop and the era wash (transform / opacity only) */
.curtain { position: fixed; inset: 0; z-index: 64; background: var(--ink-l) var(--curtain-img) center top / cover no-repeat; display: grid; place-items: center; animation: drop .8s cubic-bezier(.5, 0, .3, 1.15) both; }
.curtain .h1 { color: var(--paper-l); text-shadow: 0 3px 12px rgba(0,0,0,.8); text-align: center; padding: 0 16px; }
.curtain .type { color: var(--paper-l); text-align: center; margin-top: 10px; }
.curtain.lift { animation: lift .7s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes drop { from { transform: translateY(-100%); } }
@keyframes lift { to { transform: translateY(-100%); } }
.wash { position: fixed; inset: 0; z-index: 58; pointer-events: none; background: var(--desk) var(--tex-bg) center / 360px; animation: wash 1.1s ease forwards; -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100%; mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100%; }
@keyframes wash { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 0; } }

/* "What can I tap?" outlines everything that explains itself, for a few seconds */
body.reveal #app .x, body.reveal #app [data-x], body.reveal #app [data-hold], body.reveal #app .place-hit, body.reveal .purse, body.reveal .menu-btn { outline: 2px dashed var(--stamp-d); outline-offset: 3px; }

/* small motion helpers */
.pop { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop { from { transform: scale(.4) rotate(-14deg); opacity: 0; } }
.stamp.pop { animation-name: popStamp; }
@keyframes popStamp { from { transform: scale(2.2) rotate(-8deg); opacity: 0; } to { transform: rotate(-8deg); } }
.shake { animation: shake .4s ease; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- Vegas: neon on black glass (same shapes, different finish) ---------- */
:root[data-era="vegas"] .sheet {
  background-color: var(--glass);
  background-image: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%), radial-gradient(ellipse at 50% 0%, rgba(255,46,154,.16), transparent 65%);
  background-size: 100% 100%, 100% 100%;
  box-shadow: inset 0 0 0 1px var(--neon-a), inset 0 0 22px rgba(25, 230, 255, .28);
}
:root[data-era="vegas"] .card:not(.curse) { box-shadow: 0 0 0 1px var(--neon-a), 0 0 12px rgba(25, 230, 255, .45); }
:root[data-era="vegas"] .card.sel { box-shadow: 0 0 0 3px var(--neon-b), 0 0 18px rgba(255, 46, 154, .7); }
:root[data-era="vegas"] .rule, :root[data-era="vegas"] .sec-head, :root[data-era="vegas"] .gazette, :root[data-era="vegas"] .fold-sec {
  border-image: linear-gradient(90deg, #6b6f7a, #f4f6fb 30%, #9aa0ad 55%, #ffffff 75%, #6b6f7a) 1;
}
:root[data-era="vegas"] .btn.primary { background: linear-gradient(180deg, #ff5cb0, var(--neon-a) 55%, #c2006e); border-color: var(--neon-a); color: var(--glass); box-shadow: 0 0 0 1px var(--neon-b), 0 0 14px rgba(255, 46, 154, .6); }
:root[data-era="vegas"] :focus-visible { outline-color: var(--neon-b); }
:root[data-era="vegas"] .note { background: linear-gradient(180deg, #2a1440, #0b0620); color: #FFF5FB; box-shadow: inset 0 0 0 1px var(--neon-b), 0 0 16px rgba(255, 46, 154, .55); }
:root[data-era="vegas"] .note b, :root[data-era="vegas"] .note .tap { color: var(--neon-b); }
:root[data-era="vegas"] .hl, :root[data-era="vegas"] .sheet-up { background: var(--glass); color: #FFF5FB; box-shadow: inset 0 0 0 1px var(--neon-a), 0 8px 22px rgba(0,0,0,.6); }
:root[data-era="vegas"] .tray { background: var(--glass); border-top-color: var(--neon-a); box-shadow: 0 -4px 16px rgba(255, 46, 154, .35); }
:root[data-era="vegas"] .gazette .name { color: var(--neon-a); text-shadow: 0 0 6px var(--neon-a), 0 0 18px rgba(25, 230, 255, .6); }
:root[data-era="vegas"] .kicker { color: var(--neon-b); }
:root[data-era="vegas"] .inspect .kicker { color: var(--card-accent); }
:root[data-era="vegas"] .chip.good, :root[data-era="vegas"] .tg.good { color: #19E6A0; }

/* ---------- wide screens, reduced motion, more contrast ---------- */
@media (min-width: 720px) {
  .col { padding-block-start: calc(24px + var(--safe-t)); }
  .desk { background-size: auto, 420px; }
}
@media (max-width: 370px) {
  .tray-acts .btn { font-size: .9375rem; }
  .ov-next { min-width: 120px; }
  .roadstrip .rl b { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .spinpaper, .hl, .curtain, .pop, .sheet-up, .stamp.pop { animation: fade .2s ease both !important; }
  .flip .faces { transition: none; }
  .card.nudge { outline: 3px solid var(--stamp-l); }
}
@media (prefers-contrast: more) {
  .sheet { background-image: none; }
  .halftone::after { display: none; }
  .small, .deck, .sub, .gazette .dateline { color: var(--ink); }
}

/* ---------- second pass after the first playthrough ---------- */
/* a card's name starts under the score badge, so long names never break mid-word */
.card .top { min-height: 20px; }
.card:has(.score) .nm { padding-right: 0; }
.card .nm { font-size: .9375rem; overflow-wrap: normal; hyphens: auto; }
.hero.mid img, .hero.mid .miss { height: 30vh; height: 30dvh; }
/* the result's one button stays on screen inside the scrolling paper */
.spinpaper .extra > .btn.block:last-child, .spinpaper > .sheet > .btn.block:last-child { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -12px 14px var(--paper), 0 4px 0 var(--paper); }
.title-sheet { padding-top: 28px; }
/* the Flip button sits at the card's foot, beside the hint, clear of the whisper and the title */
.flipbtn { top: auto; bottom: 10px; }
:root[data-era="wildwest"] .flipbtn, :root[data-era="vegas"] .flipbtn { top: auto; bottom: calc(10px + var(--card-bw, 0px) / 2); }
.inspect .flip-hint { text-align: left; padding-right: 92px; min-height: 40px; display: flex; align-items: center; }
.inspect .h2, .inspect .kicker { padding-right: 0; }
.flip .face.inspect { display: flex; flex-direction: column; gap: 10px; }
.flip .face.inspect > .flip-hint { margin-top: auto; }
.flip .face.inspect > .art-img, .flip .face.inspect > .mini-frame { align-self: center; }
#menu-panel { display: grid; gap: 12px; }
/* the correspondent's one-line summary is a sentence, so it is set in the reading face */
details.hints summary.by { font: .9375rem/1.35 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--ink); }
details.hints summary.by .link { font-family: var(--f-type); font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; }
/* the smallest labels, brought up to the floor */
.tlb, .menu-btn, .tray-menu, .btn .lastpay { font-size: .875rem; }
.card .allure small, .card .pocket { font-size: .8125rem; }
.card .allure small { letter-spacing: 0; }
/* the WORKED tape on a lifted card never covers the tastes row above the hand */
.hand.play { padding-top: 14px; }
/* (third pass) the Flip button goes back to the card's top right: at the foot it fell under the sticky actions on a
   tall card; the first line of each face leaves room for it */
.flipbtn { top: 8px; bottom: auto; }
:root[data-era="wildwest"] .flipbtn, :root[data-era="vegas"] .flipbtn { top: calc(8px + var(--card-bw, 0px) / 2); bottom: auto; }
.flip .face.inspect > :first-child { margin-right: 84px; }
.inspect .flip-hint { padding-right: 0; justify-content: center; text-align: center; }
/* short phones: the overview's last page keeps both choices in view */
@media (max-height: 760px) {
  .ov-h { font-size: clamp(1.625rem, 7.6vw, 2.25rem); }
  .ov-ladder .rungstamp { padding: 4px 6px; font-size: .875rem; }
  .ov-sheet { gap: 8px; padding-block: 12px 16px; }
}

/* ---------- round 4: the designer's scores (7 Oct) ---------- */
/* F14: reading line-height carries the tap height of dotted words */
.ov-body { line-height: 1.9; }
.excl-body, .hints p, .roadcol p, .rung .small { line-height: 1.7; }
/* F42: the results paper spins inside a clipped column */
#app { overflow-x: clip; }
/* F43: the Wild West and Vegas card frames are slimmer on a phone, so the Allure and the ticks stay on the card */
@media (max-width: 420px) {
  :root[data-era="wildwest"], :root[data-era="vegas"] { --card-bw-sm: 7px; }
  :root[data-era="wildwest"] .card .allure small, :root[data-era="vegas"] .card .allure small { display: none; }
}
.card .mk { white-space: nowrap; }
.card .nm { overflow-wrap: break-word; }
/* F23/F55: a picked card wears PICKED on the left, clear of its score badge; WORKED is for after the play */
.card.sel::before { content: 'PICKED'; left: 8px; transform: rotate(-3deg); }
/* F24: every card and portrait has a visible flip tab: tap it to read the back */
.dogear { position: absolute; right: -4px; bottom: -4px; z-index: 3; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-l); color: var(--paper-l); font: 400 .9375rem/1 var(--f-head); box-shadow: 1px 2px 4px var(--shadow); cursor: pointer; }
.dogear::after { content: ''; position: absolute; inset: -9px; }
.photo .dogear { left: auto; right: -6px; bottom: auto; top: 26px; }
.ovface { position: relative; padding: 0; border: 0; background: none; }
/* F17: one teaching surface at a time: the docked note steps aside while a pop-up is open */
body.modal-open .note.docked { visibility: hidden; }
/* F48: a tip is a headline and two lines at most; the rest is behind its Exclusive link */
.hl .h2 { font-size: 1.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hl p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hl-acts .btn.gz { background: var(--stamp); color: var(--paper); border-color: var(--stamp); }
/* F46: on the play screens Coin and the clock ride in the tray; elsewhere the corner Purse folds to a coin pill on scroll */
.tpurse { margin-left: auto; flex: none; display: grid; gap: 2px; justify-items: end; padding: 2px 0 2px 8px; border: 0; background: none; color: var(--ink); min-height: 44px; align-content: center; }
.tpurse span { display: inline-flex; align-items: center; gap: 4px; font: 400 1rem/1 var(--f-head); font-variant-numeric: tabular-nums; }
.tpurse svg { width: 16px; height: 16px; }
.tpurse span:first-child svg { color: var(--gold); }
.chrome-top .purse { transition: padding var(--t-fast) ease; }
.chrome-top.mini .purse .pface, .chrome-top.mini .purse .pclock { display: none; }
.chrome-top.mini .purse { padding: 0 12px; }
/* F22b: the meter's marks are named */
.mlabs { position: relative; height: 16px; margin-top: -4px; }
.mlabs span { position: absolute; top: 0; transform: translateX(-50%); font: .875rem/1 var(--f-type); letter-spacing: .04em; color: var(--ink2); white-space: nowrap; }
.mlabs span.del { color: var(--good); }
/* F49: on the play screens the head's chips are one short row (his tastes live above the hand) */
.chips.compact { gap: 6px; }
.chips.compact .chip { min-height: 30px; padding: 2px 8px; font-size: .875rem; }
.chips.compact .chip::after { inset: -7px 0; }
/* F2, F19, F15: road costs, the inline Kink offer, the reason a button is greyed */
.roadd { color: var(--bad); font-weight: 700; }
p.roadd { margin: 0; }
.kinkoffer { display: grid; gap: 6px; border: 2px dashed var(--good); padding: 8px 10px; }
.kinkoffer p { margin: 0; font-size: .9375rem; }
.need { color: var(--bad); }
.mcol .need { font-size: .875rem; }
.newidx { margin: 0; font: .875rem/1.3 var(--f-type); color: var(--paper-l); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fold-sec .newstamp { margin-left: auto; margin-right: 8px; }
.rung .near { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .9375rem; color: var(--ink2); }
/* round 7: the paper she is in (her nights decide it; nothing to pick) */
.roadcol.aim { outline: 3px solid currentColor; outline-offset: -3px; }
.roadcol.st.aim { color: var(--good); }
.roadcol.no.aim { color: var(--stamp); }
.roadcol.aim > * { color: var(--ink); }
.roadcol.aim .kicker .x { color: inherit; }
.roadnote { margin: 0; }
.roadstrip.aim-standing { box-shadow: inset 5px 0 0 var(--good); }
.roadstrip.aim-notoriety { box-shadow: inset -5px 0 0 var(--stamp); }
.place .kindtag.onroad { outline: 2px solid var(--gold); outline-offset: 1px; }
.ovroad { position: relative; }
/* F50: the demo's cards keep their tag row reserved (nothing below jumps); one number per card; a gold selection */
.ovc .mkrow { min-height: 20px; display: flex; }
.ovc .mkrow.off { visibility: hidden; }
.ovc .mk.plain { color: var(--card-ink2); background: transparent; border: 1px dashed currentColor; }
.ovc.on { box-shadow: 0 0 0 3px var(--gold), 2px 6px 12px var(--shadow); }
.ovc .score { min-width: 40px; padding: 0 4px; }
/* F40: the winning plate is a silhouette until she earns it */
.ov-won.silhouette { position: relative; }
.ov-won.silhouette img { filter: blur(6px) grayscale(1) brightness(.75); }
.ov-won.silhouette { overflow: hidden; }
.ov-won .cap { display: block; margin-top: 4px; font: .875rem/1.2 var(--f-type); color: var(--ink2); text-align: center; letter-spacing: .04em; }
/* F53: the overview's pages fit a short phone; a page that still scrolls says so with a fade at its foot */
@media (max-height: 780px) {
  .ov-ladder .rungstamp { padding: 3px 6px; font-size: .875rem; margin-left: calc(var(--i) * 4px); }
  .ov-ladder { gap: 6px; }
  .ov-choice { gap: 8px; }
  .ov-choice .btn { min-height: 44px; }
}
.ov-page.scrolls { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
/* F45: pop-ups are easy to leave: a Back button on every card, a sticky sheet header, and a grab handle to swipe down */
.modal-actions.has-back { grid-template-columns: auto 1fr 1fr; }
.modal-actions.has-back:has(> :nth-child(2):last-child) { grid-template-columns: auto 1fr; }
.modal-actions.has-back:has(> :only-child) { grid-template-columns: 1fr; }
.mback { min-width: 76px; padding-inline: 10px; }
.sheet-up .grab { display: block; justify-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--ink2); opacity: .6; margin: -6px auto 2px; }
.sheet-up > .sheet-top { position: sticky; top: -18px; z-index: 3; margin: -18px -16px 0; padding: 12px 16px 8px; background: var(--paper); display: grid; gap: 8px; border-bottom: 1px solid var(--ink2); }
:root[data-era="vegas"] .sheet-up > .sheet-top { background: var(--glass); }
.sheet-up { touch-action: pan-y; }
/* F52: holding a card reads it; on iOS it must not open the image menu, select text or double-tap zoom */
[data-hold], [data-hold] *, .dogear { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
[data-hold] img { -webkit-user-drag: none; pointer-events: none; }
button, [data-act], [data-x] { touch-action: manipulation; }
/* F13: picking up a saved game; F8: the promotion's own page; F16: the arrival card */
.resume { display: grid; gap: 6px; border: 2px solid var(--good); padding: 10px; }
.resume.stale, p.resume.stale { border: 0; padding: 0; }
.resume .kicker { color: var(--good); }
.promo .clip p { margin: 0; }
.arrive { text-align: center; }
.arrive .h1 { font-size: clamp(1.75rem, 9vw, 2.5rem); }
.card .marks { padding-right: 18px; }
/* the PICKED tape sits at the card's foot on the left: clear of the Allure pill (top left), the score badge (top right)
   and the flip tab (bottom right) */
.card.sel::before, :root[data-era="wildwest"] .card.sel::before, :root[data-era="vegas"] .card.sel::before { top: auto; bottom: -9px; left: -4px; transform: rotate(-3deg); padding: 3px 6px; letter-spacing: .06em; }
/* round 5 (finding 12): an iPhone SE-class screen (667px) fits every Morning Edition page without scrolling */
@media (max-height: 700px) {
  .ov { gap: 6px; }
  .ov-top { min-height: 44px; }
  .ov-sheet { gap: 7px; padding: 10px 12px 12px; }
  .ov-mast .name { font-size: 1.125rem; }
  .ov-h { font-size: clamp(1.5rem, 7.4vw, 2rem); }
  .ov-body { font-size: 1rem; line-height: 1.33; }
  .ov-cap { font-size: .875rem; padding-top: 4px; }
  .ovc { min-height: 0; padding: 5px; gap: 3px; }
  .ovc img { aspect-ratio: 16 / 9; }
  .ov-gent img { width: 52px; }
  .trio { aspect-ratio: 16 / 10; }
  .ov-split img { max-height: 76px; object-fit: cover; }
}
@media (max-height: 760px) { .ovc { min-height: 0; } .ovc img { aspect-ratio: 16 / 10; } }

/* ======================= Round 5 (the designer's 7 Oct scores, reviewer findings) ======================= */
/* finding 22: a pop-up taller than the screen starts at its top (it never spills off both ends), and a card leaves room
   for any headline printed above it, so its sticky buttons stay on screen */
.scrim.mid { align-content: safe center; }
.scrim .modal-card { max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 32px - var(--mslot-h, 0px)); }
/* findings 14 and 22: the gentleman's card prints its tips inside itself, above its buttons */
.cslot:empty { display: none; }
.cslot { background: var(--paper); padding: 0 10px; }
.cslot .hl { margin: 10px 0 0; box-shadow: none; border: 1px solid var(--ink2); border-top: 5px solid var(--stamp); animation-name: hlFade; }
.cslot .hl .h2 { font-size: 1.125rem; }
/* finding 24: the tray keeps one height whatever she taps: the line under the verdict is one line, clipped */
/* round 6 (finding 20): "why?" sits beside the clipped line, never inside it, so it can always be tapped */
.subrow { display: flex; align-items: center; min-width: 0; }
.subrow .why { flex: none; }
.tray .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; min-width: 0; flex: 0 1 auto; }
@media (max-width: 374px) { .tray .sub .npick { display: none; } }
.tray .vwrap { min-height: 2.6em; align-content: center; }
.tray .why { margin-block: -14px; }
/* finding 23: the tray's type is capped so it stays two rows at any text size; at a large size the hand becomes a
   swipeable row of about 2.4 cards and the gentleman's head stacks */
.tray { font-size: min(1rem, 18px); }
.tray .meter .big { font-size: min(1.75rem, 30px); }
.tray .verdict { font-size: min(1.125rem, 20px); }
.tray .sub, .tray .why, .tray .meter .big small, .tray .tpurse { font-size: min(.9375rem, 16px); }
.tray-acts .btn { font-size: min(1.0625rem, 19px); }
.tray-menu { width: auto; min-width: var(--chip-h); font-size: min(.875rem, 15px); }
.tray-acts { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.35fr); }
body.bigtext .hand.play { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 40%); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 10px; }
body.bigtext .hand.play .card { scroll-snap-align: start; }
body.bigtext .gent-head { grid-template-columns: 1fr; }
body.bigtext .gent-head .punter { max-width: 7rem; }
.chips, body.bigtext .chips.compact { flex-wrap: wrap; }
.gent-head .meta, .gent-head .voice { min-width: 0; overflow-wrap: anywhere; }
/* finding 25: the docked Next note is two lines at most, and folds to a slim tab while she scrolls down */
.note.docked { max-height: 64px; padding-block: 8px; }
.note.docked > span:not(.tap) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note.docked { transition: transform var(--t-fast) ease, width var(--t-fast) ease; }
.note.docked.tab { width: auto; min-height: 44px; max-height: 44px; padding: 6px 12px; grid-template-columns: auto auto; }
.note.docked.tab > span:not(.tap) { display: none; }
/* finding 11: the section index under the Next note */
.secchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.secchips .chip { min-height: 36px; }
#places, #meanwhile, #doors { scroll-margin-top: calc(var(--chip-h) + 24px); }
/* findings 3, 4: the two-page spread (round 7: read-only; a stamp marks the paper she is in) */
.forkpages { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.forkpage { display: grid; gap: 6px; align-content: start; padding: 8px; border: 2px solid var(--ink); background: var(--paper); }
.forkpage .mast { font: 400 1.125rem/1 var(--f-head); text-transform: uppercase; }
.forkpage.st .mast { color: var(--good); } .forkpage.no .mast { color: var(--stamp); }
.forkpage .road { font: .875rem/1.2 var(--f-type); text-transform: uppercase; letter-spacing: .04em; }
.forkpage .fpic img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); }
.forkpage .small { margin: 0; }
.forkpage .steps { margin: 0; padding-left: 1em; font-size: .875rem; display: grid; gap: 2px; }
.forkpage .pickme { justify-self: start; font: 400 .875rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border: 1.5px solid currentColor; }
.forkpage.st .pickme { color: var(--good); } .forkpage.no .pickme { color: var(--stamp); }
/* finding 17: the gag's set-up is the picture's caption; its name a label; then only the punchline */
.postcard .pc-cap { margin: 4px 0 2px; font: italic .875rem/1.3 var(--f-body); color: var(--ink2); }
.postcard .pc-title { display: block; margin-top: 4px; }
/* finding 1: the Ladder and the Morning Special */
.special { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 8px; border: 2px dashed var(--ink2); margin-bottom: 8px; }
.special img { width: 64px; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--ink); }
.special .row { margin-top: 4px; }
.digs { display: grid; gap: 6px; }
.digs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.digs li { display: flex; justify-content: space-between; gap: 8px; font-size: .9375rem; }
.digs li.have b::before { content: '✓ '; color: var(--good); }
.digs li.next { border-top: 1px dashed var(--ink2); padding-top: 4px; }
.digsbadge { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%) rotate(-3deg); background: var(--gold, #C9A24A); color: #1E140F; font: 400 .75rem/1 var(--f-head); text-transform: uppercase; padding: 3px 6px; white-space: nowrap; box-shadow: 1px 2px 4px rgba(0,0,0,.4); }
.hero { position: relative; }
.hero .digsbadge { bottom: 10px; font-size: .875rem; }
.pface { position: relative; }
.digs-1 img, .digs-2 img { outline: 2px solid var(--gold, #C9A24A); outline-offset: -2px; }
.digs-3 img, .digs-4 img { outline: 4px double var(--gold, #C9A24A); outline-offset: -4px; }
.hero .wincap { display: block; text-align: center; font: italic .9375rem/1.3 var(--f-body); color: var(--ink2); margin-top: 4px; }
.traychip { justify-self: start; min-height: 36px; }
.cslot { scroll-margin-bottom: 100px; }
.play-sheet .hlslot .hl { margin-block: 6px 4px; }
.forkpage .steps li b { display: inline; margin-right: 4px; }

/* ======================= Tablet and desktop (the wide-screen pass, 7 Oct) ======================= */
/* The phone column is the design, and under 760px nothing below applies. A tablet (760px+) gets a wider column, the hand
   in one row, a two-column front page, a two-page results spread and bigger art. A desktop (1100px+) gets the card table
   in two panes, a three-column front page, the Morning Edition as a spread, the eras side by side, and side drawers for
   what a phone shows as bottom sheets. Reading lines stay under about 75 characters: text sits in columns, never across
   the full width. Hover states and the keyboard keys show only where there is a mouse; everything stays reachable by
   touch (an iPad is both). The Purse, the Menu button, the docked note and the headlines follow --col, so they move
   with the paper. */
@media (min-width: 760px) {
  :root { --col: 760px; }
  body[data-screen="pick"], body[data-screen="arrival"] { --col: 720px; }
  /* floating pieces keep a readable width: a headline, the docked Next note beside the Menu button, the bottom sheets */
  .hl-wrap { width: min(520px, calc(100% - 24px)); }
  .note.docked { left: auto; right: calc(max(12px, 50% - var(--col) / 2 + 12px) + var(--fab) + 10px); width: min(460px, calc(100% - 24px - var(--fab) - 10px)); }
  .sheet-up { width: min(600px, 100%); }
  .modal-card { width: min(420px, 100%); }
  .scrim > .spinpaper { width: min(460px, 100%); }
  /* the "more things unlock" lock is a line icon, not a poster */
  .later-line svg { width: 16px; height: 16px; vertical-align: -2px; }
  .bubble, .cork > .row { max-width: 38em; margin-inline: auto; }
  .ov-body, .ov-sub, .ov-cap { max-width: 36em; }

  /* the title page: the sign-up and "Inside today" side by side, the ransom title bigger */
  body[data-screen="title"] #app { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  body[data-screen="title"] #app > * { min-width: 0; }
  body[data-screen="title"] #app > .sheet + .sheet { margin-top: 64px; }
  .title-ransom { font-size: clamp(2.875rem, 4.4vw, 3.5rem); }

  /* the front page as a broadsheet: masthead across, Tonight's Curtain and the gentlemen in two columns, the rest below */
  .gazette .name { font-size: clamp(1.875rem, 3.6vw, 2.75rem); }
  .masthead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: center; }
  .masthead > * { min-width: 0; }
  .masthead > .gazette, .masthead > .awaystrip, .masthead > .secchips { grid-column: 1 / -1; }
  .masthead > .roadstrip:last-child, .masthead > .roadstrip:has(+ .secchips) { grid-column: 1 / -1; justify-self: center; width: min(100%, 640px); }
  body[data-screen="front"] #app { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  body[data-screen="front"] #app > * { min-width: 0; }
  body[data-screen="front"] #app > .masthead, body[data-screen="front"] #app > .hlslot, body[data-screen="front"] #app > .fp-more { grid-column: 1 / -1; }
  body[data-screen="front"] #app > .hlslot { justify-self: center; width: min(100%, 560px); }
  body[data-screen="front"] .fp-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .fp-more > * { min-width: 0; }
  .fp-more > .newidx, .fp-more > .whatsnext { grid-column: 1 / -1; }
  .fp-more > .whatsnext { columns: 2; column-gap: 28px; column-rule: 1px solid var(--ink2); }
  .whatsnext > .later, .whatsnext > .rung { break-inside: avoid; }
  .market { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* the card table: the whole hand in one row (three lent cards sit centred), a bigger host, tips at reading width */
  .hand.play { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; margin-inline: auto; max-width: 492px; }
  .hand.play:has(> :nth-child(4)) { max-width: 660px; }
  .hand.play:has(> :nth-child(5)) { max-width: 828px; }
  .hand.play:has(> :nth-child(6)) { max-width: none; }
  body.bigtext .hand.play { max-width: none; }
  .gent-head { grid-template-columns: 8rem 1fr; gap: 16px; }
  .play-sheet .hints, .play-sheet .kinkoffer, .play-sheet .dyn { max-width: 36rem; }

  /* the results: a two-page spread, her picture on the left page (it stays while the right page is read) */
  body[data-screen="results"] #app { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; gap: 16px 20px; align-items: start; }
  body[data-screen="results"] #app > * { min-width: 0; grid-column: 2; }
  body[data-screen="results"] #app > .spinpaper { grid-column: 1; grid-row: 1 / -1; position: sticky; top: calc(var(--chip-h) + 18px + var(--safe-t)); }
  body[data-screen="results"] #app .hero img, body[data-screen="results"] #app .hero .miss { height: min(48dvh, 520px); max-height: none; }
}

/* the Morning Edition as a spread wherever the screen is wider than tall enough to need it: the picture on the left
   page, the story on the right, so a landscape tablet or a laptop never scrolls a page */
@media (min-width: 1000px) {
  body[data-screen="overview"] { --col: 1120px; }
  .ov-page { display: grid; align-content: safe center; }
  .ov-sheet { min-height: 0; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto 1fr; grid-template-areas: "mast mast" "pic h" "pic sub" "pic body" "pic cap" "pic ."; column-gap: 28px; padding: 20px 24px 26px; }
  .ov-mast { grid-area: mast; } .ov-h { grid-area: h; } .ov-sub { grid-area: sub; } .ov-pic { grid-area: pic; align-self: start; } .ov-body { grid-area: body; } .ov-cap { grid-area: cap; }
  .ov-h { font-size: clamp(2.25rem, 3.3vw, 3.25rem); }
  .ov-foot { grid-template-columns: 1fr auto auto auto; grid-template-areas: "dots end prev next"; }
  .ov-end { grid-template-columns: auto auto; }
  .ov-end .btn { padding-inline: 18px; }
}

@media (min-width: 1100px) {
  :root { --col: 1240px; }
  .col { padding-inline: 24px; }
  body[data-screen="title"] { --col: 1040px; }
  body[data-screen="pick"], body[data-screen="assign"] { --col: 900px; }
  body[data-screen="players"] { --col: 1100px; }
  body[data-screen="end"], body[data-screen="arrival"] { --col: 760px; }
  /* headlines arrive at the column's right edge, above the Menu button, like a desktop notification */
  .hl-wrap { left: auto; transform: none; right: max(12px, calc(50% - var(--col) / 2 + 12px)); width: min(440px, calc(100% - 24px)); }
  .modal-card { width: min(440px, 100%); }
  .scrim > .spinpaper { width: min(480px, 100%); }
  /* a desktop opens the phone's bottom sheets (the Menu, her stats, the explainers) as a drawer from the right edge;
     a headline printed while one is open sits to its left */
  .scrim:not(.mid) { grid-template-columns: minmax(0, 1fr) min(500px, 100%); grid-template-rows: minmax(0, 1fr); grid-auto-rows: auto; align-content: stretch; justify-items: stretch; overflow: hidden; }
  .scrim:not(.mid) > .mslot { grid-column: 1; grid-row: 1; align-self: end; justify-self: center; margin-bottom: 16px; }
  .scrim:not(.mid) > .sheet-up { grid-column: 2; grid-row: 1; width: 100%; height: 100dvh; max-height: 100dvh; align-content: start; border-top: 0; border-left: 6px solid var(--stamp); padding-top: calc(18px + var(--safe-t)); animation-name: drawer; }
  :root[data-era="vegas"] .scrim:not(.mid) > .sheet-up { border-left-color: var(--neon-a); }
  .sheet-up .grab { display: none; }

  .title-ransom { font-size: clamp(3rem, 4vw, 3.75rem); }
  .suspects { gap: 22px; }

  /* the front page in three columns: Tonight's Curtain, the gentlemen, and the rest of the paper */
  .gazette .name { font-size: clamp(2.25rem, 3vw, 3rem); }
  body[data-screen="front"] #app { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  body[data-screen="front"] #app > .fp-more { grid-column: auto; display: flex; flex-direction: column; gap: 18px; }
  .fp-more > .whatsnext { columns: auto; column-rule: none; }

  /* the card table in two panes: the evening's Place on the left (it stays put), the host, the hand and the tray right */
  body[data-screen="plan"] #app { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(0, 8fr); gap: 16px 20px; align-items: start; }
  body[data-screen="plan"] #app > * { min-width: 0; }
  body[data-screen="plan"] #app > .sheet:first-child { position: sticky; top: calc(12px + var(--safe-t)); }
  body[data-screen="plan"] .place.banner .pimg { aspect-ratio: 4 / 3; }

  /* the eras side by side; the boards beside the Automatons */
  .tl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .score-plate .ladder, .score-plate > .row { max-width: 760px; }
  body[data-screen="players"] #app { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
  body[data-screen="players"] #app > * { min-width: 0; }
  /* the house boards on the left; the street's real players and the Automatons stacked on the right */
  body[data-screen="players"] #app > .sheet:first-child { grid-row: span 2; }

  body[data-screen="results"] #app { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; }
  body[data-screen="results"] #app .hero img, body[data-screen="results"] #app .hero .miss { height: min(56dvh, 560px); }
}
@keyframes drawer { from { transform: translateX(45%); } }
@media (min-width: 1600px) {
  :root { --col: 1360px; }
  body[data-screen="plan"] #app { grid-template-columns: minmax(360px, 5fr) minmax(0, 8fr); }
}

/* a mouse: what can be clicked answers the pointer (never the only way to find it: every target is visible as is) */
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover { transform: translate(-1px, -1px); filter: brightness(1.07) saturate(1.05); }
  .btn:not(:disabled):active { transform: translate(2px, 2px); filter: none; }
  .btn.ghost:not(:disabled):hover, .tray-menu:hover { background-image: linear-gradient(var(--hov), var(--hov)); }
  :root { --hov: color-mix(in srgb, var(--accent) 11%, transparent); }
  .hand .card:not(.sel):not(.curse):not(.nudge):hover, .market .card:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--card-accent), 2px 8px 14px var(--shadow); }
  .place { transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease; }
  .place:not(.shut):has(> .place-hit:hover) { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
  .place > .host:hover { box-shadow: 0 0 0 3px var(--stamp), 1px 2px 6px var(--shadow); }
  .punter:hover .photo, .suspect:hover .photo, .rival:hover .photo { box-shadow: 0 0 0 3px var(--stamp), 2px 6px 14px var(--shadow); }
  .ovface:hover img, .rface:hover img { outline: 3px solid var(--stamp); outline-offset: -3px; }
  .navtile:hover, .mrow:hover, .door:hover, .gitem:hover, .prow:hover, .fold-sec:hover, .cx:hover, .peek:hover, .item:hover, .roadstrip:hover, .clipcut:hover, .entry:has(.ustamp:hover), .awaystrip:hover, .note:hover, .tabs button:hover { background-image: linear-gradient(var(--hov), var(--hov)); }
  .tl:not(.locked) { transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease; }
  .tl:not(.locked):hover { transform: translateY(-2px); box-shadow: 3px 9px 18px var(--shadow); }
  button.chip:not(.solid):hover { background-color: color-mix(in srgb, currentColor 12%, transparent); }
  .x:hover { border-bottom-style: solid; }
  .link:hover { text-decoration-thickness: 2px; }
  .dogear:hover { background: var(--stamp-l); }
  .ov-track { cursor: grab; }
}
/* a keyboard at the card table: the keys are printed on the cards and on Best Guess (1-9 and B, see scandal.js) */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .hand.play { counter-reset: lwkey; }
  .hand.play .card[data-act="pick"] { counter-increment: lwkey; }
  .hand.play .card[data-act="pick"]::after, .tray .btn.bg::after { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; font: .8125rem/1 var(--f-type); letter-spacing: 0; background: var(--paper-l); color: var(--ink-l); border: 1.5px solid var(--ink-l); border-bottom-width: 3px; border-radius: 4px; pointer-events: none; }
  .hand.play .card[data-act="pick"]::after { content: counter(lwkey); content: counter(lwkey) / ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 2; }
  .tray .btn.bg::after { content: 'B'; }
}

/* The lock icon on the "more things unlock" line: size it on every screen (it rendered ~200px tall on phones). */
.later-line svg { width: 16px; height: 16px; vertical-align: -2px; }

/* Putting a pop-up down (scandal.js). While one is open the page under it is pinned where it was (iOS Safari scrolls the
   page through a fixed layer otherwise), and a desktop that showed a scrollbar keeps it so nothing shifts sideways. */
html.pinned { overscroll-behavior: none; }
html.pinned body { position: fixed; left: 0; right: 0; }
html.pin-bar { overflow-y: scroll; }
.scrim > .spinpaper { overscroll-behavior: contain; }
/* the panel follows the finger; let go short and it springs back, past the line and it slides away (no spring when
   motion is reduced: the global rule above makes these transitions instant) */
#modal .scrim { transition: background-color .3s ease; }
#modal .scrim:has(> .dragging) { transition: none; }
#modal .held { animation: none !important; transition: transform .45s cubic-bezier(.22, 1.12, .36, 1); }
#modal .held.dragging { transition: none; -webkit-user-select: none; user-select: none; }
#modal .held.going { transition: transform .25s cubic-bezier(.3, .5, .5, 1); }
/* While he still has a secret, "+?" beside "why?" says the number can only go up: a 44 px target styled like "why?". The
   z-index lifts both above the tray's button row, which otherwise covers their bottom 3 px. */
.unk { font: inherit; background: none; border: 0; color: var(--accent); text-decoration: underline dotted; padding: 0 4px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; margin-block: -12px; cursor: pointer; white-space: nowrap; flex: none; }
.tray .unk { margin-block: -14px; font-size: min(.9375rem, 16px); }
.tray .unk, .tray .why { position: relative; z-index: 1; }
/* on a phone the "+?" takes the room the pick count had: the count goes (as it already does below 375 px), so the Bar and
   the Assignation's Delight stay whole */
@media (max-width: 480px) { .tray .subrow:has(.unk) .sub .npick { display: none; } }
/* a hidden bonus that fired, at the top of the results */
.clip.surprise { border-left-color: var(--good); }
/* BRIEF2 items 5 and 6: where to get his Kink, and the market named before it opens */
.chip.where { border-style: dashed; min-height: 44px; }
.spot { outline: 3px solid var(--stamp-d); outline-offset: 3px; }
.wrows { display: grid; gap: 6px; }
.wrow { display: block; width: 100%; min-height: 44px; padding: 8px 10px; border: 1.5px dashed currentColor; background: transparent; color: inherit; font: .9375rem/1.3 var(--f-body); text-align: left; cursor: pointer; }
.wrow.done { margin: 0; border-style: solid; opacity: .85; cursor: default; }
.hints .where-go { margin-top: 4px; }
.mkt-tease { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 10px; padding: 8px 10px; border: 1.5px dashed var(--ink2); }
.mkt-tease p { margin: 0; flex: 1 1 14rem; font-size: .9375rem; }
.mkt-tease .h3 { margin-right: 4px; }
.mkt-tease svg { width: 16px; height: 16px; vertical-align: -2px; }
.secchips .chip::after { inset: -4px 0; }

/* ---------- Her things: the Things button and the hub sheet ---------- */
/* the bottom-right corner piece is now two buttons side by side: Things, then Menu (Menu keeps its corner) */
.chrome-foot { gap: 10px; }
.things-btn .nbadge { position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--gold); color: #1E140F; font: 400 .9375rem/24px var(--f-head); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--ink-l); }
/* one height for every tab (the same as the tallest a sheet can be), so the sheet never jumps when she switches; coming back from a card, it does not slide in again */
.hub-sheet { height: calc(100dvh - var(--safe-t) - 24px); align-content: start; }
.hub-sheet.still, .scrim:has(> .still) { animation: none; }
.hubright { display: flex; align-items: center; gap: 12px; }
.hubcoin { display: inline-flex; align-items: center; gap: 4px; font: 400 1.125rem/1 var(--f-head); font-variant-numeric: tabular-nums; }
.hubcoin svg { width: 18px; height: 18px; color: var(--gold); }
/* isolation: the cards' ? badges (z-index 3, as on the front page) stay inside the panel and never paint over the sticky tab bar (z-index 3 above it) */
#hub-panel { display: grid; gap: 12px; align-content: start; isolation: isolate; }
#hub-panel:focus { outline: none; }
.tabs.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 359px) { .tabs.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.bigtext .tabs.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hubtab { position: relative; display: grid; gap: 2px; align-content: center; justify-items: center; min-height: 56px; padding: 6px 2px; }
.hubtab small { font: .875rem/1 var(--f-type); text-transform: none; letter-spacing: 0; }
.hubtab .ndot { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--paper); }
.hubnote { margin: 0; }
.locked-note svg { width: 16px; height: 16px; vertical-align: -2px; }
.piles { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font: .9375rem/1.3 var(--f-type); }
.piles b { font: 400 1.125rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; }
.hubhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 10px; margin-top: 6px; padding-bottom: 4px; border-bottom: 3px double var(--ink); }
.hubhead .h3 { white-space: nowrap; }
/* a card in the deck: how many copies, in hand, a Kink she has learned, and the NEW tag */
.card .ct { margin-left: auto; font: 400 1rem/1 var(--f-head); border: 1.5px solid currentColor; border-radius: 12px; padding: 3px 7px; }
.card .flagtag, .item .flagtag, .aslot .flagtag, .curserow .flagtag { position: absolute; left: -6px; top: -9px; z-index: 2; transform: rotate(-4deg); background: var(--gold); color: #1E140F; font: .8125rem/1 var(--f-type); text-transform: uppercase; letter-spacing: .08em; padding: 4px 6px 3px; box-shadow: 1px 2px 4px var(--shadow); }
.card .mk.inhand { background: var(--card-ink); color: var(--card-bg); }
.card .mk.kink { background: var(--card-accent); color: #fff; }
.curses { display: grid; gap: 8px; }
.curserow { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; min-height: 64px; padding: 6px 10px 6px 6px; border: 2px solid var(--bad); background: var(--paper2); color: var(--ink); text-align: left; }
.curserow img { width: 56px; height: 56px; object-fit: cover; }
.curserow b { display: block; font: 400 1rem/1.1 var(--f-head); text-transform: uppercase; }
.curserow .cure { color: var(--bad); text-align: right; }
.item.empty { border-style: dashed; background: none; align-content: center; justify-items: center; text-align: center; min-height: 140px; color: var(--ink2); }
/* a novelty is a tag she carries, not a card: a rounded top and a punched hole (a card is a portrait with gilt corners). Shared with the front page's reticule */
.item { border-radius: 18px 18px 3px 3px; padding-top: 22px; }
.item::before { content: ''; position: absolute; top: 7px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); }
.item.empty { padding-top: 6px; }
.item.empty::before { border-style: dashed; border-color: var(--ink2); }
/* a card whose painting is still borrowed from another picture (assets.js STANDINS: Strict Governess shows the cane, Pick His Pocket the helmet) is toned,
   so it never reads as the novelty it shows. It goes by itself when the painting lands (the class keys off STANDINS) */
.card .thumb.borrowed { filter: sepia(.65) saturate(.8); }
/* the way to better cards: the first row under the pile counts */
.door.tip { border-left: 6px solid var(--stamp); }
.door .go { display: grid; justify-items: end; gap: 6px; }
.item.empty .plus { font: 400 2rem/1 var(--f-head); }
/* the album: three to a row, the way a sticker album is laid out; an empty slot is a ghost, and says only what kind it is */
.album { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aslot { position: relative; display: grid; gap: 4px; align-content: start; min-height: 112px; padding: 5px; border: 1.5px solid var(--ink); background: var(--paper2); color: var(--ink); text-align: left; }
.aslot img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.aslot b { font: 400 .875rem/1.05 var(--f-head); text-transform: uppercase; overflow-wrap: anywhere; }
.aslot.locked { border-style: dashed; background: none; color: var(--ink2); align-content: center; justify-items: center; text-align: center; }
.aslot.locked .no { font: 400 1.75rem/1 var(--f-head); opacity: .55; }
.aslot.plaque { align-content: center; border: 4px double var(--paper); background: var(--ink); color: var(--paper); }
.aslot.plaque .small { color: var(--paper); opacity: .85; }
@media (hover: hover) and (pointer: fine) { .aslot.have:hover, .curserow:hover { box-shadow: 2px 3px 8px var(--shadow); } }
/* a press answers at once (not for reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .things-btn, .hubtab, .aslot.have, .curserow, .item.empty { transition: transform var(--t-fast) var(--ease-out); }
  .things-btn:active, .hubtab:active, .aslot.have:active, .curserow:active, .item.empty:active { transform: scale(.97); }
}