/* Smartypants party. Same language as the slides: flat color, bold condensed type, red label boxes.
   Color jobs: green = the boardroom, walnut = the table, paper = place cards,
   red = names and labels, yellow = numbers (room code, scores, slide numbers). */

@font-face { font-family: "Oswald"; font-weight: 500; font-display: swap; src: url(/fonts/oswald/oswald-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 600; font-display: swap; src: url(/fonts/oswald/oswald-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 700; font-display: swap; src: url(/fonts/oswald/oswald-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap; src: url(/fonts/archivo/archivo-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url(/fonts/archivo/archivo-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-display: swap; src: url(/fonts/archivo/archivo-latin-800-normal.woff2) format("woff2"); }

:root {
  --room: #16603f;
  --room-deep: #0f4a30;
  --walnut: #5b3a22;
  --walnut-edge: #7b5232;
  --paper: #fff8ea;
  --ink: #151515;
  --red: #d7261e;
  --yellow: #ffe45c;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--room);
  color: var(--white);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
[hidden] { display: none !important; }

.label {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.18em 0.32em 0.2em;
}

/* =====================  TV / HOST  ===================== */

.tv { overflow: hidden; }
.screen { position: fixed; inset: 0; display: grid; }

/* Lobby + voting: the boardroom */
.board {
  grid-template-rows: auto 1fr auto;
  padding: 3.2vh 4vw 3vh;
  gap: 2vh;
}
.board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3vw;
}
.board-title { font-family: var(--display); font-weight: 700; font-size: 6.4vh; line-height: 1; margin: 0; text-transform: uppercase; }
.board-sub { font-size: 2.4vh; color: var(--muted); margin: 1.2vh 0 0; max-width: 46ch; }
.join-box { display: flex; align-items: center; gap: 1.6vw; background: var(--paper); color: var(--ink); padding: 1.6vh 1.6vw; }
.join-box .qr { width: 13vh; height: 13vh; }
.join-box .qr svg { width: 100%; height: 100%; display: block; }
.join-text { display: grid; gap: 0.6vh; }
.join-text .small { font-size: 1.9vh; font-weight: 600; }
.join-url { font-family: var(--display); font-weight: 600; font-size: 2.6vh; }
.code { font-family: var(--display); font-weight: 700; font-size: 8.6vh; line-height: 0.95; letter-spacing: 0.06em; color: var(--ink); }
.code-chip { background: var(--yellow); padding: 0 0.18em; }

/* The table: a long walnut slab, 10 seats a side, a head seat on the left for the presenter. */
.table-wrap { display: grid; place-items: center; min-height: 0; }
.table {
  position: relative;
  width: min(86vw, 150vh);
  aspect-ratio: 3.3 / 1;
  background: var(--walnut);
  border-radius: 1.4vh;
  box-shadow: inset 0 0 0 0.7vh var(--walnut-edge), 0 2.6vh 5vh -2vh rgba(0, 0, 0, 0.45);
}
.table-center {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1vh; text-align: center; pointer-events: none;
  font-family: var(--display); font-weight: 600; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); font-size: 3vh; letter-spacing: 0.04em;
}
.table-center strong { display: block; font-size: 7vh; color: var(--yellow); font-weight: 700; letter-spacing: 0.02em; }
.seats { position: absolute; inset: 0; }
.seat {
  position: absolute;
  width: 8.2%;
  aspect-ratio: 1 / 1.08;
  perspective: 900px;
  transform: translate(-50%, -50%);
}
.card {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  display: grid; place-items: center; text-align: center;
  padding: 6%;
  box-shadow: 0 0.8vh 1.4vh -0.6vh rgba(0, 0, 0, 0.5);
}
.face.front { background: var(--paper); color: var(--ink); }
.face.back { background: var(--red); color: var(--white); transform: rotateY(180deg); }
.seat-name {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 1;
  font-size: clamp(1.4vh, 2.3vh, 2.6vh); overflow-wrap: anywhere;
}
.seat-num { position: absolute; top: 6%; left: 8%; font-size: 1.3vh; font-weight: 600; opacity: 0.45; }
.locked-stamp { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 2vh; line-height: 1.05; }
.seat.empty .face.front { background: transparent; box-shadow: none; outline: 0.3vh dashed rgba(255, 248, 234, 0.35); outline-offset: -0.3vh; }
.seat.offline .face.front { opacity: 0.45; }
.seat.locked .card { transform: rotateY(180deg); }
.seat.presenter .face.front { background: var(--yellow); }
.seat.sitout .face.front { opacity: 0.4; }
.seat.joined .card { animation: drop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25); }
/* Uses translate/scale (not transform) so it never fights the locked-in flip. */
@keyframes drop { from { translate: 0 -3vh; scale: 0.85; opacity: 0; } to { translate: 0 0; scale: 1; opacity: 1; } }

.head-seat {
  position: absolute; left: 0; top: 50%; transform: translate(-115%, -50%);
  background: var(--yellow); color: var(--ink);
  padding: 1.2vh 1vw; text-align: center; min-width: 9vw;
  box-shadow: 0 0.8vh 1.4vh -0.6vh rgba(0, 0, 0, 0.5);
}
.head-seat .small { font-size: 1.6vh; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.head-seat .name { font-family: var(--display); font-weight: 700; font-size: 3.4vh; text-transform: uppercase; line-height: 1; }

.board-foot { display: flex; justify-content: space-between; align-items: end; gap: 2vw; font-size: 2vh; color: var(--muted); }
.vote-count { font-family: var(--display); font-weight: 700; font-size: 4.4vh; color: var(--white); text-transform: uppercase; }
.vote-count b { color: var(--yellow); }

/* Draw: yellow, numbers are the whole point */
.draw { background: var(--yellow); color: var(--ink); align-content: center; justify-items: center; gap: 4vh; padding: 4vh 6vw; text-align: center; }
.draw h1 { font-family: var(--display); font-weight: 700; font-size: 9vh; line-height: 1; margin: 0; text-transform: uppercase; }
.draw p { font-size: 2.8vh; margin: 0; max-width: 48ch; }
.draw-form { display: flex; gap: 1.6vw; align-items: end; flex-wrap: wrap; justify-content: center; }
.draw-form label { display: grid; gap: 1vh; font-weight: 600; font-size: 2vh; text-transform: uppercase; letter-spacing: 0.04em; }
.draw-form input {
  width: 9vw; min-width: 90px; font-family: var(--display); font-weight: 700; font-size: 7vh; text-align: center;
  border: 0.5vh solid var(--ink); background: var(--white); color: var(--ink); padding: 0.4vh 0;
}
.draw-form input:focus { outline: 0.6vh solid var(--red); outline-offset: 0.3vh; }
.draw-form .opener input { background: var(--ink); color: var(--yellow); }
.draw-error { min-height: 3.4vh; font-size: 2.6vh; font-weight: 600; color: var(--red); }
.big-btn {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 3.4vh;
  background: var(--red); color: var(--white); border: 0; padding: 1.4vh 2.6vw; cursor: pointer;
}
.big-btn:focus-visible, .btn:focus-visible { outline: 0.5vh solid var(--ink); outline-offset: 0.4vh; }
/* A box whose number was taken flashes once as it moves to the closest free number. */
.draw-form input.snapped { animation: snap 0.7s ease-out; }
@keyframes snap { from { background: #D7261E; color: #fff; } }

/* Presenting: the slide owns the screen */
.present { background: #000; place-items: center; }
.present img { width: 100vw; height: 100vh; object-fit: contain; display: block; }
.placeholder {
  width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; background: var(--paper); color: var(--ink);
  display: grid; place-items: center; text-align: center; align-content: center; gap: 2vh;
}
.placeholder .num { font-family: var(--display); font-weight: 700; font-size: 18vh; line-height: 1; }
.placeholder .note { font-size: 2.6vh; color: rgba(21, 21, 21, 0.6); }
.slide-tag {
  position: fixed; right: 2vw; bottom: 2.4vh; font-family: var(--display); font-weight: 600; font-size: 2vh;
  background: rgba(0, 0, 0, 0.55); color: var(--white); padding: 0.4vh 0.8vw; opacity: 0; transition: opacity 0.3s;
}
.show-tag .slide-tag { opacity: 1; }

/* Prepared talk title card: the title (or the name) owns the screen, byline under it */
.prepared { background: var(--red); align-content: center; justify-items: start; padding: 0 8vw; gap: 2.6vh; }
.prepared h1 { font-family: var(--display); font-weight: 700; font-size: 22vh; line-height: 0.9; margin: 0; text-transform: uppercase; max-width: 84vw; overflow-wrap: anywhere; text-wrap: balance; }
.prepared .prep-by { font-family: var(--display); font-weight: 600; font-size: 4.6vh; text-transform: uppercase; }
.prepared .prep-meta { position: absolute; left: 8vw; bottom: 6vh; font-family: var(--display); font-weight: 600; font-size: 2.6vh; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.prepared .prep-note { position: absolute; right: 4vw; bottom: 6vh; font-size: 2vh; margin: 0; color: rgba(255, 255, 255, 0.85); max-width: 46ch; text-align: right; }

/* Reveal */
.reveal { background: var(--red); align-content: center; justify-items: center; text-align: center; gap: 4vh; } /* same gap above and below the score box */
.reveal .who { font-family: var(--display); font-weight: 700; font-size: 6vh; text-transform: uppercase; }
.reveal .score { font-family: var(--display); font-weight: 700; font-size: 42vh; line-height: 0.85; color: var(--yellow); font-variant-numeric: tabular-nums; }
.reveal .outof { font-size: 3vh; font-weight: 600; }
.reveal .score.pop { animation: pop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.reveal { overflow: hidden; }
.reveal .who, .reveal .score, .reveal .outof { position: relative; z-index: 300; }
/* The cash can fill the whole screen, so the type carries its own contrast: an outlined number and red labels. */
/* Sam, Nov 9: no outline or shadow. The black box appears only once the score lands; its padding is always
   there so nothing shifts. text-box trims the font's extra line space so the digits sit dead center. */
.reveal .score { -webkit-text-stroke: 0; text-shadow: none; background: transparent; padding: 0.19em 0.16em 0.2em; line-height: 1;
  text-box: trim-both cap alphabetic; }
.reveal .score.land { background: #111; }
.reveal .who, .reveal .outof { background: var(--red); padding: 0.4vh 1.6vh 0.6vh; }
.reveal .score { transition: color 0.35s ease 0.12s, -webkit-text-stroke-color 0.35s ease 0.12s; }
.reveal .score.land { animation: land 1s both; color: #43e07f; }
.reveal .outof { opacity: 0; transition: opacity 0.5s ease 0.25s; }
.reveal .outof.shown { opacity: 1; }
/* The final number jumps once, lands, and settles. */
@keyframes land {
  0% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  32% { transform: translateY(-8vh) scale(1.22); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  58% { transform: translateY(0) scale(1.04, 0.94); animation-timing-function: ease-out; }
  76% { transform: translateY(-1.6vh) scale(1.02); animation-timing-function: ease-in; }
  100% { transform: none; }
}
/* Cash bricks (drawn in host.js): one per 0.1 of the score, stacked along the bottom of the screen. */
.cash { position: absolute; inset: 0; pointer-events: none; }
.brick { position: absolute; width: 12vw; height: 4.8vw; transform: rotate(var(--rot)); transform-origin: 50% 100%;
  filter: drop-shadow(0 0.15vw 0.25vw rgba(0, 0, 0, 0.25)); }
.brick i { position: absolute; display: block; }
.brick .bt { left: 0; top: 0; width: 93.3%; height: 35.4%; background: url(/img/bill-100.jpg) center / 100% 100%;
  transform-origin: 0 100%; transform: skewX(-24deg); box-shadow: inset 0 0 0 1px rgba(40, 50, 30, 0.25); }
.brick .bf { left: 0; top: 35.4%; width: 93.3%; height: 64.6%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.18)), repeating-linear-gradient(to bottom, #d9dfc8 0 2px, #a9b394 2px 3px); }
.brick .bd { left: 93.3%; top: 0; width: 6.7%; height: 100%; clip-path: polygon(0 35.4%, 100% 0, 100% 64.6%, 0 100%);
  background: repeating-linear-gradient(to bottom, #b9c2a6 0 2px, #8c967a 2px 3px); }
.brick .bs { left: 42%; width: 16%; top: 0; height: 100%; background: #c9a23a; box-shadow: inset 0 0 0 1px rgba(90, 60, 0, 0.25); }
/* Each brick drops from above the screen onto its pile: speeds up as it falls, squashes, bounces once. */
.brick.in { animation: brick-in 0.5s both; }
.brick.out { animation: brick-out 0.36s cubic-bezier(0.5, 0, 0.9, 0.6) both; }
@keyframes brick-in {
  0% { transform: translateY(calc(var(--fall) * -1)) rotate(calc(var(--rot) * 4)); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  74% { transform: translateY(0) rotate(var(--rot)) scale(1.03, 0.88); animation-timing-function: ease-out; }
  87% { transform: translateY(-0.7vw) rotate(var(--rot)) scale(0.99, 1.02); animation-timing-function: ease-in; }
  100% { transform: rotate(var(--rot)); }
}
/* Taken away: yanked back up off the screen. */
@keyframes brick-out { to { transform: translateY(calc(var(--fall) * -1)) rotate(calc(var(--rot) * -3)); } }
/* Bills falling from the ceiling after the score lands: the outer div falls, the inner one flutters. */
.rain { position: absolute; inset: 0; pointer-events: none; z-index: 250; overflow: hidden; perspective: 60vw; }
.bill { position: absolute; top: 0; width: 8vw; height: 3.36vw; animation: bill-fall linear infinite both; }
.bill > div { width: 100%; height: 100%; background: url(/img/bill-100.jpg) center / 100% 100% no-repeat;
  box-shadow: 0 0.3vw 0.8vw rgba(0, 0, 0, 0.3); animation: bill-flap ease-in-out infinite alternate; }
@keyframes bill-fall { from { transform: translateY(-12vh); } to { transform: translateY(112vh); } }
@keyframes bill-flap {
  from { transform: translateX(-2.5vw) rotate(calc(var(--tilt) - 18deg)) rotateX(8deg) rotateY(calc(var(--spin) * -1)); }
  to { transform: translateX(2.5vw) rotate(calc(var(--tilt) + 18deg)) rotateX(70deg) rotateY(var(--spin)); }
}
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Leaderboard */
.leader { background: var(--room-deep); grid-template-rows: auto 1fr; padding: 5vh 8vw; gap: 3vh; }
.leader h1 { font-family: var(--display); font-weight: 700; font-size: 8vh; margin: 0; text-transform: uppercase; }
.ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1vh; align-content: start; grid-auto-flow: column; grid-template-rows: repeat(10, auto); column-gap: 4vw; }
.ranks li { display: grid; grid-template-columns: 4vw 1fr auto; align-items: baseline; gap: 1vw; font-size: 3.2vh; padding: 0.6vh 0; border-bottom: 0.2vh solid rgba(255, 255, 255, 0.15); }
.ranks .pos { font-family: var(--display); font-weight: 700; color: var(--muted); }
.ranks .nm { font-family: var(--display); font-weight: 600; text-transform: uppercase; overflow-wrap: anywhere; }
.ranks .avg { font-family: var(--display); font-weight: 700; color: var(--yellow); font-variant-numeric: tabular-nums; }
.ranks li:first-child { font-size: 4.6vh; }
.ranks li:first-child .nm { background: var(--red); padding: 0 0.3em; justify-self: start; }
.empty-note { font-size: 3vh; color: var(--muted); }

/* Host drawer: hidden by default because the laptop is mirrored to the TV */
.drawer {
  --pt: 18px; --px: 24px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--paper); color: var(--ink);
  max-height: 62vh; overflow: auto;
  padding: var(--pt) var(--px) 22px;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
  font-size: 15px;
}
.drawer h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 22px; margin: 0; }
/* Panel header: THE BOARDROOM, what's going on, and the TV buttons on one line, pinned while you scroll.
   Section tabs sit under it. */
.drawer-head {
  position: sticky; top: calc(-1 * var(--pt)); z-index: 3;
  margin: calc(-1 * var(--pt)) calc(-1 * var(--px)) 16px; padding: var(--pt) var(--px) 0;
  background: var(--paper); border-bottom: 2px solid var(--ink);
}
.drawer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; }
.drawer-brand { display: grid; gap: 2px; }
.drawer-brand h2 { font-size: 28px; line-height: 1; }
#drawer-status { font-size: 13px; opacity: 0.65; }
.btn.on { background: var(--ink); color: var(--white); }
.drawer-tabs { display: flex; gap: 28px; }
.drawer-tabs[hidden] { display: none; }
.drawer-tab {
  border: 0; background: none; color: var(--ink); padding: 8px 0 10px; margin-bottom: -2px; cursor: pointer; touch-action: manipulation;
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 18px; letter-spacing: 0.02em; opacity: 0.55;
  border-bottom: 4px solid transparent;
}
.drawer-tab.on { opacity: 1; border-bottom-color: var(--red); }
.drawer-tab-n { font-family: var(--body); font-weight: 600; font-size: 14px; opacity: 0.7; }
.guest-foot { margin: 14px 0 0; font-size: 13px; opacity: 0.65; }
.drawer .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn {
  border: 2px solid var(--ink); background: var(--white); color: var(--ink); padding: 7px 12px; cursor: pointer;
  font-weight: 600; font-size: 14px;
}
.btn.red { background: var(--red); border-color: var(--red); color: var(--white); }
.btn.dark { background: var(--ink); color: var(--yellow); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.plist li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid rgba(0, 0, 0, 0.15); padding: 8px 10px; }
.plist .who-block { flex: 1 1 100%; min-width: 0; }
.plist .pn { font-weight: 800; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.plist .meta { font-size: 12px; color: rgba(0, 0, 0, 0.55); }
.plist .dot-off { color: var(--red); }
.keys { font-size: 13px; color: rgba(0, 0, 0, 0.65); margin-top: 12px; line-height: 1.6; }
.keys kbd { font-family: var(--display); background: var(--ink); color: var(--yellow); padding: 1px 6px; font-size: 12px; }
.host-msg { min-height: 20px; color: var(--red); font-weight: 600; margin-top: 8px; }
.drawer-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 19;
  background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.8); border: 0; padding: 6px 10px; cursor: pointer; font-size: 13px;
}
.idle .drawer-toggle { opacity: 0; pointer-events: none; }
.idle.tv { cursor: none; }
.drawer-toggle { transition: opacity 0.3s; }
.board-title .label { font-size: 0.9em; margin-right: 0.15em; }
.gate { background: var(--room); align-content: center; justify-items: center; text-align: center; gap: 2vh; padding: 4vw; }
.gate h1 { font-family: var(--display); font-weight: 700; font-size: 6vh; margin: 0; text-transform: uppercase; }
.gate p { font-size: 2.4vh; max-width: 50ch; margin: 0; color: var(--muted); }

/* =====================  PHONE  ===================== */

.phone {
  min-height: 100%;
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  display: grid;
  align-content: start;
  gap: 22px;
  max-width: 520px;
  margin: 0 auto;
}
.phone-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.phone-top .you { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--white); text-transform: uppercase; }
.phone h1 { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; margin: 0; text-transform: uppercase; }
.phone p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--muted); }
.phone p strong { color: var(--white); }
.field { display: grid; gap: 8px; }
.field span { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.field input {
  font-family: var(--display); font-weight: 700; font-size: 34px; padding: 10px 14px; border: 0;
  background: var(--paper); color: var(--ink); width: 100%; border-radius: 0;
}
.field input.code-in { letter-spacing: 0.3em; text-align: center; font-size: 46px; background: var(--yellow); }
.field input:focus { outline: 4px solid var(--red); outline-offset: 2px; }
.cta {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 26px;
  background: var(--red); color: var(--white); border: 0; padding: 16px; width: 100%; cursor: pointer;
}
.cta:disabled { opacity: 0.4; }
.cta:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.err { color: var(--yellow); font-weight: 600; min-height: 22px; font-size: 16px; }
.now { background: var(--paper); color: var(--ink); padding: 18px; display: grid; gap: 6px; }
.now .small { font-size: 16px; font-weight: 600; color: rgba(0, 0, 0, 0.6); }
.now .big { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.now .progress { font-family: var(--display); font-weight: 600; font-size: 20px; }
.scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.score-btn {
  aspect-ratio: 1 / 1; border: 0; background: var(--paper); color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 54px; cursor: pointer;
}
.score-btn[aria-pressed="true"] { background: var(--yellow); outline: 5px solid var(--red); outline-offset: -5px; }
.score-btn:focus-visible { outline: 4px solid var(--yellow); outline-offset: 2px; }
.score-hint { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: -10px; }
.locked-card { background: var(--red); padding: 22px; display: grid; gap: 6px; text-align: center; }
.locked-card .n { font-family: var(--display); font-weight: 700; font-size: 96px; line-height: 1; color: var(--yellow); }
.phone-score { font-family: var(--display); font-weight: 700; font-size: 120px; line-height: 0.9; color: var(--yellow); }
.mini-ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mini-ranks li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 6px 0; font-size: 17px; }
.mini-ranks .avg { font-family: var(--display); font-weight: 700; color: var(--yellow); }
.link-btn { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 0; cursor: pointer; font-size: 14px; justify-self: start; }
/* Prepared deck: the slides box on the guest's phone */
.deck-box h2 { overflow-wrap: anywhere; }
.pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pick {
  border: 2px solid var(--ink); background: var(--white); color: var(--ink); padding: 12px 8px; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 17px; text-transform: uppercase; line-height: 1.1;
}
.pick.main { grid-column: 1 / -1; background: var(--red); border-color: var(--red); color: var(--white); font-size: 21px; padding: 14px 8px; }
.pick[aria-expanded="true"] { background: var(--ink); color: var(--yellow); }
.pick:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.link-form { display: grid; gap: 10px; }
.bar { height: 14px; background: rgba(0, 0, 0, 0.12); overflow: hidden; }
.bar .fill { height: 100%; background: var(--red); transition: width 0.2s; }
.bar.busy .fill { background: repeating-linear-gradient(-45deg, var(--red) 0 14px, #b81f18 14px 28px); background-size: 40px 100%; animation: busy 0.8s linear infinite; }
@keyframes busy { to { background-position: 40px 0; } }
.thumbs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.thumbs img { height: 72px; width: auto; flex: none; background: #000; scroll-snap-align: start; border: 1px solid rgba(0, 0, 0, 0.2); }
.how summary { cursor: pointer; font-weight: 600; font-size: 15px; color: rgba(0, 0, 0, 0.75); }
.how ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 10px; font-size: 14px; line-height: 1.4; color: rgba(0, 0, 0, 0.7); }
/* Presenter's own phone during a prepared talk: the slide on the TV, a clicker, the next slide */
.speaker img { width: 100%; display: block; background: #000; aspect-ratio: 16 / 9; object-fit: contain; }
.speaker-card { background: var(--red); aspect-ratio: 16 / 9; padding: 16px; display: grid; align-content: center; gap: 8px; font-size: 15px; }
.speaker-card .t { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.step-row { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.step-row .cta { padding: 22px 12px; }
.step.back { border: 2px solid var(--paper); background: transparent; color: var(--white); font-family: var(--display); font-weight: 700; font-size: 22px; text-transform: uppercase; cursor: pointer; }
.step.back:disabled { opacity: 0.3; }
/* Remote layout: where you are + timer, the slide on the TV, before/next, notes, then the buttons
   pinned to the bottom of the screen where a thumb can always reach them. */
.speaker-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.speaker-head h1 { font-size: 34px; }
.speaker-head .build { display: block; margin-top: 6px; font-family: var(--body); font-weight: 600; font-size: 16px; text-transform: none; color: var(--yellow); }
.talk-clock { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; padding-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.talk-clock.over { color: var(--yellow); }
.speaker-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.speaker-thumb { margin: 0; display: grid; gap: 6px; }
.speaker-thumb img { width: 100%; display: block; background: #000; aspect-ratio: 16 / 9; object-fit: contain; }
.speaker-thumb figcaption { font-size: 13px; color: var(--muted); }
.speaker-blank { aspect-ratio: 16 / 9; display: grid; place-items: center; border: 2px dashed rgba(255, 255, 255, 0.3); font-size: 13px; color: var(--muted); }
.speaker-notes { background: var(--room-deep); padding: 14px 16px; max-height: 42vh; overflow-y: auto; }
.speaker-notes p { color: var(--white); font-size: 20px; line-height: 1.4; }
.speaker-notes p + p { margin-top: 0.6em; }
.speaker-notes.empty p { color: var(--muted); font-size: 15px; }
.phone .step-row { position: sticky; bottom: 0; padding: 10px 0 max(6px, env(safe-area-inset-bottom)); background: var(--room); }
.deck-facts { font-size: 14px !important; color: rgba(0, 0, 0, 0.65) !important; }
@media (prefers-reduced-motion: reduce) { .bar.busy .fill { animation: none; } }

.phone .err:empty { display: none; }
.offline-bar { position: fixed; top: 0; left: 0; right: 0; background: var(--yellow); color: var(--ink); text-align: center; font-weight: 600; font-size: 14px; padding: 8px; z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .seat.joined .card, .reveal .score.pop, .reveal .score.land, .brick.in, .brick.out { animation: none; }
  .rain { display: none; }
}

/* =====================  CALENDAR (the running order, Apple Calendar style)  ===================== */
/* A deliberate change of world: the boardroom's own work calendar. Light, system font, Apple's calendar colors.
   Blue = prepared talk, purple = random deck, red = now, gray = finished. */

.cal-theme {
  --cal-bg: #ffffff;
  --cal-line: #e5e5ea;
  --cal-text: #1c1c1e;
  --cal-muted: #8e8e93;
  --cal-red: #ff3b30;
  --cal-blue: #007aff;
  --cal-blue-tint: #e5f0ff;
  --cal-blue-ink: #0a4fa3;
  --cal-purple: #af52de;
  --cal-purple-tint: #f5e9fb;
  --cal-purple-ink: #6e2a91;
  --cal-gray-tint: #f2f2f7;
  --cal-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Archivo", Arial, sans-serif;
  background: var(--cal-bg);
  color: var(--cal-text);
  font-family: var(--cal-font);
  -webkit-font-smoothing: antialiased;
}

.cal { grid-template-rows: auto auto 1fr; padding: 3.4vh 3.4vw 2.6vh; gap: 1.2vh; }
.cal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2vw; }
.cal-date { font-size: 4.6vh; font-weight: 400; letter-spacing: -0.01em; }
.cal-date strong { font-weight: 700; }
.cal-weekday { font-size: 2.4vh; color: var(--cal-muted); }
.cal-allday { display: flex; align-items: center; gap: 1vw; border-top: 1px solid var(--cal-line); border-bottom: 1px solid var(--cal-line); padding: 0.8vh 0; }
.cal-allday-label { width: 6vw; text-align: right; font-size: 1.6vh; color: var(--cal-muted); }
.cal-allday-ev { background: #ffe7e5; color: #b3261e; border-left: 0.45vh solid var(--cal-red); padding: 0.4vh 0.8vw; font-size: 1.9vh; font-weight: 600; border-radius: 0.5vh; }
.cal-body { position: relative; min-height: 0; }
.cal-grid { position: absolute; inset: 1.2vh 0 1.2vh 7vw; }
.cal-hour { position: absolute; left: 0; right: 0; border-top: 1px solid var(--cal-line); }
.cal-hour-label { position: absolute; right: calc(100% + 1vw); top: -1.1vh; font-size: 1.7vh; color: var(--cal-muted); white-space: nowrap; }
.ev, .ev-open {
  position: absolute; left: 0.4vw; right: 30%;
  border-radius: 0.6vh; padding: 0.35vh 0.7vw; overflow: hidden;
  display: flex; align-items: baseline; gap: 1vw; min-height: 0;
}
.ev { border-left: 0.5vh solid; }
.ev-prepared { background: var(--cal-blue-tint); color: var(--cal-blue-ink); border-color: var(--cal-blue); }
.ev-random { background: var(--cal-purple-tint); color: var(--cal-purple-ink); border-color: var(--cal-purple); }
.ev-live.ev-prepared { background: var(--cal-blue); color: #fff; }
.ev-live.ev-random { background: var(--cal-purple); color: #fff; }
.ev-done { background: var(--cal-gray-tint); color: var(--cal-muted); border-color: #c7c7cc; }
.ev-title { font-weight: 600; font-size: 2.3vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ev-meta { font-size: 1.9vh; opacity: 0.85; white-space: nowrap; }
.ev-open { border: 1px dashed var(--cal-line); }
.ev-open-text { font-size: 1.8vh; color: #c7c7cc; }
.cal-now { position: absolute; left: -0.5vw; right: 0; border-top: 2px solid var(--cal-red); z-index: 3; }
.cal-now::before { content: ""; position: absolute; left: -0.5vh; top: -0.65vh; width: 1.1vh; height: 1.1vh; border-radius: 50%; background: var(--cal-red); }
.cal-now-label { position: absolute; right: calc(100% + 0.4vw); top: -1.2vh; background: var(--cal-red); color: #fff; font-size: 1.6vh; font-weight: 600; padding: 0.15vh 0.5vw; border-radius: 1vh; white-space: nowrap; }

/* Phone version: iOS-style list day view */
.ptabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: rgba(0, 0, 0, 0.18); padding: 3px; }
.ptab { border: 0; background: transparent; color: var(--white); padding: 10px; font-family: var(--display); font-weight: 600; font-size: 17px; text-transform: uppercase; cursor: pointer; }
.ptab[aria-selected="true"] { background: var(--paper); color: var(--ink); }
.pcal { border-radius: 12px; overflow: hidden; padding: 16px 14px 10px; display: grid; gap: 10px; }
.pcal .cal-date { font-size: 26px; }
.pcal .cal-weekday { font-size: 15px; }
.pcal .cal-allday-label { width: 52px; font-size: 12px; }
.pcal .cal-allday-ev { font-size: 14px; padding: 3px 8px; border-left-width: 3px; border-radius: 4px; }
.pcal-list { display: grid; }
.pcal-row {
  display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: stretch;
  border: 0; border-top: 1px solid var(--cal-line); background: transparent; padding: 6px 0; text-align: left;
  font-family: var(--cal-font); color: var(--cal-text); cursor: pointer; min-height: 48px;
}
.pcal-row:disabled { cursor: default; }
.pcal-time { font-size: 13px; color: var(--cal-muted); padding-top: 4px; }
.pcal-row .ev { position: static; display: grid; gap: 1px; padding: 5px 9px; border-left-width: 3px; border-radius: 5px; }
.pcal-row .ev-title { font-size: 15px; white-space: normal; }
.pcal-row .ev-meta { font-size: 12px; }
.pcal-row .ev-mine { outline: 2px solid var(--cal-text); outline-offset: 1px; }
.pcal-open { font-size: 14px; color: var(--cal-blue); padding-top: 4px; }
.sheet { background: var(--paper); color: var(--ink); padding: 18px; display: grid; gap: 14px; }
.sheet h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 28px; margin: 0; line-height: 1; }
.sheet p { color: rgba(0, 0, 0, 0.65); font-size: 15px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg button { border: 2px solid var(--ink); background: var(--white); color: var(--ink); padding: 12px 8px; font-family: var(--display); font-weight: 700; font-size: 18px; text-transform: uppercase; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--yellow); }
.sheet .field input { font-family: var(--body); font-weight: 600; font-size: 18px; background: var(--white); border: 2px solid var(--ink); }
.sheet .cta { font-size: 22px; }
.sheet .err { color: var(--red); }
.sheet .link-btn { color: rgba(0, 0, 0, 0.6); }

/* Host drawer: schedule controls */
.sched-box { display: grid; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 2px solid rgba(0, 0, 0, 0.12); }
.sched-box label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.sched-box input { font: 600 15px var(--body); padding: 5px 8px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); width: auto; }
.sched-box input[type="number"] { width: 64px; }
.sched-next { font-weight: 800; }
.sched-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* Host schedule as a day calendar: arrows, time, the talk (red bar like the TV calendar), actions. */
.sched-cal { list-style: none; margin: 0; padding: 0; display: grid; }
.sched-cal li { display: grid; grid-template-columns: 44px 76px 1fr auto; gap: 0 12px; align-items: center; min-height: 64px; border-top: 1px solid rgba(0, 0, 0, 0.12); padding: 6px 0; }
.sched-cal li:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.sched-cal .agenda-arrows { grid-row: auto; }
.sched-time { font-variant-numeric: tabular-nums; font-size: 14px; opacity: 0.6; }
.sched-ev { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.sched-cal li.booked .sched-ev { border-left: 4px solid var(--red); padding-left: 10px; }
.sched-cal li.done .sched-ev { border-left-color: rgba(0, 0, 0, 0.25); opacity: 0.6; }
.sched-cal li.live .sched-ev { border-left-color: var(--yellow); }
.sched-cal .agenda-moves { grid-column: 4; grid-row: auto; flex-wrap: wrap; justify-content: flex-end; }
.sched-pick { font: 600 16px var(--body); min-height: 44px; padding: 6px 10px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); }
.sched-list li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid rgba(0, 0, 0, 0.15); padding: 6px 10px; }
.sched-list .pn { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

/* =====================  BOARDROOM PHOTO (lobby + voting)  ===================== */
/* Container units are written as calc(N * var(--cqw, 1cqw)): browsers that know cqw use it as is;
   older ones (iPad Safari 15) get --cqw/--cqh in pixels from host.js instead. */
/* The Higgsfield boardroom fills a 16:9 stage; everything on it is positioned in stage percent
   and sized in cqw so it lines up with the chairs at any screen size. */
.board { display: grid; place-items: center; grid-template-rows: 1fr; gap: 0; padding: 0; background: #0b0908; }
.stage {
  position: relative;
  width: min(100vw, 177.78vh);
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  overflow: hidden;
}
.stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.board .board-head { position: absolute; left: calc(3.4 * var(--cqw, 1cqw)); right: calc(3.4 * var(--cqw, 1cqw)); top: calc(2.4 * var(--cqw, 1cqw)); align-items: flex-start; }
.board .board-title { font-size: calc(3.6 * var(--cqw, 1cqw)); text-shadow: 0 calc(0.2 * var(--cqw, 1cqw)) calc(1.2 * var(--cqw, 1cqw)) rgba(0, 0, 0, 0.6); }
.board .board-sub { font-size: calc(1.15 * var(--cqw, 1cqw)); margin-top: calc(0.7 * var(--cqw, 1cqw)); color: rgba(255, 248, 234, 0.75); }
.board .join-box { padding: calc(0.9 * var(--cqw, 1cqw)); gap: calc(0.9 * var(--cqw, 1cqw)); box-shadow: 0 calc(1 * var(--cqw, 1cqw)) calc(3 * var(--cqw, 1cqw)) rgba(0, 0, 0, 0.55); }
.board .join-box .qr { width: calc(6.6 * var(--cqw, 1cqw)); height: calc(6.6 * var(--cqw, 1cqw)); }
.board .join-text .small { font-size: calc(0.95 * var(--cqw, 1cqw)); }
.board .join-url { font-size: calc(1.3 * var(--cqw, 1cqw)); }
.board .code { font-size: calc(4.4 * var(--cqw, 1cqw)); }
.board .seats { position: absolute; inset: 0; }
.board .table-center {
  position: absolute; left: 30%; right: 30%; top: 43%; bottom: 43%;
  font-size: calc(1.3 * var(--cqw, 1cqw)); color: rgba(255, 248, 234, 0.8); text-shadow: 0 calc(0.15 * var(--cqw, 1cqw)) calc(0.6 * var(--cqw, 1cqw)) rgba(0, 0, 0, 0.7);
}
.board .table-center strong { font-size: calc(3 * var(--cqw, 1cqw)); color: var(--yellow); }
.board .seat { width: calc(6.2 * var(--cqw, 1cqw)); aspect-ratio: 1.75 / 1; }
.board .face { padding: calc(0.3 * var(--cqw, 1cqw)); box-shadow: 0 calc(0.35 * var(--cqw, 1cqw)) calc(0.9 * var(--cqw, 1cqw)) rgba(0, 0, 0, 0.55); }
.board .seat-name { font-size: calc(1.05 * var(--cqw, 1cqw)); }
.board .seat-num { display: none; }
.board .locked-stamp { font-size: calc(0.95 * var(--cqw, 1cqw)); }
.board .seat.empty .face.front { outline: none; background: transparent; box-shadow: none; }
.board .seat.empty .face.back { display: none; }
.board .head-seat {
  left: 12.8%; top: 48.7%; transform: translate(-50%, -50%);
  min-width: 0; width: calc(8.4 * var(--cqw, 1cqw)); padding: calc(0.6 * var(--cqw, 1cqw)) calc(0.4 * var(--cqw, 1cqw)); z-index: 2;
}
.board .head-seat .small { font-size: calc(0.8 * var(--cqw, 1cqw)); }
.board .head-seat .name { font-size: calc(1.6 * var(--cqw, 1cqw)); overflow-wrap: anywhere; }
.board .board-foot { position: absolute; left: calc(3.4 * var(--cqw, 1cqw)); right: calc(3.4 * var(--cqw, 1cqw)); bottom: calc(2 * var(--cqw, 1cqw)); font-size: calc(1.05 * var(--cqw, 1cqw)); color: rgba(255, 248, 234, 0.7); }
.board .vote-count { font-size: calc(2.6 * var(--cqw, 1cqw)); }

/* Join box: long tunnel addresses wrap instead of stretching the box; keep the "Room code" label clear of the chip. */
.board .join-box { max-width: calc(30 * var(--cqw, 1cqw)); align-items: center; }
.board .join-text { min-width: 0; gap: calc(0.4 * var(--cqw, 1cqw)); }
.board .join-url { font-size: calc(1.05 * var(--cqw, 1cqw)); line-height: 1.2; overflow-wrap: anywhere; }
.board .code { line-height: 1.05; margin-top: calc(0.15 * var(--cqw, 1cqw)); }

/* Join info, restyled to match the headline: no box, big yellow room code in the display face,
   the address in the subtitle style, QR on a small cream square (it needs the contrast to scan). */
.board .join-box {
  background: none; box-shadow: none; padding: 0; max-width: calc(40 * var(--cqw, 1cqw));
  display: flex; align-items: center; gap: calc(1.6 * var(--cqw, 1cqw)); color: var(--paper);
}
.board .join-text { display: grid; gap: calc(0.5 * var(--cqw, 1cqw)); justify-items: end; text-align: right; min-width: 0; }
.board .code {
  font-family: var(--display); font-weight: 700; color: var(--yellow);
  font-size: calc(5.4 * var(--cqw, 1cqw)); line-height: 0.9; letter-spacing: 0.04em; margin: 0;
  text-shadow: 0 calc(0.2 * var(--cqw, 1cqw)) calc(1.2 * var(--cqw, 1cqw)) rgba(0, 0, 0, 0.6);
}
.board .join-sub { font-size: calc(1.15 * var(--cqw, 1cqw)); line-height: 1.35; color: rgba(255, 248, 234, 0.75); max-width: calc(24 * var(--cqw, 1cqw)); }
.board .join-url { font-family: var(--body); font-weight: 600; font-size: inherit; color: var(--paper); overflow-wrap: anywhere; }
.board .join-box .qr { width: calc(7.4 * var(--cqw, 1cqw)); height: calc(7.4 * var(--cqw, 1cqw)); flex: none; background: var(--paper); padding: calc(0.55 * var(--cqw, 1cqw)); }

/* Outpainted wide boardroom behind the 16:9 stage, scaled to the stage's height and centered,
   so screens wider than 16:9 get more carpet instead of black bars. The 1.0085 matches the
   stage photo's slight cover crop (source is 1.763:1, stage is 1.778:1). */
.board {
  background: #0b0908 url(/img/boardroom-wide.jpg) center / auto calc(min(100vh, 56.25vw) * 1.0085) no-repeat;
}

/* =====================  RESPONSIVE ROOM (final layout, overrides the rules above)  ===================== */
/* --u is "1% of a 16:9 frame that fits the window", the same unit the slides would use.
   The room (wide photo + stage) is sized by host.js so it fills the window without cropping the table.
   Beyond the photo the floor continues as #050403, the color its outer edges fade to. */
.board {
  display: block; padding: 0; overflow: hidden;
  background: #050403;
  --u: min(1vw, 1.7778vh);
}
.room { position: absolute; left: 50%; top: 50%; width: 100vw; height: 42.4vw; transform: translate(-50%, -50%); }
.room-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.room::after {
  /* soft fade where the photo meets the plain floor color, visible only when the photo is smaller than the window */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, #050403 0, transparent 3%, transparent 97%, #050403 100%),
    linear-gradient(to bottom, #050403 0, transparent 6%, transparent 94%, #050403 100%);
}
.board .stage {
  position: absolute; left: 12.595%; top: 0; width: 74.81%; height: 100%;
  aspect-ratio: auto; overflow: visible; container-type: inline-size; z-index: 1;
}
.board .stage-bg {
  object-fit: fill;
  /* feather the sharp 4K photo into the wide one underneath so there is no seam */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}

/* Title, room code and footer pin to the window corners, sized in --u */
.board .board-head {
  position: absolute; z-index: 3;
  left: calc(var(--u) * 3.4); right: calc(var(--u) * 3.4); top: calc(var(--u) * 2.4);
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: calc(var(--u) * 2);
}
.board .board-title { font-size: calc(var(--u) * 3.6); }
.board .board-sub { font-size: calc(var(--u) * 1.15); margin-top: calc(var(--u) * 0.7); }
.board .join-box { max-width: calc(var(--u) * 40); gap: calc(var(--u) * 1.6); margin-left: auto; }
.board .join-text { gap: calc(var(--u) * 0.5); }
.board .code { font-size: calc(var(--u) * 5.4); }
.board .join-sub { font-size: calc(var(--u) * 1.15); max-width: calc(var(--u) * 24); }
.board .join-box .qr { width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); padding: calc(var(--u) * 0.55); }
.board .board-foot {
  position: absolute; z-index: 3;
  left: calc(var(--u) * 3.4); right: calc(var(--u) * 3.4); bottom: calc(var(--u) * 2);
  font-size: calc(var(--u) * 1.05);
}
.board .vote-count { font-size: calc(var(--u) * 2.6); }

/* Live byline on opener slides, laid over the slide image's empty lower area (16:9 frame). */
.present { position: fixed; }
.opener-by {
  position: absolute;
  left: calc(50vw - min(50vw, 88.89vh) + min(100vw, 177.78vh) * 0.073);
  bottom: calc(50vh - min(50vh, 28.125vw) + min(56.25vw, 100vh) * 0.12);
  max-width: calc(min(100vw, 177.78vh) * 0.8);
  background: var(--red); color: var(--white);
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: calc(min(100vw, 177.78vh) * 0.024); line-height: 1.15;
  padding: 0.4em 0.7em 0.45em;
}

/* view=tv (the screen AirPlayed to the TV): no controls or host messages, ever. */
body.tv-only #drawer, body.tv-only #drawer-toggle, body.tv-only #host-msg, body.tv-only .draw-error { display: none !important; }
body.tv-only #board-hint { display: none; } /* "Press L for standings" is for Sam, not the room */
.fresh { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(21, 21, 21, 0.15); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fresh p { margin: 0 0 4px; flex-basis: 100%; }

/* view=remote (Sam's iPad): the controls panel is docked open under a live copy of the TV, sized for fingers. */
/* The iPad is all controls: the panel fills the screen, with no TV preview above it. */
body.remote .drawer { --pt: max(16px, env(safe-area-inset-top, 0px)); --px: 20px; top: 0; max-height: none; box-shadow: none; padding: var(--pt) var(--px) max(20px, env(safe-area-inset-bottom, 0px)); font-size: 17px; }
body.remote { background: var(--paper); }
body.remote .drawer-toggle, body.remote .keys { display: none; }
body.remote .btn { min-height: 52px; padding: 10px 18px; font-size: 17px; touch-action: manipulation; }
body.remote #drawer-actions .btn.dark { min-width: 26vw; min-height: 64px; font-size: 22px; } /* Next slide: the one you hit most */
body.remote .drawer-bar { align-items: center; }
body.remote .drawer .row { gap: 10px; }
body.remote .plist { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
body.remote .plist li { padding: 12px; gap: 10px; }
body.remote .plist .meta { font-size: 14px; }
body.remote .draw-form input { font-size: max(16px, 7vh); } /* 16px+ keeps iPad Safari from zooming in on tap */

body.remote .drawer input { font-size: 17px; min-height: 48px; padding: 6px 10px; }

/* Schedule open: the boardroom shrinks into the left three quarters (everything on it is sized in cqw,
   so it all scales together) and the calendar slides in as a panel on the right quarter. */
/* --u is the header/footer size unit; registering it lets it animate along with the table. */
@property --u { syntax: "<length>"; inherits: true; initial-value: 10px; }
#s-board { transition: right 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), --u 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.room { transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
body.with-schedule #s-board { right: 25vw; --u: min(0.75vw, 1.7778vh); }
body.with-schedule #s-schedule {
  left: 75vw; padding: 3vh 1.3vw 2.4vh; gap: 1vh;
  box-shadow: -0.6vw 0 3vw rgba(0, 0, 0, 0.45);
  animation: panel-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes panel-in { from { transform: translateX(100%); } }
body.with-schedule .cal-head { flex-direction: column; gap: 0.2vh; }
body.with-schedule .cal-date { font-size: 3.4vh; }
body.with-schedule .cal-weekday { font-size: 1.9vh; }
body.with-schedule .cal-allday { gap: 0.6vw; }
body.with-schedule .cal-allday-label { width: 3.2vw; font-size: 1.4vh; }
body.with-schedule .cal-allday-ev { font-size: 1.7vh; padding: 0.3vh 0.6vw; }
body.with-schedule .cal-grid { left: 3.8vw; }
body.with-schedule .cal-hour-label { font-size: 1.4vh; right: calc(100% + 0.5vw); }
body.with-schedule .cal-now-label { font-size: 1.3vh; padding: 0.1vh 0.35vw; }
body.with-schedule .ev, body.with-schedule .ev-open { right: 0; left: 0.2vw; flex-direction: column; align-items: stretch; gap: 0; padding: 0.3vh 0.5vw; justify-content: center; }
body.with-schedule .ev-title { font-size: 1.8vh; }
body.with-schedule .ev-meta { font-size: 1.45vh; overflow: hidden; text-overflow: ellipsis; }
body.with-schedule .ev-open-text { font-size: 1.5vh; }
@media (prefers-reduced-motion: reduce) {
  #s-board, .room { transition: none; }
  body.with-schedule #s-schedule { animation: none; }
}

body.with-schedule { background: #050403; } /* nothing but dark floor behind the table and panel as they move */

/* Phone voting: four categories, each a row of 0-5. */
.cat { display: grid; gap: 8px; }
.cat-head { display: grid; gap: 2px; }
.cat-label { font-family: var(--display); font-weight: 700; font-size: 24px; text-transform: uppercase; }
.cat-hint { font-size: 14px; color: var(--muted); }
.cat-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cat-btn { border: 0; background: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 26px;
  height: 52px; cursor: pointer; touch-action: manipulation; }
.cat-btn[aria-pressed="true"] { background: var(--yellow); outline: 4px solid var(--red); outline-offset: -4px; }
.cat-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* The score lands: the red background and the red name and vote labels snap to the score's green. */
.reveal { transition: background-color 0.15s ease; }
.reveal .who, .reveal .outof { transition: background-color 0.15s ease, color 0.15s ease; }
.reveal.won { background: #43e07f; }
.reveal.won .who, .reveal.won .outof { background: #43e07f; color: #0c3a1d; }

/* Phone: guest agenda items */
.sheet .field textarea {
  font-family: var(--body); font-weight: 600; font-size: 18px; line-height: 1.35; padding: 10px 12px;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-radius: 0; width: 100%; resize: none;
}
.sheet .field textarea:focus { outline: 4px solid var(--red); outline-offset: 2px; }
.agenda-label { display: flex; justify-content: space-between; align-items: baseline; }
.agenda-label b { font-weight: 600; }
.agenda-count { font-style: normal; font-weight: 600; color: rgba(0, 0, 0, 0.5); letter-spacing: 0; text-transform: none; }
.sheet p strong { color: var(--ink); }
.agenda-note { color: var(--room) !important; font-weight: 600; }
.agenda-h { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 26px; margin: 4px 0 0; line-height: 1; }
.agenda-list { list-style: none; counter-reset: item; margin: 0; padding: 0; display: grid; gap: 18px; }
.agenda-list li { counter-increment: item; display: grid; gap: 4px; padding-left: 40px; position: relative; }
.agenda-list li::before {
  content: counter(item); position: absolute; left: 0; top: 0; min-width: 28px; text-align: center;
  background: var(--yellow); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 18px; padding: 1px 4px;
}
.agenda-text { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.15; text-transform: uppercase; }
.agenda-by { font-size: 14px; color: var(--muted); }

/* Host drawer: guest agenda items */
.agenda-host { margin: 0 0 18px; display: grid; gap: 8px; }
.agenda-host h3 { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 20px; }
.agenda-host ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.agenda-host li { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; }
.agenda-host-text { grid-column: 2; font-weight: 600; }
.agenda-host li .meta { grid-column: 2; font-size: 13px; opacity: 0.7; }
.agenda-moves { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 6px; }
/* Up/down arrows stacked on the left of each item, like votes on a forum post. */
.agenda-arrows { grid-column: 1; grid-row: 1 / span 2; display: grid; gap: 2px; }
.agenda-arrow { width: 44px; height: 30px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; touch-action: manipulation; display: grid; place-items: center; }
.agenda-arrow svg { width: 22px; height: 22px; fill: currentColor; }
.agenda-arrow:active:not(:disabled) { color: var(--red); }
.agenda-arrow:disabled { opacity: 0.2; cursor: default; }

/* TV: Agenda Items segment. Built at 1920 x 1080 from Sam's Figma slide 1, in container units
   (1080px = calc(100 * var(--cqh, 1cqh))) so it scales to any TV and stays 16:9. */
.agenda-screen { background: var(--room); place-items: center; }
.agenda-stage { position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; container-type: size; background: var(--room); }
.agenda-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.agenda-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(3.7 * var(--cqh, 1cqh)); padding: calc(9.26 * var(--cqh, 1cqh)) calc(8 * var(--cqw, 1cqw)); text-align: center; color: var(--white);
}
.agenda-card[hidden] { display: none; }
.agenda-chip { display: flex; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: calc(5.93 * var(--cqh, 1cqh)); line-height: 1; }
.agenda-chip-red { background: var(--red); color: var(--white); padding: calc(0.93 * var(--cqh, 1cqh)) calc(1.04 * var(--cqw, 1cqw)) calc(1.11 * var(--cqh, 1cqh)); }
.agenda-chip-num { background: var(--yellow); color: var(--ink); padding: calc(0.93 * var(--cqh, 1cqh)) calc(1.04 * var(--cqw, 1cqw)) calc(1.11 * var(--cqh, 1cqh)); }
.agenda-title {
  margin: 0; max-width: calc(83.96 * var(--cqw, 1cqw)); font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: calc(18.52 * var(--cqh, 1cqh)); line-height: 0.9; text-wrap: balance; overflow-wrap: anywhere;
}
.agenda-sub { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: calc(5.09 * var(--cqh, 1cqh)); line-height: 1; }
.agenda-sub[hidden] { display: none; }
/* A picture item (the group chat photo): 546 of 1080 tall, like it was in Figma. */
.agenda-stage .agenda-photo { position: static; inset: auto; height: calc(50.56 * var(--cqh, 1cqh)); width: auto; object-fit: contain; display: block; }
.agenda-stage .agenda-photo[hidden], .agenda-title[hidden] { display: none; }

.agenda-stage img[hidden] { display: none; }

/* Agenda: 5-minute clock in the corner. Yellow like every other number; red with TIME when it runs out. */
.agenda-timer {
  position: absolute; right: calc(3.13 * var(--cqw, 1cqw)); bottom: calc(4.63 * var(--cqh, 1cqh)); z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: calc(5.93 * var(--cqh, 1cqh)); line-height: 1; text-transform: uppercase;
  background: var(--yellow); color: var(--ink); padding: calc(0.93 * var(--cqh, 1cqh)) calc(1.04 * var(--cqw, 1cqw)) calc(1.11 * var(--cqh, 1cqh)); min-width: calc(7.5 * var(--cqw, 1cqw)); text-align: center;
  font-variant-numeric: tabular-nums;
}
.agenda-timer[hidden] { display: none; }
.agenda-timer.paused { opacity: 0.55; }
.agenda-timer.up { background: var(--red); color: var(--white); }
.drawer-clock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.drawer-clock strong { font-family: var(--display); font-size: 22px; min-width: 120px; font-variant-numeric: tabular-nums; }


/* Host list: the whole agenda as one list; the item on the TV is underlined in yellow. */
.agenda-host li.on .agenda-host-text { text-decoration: underline 3px var(--yellow); text-underline-offset: 4px; }

/* iPad remote: the agenda slide fits in the space above the panel. */
body.remote .agenda-screen { bottom: var(--drawer-h, 0px); }
body.remote .agenda-stage { width: min(100vw, calc((100vh - var(--drawer-h, 0px)) * 16 / 9)); }
.agenda-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 2px 0 6px; }
.agenda-add input { flex: 3 1 260px; font: inherit; min-height: 44px; padding: 6px 10px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); }
.agenda-add input + input { flex: 1 1 180px; }

/* Q&A: white on black, centered */
.prepared.qa { background: #000; justify-items: center; align-content: center; padding: 0; }
.prepared.qa h1 { font-size: 34vh; color: var(--white); text-align: center; max-width: none; }

/* Voting tracker in the host controls */
.vote-tracker { margin: 4px 0 12px; }
.vote-tracker p { margin: 0 0 10px; font-size: 18px; line-height: 1.35; }
.vote-tracker .vote-tracker-n { font-family: var(--display); font-weight: 600; font-size: 26px; text-transform: uppercase; }
.vote-tracker .vote-tracker-n strong { font-weight: 700; }
.vote-tracker .vote-tracker-note { font-size: 15px; opacity: 0.75; }

/* Asks for one click so the browser allows the next-slide sound */
.sound-on { position: fixed; left: 2vw; bottom: 2vh; z-index: 50; background: var(--ink, #111); color: #fff; font-size: 1.8vh; padding: 0.8vh 1.2vw; }

/* iPad: the page itself scrolls (not a box inside it), so the header stays pinned on older iPad Safari too,
   which can't pin things inside a scrolling box. */
body.remote.tv { overflow: visible; height: auto; min-height: 100%; }
body.remote .drawer { position: relative; top: 0; bottom: auto; min-height: 100vh; overflow: visible; box-sizing: border-box; }
body.remote .drawer-head { position: -webkit-sticky; position: sticky; }

/* Phone: the agenda item on the TV, drawn like the slide, then Yay / Nay */
.phone-agenda { display: grid; gap: 16px; justify-items: start; }
.phone-agenda .agenda-chip { font-size: 22px; }
.phone-agenda .agenda-chip-red, .phone-agenda .agenda-chip-num { padding: 4px 8px 5px; }
.phone-agenda-title { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 0.95; overflow-wrap: anywhere; }
.phone-agenda-by { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 18px; }
.yaynay { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 8px; }
.yaynay-btn { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 34px; min-height: 92px; border: 3px solid var(--white); background: transparent; color: var(--white); cursor: pointer; touch-action: manipulation; }
.yaynay-btn.yay.on { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.yaynay-btn.nay.on { background: var(--red); border-color: var(--red); color: var(--white); }
.yaynay-note { margin: 0; color: var(--muted); font-size: 16px; }
.ranks-head { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 22px; margin: 18px 0 6px; }
.mini-ranks .avg { white-space: nowrap; }

/* Standings on the TV: presenters on the left, agenda items on the right */
.leader-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6vw; align-items: start; min-height: 0; }
.leader-cols h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 4vh; margin: 0 0 1.5vh; color: var(--muted); }
.leader-cols .ranks { grid-auto-flow: row; grid-template-rows: none; }
.leader-cols .ranks li { grid-template-columns: 3vw 1fr auto; }
.agenda-ranks .agenda-cell { display: grid; gap: 0.5vh; justify-items: start; }
.agenda-ranks .nm { font-size: 2.8vh; line-height: 1.1; }
.agenda-ranks li:first-child .nm { font-size: 3.4vh; }
.agenda-ranks .tally { font-size: 1.9vh; color: var(--muted); }
.drawer-tally { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 22px; margin: 0 0 8px; }
.my-bookings { margin: -4px 0 16px; padding-left: 20px; display: grid; gap: 8px; font-size: 17px; }
.sched-select { font: inherit; font-size: 17px; min-height: 48px; padding: 6px 10px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); border-radius: 0; }

/* Slots blocked off for the Agenda Items segment */
.sched-cal li.agenda-block .sched-ev { border-left-color: var(--ink); }
.sched-cal li.agenda-block.live .sched-ev { border-left-color: var(--yellow); }
.ev-agenda { background: #fff1e0; color: #8a4b00; border-color: #ff9500; }
.ev-live.ev-agenda { background: #ff9500; color: #fff; }
.ev-done.ev-agenda { background: var(--cal-gray-tint); color: var(--cal-muted); border-color: #c7c7cc; }

/* Editing an agenda item in the host list */
.agenda-edit { display: grid; gap: 8px; }
.agenda-edit textarea { font: inherit; font-size: 17px; padding: 8px 10px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); resize: vertical; width: 100%; box-sizing: border-box; }
.agenda-edit-err { margin: 0; color: var(--red); font-size: 15px; }

/* iPad: the random-deck number boxes inside the panel */
.drawer-draw-hint { margin: 0 0 16px; font-size: 18px; }
body.remote .drawer .draw-form { justify-content: flex-start; gap: 12px; }
body.remote .drawer .draw-form label { font-size: 14px; color: var(--ink); }
body.remote .drawer .draw-form input { width: 96px; min-width: 0; height: 96px; min-height: 0; font-size: 48px; padding: 0; border-width: 3px; }
body.remote .drawer .draw-form .big-btn { font-size: 24px; min-height: 96px; padding: 0 24px; }
body.remote .drawer .draw-error { font-size: 17px; margin-top: 12px; }

/* Presentation scoring on/off (iPad, Schedule tab). Off: standings show agenda items only. */
.scoring-switch { padding-bottom: 12px; border-bottom: 2px solid rgba(0, 0, 0, 0.12); }
.scoring-label { font-weight: 800; font-size: 17px; }
.scoring-switch .seg { width: 200px; }
.scoring-switch .meta { flex-basis: 100%; }
.leader-cols.agenda-only { grid-template-columns: 1fr; }