/* Letter Line's look (Doug picked it on 1 Oct, mockup ll-a in /mockups/looks.html): a newspaper puzzle.
   Cream newsprint with faint ruled lines, black ink, a serif masthead (Fraunces), wooden letter tiles with a point
   number in the corner, black buttons with cream capitals, and Inter for reading.
   Everything here is scoped to body[data-mode="letters"] and only re-dresses app.css: same layout and motion,
   new colors, type and a few touches. Comeback's look is looks/comeback.css. */
@font-face { font-family: Fraunces; src: url(/fonts/Fraunces.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/Inter.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }

html:has(> body[data-mode="letters"]) { background: #f4efe2; }
body[data-mode="letters"] {
  --bg: #f4efe2;
  --bg2: #ebe4d1;
  --panel: #fffcf3;
  --panel2: #fffcf3;
  --line: #161616;
  --ink: #161616;
  --text: #161616;
  --soft: #4d4639;
  --accent: #161616;
  --pink: #b3261e;
  --teal: #d9b06a;
  --violet: #8a6326;
  --good: #1f6b2a;
  --radius: 2px;
  --paper: #fffcf3;
  --wood: linear-gradient(#f3d9a4, #d9b06a);
  --wood-edge: #8a6326;
  --wood-ink: #2b1d0a;
  --serif: Fraunces, Georgia, 'Times New Roman', serif;
  color-scheme: light;
  font: 500 18px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f4efe2 linear-gradient(#0000000a 1px, transparent 1px) 0 0 / 100% 28px;
  background-attachment: fixed;
}

/* ---------- type: Fraunces for headlines and lines, Inter for the rest ---------- */
body[data-mode="letters"] :is(h1, h2, .title, .logo-word, .mast-name, .big-pts, .mode-badge b, .tv-big, .rank, .sc, .block, .ring b) {
  font-family: var(--serif); font-weight: 900; letter-spacing: -.01em; text-transform: none; text-shadow: none; color: var(--ink);
}
body[data-mode="letters"] .prompt, body[data-mode="letters"] .topic-row .topic { font-family: var(--serif); font-weight: 600; font-style: italic; letter-spacing: 0; text-shadow: none; color: var(--ink); }
body[data-mode="letters"] a { color: var(--ink); }
body[data-mode="letters"] .muted { color: var(--soft); }

/* ---------- buttons, boxes, cards ---------- */
body[data-mode="letters"] button {
  border: 0; border-radius: 0; background: #161616; color: #f4efe2; box-shadow: none;
  font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .1em; text-transform: uppercase;
}
body[data-mode="letters"] button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
body[data-mode="letters"] button.pink, body[data-mode="letters"] button.teal { background: #161616; color: #f4efe2; text-shadow: none; }
body[data-mode="letters"] button.quiet { background: transparent; color: var(--ink); border: 2px solid #161616; font-size: 15px; }
body[data-mode="letters"] button.small { font-size: 14px; }
body[data-mode="letters"] button:focus-visible, body[data-mode="letters"] input:focus-visible, body[data-mode="letters"] textarea:focus-visible { outline-color: #b3261e; }
body[data-mode="letters"] input, body[data-mode="letters"] textarea { background: var(--paper); color: var(--ink); border: 2px solid #161616; border-radius: 0; box-shadow: inset 0 2px 0 #0000000f; }
body[data-mode="letters"] textarea { font-family: var(--serif); font-weight: 600; font-size: 22px; }
body[data-mode="letters"] input::placeholder, body[data-mode="letters"] textarea::placeholder { color: #6b6455; }
body[data-mode="letters"] .card { background: var(--paper); border: 2px solid #161616; border-radius: 0; box-shadow: 4px 4px 0 #161616; }
/* Labels read like a newspaper's kicker: small capitals between two rules. */
body[data-mode="letters"] .tag { background: transparent; color: var(--ink); border: 0; border-top: 2px solid #161616; border-bottom: 2px solid #161616; border-radius: 0; box-shadow: none; padding: 3px 2px; font-size: 13px; letter-spacing: .2em; }
body[data-mode="letters"] .tag.pink { color: var(--pink); border-color: var(--pink); }
body[data-mode="letters"] .err { color: var(--pink); }

/* timers */
body[data-mode="letters"] .timer, body[data-mode="letters"] .fuse { background: #16161617; }
body[data-mode="letters"] .timer > i, body[data-mode="letters"] .fuse > i { background: #161616; }
body[data-mode="letters"] .fuse .spark { background: radial-gradient(circle, #fff 0 25%, #d9b06a 45%, #d9b06a00 70%); }
body[data-mode="letters"] .ptimer #secs { background: #161616; color: #f4efe2; border: 0; border-radius: 0; }
body[data-mode="letters"] .ptimer.urgent .fuse > i { background: var(--pink); }
body[data-mode="letters"] .ptimer.urgent #secs { background: var(--pink); color: #fffcf3; }
body[data-mode="letters"] .ring .ring-track { stroke: #16161622; fill: var(--paper); }
body[data-mode="letters"] .ring .ring-fill { stroke: #161616; stroke-linecap: butt; }
body[data-mode="letters"] .ring.urgent .ring-fill { stroke: var(--pink); }

/* the masthead: the paper's name over a double rule */
body[data-mode="letters"] .masthead { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; min-width: 0; border-bottom: 4px double #161616; padding-bottom: 4px; }
body[data-mode="letters"] .mast-name { font-size: 28px; }
body[data-mode="letters"] .mast-sub { margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mode="letters"] .logo-word { color: var(--ink); }

/* Done checks: dark green with cream ticks (ink on green would be too dark to read). */
body[data-mode="letters"] .person .said { color: #fffcf3; border-color: #161616; }
body[data-mode="letters"] .person.done .avatar { filter: none; }
body[data-mode="letters"] .person.just .badge::after { border-color: #161616; }
body[data-mode="letters"] .person .nm { color: var(--ink); }

/* ---------- the wooden letter tiles (screen, phone chips, the lobby's code) ---------- */
body[data-mode="letters"] .tile, body[data-mode="letters"] .tile:nth-child(n) {
  --tilt: 0deg;
  border: 0; border-radius: calc(var(--ts) * .11);
  background: var(--wood); color: var(--wood-ink);
  box-shadow: 0 max(4px, calc(var(--ts) * .07)) 0 var(--wood-edge), inset 0 1px 0 #fff8, 0 calc(var(--ts) * .14) calc(var(--ts) * .22) #0000002e;
  font-family: var(--serif); font-weight: 900; font-size: calc(var(--ts) * .62);
}
body[data-mode="letters"] .tile b { top: calc(var(--ts) * -.03); }
body[data-mode="letters"] .tile small { top: auto; right: calc(var(--ts) * .09); bottom: calc(var(--ts) * .05); font-size: max(10px, calc(var(--ts) * .19)); color: var(--wood-ink); }
body[data-mode="letters"] .tiles { gap: calc(var(--ts) * .18); padding-bottom: calc(var(--ts) * .12); }
body[data-mode="letters"] .tiles.big .tile::after { background: radial-gradient(circle, #d9b06a99, transparent 60%); }
/* Phone chips: pale until their word matches, then the full wood with a green tick; a red ring when it starts wrong. */
body[data-mode="letters"] .tiles.chips .tile { filter: grayscale(.85); opacity: .5; transition: filter .2s, opacity .2s; }
body[data-mode="letters"] .tiles.chips .tile.lit, body[data-mode="letters"] .tiles.chips.done .tile { filter: none; opacity: 1; }
body[data-mode="letters"] .tiles.chips .tile.lit::before, body[data-mode="letters"] .tiles.chips.done .tile::before { color: #fffcf3; border-color: #161616; }
body[data-mode="letters"] .tiles.chips .tile.miss { filter: none; opacity: 1; box-shadow: 0 4px 0 var(--wood-edge), 0 0 0 3px var(--pink); }
body[data-mode="letters"] .phone .letter-hint.good { color: var(--good); }

/* ---------- phone ---------- */
body[data-mode="letters"] .phone .back-row .masthead { flex: 1; }
body[data-mode="letters"] .phone h1 { font-size: 30px; line-height: 1.1; }
body[data-mode="letters"] .phone .prompt { text-align: center; font-size: 26px; line-height: 1.2; background: none; border: 0; box-shadow: none; padding: 6px 4px 2px; }
body[data-mode="letters"] .phone .prompt::before { content: '“'; position: static; width: auto; height: auto; background: none; border-radius: 0; }
body[data-mode="letters"] .phone .prompt::after { content: '”'; }
body[data-mode="letters"] .phone .choice {
  color: var(--ink); background: var(--paper); border: 2px solid #161616; border-radius: 0; box-shadow: 3px 3px 0 #161616;
  font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: 0; text-transform: none;
}
body[data-mode="letters"] .phone .choice.c0, body[data-mode="letters"] .phone .choice.c1 { background: var(--paper); }
body[data-mode="letters"] .phone .choice .letter, body[data-mode="letters"] .phone .choice.c1 .letter { color: #f4efe2; background: #161616; border: 0; box-shadow: none; font-family: Inter, sans-serif; font-weight: 700; font-style: normal; }
body[data-mode="letters"] .phone .choice.picked { background: #fbecc8; box-shadow: 0 0 0 3px #f4efe2, 0 0 0 5px #161616, 3px 3px 0 5px #161616; }
body[data-mode="letters"] .phone .choice .stamp { color: #fffcf3; border: 2px solid #161616; }
body[data-mode="letters"] .phone .choice .muted { font-family: Inter, sans-serif; font-size: 15px; }
body[data-mode="letters"] .phone .me .pts { background: #161616; color: #f4efe2; border: 0; border-radius: 0; box-shadow: none; }
body[data-mode="letters"] .phone .mini-board > div { background: var(--paper); border: 1px solid #16161640; border-radius: 0; }
body[data-mode="letters"] .phone .mini-board .sc { color: var(--ink); font-size: 22px; }
body[data-mode="letters"] .phone .mini-board .me-row { background: #fbecc8; box-shadow: inset 0 0 0 2px #161616; }
body[data-mode="letters"] .phone .result { color: var(--ink); background: var(--paper); border: 2px solid #161616; border-radius: 0; box-shadow: 3px 3px 0 #161616; font-family: var(--serif); font-weight: 600; }
body[data-mode="letters"] .phone .result.c0, body[data-mode="letters"] .phone .result.c1 { background: var(--paper); }
body[data-mode="letters"] .phone .result .by { color: var(--soft); font-family: Inter, sans-serif; font-weight: 600; }
body[data-mode="letters"] .phone .result .vc { color: var(--soft); }
body[data-mode="letters"] .phone .result .by .pts { color: #f4efe2; background: #161616; border: 0; border-radius: 0; }
body[data-mode="letters"] .phone .result.win { background: #fbecc8; box-shadow: 5px 5px 0 #161616; border-width: 3px; }
body[data-mode="letters"] .phone :is(.moment-card, .rank-card) { background: var(--paper); border: 2px solid #161616; border-radius: 0; box-shadow: 4px 4px 0 #161616; }
body[data-mode="letters"] .phone :is(.moment-card.win, .rank-card.p1) { background: #fbecc8; border-width: 3px; }
body[data-mode="letters"] .phone .big-pts { font-size: 44px; }
body[data-mode="letters"] .phone .big-pts small { font-family: Inter, sans-serif; font-weight: 600; color: var(--soft); }
body[data-mode="letters"] .phone .rank-card .ribbon { font-family: Inter, sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: 18px; border: 2px solid #161616; border-radius: 0; box-shadow: none; }
body[data-mode="letters"] .phone .rank-card.p1 .ribbon { background: var(--wood); }
body[data-mode="letters"] .flash-card { background: #161616; color: #f4efe2; border: 0; border-radius: 0; box-shadow: 5px 5px 0 #d9b06a; text-transform: uppercase; letter-spacing: .08em; font-size: 22px; }
body[data-mode="letters"] .phone .mode-chip { color: var(--ink); background: var(--paper); border: 2px solid #161616; border-radius: 0; box-shadow: 3px 3px 0 #161616; text-transform: none; letter-spacing: 0; }
body[data-mode="letters"] .phone .mode-chip .mode-name { font-family: var(--serif); font-weight: 900; font-size: 21px; }
body[data-mode="letters"] .phone .mode-chip .mode-blurb { color: var(--soft); font-weight: 500; }
body[data-mode="letters"] .phone .mode-chip.on { background: #fbecc8; box-shadow: 0 0 0 3px #f4efe2, 0 0 0 5px #161616; }
body[data-mode="letters"] .phone .mode-chip .mode-check { color: #fffcf3; border-width: 2px; }
body[data-mode="letters"] .phone .level-chip { color: var(--ink); background: var(--paper); border: 2px solid #161616; border-radius: 0; box-shadow: 3px 3px 0 #161616; text-transform: none; letter-spacing: 0; }
body[data-mode="letters"] .phone .level-chip b { font-family: var(--serif); font-weight: 900; }
body[data-mode="letters"] .phone .level-chip.on { background: #fbecc8; box-shadow: 0 0 0 3px #f4efe2, 0 0 0 5px #161616; }
body[data-mode="letters"] .mode-now .level-now { border-left-color: #16161633; }
body[data-mode="letters"] .screen .mode-badge .level-pill { border-radius: 0; border-color: #161616; color: var(--ink); }
body[data-mode="letters"] .screen .mode-badge .level-pill.lv-hard { background: #161616; color: #f4efe2; }
body[data-mode="letters"] .phone .pick-label, body[data-mode="letters"] .phone details summary { color: var(--soft); }
body[data-mode="letters"] .phone .who { border-bottom-color: #16161633; }
body[data-mode="letters"] .mode-now small, body[data-mode="letters"] .mode-badge small { color: var(--soft); }
body[data-mode="letters"] .mode-now b { font-family: var(--serif); font-weight: 900; }

/* ---------- shared screen ---------- */
/* The living background stays home: newsprint is calm. */
body[data-mode="letters"] .screen .bg { display: none; }
body[data-mode="letters"] .screen header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1vw; color: var(--soft); }
body[data-mode="letters"] .screen header > .row:last-child { justify-self: end; }
body[data-mode="letters"] .screen header #where .logo-word { display: none; }
body[data-mode="letters"] .screen .masthead { padding: 0 2vw 6px; }
body[data-mode="letters"] .screen .mast-name { font-size: clamp(34px, 3.8vw, 64px); }
body[data-mode="letters"] .screen .mast-sub { font-size: clamp(11px, 1vw, 16px); }
body[data-mode="letters"] .screen .lead, body[data-mode="letters"] .screen .context { color: var(--soft); }
body[data-mode="letters"] .screen main[data-phase="write"] .prompt.topic::before, body[data-mode="letters"] .screen .topic-row .topic::before { content: '“'; }
body[data-mode="letters"] .screen main[data-phase="write"] .prompt.topic::after, body[data-mode="letters"] .screen .topic-row .topic::after { content: '”'; }
body[data-mode="letters"] .screen .tag { font-size: clamp(13px, 1.1vw, 18px); }
body[data-mode="letters"] .screen .mode-badge { background: var(--paper); border: 2px solid #161616; border-radius: 0; box-shadow: 5px 5px 0 #161616; }
body[data-mode="letters"] .screen .mode-badge .blurb { color: var(--soft); }
body[data-mode="letters"] .join-steps .js-n { background: #161616; color: #f4efe2; border: 0; }
body[data-mode="letters"] .screen .qr { border: 3px solid #161616; border-radius: 0; box-shadow: 6px 6px 0 #161616; }
body[data-mode="letters"] .screen .qr p { color: var(--ink); text-transform: uppercase; letter-spacing: .12em; font-size: clamp(12px, 1vw, 17px); }
body[data-mode="letters"] .screen .crowd-chip { background: var(--paper); border: 2px solid #161616; }
/* The room code as wooden tiles. */
body[data-mode="letters"] .screen .big-code { gap: .16em; padding: 0 0 .1em; background: none; border: 0; box-shadow: none; color: var(--wood-ink); font-family: var(--serif); font-weight: 900; letter-spacing: 0; }
body[data-mode="letters"] .screen .big-code span { display: grid; place-items: center; width: 1.08em; height: 1.12em; border-radius: .1em; background: var(--wood); box-shadow: 0 .06em 0 var(--wood-edge), inset 0 2px 0 #fff8, 0 .12em .2em #0000002e; }

/* Round title card: a boxed front page with a double rule inside. */
body[data-mode="letters"] .screen .round-card.letters, body[data-mode="letters"] .screen .round-card.letters.last {
  background: var(--paper) linear-gradient(#0000000a 1px, transparent 1px) 0 0 / 100% 28px; color: var(--ink);
  border: 3px solid #161616; border-radius: 0; box-shadow: 10px 10px 0 #161616;
}
body[data-mode="letters"] .screen .round-card.letters.last { background-color: #fbecc8; }
body[data-mode="letters"] .screen .round-card::after { content: ''; position: absolute; inset: 12px; border: 5px double #161616; pointer-events: none; }
body[data-mode="letters"] .screen .round-card .rc-burst { opacity: .1; }
body[data-mode="letters"] .screen .rc-num { color: var(--ink); font-size: clamp(16px, 1.6vw, 26px); letter-spacing: .24em; }
body[data-mode="letters"] .screen .rc-num span { color: var(--soft); }

/* Answer cards: clippings with a hard shadow. */
body[data-mode="letters"] .acard { color: var(--ink); background: var(--paper); border: 2px solid #161616; border-radius: 0; box-shadow: 6px 6px 0 #161616; font-family: var(--serif); font-weight: 600; }
body[data-mode="letters"] .acard.c0, body[data-mode="letters"] .acard.c1 { background: var(--paper); }
body[data-mode="letters"] .acard .letter, body[data-mode="letters"] .acard.c0 .letter, body[data-mode="letters"] .acard.c1 .letter { color: #f4efe2; background: #161616; border: 3px solid #f4efe2; box-shadow: none; font-family: Inter, sans-serif; font-weight: 700; }
body[data-mode="letters"] .acard.hid { color: var(--soft); background: transparent; border: 2px dashed #161616; box-shadow: none; }
body[data-mode="letters"] .screen .acard .by { color: var(--soft); font-family: Inter, sans-serif; }
body[data-mode="letters"] .screen .acard .by .who { color: var(--ink); }
body[data-mode="letters"] .screen .acard .pts { color: #f4efe2; background: #161616; border: 0; border-radius: 0; box-shadow: none; }
body[data-mode="letters"] .screen .answers.lines .acard .vcount { color: var(--soft); font-family: Inter, sans-serif; }
body[data-mode="letters"] .screen .acard.win { background: #fbecc8; box-shadow: 0 0 0 4px #d9b06a, 8px 8px 0 4px #161616; }
body[data-mode="letters"] .screen .bonus-note { color: var(--soft); }

/* Scores and the end */
body[data-mode="letters"] .screen .bar-row { background: var(--paper); border: 2px solid #161616; border-radius: 0; }
body[data-mode="letters"] .screen .bar-row.lead-row { background: #fbecc8; border-color: #161616; box-shadow: 4px 4px 0 #161616; }
body[data-mode="letters"] .screen .bar-row .rank, body[data-mode="letters"] .screen .bar-row.lead-row .rank { color: var(--ink); }
body[data-mode="letters"] .screen .bar-row .track { background: #16161610; border: 2px solid #161616; }
body[data-mode="letters"] .screen .bar-row .sc { color: var(--ink); }
body[data-mode="letters"] .screen .bar-row .move.down { color: var(--pink); }
body[data-mode="letters"] .screen .podium .block { color: var(--wood-ink); border: 3px solid #161616; border-radius: 0; }
body[data-mode="letters"] .screen .podium .p1 .block { background: var(--wood); }
body[data-mode="letters"] .screen .podium .p2 .block { background: linear-gradient(#efebe1, #cbc5b6); }
body[data-mode="letters"] .screen .podium .p3 .block { background: linear-gradient(#e2b88a, #b98352); }
body[data-mode="letters"] .screen .podium .nm { font-family: var(--serif); font-weight: 900; }
body[data-mode="letters"] .screen .podium .sc { color: var(--ink); }
body[data-mode="letters"] .screen .acard.best-line { box-shadow: 4px 4px 0 #161616; border-width: 2px; }
body[data-mode="letters"] .screen .acard.best-line .by { color: var(--soft); font-family: Inter, sans-serif; }
body[data-mode="letters"] .screen footer { color: var(--soft); }

/* Room for the masthead on a 720p TV: a little less air between blocks, a smaller code, faces and winner line.
   On the phone the masthead sits between Back and Add TV, so those two get a little narrower. */
body[data-mode="letters"] .screen main { gap: 2vh; padding: 1.4vh 0; }
body[data-mode="letters"] .screen footer { margin-top: .6vh; }
body[data-mode="letters"] .screen main[data-phase="lobby"] .person .avatar { width: clamp(56px, 6vw, 96px); height: auto; }
body[data-mode="letters"] .screen main[data-phase="end"] .end-top .title { font-size: clamp(32px, min(4.4vw, 8vh), 72px); }
body[data-mode="letters"] .screen main[data-phase="end"] .end-top .trophy { width: clamp(56px, 6vw, 96px); }
body[data-mode="letters"] .screen main[data-phase="write"] .person .avatar { width: clamp(56px, 5.6vw, 88px); height: auto; }
body[data-mode="letters"] .screen main[data-phase="write"] .prompt.topic { font-size: clamp(30px, 4vw, 64px); }
body[data-mode="letters"] .screen main[data-phase="end"] .answers.best { gap: 1.2vh; }
body[data-mode="letters"] .screen main[data-phase="end"] .acard.best-line { padding: .8vh 1.4vw; }
body[data-mode="letters"] .screen main[data-phase="end"] .podium .p1 .block { height: 10vh; }
body[data-mode="letters"] .screen main[data-phase="end"] .podium .p2 .block { height: 8vh; }
body[data-mode="letters"] .screen main[data-phase="end"] .podium .p3 .block { height: 6.4vh; }
body[data-mode="letters"] .tiles.big { --ts: clamp(76px, min(10vw, 15vh), 180px); }
body[data-mode="letters"] .screen .big-code { font-size: clamp(52px, 6.6vw, 124px); }
body[data-mode="letters"] .phone .back-row { gap: 6px; }
body[data-mode="letters"] .phone .back-row > button { font-size: 14px; letter-spacing: .06em; padding: 6px 10px; flex: none; }
body[data-mode="letters"] .phone .mast-name { white-space: nowrap; }
body[data-mode="letters"] .phone .mast-sub { font-size: 9px; letter-spacing: .14em; }

/* ---------- pop-ups: leave the game, add a TV, invite ---------- */
body[data-mode="letters"] .leave-ask, body[data-mode="letters"] .tv-pop { background: #161616b3; }
body[data-mode="letters"] .tv-pop .tv-card { background: var(--paper); color: var(--ink); border: 2px solid #161616; border-radius: 0; box-shadow: 6px 6px 0 #161616; }
body[data-mode="letters"] .tv-pop .tv-big { font-size: 44px; letter-spacing: .12em; }
body[data-mode="letters"] .tv-hint .tv-code { color: var(--ink); font-family: var(--serif); font-weight: 900; }
body[data-mode="letters"] .invite-box textarea { font-family: Inter, sans-serif; font-weight: 500; font-size: 16px; color: var(--ink); background: var(--paper); border-color: #161616; }
body[data-mode="letters"] .more-games { color: var(--ink); border-color: #161616; background: var(--paper); }

@media (max-height: 500px) {
  body[data-mode="letters"] .phone .mast-name { font-size: 26px; }
  body[data-mode="letters"] .phone h1 { font-size: 26px; }
}
/* The phone's top row also holds the screen lock now: the paper's name shrinks to fit narrow phones. */
body[data-mode="letters"] .phone .back-row .mast-name { font-size: clamp(18px, 6vw, 28px); white-space: nowrap; }

/* ---------- the topic's cartoon (public/scenes.js; Doug 2026-10-03: animate the cards, spark ideas) ----------
   A newspaper cartoon panel: ink border, cream paper, a hard shadow. Every moving part is a transform or opacity
   loop with its own pivot (set inline) and delay (--d); app.css stops them all under prefers-reduced-motion. */
.scene { display: block; aspect-ratio: 240 / 140; margin: 0 auto; background: var(--paper, #fffcf3); border: 2px solid #161616; box-shadow: 4px 4px 0 #161616; overflow: hidden; }
.scene svg { display: block; width: 100%; height: 100%; }
:where(.scene g) { transform-box: view-box; animation-duration: 2.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-delay: var(--d, 0s); }
.scene.sc-big { height: clamp(96px, 21vh, 220px); }
.scene.sc-mini { height: clamp(52px, 12vh, 120px); margin: 0; box-shadow: 3px 3px 0 #161616; }
.scene.sc-card { height: 100px; }
.scene.sc-wait { height: 120px; }
body.typing .scene { display: none; }
@media (max-height: 640px) { .scene.sc-card { height: 72px; } }

.s-bob { animation-name: s-bob; animation-duration: 2s; }
.s-sway { animation-name: s-sway; animation-duration: 2.6s; }
.s-talk { animation-name: s-talk; animation-duration: .45s; }
.s-raise { animation-name: s-raise; animation-duration: 3s; }
.s-pop { animation-name: s-pop; animation-duration: 3s; }
.s-rise { animation-name: s-rise; animation-duration: 2.4s; animation-timing-function: linear; }
.s-door { animation-name: s-door; animation-duration: 3.6s; }
.s-buzz { animation-name: s-buzz; animation-duration: 1.6s; }
.s-wag { animation-name: s-wag; animation-duration: .5s; }
.s-blink { animation-name: s-blink; animation-duration: 1.8s; }
.s-push { animation-name: s-push; animation-duration: 3s; }
.s-tip { animation-name: s-tip; animation-duration: 3s; }
.s-snip { animation-name: s-snip; animation-duration: .6s; }
.s-puff { animation-name: s-puff; animation-duration: 1.8s; }
.s-spin { animation-name: s-spin; animation-duration: 9s; animation-timing-function: linear; }
.s-fling { animation-name: s-fling; animation-duration: 2s; animation-timing-function: ease-out; }
.s-flick { animation-name: s-flick; animation-duration: .5s; }
.s-hop { animation-name: s-hop; animation-duration: 1.2s; }
.s-tumble { animation-name: s-tumble; animation-duration: 2.4s; }
.s-yawn { animation-name: s-yawn; animation-duration: 4s; }
.s-breathe { animation-name: s-breathe; animation-duration: 3s; }
.s-swim { animation-name: s-swim; animation-duration: 6s; }
.s-ring { animation-name: s-ring; animation-duration: 1s; }
.s-glide { animation-name: s-glide; animation-duration: 4s; animation-timing-function: linear; }
.s-rock { animation-name: s-rock; animation-duration: 3s; }
.s-flap { animation-name: s-flap; animation-duration: .5s; }
.s-wave { animation-name: s-wave; animation-duration: 3s; animation-timing-function: linear; }
.s-scoot { animation-name: s-scoot; animation-duration: 2.4s; }
.s-wave-arm { animation-name: s-wave-arm; animation-duration: .8s; }
.s-nod { animation-name: s-nod; animation-duration: 2.2s; }
.s-chew { animation-name: s-chew; animation-duration: .5s; }
.s-sweep { animation-name: s-sweep; animation-duration: 3s; }
.s-fly { animation-name: s-fly; animation-duration: 7s; animation-timing-function: linear; }
.s-bump { animation-name: s-bump; animation-duration: .6s; }
.s-puffs { animation-name: s-puffs; animation-duration: 1.2s; animation-timing-function: ease-out; }
.s-ripple { animation-name: s-ripple; animation-duration: 2s; animation-timing-function: ease-out; }
.s-peck { animation-name: s-peck; animation-duration: 1.4s; }
.s-drift { animation-name: s-drift; animation-duration: 5s; }
.s-float { animation-name: s-float; animation-duration: 3s; }
.s-lift { animation-name: s-lift; animation-duration: 3.2s; }
.s-thump { animation-name: s-thump; animation-duration: .5s; }
.s-crack-l { animation-name: s-crack-l; animation-duration: 3s; }
.s-crack-r { animation-name: s-crack-r; animation-duration: 3s; }
.s-slip { animation-name: s-slip; animation-duration: 3s; }
.s-waddle { animation-name: s-waddle; animation-duration: .8s; }
.s-leap { animation-name: s-leap; animation-duration: 2.8s; }
.s-snow { animation-name: s-snow; animation-duration: 4s; animation-timing-function: linear; }
.s-pop-up { animation-name: s-pop-up; animation-duration: 3s; }
.s-spray { animation-name: s-spray; animation-duration: 2s; }

@keyframes s-bob { 50% { transform: translateY(-4px); } }
@keyframes s-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes s-talk { 50% { transform: scaleY(.3); } }
@keyframes s-raise { 0%, 100% { transform: rotate(8deg); } 35%, 70% { transform: rotate(-14deg); } }
@keyframes s-pop { 0%, 10% { transform: scale(0); opacity: 0; } 20%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }
@keyframes s-rise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes s-door { 0%, 15% { transform: scaleX(1); } 40%, 75% { transform: scaleX(.35); } 90%, 100% { transform: scaleX(1); } }
@keyframes s-buzz { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(12px, -6px); } 50% { transform: translate(20px, 6px); } 75% { transform: translate(6px, 10px); } }
@keyframes s-wag { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes s-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes s-push { 0%, 20% { transform: translateX(-6px); } 45%, 100% { transform: translateX(4px); } }
@keyframes s-tip { 0%, 40% { transform: rotate(0); } 55% { transform: rotate(14deg); } 65% { transform: rotate(4deg); } 75%, 100% { transform: rotate(0); } }
@keyframes s-snip { 50% { transform: rotate(-16deg); } }
@keyframes s-puff { 50% { transform: scale(1.05, .97); } }
@keyframes s-spin { to { transform: rotate(360deg); } }
@keyframes s-fling { 0% { transform: translate(14px, 0) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-24px, 30px) rotate(-180deg); opacity: 0; } }
@keyframes s-flick { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.88, 1.14); } }
@keyframes s-hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-12px); } }
@keyframes s-tumble { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-10px, -10px) rotate(180deg); } 100% { transform: translate(0, 0) rotate(360deg); } }
@keyframes s-yawn { 0%, 60%, 100% { transform: scale(1); } 75%, 85% { transform: scale(1.8, 2.4); } }
@keyframes s-breathe { 50% { transform: scaleY(1.08); } }
@keyframes s-swim { 0%, 100% { transform: translateX(-14px); } 50% { transform: translateX(16px); } }
@keyframes s-ring { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes s-glide { 0% { transform: translate(-50px, 10px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(180px, -40px); opacity: 0; } }
@keyframes s-rock { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes s-flap { 50% { transform: scaleY(.55); } }
@keyframes s-wave { from { transform: translateX(0); } to { transform: translateX(30px); } }
@keyframes s-scoot { 0%, 100% { transform: translateX(10px); } 50% { transform: translateX(-12px); } }
@keyframes s-wave-arm { 50% { transform: rotate(-24deg); } }
@keyframes s-nod { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes s-chew { 50% { transform: translateX(2px) scaleY(.8); } }
@keyframes s-sweep { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
@keyframes s-fly { from { transform: translateX(-180px); } to { transform: translateX(180px); } }
@keyframes s-bump { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-3px) rotate(-1.5deg); } 60% { transform: translateY(0) rotate(1deg); } }
@keyframes s-puffs { 0% { transform: translateX(0) scale(.6); opacity: 1; } 100% { transform: translateX(-20px) scale(1.4); opacity: 0; } }
@keyframes s-ripple { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes s-peck { 0%, 50%, 100% { transform: rotate(0); } 25%, 35% { transform: rotate(22deg); } }
@keyframes s-drift { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(-40px, 10px) rotate(10deg); } }
@keyframes s-float { 0%, 100% { transform: translateY(0); opacity: .95; } 50% { transform: translateY(-10px); opacity: .6; } }
@keyframes s-lift { 0%, 30%, 90%, 100% { transform: translateY(0) rotate(0); } 45%, 75% { transform: translate(-4px, -14px) rotate(-12deg); } }
@keyframes s-thump { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.06); } }
@keyframes s-crack-l { 0%, 30%, 100% { transform: rotate(0); } 45%, 80% { transform: rotate(-14deg); } }
@keyframes s-crack-r { 0%, 30%, 100% { transform: rotate(0); } 45%, 80% { transform: rotate(14deg); } }
@keyframes s-slip { 0%, 35%, 100% { transform: translateY(40px) scale(.4); opacity: 0; } 50%, 80% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes s-waddle { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes s-leap { 0%, 50%, 100% { transform: translate(0, 20px) rotate(0); opacity: 0; } 60% { opacity: 1; } 75% { transform: translate(-10px, -24px) rotate(-30deg); opacity: 1; } 92% { transform: translate(-20px, 14px) rotate(-70deg); opacity: 0; } }
@keyframes s-snow { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(80px); opacity: 0; } }
@keyframes s-pop-up { 0%, 30%, 100% { transform: translateY(14px); } 45%, 80% { transform: translateY(0); } }
@keyframes s-spray { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg); } }