/* Pens Down live game: venue TV, team phone, host console, playable demo.
   Colours, type and motion come from the look tokens (brand/look-a|b/tokens.css, one loaded
   per page, so every var(--pd-*) resolves for the active look).
   A "Back Table": light page, white ruled answer sheet, chalkboard TV, yellow pencil countdown.
   B "Big Night": charcoal stage, amber game-show controls, bulb countdown, split-flap numerals.
   New look-local values (not tokens, defined here): --pd-a-timber-dark (frame inner line),
   --pd-a-ruled (blue ruled line on the answer sheet), pencil/bulb object colours inside .pencil
   and .bulbs (the same object colours the wordmark pencil uses). */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--pd-bg); color: var(--pd-ink); -webkit-text-size-adjust: 100%; }
html:has(body.pd-screen) { background: #0B0B0E; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font-family: var(--pd-font-text); font-weight: var(--pd-text-weight); font-stretch: var(--pd-text-stretch);
  font-size: 1rem; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: var(--pd-accent); }
:focus-visible { outline: 3px solid var(--pd-focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-look="a"] { --pd-a-timber-dark: #6E4A2A; --pd-a-ruled: #AFC0EA; }

.display {
  font-family: var(--pd-font-display); font-weight: var(--pd-display-weight); font-stretch: var(--pd-display-stretch);
  text-transform: var(--pd-display-case); letter-spacing: var(--pd-display-tracking); line-height: 1;
}
.kicker { margin: 0; color: var(--pd-ink-dim); font-size: var(--pd-step-0); font-weight: var(--pd-strong-weight); }
[data-look="b"] .kicker { font-family: var(--pd-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--pd-accent); }
.num { font-variant-numeric: tabular-nums; }
[data-look="a"] .only-b { display: none !important; }
[data-look="b"] .only-a { display: none !important; }

/* ---------- buttons: A flat biro, B game-show with a hard shadow that presses down ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px; border: 2px solid var(--pd-ink); border-radius: var(--pd-radius-control);
  background: transparent; color: var(--pd-ink); font-weight: var(--pd-strong-weight); font-size: 1rem; line-height: 1.15;
  text-decoration: none; cursor: pointer; text-transform: var(--pd-button-case); -webkit-tap-highlight-color: transparent;
  transition: transform var(--pd-dur-quick) var(--pd-ease-out), box-shadow var(--pd-dur-quick) var(--pd-ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--pd-accent); border-color: var(--pd-accent); color: var(--pd-on-accent); }
.btn-alert { background: var(--pd-alert); border-color: var(--pd-alert); color: var(--pd-bg); }
.btn-big { min-height: 56px; padding: 14px 28px; font-size: 1.125rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-block { display: flex; width: 100%; }
[data-look="a"] .btn { font-family: var(--pd-font-display); font-weight: 750; font-stretch: 108%; }
[data-look="b"] .btn {
  font-family: var(--pd-font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: .03em;
  border-color: var(--pd-ink-dim); background: var(--pd-bg-raised); box-shadow: var(--pd-button-shadow);
}
[data-look="b"] .btn-primary { background: var(--pd-accent); border-color: var(--pd-accent); color: var(--pd-on-accent); }
[data-look="b"] .btn-alert { background: var(--pd-alert); border-color: var(--pd-alert); color: var(--pd-bg); }
[data-look="b"] .btn-big { min-height: 60px; font-size: 1.45rem; }
[data-look="b"] .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--pd-shadow); }
[data-look="b"] .btn[disabled]:active { transform: none; box-shadow: var(--pd-button-shadow); }

/* =========================================================
   VENUE TV: a 16:9 stage sized in container units, so 1920x1080 and 1280x720 match.
   The TV colours are remapped onto the generic names inside the stage.
   ========================================================= */
.pd-screen, .d-tv {
  --pd-bg: var(--pd-tv-bg); --pd-bg-raised: var(--pd-tv-raised); --pd-ink: var(--pd-tv-ink); --pd-ink-dim: var(--pd-tv-dim);
  --pd-accent: var(--pd-tv-accent); --pd-on-accent: var(--pd-tv-on-accent); --pd-alert: var(--pd-tv-alert);
  --pd-rule: var(--pd-tv-rule); --pd-focus: var(--pd-tv-accent);
}
.pd-screen { overflow: hidden; height: 100vh; background: #0B0B0E; color: var(--pd-ink); cursor: none; }
.pd-screen.has-pointer { cursor: default; }
.stage-wrap { position: fixed; inset: 0; display: grid; place-items: center; }
.stage, .d-tv { position: relative; container-type: inline-size; overflow: hidden; background: var(--pd-bg); color: var(--pd-ink); }
.stage { width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; }
.screen-hint { position: fixed; left: 12px; bottom: 8px; margin: 0; font-size: 14px; color: var(--pd-ink-dim); }

/* A: a chalkboard in a timber frame, with a chalk stick on the ledge */
[data-look="a"] .stage, [data-look="a"] .d-tv {
  background:
    radial-gradient(ellipse 60% 50% at 28% 38%, rgba(244, 241, 232, .045), transparent 70%),
    radial-gradient(ellipse 45% 40% at 78% 72%, rgba(244, 241, 232, .035), transparent 70%),
    var(--pd-tv-bg);
}
[data-look="a"] .stage::before, [data-look="a"] .d-tv::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 1.15cqi solid transparent;
  background:
    repeating-linear-gradient(90deg, rgba(60, 35, 15, .16) 0 .18cqi, transparent .18cqi .9cqi, rgba(255, 230, 200, .08) .9cqi 1.05cqi, transparent 1.05cqi 2.3cqi) border-box,
    var(--pd-timber) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  mask-composite: exclude;
}
[data-look="a"] .stage::after, [data-look="a"] .d-tv::after {
  content: ''; position: absolute; inset: 1.15cqi; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 .22cqi var(--pd-a-timber-dark), inset 0 0 2.4cqi rgba(0, 0, 0, .45);
}
[data-look="a"] .slide { text-shadow: 0 0 .1cqi rgba(244, 241, 232, .25); }

/* B: a charcoal stage under one static top-centre spotlight */
[data-look="b"] .stage, [data-look="b"] .d-tv {
  background:
    radial-gradient(ellipse 52% 75% at 50% -12%, rgba(255, 238, 196, .17), rgba(255, 238, 196, .05) 48%, transparent 74%),
    linear-gradient(to top, rgba(255, 212, 59, .05), transparent 28%),
    var(--pd-tv-bg);
}

.slide {
  position: absolute; inset: 0; padding: 4.4cqi 5.4cqi 3.8cqi;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2cqi;
}
.slide.enter { animation: pd-slide-in var(--pd-dur-settle) var(--pd-ease-out) both; }
@keyframes pd-slide-in { from { opacity: 0; transform: translateY(1cqi); } to { opacity: 1; transform: none; } }

/* ---------- top row ---------- */
.s-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2.6cqi; min-width: 0; }
.s-top-brand { display: flex; justify-content: space-between; }
.s-top .wordmark { height: 4.4cqi; width: auto; display: block; color: var(--pd-ink); }
.s-meta { font-size: var(--pd-tv-meta); color: var(--pd-ink-dim); text-align: right; line-height: 1.2; justify-self: end; }
.s-cat { font-size: var(--pd-tv-meta); color: var(--pd-ink); font-weight: var(--pd-strong-weight); line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }

/* A: the round is a highlighter sticky label */
[data-look="a"] .s-tab {
  justify-self: start; padding: .9cqi 2.1cqi 1cqi; background: var(--pd-highlight); color: var(--pd-on-highlight);
  transform: rotate(-2deg); box-shadow: .35cqi .45cqi 0 rgba(0, 0, 0, .38); text-shadow: none;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .07) 0 .7cqi, transparent .7cqi);
}
[data-look="a"] .s-round { font-family: var(--pd-font-display); font-weight: 900; font-stretch: 112%; font-size: 3.4cqi; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
[data-look="a"] .s-num {
  display: flex; align-items: baseline; gap: 1.1cqi; font-family: var(--pd-font-display); font-weight: 900; font-stretch: 125%;
  font-size: var(--pd-tv-number); line-height: .8; letter-spacing: -0.04em; color: var(--pd-ink); font-variant-numeric: tabular-nums;
}
[data-look="a"] .s-num small { font-family: var(--pd-font-text); font-stretch: 100%; font-size: 2.3cqi; font-weight: 700; letter-spacing: 0; color: var(--pd-ink-dim); }

/* B: a violet coin ringed in amber, caps title, split-flap number */
[data-look="b"] .s-top { display: flex; gap: 2.2cqi; }
[data-look="b"] .s-top > .s-meta { margin-left: auto; }
.s-coin {
  flex: none; width: 8.4cqi; height: 8.4cqi; border-radius: 50%; display: grid; place-items: center; background: var(--pd-violet);
  box-shadow: inset 0 0 0 .5cqi var(--pd-accent), inset 0 0 0 .95cqi var(--pd-violet), inset 0 0 0 1.1cqi rgba(20, 20, 27, .55), 0 .45cqi 0 var(--pd-shadow);
}
.s-coin b { font-family: var(--pd-font-display); font-weight: 900; font-size: 4.8cqi; line-height: 1; color: #14141B; font-variant-numeric: tabular-nums; }
.s-coin.big { width: 17cqi; height: 17cqi; box-shadow: inset 0 0 0 .9cqi var(--pd-accent), inset 0 0 0 1.7cqi var(--pd-violet), inset 0 0 0 1.95cqi rgba(20, 20, 27, .55), 0 .7cqi 0 var(--pd-shadow); }
.s-coin.big b { font-size: 10cqi; }
[data-look="b"] .s-head { min-width: 0; }
[data-look="b"] .s-round { font-family: var(--pd-font-display); font-weight: 900; text-transform: uppercase; font-size: 2.3cqi; letter-spacing: .06em; color: var(--pd-accent); line-height: 1.2; }
[data-look="b"] .s-cat { font-family: var(--pd-font-display); font-weight: 900; text-transform: uppercase; font-size: 3.9cqi; letter-spacing: .005em; line-height: 1.08; margin-top: .4cqi; }
[data-look="b"] .s-num { display: grid; justify-items: end; gap: .6cqi; }
[data-look="b"] .s-num small { font-family: var(--pd-font-display); font-weight: 800; text-transform: uppercase; font-size: 1.8cqi; letter-spacing: .08em; color: var(--pd-ink-dim); }
.flaps { display: inline-flex; gap: .4cqi; }
.flaps b {
  position: relative; display: inline-grid; place-items: center; width: 6.2cqi; height: 8.6cqi; border-radius: .6cqi;
  background: linear-gradient(to bottom, #2C2C39 0 50%, #22222D 50%); box-shadow: 0 .35cqi 0 var(--pd-shadow);
  font-family: var(--pd-font-display); font-weight: 900; font-size: 7.2cqi; line-height: 1; color: var(--pd-ink); font-variant-numeric: tabular-nums;
}
.flaps b::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - .1cqi); height: .2cqi; background: var(--pd-shadow); }

/* ---------- middle: the question ---------- */
.s-mid { min-height: 0; display: grid; align-content: center; }
.s-q { margin: 0; font-size: var(--pd-tv-question); line-height: 1.16; overflow-wrap: anywhere; }
/* Read from the back table: question type is ~100px on a 1920 TV, fit() shrinks long ones. */
[data-look="a"] .s-q { font-size: 5.4cqi; line-height: 1.12; }
[data-look="b"] .s-q { font-size: 5cqi; line-height: 1.12; }
[data-look="a"] .s-q { font-weight: 600; max-width: 24ch; letter-spacing: -0.005em; text-wrap: pretty; }
[data-look="b"] .s-mid { justify-items: center; }
[data-look="b"] .s-card {
  position: relative; max-width: 86cqi; padding: 3.6cqi 5.4cqi; background: var(--pd-tv-raised);
  border: .4cqi solid var(--pd-accent); border-radius: 1.2cqi; box-shadow: 0 .6cqi 0 var(--pd-shadow); text-align: center;
}
[data-look="b"] .s-card::before {
  content: ''; position: absolute; inset: .5cqi; pointer-events: none;
  --bulb: radial-gradient(circle, #FFF3C4 0 .3cqi, var(--pd-accent) .45cqi .62cqi, rgba(255, 212, 59, .3) .7cqi 1cqi, transparent 1.1cqi);
  background: var(--bulb) left top / 2.2cqi 2.2cqi no-repeat, var(--bulb) right top / 2.2cqi 2.2cqi no-repeat,
    var(--bulb) left bottom / 2.2cqi 2.2cqi no-repeat, var(--bulb) right bottom / 2.2cqi 2.2cqi no-repeat;
}
[data-look="b"] .s-q { font-weight: 600; font-stretch: var(--pd-question-stretch); max-width: 26ch; margin-inline: auto; letter-spacing: -0.01em; text-wrap: balance; }
.tb-kicker { margin: 0 0 1.4cqi; font-family: var(--pd-font-display); font-weight: 900; font-size: var(--pd-tv-meta); color: var(--pd-accent); text-transform: var(--pd-display-case); letter-spacing: .02em; }

/* picture question */
.pic-mid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4cqi; align-items: center; min-height: 0; height: 100%; }
.pic-mid img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; min-height: 0; }
.pic-mid .s-q { font-size: 3.4cqi; }
[data-look="b"] .pic-mid .s-card { padding: 2.6cqi 3cqi; }

/* ---------- foot: ladder, countdown, join code ---------- */
.s-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3cqi; align-items: end; }
.s-run { display: grid; gap: 1.8cqi; min-width: 0; }
.s-rounds { font-size: var(--pd-tv-small); color: var(--pd-ink-dim); text-align: right; }

/* A ladder: chalk circles, done ticked, current ringed in highlighter */
.ladder { display: flex; flex-wrap: wrap; gap: .8cqi; }
.ladder b {
  position: relative; width: 3.5cqi; height: 3.5cqi; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--pd-font-display); font-weight: 800; font-size: 1.6cqi; font-variant-numeric: tabular-nums;
  border: .2cqi solid var(--pd-ink-dim); color: var(--pd-ink-dim);
}
.ladder b.done { color: transparent; border-color: var(--pd-ink); }
.ladder b.done::after {
  content: ''; position: absolute; left: 50%; top: 45%; width: 1.5cqi; height: .8cqi;
  border-left: .3cqi solid var(--pd-ink); border-bottom: .3cqi solid var(--pd-ink); transform: translate(-50%, -50%) rotate(-45deg);
}
.ladder b.now { color: var(--pd-ink); border: .35cqi solid var(--pd-accent); box-shadow: 0 0 0 .35cqi rgba(255, 212, 59, .22); font-size: 1.8cqi; }

/* countdown, shared */
.cd { display: flex; align-items: center; gap: 2.2cqi; min-width: 0; }
.cd-t { font-family: var(--pd-font-display); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; color: var(--pd-ink); white-space: nowrap; }
.cd.hot .cd-t, .cd.down .cd-t { color: var(--pd-alert); }

/* A countdown: the yellow hex pencil, sharpened down to the server deadline */
.cd-a .cd-t { font-stretch: 125%; font-size: 4.4cqi; letter-spacing: -0.03em; min-width: 3.2ch; }
.cd-a.idle .cd-t { font-family: var(--pd-font-text); font-stretch: 100%; font-weight: 700; font-size: 2.3cqi; letter-spacing: 0; color: var(--pd-ink-dim); min-width: 0; }
.pencil { --pw: 56cqi; --ph: 2.9cqi; --bw: calc(var(--pw) - 9.2cqi); position: relative; display: flex; flex: none; width: var(--pw); height: var(--ph); }
.pencil i { display: block; flex: none; height: 100%; }
.pencil .p-eraser { width: 2.4cqi; background: #E8828B; border-radius: .7cqi 0 0 .7cqi; }
.pencil .p-ferrule { width: 2.2cqi; background: repeating-linear-gradient(90deg, #AEB6C6 0 .48cqi, #8A93A6 .48cqi .66cqi); }
.pencil .p-body {
  width: var(--bw); transform-origin: left center; transform: scaleX(var(--s, 1));
  background: linear-gradient(to bottom, #FFE27A 0 33%, #FFD43B 33% 67%, #E9B414 67%);
}
.pencil .p-cone {
  position: relative; width: 4.6cqi; background: #E9C99A; clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateX(calc(var(--bw) * (var(--s, 1) - 1)));
}
.pencil .p-lead { position: absolute; right: 0; top: 0; width: 34%; background: #5E636B; transition: background-color var(--pd-dur-quick) linear; }
.cd-a.run .p-body { animation: pd-a-sharpen var(--pd-run) var(--pd-ease-timer) var(--pd-delay) both; }
.cd-a.run .p-cone { animation: pd-a-cone var(--pd-run) var(--pd-ease-timer) var(--pd-delay) both; }
@keyframes pd-a-cone { from { transform: translateX(0); } to { transform: translateX(calc(var(--bw) * -0.96)); } }
.cd-a.down .p-body { animation: none; transform: scaleX(.04); }
.cd-a.down .p-cone { animation: none; transform: translateX(calc(var(--bw) * -0.96)); }
.cd-a.down .p-lead { background: var(--pd-alert); }
.cd-big .pencil { --pw: 88cqi; --ph: 4.8cqi; }
.cd-big .pencil .p-eraser { width: 3.6cqi; }
.cd-big .pencil .p-ferrule { width: 3.4cqi; }
.cd-big .pencil .p-cone { width: 7.4cqi; }
.cd-big .pencil { --bw: calc(var(--pw) - 14.4cqi); }

/* B countdown: ten bulbs switching off in discrete steps; the last three go alert */
.cd-b { justify-content: flex-end; gap: 2.6cqi; }
.cd-b .bulbs { display: flex; gap: 1.5cqi; }
.cd-b .bulbs i { position: relative; display: block; width: 3.3cqi; height: 3.3cqi; border-radius: 50%; background: #2B2B37; box-shadow: inset 0 0 0 .22cqi #3A3A4A, inset 0 -.5cqi 0 rgba(0, 0, 0, .35); transition: box-shadow 700ms var(--pd-ease-out); }
/* the lit filament is a layer over the dead glass, so a bulb going out cools down (700ms) instead of
   snapping; reduced motion zeroes the transition and it steps instantly */
.cd-b .bulbs i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 700ms var(--pd-ease-out); background: radial-gradient(circle at 38% 34%, #FFF6D2 0 18%, var(--pd-accent) 52%, #E2A800 100%); }
.cd-b .bulbs i.on::before { opacity: 1; }
.cd-b .bulbs i.on { box-shadow: 0 0 1.3cqi .15cqi rgba(255, 212, 59, .5); }
.cd-b.hot .bulbs i::before { background: radial-gradient(circle at 38% 34%, #FFE0DA 0 18%, var(--pd-alert) 52%, #D9442F 100%); }
.cd-b.hot .bulbs i.on { box-shadow: 0 0 1.3cqi .15cqi rgba(255, 106, 85, .55); }
.cd-b .cd-t { font-size: 6cqi; letter-spacing: .005em; min-width: 2.6ch; text-align: right; }
.cd-b.idle .cd-t { text-transform: uppercase; font-size: 3.4cqi; color: var(--pd-ink-dim); letter-spacing: .06em; }
.cd-big.cd-b .bulbs { gap: 2.4cqi; }
.cd-big.cd-b .bulbs i { width: 6.2cqi; height: 6.2cqi; }

/* join code: A a chalk beer-mat roundel, B a lit ticket stub */
.s-code { display: grid; place-content: center; text-align: center; line-height: 1.15; }
.s-code span { font-size: 1.3cqi; color: var(--pd-ink-dim); font-weight: var(--pd-strong-weight); }
.s-code strong { font-family: var(--pd-font-display); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.12; }
[data-look="a"] .s-code {
  width: 14cqi; height: 14cqi; border-radius: 50%; padding: 1.6cqi; gap: .9cqi; transform: rotate(-4deg);
  border: .25cqi solid var(--pd-ink); box-shadow: inset 0 0 0 .7cqi var(--pd-tv-bg), inset 0 0 0 .88cqi var(--pd-ink-dim);
}
[data-look="a"] .s-code span { max-width: 8cqi; margin-inline: auto; font-size: 1.2cqi; }
[data-look="a"] .s-code strong { font-stretch: 100%; font-size: 3.3cqi; color: var(--pd-accent); letter-spacing: 0; }
[data-look="b"] .s-code {
  justify-items: start; text-align: left; gap: .4cqi; padding: 1.2cqi 3.4cqi 1.3cqi 3.2cqi; background: var(--pd-accent); color: var(--pd-on-accent);
  border-radius: .5cqi; box-shadow: 0 0 2.4cqi rgba(255, 212, 59, .25);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 1cqi, #000 1.05cqi) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 1cqi, #000 1.05cqi) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 1cqi, #000 1.05cqi) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 1cqi, #000 1.05cqi) right / 51% 100% no-repeat;
}
[data-look="b"] .s-code span { color: var(--pd-on-accent); font-family: var(--pd-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; font-size: 1.45cqi; }
[data-look="b"] .s-code strong { font-size: 5.2cqi; letter-spacing: .04em; }

/* ---------- welcome ---------- */
.w-mid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6cqi; align-items: center; }
.w-join .kicker { font-size: 2.6cqi; color: var(--pd-ink-dim); margin-bottom: .6cqi; }
.w-code { font-family: var(--pd-font-display); font-weight: 900; font-size: 16cqi; line-height: 1; color: var(--pd-accent); font-variant-numeric: tabular-nums; margin: 0 0 2cqi; }
[data-look="a"] .w-code { font-stretch: 125%; letter-spacing: -0.04em; }
.w-how { font-size: 2.5cqi; line-height: 1.3; margin: 0; max-width: 32ch; }
.w-how b { color: var(--pd-accent); font-weight: var(--pd-strong-weight); }
.w-qr { position: relative; margin: 0; width: 24cqi; background: #FFFFFF; padding: 1.4cqi 1.4cqi 1cqi; text-shadow: none; }
.w-qr svg { display: block; width: 100%; height: auto; }
.w-qr figcaption { margin: .5cqi 0 0; text-align: center; color: #1B1A17; font-size: 1.6cqi; font-weight: 700; }
[data-look="a"] .w-qr { transform: rotate(2deg); }
[data-look="a"] .w-qr::before, [data-look="a"] .w-qr::after {
  content: ''; position: absolute; top: -.8cqi; width: 4.4cqi; height: 1.5cqi; background: rgba(244, 241, 232, .5);
}
[data-look="a"] .w-qr::before { left: -1.1cqi; transform: rotate(-30deg); }
[data-look="a"] .w-qr::after { right: -1.1cqi; transform: rotate(30deg); }
[data-look="b"] .w-join .kicker { font-size: 3cqi; color: var(--pd-accent); }
[data-look="b"] .w-code .flaps b { width: 11cqi; height: 15cqi; font-size: 13cqi; border-radius: 1cqi; box-shadow: 0 .6cqi 0 var(--pd-shadow); }
[data-look="b"] .w-code .flaps { gap: .8cqi; }
[data-look="b"] .w-qr { border-radius: 1.4cqi; border: .5cqi solid var(--pd-accent); box-shadow: 0 .6cqi 0 var(--pd-shadow), 0 0 4cqi rgba(255, 212, 59, .18); }
[data-look="b"] .w-qr figcaption { font-family: var(--pd-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.w-teams { display: flex; align-items: center; gap: 1.8cqi; min-width: 0; overflow: hidden; }
.w-count { font-family: var(--pd-font-display); font-weight: 900; font-size: 4cqi; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-look="a"] .w-count { font-stretch: 125%; }
.w-count span { font-family: var(--pd-font-text); font-weight: var(--pd-text-weight); font-stretch: 100%; font-size: var(--pd-tv-small); color: var(--pd-ink-dim); margin-left: .7cqi; letter-spacing: 0; text-transform: none; }
.w-chips { display: flex; gap: .8cqi; overflow: hidden; min-width: 0; flex-wrap: nowrap; }
.w-chips span { flex: none; padding: .45cqi 1.3cqi; border: .15cqi solid var(--pd-ink-dim); color: var(--pd-ink); font-size: 1.6cqi; white-space: nowrap; border-radius: .3cqi; }
[data-look="b"] .w-chips span { border-radius: 999px; background: var(--pd-tv-raised); border-color: transparent; }

/* ---------- round title ---------- */
/* safe center: when the round title stack is taller than the slot it overflows downward, never up over the wordmark (F-03). */
.r-mid { align-content: safe center; display: grid; gap: 1.8cqi; justify-items: start; }
[data-look="a"] .s-tab.big { margin-top: 1cqi; padding: 1.2cqi 3cqi 1.4cqi; transform: rotate(-2deg); box-shadow: .5cqi .6cqi 0 rgba(0, 0, 0, .38); }
.r-big { margin: 0; font-family: var(--pd-font-display); font-weight: 900; font-stretch: 112%; font-size: 7.2cqi; line-height: 1; letter-spacing: -0.04em; }
.r-title { margin: 0; line-height: 1; }
[data-look="a"] .r-title { font-family: var(--pd-font-display); font-weight: 800; font-stretch: 112%; font-size: 5.6cqi; letter-spacing: -0.03em; max-width: 22ch; }
.r-intro { font-size: 2.4cqi; color: var(--pd-ink-dim); margin: 0; max-width: 46ch; line-height: 1.3; }
[data-look="b"] .r-mid { justify-items: center; text-align: center; }
[data-look="b"] .r-head { display: flex; align-items: center; gap: 4cqi; text-align: left; }
[data-look="b"] .r-kicker { margin: 0 0 .6cqi; font-family: var(--pd-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 3cqi; color: var(--pd-accent); }
[data-look="b"] .r-title { font-family: var(--pd-font-display); font-weight: 900; text-transform: uppercase; font-size: 9cqi; letter-spacing: .005em; line-height: .95; max-width: 14ch; }

/* round icons (sprite in /img/icons/<look>/rounds.svg) */
.s-icon { display: block; flex: none; }
[data-look="a"] .s-tab { display: flex; align-items: center; gap: .9cqi; }
[data-look="a"] .s-tab .s-icon { width: 3.6cqi; height: 3.6cqi; color: var(--pd-on-highlight); --pd-highlight: #FFFFFF; }
.s-coin .s-icon { width: 62%; height: 62%; color: #14141B; }
.r-line { display: flex; align-items: center; gap: 2.4cqi; }
[data-look="a"] .r-icon { width: 6.4cqi; height: 6.4cqi; color: var(--pd-ink); --pd-highlight: var(--pd-tv-accent); }
.pens-mid ~ .s-foot { align-items: center; }

/* ---------- pens down ---------- */
.pens-mid { display: grid; align-content: center; gap: 2.4cqi; min-height: 0; }
.pens-row { display: flex; align-items: center; justify-content: space-between; gap: 3cqi; min-width: 0; }
.pens-label { margin: 0; font-family: var(--pd-font-display); font-weight: var(--pd-display-weight); line-height: 1; white-space: nowrap; }
[data-look="a"] .pens-label { font-stretch: 112%; font-size: 5.8cqi; letter-spacing: -0.03em; }
[data-look="b"] .pens-label { text-transform: uppercase; font-size: 7cqi; letter-spacing: .005em; }
.pens-clock { font-family: var(--pd-font-display); font-weight: 900; font-size: 14cqi; line-height: .82; color: var(--pd-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-look="a"] .pens-clock { font-stretch: 125%; letter-spacing: -0.04em; }
[data-look="b"] .pens-clock { font-size: 16cqi; }
[data-look="b"] .pens-mid .cd-b { justify-content: center; }
/* keep the big bulbs' glow clear of the clock's em box (digits sit on a .82 line box) */
[data-look="b"] .pens-mid .cd-big { margin-top: 2.4cqi; }
.pens-sub { font-size: 2.5cqi; color: var(--pd-ink-dim); margin: 0; align-self: center; max-width: 44ch; }
.is-down .pens-label, .is-down .pens-clock { color: var(--pd-alert); }
.is-down .pens-label { animation: pd-stamp var(--pd-dur-settle) var(--pd-ease-settle) both; }
@keyframes pd-stamp { from { transform: scale(1.1); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- reveal ---------- */
.a-list { --s: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 5), auto); align-content: space-evenly; gap: 0 4.4cqi; height: 100%; }
.a-list li { display: grid; grid-template-columns: 5.4cqi minmax(0, 1fr); align-items: center; border-bottom: .15cqi solid var(--pd-rule); padding: calc(.7cqi * var(--s)) 0; }
.a-list i { font-style: normal; font-family: var(--pd-font-display); font-weight: 900; font-size: calc(3.2cqi * var(--s)); color: var(--pd-accent); font-variant-numeric: tabular-nums; }
[data-look="a"] .a-list i { font-stretch: 125%; }
.a-list b { display: block; font-size: calc(3.4cqi * var(--s)); font-weight: var(--pd-strong-weight); line-height: 1.1; }
.a-list span { display: block; font-size: calc(1.9cqi * var(--s)); color: var(--pd-ink-dim); line-height: 1.22; margin-top: .25cqi; }
.a-link { font-size: 2.6cqi; margin: 0; }
.a-link b { color: var(--pd-accent); font-weight: var(--pd-strong-weight); }

/* ---------- leaderboard ---------- */
.b-list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 6), minmax(0, 1fr)); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 0 4.4cqi; height: 100%; max-height: 100%; }
.b-list li { display: grid; grid-template-columns: 5cqi minmax(0, 1fr) 7cqi auto; align-items: center; gap: 1.6cqi; border-bottom: .15cqi solid var(--pd-rule); min-height: 0; }
.b-list .rk { font-family: var(--pd-font-display); font-weight: 900; font-size: 3cqi; color: var(--pd-ink-dim); font-variant-numeric: tabular-nums; }
.b-list li.top .rk { color: var(--pd-accent); }
.b-list .nm { font-size: 2.7cqi; font-weight: var(--pd-strong-weight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.b-list .nm small { font-size: 1.5cqi; color: var(--pd-ink-dim); font-weight: var(--pd-text-weight); margin-left: 1cqi; }
.b-list .rd { font-size: 1.9cqi; color: var(--pd-ink-dim); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-list .tt { font-family: var(--pd-font-display); font-weight: 900; font-size: 3.8cqi; text-align: right; font-variant-numeric: tabular-nums; }
[data-look="a"] .b-list .tt, [data-look="a"] .b-list .rk { font-stretch: 125%; }
[data-look="a"] .b-list li.top .nm { background: linear-gradient(transparent 58%, rgba(255, 212, 59, .32) 58% 92%, transparent 92%); }
[data-look="b"] .b-list .tt .flaps b { width: 3.4cqi; height: 4.6cqi; font-size: 3.8cqi; border-radius: .4cqi; }
[data-look="b"] .b-list li.top .tt .flaps b { color: var(--pd-accent); }
.b-empty { font-size: 2.6cqi; color: var(--pd-ink-dim); margin: 0; }

/* ---------- podium ---------- */
.po-mid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 2.6cqi; align-items: end; height: 100%; min-height: 0; }
.po-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; min-height: 0; height: 100%; }
.po-cup { width: 8cqi; height: 8cqi; margin: 0 auto 1cqi; fill: none; stroke: var(--pd-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.po-name { font-size: 3cqi; font-weight: var(--pd-strong-weight); line-height: 1.1; margin: 0 0 .6cqi; overflow-wrap: anywhere; }
.po-score { font-size: 2.1cqi; color: var(--pd-ink-dim); margin: 0 0 1.4cqi; font-variant-numeric: tabular-nums; }
.po-block { display: grid; place-items: start center; padding-top: 1.4cqi; font-family: var(--pd-font-display); font-weight: 900; font-size: 7cqi; line-height: 1; transform-origin: bottom; animation: pd-rise var(--pd-dur-settle) var(--pd-ease-out) both; }
@keyframes pd-rise { from { transform: scaleY(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.po-col.p1 .po-block { height: 24cqi; }
.po-col.p2 .po-block { height: 17cqi; }
.po-col.p3 .po-block { height: 12cqi; }
.po-col.p1 .po-name { font-size: 4cqi; color: var(--pd-accent); }
[data-look="a"] .po-block { font-stretch: 125%; letter-spacing: -0.03em; border: .3cqi solid var(--pd-ink); border-bottom: 0; color: var(--pd-ink); }
[data-look="a"] .po-col.p1 .po-block { background: var(--pd-highlight); border-color: var(--pd-highlight); color: var(--pd-on-highlight); text-shadow: none; }
[data-look="b"] .po-block { background: var(--pd-tv-raised); border-top: .5cqi solid var(--pd-violet); border-radius: 1cqi 1cqi 0 0; text-transform: uppercase; font-size: 6.4cqi; }
[data-look="b"] .po-col.p1 .po-block { background: var(--pd-accent); color: var(--pd-on-accent); border-top-color: #FFF3C4; box-shadow: 0 0 5cqi rgba(255, 212, 59, .25); }
[data-look="b"] .po-name { font-family: var(--pd-font-display); font-weight: 900; text-transform: uppercase; font-size: 3.6cqi; letter-spacing: .005em; }
[data-look="b"] .po-col.p1 .po-name { font-size: 4.6cqi; }
[data-look="b"] .po-score { display: flex; align-items: center; justify-content: center; gap: 1cqi; }
[data-look="b"] .po-score .flaps b { width: 4.4cqi; height: 6cqi; font-size: 5cqi; }
[data-look="b"] .po-score span { font-family: var(--pd-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1.8cqi; }
.po-tb { font-size: var(--pd-tv-small); color: var(--pd-ink-dim); margin: 0; }

/* connection notice: pinned, plain words, never colour only */
.conn {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50; margin: 0; padding: 10px 14px; font-size: .95rem; line-height: 1.35;
  font-weight: var(--pd-strong-weight); background: var(--pd-bg-raised); color: var(--pd-ink); border-bottom: var(--pd-rule-heavy) solid var(--pd-alert);
}
.conn[data-conn="info"] { border-bottom-color: var(--pd-accent); }
.conn-big { padding: 1.2vw 2.4vw; font-size: max(1rem, 1.7vw); }

/* =========================================================
   PHONE: one table's answer sheet
   ========================================================= */
.pd-phone { min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.p-head { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: max(12px, env(safe-area-inset-top)) 14px 12px; }
.p-mark { display: block; width: 40px; height: 40px; }
.p-meta { min-width: 0; font-size: .875rem; color: var(--pd-ink-dim); line-height: 1.25; }
.p-meta b { color: var(--pd-ink); }
.p-team { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--pd-font-display); color: var(--pd-ink); line-height: 1.1; }
.p-where { display: block; margin-top: 2px; }
.p-pill {
  margin: 0; max-width: 46vw; padding: 6px 11px; min-height: 32px; display: inline-flex; align-items: center; justify-self: end;
  font-size: .875rem; font-weight: var(--pd-strong-weight); line-height: 1.15; border: 2px solid currentColor; color: var(--pd-ink-dim); text-align: center;
}
.p-pill[data-tone="ok"] { color: var(--pd-accent); }
.p-pill[data-tone="warn"] { color: var(--pd-alert); }
.p-pill[data-tone="lock"] { background: var(--pd-alert); border-color: var(--pd-alert); color: var(--pd-bg); }
.p-main { flex: 1; display: flex; flex-direction: column; padding: 0 12px max(16px, env(safe-area-inset-bottom)); }
.p-note { color: var(--pd-ink-dim); }

/* A header: plain, ruled off */
[data-look="a"] .p-head { border-bottom: var(--pd-rule-weight) solid var(--pd-rule); }
[data-look="a"] .p-team { font-weight: 800; font-stretch: 112%; font-size: 1.25rem; letter-spacing: -0.01em; }
[data-look="a"] .p-mark { border-radius: 4px; }
[data-look="a"] .p-pill { border-radius: var(--pd-radius-tight); background: var(--pd-paper-sheet); }
[data-look="a"] .p-pill[data-tone="lock"] { background: var(--pd-alert); border-color: var(--pd-alert); color: #FFFFFF; }
/* B header: a small marquee plate with six static bulbs along its lower edge */
[data-look="b"] .p-head { margin: 0 8px; padding-bottom: 22px; background: var(--pd-bg-raised); border-radius: 0 0 14px 14px; box-shadow: 0 4px 0 var(--pd-shadow); }
[data-look="b"] .p-head::after {
  content: ''; position: absolute; left: 24px; right: 24px; bottom: 7px; height: 8px;
  background: radial-gradient(circle, #FFF3C4 0 1.5px, var(--pd-accent) 2.5px 3.5px, transparent 4px) 0 0 / calc(100% / 6) 8px repeat-x;
}
[data-look="b"] .p-team { font-weight: 800; text-transform: uppercase; font-size: 1.4rem; letter-spacing: .01em; }
[data-look="b"] .p-pill { border-radius: 999px; background: var(--pd-bg); }
[data-look="b"] .p-pill[data-tone="ok"] { color: var(--pd-accent); }
[data-look="b"] .p-pill[data-tone="lock"] { color: var(--pd-bg); background: var(--pd-alert); }

/* cards: join, waiting, tiebreak, final */
.p-card { padding: 24px 4px 8px; }
.p-card h1 { font-size: var(--pd-step-4); margin: 8px 0 12px; }
[data-look="a"] .p-card h1 { font-size: 2.4rem; letter-spacing: -0.02em; }
[data-look="b"] .p-card h1 { font-size: 3rem; }
.p-card p { margin: 0 0 14px; font-size: 1.06rem; }
.p-card .lead { color: var(--pd-ink-dim); }
.field { display: grid; gap: 6px; margin: 0 0 16px; }
.field label { font-weight: var(--pd-strong-weight); font-size: 1rem; }
.field small { color: var(--pd-ink-dim); font-size: .9rem; }
/* t904: second phone / reset page, the team code, the typed quiz code */
.p-rejoin { margin: 22px 0 0; border-top: var(--pd-rule-weight) solid var(--pd-rule); padding-top: 14px; }
.p-rejoin summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: var(--pd-strong-weight); font-size: 1rem; color: var(--pd-ink); }
.p-rejoin summary:focus-visible { outline: 3px solid var(--pd-focus); outline-offset: 2px; }
.p-rejoin form { margin-top: 10px; }
.p-teamcode { margin: 14px 0 0; font-size: 1rem; }
.p-teamcode b { color: var(--pd-ink); letter-spacing: .08em; }
.p-code-in { font-size: 1.6rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; max-width: 9ch; }
.field input {
  width: 100%; min-height: 56px; padding: 12px 14px; font-size: 1.125rem; background: var(--pd-paper-sheet); color: var(--pd-ink);
  border: 2px solid var(--pd-ink-dim); border-radius: var(--pd-radius-control); appearance: none;
}
[data-look="b"] .field input { background: var(--pd-bg-raised); border-color: var(--pd-rule); }
.field input:focus-visible, .p-input:focus-visible { outline: 3px solid var(--pd-focus); outline-offset: 2px; }
.field input::placeholder, .p-input::placeholder { color: var(--pd-ink-dim); opacity: 1; }
/* t904 F-02: an example code must not read as a code already typed in */
.field .p-code-in::placeholder { color: var(--pd-ink-dim); opacity: .4; }
.err { color: var(--pd-alert); font-weight: var(--pd-strong-weight); margin: 0 0 12px; }

/* the sheet */
.p-sheet { position: relative; display: grid; margin-top: 12px; }
[data-look="a"] .p-sheet {
  background: var(--pd-paper-sheet); border: 1px solid var(--pd-rule); padding: 0 0 10px;
  background-image: linear-gradient(90deg, transparent 47px, rgba(196, 41, 31, .38) 47px 48px, transparent 48px);
}
.p-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0 10px; }
[data-look="a"] .p-title { padding: 16px 14px 12px 60px; border-bottom: 2px solid var(--pd-a-ruled); }
.p-title .display { font-size: 1.9rem; margin: 0; }
[data-look="a"] .p-title .display { font-stretch: 112%; letter-spacing: -0.02em; }
[data-look="b"] .p-title .display { font-size: 2.2rem; }
.p-title .sub { display: block; color: var(--pd-ink-dim); font-size: .95rem; margin-top: 4px; }
.p-clock { text-align: right; color: var(--pd-ink-dim); font-size: .85rem; line-height: 1.15; flex: none; }
.p-clock strong { display: block; font-family: var(--pd-font-display); font-size: 2rem; font-weight: 900; color: var(--pd-ink); font-variant-numeric: tabular-nums; line-height: 1; }
[data-look="a"] .p-clock strong { font-stretch: 125%; letter-spacing: -0.03em; }
[data-look="b"] .p-clock strong { color: var(--pd-accent); font-size: 2.2rem; }
.p-clock.hot strong { color: var(--pd-alert); }
.p-banner { margin: 6px 0 12px; padding: 12px 14px; background: var(--pd-bg-raised); border-left: var(--pd-rule-heavy) solid var(--pd-alert); font-weight: var(--pd-strong-weight); }
[data-look="a"] .p-sheet .p-banner { margin: 10px 12px 10px 56px; }
[data-look="b"] .p-banner { border-radius: var(--pd-radius-tight); }
.p-banner.ok { border-left-color: var(--pd-accent); }

.p-rows { list-style: none; margin: 0; padding: 0; }
.p-rows li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 8px; align-items: center; min-height: 56px; }
.p-rows .n { font-family: var(--pd-font-display); font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.p-rows .qt { grid-column: 2; font-size: .95rem; color: var(--pd-ink-dim); line-height: 1.3; padding-top: 8px; }
.p-rows .p-thumb { grid-column: 2; max-height: 220px; max-width: 100%; width: auto; height: auto; justify-self: start; margin-top: 6px; }
.p-input {
  grid-column: 2; width: 100%; min-height: 48px; padding: 8px 6px; font-size: 1.125rem; line-height: 1.3; appearance: none;
  background: transparent; border: 0; border-radius: var(--pd-radius-tight); color: var(--pd-ink);
}
.p-rows .val { grid-column: 2; font-size: 1.125rem; font-weight: var(--pd-strong-weight); min-height: 28px; overflow-wrap: anywhere; padding-top: 6px; }
.p-rows .val.empty { color: var(--pd-ink-dim); font-weight: var(--pd-text-weight); }
.res { grid-column: 2; font-size: .95rem; color: var(--pd-ink-dim); padding-bottom: 6px; }
.p-rows.revealed li { grid-template-columns: 48px minmax(0, 1fr) auto; }
.p-rows.revealed .mark { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin-right: 12px; }
.mark { display: inline-grid; place-items: center; min-width: 40px; height: 34px; padding: 0 8px; font-weight: 800; font-size: 1rem; border-radius: var(--pd-radius-tight); }
.mark.yes { background: var(--pd-accent); color: var(--pd-on-accent); }
.mark.no { background: transparent; color: var(--pd-alert); box-shadow: inset 0 0 0 2px var(--pd-alert); }
.p-link { margin-top: 12px; }

/* A rows: blue ruled lines, numeral in the margin, answers in biro blue, current row highlighted */
[data-look="a"] .p-rows li { border-bottom: 1px solid var(--pd-a-ruled); padding: 2px 12px 2px 0; }
[data-look="a"] .p-rows .n { font-stretch: 112%; font-size: 1.15rem; color: var(--pd-ink-dim); }
[data-look="a"] .p-rows li.on { background: color-mix(in srgb, var(--pd-highlight) 55%, var(--pd-paper-sheet)); }
[data-look="a"] .p-rows li.on .n { color: var(--pd-ink); }
[data-look="a"] .p-input { color: var(--pd-accent); font-weight: 500; }
[data-look="a"] .p-input[readonly] { color: var(--pd-accent); }
[data-look="a"] .p-input::placeholder { color: var(--pd-ink-dim); font-weight: var(--pd-text-weight); }
[data-look="a"] .p-rows .val { color: var(--pd-accent); }
[data-look="a"] .p-rows .val.empty { color: var(--pd-ink-dim); }
[data-look="a"] .p-sheet > .field.p-link { margin: 12px 12px 4px 56px; }
[data-look="a"] .p-link .p-input { border-bottom: 1px solid var(--pd-a-ruled); }
[data-look="a"] .p-score { padding: 14px 14px 8px 60px; }

/* B rows: raised cards with an amber number coin; current row outlined in amber */
[data-look="b"] .p-rows li { margin: 0 0 8px; padding: 6px 12px 6px 4px; background: var(--pd-bg-raised); border: 3px solid transparent; border-radius: var(--pd-radius-control); }
[data-look="b"] .p-rows .n { justify-self: center; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pd-accent); color: var(--pd-on-accent); font-weight: 900; font-size: 1.15rem; }
[data-look="b"] .p-rows li.on { border-color: var(--pd-accent); }
[data-look="b"] .p-input { color: var(--pd-ink); font-weight: 500; font-stretch: 100%; }
[data-look="b"] .p-sheet.is-locked .p-rows li { background: color-mix(in srgb, var(--pd-bg-raised) 70%, var(--pd-bg)); }
[data-look="b"] .p-sheet.is-locked .p-input, [data-look="b"] .p-sheet.is-locked .p-rows .n { color: var(--pd-ink-dim); }
[data-look="b"] .p-sheet.is-locked .p-rows .n { background: transparent; box-shadow: inset 0 0 0 2px var(--pd-ink-dim); }
[data-look="b"] .p-link .p-input { background: var(--pd-bg-raised); border-radius: var(--pd-radius-control); padding: 10px 12px; }

/* the lock: A a rubber stamp, B an alert plate */
.p-stamp { margin: 0; font-family: var(--pd-font-display); text-transform: uppercase; color: var(--pd-alert); }
.p-stamp b { font-weight: 900; }
[data-look="a"] .p-stamp {
  justify-self: end; display: grid; justify-items: center; gap: 2px; margin: 12px 18px 6px 0; padding: 8px 14px 7px;
  border: 3px solid var(--pd-alert); outline: 1.5px solid var(--pd-alert); outline-offset: 3px; border-radius: 3px;
  font-weight: 900; font-stretch: 112%; font-size: 1.15rem; letter-spacing: .08em; line-height: 1; transform: rotate(-8deg);
  background: var(--pd-paper-sheet);
}
[data-look="a"] .p-stamp b { font-size: 1rem; letter-spacing: .04em; }
[data-look="a"] .p-stamp.in { animation: pd-stamp-a 220ms var(--pd-ease-out) both; }
@keyframes pd-stamp-a { from { opacity: 0; transform: rotate(-8deg) scale(1.15); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
[data-look="b"] .p-stamp {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 2px 0 12px; padding: 14px 18px;
  background: var(--pd-alert); color: var(--pd-bg); border-radius: var(--pd-radius-control); box-shadow: 0 5px 0 var(--pd-shadow);
  font-weight: 900; font-size: 1.6rem; letter-spacing: .01em; line-height: 1;
}
[data-look="b"] .p-stamp.in { animation: pd-fade 200ms linear both; }
@keyframes pd-fade { from { opacity: 0; } to { opacity: 1; } }

.p-bar { position: sticky; bottom: 0; z-index: 4; margin: 14px -12px 0; padding: 12px 12px max(14px, env(safe-area-inset-bottom)); display: grid; gap: 8px; }
[data-look="a"] .p-bar { background: var(--pd-bg); border-top: 1px solid var(--pd-rule); }
[data-look="b"] .p-bar { background: linear-gradient(to bottom, rgba(20, 20, 27, 0), var(--pd-bg) 22px); padding-top: 22px; }
.p-save:empty { display: none; }
.p-save { font-size: .9rem; color: var(--pd-ink-dim); text-align: center; min-height: 1.3em; margin: 0; }
.btn-lock { min-height: 56px; }
[data-look="a"] .btn-lock { font-size: 1.15rem; }
[data-look="b"] .btn-lock { min-height: 60px; box-shadow: 0 6px 0 var(--pd-shadow); font-size: 1.5rem; }
[data-look="b"] .btn-lock:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--pd-shadow); }
.btn-lock.armed { background: var(--pd-alert); border-color: var(--pd-alert); color: var(--pd-bg); }
.p-score { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0 8px; }
.p-score strong { font-family: var(--pd-font-display); font-weight: 900; font-size: 3rem; line-height: 1; color: var(--pd-accent); font-variant-numeric: tabular-nums; }
.p-standing { color: var(--pd-ink-dim); text-align: right; }
.p-standing b { color: var(--pd-ink); display: block; font-size: 1.3rem; }
.p-pod { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.p-pod li { display: flex; justify-content: space-between; gap: 12px; padding: 14px; background: var(--pd-bg-raised); font-weight: var(--pd-strong-weight); border-radius: var(--pd-radius-control); }
.p-pod li.me { box-shadow: inset 0 0 0 3px var(--pd-accent); }

/* =========================================================
   HOST CONSOLE: functional, legible, few frames
   ========================================================= */
.pd-host { font-size: 1rem; }
.h-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: var(--pd-rule-weight) solid var(--pd-rule); position: sticky; top: 0; background: var(--pd-bg); z-index: 5; }
.h-head .wordmark { height: 26px; width: auto; display: block; }
.h-code { display: flex; align-items: baseline; gap: 10px; color: var(--pd-ink-dim); font-size: .95rem; }
.h-code strong { font-family: var(--pd-font-display); font-size: 2rem; color: var(--pd-ink); font-weight: 900; letter-spacing: .04em; font-variant-numeric: tabular-nums; line-height: 1; }
[data-look="a"] .h-code strong { background: var(--pd-highlight); color: var(--pd-on-highlight); padding: 2px 10px; font-stretch: 112%; }
[data-look="b"] .h-code strong { color: var(--pd-accent); }
.h-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 1400px; margin: 0 auto; }
@media (min-width: 1000px) { .h-main { grid-template-columns: minmax(380px, 440px) minmax(0, 1fr); align-items: start; } .h-side { position: sticky; top: 63px; max-height: calc(100vh - 63px); overflow: auto; } }
.h-side, .h-work { padding: 20px 20px 40px; }
/* On a phone the host marks between rounds: controls first, then scores and marking, jump list last. */
@media (max-width: 999.98px) {
  .h-main { display: flex; flex-direction: column; padding: 16px 16px 40px; }
  .h-side, .h-work { display: contents; }
  .h-sec-now { order: 1; }
  .h-work > .h-sec { order: 2; }
  .h-sec-slides { order: 3; }
}
[data-look="a"] .h-side { border-right: var(--pd-rule-weight) solid var(--pd-rule); }
.h-sec { margin: 0 0 30px; }
.h-sec > h2 { font-family: var(--pd-font-display); font-weight: var(--pd-display-weight); font-stretch: var(--pd-display-stretch); text-transform: var(--pd-display-case); font-size: 1.5rem; margin: 0 0 12px; line-height: 1; letter-spacing: var(--pd-display-tracking); }
[data-look="b"] .h-sec > h2 { font-size: 1.7rem; }
.h-now { background: var(--pd-bg-raised); padding: 16px; border-radius: var(--pd-radius-control); }
.h-now .where { display: flex; justify-content: space-between; gap: 10px; color: var(--pd-ink-dim); font-size: .95rem; }
.h-now .where b { color: var(--pd-ink); font-size: 1.1rem; }
.h-script { margin: 10px 0 0; padding: 0; list-style: none; }
.h-script li { font-size: 1.15rem; line-height: 1.45; margin: 0 0 8px; }
.h-key { margin: 10px 0 0; padding: 10px 12px; border-left: var(--pd-rule-heavy) solid var(--pd-accent); background: var(--pd-bg); }
.h-key b { color: var(--pd-ink); }
[data-look="a"] .h-key b { background: linear-gradient(transparent 55%, rgba(255, 212, 59, .7) 55%); }
[data-look="b"] .h-key b { color: var(--pd-accent); }
.h-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.h-ctl { display: grid; gap: 12px; margin-top: 14px; }
.h-ctl .where { font-weight: var(--pd-strong-weight); }
.h-cd { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: stretch; }
.h-cd input, .h-in { min-height: 48px; padding: 8px 10px; background: var(--pd-paper-sheet); color: var(--pd-ink); border: 2px solid var(--pd-ink-dim); border-radius: var(--pd-radius-tight); font-size: 1.05rem; width: 100%; }
[data-look="b"] .h-cd input, [data-look="b"] .h-in { background: var(--pd-bg); border-color: var(--pd-rule); }
.h-in:focus-visible, .h-cd input:focus-visible { outline: 3px solid var(--pd-focus); outline-offset: 2px; }
.h-status { display: inline-block; padding: 3px 10px; font-size: .875rem; font-weight: 800; border: 2px solid var(--pd-ink-dim); color: var(--pd-ink); border-radius: var(--pd-radius-tight); font-variant-numeric: tabular-nums; }
.h-status.countdown { border-color: var(--pd-accent); color: var(--pd-accent); }
.h-status.locked { border-color: var(--pd-alert); color: var(--pd-alert); }
.h-status.revealed { background: var(--pd-accent); border-color: var(--pd-accent); color: var(--pd-on-accent); }
.h-links { display: grid; gap: 8px; font-size: .95rem; margin-top: 14px; overflow-wrap: anywhere; color: var(--pd-ink-dim); }
.h-links b { color: var(--pd-ink); }
.h-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.h-tabs button { min-height: 44px; min-width: 60px; padding: 6px 14px; background: transparent; border: 2px solid var(--pd-rule); color: var(--pd-ink); border-radius: var(--pd-radius-control); font-weight: var(--pd-strong-weight); cursor: pointer; }
.h-tabs button[aria-pressed="true"] { background: var(--pd-accent); color: var(--pd-on-accent); border-color: var(--pd-accent); }
.h-q { padding: 14px 0; border-bottom: 1px solid var(--pd-rule); }
.h-q header { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 10px; }
.h-q header i { font-style: normal; font-family: var(--pd-font-display); font-weight: 900; font-size: 1.4rem; color: var(--pd-ink-dim); }
.h-q header p { margin: 0; color: var(--pd-ink-dim); font-size: .95rem; }
.h-q header p.ans { color: var(--pd-ink); font-size: 1.05rem; }
.h-q header p.ans b { color: var(--pd-ink); }
[data-look="b"] .h-q header p.ans b { color: var(--pd-accent); }
.h-marks { list-style: none; padding: 0; margin: 10px 0 0 46px; display: grid; gap: 6px; max-width: 760px; }
.h-marks li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.h-marks .tm { color: var(--pd-ink-dim); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-marks .tx { font-weight: var(--pd-strong-weight); overflow-wrap: anywhere; }
[data-look="a"] .h-marks .tx { color: var(--pd-accent); }
.h-marks .tx.blank { color: var(--pd-ink-dim); font-weight: var(--pd-text-weight); }
.mk { min-height: 44px; min-width: 112px; padding: 6px 12px; border-radius: var(--pd-radius-control); font-weight: 800; font-size: .95rem; cursor: pointer; border: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mk.yes { background: var(--pd-accent); color: var(--pd-on-accent); }
.mk.no { background: transparent; color: var(--pd-alert); border-color: var(--pd-alert); }
.mk.blank { color: var(--pd-ink-dim); border-color: var(--pd-rule); }
.mk.check { box-shadow: 0 0 0 3px var(--pd-bg), 0 0 0 5px var(--pd-alert); }
.mk small { font-weight: 700; font-size: .78rem; }
.h-flag { color: var(--pd-alert); font-weight: 800; font-size: .875rem; }
.h-scroll-hint { display: none; margin: 0 0 6px; color: var(--pd-ink-dim); font-size: .95rem; }
.h-board-wrap { overflow-x: auto; max-width: 100%; }
.h-board th:nth-child(3), .h-board td:nth-child(3) { padding-right: 12px; }
@media (max-width: 720px) {
  .h-scroll-hint { display: block; }
  .h-board { width: max-content; min-width: 100%; }
  .h-board th:nth-child(2), .h-board td:nth-child(2) { min-width: 120px; }
}
.h-board { width: 100%; max-width: 900px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.h-board th, .h-board td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--pd-rule); vertical-align: middle; }
.h-board th { color: var(--pd-ink-dim); font-size: .875rem; font-weight: var(--pd-strong-weight); }
.h-board td.n { text-align: right; }
.h-board td b { font-size: 1.15rem; }
.h-board .h-in { min-height: 44px; width: 60px; padding: 6px 8px; text-align: right; }
.h-board .kind { color: var(--pd-ink-dim); font-size: .85rem; display: block; }
.h-add { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto; gap: 10px; margin-top: 14px; max-width: 640px; }
@media (max-width: 600px) { .h-add { grid-template-columns: minmax(0, 1fr) 84px; } .h-add .btn { grid-column: 1 / -1; } }
.h-slides { display: grid; gap: 4px; }
.h-slides details { border-bottom: 1px solid var(--pd-rule); }
.h-slides summary { cursor: pointer; padding: 11px 0; font-weight: var(--pd-strong-weight); min-height: 44px; }
.h-slides .list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; }
.h-slides button { min-height: 44px; min-width: 52px; padding: 4px 12px; background: transparent; border: 2px solid var(--pd-rule); color: var(--pd-ink); border-radius: var(--pd-radius-control); cursor: pointer; font-weight: var(--pd-strong-weight); }
.h-slides button[aria-current="true"] { background: var(--pd-accent); border-color: var(--pd-accent); color: var(--pd-on-accent); }
.h-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--pd-alert); color: var(--pd-bg); padding: 12px 18px; font-weight: 800; z-index: 9; border-radius: var(--pd-radius-tight); }

/* =========================================================
   DEMO: a playable taster round on one device, in the TV and phone grammar
   ========================================================= */
.pd-demo { min-height: 100dvh; display: flex; flex-direction: column; }
.d-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: max(14px, env(safe-area-inset-top)) clamp(16px, 4vw, 48px) 12px; }
.d-head .wordmark { height: 30px; width: auto; display: block; }
[data-look="b"] .d-head .wordmark { height: 40px; }
.d-home { display: inline-flex; min-height: 44px; align-items: center; }
.d-skip { color: var(--pd-ink); font-weight: var(--pd-strong-weight); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
.d-skip:hover { text-decoration: underline; }
.d-main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 40px; display: flex; flex-direction: column; }

.d-intro-wrap { display: grid; gap: 32px; padding: clamp(12px, 5vh, 64px) 0 24px; align-items: center; }
@media (min-width: 960px) { .d-intro-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; } }
.d-intro-wrap.leave { animation: pd-out var(--pd-dur-quick) var(--pd-ease-out) both; }
@keyframes pd-out { to { opacity: 0; transform: translateY(-8px); } }
.d-intro { max-width: 640px; }
.d-title { font-size: var(--pd-step-5); margin: 12px 0 20px; line-height: .95; }
[data-look="a"] .d-title { letter-spacing: var(--pd-display-tracking-big); line-height: 1.04; }
.d-title .hl { color: var(--pd-ink); }
[data-look="a"] .d-title .hl { background: linear-gradient(transparent 52%, var(--pd-highlight) 52% 94%, transparent 94%); padding: 0 .06em; }
[data-look="b"] .d-title .hl { color: var(--pd-accent); }
.d-lede { font-size: clamp(1.06rem, 2vw, 1.25rem); max-width: 40ch; margin: 0 0 26px; }
.d-fine { color: var(--pd-ink-dim); margin: 14px 0 0; font-size: .95rem; }
.d-intro .btn { min-width: 240px; }
.d-teaser { margin: 0; pointer-events: none; }
.d-teaser .d-tv { aspect-ratio: 16 / 9; border-radius: var(--pd-radius-tight); }
.d-teaser .slide { position: absolute; inset: 0; }
.d-teaser-cap { margin: 12px 0 0; color: var(--pd-ink-dim); font-size: .95rem; }

.d-play { display: grid; gap: 18px; padding-top: 6px; animation: pd-slide-in var(--pd-dur-settle) var(--pd-ease-out) both; }
@media (min-width: 960px) { .d-play { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 28px; margin-block: auto; padding-bottom: 40px; } }

/* the TV, as the venue screen would show it */
[data-look="b"] .d-tv { border-radius: var(--pd-radius-tight); }
.d-play .d-tv .slide { position: relative; inset: auto; min-height: 0; }
@media (min-width: 960px) { .d-play .d-tv .slide { aspect-ratio: 16 / 9; } }
@media (max-width: 959.98px) {
  .d-play .d-tv .slide { padding: 6cqi 6cqi 5cqi; gap: 4cqi; }
  .d-play .d-tv .s-q { font-size: clamp(1.3rem, 7cqi, 2.2rem); max-width: none; }
  .d-play .d-tv .s-round { font-size: 5.4cqi; }
  .d-play .d-tv .s-cat { font-size: 4.4cqi; }
  [data-look="b"] .d-play .d-tv .s-cat { font-size: 6cqi; }
  .d-play .d-tv .s-num { font-size: 15cqi; }
  .d-play .d-tv .s-num small { font-size: 4cqi; }
  .d-play .d-tv .s-mid { min-height: 34cqi; }
  [data-look="b"] .d-play .d-tv .s-card { padding: 6cqi 6cqi; }
  .d-play .d-tv .s-coin { width: 13cqi; height: 13cqi; }
  .d-play .d-tv .s-coin b { font-size: 7.4cqi; }
  .d-play .d-tv .flaps b { width: 9cqi; height: 12.6cqi; font-size: 10.6cqi; }
  .d-play .d-tv .s-foot { grid-template-columns: 1fr; }
  .d-play .d-tv .ladder b { width: 7.6cqi; height: 7.6cqi; font-size: 3.6cqi; }
  .d-play .d-tv .cd-a .pencil { --pw: 66cqi; --ph: 5cqi; --bw: calc(var(--pw) - 15cqi); }
  .d-play .d-tv .cd-a .p-eraser { width: 4cqi; }
  .d-play .d-tv .cd-a .p-ferrule { width: 3.6cqi; }
  .d-play .d-tv .cd-a .p-cone { width: 7.4cqi; }
  .d-play .d-tv .cd-t { font-size: 8cqi; }
  .d-play .d-tv .cd-b .bulbs { gap: 2.2cqi; }
  .d-play .d-tv .cd-b .bulbs i { width: 5.4cqi; height: 5.4cqi; }
  .d-play .d-tv .cd-b { justify-content: space-between; }
}
.d-tv .q-swap { animation: pd-slide-in var(--pd-dur-settle) var(--pd-ease-out) both; }
.d-tv .s-run { gap: 2.4cqi; }

.d-stamp { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--pd-tv-bg) 82%, transparent); z-index: 2; }
.d-stamp p { margin: 0; font-family: var(--pd-font-display); font-weight: 900; font-size: clamp(2.6rem, 15cqi, 11cqi); color: var(--pd-alert); line-height: .9; text-align: center; animation: pd-stamp var(--pd-dur-settle) var(--pd-ease-settle) both; }
[data-look="a"] .d-stamp p { font-stretch: 112%; letter-spacing: -0.04em; padding: .1em .3em; border: .6cqi solid var(--pd-alert); transform: rotate(-6deg); }
[data-look="b"] .d-stamp p { text-transform: uppercase; }
.d-score { display: grid; gap: 6px; align-content: center; }
.d-score .big { font-family: var(--pd-font-display); font-weight: 900; font-size: clamp(4rem, 24cqi, 17cqi); line-height: .85; color: var(--pd-accent); font-variant-numeric: tabular-nums; margin: 0; }
[data-look="a"] .d-score .big { font-stretch: 125%; letter-spacing: -0.04em; }
.d-score .big span { color: var(--pd-ink-dim); font-size: .45em; }
.d-score .line { font-size: clamp(1.15rem, 4.6cqi, 3.2cqi); font-weight: var(--pd-strong-weight); margin: 0; max-width: 28ch; }

/* the phone beside it: the same answer sheet as the live phone */
.d-sheet { display: grid; gap: 12px; padding: 16px; }
[data-look="a"] .d-sheet { background: var(--pd-paper-sheet); border: 1px solid var(--pd-rule); background-image: linear-gradient(90deg, transparent 47px, rgba(196, 41, 31, .38) 47px 48px, transparent 48px); padding: 0 0 12px; }
[data-look="b"] .d-sheet { background: var(--pd-bg-raised); border-radius: var(--pd-radius-control); box-shadow: 0 5px 0 var(--pd-shadow); }
.d-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
[data-look="a"] .d-sheet-head { padding: 14px 14px 12px 60px; border-bottom: 2px solid var(--pd-a-ruled); }
.d-sheet-head .display { font-size: 1.7rem; margin: 0; }
[data-look="b"] .d-sheet-head .display { font-size: 2rem; }
.d-clock { font-family: var(--pd-font-display); font-weight: 900; font-size: 2rem; color: var(--pd-ink); font-variant-numeric: tabular-nums; line-height: 1; }
[data-look="a"] .d-clock { font-stretch: 125%; letter-spacing: -0.03em; }
[data-look="b"] .d-clock { color: var(--pd-accent); }
.d-clock.hot { color: var(--pd-alert); }
.d-answer { display: grid; gap: 8px; }
[data-look="a"] .d-answer { padding: 0 14px 0 60px; }
.d-answer label { font-weight: var(--pd-strong-weight); }
.d-answer .p-input { grid-column: 1 / -1; min-height: 56px; padding: 10px 12px; }
[data-look="a"] .d-answer .p-input { background: color-mix(in srgb, var(--pd-highlight) 55%, var(--pd-paper-sheet)); color: var(--pd-accent); }
[data-look="b"] .d-answer .p-input { background: var(--pd-bg); border-radius: var(--pd-radius-control); }
.d-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; }
[data-look="b"] .d-actions { margin-bottom: 6px; }
.d-rows { list-style: none; margin: 0; padding: 0; }
.d-rows li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 52px; padding: 4px 12px 4px 0; }
[data-look="a"] .d-rows li { border-top: 1px solid var(--pd-a-ruled); }
[data-look="b"] .d-rows li { margin-top: 6px; background: var(--pd-bg); border-radius: var(--pd-radius-control); border: 3px solid transparent; }
.d-rows li > button { all: unset; display: contents; cursor: pointer; }
.d-rows li > button:focus-visible + * { outline: none; }
.d-rows li:has(> button:focus-visible) { outline: 3px solid var(--pd-focus); outline-offset: 2px; }
.d-rows .n { font-family: var(--pd-font-display); font-weight: 800; font-size: 1.15rem; color: var(--pd-ink-dim); text-align: center; font-variant-numeric: tabular-nums; }
[data-look="b"] .d-rows .n { justify-self: center; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pd-accent); color: var(--pd-on-accent); font-weight: 900; }
[data-look="a"] .d-rows li.on { background: color-mix(in srgb, var(--pd-highlight) 55%, var(--pd-paper-sheet)); }
[data-look="a"] .d-rows li.on .n { color: var(--pd-ink); }
[data-look="b"] .d-rows li.on { border-color: var(--pd-accent); }
.d-rows .t { overflow-wrap: anywhere; font-weight: var(--pd-strong-weight); }
[data-look="a"] .d-rows .t { color: var(--pd-accent); }
.d-rows .t.empty { color: var(--pd-ink-dim); font-weight: var(--pd-text-weight); }
.d-rows .t small { display: block; color: var(--pd-ink-dim); font-weight: var(--pd-text-weight); font-size: .9rem; margin-top: 2px; }
.chip { font-size: .875rem; font-weight: 800; padding: 4px 10px; border-radius: var(--pd-radius-control); white-space: nowrap; }
.chip.yes { background: var(--pd-accent); color: var(--pd-on-accent); }
.chip.close { background: transparent; color: var(--pd-ink); box-shadow: inset 0 0 0 2px var(--pd-accent); }
.chip.no { background: var(--pd-alert); color: var(--pd-bg); }
.d-cta { display: grid; gap: 14px; padding: 24px 0 0; }
.d-cta h2 { font-size: var(--pd-step-4); margin: 0; }
.d-cta p { margin: 0; max-width: 60ch; font-size: 1.05rem; }
.d-cta .note { color: var(--pd-ink-dim); font-size: .95rem; }
.d-cta .btns { display: flex; flex-wrap: wrap; gap: 12px; }
.d-cta .btns .btn { min-width: 200px; }
@media (max-width: 480px) { .d-cta .btns .btn { flex: 1 1 100%; } }

/* message page */
.pd-message .m-main { max-width: 560px; margin: 0 auto; padding: 48px 20px; }
.pd-message .wordmark { height: 32px; width: auto; }
.pd-message h1 { font-size: var(--pd-step-4); margin: 28px 0 10px; }

/* ---------- reduced motion: final states; the countdown stays, in per-second steps ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
  .slide.enter, .po-block, .d-play, .q-swap, .d-stamp p, .is-down .pens-label, .p-stamp.in, .d-intro-wrap.leave { animation: none !important; }
  .cd-a.run .p-body, .cd-a.run .p-cone { animation: none !important; }
}

/* Reveal: answers are the whole slide. Joining is over by now, so the join code steps aside and the
   list gets the footer's height back (fitList no longer has to shrink it to unreadable sizes). */
.slide-reveal .s-foot .s-code { display: none; }
.slide-reveal .s-foot:not(:has(.a-link)) { display: none; }
.slide-reveal:has(.s-foot:not(:has(.a-link))) { grid-template-rows: auto minmax(0, 1fr); }