/* 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; }