@import url("https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700;800&family=Caveat:wght@700&family=DM+Sans:wght@400;500;600;700&family=Merriweather:wght@700&family=Oswald:wght@500;600&display=swap");

:root {
  color-scheme: dark;
  --bg: #111315;
  --panel: #1b1e21;
  --line: #34373a;
  --ink: #edeae3;
  --muted: #929695;
  --gold: #ffd677;
  --blue: #152bac;
  --sans: "DM Sans", Arial, sans-serif;
  --condensed: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  /* The board: show-style blue screens and gold values. */
  --screen-hi: #2236ff;
  --screen: #0c1ad6;
  --screen-lo: #060d93;
  --value-gold: #ffc93e;
  --board-display: Anton, Impact, "Arial Narrow", sans-serif;
  --board-label: Oswald, "Arial Narrow", sans-serif;
  --board-serif: Merriweather, Georgia, "Times New Roman", serif;
  --board-hand: Caveat, "Segoe Print", "Bradley Hand", cursive;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px var(--sans);
  min-height: 100vh;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.4;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #24272a;
}
button {
  padding: 10px 15px;
  font-weight: 600;
  transition: background 0.15s;
}
button:hover:not(:disabled) {
  background: #33373a;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.primary {
  background: var(--gold);
  color: #242017;
  border-color: var(--gold);
}
.primary:hover:not(:disabled) {
  background: #ffe4a4;
}
.ghost {
  background: transparent;
}
.danger {
  color: #ffa4a4;
}
.small {
  padding: 7px 11px;
  font-size: 12px;
}
.muted {
  color: var(--muted);
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 7px 11px;
  font-size: 11px;
  color: #c0c2bc;
}
.lamp {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ee6a0;
  box-shadow: 0 0 7px #9ee6a055;
}
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.divider {
  width: 1px;
  height: 24px;
  background: var(--line);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: 30px;
  letter-spacing: -1px;
}
h2 {
  font-size: 23px;
  letter-spacing: -0.6px;
}
h3 {
  font-size: 16px;
}
input,
textarea,
select {
  padding: 10px 12px;
  width: 100%;
  outline: none;
}
textarea {
  resize: vertical;
  line-height: 1.5;
  min-height: 65px;
}
label {
  display: block;
  color: #b6b8b4;
  font-size: 12px;
  margin-bottom: 6px;
}
label input,
label select {
  margin-top: 7px;
}
input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--gold);
}
.field {
  margin-bottom: 16px;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.empty {
  padding: 40px;
  text-align: center;
  color: var(--muted);
}

/* TV board: the look of the show's game board. Blue monitors split by black
   seams, gold dollar values in a heavy condensed face, white clue text in a
   bold serif with a hard drop shadow, and contestant podiums along the bottom. */
body:has(.studio) {
  background: var(
    --tv-page,
    radial-gradient(ellipse 90% 60% at 50% 0%, #142078 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 110%, #0d1660 0%, transparent 70%),
    #03040d
  );
  background-attachment: fixed;
}
.studio {
  max-width: 1720px;
  margin: 0 auto;
  padding: 18px 32px 16px;
  /* One screen tall: the board takes whatever the header, intro and
     podiums leave, so 1 to 12 teams always fit. */
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
}
.studio > * {
  flex: none;
}
.studio > .board-frame {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.studio-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.studio-header .ghost,
.studio-header .pill {
  border-color: #2b3360;
  color: #c9cff3;
}
.sound-toggle.off {
  color: #9aa0bf;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
}
.brand-mark {
  font: 400 25px var(--board-display);
  color: var(--value-gold);
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 35%, var(--screen-hi), var(--screen) 60%, var(--screen-lo));
  border: 2px solid #000;
  outline: 1px solid #59627a;
  text-shadow: 2px 2px 0 #000;
  transform: rotate(-4deg);
}
.brand-name {
  font: 700 24px var(--condensed);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  line-height: 1.1;
}
.brand-caption {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-top: 5px;
}
.studio-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 14px 0 12px;
  gap: 20px;
}
.studio-intro .eyebrow {
  color: #aab3e6;
}
.wordmark,
.round-title {
  font-family: var(--board-display);
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.03em #0b1590;
  text-shadow:
    0.02em 0.03em 0 #3347e8,
    0.04em 0.06em 0 #1222b8,
    0.06em 0.09em 0 #0a157e,
    0.08em 0.12em 0.12em #000c;
}
.round-title {
  font-size: 34px;
  margin: 4px 0 0;
  letter-spacing: 0.03em;
}
.round-nav {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font: 600 13px var(--board-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5c6699;
}
.round-nav .active {
  color: var(--value-gold);
}
.round-nav .clues-left {
  color: #aab3e6;
  padding-left: 18px;
  border-left: 1px solid #2b3360;
}

/* The board itself: a wall of monitors. */
.board-frame {
  background: var(--seam, #000);
  padding: 7px;
  border: 2px solid #3a4152;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px #000,
    0 0 0 4px #1b2030,
    0 0 0 5px #4d5770,
    0 30px 80px #000c,
    0 0 140px var(--frame-glow, #1d2fff2e);
}
.board {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: auto repeat(5, minmax(36px, 1fr));
  gap: 6px;
}
.category,
.clue-screen,
.big-screen,
.clue-card {
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%, var(--screen-hi) 0%, var(--screen) 55%, var(--screen-lo) 100%);
  box-shadow: inset 0 0 22px #00002a99;
}
.category {
  display: grid;
  place-items: center;
  height: clamp(54px, 8.5vh, 96px);
  padding: 6px 10px;
  margin-bottom: 6px;
  text-align: center;
  color: #fff;
  font: 600 clamp(17px, 1.5vw, 28px) / 1.05 var(--board-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0.07em 0.08em 0 #000;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.clue-screen {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--value-gold);
  container-type: size;
  font: 400 30px / 1 var(--board-display);
  letter-spacing: 0.02em;
  text-shadow:
    0.05em 0.06em 0 #000,
    0 0 0.4em #0008;
  transition: filter 0.15s;
}
/* Values scale with their square, whatever the screen and team count. */
.clue-screen span {
  font-size: clamp(16px, min(25cqi, 64cqh), 74px);
}
.clue-screen:hover:not(:disabled) {
  background: radial-gradient(ellipse 120% 90% at 50% 40%, var(--screen-hover-hi, #3346ff), var(--screen-hover, #1424ea) 60%, var(--screen-hover-lo, #0a14b0));
}
.clue-screen:disabled {
  opacity: 1;
}
.clue-screen.used {
  background: radial-gradient(ellipse 120% 90% at 50% 40%, var(--screen-used-hi, #0e1bc2), var(--screen-used, #0812a2) 60%, var(--screen-used-lo, #050b78));
}
.clue-screen:focus-visible {
  outline: 3px solid var(--value-gold);
  outline-offset: -3px;
}
.clue-screen.filling {
  animation: fill-in 0.28s ease-out both;
}
@keyframes fill-in {
  from {
    color: transparent;
    text-shadow: none;
  }
  40% {
    filter: brightness(1.7);
  }
}

/* Contestant podiums: name on top, score display below. */
.studio-footer {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-top: 16px;
}
.podiums {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.podiums.two-rows {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 7px;
}
.podium {
  container-type: inline-size;
  flex: 1 1 0;
  min-width: 0;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 5px 0;
  background: linear-gradient(#454d61, #1d222e 30%, #12151d);
  border: 1px solid #5e677d;
  border-radius: 6px;
  box-shadow: 0 8px 20px #000b;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.podium:after {
  content: "";
  height: 5px;
  margin: 1px -5px 0;
  border-radius: 0 0 5px 5px;
  background: var(--team-color);
  opacity: 0.85;
}
.podium-name {
  padding: 3px 8px 1px;
  background: #060a2e;
  border-radius: 3px 3px 0 0;
  color: #fff;
  font: 700 clamp(17px, 13cqi, 32px) / 1.15 var(--board-hand);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.podium-score {
  padding: 0.16em 0.2em 0.12em;
  border-radius: 0 0 3px 3px;
  background: radial-gradient(ellipse 120% 100% at 50% 40%, var(--screen-hi), var(--screen) 60%, var(--screen-lo));
  color: #fff;
  font: 400 clamp(20px, 20cqi, 46px) / 1 var(--board-display);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0.05em 0.06em 0 #000;
}
.podium-score.negative {
  color: #ff5247;
  text-shadow:
    0.05em 0.06em 0 #000,
    0 0 0.35em #ff241866;
}
.two-rows .podium {
  max-width: none;
}
.two-rows .podium-name {
  font-size: clamp(15px, 12cqi, 26px);
}
.two-rows .podium-score {
  font-size: clamp(18px, 17cqi, 34px);
}
/* Ringing in lights the podium, like the show's podium lights. */
.podium.buzzed {
  border-color: #fff;
  box-shadow:
    0 0 0 2px var(--team-color),
    0 0 28px var(--team-color);
}
.podium.buzzed .podium-name {
  box-shadow:
    inset 0 0 0 2px #fff,
    0 0 14px #fff9;
}
.studio-footer .join-card {
  flex: none;
  max-width: 340px;
  background: #0a0e2a;
  border-color: #2b3360;
}
.studio-footer .join-url {
  font-size: 17px;
}
.studio-footer .join-code b {
  color: var(--value-gold);
}
.footer-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Final Jeopardy and the closing screen fill the board's frame. */
.big-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  padding: 5vh 6vw;
  text-align: center;
  color: #fff;
}
.big-screen .clue-meta {
  position: static;
}
/* A long Final clue (over about 140 characters) a size down, so it and the
   answer fit the board's frame. */
.final-screen .clue-prompt.long-clue {
  font-size: clamp(22px, 3vw, 58px);
}
.final-title {
  font-size: clamp(48px, 7vw, 128px);
  line-height: 1;
  animation: pop-in 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.final-category {
  font: 600 clamp(34px, 4.6vw, 84px) / 1.1 var(--board-label);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: 0.06em 0.07em 0 #000;
  animation: fade-up 0.6s 0.9s ease-out both;
}
.winner {
  margin: 0;
  font: 400 clamp(64px, 9vw, 170px) / 1.05 var(--board-display);
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0.05em 0.06em 0 #000;
  overflow-wrap: anywhere;
  animation: pop-in 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.winner-score {
  font: 400 clamp(48px, 6.5vw, 120px) / 1 var(--board-display);
  color: var(--value-gold);
  text-shadow: 0.05em 0.06em 0 #000;
}
.winner-score.negative {
  color: #ff5247;
}
.big-screen p {
  color: #d4d9f7;
  font: 600 20px var(--board-label);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #0b0d0fdc;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: auto;
}
/* An open clue fills the screen. */
.clue-overlay {
  background: #000;
  backdrop-filter: none;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}
.overlay-ghost {
  pointer-events: none;
  z-index: 11;
}
.clue-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2.5vh 2.5vw;
  min-height: 100%;
}
.clue-card {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3.5vh;
  padding: 9vh 7vw;
  min-height: 300px;
  text-align: center;
  overflow: hidden;
  border: 4px solid #000;
  outline: 2px solid #4d5770;
  will-change: transform;
}
/* Centred with auto margins rather than justify-content, so a card that
   gets too full runs off the bottom instead of pushing the clue up. */
.clue-card > .clue-meta + * {
  margin-top: auto;
}
.clue-card > :last-child {
  margin-bottom: auto;
}
.clue-card .clue-meta {
  position: absolute;
  top: 3vh;
  left: 0;
  right: 0;
}
.clue-meta {
  font: 600 clamp(14px, 1.3vw, 24px) var(--board-label);
  letter-spacing: 0.12em;
  color: #c3cbff;
  text-transform: uppercase;
  text-shadow: 0.06em 0.08em 0 #000;
}
.clue-prompt {
  max-width: 1500px;
  color: #fff;
  font: 700 clamp(26px, 4vw, 80px) / 1.3 var(--board-serif);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0.07em 0.07em 0 #000;
  position: relative;
  z-index: 3;
  animation: fade-in 0.35s ease-out both;
}
.answer {
  color: var(--value-gold);
  font: 700 clamp(22px, 3vw, 58px) / 1.25 var(--board-serif);
  text-transform: uppercase;
  text-shadow: 0.07em 0.07em 0 #000;
  position: relative;
  z-index: 3;
  animation: fade-in 0.35s ease-out both;
}
/* Buzzers open: the light bars down the sides of the board come on. */
.clue-card.buzzers-open:before,
.clue-card.buzzers-open:after {
  content: "";
  position: absolute;
  top: 7%;
  bottom: 7%;
  left: 14px;
  width: 12px;
  border-radius: 6px;
  background: linear-gradient(#fff, #fff6d8 50%, #fff);
  box-shadow:
    0 0 18px #fff,
    0 0 50px #ffe9a8;
}
.clue-card.buzzers-open:after {
  left: auto;
  right: 14px;
}
.buzz-status {
  position: relative;
  z-index: 3;
  font: 600 clamp(20px, 1.8vw, 34px) var(--board-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c3cbff;
  text-shadow: 0.06em 0.08em 0 #000;
}
.buzz-status.open {
  color: #fff;
}
.buzz-status.won {
  color: var(--team-color);
}
.clue-controls {
  flex: none;
}

/* Daily Double: the clue's square opens on a spinning splash. */
.overlay.daily .clue-card {
  background:
    radial-gradient(circle at 50% 50%, #0000 0, var(--dd-edge, #00003a) 75%),
    repeating-conic-gradient(from 0deg at 50% 50%, var(--dd-a, #1a2cf2) 0deg 9deg, var(--dd-b, #0a15b4) 9deg 18deg);
}
.dd-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  font: 400 clamp(64px, 12vw, 240px) / 0.92 var(--board-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: linear-gradient(#fffbe0 0%, #ffd84a 38%, #ff9a1a 62%, #e0281c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.025em #3a0a00;
  filter: drop-shadow(0.04em 0.05em 0 #000) drop-shadow(0 0 0.25em #ffb34088);
  transform: skewX(-8deg);
  animation: dd-in 1.1s cubic-bezier(0.2, 0.8, 0.3, 1.05) both;
}
@keyframes dd-in {
  from {
    transform: scale(0.04) rotate(-720deg) skewX(-8deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
}
.overlay.daily .wager-form label {
  color: #fff;
}

/* Someone rang in. */
.buzz-banner {
  position: fixed;
  left: 50%;
  top: 5vh;
  transform: translateX(-50%);
  z-index: 60;
  min-width: min(640px, 90vw);
  max-width: 92vw;
  padding: 18px 44px 22px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 30%, var(--banner-hi, #1a2be0), var(--banner, #0a149e) 70%);
  border: 4px solid #000;
  outline: 4px solid var(--team-color);
  box-shadow:
    0 0 60px var(--team-color),
    0 20px 50px #000c;
  animation: banner-in 0.25s ease-out both;
  pointer-events: none;
}
.buzz-banner .eyebrow {
  color: #d6dcff;
  font-size: 13px;
}
.buzz-team {
  font: 400 clamp(48px, 6.5vw, 110px) / 1.05 var(--board-display);
  color: var(--team-color);
  text-transform: uppercase;
  text-shadow: 0.05em 0.06em 0 #000;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
.buzz-player {
  font: 700 clamp(26px, 3vw, 44px) var(--board-hand);
  color: #fff;
  margin-top: 4px;
}
@keyframes banner-in {
  from {
    transform: translateX(-50%) scale(0.85);
    opacity: 0;
  }
}
@keyframes pop-in {
  from {
    transform: scale(0.3);
    opacity: 0;
  }
}
@keyframes fade-up {
  from {
    transform: translateY(0.4em);
    opacity: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
.still *,
.still *:before,
.still *:after {
  animation: none !important;
}

/* Laptop and short screens: keep the board and podiums in view. */
@media (min-width: 651px) and (max-height: 920px) {
  .studio {
    padding-top: 12px;
    padding-bottom: 10px;
  }
  .studio-intro {
    margin: 6px 0 10px;
  }
  .round-title {
    font-size: 28px;
  }
  .category {
    height: clamp(50px, 7.5vh, 66px);
  }
  .studio-footer {
    margin-top: 12px;
  }
  .studio-footer .join-card img {
    width: 78px;
    height: 78px;
  }
  .two-rows .podium-name {
    font-size: clamp(14px, 10cqi, 21px);
  }
  .two-rows .podium-score {
    font-size: clamp(16px, 14cqi, 28px);
  }
  .footer-meta {
    margin-top: 8px;
  }
}
@media (max-width: 1000px) {
  .studio {
    padding: 16px;
  }
  .studio-header .pill {
    display: none;
  }
  .studio-footer {
    flex-direction: column;
  }
  .round-nav {
    gap: 10px;
    font-size: 11px;
  }
  .studio-footer .join-card {
    max-width: none;
  }
}
@media (max-width: 650px) {
  .studio {
    padding: 12px 8px;
  }
  .studio-header {
    padding: 0 6px;
    gap: 10px;
  }
  .studio-header button {
    padding: 8px 10px;
    font-size: 11px;
  }
  .studio-header .divider {
    display: none;
  }
  .studio-intro {
    padding: 0 6px;
    align-items: start;
    gap: 10px;
  }
  .round-title {
    font-size: 22px;
  }
  .round-nav {
    font-size: 9px;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 170px;
  }
  .round-nav .clues-left {
    border: 0;
    padding: 0;
  }
  .board-frame {
    padding: 3px;
  }
  .board {
    gap: 3px;
  }
  .studio {
    height: auto;
    min-height: 0;
  }
  .board {
    grid-template-rows: auto;
    grid-auto-rows: 60px;
  }
  .big-screen {
    min-height: 60vh;
  }
  .category {
    height: 58px;
    margin-bottom: 3px;
    padding: 3px;
    font-size: clamp(9px, 2.6vw, 12px);
  }
  .clue-screen span {
    font-size: clamp(14px, 22cqi, 28px);
  }
  .podiums,
  .podiums.two-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px;
  }
  .podium {
    max-width: none;
  }
  .overlay {
    padding: 12px;
  }
  .clue-overlay {
    padding: 0;
  }
  .clue-stage {
    padding: 10px;
  }
  .clue-card {
    padding: 50px 22px 30px;
  }
  .clue-prompt {
    font-size: 24px;
  }
}
.clue-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 2px 0;
  flex-wrap: wrap;
}
.clue-controls .actions {
  justify-content: center;
}
.team-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.team-action {
  border: 1px solid #41474b;
  padding: 8px 10px;
  border-radius: 7px;
  background: #202428;
  display: flex;
  align-items: center;
  gap: 10px;
}
.team-action span {
  font-size: 12px;
}
.team-action button {
  padding: 5px 11px;
}
.correct {
  color: #a7e8b0;
}
.incorrect {
  color: #ff9f9f;
}
.wager-form {
  display: flex;
  align-items: end;
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
}
.wager-form label {
  flex: 1;
  text-align: left;
  color: #d1d8fd;
  margin: 0;
}
.wager-form input,
.wager-form select {
  min-width: 120px;
}
.wager-form button {
  flex-shrink: 0;
}
.help-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 16px;
}
.help-dialog {
  width: min(580px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 20px 70px #0009;
}
.help-dialog::backdrop {
  background: #080b10c9;
  backdrop-filter: blur(6px);
}
.help-dialog section + section {
  margin-top: 22px;
}
.help-dialog h3 {
  margin-bottom: 8px;
  color: var(--gold);
}
.help-dialog p {
  color: #b6b8b4;
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 10px;
}
.help-dialog section:last-child p:last-child {
  margin-bottom: 0;
}
.panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  background: #191c1e;
}
.panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.panel-title h2,
.panel-title h3 {
  margin: 0;
}
.team-inputs {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 13px;
}
.team-input {
  display: flex;
  gap: 8px;
}
.error-box {
  background: #3d2222;
  border: 1px solid #8e4747;
  border-radius: 6px;
  padding: 14px;
  color: #ffc0c0;
  margin: 15px 0;
  font-size: 12px;
  white-space: pre-line;
}
.notice {
  font-size: 12px;
  color: #d8c998;
  background: #302b21;
  border: 1px solid #504738;
  border-radius: 7px;
  padding: 13px;
  line-height: 1.6;
  margin-bottom: 18px;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  background: #eae5d8;
  color: #171a1b;
  border-radius: 7px;
  font-size: 12px;
  z-index: 50;
  box-shadow: 0 3px 20px #0005;
  display: none;
  max-width: 90vw;
}
#toast.visible {
  display: block;
}
.storage-warning {
  padding: 10px;
  text-align: center;
  background: #633723;
  color: #ffe2c8;
  font-size: 12px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 650px) {
  .brand-caption {
    display: none;
  }
  .brand-mark {
    width: 32px;
    height: 32px;
    font-size: 22px;
  }
  .brand-name {
    font-size: 19px;
  }
  .clue-controls {
    justify-content: center;
  }
  .team-actions {
    justify-content: center;
  }
  .wager-form {
    flex-wrap: wrap;
    justify-content: center;
  }
  .wager-form label {
    min-width: 110px;
  }
  .panel {
    padding: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* Rooms and buzzers */
a.button {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 15px;
  font-weight: 600;
}
.pill.offline .lamp {
  background: #f0a35b;
  box-shadow: 0 0 7px #f0a35b55;
}
.landing {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 16px;
  display: grid;
  gap: 18px;
}
.landing-card h2 {
  margin-bottom: 8px;
}
.landing-card p {
  margin-bottom: 18px;
  line-height: 1.5;
}
.lock-check {
  margin-bottom: 10px;
}
.join-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.join-form input {
  flex: 1 1 100%;
  font: 600 28px var(--condensed);
  letter-spacing: 6px;
  text-align: center;
  text-transform: uppercase;
}
.join-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 14px 6px 6px;
  background: #1c1f20;
  border: 1px solid #343738;
  border-radius: 6px;
}
.join-card img {
  border-radius: 4px;
  background: #fff;
  flex: none;
}
.join-url {
  font: 600 18px var(--condensed);
  color: var(--ink);
  margin: 6px 0 4px;
  overflow-wrap: anywhere;
}
.join-code b {
  font: 700 26px var(--condensed);
  color: var(--gold);
  letter-spacing: 3px;
}
.team-action.buzzed {
  border-color: var(--team-color);
  box-shadow: 0 0 0 2px var(--team-color);
}
.buzz-open {
  background: #c3372d;
  border-color: #e0574c;
  color: #fff;
}
.buzz-open:hover:not(:disabled) {
  background: #d9473c;
}

/* Phone controller */
.phone {
  min-height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  --team-color: var(--gold);
}
.phone-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.phone-head h2 {
  font: 700 30px var(--condensed);
  margin: 4px 0 2px;
  color: var(--team-color);
  overflow-wrap: anywhere;
}
.phone-name {
  display: grid;
  gap: 6px;
}
.phone-name input {
  font-size: 18px;
  padding: 12px;
}
.team-picks {
  display: grid;
  gap: 10px;
}
.team-pick {
  padding: 18px;
  font: 700 24px var(--condensed);
  text-align: left;
  border-left: 6px solid var(--team-color);
}
.team-pick.chosen {
  background: #33373a;
}
.phone-clue {
  font: 600 18px var(--condensed);
  letter-spacing: 1px;
  color: var(--muted);
  text-align: center;
}
.buzz-button {
  flex: 1;
  min-height: 52vh;
  border-radius: 28px;
  border: 0;
  font: 800 clamp(48px, 16vw, 84px) / 1 var(--condensed);
  letter-spacing: 1px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background: #2a2d30;
  color: #8d9192;
  transition: transform 0.06s, background 0.12s;
}
.buzz-button:active {
  transform: scale(0.98);
}
.phone .buzz-button.wait {
  background: #3a2a2a;
  color: #d8b3ae;
}
.phone .buzz-button.open {
  background: radial-gradient(circle at 50% 40%, #ff6a5c, #c3372d 70%);
  color: #fff;
  box-shadow: 0 0 50px #ff5b4e88;
}
.phone .buzz-button.won {
  background: var(--team-color);
  color: #17191b;
}
.phone .buzz-button.lost,
.phone .buzz-button.locked {
  background: #222527;
  color: #b8bcbc;
  font-size: clamp(32px, 11vw, 56px);
}
.phone .buzz-button.flash {
  background: #6b4a12;
  color: #ffd677;
  font-size: clamp(36px, 12vw, 64px);
}
.phone-note {
  text-align: center;
  color: var(--muted);
  min-height: 2.6em;
  line-height: 1.4;
}
@media (max-width: 650px) {
  .join-card {
    width: 100%;
  }
}
/* Hosting from a phone: no double-tap zoom, and thumb-sized score buttons. */
button,
.button {
  touch-action: manipulation;
}
/* TV board: host controls hide while the mouse is still (see wake() in app.js). */
.studio .clue-controls,
.studio .footer-meta,
.studio .wager-form {
  transition: opacity 0.3s;
}
.pointer-idle .studio .clue-controls,
.pointer-idle .studio .footer-meta,
.pointer-idle .studio .wager-form {
  opacity: 0;
  pointer-events: none;
}
/* Show timers: a bar of light that drains from both ends toward the middle,
   a nod to the show's lights. */
.countdown {
  height: 10px;
  margin: 12px auto 0;
  width: min(520px, 80%);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.countdown span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffd56b, #fff6c9, #ffd56b);
  box-shadow: 0 0 12px #ffd56b;
  animation: countdown linear forwards;
}
@keyframes countdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
.phone-countdown {
  height: 14px;
  width: 100%;
}
.buzz-status.expired,
.buzz-status .times-up {
  color: #ff8a80;
}
.buzz-banner .buzz-time {
  color: #ff8a80;
  font-size: 18px;
}
.buzz-banner .countdown {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 9px;
  width: auto;
  height: 8px;
  margin: 0;
}
.clue-card .countdown {
  width: min(900px, 60vw);
  height: 14px;
  margin-top: 16px;
}
/* The countdown is information, so it runs even with animations off (the
   board's "still" mode, or reduced motion), ticking in steps instead. */
.still .countdown span {
  animation-name: countdown !important;
  animation-timing-function: steps(10, end) !important;
  animation-fill-mode: forwards !important;
}
@media (prefers-reduced-motion: reduce) {
  .countdown span {
    animation-name: countdown !important;
    animation-timing-function: steps(10, end) !important;
    animation-fill-mode: forwards !important;
  }
}
/* How a team was scored, among the greyed-out buttons. */
.team-action button.chosen:disabled {
  opacity: 1;
  border-color: currentColor;
}
/* A correct answer on the TV. */
.buzz-banner.correct .eyebrow {
  color: #a7e8b0;
  font-size: 18px;
}
/* Phone: Final Jeopardy clue, and the standings at game over. */
.phone-final-clue {
  margin: 0;
  padding: 16px;
  border-radius: 14px;
  background: #0a149e;
  color: #fff;
  font: 600 20px / 1.35 var(--condensed);
  text-align: center;
}
/* Final Jeopardy: the clue takes the room the big button doesn't need, so
   the wager note under it stays on a small phone's screen. */
.phone-final-clue + .buzz-button,
.phone .buzz-button.in-final {
  min-height: 0;
  flex: 1 0 auto;
}
.phone-winner {
  text-align: center;
}
.phone-winner-name {
  font: 800 clamp(36px, 12vw, 60px) / 1.05 var(--condensed);
  color: var(--team-color);
  overflow-wrap: anywhere;
}
.phone-standings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.phone-standings li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #222527;
  border-left: 6px solid var(--team-color);
  font: 700 22px var(--condensed);
}
.phone-standings li.mine {
  background: #33373a;
}
.phone-standings .negative {
  color: #ff9f9f;
}
/* A wrong answer on the TV: red-tinted, gone after a moment. */
.buzz-banner.missed {
  background: radial-gradient(ellipse at 50% 30%, #9a1f2b, #4d0a12 70%);
}
.buzz-banner.missed .eyebrow {
  color: #ffb3ab;
  font-size: 18px;
}
.buzz-banner.missed .buzz-team {
  color: #fff;
}
.buzz-banner.brief {
  animation:
    banner-in 0.25s ease-out both,
    banner-out 0.4s ease-in forwards;
}
@keyframes banner-out {
  to {
    transform: translateX(-50%) scale(0.92);
    opacity: 0;
  }
}
/* Final Jeopardy: each team's wager and result as the host scores it. */
.final-result {
  font: 400 clamp(30px, 3.6vw, 64px) / 1.1 var(--board-display);
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0.05em 0.06em 0 #000;
  margin-top: 4px;
}
/* Phone: a wrong answer. */
.phone .buzz-button.wrong {
  background: #5a1d22;
  color: #ffb3ab;
  font-size: clamp(36px, 12vw, 64px);
}

/* The TV in fullscreen: just the board, the round, and the scores. Esc exits. */
:fullscreen .studio-header,
:fullscreen .studio-intro .brand,
:fullscreen .footer-meta,
:fullscreen .studio-footer .join-card {
  display: none;
}
:fullscreen .podium {
  max-width: none;
}

/* Themes (src/themes.js). A backdrop is one big layer behind the whole TV
   page; the board's screens turn see-through so each shows its own slice of
   it, split by the black seams, and played screens open up the whole way. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}
.backdrop i,
.backdrop b {
  position: absolute;
  display: block;
}
.has-backdrop .board-frame {
  background: transparent;
  box-shadow:
    inset 0 0 0 7px var(--seam, #000),
    0 0 0 1px #000,
    0 0 0 4px #1b2030,
    0 0 0 5px #4d5770,
    0 30px 80px #000c;
}
.has-backdrop .category,
.has-backdrop .clue-screen,
.has-backdrop .clue-screen:hover:not(:disabled),
.has-backdrop .clue-screen.used {
  background: radial-gradient(
    ellipse 120% 90% at 50% 40%,
    color-mix(in srgb, var(--t-hi, var(--screen-hi)) var(--mix, var(--tile-opacity)), transparent) 0%,
    color-mix(in srgb, var(--t, var(--screen)) var(--mix, var(--tile-opacity)), transparent) 55%,
    color-mix(in srgb, var(--t-lo, var(--screen-lo)) var(--mix, var(--tile-opacity)), transparent) 100%
  );
  box-shadow:
    inset 0 0 22px #00002a55,
    0 0 0 3px var(--seam, #000);
}
/* The category row's seam is taller: the gap plus the category's margin. */
.has-backdrop .category {
  box-shadow:
    inset 0 0 22px #00002a55,
    0 0 0 3px var(--seam, #000),
    0 6px 0 3px var(--seam, #000);
}
.has-backdrop .clue-screen:hover:not(:disabled) {
  --t-hi: var(--screen-hover-hi);
  --t: var(--screen-hover);
  --t-lo: var(--screen-hover-lo);
}
.has-backdrop .clue-screen.used {
  --mix: 8%;
}
@media (max-width: 650px) {
  .has-backdrop .board-frame {
    box-shadow: inset 0 0 0 3px var(--seam, #000);
  }
  .has-backdrop .category,
  .has-backdrop .clue-screen,
  .has-backdrop .clue-screen:hover:not(:disabled),
  .has-backdrop .clue-screen.used {
    box-shadow: 0 0 0 2px var(--seam, #000);
  }
  .has-backdrop .category {
    box-shadow:
      0 0 0 2px var(--seam, #000),
      0 3px 0 2px var(--seam, #000);
  }
}
.no-motion .backdrop *,
.no-motion .backdrop {
  animation: none !important;
}
/* An open clue covers the whole screen: rest the backdrop meanwhile. */
body:has(.clue-overlay) .backdrop * {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .backdrop *,
  .backdrop {
    animation: none !important;
  }
}

/* Disco ball: a mirrored ball hung over the middle of the board, turning,
   with glints and colored spots sweeping the room. Everything moves by
   transform or opacity only, so the graphics card does the work. */
.backdrop-disco {
  --ball: min(98vh, 74vw);
  --ball-y: 50%;
}
.backdrop-disco .string {
  left: calc(50% - 1px);
  top: 0;
  width: 2px;
  height: calc(var(--ball-y) - var(--ball) / 2 + 4px);
  background: linear-gradient(#777, #ccc);
}
.backdrop-disco .rays,
.backdrop-disco .spots {
  left: 50%;
  top: var(--ball-y);
  width: 130vmax;
  height: 130vmax;
  margin: -65vmax 0 0 -65vmax;
  will-change: transform;
  animation: disco-spin 90s linear infinite;
}
.backdrop-disco .rays {
  background: repeating-conic-gradient(#ffffff12 0deg 2.5deg, transparent 2.5deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 76%);
  mask-image: radial-gradient(circle, #000 20%, transparent 76%);
}
.backdrop-disco .spots {
  animation-duration: 60s;
  animation-direction: reverse;
  background:
    radial-gradient(circle at 16% 33%, #ff6ad5 0 0.35vmax, transparent 0.5vmax),
    radial-gradient(circle at 70% 21%, #7df9ff 0 0.3vmax, transparent 0.45vmax),
    radial-gradient(circle at 84% 67%, #fff27a 0 0.4vmax, transparent 0.55vmax),
    radial-gradient(circle at 35% 80%, #ffffff 0 0.3vmax, transparent 0.45vmax),
    radial-gradient(circle at 58% 42%, #b388ff 0 0.3vmax, transparent 0.45vmax),
    radial-gradient(circle at 26% 58%, #7df9ff 0 0.25vmax, transparent 0.4vmax),
    radial-gradient(circle at 74% 45%, #ff6ad5 0 0.3vmax, transparent 0.45vmax),
    radial-gradient(circle at 45% 26%, #ffffff 0 0.25vmax, transparent 0.4vmax),
    radial-gradient(circle at 64% 77%, #ff9e5c 0 0.35vmax, transparent 0.5vmax),
    radial-gradient(circle at 40% 50%, #fff27a 0 0.25vmax, transparent 0.4vmax),
    radial-gradient(circle at 21% 45%, #ffffff 0 0.2vmax, transparent 0.35vmax),
    radial-gradient(circle at 79% 33%, #b388ff 0 0.25vmax, transparent 0.4vmax);
}
.backdrop-disco .ball {
  left: 50%;
  top: var(--ball-y);
  width: var(--ball);
  height: var(--ball);
  margin: calc(var(--ball) / -2) 0 0 calc(var(--ball) / -2);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 40% 35%, #d9dce8, #8a8fa8 45%, #3a3c50 75%, #15151f);
  box-shadow:
    0 0 90px #ff6ad540,
    0 0 220px #7df9ff26;
}
/* Mirror tiles on a strip twice the ball's width that slides by one ball
   width, so the loop is seamless. */
.backdrop-disco .facets {
  inset: 0 auto 0 0;
  width: 200%;
  will-change: transform;
  animation: disco-turn 28s linear infinite;
  background:
    linear-gradient(90deg, #0009 0 7%, transparent 7%) 0 0 / calc(100% / 48) calc(100% / 24),
    linear-gradient(#0009 0 7%, transparent 7%) 0 0 / calc(100% / 48) calc(100% / 24),
    repeating-conic-gradient(#ffffff66 0 25%, transparent 0 50%) 0 0 / calc(100% / 24) calc(100% / 12),
    repeating-conic-gradient(#7df9ff38 0 25%, transparent 0 50%) 0 0 / calc(100% / 12) calc(100% / 8),
    repeating-conic-gradient(#ff6ad538 0 25%, transparent 0 50%) 0 0 / calc(100% / 8) calc(100% / 5),
    repeating-conic-gradient(#ffffff30 0 25%, transparent 0 50%) 0 0 / calc(100% / 6) calc(100% / 7);
}
.backdrop-disco .shade {
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, #ffffffd0 0, #ffffff40 9%, transparent 24%),
    radial-gradient(circle, transparent 38%, #0007 58%, #000d 70.7%);
}
.backdrop-disco .glint {
  width: 9vmin;
  height: 9vmin;
  margin: -4.5vmin 0 0 -4.5vmin;
  background:
    radial-gradient(circle, #fff 0 4%, transparent 22%),
    linear-gradient(90deg, transparent 47%, #fff 50%, transparent 53%),
    linear-gradient(transparent 47%, #fff 50%, transparent 53%);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 70%);
  mask-image: radial-gradient(circle, #000 0, transparent 70%);
  opacity: 0;
  transform: rotate(45deg);
  will-change: opacity;
  animation: disco-glint 3.2s ease-in-out infinite;
}
.backdrop-disco .glint:nth-child(3) { left: 40%; top: 26%; }
.backdrop-disco .glint:nth-child(4) { left: 57%; top: 39%; animation-delay: -0.9s; }
.backdrop-disco .glint:nth-child(5) { left: 45%; top: 63%; animation-delay: -1.7s; }
.backdrop-disco .glint:nth-child(6) { left: 61%; top: 70%; animation-delay: -2.4s; }
.backdrop-disco .glint:nth-child(7) { left: 36%; top: 50%; animation-delay: -1.2s; }
@keyframes disco-spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes disco-turn {
  to {
    transform: translateX(-50%);
  }
}
@keyframes disco-glint {
  50% {
    opacity: 1;
  }
}

/* Confetti: two layers drifting down at different speeds. Each layer's
   pattern repeats every 440px down, and it moves exactly that far. */
.backdrop-confetti .fall {
  left: 0;
  right: 0;
  top: -440px;
  bottom: 0;
  will-change: transform;
  animation: confetti-fall 30s linear infinite;
  background:
    radial-gradient(circle, #ff5fa2 0 5px, transparent 6px) 23px 31px / 173px 220px,
    radial-gradient(circle, #ffd84a 0 4px, transparent 5px) 97px 140px / 211px 440px,
    radial-gradient(circle, #6ee7ff 0 4px, transparent 5px) 61px 17px / 257px 110px,
    radial-gradient(circle, #ffffff 0 3px, transparent 4px) 143px 63px / 139px 88px,
    radial-gradient(circle, #b98cff 0 5px, transparent 6px) 31px 151px / 307px 220px,
    radial-gradient(circle, #ff8cc6 0 3px, transparent 4px) 181px 5px / 199px 55px,
    radial-gradient(circle, #ffd84a 0 6px, transparent 7px) 230px 300px / 389px 440px;
}
.backdrop-confetti .fall + .fall {
  animation-duration: 47s;
  opacity: 0.55;
  background:
    radial-gradient(circle, #ffd84a 0 9px, transparent 10px) 11px 70px / 283px 220px,
    radial-gradient(circle, #ff5fa2 0 8px, transparent 9px) 120px 190px / 347px 440px,
    radial-gradient(circle, #6ee7ff 0 7px, transparent 8px) 200px 40px / 229px 110px;
}
.backdrop-confetti .glow {
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 45%, #ff5fa222, transparent 70%);
}
@keyframes confetti-fall {
  to {
    transform: translateY(440px);
  }
}
/* ── Show moments: the round opening, the round splash, Final responses. ── */
/* Before the host fills the board: plain blue squares. */
.clue-screen.blank {
  cursor: default;
}
/* A long category name: a size down so three lines fit in the header. */
.category span.long-name {
  font-size: 0.8em;
}
/* The category flying into this header; it shows once it lands. */
.category span.landing {
  visibility: hidden;
}
/* A revealed category, big in the middle of the TV, like the show's panel. */
.cat-reveal {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
.cat-backdrop {
  position: absolute;
  inset: 0;
  background: #00031acc;
}
.cat-card {
  display: grid;
  place-items: center;
  padding: 0.4em 0.6em;
  text-align: center;
  color: #fff;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, var(--screen-hi) 0%, var(--screen) 55%, var(--screen-lo) 100%);
  box-shadow:
    inset 0 0 40px #00002a99,
    0 0 0 6px #000,
    0 30px 90px #000c;
  font: 600 clamp(48px, 7vw, 150px) / 1.05 var(--board-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0.06em 0.07em 0 #000;
  overflow-wrap: anywhere;
}
.cat-reveal .cat-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(76vw, 1500px);
  height: min(44vh, 520px);
}
/* Final Jeopardy's category gets the same panel. */
.final-screen .cat-card {
  width: min(72vw, 1300px);
  min-height: min(26vh, 300px);
  font-size: clamp(34px, 5vw, 96px);
}
/* Between rounds: the next round's name, then its board fills in. */
.round-splash {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 45%, #13208f, #050a4a 70%, #02031c);
  pointer-events: none;
  animation: splash-screen 2.4s ease both;
}
.round-splash-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  font: 400 clamp(72px, 13vw, 260px) / 0.92 var(--board-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: linear-gradient(#ffffff 0%, #fff3c4 40%, #ffc93e 75%, #e89b18 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.02em #2a1800;
  filter: drop-shadow(0.04em 0.05em 0 #000) drop-shadow(0 0 0.3em #ffd06655);
  animation: splash-name 2.4s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes splash-screen {
  0% {
    opacity: 0;
  }
  8%,
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes splash-name {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  22% {
    transform: scale(1);
    opacity: 1;
  }
  84% {
    transform: scale(1.03);
    opacity: 1;
  }
  100% {
    transform: scale(1.06);
    opacity: 0;
  }
}
/* Final Jeopardy: one team's answer at a time. */
.final-spot .spot-team {
  font: 400 clamp(64px, 9vw, 170px) / 1.05 var(--board-display);
  color: var(--team-color);
  text-transform: uppercase;
  text-shadow: 0.05em 0.06em 0 #000;
  overflow-wrap: anywhere;
  animation: pop-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
.final-spot .spot-result {
  font: 600 clamp(40px, 5vw, 96px) / 1 var(--board-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0.06em 0.07em 0 #000;
  animation: fade-up 0.45s ease-out both;
}
.final-spot .spot-result.right {
  color: #7fe39a;
}
.final-spot .spot-result.wrong {
  color: #ff7b70;
}
.final-spot .spot-wager {
  font: 400 clamp(44px, 5.5vw, 104px) / 1 var(--board-display);
  color: var(--value-gold);
  text-shadow: 0.05em 0.06em 0 #000;
  animation: fade-up 0.5s ease-out both;
}
.final-spot .spot-clue {
  max-width: 70vw;
  color: #d4d9f7;
  font: 700 clamp(18px, 1.6vw, 30px) / 1.3 var(--board-serif);
}
.final-spot .spot-answer {
  color: #d4d9f7;
  font: 700 clamp(22px, 2.4vw, 44px) / 1.25 var(--board-serif);
}
/* On a TV, Final Jeopardy and the closing screen size their text to the
   board's frame, so a shorter screen (a laptop at 1280×720, a window that
   isn't fullscreen, a TV window showing the host buttons) still fits the
   clue, the team, the result, the wager and the answer. */
@media (min-width: 651px) {
  .big-screen {
    container-type: size;
    gap: clamp(8px, 2.2vh, 30px);
    padding: 4vh 6vw;
  }
  .final-spot .spot-team,
  .winner {
    font-size: clamp(34px, min(9vw, 20cqh), 170px);
  }
  .final-spot .spot-result {
    font-size: clamp(24px, min(5vw, 10cqh), 96px);
  }
  .final-spot .spot-wager {
    font-size: clamp(26px, min(5.5vw, 11cqh), 104px);
  }
  .final-spot .spot-clue {
    font-size: clamp(14px, min(1.6vw, 4cqh), 30px);
  }
  .final-spot .spot-answer {
    font-size: clamp(18px, min(2.4vw, 6cqh), 44px);
  }
  .final-screen .clue-prompt {
    font-size: clamp(20px, min(4vw, 8cqh), 80px);
  }
  .final-screen .clue-prompt.long-clue {
    font-size: clamp(18px, min(3vw, 6cqh), 58px);
  }
  .final-screen .answer {
    font-size: clamp(18px, min(3vw, 6.5cqh), 58px);
  }
  .winner-score {
    font-size: clamp(30px, min(6.5vw, 12cqh), 120px);
  }
  /* A regular clue on a wide but short window (not fullscreen). */
  .clue-card .clue-prompt {
    font-size: clamp(26px, min(4vw, 7.1vh), 80px);
  }
  /* A long clue, a size down, so the answer and the call fit under it. */
  .clue-card .clue-prompt.long-clue {
    font-size: clamp(24px, min(3.3vw, 6vh), 66px);
  }
  /* The host buttons on a TV that holds the host key float over the bottom
     of the clue instead of taking room from it, so clues show as large as on
     any other TV (they fade out while the mouse is still). */
  .studio .clue-stage {
    position: relative;
  }
  .studio .clue-controls {
    position: absolute;
    left: 2.5vw;
    right: 2.5vw;
    bottom: 2.5vh;
    z-index: 4;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(8, 10, 24, 0.9);
  }
}

/* The AI host. On the phone: parts of the controller are layout-free
   wrappers, so the phone's column layout is unchanged. */
.phone [data-part] {
  display: contents;
}
.phone .ai-status {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}
.phone .ai-status.idle {
  font-size: clamp(32px, 11vw, 56px);
  color: #b8bcbc;
}
.phone-notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #4a3412;
  color: #ffd677;
  text-align: center;
}
.answer-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.answer-title {
  font: 800 clamp(34px, 11vw, 52px) / 1 var(--condensed);
  color: var(--team-color);
  text-align: center;
}
.mic-button {
  width: min(68vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: radial-gradient(circle at 50% 38%, #ff6a5c, #c3372d 72%);
  color: #fff;
  box-shadow: 0 0 40px #ff5b4e66;
  font: 700 20px var(--condensed);
  letter-spacing: 0.5px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.08s;
}
/* Phones keep :hover after a tap; these keep their own colors. */
.mic-button:hover:not(:disabled) {
  background: radial-gradient(circle at 50% 38%, #ff6a5c, #c3372d 72%);
}
.pick-values button:hover:not(:disabled) {
  background: radial-gradient(ellipse at 50% 40%, var(--screen-hi), var(--screen) 65%, var(--screen-lo));
}
.link-button:hover:not(:disabled) {
  background: none;
}
.mic-button svg {
  pointer-events: none;
}
.mic-button.recording,
.mic-button.recording:hover:not(:disabled) {
  transform: scale(1.06);
  background: radial-gradient(circle at 50% 38%, #ff8a7e, #e0402f 72%);
  animation: mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse {
  50% {
    box-shadow:
      0 0 0 14px #ff5b4e44,
      0 0 70px #ff5b4e;
  }
}
.mic-note {
  min-height: 0;
  margin: 0;
}
.link-button {
  background: none;
  border: 0;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px;
}
.answer-form,
.phone-wager {
  width: 100%;
  display: grid;
  gap: 10px;
}
.answer-form label,
.phone-wager label {
  font: 600 18px var(--condensed);
  color: var(--ink);
}
.answer-form input,
.phone-wager input {
  font-size: 22px;
  padding: 14px;
  width: 100%;
}
.answer-form button,
.phone-wager button {
  padding: 16px;
  font: 700 22px var(--condensed);
}
.wager-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.phone-wager .phone-note {
  margin: 0;
}
.phone-dd {
  font: 400 clamp(46px, 15vw, 72px) / 1 var(--board-display);
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(#fffbe0 0%, #ffd84a 38%, #ff9a1a 62%, #e0281c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: skewX(-8deg);
  padding: 12px 0;
}
/* The team in control picks from a small board, one row per category. */
.pick-board {
  display: grid;
  gap: 10px;
}
.pick-title {
  font: 800 30px var(--condensed);
  color: var(--team-color);
  text-align: center;
}
.pick-name {
  font: 600 14px / 1.2 var(--board-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c3cbff;
  margin-bottom: 5px;
}
.pick-values {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}
.pick-values button,
.pick-used {
  min-height: 46px;
  padding: 6px 0;
  border-radius: 6px;
  border: 1px solid #000;
}
.pick-values button {
  background: radial-gradient(ellipse at 50% 40%, var(--screen-hi), var(--screen) 65%, var(--screen-lo));
  color: var(--value-gold);
  font: 400 clamp(15px, 5vw, 22px) var(--board-display);
  text-shadow: 0.06em 0.06em 0 #000;
}
.pick-used {
  background: #0a0e2a;
}

/* On the TV. */
.ai-pill {
  padding: 6px 12px;
  font: 600 12px var(--board-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c3cbff;
}
.ai-pick {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 auto;
  padding: 8px 18px;
  border-radius: 8px;
  border-left: 8px solid var(--team-color);
  background: #0a0e2a;
  font: 600 clamp(18px, 1.6vw, 30px) var(--board-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d6dcff;
  animation: fade-in 0.35s ease-out both;
}
.ai-pick b {
  color: var(--team-color);
}
.podium.in-control {
  border-color: var(--team-color);
  box-shadow:
    0 0 0 2px var(--team-color),
    0 8px 20px #000b;
}
.ai-verdict {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.2em 0.8em;
  text-shadow: 0.06em 0.08em 0 #000;
  animation: fade-in 0.35s ease-out both;
}
.verdict-who {
  font: 600 clamp(18px, 1.8vw, 34px) var(--board-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--team-color);
}
.verdict-call {
  font: 400 clamp(26px, 3vw, 56px) / 1 var(--board-display);
  text-transform: uppercase;
}
.ai-verdict.right .verdict-call {
  color: #7fe39a;
}
.ai-verdict.wrong .verdict-call {
  color: #ff7b70;
}
.verdict-call span {
  color: #fff;
  margin-left: 0.3em;
}
.verdict-reason {
  font: 500 clamp(15px, 1.3vw, 24px) var(--sans);
  color: #d4d9f7;
}
.final-spot .spot-said {
  font: 700 clamp(28px, 3.4vw, 64px) / 1.2 var(--board-hand);
  color: #fff;
  overflow-wrap: anywhere;
  max-width: 80vw;
}
.final-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.final-chip {
  padding: 6px 14px;
  border-radius: 30px;
  border: 2px solid var(--team-color);
  font: 600 clamp(14px, 1.3vw, 24px) var(--board-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #aab3e6;
}
.final-chip.done {
  background: var(--team-color);
  color: #111;
}
/* Host console and setup. */
.ai-strip {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #3a4b8a;
  border-radius: 10px;
  background: #121a3d;
}

/* ── Host console ──────────────────────────────────────────────────────
   One column on a phone: what's on now at the top, the next step in a bar
   under the thumb. Sections are separated by space and type, not boxes. */
.host-password {
  width: 100%;
  margin-bottom: 14px;
  padding: 10px 12px;
  font-size: 16px; /* smaller zooms the page on iPhone */
}
.host {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 32px 40px;
}
.host-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 6px;
  margin-bottom: 22px;
}
.host-top .host-tabs {
  order: 1;
  margin-left: 18px;
}
.host-top .host-top-gap {
  order: 2;
}
.host-top > button {
  order: 3;
}
.host-top .brand-mark {
  width: 34px;
  height: 34px;
  font-size: 20px;
  margin-right: 6px;
}
.host-top-gap {
  flex: 1;
}
.host .icon-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: #1f2225;
  font-size: 14px;
  white-space: nowrap;
}
.host .icon-btn.off {
  opacity: 0.6;
}
.host .help-button {
  width: 40px;
  height: 40px;
  border: 0;
  background: #1f2225;
}
/* Segmented control: the host's tabs and the editor's rounds. */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: #1f2225;
}
.seg button {
  flex: 1;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  padding: 8px 18px;
  font-weight: 600;
  white-space: nowrap;
}
.seg button.active,
.seg button.active:hover {
  background: #3a3e42;
  color: var(--ink);
  box-shadow: 0 1px 3px #0006;
}
.host-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.host-h .muted {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.host-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
/* Quiet text buttons for rare actions. */
.host .link {
  border: 0;
  background: none;
  padding: 8px 0;
  color: #c9cbc6;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #5a5e62;
  text-underline-offset: 4px;
}
.host .link:hover:not(:disabled) {
  background: none;
  color: var(--ink);
}
.host .link.danger {
  color: #ff9f9f;
}
.host-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 10px 0 0;
}
.host-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
.host-side {
  display: grid;
  gap: 36px;
}
.host-where {
  font: 700 15px var(--condensed);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* The board: tap a value to open it. */
.host-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}
.host-board .host-category {
  display: flex;
  align-items: end;
  justify-content: center;
  text-align: center;
  font: 600 13px / 1.1 var(--condensed);
  text-transform: uppercase;
  padding: 4px 1px 6px;
  color: #c9cde3;
  overflow-wrap: anywhere;
}
.host-board .host-category.unrevealed {
  opacity: 0.4;
}
.host-board button {
  position: relative;
  font: 700 22px var(--condensed);
  color: var(--gold);
  background: #17256a;
  border: 0;
  border-radius: 8px;
  padding: 0;
  min-height: 52px;
}
.host-board button:hover:not(:disabled) {
  background: #22348c;
}
.host-board button.used {
  background: #181b20;
  color: #4a5160;
}
.host-board button:disabled:not(.used) {
  opacity: 0.55;
}
.host-board .dd-marker {
  position: absolute;
  top: 3px;
  right: 4px;
  font: 700 8px var(--sans);
  letter-spacing: 0.04em;
  color: #fff;
  background: #c7362b;
  border-radius: 3px;
  padding: 1px 3px;
}

/* The live clue: what to read out, and the answer only the host sees. */
.host-clue {
  scroll-margin-top: 12px;
}
.host-clue-meta {
  font: 700 15px var(--condensed);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #aab3dd;
}
.host-clue .dd-tag {
  color: var(--gold);
}
.host-prompt {
  font-size: 22px;
  line-height: 1.4;
  margin: 8px 0 16px;
}
.host-answer {
  padding: 12px 14px;
  border-radius: 12px;
  background: #2a2412;
  color: var(--gold);
}
.host-answer span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
.host-answer p {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
/* What's happening now: who buzzed in, buzzers open, who's locked out. */
.host-live {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0;
  scroll-margin-top: 12px;
}
.host-live:empty {
  display: none;
}
.host-live .live-team {
  font: 700 clamp(32px, 9vw, 48px) / 1.05 var(--condensed);
  color: var(--team-color, var(--ink));
  overflow-wrap: anywhere;
}
.host-live .live-team.final-cat {
  color: var(--gold);
}
.host-live .live-status {
  font: 700 26px / 1.15 var(--condensed);
  color: var(--team-color, var(--ink));
}
.host-live.open .live-status,
.host-live .times-up {
  color: #ff8a80;
}
.host-live .live-note {
  font: 600 17px var(--condensed);
  color: var(--muted);
}
/* An answer a team gave on its phone, with the AI's guess (person hosting). */
.live-said {
  font: 700 22px / 1.2 var(--condensed);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.live-said small {
  font: 600 14px var(--condensed);
  color: var(--muted);
  margin-left: 6px;
}
.host-phone-answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}
.host-phone-answer b {
  display: block;
  font: 700 15px var(--condensed);
  color: var(--team-color, var(--ink));
}
.host-live .live-note.out {
  color: #ff9f9f;
}
.host-live .countdown {
  width: 100%;
  margin: 0;
}
.host-live .link {
  padding: 4px 0;
  font-size: 13px;
}
/* Pick who answers, for play in the room (host screen and a host's TV). */
.pick-team {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pick-team .actions {
  gap: 8px;
}
.pick-team [data-action="pick-team"] {
  border-color: var(--team-color);
  color: var(--team-color);
}
.host .pick-team {
  display: grid;
  gap: 6px;
  width: 100%;
}
.host .chip {
  border: 2px solid var(--team-color);
  color: var(--team-color);
  background: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 15px;
}
.host .chip:hover:not(:disabled) {
  background: color-mix(in srgb, var(--team-color) 15%, transparent);
}
/* Folded-away extras: score a team by hand, peek at the Final clue. */
.host-fold {
  margin: 8px 0 0;
}
.host-fold summary {
  cursor: pointer;
  padding: 10px 0;
  color: var(--muted);
  font-weight: 600;
  list-style: none;
}
.host-fold summary::-webkit-details-marker {
  display: none;
}
.host-fold summary::before {
  content: "▸ ";
}
.host-fold[open] summary::before {
  content: "▾ ";
}
.host-fold .host-clue {
  margin-top: 6px;
}
.host .team-actions {
  display: grid;
  gap: 2px;
}
.host .team-action {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0 6px 12px;
  border: 0;
  border-left: 4px solid var(--team-color);
  border-radius: 0;
  background: none;
}
.host .team-action span {
  font-size: 15px;
}
.host .team-action button {
  min-height: 44px;
  min-width: 92px;
  border: 0;
  background: #1f2225;
}
.host .team-action button.chosen:disabled {
  opacity: 1;
  outline: 1px solid currentColor;
}
/* The Daily Double wager. */
.host-wager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}
.host-wager label,
.final-wager-row span {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.host-wager select,
.host-wager input,
.final-wager-row input {
  font-size: 20px;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: #1f2225;
}
/* Final wagers: one row per team. */
.final-wagers {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}
.final-wager-row {
  display: grid;
  grid-template-columns: 1fr 110px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 12px;
  border-left: 4px solid var(--team-color);
}
.final-wager-row b {
  display: block;
  color: var(--ink);
  font-size: 16px;
}
.final-wager-row small {
  font-size: 12px;
}
.final-wager-row .saved {
  color: #a7e8b0;
}
.final-wager-row button {
  min-height: 48px;
  border: 0;
  background: #2b2f33;
}

/* The bar along the bottom: the next step, biggest on the right. */
.host-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--bg) 14px);
}
.host-bar button {
  flex: 1 1 0;
  min-height: 64px;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  font: 700 19px / 1.05 var(--condensed);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.host-bar .alt {
  background: #2b2f33;
  color: var(--ink);
}
.host-bar .alt:hover:not(:disabled) {
  background: #363a3e;
}
.host-bar .go {
  flex-grow: 2;
  background: var(--gold);
  color: #17140c;
  font-size: 24px;
}
.host-bar .go:hover:not(:disabled) {
  background: #ffe19a;
}
.host-bar .go:disabled {
  opacity: 1;
  background: #3b3420;
  color: #a99a6c;
}
.host-bar .yes,
.host-bar .no {
  min-height: 92px;
  color: #fff;
  font-size: 30px;
}
.host-bar .yes {
  flex-grow: 1.4;
  background: #1f9d4c;
}
.host-bar .yes:hover:not(:disabled) {
  background: #23b356;
}
.host-bar .no {
  background: #c7362b;
}
.host-bar .no:hover:not(:disabled) {
  background: #dc4236;
}
.host-bar small {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.host-bar .yes,
.host-bar .no {
  min-width: 0;
}
body:has(.host-bar) #toast {
  bottom: 120px;
}

/* Scores and players. */
.host-scores {
  display: grid;
}
.host-score {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.host-score + .host-score {
  border-top: 1px solid #25282b;
}
.host-score .team-name {
  border: 0;
  border-left: 4px solid var(--team-color);
  border-radius: 0;
  background: none;
  padding: 8px 0 8px 10px;
  text-align: left;
  color: var(--ink);
  font-size: 15px;
  overflow-wrap: anywhere;
}
.host-score .team-name:hover:not(:disabled) {
  background: none;
}
.host-score .team-name .pencil {
  color: #5d6266;
  margin-left: 4px;
}
.host-score b {
  font: 700 26px var(--condensed);
  color: var(--gold);
}
.host-score b.negative {
  color: #ff9f9f;
}
.room-teams {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.room-team {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-left: 10px;
  border-left: 4px solid var(--team-color);
}
.room-panel .join-card {
  border: 0;
  background: #1a1d20;
  border-radius: 12px;
}
.room-panel .join-url {
  font-size: 14px;
}
.host-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.host-qr svg {
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 8px;
}
.ai-strip {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #121a3d;
}

/* Games, the editor, and settings. */
.library {
  max-width: 760px;
}
.library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.library-head .host-h {
  margin: 0;
}
.library-head .ghost {
  border: 0;
  background: #1f2225;
}
.game-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  padding: 18px 0;
}
.game-card + .game-card {
  border-top: 1px solid #25282b;
}
.game-card h3 {
  font-size: 19px;
  margin: 0 0 4px;
}
.game-card .muted {
  font-size: 13px;
}
.game-actions {
  display: flex;
  align-items: center;
  gap: 4px 18px;
  flex-wrap: wrap;
}
.game-actions .primary {
  padding: 9px 22px;
  border-radius: 10px;
  margin-right: 4px;
}
.editor-header {
  display: flex;
  align-items: end;
  gap: 16px;
  margin-bottom: 18px;
}
.editor-header .field {
  flex: 1;
  margin: 0;
}
.editor-header .round-count {
  flex: 0 0 auto;
}
.editor input,
.editor textarea,
.editor select,
.settings select,
.final-editor input,
.final-editor textarea {
  border: 0;
  border-radius: 10px;
  background: #1f2225;
}
.round-editor-tabs {
  margin-bottom: 18px;
}
.config-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  font-weight: 600;
}
.config-bar select {
  width: auto;
}
.category-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 40px;
}
.category-editor {
  padding: 18px 0;
  border-top: 1px solid #25282b;
}
.category-editor header input {
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
}
.clue-editor {
  padding: 14px 0 0;
}
.clue-editor .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.clue-editor .value {
  font: 700 21px var(--condensed);
  color: var(--gold);
}
.clue-editor label {
  margin-bottom: 8px;
}
.final-editor {
  max-width: 640px;
}
.settings {
  max-width: 640px;
}
.settings .host-h {
  margin-top: 30px;
}
.settings .host-h:first-child {
  margin-top: 0;
}
.switch-row,
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 12px 0;
  font-size: 15px;
  color: var(--ink);
}
.switch-row + .switch-row,
.setting-row + .switch-row,
.switch-row + .setting-row {
  border-top: 1px solid #25282b;
}
.switch-row small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
}
.switch-row.unavailable {
  opacity: 0.55;
}
.setting-row select {
  width: auto;
  min-width: 160px;
  margin: 0;
}
/* A checkbox drawn as an on/off switch. */
input[type="checkbox"][role="switch"] {
  appearance: none;
  flex: none;
  position: relative;
  width: 46px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: #3a3e42;
  cursor: pointer;
  transition: background 0.15s;
}
input[type="checkbox"][role="switch"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
input[type="checkbox"][role="switch"]:checked {
  background: #2fb35f;
}
input[type="checkbox"][role="switch"]:checked::after {
  transform: translateX(18px);
}
input[type="checkbox"][role="switch"]:disabled {
  cursor: default;
  opacity: 0.5;
}
.timer-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}
.timer-seconds {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}
.timer-seconds input {
  width: 64px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: #1f2225;
}
/* Setting up a game: who's hosting. */
.host-choice {
  border: 0;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 8px;
}
.host-choice legend {
  margin-bottom: 8px;
}
.host-choice .check {
  flex-wrap: wrap;
  row-gap: 2px;
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}
.host-choice input[type="radio"] {
  width: auto;
  margin: 0;
  accent-color: var(--gold);
}
.host-choice small {
  flex-basis: 100%;
  padding-left: 21px;
  font-size: 12px;
}
.host-choice .unavailable {
  opacity: 0.55;
}
.host .overlay .panel {
  border: 0;
  border-radius: 16px;
}
.host .overlay input,
.host .overlay textarea,
.host .overlay select {
  border: 0;
  border-radius: 10px;
  background: #24272a;
}

@media (max-width: 1000px) {
  .host-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
@media (max-width: 650px) {
  .host {
    padding: 10px 16px 24px;
  }
  .host-top {
    margin-bottom: 18px;
  }
  .host-top .brand-mark {
    display: none;
  }
  .host-top .pill {
    padding: 7px 10px;
  }
  .host-top .host-tabs {
    order: 4;
    flex-basis: 100%;
    margin: 4px 0 0;
  }
  .host-board {
    gap: 4px;
  }
  .host-board .host-category {
    font-size: 11px;
  }
  .host-board button {
    font-size: 19px;
    min-height: 50px;
  }
  /* On a phone the bar stays on screen, even while scrolled to the scores. */
  .host-bar {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0;
    padding: 14px 12px max(12px, env(safe-area-inset-bottom));
  }
  .host:has(.host-bar) {
    padding-bottom: 130px;
  }
  .editor-header {
    flex-wrap: wrap;
  }
  .editor-header .field {
    flex-basis: 100%;
  }
  .category-editor-grid {
    grid-template-columns: 1fr;
  }
  .config-bar {
    flex-wrap: wrap;
  }
  .host-wager {
    grid-template-columns: 1fr;
  }
  .final-wager-row {
    grid-template-columns: 1fr 90px auto;
  }
}
.host-top .pill {
  white-space: nowrap;
}
.host-bar:has(> :nth-child(3)) button {
  padding: 8px 6px;
  font-size: 18px;
}
.host-bar:has(> :nth-child(3)) .go {
  font-size: 20px;
}
.host-bar button {
  text-wrap: balance;
}
.timer-setting > label {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
}
.host .overlay .ghost {
  border: 0;
  background: #24272a;
}