/* ═══════════════════════════════════════════════════════════════════════════
   patriot.plus LIVE — the phone controller.

   Everything a member's handset draws that is NOT a round body: the score
   strip, the ready gate, the full-bleed takeovers (countdown, buzzer,
   reaction), the drawing stage, and the reusable primitives in controller.js.

   Written mobile-first for 360x640 upward, in the `body.paper` register from
   live.css (white, Courier Prime, 2px black rules, Win95 bevels, yellow on
   press). Nothing here edits live.css; every rule is additive.

   House rules for anything a thumb touches:
     min 48px short side · touch-action: manipulation · user-select: none ·
     no hover-only affordance · never wider than the viewport.
   ═══════════════════════════════════════════════════════════════════════════ */

.paper .ctl-big, .paper .ctl-cell, .paper .ctl-ab-side, .paper .ctl-dp, .paper .ctl-buzz,
.paper .ctl-padkey, .paper .ctl-submit, .paper .ctl-chip, .paper .ctl-step, .paper .ctl-tool,
.paper .ctl-swatch, .paper .ctl-tap, .paper .ctl-rank-row, .paper .ctl-range, .ctl-takeover {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.ctl-canvas-box { touch-action: none; }          /* the pad owns the finger */

/* ───────────────────────── shared bits ───────────────────────── */
.paper .ctl-label { font: 700 .68rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.paper .ctl-note { font: .76rem/1.4 var(--mono); color: var(--ink-2); margin-top: 8px; letter-spacing: .04em; }
.paper .ctl-readout { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 10px 6px 12px; }
.paper .ctl-readout-v { font-family: var(--head); font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(3rem, 20vw, 5.4rem); line-height: .9; }
.paper .ctl-readout-u { font: 700 .82rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.paper .ctl-scale { display: flex; justify-content: space-between; font: .72rem var(--mono); color: var(--ink-2); margin-top: 6px; letter-spacing: .08em; }
.paper .ctl-submit { width: 100%; min-height: 56px; margin-top: 12px; font: 700 .95rem var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: #fff; border: var(--bevel); border-color: #555 #000 #000 #555; box-shadow: 3px 3px 0 #000; cursor: pointer; }
.paper .ctl-submit.tight { width: auto; margin: 0; min-height: 48px; padding: 0 18px; }
.paper .ctl-submit:disabled { opacity: .35; }
.paper .ctl-submit.is-down, .paper .ctl-submit:active { background: var(--orange-ink); box-shadow: none; transform: translate(2px, 2px); }

/* ───────────────────────── bigButton ───────────────────────── */
.paper .ctl-big { display: grid; place-content: center; gap: 6px; width: 100%; min-height: 168px; padding: 18px;
  border: 3px solid var(--ink); background: var(--yellow); color: var(--ink); box-shadow: 6px 6px 0 #000; cursor: pointer; text-align: center; }
.paper .ctl-big-label { font-family: var(--head); font-weight: 700; font-size: clamp(2.2rem, 13vw, 3.6rem); line-height: .95; text-transform: uppercase; letter-spacing: .02em; }
.paper .ctl-big-sub { font: 700 .74rem var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .72; }
.paper .ctl-big.tone-primary { background: var(--ink); color: #fff; }
.paper .ctl-big.tone-gold { background: var(--gold); }
.paper .ctl-big.tone-good { background: #d8f3e1; }
.paper .ctl-big.tone-danger { background: #ffd9d2; }
.paper .ctl-big.is-down, .paper .ctl-big:active { box-shadow: 0 0 0 #000; transform: translate(4px, 4px); }
.paper .ctl-big:disabled { background: var(--grey); color: #8a8a8a; box-shadow: 3px 3px 0 #bbb; border-color: #8a8a8a; transform: none; }

/* ───────────────────────── choiceGrid ───────────────────────── */
.paper .ctl-grid { display: grid; gap: 10px; }
.paper .ctl-grid.cols-1 { grid-template-columns: 1fr; }
.paper .ctl-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.paper .ctl-cell { display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 12px; text-align: left;
  border: 2px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 #000; cursor: pointer; }
.paper .ctl-grid.cols-1 .ctl-cell { min-height: 92px; }
.paper .ctl-grid.tall .ctl-cell { min-height: 110px; }
.paper .ctl-key { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--ink);
  font-family: var(--head); font-weight: 700; font-size: 1.1rem; background: #fff; }
.paper .ctl-cell-text { font: 700 .98rem/1.25 var(--mono); letter-spacing: .02em; min-width: 0; overflow-wrap: anywhere; }
.paper .ctl-cell.on { background: var(--yellow); }
.paper .ctl-cell.on .ctl-key { background: var(--ink); color: #fff; }
.paper .ctl-cell.is-down, .paper .ctl-cell:active { box-shadow: 1px 1px 0 #000; transform: translate(3px, 3px); }
.paper .ctl-cell:disabled { opacity: .4; box-shadow: 2px 2px 0 #999; }

/* ───────────────────────── abPad ───────────────────────── */
.paper .ctl-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paper .ctl-ab-side { display: grid; align-content: center; justify-items: center; gap: 8px; min-height: 40vh; padding: 14px;
  border: 3px solid var(--ink); background: #fff; box-shadow: 5px 5px 0 #000; cursor: pointer; }
.paper .ctl-ab-side.s0 { background: #eef3ff; } .paper .ctl-ab-side.s1 { background: #fff2ec; }
.paper .ctl-ab-key { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--ink); font-family: var(--head); font-weight: 700; font-size: 1.3rem; }
.paper .ctl-ab-label { font-family: var(--head); font-weight: 700; font-size: clamp(1.3rem, 7vw, 2.2rem); text-transform: uppercase; line-height: 1; text-align: center; overflow-wrap: anywhere; }
.paper .ctl-ab-sub { font: .76rem var(--mono); color: var(--ink-2); text-align: center; }
.paper .ctl-ab-side.on { background: var(--yellow); }
.paper .ctl-ab-side.is-down, .paper .ctl-ab-side:active { box-shadow: 0 0 0 #000; transform: translate(4px, 4px); }

/* ───────────────────────── dpad ───────────────────────── */
.paper .ctl-dpad { display: grid; grid-template-columns: repeat(3, 76px); grid-template-rows: repeat(3, 76px); gap: 6px; justify-content: center; }
.paper .ctl-dp { border: 2px solid var(--ink); background: var(--grey); box-shadow: 2px 2px 0 #000; cursor: pointer; display: grid; place-items: center; }
.paper .ctl-dp.up { grid-area: 1 / 2; } .paper .ctl-dp.left { grid-area: 2 / 1; }
.paper .ctl-dp.center { grid-area: 2 / 2; font: 700 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; background: #fff; }
.paper .ctl-dp.right { grid-area: 2 / 3; } .paper .ctl-dp.down { grid-area: 3 / 2; }
.paper .ctl-dp i { width: 0; height: 0; display: block; border: 13px solid transparent; }
.paper .ctl-dp.up i { border-bottom-color: var(--ink); margin-bottom: 13px; }
.paper .ctl-dp.down i { border-top-color: var(--ink); margin-top: 13px; }
.paper .ctl-dp.left i { border-right-color: var(--ink); margin-right: 13px; }
.paper .ctl-dp.right i { border-left-color: var(--ink); margin-left: 13px; }
.paper .ctl-dp.is-down { background: var(--yellow); box-shadow: none; transform: translate(2px, 2px); }

/* ───────────────────────── buzzer ───────────────────────── */
.paper .ctl-buzz-wrap { display: grid; justify-items: center; gap: 14px; width: 100%; }
.paper .ctl-buzz-prompt { font: 700 1rem/1.35 var(--mono); text-align: center; max-width: 24ch; letter-spacing: .02em; }
.paper .ctl-buzz { width: min(76vw, 300px); aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--ink);
  background: radial-gradient(circle at 38% 32%, #ff6b4e, var(--orange) 48%, #a3300d 100%); color: #fff;
  box-shadow: 0 10px 0 #7a1f06, 0 12px 26px rgba(0,0,0,.34); cursor: pointer; display: grid; place-items: center;
  transition: transform .05s linear, box-shadow .05s linear; }
.paper .ctl-buzz-label { font-family: var(--head); font-weight: 700; font-size: clamp(2rem, 12vw, 3.2rem); letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.paper .ctl-buzz.is-down { transform: translateY(8px); box-shadow: 0 2px 0 #7a1f06, 0 3px 10px rgba(0,0,0,.3); }
.paper .ctl-buzz.dead { background: radial-gradient(circle at 38% 32%, #e6e6e6, #bdbdbd 55%, #8f8f8f 100%); color: #6a6a6a;
  border-color: #6d6d6d; box-shadow: 0 8px 0 #7d7d7d; cursor: default; }
.paper .ctl-buzz.dead .ctl-buzz-label { text-shadow: none; }
.paper .ctl-buzz.st-mine { background: radial-gradient(circle at 38% 32%, #7ae59c, var(--good) 52%, #0d5c31 100%); box-shadow: 0 8px 0 #0a4525; }
.paper .ctl-buzz-sub { font: 700 .82rem var(--mono); letter-spacing: .16em; text-transform: uppercase; text-align: center; color: var(--ink-2); }

/* ───────────────────────── slider / wager ───────────────────────── */
.paper .ctl-range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; margin: 4px 0; }
.paper .ctl-range::-webkit-slider-runnable-track { height: 18px; background: #fff; border: 2px solid var(--ink); }
.paper .ctl-range::-moz-range-track { height: 18px; background: #fff; border: 2px solid var(--ink); }
.paper .ctl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 48px; margin-top: -17px;
  background: var(--yellow); border: 3px solid var(--ink); box-shadow: 2px 2px 0 #000; cursor: pointer; }
.paper .ctl-range::-moz-range-thumb { width: 44px; height: 44px; border-radius: 0; background: var(--yellow); border: 3px solid var(--ink); box-shadow: 2px 2px 0 #000; }
.paper .ctl-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.paper .ctl-chip { min-height: 52px; font: 700 .8rem var(--mono); letter-spacing: .12em; text-transform: uppercase;
  border: 2px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 #000; cursor: pointer; }
.paper .ctl-chip.is-down, .paper .ctl-chip:active { background: var(--yellow); box-shadow: none; transform: translate(3px, 3px); }

/* ───────────────────────── numberPad ───────────────────────── */
.paper .ctl-pad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.paper .ctl-padkey { min-height: 62px; font-family: var(--head); font-weight: 700; font-size: 1.7rem;
  border: 2px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 #000; cursor: pointer; }
.paper .ctl-padkey.del { font-family: var(--mono); font-size: .86rem; letter-spacing: .1em; background: var(--grey); }
.paper .ctl-padkey.blank { border: 0; box-shadow: none; background: transparent; }
.paper .ctl-padkey.is-down, .paper .ctl-padkey:active { background: var(--yellow); box-shadow: none; transform: translate(3px, 3px); }

/* ───────────────────────── textEntry ───────────────────────── */
.paper .ctl-text { width: 100%; min-height: 108px; padding: 12px; font-family: var(--mono); font-size: 16px; line-height: 1.45;
  border: 2px solid var(--ink); background: #fff; border-radius: 0; outline: none; }
.paper .ctl-text.one-line { min-height: 56px; }
.paper .ctl-text:focus { background: #fffbe0; box-shadow: 2px 2px 0 #000; }
.paper .ctl-entry-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.paper .ctl-count { font: .76rem var(--mono); color: var(--ink-2); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.paper .ctl-count.near { color: var(--bad); font-weight: 700; }

/* ───────────────────────── rankList ───────────────────────── */
.paper .ctl-rank-list { list-style: none; display: grid; gap: 8px; }
.paper .ctl-rank-row { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 12px;
  border: 2px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 #000; cursor: grab; }
.paper .ctl-rank-row.dragging { cursor: grabbing; background: var(--yellow); box-shadow: 6px 6px 0 #000; position: relative; z-index: 5; }
.paper .ctl-rank-list.is-dragging .ctl-rank-row:not(.dragging) { transition: transform .12s ease; }
.paper .ctl-rank-no { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border: 2px solid var(--ink); font-family: var(--head); font-weight: 700; }
.paper .ctl-rank-text { flex: 1 1 auto; min-width: 0; font: 700 .9rem/1.2 var(--mono); overflow: hidden; text-overflow: ellipsis; }
.paper .ctl-rank-grip { flex: 0 0 26px; display: grid; gap: 4px; }
.paper .ctl-rank-grip i { display: block; height: 2px; background: var(--ink-2); }

/* ───────────────────────── tapTarget ───────────────────────── */
.paper .ctl-tap { width: 100%; min-height: 200px; display: grid; place-content: center; gap: 4px;
  border: 3px solid var(--ink); background: #fff; box-shadow: 6px 6px 0 #000; cursor: pointer; }
.paper .ctl-tap-count { font-family: var(--head); font-weight: 700; font-size: clamp(3.4rem, 22vw, 6rem); line-height: .9; font-variant-numeric: tabular-nums; }
.paper .ctl-tap-label { font: 700 .86rem var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.paper .ctl-tap-sub { font: .76rem var(--mono); color: var(--ink-2); }
.paper .ctl-tap.hit { animation: ctlHit .14s ease; }
@keyframes ctlHit { 50% { background: var(--yellow); transform: scale(.985); } }

/* ───────────────────────── tokenSpender ───────────────────────── */
.paper .ctl-budget { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 6px 0 12px; }
.paper .ctl-budget-n { font-family: var(--head); font-weight: 700; font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.paper .ctl-budget-u { font: 700 .74rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.paper .ctl-token-rows { display: grid; gap: 8px; }
.paper .ctl-token-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--ink); background: #fff; }
.paper .ctl-token-row.has { background: #fffbe0; }
.paper .ctl-token-text { flex: 1 1 auto; min-width: 0; }
.paper .ctl-token-label { display: block; font: 700 .86rem/1.25 var(--mono); overflow-wrap: anywhere; }
.paper .ctl-token-sub { display: block; font: .72rem var(--mono); color: var(--ink-2); }
.paper .ctl-stepper { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.paper .ctl-step { width: 48px; height: 48px; font-family: var(--head); font-weight: 700; font-size: 1.5rem; line-height: 1;
  border: 2px solid var(--ink); background: var(--grey); box-shadow: 2px 2px 0 #000; cursor: pointer; }
.paper .ctl-step:disabled { opacity: .35; box-shadow: none; }
.paper .ctl-step.is-down { background: var(--yellow); box-shadow: none; transform: translate(2px, 2px); }
.paper .ctl-step-n { min-width: 30px; text-align: center; font-family: var(--head); font-weight: 700; font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* ───────────────────────── drawPad ───────────────────────── */
.paper .ctl-draw { display: grid; gap: 10px; }
.paper .ctl-canvas-box { width: 100%; border: 3px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 #000; overflow: hidden; }
.paper .ctl-canvas-box canvas { display: block; width: 100%; height: 100%; }
/* The swatches take a whole row of their own: six across a 360px phone is still
   a ~49px target, and squeezing them beside the tools would drop under 48. */
.paper .ctl-draw-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.paper .ctl-swatches { display: flex; gap: 6px; flex: 1 0 100%; min-width: 0; }
.paper .ctl-swatch { flex: 1 1 0; min-width: 0; height: 52px; border: 2px solid var(--ink); background: var(--sw); cursor: pointer; box-shadow: 2px 2px 0 #000; }
.paper .ctl-swatch.on { outline: 3px solid var(--yellow); outline-offset: -8px; box-shadow: none; transform: translate(2px, 2px); }
.paper .ctl-tool { flex: 1 1 0; min-width: 64px; height: 48px; padding: 0 12px; font: 700 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase;
  border: 2px solid var(--ink); background: var(--grey); box-shadow: 2px 2px 0 #000; cursor: pointer; display: grid; place-items: center; }
.paper .ctl-tool.on, .paper .ctl-tool.is-down { background: var(--yellow); box-shadow: none; transform: translate(2px, 2px); }
.paper .ctl-dot { display: block; border-radius: 50%; background: var(--ink); width: 6px; height: 6px; }
.paper .js-size[data-size="1"] .ctl-dot { width: 12px; height: 12px; }
.paper .js-size[data-size="2"] .ctl-dot { width: 22px; height: 22px; }

/* ═══════════════════════ the phone's own chrome ═══════════════════════ */

/* --- the score strip: rank and score, always there once the game starts ---
   The WRAPPER is the sticky box (a sticky child only sticks inside its own
   parent, and the parent here is only as tall as the bar itself). */
.paper #scoreWrap { position: sticky; top: 0; z-index: 60; margin: 0 auto 12px; max-width: 640px; }
body.paper.has-conn #scoreWrap { top: 40px; }
.paper #scoreWrap:empty { display: none; margin-bottom: 0; }
.paper .scorestrip { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 18px; margin: 0 -18px; background: var(--ink); color: #fff;
  font: 700 .72rem var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.paper .scorestrip .ss-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.paper .scorestrip .ss-rank { font-family: var(--head); font-size: 1.15rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.paper .scorestrip .ss-score { font-family: var(--head); font-size: 1.15rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--yellow); }
.paper .scorestrip .ss-of { color: #9a9a9a; font-size: .66rem; letter-spacing: .12em; }
.paper .scorestrip .ss-tag { flex: 0 0 auto; font-size: .64rem; letter-spacing: .16em; color: #9a9a9a; white-space: nowrap; }
.paper .scorestrip .ss-tag.hot { color: var(--yellow); }
.paper .scorestrip.bump { animation: ssBump .5s ease; }
@keyframes ssBump { 0% { background: var(--ink); } 18% { background: var(--yellow); color: var(--ink); transform: scale(1.015); } 100% { background: var(--ink); } }
.paper .scorestrip.bump .ss-score { animation: ssPop .5s ease; }
@keyframes ssPop { 30% { transform: translateY(-3px) scale(1.14); } }

/* --- the ready gate --- */
.paper .gate { text-align: center; padding: 8px 0 28px; }
.paper .gate .gate-eyebrow { font: 700 .7rem var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.paper .gate .h1 { margin-bottom: 6px; }
.paper .gate .gate-lead { font-size: 1rem; margin: 0 0 20px; line-height: 1.45; }
.paper .gate .ctl-big { margin-bottom: 14px; }
.paper .gate-in { border: 3px solid var(--ink); background: var(--yellow); box-shadow: 6px 6px 0 #000; padding: 26px 16px; margin-bottom: 14px; }
.paper .gate-in .tick { width: 62px; height: 62px; margin: 0 auto 12px; display: grid; place-items: center; border: 3px solid var(--ink); background: #fff; font-size: 2rem; line-height: 1; }
.paper .gate-in .h2 { font-size: 1.05rem; }
.paper .gate-count { font: 700 .76rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.paper .gate-count b { font-family: var(--head); font-size: 1.2rem; letter-spacing: .04em; }

/* --- the calm nothing-to-do screen --- */
.paper .standby { text-align: center; padding: 26px 8px 34px; }
.paper .standby .standby-name { font-family: var(--head); font-weight: 700; font-size: clamp(1.5rem, 8vw, 2.2rem); text-transform: uppercase; line-height: 1.05; margin-bottom: 10px; text-wrap: balance; }
.paper .standby .standby-prompt { font-size: .98rem; line-height: 1.5; color: var(--ink-2); max-width: 32ch; margin: 0 auto 6px; }

/* --- the drawing stage --- */
.paper .stage-word { border: 3px solid var(--ink); background: var(--yellow); box-shadow: 5px 5px 0 #000; padding: 12px 14px; margin-bottom: 12px; }
.paper .stage-word .k { font: 700 .66rem var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); display: block; }
.paper .stage-word .w { font-family: var(--head); font-weight: 700; font-size: clamp(1.9rem, 11vw, 3rem); line-height: 1.02; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.paper .guess-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.paper .guess-chip { font: 700 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border: 2px solid var(--ink); background: #fff; }
.paper .guess-chip.hit { background: #d8f3e1; }
.paper .artist-note { display: flex; align-items: center; gap: 8px; font: 700 .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }

/* --- a small ordered board (reaction times, buzz order) --- */
.paper .mini-board { display: grid; gap: 6px; margin-top: 14px; }
.paper .mini-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 2px solid var(--ink); background: #fff; font: .86rem var(--mono); }
.paper .mini-row.me { background: var(--yellow); }
.paper .mini-row .n { font-family: var(--head); font-weight: 700; }
.paper .mini-row .ms { font-family: var(--head); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ═══════════════════════ full-bleed takeovers ═══════════════════════
   The buzzer, the reaction light and the 3·2·1 own the whole handset. They
   sit under the connection banner (z 400) and the toasts (z 500), so a lost
   socket is still announced over the top of them. */
.ctl-takeover { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto 1fr auto;
  padding: calc(14px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  background: var(--paper); color: var(--ink); font-family: var(--mono); overscroll-behavior: contain; }
body.has-conn .ctl-takeover { padding-top: calc(52px + env(safe-area-inset-top)); }
.ctl-takeover .tk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 700 .68rem var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.ctl-takeover .tk-body { display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; min-height: 0; }
.ctl-takeover .tk-foot { font: 700 .7rem var(--mono); letter-spacing: .18em; text-transform: uppercase; text-align: center; opacity: .75; }
.ctl-takeover .tk-title { font-family: var(--head); font-weight: 700; font-size: clamp(2.2rem, 13vw, 3.6rem); line-height: .96; text-transform: uppercase; text-wrap: balance; }
.ctl-takeover .tk-sub { font: 700 .86rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; max-width: 26ch; }

/* the 3 · 2 · 1 · GO */
.ctl-takeover.tk-countdown { background: var(--ink); color: #fff; }
.ctl-takeover.tk-countdown .tk-n { font-family: var(--head); font-weight: 700; font-size: min(52vh, 62vw); line-height: .82; color: var(--yellow); font-variant-numeric: tabular-nums; }
.ctl-takeover.tk-countdown .tk-n.go { color: #7ae59c; font-size: min(30vh, 40vw); letter-spacing: .04em; }

/* the buzzer */
.ctl-takeover.tk-buzzer { background: #fff; }
.ctl-takeover.tk-buzzer.won { background: #e9f9ef; }
.ctl-takeover.tk-buzzer.lost { background: var(--grey); }
.ctl-takeover.tk-buzzer.out { background: #ffece7; }

/* the reaction light */
.ctl-takeover.tk-react { grid-template-rows: auto 1fr auto; }
.ctl-takeover.tk-react.wait { background: #C8250F; color: #fff; }
.ctl-takeover.tk-react.go { background: #0f9b4a; color: #fff; }
.ctl-takeover.tk-react.early { background: #2b2b2b; color: #fff; }
.ctl-takeover.tk-react.sent { background: #123; color: #fff; }
.ctl-takeover.tk-react .tk-body { cursor: pointer; align-content: center; width: 100%; height: 100%; }
.ctl-takeover.tk-react .tk-title { font-size: min(22vh, 26vw); line-height: .9; }
.ctl-takeover.tk-react.go .tk-title { animation: tkFlash .28s ease; }
@keyframes tkFlash { from { transform: scale(.82); opacity: .4; } }
.ctl-takeover.tk-react .tk-head, .ctl-takeover.tk-react .tk-foot { color: rgba(255,255,255,.82); }

/* the takeover's own tiny score line, so the strip is never simply gone */
.ctl-takeover .tk-score { font-family: var(--head); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* ───────────────────────── small phones ─────────────────────────
   360x640: trim the vertical furniture so the primary action stays in the
   bottom half of the screen where a thumb actually lands. */
@media (max-height: 680px) {
  .paper .ctl-big { min-height: 136px; }
  .paper .ctl-buzz { width: min(66vw, 240px); }
  .paper .gate-in { padding: 18px 14px; }
  .paper .gate .gate-lead { margin-bottom: 14px; }
  .paper .ctl-tap { min-height: 160px; }
  .paper .ctl-ab-side { min-height: 34vh; }
  /* the drawing stage: keep the canvas at 4:3 (the projector maps the same
     normalised box) and take the room out of the furniture instead */
  .paper .ctl-draw { gap: 8px; }
  .paper .artist-tip { display: none; }
  .paper .artist-note { margin-bottom: 6px; }
  .paper .stage-word { padding: 8px 12px; margin-bottom: 8px; }
  .paper .stage-word .w { font-size: clamp(1.5rem, 8.5vw, 2.2rem); }
}
@media (max-width: 380px) {
  .paper .ctl-dpad { grid-template-columns: repeat(3, 66px); grid-template-rows: repeat(3, 66px); }
  .paper .ctl-cell { min-height: 68px; padding: 10px; }
  .paper .ctl-key { flex-basis: 32px; height: 32px; font-size: .95rem; }
  .paper .scorestrip { letter-spacing: .12em; }
}

/* Nothing on this page may push the viewport sideways. */
body.paper { overflow-x: hidden; }


/* ── THE PULSE, and the name bar ────────────────────────────────────────────
   The two things a phone can do at any moment, as opposed to whatever the
   current activity is asking for. Deliberately quiet: they sit under the
   activity, never over it, and must never compete with the thing the room is
   actually doing. */
.pulsebar, .namebar {
  margin: 14px 0 18px; padding: 12px 14px;
  border: 2px solid var(--ink); background: var(--grey, #ECECEC);
  display: grid; gap: 8px;
}
.pl-label, .nb-label {
  font: 700 .68rem var(--mono, ui-monospace); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2, #555);
}
.nb-label b { color: var(--ink); }
.pl-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* 48px, because this is pressed by somebody half-watching the screen. */
.pl-btn {
  min-height: 48px; padding: 12px 10px; cursor: pointer;
  font: 700 .82rem var(--head, Oswald), system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .06em;
  background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 0;
}
.pl-btn:active { transform: translate(1px, 1px); }
.pl-btn.on { background: var(--ink); color: #fff; }
.pl-note { font-size: .7rem; line-height: 1.4; color: var(--ink-3, #888); }
.nb-form { display: flex; gap: 8px; }
.nb-form .input { flex: 1 1 auto; min-width: 0; }

@media (prefers-reduced-motion: reduce) { .pl-btn:active { transform: none; } }