/* Parole Room — the interrogation room after lights-out.
   One hard lamp over a dark table; old manila paper in its pool of light; carbon ink and the censor's dried red.
   Anything typed is on the typewriter; anything signed on the wall is in condensed capitals.
   Red is the Warden's touch: letters, the hole, late cards, the desk. Green is the one stamp that lets you out. */

@font-face { font-family: "Special Elite"; src: url("/app/fonts/special-elite-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/app/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/app/fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/app/fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/app/fonts/barlow-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/app/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/app/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --room: #0e0c0a;
  --table: #1c1916;
  --table-edge: #2a2521;
  --paper: #e9dcbd;
  --paper-2: #d9c9a3;
  --paper-dark: #c4b189;
  --ink: #141210;
  --ink-soft: #2b2722;
  --pencil: #5c5447;
  --rule: #a99a78;
  --red: #8e1b14;
  --red-hot: #c1281c;
  --green: #2d5a34;
  --bulb: #f2c777;
  --bulb-dim: #7a6236;
  --display: "Special Elite", "Courier New", monospace;
  --sans: "Barlow", system-ui, -apple-system, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --shadow: 0 2px 0 rgba(0,0,0,.55), 0 14px 30px rgba(0,0,0,.6);
  --tap: 56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
/* nothing scrolls sideways: a box that reaches past the edge is clipped, not a reason for a phone to zoom out */
html { overflow-x: hidden; }
body {
  background: var(--room);
  /* the lamp: the one gradient in the room */
  background-image: radial-gradient(ellipse 120% 70% at 50% -10%, rgba(242, 199, 119, .16), rgba(242, 199, 119, 0) 60%);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--bulb); outline-offset: 2px; }
/* on paper the lamp's colour is invisible: the censor's red marks the focused control instead */
.paper :focus-visible { outline-color: var(--red); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- the page */

.page { max-width: 640px; margin: 0 auto; padding: 0 14px 88px; }
.page.desk, .page.watch { max-width: 1080px; }
.page.lights-out { --paper: #cdbf9f; --paper-2: #b9aa88; }
.page.lights-out .paper { box-shadow: 0 2px 0 rgba(0,0,0,.7), 0 10px 24px rgba(0,0,0,.8); }
.waiting { font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--bulb-dim); text-align: center; padding: 80px 0; }

/* ---------------------------------------------------------------- the sign */

.sign {
  position: sticky; top: 0; z-index: 5;
  margin: 0 -14px 14px;
  padding: 8px 14px 8px;
  background: var(--room);
  border-bottom: 2px solid var(--paper-dark);
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.sign.dark { border-bottom-color: var(--bulb-dim); }
.sign-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sign-row.top { align-items: center; margin-bottom: 2px; }
.sign-brand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--display); letter-spacing: .22em; font-size: 12px; text-transform: uppercase; color: var(--paper-dark); }
.lamp { width: 16px; height: 24px; color: var(--paper-dark); }
.lamp.lit circle { filter: drop-shadow(0 0 6px rgba(242,199,119,.9)); }
.sign.dark .lamp { color: var(--bulb-dim); }
/* the night label gives way first: it wraps when the brand, the label and the menu button do not fit a
   narrow phone side by side ("after the eighth night"), so the row never pushes the page wider */
.sign-night { font-family: var(--cond); font-weight: 700; font-size: 14px; line-height: 1.1; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-dark); min-width: 0; flex: 1 1 auto; text-align: right; }
.sign-brand, .sign-row.top .menu-btn { flex: 0 0 auto; }
.sign-phase { margin: 0; font-family: var(--cond); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--paper); }
.sign.dark .sign-phase { color: var(--paper-2); }
/* the clock: no glow and no opacity animation on it, both of which leave the last digit's ghost behind
   when the number changes inside a sticky, composited header; the hot state blinks by color instead */
.sign-timer { font-family: var(--cond); font-weight: 800; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; min-width: 2.2em; padding: 2px 0 2px 8px; text-align: right; color: var(--bulb); background: var(--room); }
.sign-timer.hot { color: var(--red-hot); animation: blink 1s steps(2, end) infinite; }
@keyframes blink { 50% { color: var(--paper-dark); } }
.sign-timer.paused { font-size: 16px; letter-spacing: .18em; text-transform: uppercase; color: var(--room); background: var(--bulb); padding: 6px 10px; }
.sign-timer.desk-led { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--bulb); text-shadow: none; min-width: 0; }
.sign-timer.desk-led.off { color: var(--pencil); }
.sign-rights { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.night-boxes { display: flex; gap: 4px; }
.night-box { width: 14px; height: 14px; border: 2px solid var(--paper-dark); display: inline-block; position: relative; box-sizing: border-box; }
/* a right night: filled, with a tick; a wrong one: crossed in red; the night under way: a pulse */
.night-box.good { background: var(--paper); border-color: var(--paper); }
.night-box.good::after { content: ""; position: absolute; left: 3px; top: 0px; width: 3px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.night-box.bad { border-color: var(--red-hot); }
.night-box.bad::before, .night-box.bad::after { content: ""; position: absolute; left: 1px; right: 1px; top: 4px; height: 2px; background: var(--red-hot); }
.night-box.bad::before { transform: rotate(45deg); }
.night-box.bad::after { transform: rotate(-45deg); }
.night-box.now { border-color: var(--paper); }
.night-box.now::after { content: ""; position: absolute; inset: 3px; background: var(--bulb); border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .night-box.now::after { animation: none; opacity: .9; } }
.sign-wall { font-family: var(--display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dark); white-space: nowrap; }
.sign-wall.good { color: #9fd3a4; }
.sign-wall.bad { color: #ff8b7a; }
.iconbtn { background: transparent; border: 1px solid var(--paper-dark); color: var(--paper-dark); padding: 4px 9px; font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; min-height: 32px; }
.pause-note { background: var(--bulb); color: var(--room); font-family: var(--display); font-size: 14px; padding: 8px 12px; margin: -4px 0 12px; }
.desk-paused { color: var(--paper-2); font-family: var(--display); font-size: 13px; margin: 0; }
.desk-row { align-items: center; }

.offline { background: var(--red); color: var(--paper); font-family: var(--display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; margin: -6px 0 12px; }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 20; background: var(--paper); color: var(--ink); font-family: var(--display); font-size: 14px; padding: 10px 16px; border-left: 6px solid var(--red); box-shadow: var(--shadow); max-width: min(92vw, 520px); }
.refused { background: var(--paper); color: var(--red); border-left: 6px solid var(--red); padding: 10px 14px; font-family: var(--display); margin: 10px 0; }

/* ---------------------------------------------------------------- paper */

.paper {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: 14px 16px 16px;
  margin: 14px 0;
  box-shadow: var(--shadow);
}
.paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.028) 0 1px, transparent 1px 27px),
    radial-gradient(circle at 12% 88%, rgba(120, 80, 20, .10), transparent 35%),
    radial-gradient(circle at 90% 10%, rgba(120, 80, 20, .08), transparent 30%);
}
.paper > * { position: relative; }
.paper.tilt-l { transform: rotate(-.5deg); }
.paper.tilt-r { transform: rotate(.4deg); }
@media (min-width: 720px) { .paper.tilt-l, .paper.tilt-r { transform: none; } }
.paper.second { background: var(--paper-2); }
/* a stamped paper clips the slam's entrance: the stamp lands from 2.2x its size, and a wide one would
   otherwise reach past the phone's edge for a frame, which a mobile browser answers by widening the page */
.paper.stamped { padding-top: 80px; overflow: hidden; }
.paper.big { padding: 20px 22px 22px; }
.form-head { font-family: var(--display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px solid var(--ink); padding-bottom: 5px; margin-bottom: 12px; }
.form-head > span:first-child { color: var(--ink-soft); }
.form-head b { font-weight: 400; color: var(--red); }
.paper h2, .paper h3 { font-family: var(--display); font-weight: 400; letter-spacing: .04em; margin: 14px 0 6px; }
.paper h2 { font-size: 20px; }
.paper h3 { font-size: 15px; color: var(--ink-soft); border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.paper p { margin: 0 0 10px; }
.paper p:last-child { margin-bottom: 0; }
.paper .lead { font-size: 20px; font-weight: 500; line-height: 1.3; }
.typed { font-family: var(--display); font-size: 16px; line-height: 1.5; }
.pencil { color: var(--pencil); }
.small { font-size: 14px; }
.mine { font-weight: 600; }
.note { background: var(--table); color: var(--paper-2); font-family: var(--display); font-size: 14px; padding: 10px 14px; margin: 12px 0; border-left: 4px solid var(--bulb-dim); }
.hole-note { font-family: var(--display); color: var(--red); border: 2px solid var(--red); padding: 8px 10px; }
.dealing { font-family: var(--display); color: var(--pencil); animation: pulse 1.6s ease-in-out infinite; }
.rule-line, .event-line { font-family: var(--display); font-size: 14px; margin: 10px 0 0; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.spread, .spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack .row.spread { border-bottom: 1px solid var(--rule); padding: 6px 0; }

/* the rubber stamp */
.stamp {
  display: inline-block; font-family: var(--display); text-transform: uppercase; letter-spacing: .18em;
  font-size: 14px; line-height: 1.1; padding: 6px 10px; border: 3px solid currentColor; border-radius: 3px;
  color: var(--red); transform: rotate(-3deg); opacity: .92;
  mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0,0,0,.55) 100%);
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0,0,0,.55) 100%);
}
.stamp.green { color: var(--green); }
.stamp.ink { color: var(--ink); }
.stamp.corner { position: absolute; top: -9px; right: 12px; transform: rotate(6deg); font-size: 11px; z-index: 2; background: var(--paper); }
.paper:has(> .stamp.corner) .form-head { padding-right: 130px; }
.slam { position: absolute; top: 10px; left: 14px; z-index: 1; }
.slam .stamp { font-size: clamp(14px, 4.6vw, 22px); white-space: nowrap; padding: 8px 14px; border-width: 4px; transform: rotate(-6deg); animation: slam .28s cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: center; }
@keyframes slam { from { transform: rotate(-6deg) scale(2.2); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: .92; } }

/* ---------------------------------------------------------------- buttons on paper */

.btn {
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
  font-family: var(--cond); font-weight: 700; font-size: 18px; letter-spacing: .04em; text-transform: uppercase;
  padding: 0 16px; min-height: var(--tap); line-height: 1.1; text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--red); border-color: var(--red); }
.btn.wide { width: 100%; display: block; margin: 10px 0; }
.btn.quiet { background: transparent; color: var(--ink); }
.page .btn.quiet { color: var(--paper); border-color: var(--paper-dark); }
.paper .btn.quiet { color: var(--ink); border-color: var(--ink); }
.btn.tiny { min-height: 40px; font-size: 14px; padding: 0 10px; }
/* a link dressed as a button sits like one: same height, centred, no underline */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.btn.big { font-size: 22px; min-height: 64px; width: 100%; }
.btn.push { min-width: 80px; }
.btn.pick { background: var(--paper); color: var(--ink); min-height: 44px; font-size: 16px; }
.btn.pick.chosen { background: var(--ink); color: var(--paper); }
.btn.vote, .btn.level { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: var(--paper); color: var(--ink); padding: 10px 12px; flex: 1 1 160px; text-transform: none; font-family: var(--sans); font-weight: 400; font-size: 14px; }
.btn.vote b, .btn.level b { font-family: var(--cond); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; }
.btn.vote.chosen, .btn.level.chosen { background: var(--ink); color: var(--paper); }
.btn.stampbtn { flex: 1; font-family: var(--display); letter-spacing: .14em; background: var(--paper); border-width: 3px; border-radius: 3px; transform: rotate(-2deg); }
.btn.stampbtn.red { color: var(--red); border-color: var(--red); }
.btn.stampbtn.ink { color: var(--ink); border-color: var(--ink); transform: rotate(1.5deg); }
.answer { margin-top: 12px; gap: 14px; }
.kick { margin-top: 4px; }
.field { display: block; margin: 12px 0; }
.field > span { display: block; font-family: var(--display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.field.inline { margin-top: 14px; }
input[type="text"], input:not([type]) {
  width: 100%; background: transparent; border: 0; border-bottom: 2px solid var(--ink); color: var(--ink);
  font-family: var(--display); font-size: 20px; padding: 8px 2px; min-height: 48px;
}
input::placeholder { color: var(--pencil); opacity: .6; }
.code-input { max-width: 150px; letter-spacing: .3em; text-transform: uppercase; }
.switch { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-size: 15px; }
.switch input { width: 24px; height: 24px; accent-color: var(--red); flex: none; }

/* ---------------------------------------------------------------- the intake */

.doors { display: grid; gap: 14px; }
@media (min-width: 560px) { .doors { grid-template-columns: 1fr 1fr; } }
.door { border: 1px solid var(--rule); padding: 10px 12px 12px; display: flex; flex-direction: column; }
.door > .btn.wide:last-child { margin-top: auto; margin-bottom: 0; }
.door-title { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 16px; margin-bottom: 4px; }
.icon { width: 22px; height: 22px; flex: none; }
.made .code { font-family: var(--cond); font-weight: 800; font-size: 26px; letter-spacing: .12em; color: var(--red); }
.url { font-family: var(--display); font-size: 16px; word-break: break-all; }

/* ---------------------------------------------------------------- the lineup */

.lineup { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.cell-card { position: relative; text-align: center; padding: 4px 2px 6px; border: 1px solid var(--rule); background: rgba(255,255,255,.12); }
.cell-card.me { border: 2px solid var(--ink); }
.cell-card.away { opacity: .45; }
.cell-card.released { opacity: .55; }
.cell-card.released::after { content: "out"; position: absolute; top: 6px; left: 6px; font-family: var(--display); font-size: 11px; color: var(--green); border: 2px solid var(--green); padding: 1px 4px; transform: rotate(-12deg); }
.mugshot { width: 100%; max-width: 110px; height: auto; color: var(--ink); display: block; margin: 0 auto; }
.mugshot.warden { color: var(--ink); }
.bars { position: absolute; left: 0; right: 0; top: 0; bottom: 26px; width: 100%; height: calc(100% - 26px); color: var(--ink); opacity: .85; }
.cell-years { font-family: var(--display); font-size: 12px; margin-top: 2px; color: var(--ink-soft); }
.cell-card .stamp { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); font-size: 11px; background: rgba(233,220,189,.85); }

/* ---------------------------------------------------------------- the cell: cards */

.not-cards { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.not-cards.pickable { gap: 12px; }
.not-pick { background: none; border: 0; padding: 0; }
.not-card {
  width: 120px; min-height: 150px; background: var(--paper); border: 2px solid var(--ink); padding: 10px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 3px 3px 0 var(--ink); color: var(--ink);
}
.not-card .not-word { font-family: var(--display); font-size: 14px; letter-spacing: .3em; }
.not-card .not-num { font-family: var(--cond); font-weight: 800; font-size: 72px; line-height: .9; }
.not-card .not-sub { font-family: var(--display); font-size: 10px; letter-spacing: .06em; color: var(--pencil); text-align: center; }
.not-card.picked { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--red); }
.not-card.picked .not-sub { color: var(--paper-dark); }
.hand.compact .not-card { width: 84px; min-height: 100px; }
.hand.compact .not-card .not-num { font-size: 46px; }
.grape-cards { display: flex; flex-direction: column; gap: 6px; }
.grape-card { font-family: var(--display); font-size: 15px; border: 2px dashed var(--ink-soft); padding: 8px 10px; background: rgba(255,255,255,.2); }

/* the letter */
.paper.letter { padding-top: 40px; background: var(--paper); }
.paper.letter::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--red) 0 18px, transparent 18px 26px); opacity: .7; }
.paper.visit::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--red); opacity: .6; }

/* the taps */
.paper.lay.late .form-head b { color: var(--red); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 13px; line-height: 1.1;
  padding: 5px 8px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); margin: 2px 4px 2px 0; position: relative;
}
.chip.push { background: var(--ink); color: var(--paper); }
.chip.visited { border-style: double; border-width: 4px; }
.chip.word { border-style: dashed; }
.chip.fix { border-color: var(--red); color: var(--red); }
.chip.letter { border-color: var(--red); color: var(--red); border-style: dotted; }
.chip.hole { background: var(--ink); color: var(--paper); border-style: dashed; }
.chip.held { opacity: .8; }
.chip.dig.good { border-color: var(--green); color: var(--green); }
.chip.dig.bad { border-color: var(--red); color: var(--red); }
.chip.late { padding-right: 36px; }
.late-mark { position: absolute; right: 2px; top: -6px; font-family: var(--display); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); border: 1.5px solid var(--red); padding: 1px 3px; transform: rotate(8deg); background: var(--paper); }
.delta { font-family: var(--cond); font-weight: 800; font-size: 18px; margin-left: 6px; }

/* the face-down board */
.facedown {
  margin: 14px 0; padding: 26px 16px; min-height: 150px; display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--table); border: 2px solid var(--table-edge); color: var(--paper-dark);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px), repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px);
  box-shadow: inset 0 0 40px rgba(0,0,0,.7), var(--shadow);
}
.facedown-inner { display: flex; flex-direction: column; gap: 6px; }
.facedown-word { font-family: var(--cond); font-weight: 800; font-size: 28px; letter-spacing: .04em; text-transform: uppercase; color: var(--paper-2); }
.facedown-sub { font-family: var(--display); font-size: 13px; }
.facedown-count { font-family: var(--display); font-size: 13px; color: var(--bulb); }

/* the board as a ledger */
.board-paper { animation: turnover .35s ease-out both; transform-origin: top center; }
@keyframes turnover { from { transform: rotateX(70deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }
.ledger { display: flex; flex-direction: column; }
.ledger-row { display: grid; grid-template-columns: 112px 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.ledger-row:last-child { border-bottom: 0; }
.ledger-name { font-family: var(--cond); font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: .03em; padding-top: 4px; word-break: break-word; }
.ledger-note { font-family: var(--display); font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--pencil); font-weight: 400; display: block; }
.ledger-taps { display: flex; flex-wrap: wrap; align-items: center; }
.ledger-taps.pile { gap: 2px; }
.ledger-empty { font-family: var(--display); font-size: 13px; color: var(--pencil); }
.ledger.unsigned .ledger-row { grid-template-columns: 1fr; }
.ledger.unsigned .ledger-name { color: var(--red); }
.count-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 12px; border-top: 2px solid var(--ink); padding-top: 8px; }
.count { text-align: center; display: flex; flex-direction: column; gap: 1px; }
.count-t { font-family: var(--cond); font-weight: 800; font-size: 26px; line-height: 1; }
.count-n { font-family: var(--display); font-size: 10px; color: var(--pencil); }
.count.unnamed .count-n { color: var(--red); }
.count.unnamed .count-t { color: var(--red); }
.count-p { font-family: var(--display); font-size: 10px; }

/* the yard */
.yard-actions { margin: 6px 0 10px; }
.block-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.block-seat { display: inline-flex; gap: 6px; align-items: baseline; border: 1px solid var(--paper-dark); padding: 4px 8px; font-size: 13px; color: var(--paper-2); }
.block-seat.me { border-color: var(--bulb); color: var(--bulb); }
.block-seat.hole { border-style: dashed; }
.block-seat.out { opacity: .5; text-decoration: line-through; }
.bs-years { font-family: var(--cond); font-weight: 800; font-size: 16px; }
.votes { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.whisper-list { margin: 0; padding-left: 18px; font-family: var(--display); font-size: 14px; }
.whisper-list li { margin: 4px 0; }
.whisper-list li.sent { color: var(--pencil); }
.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(8, 6, 4, .78); overflow: auto; padding: 24px 14px; }
.sheet .paper { max-width: 560px; margin: 0 auto; }

/* tunnels */
.tunnels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.tunnel { background: var(--paper); border: 2px solid var(--ink); padding: 6px 4px 4px; min-height: 96px; display: flex; flex-direction: column; align-items: center; color: var(--ink); }
button.tunnel { cursor: pointer; }
.tunnel.chosen { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--red); }
.tunnel.dim { opacity: .55; }
.tunnel.safe { border-color: var(--green); color: var(--green); box-shadow: 3px 3px 0 var(--green); }
.tunnel.wrong { border-color: var(--red); color: var(--red); }
.tunnel-svg { width: 100%; height: auto; max-height: 72px; }
.tunnel-cap { font-family: var(--display); font-size: 10px; letter-spacing: .04em; min-height: 12px; }
.tunnel.chosen .tunnel-svg path { fill: var(--paper); }
.tunnel.chosen .tunnel-svg text { fill: var(--ink); }

/* the reveal */
.reveal-paper.right .form-head { border-color: var(--green); }
.reveal-paper.wrong .form-head { border-color: var(--red); }
.deal-paper { border-left: 8px solid var(--red); }

/* ---------------------------------------------------------------- the lobby */

.levels .btn { flex: 1 1 140px; }
.qr-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.qr { width: 150px; height: 150px; color: var(--ink); flex: none; }
.qr-row > div { flex: 1 1 180px; }

/* ---------------------------------------------------------------- the desk */

.desk-controls { background: var(--table); border: 1px solid var(--table-edge); padding: 12px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.desk-controls .switch { margin: 0; color: var(--paper-2); font-size: 14px; }
.tabs { display: flex; gap: 2px; margin: 0 0 -14px; }
.tab { flex: 1; background: var(--table); color: var(--paper-dark); border: 1px solid var(--table-edge); border-bottom: 0; font-family: var(--cond); font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; min-height: 44px; }
.tab.on { background: var(--paper); color: var(--ink); }
.truth { border-top: 8px solid var(--red); }
.fix-panel .levels { margin: 8px 0; }
/* the fox's reckoning on the desk, and its note in the lobby: a pencilled aside */
.fix-panel .fox-advice { color: var(--pencil); border-left: 3px solid var(--rule); padding-left: 10px; margin: 6px 0 10px; }
.settings .fox-note { margin: -4px 0 10px 28px; }
@media (min-width: 900px) {
  .page.desk .desk-controls { flex-direction: row; align-items: center; }
  .page.desk .desk-controls .btn.big { width: auto; flex: 1; }
  .page.desk .lineup, .page.watch .lineup { grid-template-columns: repeat(8, minmax(92px, 1fr)); }
  .page.watch .sign-phase { font-size: 64px; }
  .page.watch .sign-timer:not(.desk-led) { font-size: 72px; }
  .page.watch .ledger-name { font-size: 22px; }
  .page.watch .chip { font-size: 16px; }
  .page.watch .count-t { font-size: 36px; }
}

/* ---------------------------------------------------------------- after the eighth night */

.door-paper.breakout { border-top: 8px solid var(--green); }
.door-paper.lockdown { border-top: 8px solid var(--red); }
.nights { display: flex; flex-direction: column; gap: 6px; }
.night-head { width: 100%; display: grid; grid-template-columns: 76px 1fr 1fr 60px; gap: 8px; align-items: center; text-align: left; background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); padding: 10px; font-family: var(--display); font-size: 13px; min-height: 48px; }
.night-head .nh-n { font-family: var(--cond); font-weight: 800; font-size: 18px; text-transform: uppercase; }
.night-head .nh-verdict { text-align: right; text-transform: uppercase; letter-spacing: .1em; }
.nh-verdict.good { color: var(--green); }
.nh-verdict.bad { color: var(--red); }
.night-body { padding: 8px 4px 12px; border-left: 2px solid var(--rule); margin: 0 0 6px 10px; }
.whisper-log ul { margin: 0; padding-left: 18px; font-family: var(--display); font-size: 13px; }
@media (max-width: 480px) { .night-head { grid-template-columns: 64px 1fr 56px; } .night-head .nh-fix { grid-column: 1 / -1; color: var(--pencil); } }

/* ---------------------------------------------------------------- the handbook */

.guide-sheet { padding: 0; }
.guide { max-width: 720px; margin: 0 auto; padding: 0 14px; }
.guide-sheet .guide { padding-top: 10px; }
.guide-page .sign { position: static; }
.guide-page .guide-nav { top: 0; }
.guide-section { scroll-margin-top: 70px; }
.guide-h { display: flex; gap: 12px; align-items: baseline; font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .02em; margin: 0 0 10px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.guide-num { font-size: 14px; color: var(--red); letter-spacing: .1em; }
.guide-section p { font-size: 15px; line-height: 1.5; }
.guide-list { margin: 0 0 12px; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.guide-list li { margin: 0 0 8px; }
.guide-list b { font-family: var(--display); font-weight: 400; }
.guide-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.35; margin: 4px 0 12px; }
.guide-table th { text-align: left; font-family: var(--display); font-weight: 400; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--ink); padding: 4px 6px 4px 0; vertical-align: bottom; }
.guide-table td { border-bottom: 1px solid var(--rule); padding: 6px 6px 6px 0; vertical-align: top; }
.guide-table td:first-child { font-family: var(--display); white-space: nowrap; }
@media (max-width: 480px) { .guide-table td:first-child { white-space: normal; } .guide-table { font-size: 12px; } }

/* ---------------------------------------------------------------- the book and the confession */
.paper.book-paper::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 16px); opacity: .5; }
.paper.confession { border-left: 6px solid var(--ink); }
.stakes-line, .confessed-line { margin: 8px 0 0; }
.stake-results { margin: 10px 0 0; padding-left: 18px; font-size: 15px; line-height: 1.4; }
.stake-results li.good { color: var(--green); font-weight: 600; }
.stake-results li.bad { color: var(--red); font-weight: 600; }

/* ---------------------------------------------------------------- the maker's file */
.about-page .sign { position: static; }
.about-sheet { padding-top: 24px; }
.about-paper { padding-top: 18px; }
.about-paper .form-head { flex: 1; }
.about-head { display: flex; gap: 16px; align-items: center; margin: 4px 0 14px; }
.about-head .mugshot.maker { max-width: 128px; flex: 0 0 auto; margin: 0; }
.about-name { display: flex; flex-direction: column; gap: 2px; }
.about-name b { font-family: var(--cond); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .03em; line-height: 1; }
.about-name .small { color: var(--pencil); }
.about-links { display: grid; gap: 0; margin: 14px 0 6px; border-top: 2px solid var(--ink); }
.about-link { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; min-height: var(--tap); }
.about-link b { font-family: var(--cond); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.about-link span { font-family: var(--display); font-size: 13px; color: var(--ink-soft); text-align: right; overflow-wrap: anywhere; }
.about-link:hover span, .about-link:focus-visible span { color: var(--red); }
.colophon { text-align: center; margin: 18px 0 0; display: grid; gap: 6px; justify-items: center; }
.colophon .rights { font-family: var(--display); font-size: 11px; color: var(--paper-dark); opacity: .8; letter-spacing: .02em; }
.paper .colophon .rights { color: var(--pencil); opacity: 1; }
.about-fine { margin: 10px 0 4px; display: grid; gap: 6px; }
.about-fine p { margin: 0; font-family: var(--display); font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.about-fine .rights { color: var(--pencil); letter-spacing: .02em; }
.linkish { background: none; border: 0; padding: 8px 10px; min-height: 40px; color: var(--paper-dark); font-family: var(--display); font-size: 13px; letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.paper .linkish { color: var(--pencil); }

/* ---------------------------------------------------------------- the menu, the pickers, the handbook bar */
.menu-btn { display: inline-flex; align-items: center; gap: 7px; }
.menu-bars { width: 14px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.menu-bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
.menu-sheet { padding-top: 16px; }
.menu-paper .row.spread { align-items: flex-start; }
.menu-paper .form-head { flex: 1; }
.menu-paper .stack { margin-top: 16px; }
.btn.close-x { min-width: 44px; min-height: 44px; font-size: 26px; line-height: 1; padding: 0; font-family: var(--sans); border-width: 2px; }
.menu-paper .btn.close-x { color: var(--ink); border-color: var(--ink); background: transparent; }
select.pick {
  width: 100%; min-height: 44px; padding: 6px 36px 6px 10px; background: transparent; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0; font-family: var(--cond); font-weight: 700; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
select.pick:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.lang-field { margin-top: 0; }
.guide-nav { position: sticky; top: 0; z-index: 4; background: var(--room); padding: 10px 0 8px; margin: 0 -14px; }
.guide-nav-row { display: flex; gap: 8px; align-items: center; padding: 0 14px; overflow: visible; }
.guide-nav-row select.pick { flex: 1 1 0; min-width: 0; color: var(--paper); border-color: var(--paper-dark); font-size: 13px; padding-left: 8px; }
.guide-nav-row select.pick option { color: var(--ink); background: var(--paper); }
.guide-nav-row .btn.close-x { flex: none; color: var(--paper); border-color: var(--paper); background: transparent; }
.guide-body { padding-top: 12px; }

/* ------------------------------------------------------------------ v0.9: the hosted table */
.btn.danger { background: var(--red); border-color: var(--red); color: var(--paper); }
.code.big { font-family: var(--cond); font-weight: 800; font-size: 30px; letter-spacing: .14em; color: var(--red); margin: 6px 0; text-align: center; }
.desk-code-fold { margin: 12px 0 4px; border-top: 1px solid var(--rule); padding-top: 8px; }
.desk-code-fold summary { cursor: pointer; font-family: var(--display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--pencil); }
.page.desk .desk-code-fold summary { color: var(--paper-dark); }
.page.desk .desk-code-fold .pencil, .page.desk .desk-code-fold .small { color: var(--paper-2); }
.table-business { margin-top: 18px; border-top: 2px solid var(--ink); padding-top: 10px; }
.table-business .stack { margin-top: 8px; }
.verdict-paper .verdicts { margin: 6px 0; }
.btn.verdict { flex: 1 1 100px; background: var(--paper); color: var(--ink); text-transform: none; font-family: var(--sans); font-weight: 600; }
.btn.verdict.chosen { background: var(--ink); color: var(--paper); }
.pause-note.relief { background: var(--ink); color: var(--paper); }
/* the tower's read-only look at a desk: nothing there can be pressed */
.readonly button, .readonly input, .readonly select, .readonly label.switch { pointer-events: none; opacity: .55; }
.readonly .sign .btn, .readonly .menu-btn { pointer-events: auto; opacity: 1; }

/* the tower */
.page.tower { max-width: 1100px; margin: 0 auto; }
.page.tower .paper { max-width: none; }
.tabs { margin: 12px 0; }
.btn.tab { background: transparent; color: var(--paper); border-color: var(--paper-dark); }
.btn.tab.chosen { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.tower-room { grid-template-columns: 1fr; }
.tower-room .ledger-name .code { color: var(--red); letter-spacing: .12em; font-size: 20px; }
.tower-room .row { margin-top: 6px; }
.ledger-row.vital { grid-template-columns: 1fr auto; }
.vital-value { font-family: var(--display); font-size: 14px; text-align: right; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; margin: 8px 0; }
.ledger-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.ledger-table th { font-family: var(--cond); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; text-align: left; padding: 6px 8px 6px 0; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.ledger-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ledger-table td.row { white-space: nowrap; }
.ledger-table .code { letter-spacing: .1em; }
.dates { align-items: flex-end; }
.dates .field.inline input { max-width: 170px; }
.tallies h3 { font-family: var(--cond); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 16px; margin: 14px 0 4px; }
pre.log { font-family: var(--display); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--paper-2); padding: 10px; border: 1px solid var(--rule); max-height: 70vh; overflow: auto; }
.tower-dossier > .btn { margin-bottom: 10px; }
.switches .field.inline { margin: 8px 0; }