/* ProQuiz: a modern game-show stage. Deep ink-violet, one soft stage light from above, glassy rounded tiles,
   and the team colours as the loudest thing on screen. One dark theme on purpose (it is made for a TV).
   All colours are variables here. */

@font-face {
  font-family: 'Unbounded';
  src: url('./fonts/unbounded.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson';
  src: url('./fonts/atkinson-hyperlegible-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson';
  src: url('./fonts/atkinson-hyperlegible-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #0c0b24; /* the stage floor */
  --bg-deep: #07061a; /* bars and side panels */
  /* The accent colours, as "r g b" so they work with any transparency. Branding (setBrand() in ui.js) changes them
     and the deep and pale tones below to the host's own colour; without one they are exactly these. */
  --light-rgb: 111 85 255; /* the stage light */
  --flare-rgb: 255 95 162; /* its warm edge, used sparingly */
  --light-2-rgb: 150 130 255; /* lighter stage light, tops of tiles */
  --light-3-rgb: 170 155 255; /* tile and note rims */
  --deep-0-rgb: 7 6 26; /* the darkest shades of the stage, for see-through bars and panels */
  --deep-1-rgb: 14 11 46;
  --deep-2-rgb: 12 10 40;
  --deep-3-rgb: 24 20 68;
  --deep-4-rgb: 28 24 76;
  --panel: #14123a; /* solid dark panels */
  --pale: #ece9ff; /* the faint tint on white buttons */
  --light: rgb(var(--light-rgb));
  --flare: rgb(var(--flare-rgb));
  --glass: rgb(255 255 255 / 0.065); /* tiles and panels */
  --glass-hi: rgb(255 255 255 / 0.11);
  --edge: rgb(255 255 255 / 0.13); /* hairline highlight on glass */
  --ink: #f6f4ff; /* main text */
  --muted: #a7a2d4; /* secondary text */
  --primary: #ffffff; /* main buttons */
  --primary-ink: #150f3d;
  --good: #2ee59d;
  --bad: #ff4d6d;
  --focus: #9ee8ff;

  /* The bundled fonts have Latin, Greek and Cyrillic letters only. For a quiz in another language (Thai, Arabic,
     Hindi, Chinese, …) the browser takes the missing letters from the system fonts named here (or any it has for
     that script), so text never shows as boxes. */
  --display: 'Unbounded', system-ui, 'Segoe UI', 'Noto Sans', 'Noto Sans Thai', 'Leelawadee UI', 'Thonburi', 'Noto Sans Arabic', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Ethiopic', 'Noto Sans CJK SC', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Hiragino Sans', 'Microsoft YaHei', 'Malgun Gothic', 'Yu Gothic', 'Nirmala UI', 'Tahoma', sans-serif;
  --text: 'Atkinson', system-ui, 'Segoe UI', 'Noto Sans', 'Noto Sans Thai', 'Leelawadee UI', 'Thonburi', 'Noto Sans Arabic', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Ethiopic', 'Noto Sans CJK SC', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Hiragino Sans', 'Microsoft YaHei', 'Malgun Gothic', 'Yu Gothic', 'Nirmala UI', 'Tahoma', sans-serif;

  --r-s: 10px; /* small controls */
  --r-m: 16px; /* plates, tiles */
  --r-l: 28px; /* big stage panels */
  --pill: 999px; /* buttons */

  /* The glass look (setting `glass`, class `glass` on <body>; the block at the end of this file). */
  --lg-blur: 22px; /* how frosted the see-through panels are */
  --lg-sat: 1.7; /* colours behind the glass come through a little richer */
  --lg-tint: rgb(var(--deep-4-rgb) / 0.42); /* the panel's own colour: dark enough for white text on anything */
  --lg-tint-deep: rgb(var(--deep-2-rgb) / 0.62); /* bars, side panels and dialogs */
  --lg-edge: rgb(255 255 255 / 0.22); /* rim light around a glass edge */
  --lg-shine: rgb(255 255 255 / 0.5); /* the bright line along the top edge */
  --glow-a: var(--light); /* the glow behind the glass: the TV sets these to the first teams' colours */
  --glow-b: var(--flare);
  --glow-c: #38c8ff;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  /* No grey/blue square flashing on Android when something is tapped (each control shows its own press). */
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* The stage light: one soft pool of light from above, on the host and TV screens. */
.host,
.display {
  background:
    radial-gradient(60% 55% at 50% -12%, rgb(var(--light-rgb) / 0.42), transparent 70%),
    radial-gradient(35% 30% at 88% 108%, rgb(var(--flare-rgb) / 0.14), transparent 70%),
    var(--bg);
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0 1.4em;
  border: 1px solid var(--edge);
  border-radius: var(--pill);
  background: var(--glass);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, transform 120ms;
}
/* A link that looks like a button keeps the button's text colour (not the browser's link blue). */
:where(a).btn {
  color: inherit;
}
.btn:hover {
  background: var(--glass-hi);
}
.btn:active {
  transform: scale(0.97);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 8px 28px rgb(var(--light-rgb) / 0.45);
}
.btn-primary:hover {
  background: var(--pale);
}
.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-quiet:hover {
  color: var(--ink);
  background: transparent;
}

input[type='text'],
input[type='search'],
input[type='number'],
select {
  min-height: 48px;
  width: 100%;
  padding: 0 0.9em;
  border: 1px solid var(--edge);
  border-radius: var(--r-s);
  background: rgb(0 0 0 / 0.25);
}
input[type='text']:focus,
input[type='search']:focus,
input[type='number']:focus,
select:focus {
  border-color: var(--light);
}
input[type='number'] {
  width: 6em;
}
input[type='checkbox'] {
  width: 22px;
  height: 22px;
  accent-color: var(--light);
}
select option {
  background: var(--bg);
}

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.wordmark::after {
  content: '';
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.12em;
  border-radius: 50%;
  background: var(--flare);
  box-shadow: 0 0 12px var(--flare);
}

.error {
  color: var(--bad);
  font-weight: 700;
  min-height: 1.45em;
  margin: 0;
}

/* A team's colour as a solid plate. Set --team (and --team-ink) on the element. */
.plate {
  background: var(--team);
  color: var(--team-ink, #fff);
  border-radius: var(--r-m);
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bad);
  flex: none;
}
.dot.on {
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
}

.qr {
  background: #fff;
  border-radius: var(--r-l);
  line-height: 0;
  padding: 0;
  box-shadow: 0 30px 80px rgb(var(--light-rgb) / 0.35);
}
.qr svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-l);
}

/* ---------- host laptop ---------- */

.host {
  /* Exactly the window: the bar on top, and only the part below it scrolls (with its own scroll bar). */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.host > .lobby,
.host > #game {
  min-height: 0;
  overflow-y: auto;
}
.host-bar {
  /* Above the page, below pop-ups (dialogs are in the top layer) and the keyboard help (z-index 30). */
  position: relative;
  flex: none;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--edge);
  background: rgb(var(--deep-0-rgb) / 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.host-bar .set-title {
  color: var(--muted);
}
.host-bar .spacer {
  flex: 1;
}
.host-bar .set-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A narrow window: the bar stays one row (it is always on screen), so the title goes and the buttons get tighter. */
@media (max-width: 640px) {
  .host-bar {
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
  }
  .host-bar .set-title {
    display: none;
  }
  .host-bar .btn {
    padding: 0 0.9em;
    font-size: 0.9rem;
  }
  .host-bar .btn kbd {
    display: none;
  }
  .host-bar .brand-logo {
    max-width: 110px;
  }
}

.lobby {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(280px, 1fr) minmax(280px, 400px);
  gap: 2rem;
  padding: 2rem 1.5rem;
  align-items: start;
}
.lobby h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.join-card .url {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 1rem 0 0;
  overflow-wrap: anywhere;
}
.join-card .hint {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 1rem;
}
/* The website version: "Sending pictures and clips to the room: 1 of 3" while a quiz's files go up */
.join-card .media-progress {
  color: rgb(var(--light-rgb));
  font-weight: 600;
}
/* "On this Wi-Fi" / "Over the internet" over the QR code */
.join-card .join-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.6rem;
}
/* Over the internet, while the address isn't ready: what is happening, in the QR code's place. The Wi-Fi code
   below it is a smaller stand-in. */
.join-wait {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  padding: 1.6rem 1.2rem;
  margin-bottom: 1.5rem;
  border-radius: var(--r-l);
  border: 1px solid var(--edge);
  background: var(--glass-hi);
  text-align: center;
}
.join-wait p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
.join-wait .row:not(:has(> :not([hidden]))) {
  display: none;
}
.join-wait-icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 3px solid rgb(255 255 255 / 0.18);
  border-top-color: var(--ink);
  animation: join-spin 0.9s linear infinite;
}
.join-wait:not([data-status=starting]):not([data-status=downloading]) .join-wait-icon {
  animation: none;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--bad);
}
.join-wait:not([data-status=starting]):not([data-status=downloading]) .join-wait-icon::before {
  content: '!';
  font-family: var(--display);
  font-weight: 800;
  color: #fff;
}
@keyframes join-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .join-wait-icon {
    animation-duration: 3s;
  }
}
.join-card.waiting .qr {
  width: 62%;
}
.join-card.waiting .url {
  font-size: 0.9rem;
}
.join-card .pin-line {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  margin: 0.75rem 0 0;
}
#group-remote .hint {
  display: block;
  color: var(--muted);
  margin: 0.6rem 0 0.9rem;
}
#remote-retry {
  margin-bottom: 0.9rem;
}
/* During a game: joining over the internet stopped working */
.remote-warn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.75rem 1.5rem 0;
  padding: 0.5rem 0.6rem 0.5rem 1rem;
  border-radius: var(--pill);
  border: 1px solid rgb(255 77 109 / 0.5);
  background: rgb(255 77 109 / 0.12);
  font-size: 0.92rem;
  font-weight: 700;
}
.remote-warn[hidden] {
  display: none;
}
/* The lobby's "a new version is out" banner (lib/update.js): friendly, out of the way, closable */
.update-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0.6rem 0.6rem 1.1rem;
  border-radius: var(--r-l);
  border: 1px solid rgb(46 229 157 / 0.4);
  background: linear-gradient(90deg, rgb(46 229 157 / 0.14), rgb(var(--light-rgb) / 0.16));
  font-size: 0.95rem;
}
.update-banner[hidden] {
  display: none;
}
.update-icon {
  font-size: 1.3rem;
  color: var(--good);
}
.update-text {
  flex: 1 1 260px;
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}
.update-text b {
  font-family: var(--display);
  font-size: 1rem;
}
.update-text small {
  color: var(--muted);
}
/* Update now: how far it has got, or what went wrong */
.update-status {
  font-variant-numeric: tabular-nums;
}
.update-status.error {
  color: var(--bad);
}
.update-status[hidden] {
  display: none;
}
.update-banner.busy .update-icon {
  animation: update-spin 1.6s linear infinite;
}
@keyframes update-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .update-banner.busy .update-icon {
    animation: none;
  }
}
.update-close {
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
}
/* Which ProQuiz this is, under the settings */
.about-line {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
}
/* Quit ProQuiz: a quiet button at the very bottom of the settings, out of the way during a game */
.quit-row {
  margin: 0.5rem 0 0;
  text-align: right;
}
/* After Quit ProQuiz (every page): one plain message, nothing else on screen */
.stopped {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  gap: 0.6rem;
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--bg);
  color: var(--ink);
}
.stopped h1 {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}
.stopped p {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--muted);
}
.stopped .btn {
  justify-self: center;
  margin-top: 0.8rem;
}
.stopped[hidden] {
  display: none;
}
.remote-state {
  margin: 0.8rem 0;
  font-size: 0.95rem;
  word-break: break-word;
}
.remote-state.bad {
  color: var(--bad);
}
.remote-missing {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  margin-bottom: 1rem;
}
.remote-missing small {
  color: var(--muted);
}
.remote-pin-row {
  align-items: center;
  gap: 1rem;
  margin: 0.25rem 0 0.75rem;
}
.remote-pin-row b {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}
.remote-note {
  font-size: 0.9rem;
  color: var(--good);
}

.team-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0 2px 2px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a long name shortens (…) instead of widening the list */
  gap: 0.5rem;
  /* A Quick quiz can have 100 players: the list scrolls instead of pushing the Start button off the page. */
  max-height: min(62vh, 680px);
  overflow-y: auto;
}
.many-note {
  margin: 0 0 0.9rem;
  max-width: 44ch;
  font-size: 0.9rem;
  color: #ffd60a;
}
.team-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0.25rem 0.25rem 1.1rem;
  min-height: 58px;
}
.team-list .name {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-list .conn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: var(--pill);
  background: rgb(0 0 0 / 0.3);
  color: #fff;
}
.team-list .conn .ping {
  opacity: 0.75;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
/* a player who joined over the internet */
.team-list .conn .elsewhere {
  font-weight: 400;
  padding: 0 0.45rem;
  border-radius: var(--pill);
  border: 1px solid currentColor;
  opacity: 0.85;
}
.team-list .remove {
  width: 48px;
  min-height: 48px;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: var(--pill);
}
.team-list .remove:hover {
  background: rgb(0 0 0 / 0.2);
}
.empty {
  color: var(--muted);
  max-width: 34ch;
}
.start-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.start-row .btn {
  font-family: var(--display);
  font-size: 1.05rem;
  min-height: 60px;
  padding: 0 2.2rem;
}
.start-row .why {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

.settings {
  display: grid;
  gap: 1rem;
  padding: 1.4rem;
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--r-l);
}
.settings h2 {
  margin-bottom: 0;
}
.field {
  display: grid;
  gap: 0.35rem;
}
.field > span {
  font-weight: 700;
}
.field small {
  color: var(--muted);
}
.check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  cursor: pointer;
}
.check input {
  flex: none; /* the box keeps its size when the text wraps */
}
.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Settings: folding sections with a one-line status, so the panel fits on one screen. */
.settings-group {
  display: grid;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--edge);
  min-width: 0;
}
details.settings-group:not([open]) {
  gap: 0;
}
.settings-group > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  min-height: 48px;
  align-content: center;
  list-style: none;
  cursor: pointer;
}
.settings-group > summary::-webkit-details-marker {
  display: none;
}
.settings-group > summary::before {
  content: '▸';
  color: var(--muted);
  transition: transform 120ms;
}
.settings-group[open] > summary::before {
  transform: rotate(90deg);
}
.group-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.group-status {
  color: var(--muted);
  font-size: 0.9rem;
}
.group-status.bad {
  color: var(--bad);
}
.settings-group.nested {
  padding-top: 0.25rem;
}
.settings-group.nested .group-title {
  font-family: var(--text);
  font-size: 1rem;
}
.settings .hint {
  color: var(--muted);
}
.field > .picker-row {
  flex-wrap: wrap; /* a narrow panel puts Edit under the picker instead of cutting the quiz name off */
  font-weight: 400;
}
.picker-row select {
  flex: 1 1 15rem;
  min-width: 0;
}
/* New quiz and Edit stay together: on a narrow panel both move under the picker as one row. */
.picker-actions {
  display: inline-flex;
  gap: 0.5rem;
  flex: none;
}
.btn-small {
  min-height: 48px;
  padding: 0 1rem;
  font-size: 0.9rem;
}
.check.with-hint {
  align-items: flex-start;
  padding-top: 0.7rem;
}
.check.with-hint input {
  margin-top: 0.2rem;
}
.check small {
  color: var(--muted);
}
.final-setting {
  flex-wrap: wrap;
  gap: 0 1rem;
}
.timers-row {
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.seconds {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.seconds input {
  width: 4.5rem;
}

fieldset.pill-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
fieldset.pill-field legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font-weight: 700;
}

/* Pill buttons for a choice of a few (language, wrong answer, Crazy mode). The radio itself is hidden. */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pills label {
  position: relative;
  flex: 1 1 auto;
}
.pills input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pills span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--edge);
  border-radius: var(--pill);
  background: var(--glass);
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms;
}
.pills span:hover {
  background: var(--glass-hi);
}
.pills input:checked + span {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}
.pills input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .lobby {
    grid-template-columns: minmax(0, 1fr); /* never wider than the window, whatever is inside */
  }
}

/* host: game */

.host > #game {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.host-game {
  height: calc(100vh - 73px);
  display: grid;
  grid-template-columns: 1fr 330px;
  grid-template-rows: 1fr auto;
  min-height: 0;
}
.host-main {
  padding: 1.5rem;
  min-width: 0;
  overflow: auto;
}
.host-side {
  grid-row: 1 / 3;
  grid-column: 2;
  background: rgb(var(--deep-0-rgb) / 0.55);
  border-left: 1px solid var(--edge);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow: auto;
}
.host-side h2 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}
.score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.7rem 0.9rem;
}
.score-row .name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.score-row .name > * {
  flex: none;
}
/* A long team name ends in a … (the text sits in its own span: a flex container can't cut its own text) */
.score-row .name-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.score-row .pts {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score-row .tools {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.score-row .tools button {
  min-height: 32px;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--pill);
  background: rgb(0 0 0 / 0.25);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.score-row .tools button:hover {
  background: rgb(0 0 0 / 0.4);
}
.picker-tag {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: var(--pill);
  background: #fff;
  color: var(--primary-ink);
}
.score-row.buzzed {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.score-row.out {
  opacity: 0.5;
}

.host-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}
.host-board .col {
  display: grid;
  gap: 8px;
  align-content: start;
}
.host-board .cat {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
  min-height: 3.2rem;
  display: grid;
  place-items: center;
  padding: 0.25rem;
  line-height: 1.15;
}
.host-board .tile {
  min-height: 64px;
  border: 1px solid var(--edge);
  border-radius: var(--r-m);
  background: linear-gradient(180deg, rgb(var(--light-2-rgb) / 0.24), rgb(var(--light-rgb) / 0.07));
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.host-board .tile:hover:not(:disabled) {
  border-color: var(--light);
  background: rgb(var(--light-rgb) / 0.3);
}
.host-board .tile:disabled {
  background: transparent;
  border-style: dashed;
  border-color: rgb(255 255 255 / 0.07);
  color: transparent;
  cursor: default;
}
.board-hint {
  color: var(--muted);
  margin: 0 0 1rem;
}

.host-q .where {
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.host-q .where b {
  color: var(--ink);
  font-family: var(--display);
  font-size: 1rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--pill);
  background: var(--glass-hi);
}
.host-q .question {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 1.25rem;
  max-width: 42ch;
}
.host-q .answer {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-m);
  background: rgb(46 229 157 / 0.12);
  border: 1px solid rgb(46 229 157 / 0.45);
  font-size: 1.4rem;
  margin: 0 0 1.5rem;
}
.host-q .answer span {
  color: var(--good);
  font-weight: 700;
  font-size: 1rem;
}
.host-status {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.host-status .plate {
  padding: 0.35rem 0.9rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: var(--pill);
}
.host-q .countdown {
  max-width: 520px;
  margin-bottom: 1rem;
}
.buzz-order {
  color: var(--muted);
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.controls {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--edge);
  background: rgb(var(--deep-0-rgb) / 0.55);
}
.controls .btn {
  font-size: 1.05rem;
}
.controls kbd {
  font-family: var(--text);
  font-size: 0.72rem;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  background: rgb(0 0 0 / 0.18);
  border: 1px solid currentColor;
  opacity: 0.75;
}
.btn-good {
  background: var(--good);
  border-color: var(--good);
  color: #03281a;
  min-width: 160px;
}
.btn-good:hover {
  background: #5cf0b5;
}
.btn-bad {
  background: var(--bad);
  border-color: var(--bad);
  color: #33020d;
  min-width: 160px;
}
.btn-bad:hover {
  background: #ff7089;
}
.controls .push {
  margin-left: auto;
}

.host-over h2 {
  font-size: 2.2rem;
  margin-bottom: 1.25rem;
}
.rank-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.5rem;
  max-width: 560px;
}
.rank-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
}

/* ---------- countdown bar (host, TV and phones) ---------- */

.countdown {
  --left: 1;
  height: 10px;
  border-radius: var(--pill);
  background: rgb(255 255 255 / 0.12);
  overflow: hidden;
}
.countdown::before {
  content: '';
  display: block;
  height: 100%;
  width: calc(var(--left) * 100%);
  background: var(--bar, linear-gradient(90deg, var(--light), var(--flare)));
  border-radius: inherit;
}
.countdown.low {
  --bar: var(--bad);
}

/* ---------- TV screen ---------- */

.display {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: none;
}
.display > .wordmark {
  position: absolute;
  top: 4vh;
  left: 5vw;
  font-size: 3vh;
}
.display > #game {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tv-lobby {
  flex: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 3vh 5vw;
  padding: 12vh 5vw 6vh;
}
.tv-lobby .call {
  font-size: 10.5vh;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.tv-lobby .call-url {
  font-size: 2.6vh;
  color: var(--muted);
  margin-top: 4vh;
}
.tv-lobby .call-url b {
  display: inline-block;
  margin-top: 1vh;
  font-family: var(--display);
  font-weight: 600;
  font-size: 4vh;
  color: var(--ink);
  padding: 1vh 2.2vh;
  border-radius: var(--pill);
  background: var(--glass-hi);
  border: 1px solid var(--edge);
}
.tv-qrs {
  justify-self: center;
  display: flex;
  align-items: flex-start;
  gap: 3vw;
}
.tv-qr {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6vh;
}
.tv-qr figcaption {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.6vh;
  color: var(--muted);
}
.tv-lobby .qr {
  width: min(56vh, 40vw);
}
/* Over the internet, until the address is ready: the Wi-Fi code smaller, as a stand-in */
.tv-qrs.waiting .qr {
  width: min(40vh, 28vw);
}
.tv-wait {
  margin: 3vh 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 3vh;
  color: var(--ink);
}
.tv-wait.bad {
  color: var(--bad);
}
/* The internet address is long: smaller, and it may wrap */
.tv-lobby .call-url b.long {
  font-size: 3.2vh;
  overflow-wrap: anywhere;
}
.tv-pin {
  font-family: var(--display);
  font-weight: 800;
  font-size: 4.4vh;
  letter-spacing: 0.08em;
  margin: 0.6vh 0 0;
}
.tv-teams {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5vh 1.2vw;
  min-height: 9vh;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tv-teams li {
  font-family: var(--display);
  font-weight: 700;
  font-size: 3vh;
  padding: 1.8vh 2.6vw;
  border-radius: var(--pill);
}
/* A Quick quiz can have up to 100 players: with many, the QR code and the plates get smaller so they fit. */
.tv-lobby.crowd {
  padding: 7vh 5vw 4vh;
  gap: 2.5vh 5vw;
}
.tv-lobby.crowd .call {
  font-size: 8.5vh;
}
.tv-lobby.crowd .qr {
  width: min(44vh, 34vw);
}
.tv-lobby.crowd .tv-teams {
  gap: 1.2vh 1vw;
}
.tv-lobby.crowd .tv-teams li {
  font-size: 2.5vh;
  padding: 1.2vh 2vw;
}
.tv-lobby.crowd .tv-teams li.has-face {
  padding: 0.6vh 1.8vw 0.6vh 0.6vh;
}
.tv-lobby.packed .qr {
  width: min(36vh, 30vw);
}
.tv-lobby.packed .call {
  font-size: 7.5vh;
}
.tv-lobby.packed .tv-teams li {
  font-size: 2.2vh;
}
/* Over 40 players (up to 100): the newest 47 plates, small, plus "+ n more". */
.tv-lobby.horde {
  padding: 5vh 4vw 3vh;
  gap: 2vh 4vw;
}
.tv-lobby.horde .qr {
  width: min(30vh, 26vw);
}
.tv-lobby.horde .call {
  font-size: 6.5vh;
}
.tv-lobby.horde .call-url {
  margin-top: 2vh;
}
.tv-lobby.horde .tv-teams {
  gap: 0.9vh 0.7vw;
  align-content: start;
}
.tv-lobby.horde .tv-teams li {
  font-size: 1.9vh;
  padding: 0.9vh 1.6vw;
}
.tv-lobby.horde .tv-teams li.has-face {
  padding: 0.45vh 1.4vw 0.45vh 0.45vh;
}
.tv-teams li.more {
  background: var(--glass-hi);
  border: 1px solid var(--edge);
  color: var(--muted);
}
.tv-teams li.new {
  animation: plate-in 500ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.tv-teams li.away {
  opacity: 0.4;
}
@keyframes plate-in {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

.tv-game {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}
.tv-stage {
  flex: 1;
  min-height: 0;
  padding: 4vh 3vw 2.5vh;
  display: flex;
  flex-direction: column;
}

.tv-board {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1.2vh 1vw;
  min-height: 0;
}
.tv-board .col {
  display: grid;
  grid-template-rows: 1.05fr repeat(var(--rows), 1fr);
  gap: 1.2vh;
  min-height: 0;
}
.tv-board .cat {
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.6vh;
  line-height: 1.1;
  padding: 0 0.6vw;
  letter-spacing: -0.01em;
}
.tv-board .tile {
  display: grid;
  place-items: center;
  border-radius: 2vh;
  background: linear-gradient(180deg, rgb(var(--light-2-rgb) / 0.24), rgb(var(--light-rgb) / 0.07));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), inset 0 0 0 1px rgb(var(--light-3-rgb) / 0.18);
  font-family: var(--display);
  font-weight: 700;
  font-size: 5.6vh;
  letter-spacing: -0.03em;
}
.tv-board .tile.used {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05);
  color: transparent;
}

.tv-q {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 4vh;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px var(--edge);
  padding: 5vh 5vw 4vh;
  min-height: 0;
  animation: zoom-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes zoom-in {
  from {
    transform: scale(0.3);
    opacity: 0;
  }
}
.tv-q .where {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.8vh;
  color: var(--muted);
}
.tv-q .where b {
  color: var(--ink);
  font-weight: 700;
  padding: 0.8vh 2vh;
  border-radius: var(--pill);
  background: var(--glass-hi);
}
.tv-q .question {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 700;
  font-size: 7vh;
  line-height: 1.18;
  text-wrap: balance;
  margin: 0;
  padding: 2vh 0;
}
.tv-q .answer {
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 7vh;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--good);
  text-shadow: 0 0 40px rgb(46 229 157 / 0.45);
  margin: 0 0 3vh;
  animation: plate-in 450ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.tv-q .band {
  min-height: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2vh;
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.6vh;
  line-height: 1.1;
}
.tv-q .band .countdown {
  width: 55%;
  height: 1.3vh;
}
.tv-q .band .muted {
  color: var(--muted);
}

/* The buzz takeover: the team that buzzed floods the screen in its colour, then holds a glowing frame. */
.tv-takeover {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1.6vh var(--team), inset 0 0 7vh color-mix(in srgb, var(--team) 60%, transparent);
  z-index: 5;
}
.tv-takeover.flash {
  animation: takeover 700ms cubic-bezier(0.3, 0.7, 0.3, 1);
}
@keyframes takeover {
  0% {
    box-shadow: inset 0 0 0 60vh var(--team), inset 0 0 0 transparent;
  }
}
.buzzed-name {
  padding: 1.8vh 4vw;
  font-size: 6vh;
  font-weight: 800;
  letter-spacing: -0.02em;
  border-radius: var(--pill);
  box-shadow: 0 2vh 6vh color-mix(in srgb, var(--team) 55%, transparent);
}

/* Names come first: a plate is as wide as its name needs, and fitScores() in display.js shrinks the whole strip
   (--strip-scale) in steps until every name fits. Only when it can't (8 teams with long names) a name gets a … */
.tv-scores {
  --strip-scale: 1;
  display: flex;
  gap: 1vw;
  padding: 0 3vw 3vh;
  margin: 0;
}
.tv-scores li {
  flex: 1 1 auto;
  min-width: 0;
  list-style: none;
  padding: calc(1.6vh * var(--strip-scale)) calc(1.4vw * var(--strip-scale));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(1vw * var(--strip-scale));
  font-family: var(--display);
  line-height: 1;
  position: relative;
  transition: opacity 200ms;
}
.tv-scores .name {
  font-weight: 700;
  font-size: calc(2.3vh * var(--strip-scale));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tv-scores .pts {
  flex: none;
  font-weight: 800;
  font-size: calc(4vh * var(--strip-scale));
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.tv-scores li.picker {
  box-shadow: 0 0 0 0.5vh var(--bg), 0 0 0 1vh #fff;
}
.tv-scores li.out {
  opacity: 0.3;
}
.tv-scores li.bump {
  animation: bump 550ms ease-out;
}
@keyframes bump {
  30% {
    transform: translateY(-1.4vh) scale(1.05);
  }
}
.tv-picks {
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.6vh;
  color: var(--muted);
  padding: 2vh 0 0;
  margin: 0;
}
.tv-picks b {
  color: var(--ink);
}

.tv-over {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5vh;
}
.tv-over h1 {
  font-size: 10vh;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-align: center;
  text-wrap: balance;
}
.tv-over ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.4vh;
  width: min(66vw, 1100px);
}
.tv-over li {
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  padding: 2vh 2.4vw;
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.4vh;
}
.tv-over li:first-child {
  font-size: 5vh;
  padding: 2.8vh 2.4vw;
  box-shadow: 0 3vh 8vh color-mix(in srgb, var(--team) 50%, transparent);
}

/* ---------- phone ---------- */

.phone {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
  background:
    radial-gradient(90% 45% at 50% -10%, rgb(var(--light-rgb) / 0.45), transparent 70%),
    var(--bg);
}
.phone-join {
  padding: 1.5rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}
.phone-join h1 {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.phone-join .field > span,
.phone-join legend {
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.phone-join fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
/* 16 colours in a 4 × 4 grid: circles of 48–64px, so every one is easy to tap and the grid stays tidy on a 360px phone. */
.swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.swatch {
  position: relative;
  width: 100%;
  max-width: 64px;
  min-width: 48px;
  justify-self: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--team);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 120ms;
}
.swatch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  border-radius: inherit;
  cursor: pointer;
}
.swatch:has(input:checked) {
  transform: scale(1.06);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px #fff, 0 8px 24px color-mix(in srgb, var(--team) 60%, transparent);
}
.swatch:has(input:checked)::after {
  content: '✓';
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--team-ink);
}
.swatch:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 6px;
}
.swatch.taken {
  opacity: 0.18;
  cursor: not-allowed;
}
.swatch.taken::after {
  content: attr(data-taken);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--team-ink);
}
.phone-join .btn-primary {
  min-height: 60px;
  font-family: var(--display);
  font-size: 1.05rem;
}

/* After joining the whole phone is the team colour. */
.phone-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 70% at 50% 0%, rgb(255 255 255 / 0.22), transparent 60%), var(--team);
  color: var(--team-ink);
  padding: 1.1rem 1.1rem 1.5rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.phone-team header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.phone-team .me {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* The name wraps only between words (two lines at most). A long word never breaks in the middle: fitName() in
   phone.js shrinks the name in two steps, and as a last resort cuts it with a … */
.me-name {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
}
.me-name.smaller {
  font-size: 1.1rem;
}
.me-name.smallest {
  font-size: 0.9rem;
}
.me-name.cut {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.phone-team .score {
  flex: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* new points count up without the pill wobbling */
  padding: 0.45rem 0.9rem;
  border-radius: var(--pill);
  background: rgb(0 0 0 / 0.16);
}
.phone-team .stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
}
.phone-team .big {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.phone-team .small {
  font-size: 1.15rem;
  max-width: 26ch;
  margin: 0;
}
.phone-team .result {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.8rem;
  margin: 0;
}
.phone-team .btn-quiet {
  color: inherit;
  opacity: 0.8;
}
.phone-team .countdown {
  width: 80%;
  --bar: var(--team-ink);
  background: rgb(0 0 0 / 0.18);
}
/* Freeze on the phone: each other team as a big button in its own colour. */
.freeze-teams {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.freeze-team {
  min-height: 56px;
  padding: 0.6rem 1rem;
  border: 3px solid rgb(0 0 0 / 0.25);
  border-radius: 18px;
  background: var(--team);
  color: var(--team-ink);
  font: inherit;
  font-weight: 700;
  font-size: 1.15rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.freeze-team.on {
  border-color: #b9e8ff;
  box-shadow: 0 0 0 4px rgb(185 232 255 / 0.5);
}
/* Picking the next question on the phone: categories first, then their points. */
.pick-board {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pick-cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  min-height: 56px;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 18px;
  background: rgb(0 0 0 / 0.18);
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  text-align: left;
  cursor: pointer;
}
.pick-cat .pick-name {
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pick-cat small {
  white-space: nowrap;
  opacity: 0.75;
  font-weight: 400;
}
.pick-cat:disabled {
  opacity: 0.4;
  cursor: default;
}
.pick-values {
  width: 100%;
  display: flex;
  flex-direction: column; /* one column, lowest points on top, like a column on the TV board */
  gap: 0.55rem;
}
.pick-tile {
  min-height: 60px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.14));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.18);
  color: inherit;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  cursor: pointer;
}
/* Already played: an empty slot, as on the TV. */
.pick-tile.used {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
  color: transparent;
  cursor: default;
}
.pick-cat:active:not(:disabled),
.pick-tile:active:not(:disabled) {
  transform: scale(0.97);
}
.offline-banner {
  position: fixed;
  inset: auto 1rem 1rem 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--pill);
  background: var(--bg-deep);
  color: var(--ink);
  font-weight: 700;
  text-align: center;
}

/* The buzzer: a big glowing disc. Dim while the host reads, lit when it counts. */
.buzzer {
  width: min(80vw, 46vh);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  padding: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: -0.03em;
  background: rgb(0 0 0 / 0.14);
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.3);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 80ms;
}
.buzzer .label {
  color: var(--team-ink);
  opacity: 0.45;
}
.buzzer.live {
  background: radial-gradient(circle at 50% 35%, #fff 0 55%, var(--pale) 100%);
  box-shadow: 0 0 0 12px rgb(255 255 255 / 0.28), 0 24px 60px rgb(0 0 0 / 0.3);
  animation: glow 1.1s ease-in-out infinite;
}
.buzzer.live .label {
  color: var(--team);
  opacity: 1;
  filter: saturate(1.2) brightness(0.85);
}
.buzzer.pressed,
.buzzer:active {
  transform: scale(0.94);
}
@keyframes glow {
  50% {
    box-shadow: 0 0 0 26px rgb(255 255 255 / 0.14), 0 24px 60px rgb(0 0 0 / 0.3);
  }
}
.phone-team.shake .stage {
  animation: shake 400ms;
}
@keyframes shake {
  20%,
  60% {
    transform: translateX(-10px);
  }
  40%,
  80% {
    transform: translateX(10px);
  }
}
.phone-team.first {
  animation: first-flash 700ms ease-out 2;
}
@keyframes first-flash {
  50% {
    background: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* Shown until a click or key press lets the page play sound. */
.sound-unlock {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  translate: -50% 0;
  z-index: 20;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--edge);
  border-radius: var(--pill);
  background: var(--bg-deep);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.5);
  cursor: pointer;
}
.display .sound-unlock {
  font-size: 2.4vh;
  cursor: none;
}

.resume {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-l);
  background: linear-gradient(90deg, rgb(var(--light-rgb) / 0.28), rgb(var(--flare-rgb) / 0.14));
  border: 1px solid rgb(var(--light-3-rgb) / 0.35);
}
.resume h2 {
  margin-bottom: 0.4rem;
}
.resume p {
  margin: 0 0 0.75rem;
  color: var(--muted);
}
.resume-teams {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.resume-teams li {
  display: flex;
  gap: 0.6rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--pill);
  font-weight: 700;
  font-size: 0.9rem;
}
.buzzer.try {
  width: min(44vw, 24vh);
  font-size: 1.4rem;
}

/* ---------- pictures in questions ---------- */

.tv-q.has-image .question {
  flex: 0 0 auto;
  font-size: 5vh;
  padding: 1.5vh 0 0;
}
.tv-q .spacer {
  flex: 0;
}
.q-img {
  flex: 1;
  min-height: 0;
  max-width: 100%;
  object-fit: contain;
  align-self: center;
  margin-top: 2vh;
  border-radius: 2vh;
  filter: drop-shadow(0 2vh 5vh rgb(0 0 0 / 0.45));
}
.q-img.reveal-img {
  animation: plate-in 450ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.host-imgs {
  display: flex;
  gap: 1rem;
  margin: 0 0 1rem;
}
.host-img {
  margin: 0;
}
.host-img img {
  display: block;
  max-height: 180px;
  max-width: 320px;
  border-radius: var(--r-s);
  border: 1px solid var(--edge);
}
.host-img figcaption {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

/* ---------- round 2 ---------- */

.round-tag {
  display: inline-block;
  margin-right: 0.6em;
  padding: 0.15em 0.75em;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--light), var(--flare));
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85em;
}
.round2-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2vh 1vw;
  max-width: 80vw;
}
.round2-cats li {
  padding: 1.1vh 1.8vw;
  border-radius: var(--pill);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.14);
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.6vh;
}
.round2-picker {
  margin: 1vh 0 0;
  padding: 1.4vh 2.4vw;
  border-radius: var(--pill);
  font-family: var(--display);
  font-weight: 700;
  font-size: 3vh;
}

/* ---------- final round ---------- */

.tv-final {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3vh;
  animation: zoom-in 500ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.final-kicker {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 3.2vh;
  padding: 1vh 3vh;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--light), var(--flare));
}
.final-cat {
  font-size: 13vh;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.final-note {
  margin: 0;
  font-size: 3.2vh;
  color: var(--muted);
}
.final-teams {
  list-style: none;
  margin: 1vh 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2vh 1vw;
}
.final-teams li {
  display: flex;
  gap: 1.2vw;
  align-items: center;
  padding: 1.3vh 2vw;
  border-radius: var(--pill);
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.4vh;
  transition: opacity 200ms;
}
.final-teams li.waiting {
  opacity: 0.45;
}
.tv-q .final-teams {
  margin-top: 2vh;
}

.tv-judge {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3vh;
  min-height: 0;
}
.judge-q {
  text-align: center;
}
.judge-q .muted {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.6vh;
  color: var(--muted);
}
.judge-q p {
  margin: 1vh 0 0;
  font-weight: 700;
  font-size: 4.2vh;
  text-wrap: balance;
}
.judge-cards {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22vw, 1fr));
  gap: 2vh 1.2vw;
  align-content: center;
}
.judge-card {
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
  padding: 2.4vh 1.8vw;
  border-radius: var(--r-l);
  background: var(--glass);
  box-shadow: inset 0 0 0 0.35vh var(--team);
  min-height: 20vh;
}
.judge-card .who {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.4vh;
}
.judge-card .what {
  flex: 1;
  font-weight: 700;
  font-size: 4.4vh;
  line-height: 1.15;
  overflow-wrap: normal; /* a long word gets smaller text (longWord() in ui.js) instead of breaking in the middle */
  color: var(--muted);
}
.judge-card .what.long {
  font-size: 3.6vh;
}
.judge-card .what.longer {
  font-size: 3vh;
}
.judge-card .what.longest {
  font-size: 2.4vh;
  overflow-wrap: break-word; /* a word of 20+ letters still can't push past the card */
}
.judge-card.shown {
  background: var(--team);
  color: var(--team-ink);
  animation: plate-in 450ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.judge-card.shown .what {
  color: inherit;
}
.judge-card .bet {
  align-self: flex-start;
  font-family: var(--display);
  font-weight: 800;
  font-size: 3vh;
  padding: 0.6vh 1.6vh;
  border-radius: var(--pill);
  background: rgb(0 0 0 / 0.22);
}
.judge-card.right .bet {
  background: var(--good);
  color: #03281a;
}
.judge-card.wrong .bet {
  background: var(--bad);
  color: #33020d;
}
.judge-answer {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  font-size: 3vh;
  color: var(--muted);
  animation: plate-in 450ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.judge-answer b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 6vh;
  letter-spacing: -0.03em;
  color: var(--good);
  text-shadow: 0 0 40px rgb(46 229 157 / 0.45);
}
.judge-img {
  max-height: 16vh;
  border-radius: 1.5vh;
}

.host-final .where b {
  margin-left: 0.2rem;
}
.final-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-width: 900px;
}
.final-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto 2fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.8rem 0.6rem 1rem;
  border-radius: var(--r-m);
  background: var(--glass);
  box-shadow: inset 4px 0 0 var(--team);
}
.final-row .who {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
}
.final-row .bet {
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.final-row .said {
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.final-row .verdict {
  display: flex;
  gap: 0.4rem;
}
.final-row .verdict .btn {
  min-width: 0;
  min-height: 40px;
  padding: 0 1rem;
  opacity: 0.45;
}
.final-row .verdict .btn.on {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px currentColor;
}
.final-row.judged .verdict .btn:not(.on) {
  opacity: 0.25;
}

/* phone: final round */
.phone-team .kicker {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--pill);
  background: rgb(0 0 0 / 0.2);
}
.final-form {
  width: 100%;
  max-width: 420px;
  display: grid;
  gap: 0.75rem;
  text-align: left;
}
.final-form label {
  font-weight: 700;
}
.final-form .muted {
  font-weight: 400;
  opacity: 0.8;
}
.final-form input {
  min-height: 60px;
  font-size: 1.5rem;
  font-weight: 700;
  width: 100%;
  background: rgb(255 255 255 / 0.92);
  color: var(--primary-ink);
  border: 0;
  border-radius: var(--r-m);
}
.final-form .error {
  color: inherit;
  min-height: 0;
}
.chips {
  display: flex;
  gap: 0.5rem;
}
.chip {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: var(--pill);
  background: rgb(0 0 0 / 0.2);
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}
.btn-ink {
  min-height: 60px;
  border: 0;
  background: var(--team-ink);
  color: var(--team);
  font-family: var(--display);
  font-size: 1.05rem;
}
.btn-ink:hover {
  background: var(--team-ink);
  filter: brightness(0.92);
}
.final-form input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.final-form input[type='number']::-webkit-inner-spin-button,
.final-form input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- sound clips ---------- */

.clip-viz {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.2vh;
  height: 16vh;
  margin: 3vh auto 0;
}
.tv-q.has-image .clip-viz {
  height: 6vh;
  margin-top: 1vh;
}
.clip-viz span {
  width: 2.2vh;
  height: 25%;
  border-radius: var(--pill);
  background: linear-gradient(180deg, var(--flare), var(--light));
  opacity: 0.45;
}
.clip-viz.on span {
  opacity: 1;
  animation: eq 900ms ease-in-out infinite alternate;
}
.clip-viz.on span:nth-child(2) { animation-delay: -150ms; animation-duration: 700ms; }
.clip-viz.on span:nth-child(3) { animation-delay: -400ms; animation-duration: 1000ms; }
.clip-viz.on span:nth-child(4) { animation-delay: -250ms; animation-duration: 650ms; }
.clip-viz.on span:nth-child(5) { animation-delay: -600ms; animation-duration: 850ms; }
.clip-viz.on span:nth-child(6) { animation-delay: -100ms; animation-duration: 750ms; }
.clip-viz.on span:nth-child(7) { animation-delay: -500ms; animation-duration: 950ms; }
@keyframes eq {
  from { height: 18%; }
  to { height: 100%; }
}
.clip-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--muted);
  font-weight: 700;
}
.clip-line .clip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
}
.clip-line.on {
  color: var(--ink);
}
.clip-line.on .clip-dot {
  background: var(--flare);
  box-shadow: 0 0 10px var(--flare);
}

/* ---------- question editor ---------- */

.ed-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 0;
  overflow: hidden;
}
/* The quiz list and the quiz scroll on their own, under the bar. */
.ed-side,
.ed-main {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable; /* room for the scroll bar is always kept, so nothing moves when it comes or goes */
}
.ed-side {
  overflow-x: hidden; /* never a sideways scroll bar: the rows below are built so they can't be wider anyway */
  border-right: 1px solid var(--edge);
  background: rgb(var(--deep-0-rgb) / 0.55);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ed-side h2 {
  font-size: 1.1rem;
}
/* The heading is a button so a narrow window can fold the list; on a laptop it looks like plain text. */
.ed-side-toggle {
  all: unset;
  font: inherit;
  color: inherit;
  cursor: default;
}
/* New quiz and Import side by side, Make questions with AI across the whole width under them */
.ed-side-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.ed-side-actions .btn {
  min-width: 0;
  max-width: 100%;
  padding-inline: 0.6rem;
  text-align: center;
}
.ed-side-actions #ai-quiz {
  grid-column: 1 / -1;
}
/* Export all quizzes sits at the very bottom of the column, under the list */
.ed-export-all {
  align-self: flex-start;
  max-width: 100%;
  margin-top: auto;
}
.ed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
/* A row in the list: the quiz button and its Archive / Bring back button side by side */
.ed-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.ed-row > .ed-item {
  flex: 1;
  min-width: 0;
}
.ed-row.archived .ed-item {
  opacity: 0.75;
}
.ed-archive {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px; /* the tap target stays 48px, only the icon is small */
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.ed-archive svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ed-archive:hover,
.ed-archive:focus-visible {
  color: var(--ink);
  background: rgb(255 255 255 / 0.08);
}
/* The quiz button: a grid whose one column can shrink to nothing (minmax(0, 1fr)), so a long title, a long
   description or a cover picture never makes the list wider than its column (which would push Archive out of
   sight behind a scroll bar). The cover is a slim banner across the top of the row, so the words keep the
   whole width under it (a thumbnail beside them left too little room in this narrow column). */
.ed-item {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  row-gap: 0.45rem;
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-m);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}
.ed-item:hover {
  background: var(--glass);
}
.ed-item.on {
  background: var(--glass-hi);
  border-color: var(--edge);
}
.ed-item-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem;
  min-width: 0;
}
/* The title keeps to two lines (then …), and a long word is broken rather than sticking out. */
.ed-item-title {
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.ed-item-sub,
.ed-item-desc {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ed-item-sub {
  color: var(--muted);
}
.ed-item-sub.bad {
  color: var(--bad);
}
.ed-item-thumb {
  display: block;
  width: 100%;
  height: 52px;
  object-fit: cover;
  border-radius: var(--r-s);
  border: 1px solid var(--edge);
  background: var(--glass);
}
/* Archived quizzes: folded at the bottom of the list */
.ed-archived {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--edge);
}
.ed-archived > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
}
.ed-archived .ed-list {
  margin-top: 0.35rem;
}

/* Description and cover picture, under the quiz name */
.ed-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 1rem 1.5rem;
  align-items: start;
}
.ed-about .ed-media img {
  max-height: 90px;
}
@media (max-width: 800px) {
  .ed-about {
    grid-template-columns: 1fr;
  }
}
.ed-cover .btn {
  min-height: 48px;
}

/* Host lobby: the chosen quiz's cover and description under the picker */
.quiz-about {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.quiz-about .quiz-cover {
  width: 96px;
  height: 96px;
  flex: none;
  object-fit: cover;
  border-radius: var(--r-m);
  border: 1px solid var(--edge);
  background: var(--glass);
}
.quiz-about .quiz-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.ed-main {
  padding: 1.25rem 1.75rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}
/* "About the quiz": the description, the cover picture and the languages, folded under the name with a one-line
   status, so the questions start right under the name. */
.ed-fold {
  padding: 0 1.25rem;
  border-radius: var(--r-m);
  background: var(--glass);
  border: 1px solid var(--edge);
}
.ed-fold > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  min-height: 48px;
  padding: 0.3rem 0;
  cursor: pointer;
}
.ed-fold > summary > b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}
.ed-fold-status {
  color: var(--muted);
}
.ed-fold-body {
  display: grid;
  gap: 1rem;
  padding: 0.25rem 0 1.25rem;
}
.ed-main h2 {
  font-size: 1.1rem;
}
.ed-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-l);
  background: linear-gradient(90deg, rgb(var(--light-rgb) / 0.28), rgb(var(--flare-rgb) / 0.14));
  border: 1px solid rgb(var(--light-3-rgb) / 0.35);
}
.ed-note p {
  margin: 0;
}
.ed-head {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.ed-head .spacer {
  flex: 1;
}
.ed-name {
  width: min(520px, 100%);
}
.ed-name input {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
}
.ed-status {
  color: var(--muted);
  font-size: 0.9rem;
  padding-bottom: 0.9rem;
  min-width: 6rem;
}
.ed-status.bad {
  color: var(--bad);
  font-weight: 700;
}

.ed-board {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(150px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.ed-col {
  display: grid;
  gap: 8px;
  align-content: start;
}
.ed-cat {
  position: relative;
}
.ed-cat input {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  padding-right: 2rem;
  padding-left: 2rem;
}
.ed-cat.bad input {
  border-color: var(--bad);
}
.ed-x {
  position: absolute;
  right: 4px;
  top: 50%;
  translate: 0 -50%;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
}
.ed-x:hover {
  background: var(--glass-hi);
  color: var(--ink);
}
.ed-tile {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  text-align: left;
  min-height: 92px;
  padding: 0.7rem 0.8rem;
  border-radius: var(--r-m);
  border: 1px solid rgb(var(--light-3-rgb) / 0.18);
  background: linear-gradient(180deg, rgb(var(--light-2-rgb) / 0.2), rgb(var(--light-rgb) / 0.06));
  cursor: pointer;
}
.ed-tile:hover {
  border-color: var(--light);
}
.ed-tile b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}
.ed-tile span {
  font-size: 0.9rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ed-tile {
  position: relative;
}
/* A special placed by hand: its icon in the corner, in the special's colour. */
.ed-tile .ed-special {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--k);
}
/* Filled in by AI just now: a dashed edge until another quiz is opened. */
.ed-tile.ai-filled {
  border: 1px dashed #7fe1ff;
}
.ed-tile.blank span {
  color: var(--muted);
}
.ed-tile.bad {
  border-color: var(--bad);
  box-shadow: inset 0 0 0 1px var(--bad);
}
.ed-tools {
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
#ed-final {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}
.ed-final-tile {
  width: min(520px, 100%);
}
.ed-problems {
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: var(--r-m);
}
.ed-problems.good {
  background: rgb(46 229 157 / 0.12);
  border: 1px solid rgb(46 229 157 / 0.4);
  font-weight: 700;
}
.ed-problems.bad {
  background: rgb(255 77 109 / 0.1);
  border: 1px solid rgb(255 77 109 / 0.4);
}
.ed-problems p {
  margin: 0 0 0.5rem;
  font-weight: 700;
}
.ed-problems ul {
  margin: 0;
  padding-left: 1.2rem;
}

.ed-dialog {
  width: min(1100px, calc(100vw - 2rem)); /* wide on a laptop or TV: the words left, the media right */
  max-height: calc(100vh - 2rem);
  overflow: hidden; /* only the form inside scrolls, or there are two scroll bars */
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: var(--r-l);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 30px 90px rgb(0 0 0 / 0.6);
}
.ed-dialog::backdrop {
  background: rgb(var(--deep-0-rgb) / 0.7);
  backdrop-filter: blur(4px);
}
.ed-dialog form {
  display: grid;
  gap: 0.6rem;
  padding: 0 1.5rem;
}
.ed-dialog h2 {
  font-size: 1.3rem;
}
/* The title bar of every editor dialog: the title and the × (48px), fixed at the top while the form scrolls. */
.ed-dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 -1.5rem;
  padding: 0.6rem 1rem 0.4rem 1.5rem;
  background: var(--panel); /* solid: scrolled text must not show through the title; a soft shadow under it instead */
  box-shadow: 0 10px 14px -10px rgb(0 0 0 / 0.55);
}
.ed-dialog-head h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.ed-dialog-close {
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.ed-dialog-close:hover,
.ed-dialog-close:focus-visible {
  background: var(--glass-hi);
  border-color: var(--edge);
  color: var(--ink);
}
.ed-dialog textarea,
.ed-about textarea {
  width: 100%;
  min-height: 64px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-s);
  background: rgb(0 0 0 / 0.25);
  font: inherit;
  color: inherit;
  resize: vertical;
}
.ed-dialog textarea:focus,
.ed-about textarea:focus {
  border-color: var(--light);
}
/* The question's box starts short and grows with the text (where the browser can; else its 3 rows). */
.ed-q-text {
  field-sizing: content;
  min-height: 64px;
  max-height: 40vh;
}
.ed-about textarea {
  min-height: 4.5rem;
}
/* The question dialog: the words (points, question, answer…) on the left, the media on the right; one column in a
   narrow window. A board question's two pictures share a row and the clip spans both. */
.ed-q-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.ed-q-main,
.ed-q-media {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  min-width: 0;
}
.ed-q-media.board {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ed-q-media.board > .ed-media-wide {
  grid-column: 1 / -1;
}
.ed-q-media > :empty {
  display: none; /* no slowly-appearing block without a picture, no trim bar without a clip: no gap for them either */
}
/* Points and the special tile (board), the seconds and the points (Quick) on one row. */
.ed-q-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}
.ed-q-row input[type='number'] {
  width: 100%;
}
.ed-q-row .field small,
.ed-q-main .field > small,
.ed-media small {
  font-size: 0.82rem;
  line-height: 1.35;
}
@media (min-width: 1000px) {
  .ed-q-body {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}
@media (max-width: 560px) {
  .ed-q-media.board {
    grid-template-columns: minmax(0, 1fr);
  }
  .ed-q-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ed-media {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 0.75rem;
  border-radius: var(--r-m);
  background: var(--glass);
  border: 1px solid var(--edge);
}
.ed-media-label {
  font-weight: 700;
}
.ed-media small {
  color: var(--muted);
}
.ed-media img {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
  border-radius: var(--r-s);
  justify-self: start;
}
.ed-media audio {
  width: 100%;
}
.ed-media .btn {
  min-height: 40px;
  padding: 0 1rem;
  font-size: 0.9rem;
}
/* "Choose a file" and "Find a free picture" side by side, or one under the other in a narrow card. */
.ed-media .row {
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ed-media .btn {
  white-space: nowrap;
}
.ed-media-status {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.ed-media-status.bad {
  color: var(--bad);
}

/* The clip's trim bar (editor): the whole clip as a track, a handle at each end, the chosen part lit up, and a
   playhead while "Try it" plays. The handles are 48px wide for fingers; the visible knob is narrower. */
.ed-trim {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: var(--r-m);
  background: var(--glass);
  border: 1px solid var(--edge);
}
.ed-trim-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ed-trim-times {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.95rem;
}
.ed-trim.trimmed .ed-trim-times {
  color: var(--ink);
  font-weight: 700;
}
.ed-trim-track {
  position: relative;
  height: 48px;
  margin: 0 24px; /* room for the handles at the very ends */
  border-radius: var(--r-s);
  background: rgb(0 0 0 / 0.3);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.4);
  touch-action: none;
}
.ed-trim.loading .ed-trim-track {
  opacity: 0.5;
}
.ed-trim-range {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgb(var(--light-rgb) / 0.55), rgb(var(--light-rgb) / 0.3));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25);
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.18) 0 2px, transparent 2px 6px), linear-gradient(180deg, rgb(var(--light-rgb) / 0.6), rgb(var(--light-rgb) / 0.3));
}
.ed-trim-playhead {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 10px rgb(255 255 255 / 0.9);
  pointer-events: none;
  z-index: 3;
}
.ed-trim-handle {
  position: absolute;
  top: -4px;
  width: 48px;
  height: 56px;
  margin-left: -24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  z-index: 2;
}
.ed-trim-handle::before {
  content: '';
  position: absolute;
  inset: 0 18px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff, var(--pale));
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.45), inset 0 1px 0 #fff;
}
.ed-trim-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 14px;
  margin: -7px 0 0 -1px;
  background: rgb(var(--deep-2-rgb) / 0.6);
  border-radius: 1px;
  box-shadow: 4px 0 0 rgb(var(--deep-2-rgb) / 0.6), -4px 0 0 rgb(var(--deep-2-rgb) / 0.6);
}
.ed-trim-handle:hover::before {
  background: #fff;
}
.ed-trim-handle:focus-visible {
  outline: none;
}
.ed-trim-handle:focus-visible::before {
  box-shadow: 0 0 0 3px var(--light), 0 2px 8px rgb(0 0 0 / 0.45);
}
.ed-trim-handle:disabled {
  cursor: default;
}
.ed-trim-handle:disabled::before {
  opacity: 0.6;
}
.ed-trim-foot {
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ed-trim-foot small {
  color: var(--muted);
  flex: 1 1 12rem;
}
.ed-trim .btn {
  min-height: 48px;
}
.ed-trim.trying .ed-trim-try {
  background: var(--light);
  color: var(--primary-ink);
}
.ed-dialog-actions {
  justify-content: flex-end;
}
@media (max-width: 800px) {
  /* One column: the quiz list above the quiz, both scrolling together under the bar. (Not a grid: its rows would
     share the fixed height and the list would be drawn over the quiz.) */
  .ed-layout {
    display: block;
    overflow-y: auto;
  }
  .ed-side,
  .ed-main {
    overflow: visible;
  }
  .ed-side {
    border-right: 0;
    border-bottom: 1px solid var(--edge);
  }
  /* The heading folds the list away once a quiz is picked (editor.js), so the quiz starts right under the bar. */
  .ed-side-toggle {
    display: block;
    cursor: pointer;
    min-height: 48px;
    width: 100%;
    text-align: left;
  }
  .ed-side-toggle::before {
    content: '▾';
    display: inline-block;
    color: var(--muted);
    margin-right: 0.5rem;
    transition: transform 120ms;
  }
  .ed-side.folded .ed-side-toggle::before {
    transform: rotate(-90deg);
  }
  .ed-side.folded > :not(h2) {
    display: none;
  }
  .ed-main {
    padding-inline: 1.25rem;
  }
}
.ed-dialog form {
  max-height: calc(100vh - 2rem - 2px); /* inside the dialog's border */
  overflow-y: auto;
  padding-bottom: 0;
}
.ed-dialog-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin: 0 -1.5rem;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(180deg, transparent, var(--panel) 30%);
}
@media (max-width: 640px) {
  .ed-dialog form {
    padding-inline: 1rem;
  }
  .ed-dialog-head {
    margin-inline: -1rem;
    padding-inline: 1rem 0.5rem;
  }
  .ed-dialog-actions {
    margin-inline: -1rem;
    padding-inline: 1rem;
  }
}

/* Making a quiz with AI */
.ed-dialog h3 {
  margin: 0.4rem 0 0;
  font-size: 1rem;
}
.ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.ai-opts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
}
.ai-request {
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  min-height: 160px;
}
.ai-too-many {
  color: #ffcf5c;
}
.ed-dialog .muted,
.ai-note .muted {
  margin: 0;
  color: var(--muted);
}
.ai-warn {
  margin: 0;
  color: #ffcf5c;
}
.ai-note .muted {
  margin-top: 0.35rem;
}
.ed-dialog-actions .btn-quiet {
  margin-right: auto;
}
@media (max-width: 800px) {
  .ai-grid {
    grid-template-columns: 1fr;
  }
}

/* "Find a free picture" (editor): the source and licence as pills, a grid of thumbnails, and a preview with who
   made the picture and its licence. Opens on top of the question dialog. */
.pic-dialog a,
.ed-credit a,
.ed-credits a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(var(--light-3-rgb) / 0.6);
  text-underline-offset: 3px;
}
.pic-dialog a:hover,
.ed-credit a:hover,
.ed-credits a:hover {
  text-decoration-color: currentColor;
}
.ed-dialog .pic-intro {
  margin-top: -0.5rem;
}
.pic-controls {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-m);
  background: rgb(0 0 0 / 0.16);
  border: 1px solid var(--edge);
}
.pic-row-label {
  font-weight: 700;
}
.pic-license {
  display: contents;
}
.pic-license-hint,
.pic-tip {
  grid-column: 2;
  margin: -0.35rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}
.pic-pills label {
  flex: 1 1 0;
}
.pic-pills span {
  text-align: center;
}
.pic-picSource span {
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 1.1rem;
  border-radius: var(--r-m);
  text-align: center;
  line-height: 1.2;
}
.pic-picSource small {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
}
.pic-picSource input:checked + span small {
  color: inherit;
  opacity: 0.75;
}
.pic-search {
  display: flex;
  gap: 0.6rem;
}
.pic-search input {
  flex: 1;
  min-width: 0;
}
.pic-wiki-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}
.pic-status {
  margin: 0;
  color: var(--muted);
}
.pic-status:empty {
  display: none;
}
.pic-status.bad,
.pic-use-status.bad {
  color: var(--bad);
  font-weight: 700;
}
.pic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
.pic-tile {
  display: grid;
  gap: 0.4rem;
  min-height: 48px;
  min-width: 0;
  padding: 0.4rem 0.4rem 0.5rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-m);
  background: var(--glass);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms, transform 120ms, background 120ms;
}
.pic-tile:hover {
  border-color: rgb(var(--light-3-rgb) / 0.8);
  background: var(--glass-hi);
  transform: translateY(-2px);
}
.pic-tile:active {
  transform: scale(0.98);
}
.pic-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-s);
  background: rgb(0 0 0 / 0.3);
}
.pic-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pic-thumb img.broken,
.pic-preview-img img.broken {
  visibility: hidden;
}
.pic-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: var(--pill);
  background: rgb(var(--deep-0-rgb) / 0.8);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}
.pic-thumb .pic-badge {
  position: absolute;
  left: 0.35rem;
  bottom: 0.35rem;
  max-width: calc(100% - 0.7rem);
  overflow: hidden;
  text-overflow: ellipsis;
}
.pic-badge.nc {
  background: #ffcf5c;
  color: #2a1d00;
  box-shadow: none;
}
.pic-badge.free {
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  background: var(--good);
  color: #04301e;
  box-shadow: none;
}
.pic-cap {
  overflow: hidden;
  padding: 0 0.2rem;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pic-more {
  justify-self: center;
}
.pic-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.pic-preview-img {
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  border-radius: var(--r-m);
  background: rgb(0 0 0 / 0.3);
}
.pic-preview-img img {
  display: block;
  max-width: 100%;
  max-height: 50vh;
  object-fit: contain;
}
.pic-preview-info {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}
.pic-preview-info h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.pic-preview-info p {
  margin: 0;
}
.pic-by {
  font-weight: 700;
}
.pic-license-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.pic-license-line .pic-badge {
  font-size: 0.9rem;
  padding: 0.3rem 0.8rem;
}
.pic-nc-note {
  color: #ffcf5c;
}
.pic-preview-actions {
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.pic-use-status {
  margin: 0;
  color: var(--muted);
}
.pic-use-status:empty {
  display: none;
}
/* Its credit under a picture in the question dialog, and the list of all of them under the quiz. */
.ed-media small.ed-credit {
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.ed-credits {
  padding: 0.25rem 1.25rem;
  border-radius: var(--r-m);
  background: var(--glass);
  border: 1px solid var(--edge);
}
.ed-credits summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
  cursor: pointer;
}
.ed-credits .muted {
  margin: 0 0 0.75rem;
  color: var(--muted);
}
.ed-credits ul {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.ed-credits li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.ed-credits li img {
  flex: none;
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--r-s);
  background: rgb(0 0 0 / 0.3);
}
.ed-credits li > span {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ed-credits li > span > span {
  color: var(--muted);
  font-size: 0.9rem;
}
/* A song clip in the credits list: a note instead of a thumbnail. */
.ed-credits li .ed-credit-note {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 48px;
  border-radius: var(--r-s);
  background: rgb(0 0 0 / 0.3);
  font-size: 1.6rem;
  color: var(--muted);
}

/* "Find a song clip" (editor): Deezer previews as rows with the cover, the title and artist, ▶ to listen and
   "Use this clip". Opens on top of the question dialog, like the picture search. */
.song-dialog {
  width: min(820px, calc(100vw - 2rem));
}
.song-controls {
  grid-template-columns: max-content minmax(0, 1fr);
}
.song-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.song-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 48px auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border-radius: var(--r-m);
  background: var(--glass);
  border: 1px solid var(--edge);
}
.song-row.busy {
  opacity: 0.7;
}
.song-cover {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--r-s);
  background: rgb(0 0 0 / 0.3);
}
.song-cover-none {
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: var(--muted);
}
.song-info {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.song-info > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.song-artist {
  font-size: 0.95rem;
}
.song-facts {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.song-use-status {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: normal;
}
.song-use-status:empty {
  display: none;
}
.song-use-status.bad {
  color: var(--bad);
}
.song-play {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
}
.song-play:hover {
  background: rgb(255 255 255 / 0.18);
}
.song-play.on {
  background: var(--light);
  border-color: transparent;
  box-shadow: 0 0 14px rgb(var(--light-rgb) / 0.6);
}
.song-play:focus-visible {
  outline: 2px solid var(--light);
  outline-offset: 2px;
}
.song-use {
  min-height: 48px;
  white-space: nowrap;
}
.song-more {
  justify-self: start;
}
@media (max-width: 640px) {
  .song-controls {
    grid-template-columns: 1fr;
  }
  .song-row {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    grid-template-areas:
      'cover info play'
      'use use use';
  }
  .song-cover {
    grid-area: cover;
    width: 48px;
    height: 48px;
  }
  .song-info {
    grid-area: info;
  }
  .song-play {
    grid-area: play;
  }
  .song-use {
    grid-area: use;
  }
}
@media (max-width: 640px) {
  .pic-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.9rem;
  }
  .pic-license-hint,
  .pic-tip {
    grid-column: auto;
    margin: 0;
  }
  .pic-picLicense label {
    flex-basis: 100%;
  }
  .pic-search {
    flex-wrap: wrap;
  }
  .pic-search input {
    flex-basis: 100%;
  }
  .pic-go {
    flex: 1;
  }
  .pic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .pic-preview {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .pic-preview-actions .btn {
    flex: 1 1 auto;
  }
}

/* The TV's small credit line under a picture found with "Find a free picture" (only once the answer is shown). */
.pic-credit {
  align-self: center;
  margin: 1vh 0 0;
  max-width: 90%;
  font-size: 1.7vh;
  line-height: 1.3;
  color: var(--muted);
  opacity: 0.85;
  text-align: center;
  overflow-wrap: anywhere;
}
.tv-judge .pic-credit,
.quick-q .pic-credit {
  margin: 0;
}
.host-credit {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  opacity: 0.85;
}

/* A Quick quiz in the editor: section cards with their questions in a list, and the multiple-choice dialog. */
.ed-sections {
  display: grid;
  gap: 1rem;
}
.ed-sec-intro {
  display: grid;
  gap: 0.35rem;
}
.ed-sec-intro .muted {
  color: var(--muted);
}
.ed-sec {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.25rem 1.25rem;
  border-radius: var(--r-l);
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, rgb(var(--light-2-rgb) / 0.12), rgb(var(--light-rgb) / 0.03));
}
.ed-sec-head {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.ed-sec-num {
  align-self: center;
  padding: 0.35rem 0.85rem;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--light), var(--flare));
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.ed-sec-name {
  flex: 1 1 260px;
}
.ed-sec-name input {
  font-family: var(--display);
  font-weight: 600;
}
.ed-sec-secs input {
  width: 100%;
}
.ed-sec-secs {
  width: 12rem;
}
.ed-sec-head.bad input {
  border-color: var(--bad);
}
.ed-order {
  display: flex;
  gap: 2px;
  flex: none;
}
.ed-sec-head .ed-order {
  margin-left: auto;
  padding-bottom: 6px;
}
.ed-mini {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
}
.ed-mini.ed-del {
  font-size: 1.2rem;
}
.ed-mini:hover:not(:disabled) {
  background: var(--glass-hi);
  color: var(--ink);
}
.ed-mini:disabled {
  opacity: 0.25;
  cursor: default;
}
.ed-qlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.ed-qitem {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ed-qrow {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  text-align: left;
  border-radius: var(--r-m);
  border: 1px solid rgb(var(--light-3-rgb) / 0.18);
  background: linear-gradient(180deg, rgb(var(--light-2-rgb) / 0.16), rgb(var(--light-rgb) / 0.05));
  cursor: pointer;
}
.ed-qrow:hover {
  border-color: var(--light);
}
.ed-qrow.bad {
  border-color: var(--bad);
  box-shadow: inset 0 0 0 1px var(--bad);
}
/* Filled in or added by AI just now: a dashed edge until another quiz is opened. */
.ed-qrow.ai-filled {
  border: 1px dashed #7fe1ff;
}
.ed-qnum {
  font-family: var(--display);
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
.ed-qtext {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ed-qrow.blank .ed-qtext {
  color: var(--muted);
}
.ed-qmeta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.ed-qright {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 15rem;
  padding: 0.2rem 0.7rem 0.2rem 0.3rem;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--opt) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--opt) 55%, transparent);
  font-size: 0.85rem;
  font-weight: 700;
}
.ed-qright span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ed-qright svg {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0.2rem;
  border-radius: 50%;
  background: var(--opt);
  color: var(--opt-ink);
}
.ed-qright.none {
  padding-left: 0.7rem;
  background: none;
  border-color: rgb(255 77 109 / 0.6);
  color: var(--bad);
}
.ed-qbadge {
  padding: 0.15rem 0.6rem;
  border-radius: var(--pill);
  border: 1px solid var(--edge);
  background: var(--glass);
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
.ed-qbadge.double {
  color: #ffd60a;
  border-color: rgb(255 214 10 / 0.45);
}
.ed-qbadge.kind {
  color: var(--ink);
}
.ed-qnum-small {
  flex: none;
  font-family: var(--display);
  font-size: 0.8rem;
}
.ed-add-question {
  justify-self: start;
}
.ed-opts {
  gap: 0.35rem;
}
.ed-opt {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.3rem 0.2rem 0.2rem;
  border-radius: var(--r-m);
  border: 1px solid var(--edge);
  background: rgb(0 0 0 / 0.16);
}
.ed-opts-moved {
  display: block;
  margin-top: 0.4rem;
  color: var(--muted);
}
.ed-opt-shape {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-s);
  background: var(--opt);
  color: var(--opt-ink);
}
.ed-opt-shape svg {
  width: 24px;
  height: 24px;
}
.ed-opt-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 48px;
  padding: 0 0.9rem;
  border-radius: var(--pill);
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}
.ed-opt-right input {
  width: 20px;
  height: 20px;
  accent-color: var(--good);
}
.ed-opt.right {
  border-color: var(--good);
  box-shadow: inset 0 0 0 1px var(--good);
  background: rgb(46 229 157 / 0.08);
}
.ed-opt.right .ed-opt-right {
  color: var(--good);
}
/* Put in order: the place in front of each answer instead of a Right tick (the tick's label is a flex box, so
   `hidden` alone wouldn't hide it). */
.ed-opt-right[hidden] {
  display: none;
}
.ed-opt-n {
  flex: none;
  min-width: 1.5rem;
  text-align: right;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--muted);
}
.ed-opts.ordered .ed-opt {
  grid-template-columns: auto 40px minmax(0, 1fr); /* the place, the shape, the answer (no Right tick) */
  padding-right: 0.9rem;
}
.ed-kind-pills label {
  flex: 1 1 auto;
}
/* A slowly appearing picture: the seconds and the Pixels / Blur choice on one row under the picture's card. */
.ed-unveil-box {
  display: grid;
  gap: 0.25rem;
}
.ed-unveil-box > .check {
  min-height: 40px;
}
.ed-unveil {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0.6rem;
  align-items: end;
}
.ed-unveil input[type='number'] {
  width: 100%;
}
.ed-unveil .pills span {
  padding-inline: 0.6rem;
}
.ed-unveil-pills span {
  gap: 0.45rem;
}
.ed-unveil-icon {
  display: inline-flex;
  line-height: 0;
}
.ed-unveil-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  line-height: 1.35;
}
.ai-part {
  display: contents;
}
@media (max-width: 800px) {
  .ed-qrow {
    grid-template-columns: 1.8rem minmax(0, 1fr);
  }
  .ed-qmeta {
    grid-column: 2;
    flex-wrap: wrap;
  }
}

/* ---------- pop-up questions (ask(), tell() and askNumber() in ui.js) ---------- */

.pq-modal {
  width: min(460px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: var(--r-l);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 30px 90px rgb(0 0 0 / 0.6);
}
.pq-modal::backdrop {
  background: rgb(var(--deep-0-rgb) / 0.72);
}
.pq-modal form {
  display: grid;
  gap: 0.9rem;
  padding: 1.6rem 1.6rem 1.4rem;
}
.pq-modal h2 {
  font-size: 1.3rem;
  line-height: 1.2;
}
/* A small light above the title: violet (the accent) for a question, red for one that deletes something. */
.pq-modal h2::before {
  content: '';
  display: block;
  width: 2.4rem;
  height: 0.3rem;
  margin-bottom: 0.9rem;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--light), var(--flare));
}
.pq-modal.danger h2::before {
  background: var(--bad);
}
.pq-modal-text {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}
.pq-modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.pq-modal-actions .btn {
  min-width: 120px;
}
.pq-modal-field {
  display: grid;
  gap: 0.4rem;
}
.pq-modal-label {
  display: grid;
  gap: 0.4rem;
  font-weight: 700;
}
.pq-number {
  display: flex;
  gap: 0.5rem;
}
.pq-number input {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
}
.pq-number input {
  -moz-appearance: textfield; /* no tiny arrows: the ± button and typing do it */
  appearance: textfield;
}
.pq-number input::-webkit-inner-spin-button,
.pq-number input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pq-number input[aria-invalid='true'] {
  border-color: var(--bad);
}
.pq-sign.btn {
  flex: none;
  width: 48px;
  padding: 0;
  font-size: 1.3rem;
}
.pq-modal-preview,
.pq-modal-error {
  margin: 0;
  font-size: 0.95rem;
}
.pq-modal-preview {
  color: var(--muted);
  min-height: 1.4em;
}
.pq-modal-error {
  color: var(--bad);
  font-weight: 700;
}
/* A quick fade and grow (none for people who ask for less motion). */
.pq-modal[open] {
  animation: pq-in 180ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.pq-modal[open]::backdrop {
  animation: pq-fade 180ms ease-out;
}
@keyframes pq-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
}
@keyframes pq-fade {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pq-modal[open],
  .pq-modal[open]::backdrop {
    animation: none;
  }
}
/* On a phone-sized window the buttons share the width, the main one on top. */
@media (max-width: 480px) {
  .pq-modal form {
    padding: 1.3rem 1.2rem 1.1rem;
  }
  .pq-modal-actions {
    flex-direction: column-reverse;
  }
  .pq-modal-actions .btn {
    width: 100%;
  }
}

/* ---------- "What kind of quiz?" (chooseKind() in editor.js): two big cards with a small picture each ---------- */

.ed-kind-modal {
  width: min(640px, calc(100vw - 2rem));
}
.ed-kind-modal form {
  position: relative;
}
.ed-kind-modal .ed-dialog-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
}
.ed-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.ed-kind {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  align-content: start;
  min-height: 48px;
  padding: 1rem 0.9rem 1.1rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-m);
  background: var(--glass);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.ed-kind:hover {
  background: var(--glass-hi);
  border-color: rgb(var(--light-3-rgb) / 0.55);
}
.ed-kind:active {
  transform: scale(0.98);
}
.ed-kind-pic {
  display: block;
  width: 100%;
  max-width: 176px;
  height: auto;
  margin-bottom: 0.5rem;
  font-family: var(--display);
}
.ed-kind-shape {
  color: #fff;
  fill: currentColor;
}
.ed-kind b {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.2;
}
.ed-kind span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}
/* Phone width: the cards stack, each with its picture on the left and the words on the right. */
@media (max-width: 520px) {
  .ed-kinds {
    grid-template-columns: 1fr;
  }
  .ed-kind {
    grid-template-columns: 7rem 1fr;
    column-gap: 0.9rem;
    justify-items: start;
    align-items: center;
    text-align: left;
    padding: 0.8rem 0.9rem;
  }
  .ed-kind-pic {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }
}

/* ---------- keyboard help ---------- */

.help {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgb(var(--deep-0-rgb) / 0.7);
  backdrop-filter: blur(4px);
}
.help-card {
  width: min(560px, calc(100vw - 2rem));
  padding: 1.75rem;
  border-radius: var(--r-l);
  border: 1px solid var(--edge);
  background: var(--panel);
  box-shadow: 0 30px 90px rgb(0 0 0 / 0.6);
  display: grid;
  gap: 1rem;
}
.help-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1rem;
  margin: 0;
  align-items: center;
}
.help-card dd {
  margin: 0;
}
.help-card .btn {
  justify-self: end;
}
.help-foot {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
kbd {
  display: inline-block;
  min-width: 2rem;
  text-align: center;
  font-family: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--edge);
  background: var(--glass-hi);
}
.host-bar .btn kbd {
  min-width: 0;
  padding: 0 0.4rem;
}

/* ---------- Kaosmodus ---------- */

/* Each special has its own colour. */
.k-triple { --k: #ffd23f; --k-ink: #2b1d00; }
.k-bomb { --k: #ff4d4d; --k-ink: #2a0000; }
.k-hotseat { --k: #ff7a1a; --k-ink: #2a0e00; }
.k-rescue { --k: #2ee59d; --k-ink: #03281a; }
.k-turbo { --k: #7fe1ff; --k-ink: #032733; }
.k-jackpot { --k: #ffc233; --k-ink: #2b1d00; }
.k-freeze { --k: #b9e8ff; --k-ink: #06283a; }
.k-double { --k: #c99bff; --k-ink: #1d0638; }

.special-badge {
  font-family: var(--display);
  font-weight: 700;
  padding: 0.15em 0.7em;
  border-radius: var(--pill);
  background: var(--k);
  color: var(--k-ink);
  white-space: nowrap;
}
.tv-q .where .special-badge {
  font-size: 2.6vh;
  margin-left: auto;
  margin-right: 1.5vw;
}

/* The TV reveal: a reel of icons spins and lands on the special. */
.tv-special {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  text-align: center;
  border-radius: 4vh;
  background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--k) 30%, transparent), transparent 70%);
}
.reel {
  height: 30vh;
  width: 30vh;
  overflow: hidden;
  border-radius: 5vh;
  background: rgb(0 0 0 / 0.35);
  box-shadow: inset 0 0 0 0.6vh var(--k), 0 0 10vh color-mix(in srgb, var(--k) 45%, transparent);
}
.reel-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(calc((var(--n) - 1) * -30vh));
}
.reel-strip span {
  height: 30vh;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16vh;
  line-height: 1;
  color: var(--k);
}
.tv-special.spin .reel-strip {
  animation: reel 1.9s cubic-bezier(0.12, 0.7, 0.18, 1) both;
}
@keyframes reel {
  from {
    transform: translateY(0);
  }
}
.special-text {
  display: grid;
  justify-items: center;
  gap: 2vh;
}
.special-text h1 {
  font-size: 12vh;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--k);
  text-shadow: 0 0 6vh color-mix(in srgb, var(--k) 50%, transparent);
}
.special-text p {
  margin: 0;
  font-size: 4vh;
  font-weight: 700;
  max-width: 34ch;
  text-wrap: balance;
}
.special-team {
  font-family: var(--display);
  font-weight: 700;
  font-size: 3vh;
  padding: 1.2vh 3vw;
  border-radius: var(--pill);
}
.tv-special.spin .special-text {
  animation: plate-in 500ms 1.9s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.tv-boom {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  border-radius: 4vh;
  background: radial-gradient(55% 55% at 50% 45%, rgb(255 77 77 / 0.4), transparent 70%);
}
.boom-icon {
  font-size: 30vh;
  line-height: 1;
}
.tv-boom h1 {
  font-size: 16vh;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #ff4d4d;
  text-shadow: 0 0 8vh rgb(255 77 77 / 0.6);
}
.tv-boom.bang {
  animation: bang 700ms cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes bang {
  0% {
    transform: scale(0.2);
    opacity: 0;
    background-color: #fff;
  }
  20% {
    background-color: rgb(255 255 255 / 0.6);
  }
}

/* Host: the special card, special tiles on the board, the freeze choice. */
.host-board .tile {
  position: relative;
}
.tile-special {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.9rem;
  line-height: 1;
}
.host-board .tile[data-special] {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
}
.specials-note {
  margin-top: 0.75rem;
}
.special-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  max-width: 720px;
  border-radius: var(--r-l);
  background: color-mix(in srgb, var(--k) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--k) 60%, transparent);
}
.special-card h2 {
  font-size: 1.8rem;
  color: var(--k);
}
.special-card p {
  margin: 0.4rem 0 0;
  font-size: 1.1rem;
}
.special-icon {
  font-family: var(--display);
  font-weight: 800;
  font-size: 3rem;
  color: var(--k);
  line-height: 1;
}
.freeze-pick p {
  font-weight: 700;
  margin: 0 0 0.6rem;
}
.freeze-pick .btn.plate {
  border: 0;
  background: var(--team);
  color: var(--team-ink);
  opacity: 0.55;
}
.freeze-pick .btn.plate.on {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px #b9e8ff;
}

/* Daily Double: the host can type the bet too. */
.double-bet {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
}
.double-bet p {
  flex-basis: 100%;
  margin: 0;
}
.double-bet input {
  width: 9rem;
}

/* Kaosmodus: which specials to use (lobby settings). */
.crazy-kinds {
  border: 1px solid var(--edge);
  border-radius: var(--r-m);
  padding: 0.6rem 0.9rem 0.8rem;
  margin: 0.6rem 0 0; /* the legend sits on the top edge, so it needs room under the hint above */
  min-width: 0; /* a fieldset is as wide as its contents by default, which pushed it past the panel */
}
.crazy-kinds legend {
  font-weight: 700;
  padding: 0 0.3rem;
}
#crazy-kind-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(7.25rem, 100%), 1fr)); /* two columns in the lobby panel */
  gap: 0 0.75rem;
}
#crazy-kind-list .check {
  min-height: 48px;
  gap: 0.4rem;
  line-height: 1.2;
}
.kind-icon {
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  font-family: var(--display);
  font-weight: 800;
  color: var(--k);
}

/* A slowly appearing picture: hard block edges when scaled up to the TV (the blur style is smoothed as usual). */
canvas.q-img.unveil.pixels {
  image-rendering: pixelated;
}

/* Background music settings. */
input[type='range'] {
  width: 100%;
  accent-color: var(--light);
}
.music-files small {
  color: var(--muted);
}
.music-row {
  display: grid;
  grid-template-columns: 1fr auto; /* the moment and its tune on the left, the buttons on the right */
  align-items: center;
  gap: 0.2rem 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--edge);
}
.music-row > .row {
  grid-column: 2;
  grid-row: 1 / span 2;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.music-row audio,
.music-row .music-status {
  grid-column: 1 / -1;
}
.music-row audio {
  grid-row: 3;
}
.music-row:first-child {
  border-top: 0;
}
.music-mood {
  font-weight: 700;
}
.music-builtin {
  color: var(--muted);
  font-size: 0.9rem;
}
.music-row audio {
  width: 100%;
  height: 36px;
}
.music-row .btn {
  min-height: 48px;
  padding: 0 0.9rem;
  font-size: 0.85rem;
}
.music-status {
  min-height: 0;
}

/* The TV screen inside the host page (single-screen mode). */
body.display.embedded {
  cursor: default;
}
.embedded .tv-board button.tile {
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-family: var(--display);
  font-weight: 700;
  font-size: 5.6vh;
  transition: box-shadow 120ms;
}
.embedded .tv-board button.tile:hover,
.embedded .tv-board button.tile:focus-visible {
  box-shadow: inset 0 0 0 0.5vh var(--light), 0 0 4vh rgb(var(--light-rgb) / 0.5);
  outline: none;
}
.stage-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: calc(100vh - 73px);
}
.stage-area iframe {
  flex: 1;
  width: 100%;
  border: 0;
  min-height: 0;
  background: var(--bg);
}
.stage-controls .controls {
  border-top: 1px solid var(--edge);
}
.controls .team-btn {
  background: var(--team);
  border-color: var(--team);
  color: var(--team-ink);
  opacity: 0.6;
  min-height: 40px;
  font-size: 0.9rem;
}
.controls .team-btn.on {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px currentColor;
}
.peek-note {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-m);
  background: rgb(255 77 109 / 0.14);
  border: 1px solid rgb(255 77 109 / 0.45);
  font-weight: 700;
}
:fullscreen .host-bar {
  display: none;
}
:fullscreen .stage-area {
  height: 100vh;
}

/* Filling the empty spots with AI: what is missing. */
.ai-gaps p {
  margin: 0;
  font-weight: 700;
}
.ai-gaps ul {
  margin: 0.3rem 0 0.8rem;
  padding-left: 1.2rem;
}

#ed-round2 > small {
  display: block;
  margin: 0.3rem 0 1rem;
}

/* ---------- Quick quiz (multiple choice) ----------
   The answer options are four colours and shapes (OPTION_COLORS and SHAPES in lib/quick.js), in the same
   places on the TV, the host and the phones. Set --opt (and --opt-ink) on an element for its option colour. */

/* Phone: the shapes to press, in a dark tray so they stand out on any player colour. */
.choices {
  align-self: stretch;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 10px;
  padding: 10px;
  min-height: 0;
  max-height: 72vh;
  border-radius: 26px;
  background: rgb(0 0 0 / 0.24);
  box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.2);
}
.choice {
  min-height: 48px;
  border: 0;
  border-radius: 18px;
  padding: 0.6rem;
  background: var(--opt);
  color: var(--opt-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 -7px 0 rgb(0 0 0 / 0.2), inset 0 2px 0 rgb(255 255 255 / 0.35), 0 6px 16px rgb(0 0 0 / 0.22);
  transition: transform 90ms, opacity 160ms, box-shadow 160ms;
  animation: choice-in 260ms cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
}
.choice:nth-child(2) {
  animation-delay: 40ms;
}
.choice:nth-child(3) {
  animation-delay: 80ms;
}
.choice:nth-child(4) {
  animation-delay: 120ms;
}
@keyframes choice-in {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}
.choice .shape {
  width: min(42%, 120px);
  height: auto;
  fill: currentColor;
  filter: drop-shadow(0 3px 0 rgb(0 0 0 / 0.18));
}
.choices.with-text .choice .shape {
  width: min(28%, 64px);
}
.choice-text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
/* A long word ("Colosseum") would otherwise be broken in two on a narrow phone. */
.choice-text.long {
  font-size: 1.05rem;
}
.choice-text.longer {
  font-size: 0.9rem;
}
.choice:active,
.choice.chosen {
  transform: scale(0.96);
}
.choice.chosen {
  box-shadow: 0 0 0 4px #fff, 0 10px 30px rgb(0 0 0 / 0.3);
}
.choice.faded {
  opacity: 0.22;
}
/* Tick all / put in order: a tap ticks a shape (or gives it its number), and Submit sends them all. */
.choices.picking .choice {
  position: relative;
}
.choice.ticked {
  box-shadow: 0 0 0 4px #fff, 0 10px 30px rgb(0 0 0 / 0.3);
}
.pick-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--pill);
  background: #fff;
  color: #10131f;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
  transform: scale(0);
  transition: transform 160ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.choice.ticked .pick-badge {
  transform: scale(1);
}
.answer-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.answer-bar .small {
  margin: 0;
}
.answer-bar-btns {
  display: flex;
  gap: 0.6rem;
}
.answer-bar-btns .btn {
  flex: 1;
  min-height: 56px;
}
.answer-bar-btns .btn-quiet {
  flex: 0 0 auto;
}
.phone-team .stage:has(.answer-bar) .choices {
  max-height: 54vh;
}
.phone-question {
  margin: 0;
  max-width: 32ch;
  padding: 0.75rem 1.1rem;
  border-radius: 18px;
  background: rgb(0 0 0 / 0.16);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  text-wrap: balance;
}
.phone-team .stage:has(.choices) {
  justify-content: stretch;
  gap: 0.8rem;
}
.phone-team .stage:has(.choices) .countdown {
  width: 100%;
  flex: none;
}
/* The four shapes in a row (the lobby): a hint of what is coming. */
.shape-row {
  display: flex;
  gap: 0.7rem;
}
.shape-row span {
  width: 3.2rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--opt);
  color: var(--opt-ink);
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.2), 0 6px 14px rgb(0 0 0 / 0.2);
  animation: choice-in 400ms cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}
.shape-row span:nth-child(2) {
  animation-delay: 80ms;
}
.shape-row span:nth-child(3) {
  animation-delay: 160ms;
}
.shape-row span:nth-child(4) {
  animation-delay: 240ms;
}
.shape-row .shape {
  width: 58%;
  fill: currentColor;
}
.ready-dots {
  display: flex;
  gap: 0.6rem;
}
.ready-dots span {
  width: 0.9rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  animation: ready-dot 1s ease-in-out infinite;
}
.ready-dots span:nth-child(2) {
  animation-delay: 160ms;
}
.ready-dots span:nth-child(3) {
  animation-delay: 320ms;
}
@keyframes ready-dot {
  50% {
    transform: scale(0.5);
    opacity: 0.35;
  }
}
/* The answer is locked in: the chosen shape, big. */
.locked-shape {
  width: 9.5rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 32px;
  background: var(--opt);
  color: var(--opt-ink);
  box-shadow: 0 0 0 6px rgb(255 255 255 / 0.85), inset 0 -8px 0 rgb(0 0 0 / 0.2), 0 18px 44px rgb(0 0 0 / 0.3);
  animation: plate-in 380ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.locked-shape .shape {
  width: 56%;
  fill: currentColor;
}
/* Right or wrong: a white disc with a big tick or cross. */
.verdict-badge {
  width: 8.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 0 0 10px rgb(255 255 255 / 0.25), 0 20px 50px rgb(0 0 0 / 0.3);
  animation: plate-in 450ms cubic-bezier(0.2, 1.5, 0.4, 1);
}
.verdict-badge .mark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 4.6rem;
  line-height: 1;
}
.verdict-badge.right .mark {
  color: #12b373;
}
.verdict-badge.wrong .mark {
  color: #e8283f;
}
.streak,
.moved {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.45rem 1rem;
  border-radius: var(--pill);
  background: rgb(0 0 0 / 0.2);
}
.right-was {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}
/* Emoji reactions after a question (setting quickReactions): a row of round buttons under the result, 48px each
   (six fit a 360px phone), the tapped one bounces. */
.reactions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.reaction-btn {
  width: 3rem;
  height: 3rem;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(0 0 0 / 0.18);
  color: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.reaction-btn:active {
  transform: scale(0.92);
}
.reaction-btn.sent {
  animation: reaction-sent 500ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes reaction-sent {
  30% {
    transform: scale(1.4);
  }
}
.right-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
/* An order: the chips under each other, numbered. */
.right-chips.as-list {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}
.right-chips.as-list .opt-chip {
  justify-content: flex-start;
  text-align: left;
}
.chip-n {
  flex: none;
  min-width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #10131f;
  font-size: 0.95rem;
  line-height: 1;
}
.opt-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--pill);
  background: var(--opt);
  color: var(--opt-ink);
  font-family: var(--display);
  font-weight: 700;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.7), 0 8px 20px rgb(0 0 0 / 0.2);
}
.opt-chip .shape {
  width: 1.6rem;
  fill: currentColor;
}
.medal {
  font-size: 5.5rem;
  line-height: 1;
  animation: plate-in 600ms cubic-bezier(0.2, 1.5, 0.4, 1);
}
.phone-team.cheer {
  animation: first-flash 650ms ease-out 1;
}

/* TV: the Quick quiz screens. */
.tv-q.still,
.tv-final.still {
  animation: none;
}
.pts-badge {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.3vh;
  color: #fff;
  padding: 0.8vh 2vh;
  border-radius: var(--pill);
  background: var(--glass-hi);
  white-space: nowrap;
}
.pts-badge.double {
  background: linear-gradient(90deg, var(--light), var(--flare));
  box-shadow: 0 0 3vh rgb(var(--flare-rgb) / 0.45);
}
.where-sec {
  color: var(--ink);
}
.where-sec::after {
  content: '·';
  margin: 0 0.8vw;
  color: var(--muted);
}
.tv-q.quick-ready .question {
  font-size: 7.4vh;
}
.tv-q.quick-ready.has-image .question {
  font-size: 5vh;
}
.tv-q.quick-ready .band {
  font-size: 3vh;
}

.quick-q {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2.2vh;
}
.quick-head {
  border-radius: 3.2vh;
  padding: 2.2vh 3vw 2.6vh;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px var(--edge);
}
.quick-head .where {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2vw;
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.4vh;
  color: var(--muted);
}
.quick-head .question {
  margin: 1.4vh 0 0;
  text-align: center;
  font-weight: 700;
  font-size: 4.8vh;
  line-height: 1.2;
  text-wrap: balance;
}
.quick-q.fresh .quick-head {
  animation: drop-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
/* "Tick all that are right" / "Put in the right order": a pill under the question. */
.quick-style {
  width: fit-content;
  margin: 1.6vh auto 0;
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 0.7vh 2vw 0.7vh 1vw;
  border-radius: var(--pill);
  background: rgb(255 255 255 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.6vh;
  color: var(--ink);
}
.quick-style .style-icon {
  padding: 0.3vh 1vw;
  border-radius: var(--pill);
  background: #fff;
  color: #10131f;
  font-size: 2vh;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.tv-q.quick-ready .quick-style {
  font-size: 3vh;
}
@keyframes drop-in {
  from {
    transform: translateY(-4vh);
    opacity: 0;
  }
}
.quick-mid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 22vh 1fr 22vh;
  align-items: center;
  justify-items: center;
  gap: 3vw;
}
.quick-q.settled .quick-mid {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr); /* so the bars and the order list fit the band instead of pushing into the verdict */
}
/* The result of a slowly appearing picture question: the clear picture at last, beside the bars. */
.quick-q.settled .quick-mid.with-picture {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 2vw;
}
.quick-media.unveiled .q-img {
  max-height: 100%;
  animation: plate-in 450ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.quick-mid.with-picture .quick-order-result {
  width: 100%;
}
.quick-media {
  height: 100%;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quick-media .q-img {
  margin: 0;
}
.quick-media .clip-viz {
  margin: 0 auto;
}

/* The clock: a ring that empties, and the seconds left. */
.q-timer {
  --ring: #fff;
  position: relative;
  width: 19vh;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--light-rgb) / 0.28), rgb(var(--light-rgb) / 0.06) 70%);
  box-shadow: 0 0 6vh rgb(var(--light-rgb) / 0.3);
}
.q-timer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--left, 1) * 1turn), rgb(255 255 255 / 0.1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.4vh), #000 calc(100% - 1.3vh));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.4vh), #000 calc(100% - 1.3vh));
}
.q-timer.low {
  --ring: var(--bad);
  box-shadow: 0 0 7vh rgb(255 77 109 / 0.45);
}
.q-timer.off {
  visibility: hidden;
}
.q-timer span {
  font-family: var(--display);
  font-weight: 800;
  font-size: 8vh;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.q-timer.low span {
  color: #ff8095;
}
.q-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6vh;
}
.q-count b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 10vh;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.q-count span {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.2vh;
  color: var(--muted);
  max-width: 18vh;
}

/* The answer tiles: in the same places as the phones' buttons. */
.quick-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 13.5vh;
  gap: 1.6vh 1.2vw;
}
.quick-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.8vw;
  padding: 0 2.2vw 0 1.4vw;
  border-radius: 2.6vh;
  background: var(--opt);
  color: var(--opt-ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.5vh;
  line-height: 1.12;
  letter-spacing: -0.01em;
  box-shadow: inset 0 -0.9vh 0 rgb(0 0 0 / 0.2), inset 0 0.2vh 0 rgb(255 255 255 / 0.35), 0 1.2vh 3vh rgb(0 0 0 / 0.3);
  transition: opacity 400ms, transform 400ms, filter 400ms;
  min-width: 0;
}
.quick-q.fresh:not(.settled) .quick-opt {
  animation: choice-in 380ms cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
  animation-delay: calc(var(--i) * 70ms);
}
.opt-shape {
  flex: none;
  width: 9vh;
  height: 9vh;
  display: grid;
  place-items: center;
  border-radius: 1.8vh;
  background: rgb(0 0 0 / 0.14);
}
.opt-shape .shape {
  width: 62%;
  fill: currentColor;
  filter: drop-shadow(0 0.3vh 0 rgb(0 0 0 / 0.18));
}
.opt-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.quick-opt.wrong {
  /* Faded colour turns muddy (yellow goes olive), so a wrong answer becomes dark glass with its shape still in colour. */
  background: rgb(255 255 255 / 0.06);
  color: rgb(246 244 255 / 0.6);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  transform: scale(0.97);
}
.quick-opt.wrong .opt-shape {
  background: rgb(0 0 0 / 0.22);
  color: var(--opt);
}
.quick-opt.wrong .opt-shape .shape {
  filter: none;
}
.quick-opt.right {
  z-index: 1;
  transform: scale(1.03);
  box-shadow: inset 0 -0.9vh 0 rgb(0 0 0 / 0.2), 0 0 0 0.6vh #fff, 0 0 8vh var(--opt);
  animation: right-glow 1.6s ease-in-out infinite;
}
@keyframes right-glow {
  50% {
    box-shadow: inset 0 -0.9vh 0 rgb(0 0 0 / 0.2), 0 0 0 0.6vh #fff, 0 0 14vh var(--opt);
  }
}
.opt-tick {
  flex: none;
  width: 7vh;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #12b373;
  font-size: 4.4vh;
  font-weight: 800;
  animation: plate-in 450ms cubic-bezier(0.2, 1.5, 0.4, 1) 300ms backwards;
}
/* Put in order: each tile gets its right place as a number (the tiles stay in the order they were shown). */
.opt-tick.opt-rank {
  color: #10131f;
  font-family: var(--display);
  font-size: 4vh;
  animation-delay: calc(var(--i) * 120ms + 300ms);
}
.quick-opt.placed {
  box-shadow: inset 0 -0.9vh 0 rgb(0 0 0 / 0.2), 0 0 0 0.4vh rgb(255 255 255 / 0.7);
}
/* After a "put in order" question: the options in the right order, in the middle where the bars would be. */
.quick-order-result {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(72vw, 130vh);
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1vh;
}
.quick-order-result li {
  flex: 1 1 0; /* the rows share the band, never taller than a tile */
  min-height: 0;
  max-height: 8vh;
  display: flex;
  align-items: center;
  gap: 1.6vw;
  padding: 0 2vw 0 1.2vw;
  border-radius: 2.2vh;
  background: var(--opt);
  color: var(--opt-ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.4vh;
  line-height: 1.12;
  box-shadow: inset 0 -0.7vh 0 rgb(0 0 0 / 0.2), inset 0 0.2vh 0 rgb(255 255 255 / 0.35), 0 1.2vh 3vh rgb(0 0 0 / 0.3);
  animation: order-in 500ms cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
  animation-delay: calc(var(--i) * 160ms + 100ms);
}
@keyframes order-in {
  from {
    transform: translateX(-4vw);
    opacity: 0;
  }
}
.quick-order-result .order-n {
  flex: none;
  width: 5.4vh;
  height: 5.4vh;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #10131f;
  font-weight: 800;
  font-size: 3.4vh;
}
.quick-order-result .opt-shape {
  width: 5.6vh;
  height: 5.6vh;
}
.quick-order-result .order-count {
  flex: none;
  margin-left: auto;
  font-family: var(--text);
  font-weight: 600;
  font-size: 2.3vh;
  opacity: 0.85;
  white-space: nowrap;
}

/* After the answers: a bar per option. */
.quick-bars {
  height: 100%;
  min-height: 0;
  display: flex;
  justify-content: center;
  gap: 3vw;
  padding-top: 1vh;
}
.qbar {
  width: 11vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vh;
}
.qbar b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 4.4vh;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.qbar-fill {
  width: 100%;
  height: calc(var(--h) * 32vh + 1vh);
  border-radius: 1.4vh 1.4vh 0.6vh 0.6vh;
  background: linear-gradient(180deg, color-mix(in srgb, var(--opt) 80%, #fff), var(--opt) 30%);
  box-shadow: inset 0 0.2vh 0 rgb(255 255 255 / 0.5);
  transform-origin: bottom;
  animation: bar-grow 700ms cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
  animation-delay: calc(var(--i) * 90ms + 100ms);
}
@keyframes bar-grow {
  from {
    transform: scaleY(0);
  }
}
.qbar.right .qbar-fill {
  box-shadow: inset 0 0.2vh 0 rgb(255 255 255 / 0.6), 0 0 0 0.4vh #fff, 0 0 6vh var(--opt);
}
.qbar:not(.right) .qbar-fill {
  /* The same for the bars: light grey glass with a cap in the option's colour, not a faded colour. */
  background: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.1));
  box-shadow: inset 0 0.7vh 0 var(--opt), inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
.qbar:not(.right) b {
  color: var(--muted);
}
.qbar-shape {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  color: var(--opt);
}
.qbar-shape .shape {
  width: 5vh;
  fill: currentColor;
}
.qbar-shape i {
  font-style: normal;
  font-family: var(--display);
  font-weight: 800;
  font-size: 4vh;
  color: var(--good);
}
.quick-verdict {
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.4vh;
  animation: plate-in 450ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

/* Players' reactions (Quick quiz, a `reaction` message): "🔥 Alex" floats up from the bottom edge and fades out
   over 3 s, above everything and never in the way. With "reduce motion" it only fades, in place. */
.tv-reactions {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 20;
}
/* Each reaction gets a lane (display.js): a spot along the left or right edge, away from the bars, the verdict and
   the top 5 in the middle, and a --lift so ones that arrive together start at different heights instead of on top
   of each other. It rises through the lower part of the screen and fades out before the question at the top. */
.reaction {
  position: absolute;
  bottom: var(--lift, 0vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6vh;
  transform: translate(-50%, 100%);
  animation: reaction-up 3s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  will-change: transform, opacity;
}
.reaction-emoji {
  font-size: 7vh;
  line-height: 1;
  filter: drop-shadow(0 1vh 2vh rgb(0 0 0 / 0.45));
}
.reaction-name {
  display: inline-flex;
  align-items: center;
  gap: 0.8vh;
  max-width: 11vw;
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.2vh;
  line-height: 1;
  padding: 0.8vh 1.6vh;
  border-radius: var(--pill);
  box-shadow: 0 1vh 3vh rgb(0 0 0 / 0.35);
}
.reaction-name > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reaction-name .avatar {
  flex: none;
  font-size: 1.3em;
}
@keyframes reaction-up {
  0% {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--drift, 0vw)), -50vh);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reaction {
    bottom: calc(12vh + var(--lift, 0vh));
    transform: translateX(-50%);
    animation: reaction-fade 3s ease-out forwards;
  }
  @keyframes reaction-fade {
    0% {
      opacity: 0;
    }
    15% {
      opacity: 1;
    }
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

/* The top 5 after each question: rows slide in from the bottom place up, with arrows for who moved. */
.quick-ranks {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4vh;
}
.quick-ranks h1 {
  font-size: 8vh;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 1vh;
}
.top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* A plain width (no min()), so the list is as wide on an older TV browser too: the plates are about 60vw, the
     arrow columns outside them. The owner's first real game showed narrow pills with the names cut to one letter
     on a smart TV (2026-10-11); nothing here may depend on the browser working out the width from the content. */
  width: 74vw;
  max-width: 1540px;
  display: grid;
  gap: 1.6vh;
}
/* The arrows sit in a column on the left, and an empty column of the same width on the right keeps the plates
   exactly centred under the title. minmax(0, 1fr): the plate takes the room between them, never more. */
.top-list li {
  display: grid;
  grid-template-columns: 10vh minmax(0, 1fr) 10vh;
  align-items: center;
  gap: 1.4vw;
  width: 100%;
}
.quick-ranks.fresh .top-list li {
  animation: rank-in 380ms cubic-bezier(0.2, 1, 0.3, 1) backwards;
  animation-delay: calc((4 - var(--i)) * 60ms + 40ms);
}
/* The animation (rankanim.js): the list first shows how it stood before the question, the points count up and
   the +points chips pop in, then the rows glide to their new places and the arrows fade in. */
.top-list {
  position: relative;
}
.top-list li.waiting {
  display: none;
}
.top-list .move {
  transition: opacity 300ms ease-out;
}
.top-list.animating .move {
  opacity: 0;
}
.top-list.animating .rank-delta:not(.pop) {
  visibility: hidden;
}
.rank-delta.pop {
  animation: plate-in 420ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
body[data-rankanim='move'] .top-list li {
  will-change: transform;
}
@keyframes rank-in {
  from {
    transform: translateX(-40vw);
    opacity: 0;
  }
}
.move {
  text-align: right;
  font-family: var(--display);
  font-weight: 800;
  font-size: 3vh;
  white-space: nowrap;
  color: var(--muted);
}
.move.up {
  color: var(--good);
}
.move.down {
  color: var(--bad);
}
.rank-plate {
  display: grid;
  grid-template-columns: 6.5vh minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1.6vw;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 1.6vh 2.6vw 1.6vh 1.6vh;
  border-radius: var(--pill);
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.6vh;
  line-height: 1;
}
.top-list li.lead .rank-plate {
  font-size: 4.4vh;
  padding-block: 2.2vh;
  box-shadow: 0 2vh 7vh color-mix(in srgb, var(--team) 50%, transparent);
}
.rank-n {
  width: 6.5vh;
  height: 6.5vh; /* also for a browser without aspect-ratio */
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.2);
  font-size: 0.75em;
  font-weight: 800;
}
/* Names show in full up to about 20 letters: a long one (more than 14 letters, `.long` from the TV page) is set a
   little smaller, and only a very long one ends in …. */
.rank-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-name.long {
  font-size: 0.78em;
}
.rank-delta {
  font-size: 0.65em;
  padding: 0.8vh 1.6vh;
  border-radius: var(--pill);
  background: rgb(0 0 0 / 0.18);
}
/* The score keeps the last column even when this question gave nothing (no delta pill), so the scores line up. */
.rank-plate .rank-score {
  grid-column: 4;
}
.rank-score {
  font-weight: 800;
  font-size: 1.15em;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: right;
}

/* Between sections: the section's name and the standings. */
.quick-section {
  gap: 2.2vh;
}
.quick-section .final-cat {
  font-size: 11vh;
}
.quick-section .final-teams li {
  font-size: 2.8vh;
}
.standings {
  margin-top: 2vh;
  width: 84vw;
  max-width: 1500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6vh;
}
.standings h2 {
  margin: 0;
  font-size: 2.6vh;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.standings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  gap: 1.2vh 2vw;
}
.standings-list.two {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
}
.standings-list li {
  display: grid;
  grid-template-columns: 5vh minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4vw;
  min-width: 0;
  box-sizing: border-box;
  padding: 1.1vh 2.2vw 1.1vh 1.1vh;
  border-radius: var(--pill);
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.8vh;
  line-height: 1;
  text-align: left;
}
.standings-list .rank-n {
  width: 5vh;
  height: 5vh;
}
.quick-section:not(.still) .standings-list li {
  animation: drop-in 500ms cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
  animation-delay: calc(var(--i) * 60ms + 300ms);
}

/* The end: a podium that rises 3rd, 2nd, 1st, then the winner's name. */
.quick-podium {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3vh;
}
.quick-podium h1 {
  font-size: 9vh;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-align: center;
  text-wrap: balance;
  margin: 0;
}
.quick-podium.fresh h1 {
  animation: plate-in 600ms cubic-bezier(0.2, 1.4, 0.4, 1) 3.1s backwards;
}
.podium {
  display: grid;
  grid-template-columns: repeat(3, 25vw); /* for a browser without min() */
  grid-template-columns: repeat(3, min(25vw, 46vh));
  align-items: end;
  gap: 1.2vw;
  height: 54vh;
  grid-template-rows: minmax(0, 100%); /* the row is exactly this high: a long name on two lines must not push the steps down past the clip */
  flex: none;
  clip-path: inset(-60vh -20vw 0 -20vw); /* the steps rise out of the floor */
}
.step {
  --medal: #e3a066;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2vh;
  height: 100%;
  min-width: 0;
}
/* When the winner's name takes two lines, the step's block gives way (down to its place and points), never the face
   or the name. */
.step > * {
  flex-shrink: 0;
}
.step > .step-block {
  flex-shrink: 1;
  min-height: 0;
}
.step.p1 {
  --medal: #ffd34d;
}
.step.p2 {
  --medal: #d9deec;
}
.step-name {
  max-width: 100%;
  padding: 1.4vh 2vw;
  border-radius: 3vh;
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.2vh;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.step.p1 .step-name {
  font-size: 4vh;
  box-shadow: 0 0 0 0.5vh var(--medal), 0 2vh 8vh color-mix(in srgb, var(--team) 60%, transparent);
}
.step-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
  padding-top: 2.4vh;
  border-radius: 2.6vh 2.6vh 0 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.04));
  box-shadow: inset 0 0.9vh 0 var(--medal), inset 0 0 0 1px var(--edge);
}
.p1 .step-block {
  height: 32vh;
  background: linear-gradient(180deg, rgb(255 211 77 / 0.3), rgb(255 255 255 / 0.04));
}
.p2 .step-block {
  height: 23vh;
}
.p3 .step-block {
  height: 16vh;
}
.step-place {
  font-family: var(--display);
  font-weight: 800;
  font-size: 7vh;
  line-height: 1;
  color: var(--medal);
  text-shadow: 0 0 4vh color-mix(in srgb, var(--medal) 50%, transparent);
}
.p3 .step-place {
  font-size: 5.5vh;
}
.step-block b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.2vh;
  font-variant-numeric: tabular-nums;
}
.quick-podium.fresh .step {
  animation: rise 900ms cubic-bezier(0.2, 1, 0.3, 1) backwards;
}
.quick-podium.fresh .step.p3 {
  animation-delay: 300ms;
}
.quick-podium.fresh .step.p2 {
  animation-delay: 1.2s;
}
.quick-podium.fresh .step.p1 {
  animation-delay: 2.2s;
}
@keyframes rise {
  from {
    transform: translateY(100%);
  }
}
.podium-rest {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1vh 1vw;
  max-width: 86vw;
}
.podium-rest li {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.2vh;
  padding: 0.8vh 1.8vh;
  border-radius: var(--pill);
  background: var(--glass-hi);
}
.podium-rest li span {
  color: var(--muted);
}
.quick-podium.fresh .podium-rest {
  animation: drop-in 500ms ease-out 3.4s backwards;
}
.tv-game.quick .tv-stage {
  padding-bottom: 4vh;
}

/* Host: the Quick quiz question with its options (the right one marked), and the players' list. */
.host-q .pts-badge {
  font-size: 0.8rem;
  padding: 0.2rem 0.7rem;
}
.host-opts {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  max-width: 860px;
}
.host-opt {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 56px;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--opt) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--opt) 55%, transparent);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
}
.host-opt .opt-shape {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--opt);
  color: var(--opt-ink);
}
.host-opt .opt-text {
  flex: 1;
}
.host-opt.right {
  background: color-mix(in srgb, var(--opt) 40%, transparent);
  box-shadow: inset 0 0 0 3px var(--good);
}
.opt-right {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--good);
  color: #03281a;
  font-weight: 800;
}
.opt-count {
  flex: none;
  font-size: 0.85rem;
  color: var(--muted);
}
/* Put in order: the right place in front of each option (shown shuffled, as on the TV). */
.opt-place {
  flex: none;
  min-width: 1.6rem;
  font-family: var(--display);
  font-size: 1.2rem;
  text-align: right;
}
.host-order-note {
  margin: -0.75rem 0 1.25rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.host-q .pts-badge.kind {
  color: var(--ink);
}
.gain {
  font-size: 0.7em;
  font-weight: 700;
  opacity: 0.8;
}
.rank-small {
  opacity: 0.7;
  font-size: 0.85em;
}
.answered-tick {
  margin-left: auto;
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.25);
  font-size: 0.8rem;
}
.quick-side .score-row {
  padding: 0.55rem 0.8rem;
}
.quick-side .score-row .tools button {
  min-height: 28px;
}

/* The fastest right answer (TV result line, host status) and how far to the next place (phone). */
.quick-verdict {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1vh 3vw;
}
.fastest {
  display: inline-flex;
  align-items: center;
  gap: 1.2vw;
}
.fastest-title {
  color: #ffd34d;
  text-shadow: 0 0 3vh rgb(255 211 77 / 0.5);
}
.quick-verdict .fastest .plate {
  padding: 0.9vh 2vw;
  border-radius: var(--pill);
  box-shadow: 0 1vh 4vh color-mix(in srgb, var(--team) 50%, transparent);
}
.quick-verdict .fastest b {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.quick-verdict .fastest {
  animation: plate-in 500ms cubic-bezier(0.2, 1.4, 0.4, 1) 500ms backwards;
}
.host-status .fastest {
  margin-left: 1rem;
  gap: 0.5rem;
  font-size: 1rem;
  color: #ffd34d;
}
.fastest-badge {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--pill);
  background: #ffd34d;
  color: #3a2a00;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.6), 0 8px 24px rgb(0 0 0 / 0.25);
  animation: plate-in 500ms cubic-bezier(0.2, 1.5, 0.4, 1) 250ms backwards;
}
.gap-line {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
}
.gap-name {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  vertical-align: middle;
  padding: 0.1rem 0.6rem;
  border-radius: var(--pill);
  background: var(--team);
  color: var(--team-ink);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.55);
}
.gap-name:has(.avatar) {
  padding-left: 0.15rem;
}
.gap-name .avatar {
  width: 1.5em;
  height: 1.5em;
  background: rgb(255 255 255 / 0.26);
}

/* ---------- branding (brand.js, setBrand() in ui.js): the host's logo, event name and accent colour ----------
   The logo is always an <img>, kept to the height of the "ProQuiz" wordmark it replaces, its own shape kept.
   With "White backing" (`plate`) it sits on a small white card, for dark logos. */
.wordmark.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.wordmark.logo::after {
  content: none;
}
.brand-logo {
  /* A set height (small pictures are scaled up to it, big ones down) and the width that goes with it, up to a
     limit; a very wide logo then fits inside, without stretching. */
  display: block;
  height: 2.5rem;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
  object-position: left center;
  user-select: none;
}
.brand-logo.plate {
  background: #fff;
  padding: 0.3em 0.6em;
  border-radius: 0.55em;
  box-shadow: 0 0.3em 1.2em rgb(0 0 0 / 0.3);
}
.host-bar .brand-logo {
  height: 38px;
  max-width: 200px;
}
.brand-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* TV: the logo big above "Scan to join" and on the end screen, and small in the corner during the game. */
.tv-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.2vh;
  margin-bottom: 4vh;
}
.tv-brand .brand-logo.big {
  height: 13vh;
  max-width: 36vw;
}
.tv-brand .brand-logo.big.plate {
  padding: 1.6vh 2.2vh;
  border-radius: 2vh;
}
.tv-brand .brand-name {
  font-size: 4vh;
  color: var(--muted);
}
.tv-brand.end {
  align-items: center;
  text-align: center;
  margin-bottom: 0;
}
.tv-brand.end .brand-logo.big {
  height: 10vh;
  object-position: center;
}
.tv-brand.end .brand-name {
  font-size: 3.4vh;
}
.quick-podium > .tv-brand.end {
  margin-bottom: auto;
  padding-top: 1vh;
}
.display > .wordmark.logo {
  top: 2.4vh;
  left: 3vw;
  z-index: 3;
}
.display > .wordmark .brand-logo {
  height: 4.6vh;
  max-width: 18vw;
}
.display > .wordmark .brand-logo.plate {
  padding: 0.7vh 1vh;
  border-radius: 1vh;
}
/* Room for the corner logo above the board, the question and the quick screens. */
body.logo-corner .tv-stage {
  padding-top: 9vh;
}

/* Phone: the logo and the event name at the top of the join screen. */
.join-head {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}
.join-head .brand-logo {
  height: 52px;
  max-width: 80%;
}
.join-head .brand-name {
  font-size: 1.05rem;
  color: var(--muted);
}

/* Host lobby: the branding settings in the Look group. */
.brand-settings {
  display: grid;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--edge);
}
.brand-logo-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.brand-preview {
  flex: 1 1 10rem;
  min-height: 84px;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  border-radius: var(--r-m);
  border: 1px solid var(--edge);
  /* the stage's own dark, so the preview shows how the logo will look on the screens */
  background: radial-gradient(120% 90% at 50% 0%, rgb(var(--light-rgb) / 0.35), transparent 70%), var(--bg);
}
.brand-preview.empty {
  border-style: dashed;
  background: rgb(0 0 0 / 0.15);
}
.brand-preview .brand-logo {
  height: 56px;
  max-width: 100%;
  object-position: center;
}
.brand-none {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}
.brand-logo-actions {
  display: grid;
  gap: 0.4rem;
}
.brand-msg.error {
  color: var(--bad);
}
.brand-accent-name {
  font-weight: 400;
  color: var(--muted);
}
.accent-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}
.accent {
  position: relative;
  width: 42px;
  height: 42px;
  cursor: pointer;
}
.accent input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.accent input[type='color'] {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
}
.accent span {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a) 35%, var(--b));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 2px 8px rgb(0 0 0 / 0.3);
  pointer-events: none;
  transition: transform 120ms;
}
.accent:hover span {
  transform: scale(1.08);
}
.accent input:checked + span,
.accent.custom.on span {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #fff;
}
.accent input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
/* Your own colour: a colour wheel until one is chosen, then that colour with a small wheel badge. */
.accent.custom span {
  background: conic-gradient(from 90deg, #ff4d4d, #ffd23f, #2ee59d, #38c8ff, #6f55ff, #ff5fa2, #ff4d4d);
}
.accent.custom.on span {
  background: var(--a);
}
.accent.custom span::after {
  content: '+';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
}
.accent.custom.on span::after {
  content: '';
  inset: auto -2px -2px auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, #ff4d4d, #ffd23f, #2ee59d, #38c8ff, #6f55ff, #ff5fa2, #ff4d4d);
  box-shadow: 0 0 0 2px var(--bg);
}

/* ---------- avatars (a player's face, a team's mascot; drawn by public/js/avatar.js) ----------
   A round coin as big as the text around it (1em), in the team colour; on a team plate a darker circle,
   like the place numbers. Everything that shows one only adds the face, so teams without one look as before. */
.avatar {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
  background: var(--team, rgb(255 255 255 / 0.14));
}
.plate .avatar {
  /* A lighter circle of the plate's own colour (darkening made yellow and cyan muddy). */
  background: rgb(255 255 255 / 0.26);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.4);
}
.avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* TV lobby: the face at the plate's left end. */
.tv-teams li {
  display: inline-flex;
  align-items: center;
}
.tv-teams li.has-face {
  gap: 0.45em;
  padding: 0.8vh 2.6vw 0.8vh 0.8vh;
}
.tv-teams li .avatar {
  width: 1.75em;
  height: 1.75em;
}
/* Plates with a face next to their text. */
.buzzed-name,
.special-team,
.round2-picker,
.fastest .plate,
.final-teams li,
.judge-card .who,
.over-name {
  display: inline-flex;
  align-items: center;
}
.buzzed-name .avatar {
  width: 1.5em;
  height: 1.5em;
  margin: -1.2vh 0.5em -1.2vh -2.6vw;
}
.special-team .avatar,
.round2-picker .avatar {
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.45em;
}
.quick-verdict .fastest .plate .avatar {
  width: 1.45em;
  height: 1.45em;
  margin: -0.6vh 0.45em -0.6vh -1.4vw;
}
.final-teams li .avatar {
  width: 1.5em;
  height: 1.5em;
  margin: -0.8vh 0 -0.8vh -1.3vw;
}
.judge-card .who {
  gap: 0.5em;
}
.judge-card .who .avatar {
  width: 1.7em;
  height: 1.7em;
}
.over-name {
  gap: 0.55em;
}
.tv-over li .avatar {
  width: 1.5em;
  height: 1.5em;
  margin: -1vh 0;
}
/* The board quiz's score strip. */
.tv-scores li .avatar {
  flex: none;
  width: calc(4.4vh * var(--strip-scale));
  height: calc(4.4vh * var(--strip-scale));
  margin: -0.6vh 0 -0.6vh -0.6vw;
}
.tv-scores .name {
  flex: 1;
}

/* The top 5 and the standings: the face takes the place circle's spot, the place a small badge on its corner. */
.rank-plate,
.standings-list li {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.standings-list li {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.rank-face {
  position: relative;
  display: block;
  width: 1.9em;
  height: 1.9em;
}
.standings-list .rank-face {
  width: 1.8em;
  height: 1.8em;
}
.rank-face .avatar {
  width: 100%;
  height: 100%;
}
.rank-face .rank-n {
  position: absolute;
  right: -0.45em;
  bottom: -0.35em;
  width: 1.55em;
  height: 1.55em;
  font-size: 0.55em;
  background: var(--bg-deep, #0c0b24);
  color: #fff;
  box-shadow: 0 0 0 0.12em var(--team);
}
.top-list li.lead .rank-face .rank-n {
  background: #ffd34d;
  color: #3a2a00;
  /* A ring in the plate's text colour (dark on yellow, lime, white …; white on dark colours), so the gold badge stands
     out on every one of the 16 colours. */
  box-shadow: 0 0 0 0.12em var(--team), 0 0 0 0.26em var(--team-ink, #fff);
}
/* The podium: the face stands on the name. */
.step-face.avatar {
  width: 9vh;
  height: 9vh;
  margin-bottom: -1vh;
  box-shadow: 0 0 0 0.45vh var(--medal), 0 1.5vh 5vh rgb(0 0 0 / 0.35);
}
.step.p1 .step-face.avatar {
  width: 12vh;
  height: 12vh;
}
.podium-rest li {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.podium-rest li .avatar {
  width: 1.3em;
  height: 1.3em;
  margin-block: -0.4vh;
}

/* Host lists. */
.team-list .name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.team-list .name > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-list li:has(.avatar) {
  padding-left: 0.45rem;
}
.team-list .avatar {
  width: 40px;
  height: 40px;
}
.score-row .avatar {
  width: 28px;
  height: 28px;
  margin-block: -4px;
}
.quick-side .score-row .avatar {
  width: 24px;
  height: 24px;
}
.rank-list li > span:first-child,
.resume-teams li,
.host-status .plate,
.final-row .who {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.host-status .plate .avatar {
  margin-left: -0.6em;
}
.rank-list .avatar,
.host-status .plate .avatar,
.final-row .who .avatar {
  width: 1.5em;
  height: 1.5em;
  margin-block: -0.3em;
}
.resume-teams .avatar {
  width: 1.6em;
  height: 1.6em;
  margin: -0.2rem 0 -0.2rem -0.55rem;
}

/* The phone: the face in the header, and the avatar part of the join form. */
.phone-team .me {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1;
}
.me-avatar.avatar {
  flex: none;
}
.me-avatar.avatar {
  width: 44px;
  height: 44px;
  background: rgb(0 0 0 / 0.16);
}
.avatar-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.avatar-big.avatar {
  width: 112px;
  height: 112px;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px rgb(255 255 255 / 0.85), 0 10px 30px color-mix(in srgb, var(--team) 45%, transparent);
  transition: background 150ms;
}
.avatar-dice {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: var(--r-m);
  background: var(--glass);
  cursor: pointer;
}
.avatar-dice svg {
  width: 34px;
  height: 34px;
}
.avatar-dice:active {
  transform: scale(0.94);
}
.avatar-dice.roll svg {
  animation: dice-roll 420ms cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes dice-roll {
  from {
    transform: rotate(-200deg) scale(0.6);
  }
}
.avatar-edit {
  flex: 1;
  padding: 0 1rem;
}
.avatar-builder {
  margin-top: 1rem;
  display: grid;
  gap: 0.9rem;
}
.avatar-builder[hidden] {
  display: none;
}
.avatar-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.avatar-tab {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 0 0.9rem;
  border: 1px solid var(--edge);
  border-radius: var(--pill);
  background: var(--glass);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.avatar-tab.on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}
.avatar-opts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
.avatar-opt {
  aspect-ratio: 1;
  min-height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 120ms;
}
.avatar-opt .avatar {
  width: 100%;
  height: 100%;
}
.avatar-opt:active {
  transform: scale(0.94);
}
.avatar-opt.on {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px #fff;
}
.avatar-dot {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: inset 0 -6px 0 rgb(0 0 0 / 0.18), 0 0 0 2px rgb(255 255 255 / 0.2);
}
.avatar-opts.dots .avatar-opt {
  background: var(--team);
}

/* ---------- extra languages in a quiz (lib/languages.js): flags, the phone's choice, translation lines ---------- */

/* A flag: a small bundled SVG (public/flags/), never emoji (Windows browsers don't draw flag emoji). */
.flag {
  display: inline-block;
  width: 1.3em;
  height: auto;
  aspect-ratio: 3 / 2;
  vertical-align: -0.2em;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18);
  flex: none;
}
.flag.big {
  width: 1.6em;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* A language name with its flag, inline ("Also in: 🇳🇴 Norsk, 🇹🇭 ไทย"). */
.lang-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-right: 0.6em;
  white-space: nowrap;
}

/* The phone's join form: "Read questions in:" pills with flags. */
.lang-pills span {
  gap: 0.5rem;
  padding: 0 0.9rem;
}
.lang-pills .flag {
  width: 1.5em;
}
.lang-field small {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}
/* The flag pill in the phone's header: tap to change the language later. */
.lang-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--pill);
  background: rgb(0 0 0 / 0.16);
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.lang-pill .flag {
  width: 1.6em;
}
.lang-menu {
  margin: 0.6rem 0 0;
  padding: 0.8rem 0.9rem;
  border-radius: var(--r-m);
  background: rgb(0 0 0 / 0.18);
}
.lang-menu .small {
  margin: 0 0 0.5rem;
}
/* The question (and, once revealed, the answer) in the phone's own language, above the buzzer. */
.phone-text {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
}
.phone-answer {
  margin: 0;
  max-width: 32ch;
  padding: 0.6rem 1rem;
  border-radius: 18px;
  background: rgb(0 0 0 / 0.16);
  border: 1px solid rgb(255 255 255 / 0.35);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
}
.phone-answer span {
  opacity: 0.75;
  font-weight: 400;
  font-size: 0.9rem;
}

/* Host: a small flag after a team that reads the quiz in another language. */
.flag-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  vertical-align: middle;
}
.flag-badge .flag {
  width: 1.2em;
}
/* Host: the translations of the question and the answer, in small grey lines under them. */
.host-trs {
  display: grid;
  gap: 0.25rem;
  margin: -0.75rem 0 1.25rem;
  max-width: 42ch;
}
.host-trs.under-answer {
  margin: -1rem 0 1.5rem;
}
.host-tr {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.35;
}
.host-tr .flag {
  width: 1.2em;
  vertical-align: -0.15em;
  align-self: center;
}
.host-trs.inline {
  display: block;
  margin: 0.15rem 0 0;
  max-width: none;
}
.host-trs.inline .host-tr {
  font-size: 0.85rem;
  font-weight: 400;
}
/* Host lobby: the quiz's extra languages under its description. */
.quiz-about-text {
  min-width: 0;
  display: grid;
  gap: 0.4rem;
}
.quiz-about .quiz-langs {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.quiz-languages .lang-tag {
  margin-right: 0.45em;
}

/* Editor: the Languages block under the description. */
.ed-languages {
  display: grid;
  gap: 0.35rem;
}
.ed-lang-row {
  align-items: flex-end;
  gap: 1rem 1.5rem;
  margin-top: 0.4rem;
}
.ed-main-lang {
  flex: none;
  min-width: 200px;
}
.ed-main-lang select {
  min-height: 48px;
  padding: 0 0.8rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-s);
  background: rgb(0 0 0 / 0.25);
  color: inherit;
}
.lang-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 320px;
  min-width: 0;
}
.lang-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.35rem 2.4rem 0.35rem 0.8rem;
  border: 1px solid var(--edge);
  border-radius: var(--pill);
  background: var(--glass);
}
.lang-chip .flag {
  width: 1.6em;
}
.lang-chip small {
  color: var(--good);
  font-size: 0.8rem;
}
.lang-chip.missing small {
  color: #ffd166;
}
.lang-chip .lang-translate {
  margin-left: 0.2rem;
}
.lang-chip .lang-remove {
  right: 2px;
}
.ed-add-language {
  min-height: 48px;
}
/* "Add a language": a grid of flag buttons. */
.ed-lang-modal {
  width: min(680px, 94vw);
}
.ed-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
  max-height: 60vh;
  overflow: auto;
  padding: 2px;
}
.ed-lang-pick {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-s);
  background: var(--glass);
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.ed-lang-pick:hover {
  background: var(--glass-hi);
}
.ed-lang-pick .flag {
  width: 1.8em;
}
/* The translations dialog: the main text on the left, the translation on the right. */
.tr-dialog {
  width: min(1100px, 96vw);
}
.tr-dialog h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tr-tools {
  align-items: center;
  gap: 0.8rem 1.5rem;
  margin: 0.5rem 0 1rem;
}
.tr-tools .check {
  margin: 0;
}
.tr-count {
  font-weight: 700;
  color: #ffd166;
}
.tr-count.good {
  color: var(--good);
}
.tr-list {
  display: grid;
  gap: 0.5rem;
}
.tr-where {
  margin: 1rem 0 0.2rem;
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 700;
}
.tr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: stretch;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid transparent;
  border-radius: var(--r-s);
  background: rgb(255 255 255 / 0.04);
}
.tr-row.missing {
  border-left-color: #ffd166;
}
.tr-main {
  display: grid;
  gap: 0.15rem;
  align-content: center;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tr-kind {
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tr-dialog .tr-input textarea {
  min-height: 48px;
  height: 100%;
  resize: none;
  field-sizing: content;
}
@media (max-width: 700px) {
  .tr-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- the glass look (setting `glass`, on by default) ----------
   Frosted, see-through panels (backdrop-filter) with a bright top edge and a rim light, over a soft glow that
   drifts slowly behind them. The real blur is spent only on the big panels, bars and dialogs and a few phone
   controls; the 30 TV tiles, the buttons and the pills fake it with gradients and highlights, so the TV stays
   smooth. The glow moves with transform only (cheap for the GPU) and stops with prefers-reduced-motion. With
   the setting off, none of this applies and the plain look above is unchanged. */

body.glass {
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 32px;
}
body.glass.display {
  --lg-tint: rgb(var(--deep-1-rgb) / 0.55); /* darker on the TV: the question must read from the sofa */
}
body.glass .phone-team {
  --lg-tint: rgb(0 0 0 / 0.16); /* on a phone the glass sits on the team colour, so no violet tint */
  --lg-tint-deep: rgb(0 0 0 / 0.3);
  --lg-edge: rgb(255 255 255 / 0.35);
  --lg-shine: rgb(255 255 255 / 0.6);
}

/* The glow: two layers, each with two soft colour spots, drifting for about a minute. They are drawn at 70% of
   the screen and scaled up, so the GPU keeps two small pictures, not two huge ones. */
body.glass .host,
body.glass.display,
body.glass .phone-team {
  position: relative;
  isolation: isolate; /* the glow (z-index -1) stays above this element's background and below its content */
}
body.glass .host::before,
body.glass .host::after,
body.glass.display::before,
body.glass.display::after,
body.glass .phone-team::before,
body.glass .phone-team::after {
  content: '';
  position: fixed;
  left: 15%;
  top: 15%;
  width: 70%;
  height: 70%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
body.glass .host::before,
body.glass.display::before {
  background:
    radial-gradient(28% 32% at 30% 35%, color-mix(in srgb, var(--glow-a) 55%, transparent), transparent 72%),
    radial-gradient(22% 26% at 76% 72%, color-mix(in srgb, var(--glow-c) 42%, transparent), transparent 72%);
  animation: glow-a 52s ease-in-out infinite alternate;
}
body.glass .host::after,
body.glass.display::after {
  background:
    radial-gradient(26% 30% at 70% 24%, color-mix(in srgb, var(--glow-b) 46%, transparent), transparent 72%),
    radial-gradient(20% 24% at 24% 80%, color-mix(in srgb, var(--glow-a) 30%, transparent), transparent 72%);
  animation: glow-b 67s ease-in-out infinite alternate;
}
/* On the phone the glow is light and shade on the team colour. */
body.glass .phone-team::before {
  background: radial-gradient(30% 34% at 30% 30%, rgb(255 255 255 / 0.3), transparent 72%);
  animation: glow-a 44s ease-in-out infinite alternate;
}
body.glass .phone-team::after {
  background: radial-gradient(28% 32% at 72% 70%, rgb(0 0 0 / 0.22), transparent 72%);
  animation: glow-b 58s ease-in-out infinite alternate;
}
@keyframes glow-a {
  from {
    transform: translate3d(-6%, -4%, 0) scale(2.2);
  }
  50% {
    transform: translate3d(4%, 5%, 0) scale(2.45);
  }
  to {
    transform: translate3d(7%, -5%, 0) scale(2.25);
  }
}
@keyframes glow-b {
  from {
    transform: translate3d(5%, 4%, 0) scale(2.3);
  }
  50% {
    transform: translate3d(-5%, -3%, 0) scale(2.2);
  }
  to {
    transform: translate3d(-3%, 6%, 0) scale(2.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.glass .host::before,
  body.glass .host::after,
  body.glass.display::before,
  body.glass.display::after,
  body.glass .phone-team::before,
  body.glass .phone-team::after {
    animation: none; /* the glow stays, but still */
  }
}

/* Real glass: big panels, bars, dialogs, and the few phone controls that sit on the team colour. */
body.glass .host-bar,
body.glass .settings,
body.glass .host-side,
body.glass .controls,
body.glass .help-card,
body.glass .resume,
body.glass .special-card,
body.glass .ed-side,
body.glass .ed-dialog,
body.glass .pq-modal,
body.glass .sound-unlock,
body.glass .offline-banner,
body.glass .tv-q,
body.glass .quick-head,
body.glass .tv-special,
body.glass .tv-boom,
body.glass .reel,
body.glass .buzzer:not(.live),
body.glass .pick-cat,
body.glass .pick-tile:not(.used),
body.glass .phone-team .score,
body.glass .phone-team .kicker {
  background-color: var(--lg-tint);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.13), rgb(255 255 255 / 0.03) 38%, transparent 75%);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border-color: var(--lg-edge);
  box-shadow:
    inset 0 1px 0 var(--lg-shine),
    inset 0 -1px 0 rgb(255 255 255 / 0.06),
    inset 0 0 0 1px rgb(255 255 255 / 0.07),
    0 14px 44px rgb(0 0 0 / 0.28);
}
body.glass .host-bar,
body.glass .host-side,
body.glass .controls,
body.glass .ed-side,
body.glass .help-card,
body.glass .ed-dialog,
body.glass .pq-modal,
body.glass .sound-unlock,
body.glass .offline-banner {
  background-color: var(--lg-tint-deep);
}
body.glass .host-bar,
body.glass .host-side,
body.glass .controls,
body.glass .ed-side {
  box-shadow: none; /* edge-to-edge bars: no drop shadow, no top line */
}
body.glass .host-bar {
  border-bottom-color: var(--lg-edge);
  background-color: rgb(var(--deep-2-rgb) / 0.8); /* the page scrolls under it: a little more solid than other glass */
}
body.glass .tv-q,
body.glass .quick-head,
body.glass .tv-special,
body.glass .tv-boom {
  box-shadow:
    inset 0 0.2vh 0 var(--lg-shine),
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    0 2vh 8vh rgb(0 0 0 / 0.35);
}
body.glass .tv-special {
  background-image: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--k) 32%, transparent), transparent 70%);
}
body.glass .tv-boom {
  background-image: radial-gradient(55% 55% at 50% 45%, rgb(255 77 77 / 0.45), transparent 70%);
}
body.glass .reel {
  box-shadow: inset 0 0 0 0.6vh var(--k), 0 0 10vh color-mix(in srgb, var(--k) 45%, transparent);
}
body.glass .buzzer:not(.live) {
  box-shadow: inset 0 2px 0 var(--lg-shine), inset 0 0 0 3px rgb(255 255 255 / 0.3), 0 16px 40px rgb(0 0 0 / 0.22);
}
body.glass .pick-tile:not(.used) {
  box-shadow: inset 0 1px 0 var(--lg-shine), inset 0 0 0 1px rgb(255 255 255 / 0.2), 0 8px 24px rgb(0 0 0 / 0.18);
}
body.glass .ed-dialog-actions {
  background: linear-gradient(180deg, transparent, rgb(var(--deep-1-rgb) / 0.88) 30%);
}
body.glass .ed-dialog-head {
  background: rgb(var(--deep-2-rgb)); /* opaque on purpose: scrolled text must not show through the title */
}
body.glass .ed-fold {
  background-color: var(--lg-tint);
  border-color: var(--lg-edge);
}
body.glass .ed-dialog::backdrop,
body.glass .pq-modal::backdrop,
body.glass .help {
  background: rgb(var(--deep-0-rgb) / 0.55);
  backdrop-filter: blur(8px);
}

/* Fake glass (no blur): the TV board's tiles, the host's tiles, buttons, pills, chips and inputs. */
body.glass .tv-board .tile:not(.used) {
  background:
    radial-gradient(120% 70% at 20% 0%, rgb(255 255 255 / 0.14), transparent 60%),
    linear-gradient(180deg, rgb(255 255 255 / 0.17), rgb(255 255 255 / 0.05) 55%, rgb(255 255 255 / 0.09));
  box-shadow:
    inset 0 0.15vh 0 var(--lg-shine),
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    inset 0 -1.2vh 2vh rgb(255 255 255 / 0.04),
    0 1vh 3vh rgb(0 0 0 / 0.25);
  text-shadow: 0 0.2vh 0.8vh rgb(0 0 0 / 0.3);
}
body.glass.embedded .tv-board button.tile:hover,
body.glass.embedded .tv-board button.tile:focus-visible {
  box-shadow: inset 0 0 0 0.5vh var(--light), 0 0 4vh rgb(var(--light-rgb) / 0.5);
}
body.glass .host-board .tile:not(:disabled),
body.glass .btn:not(.btn-primary):not(.btn-good):not(.btn-bad):not(.btn-quiet):not(.plate):not(.team-btn),
body.glass .pills span,
body.glass .chip,
body.glass .ed-tile,
body.glass .ed-media,
body.glass .ed-trim,
body.glass .pic-tile,
body.glass .song-row,
body.glass .ed-credits,
body.glass .crazy-kinds,
body.glass .round2-cats li,
body.glass .tv-q .where b,
body.glass .tv-lobby .call-url b,
body.glass .host-q .where b,
body.glass .judge-card:not(.shown) {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.06) 45%, rgb(255 255 255 / 0.03));
  border-color: var(--lg-edge);
  box-shadow: inset 0 1px 0 var(--lg-shine), inset 0 0 0 1px rgb(255 255 255 / 0.06), 0 6px 18px rgb(0 0 0 / 0.2);
}
body.glass .pills input:checked + span,
body.glass .btn-primary {
  background-image: linear-gradient(180deg, #fff, var(--pale));
  box-shadow: inset 0 1px 0 #fff, 0 8px 28px rgb(var(--light-rgb) / 0.45);
}
body.glass .btn-good,
body.glass .btn-bad {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.04) 50%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 8px 24px rgb(0 0 0 / 0.25);
}
body.glass input[type='text'],
body.glass input[type='search'],
body.glass input[type='number'],
body.glass select,
body.glass .ed-dialog textarea,
body.glass .ed-about textarea {
  background-color: rgb(0 0 0 / 0.22);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 2px 6px rgb(0 0 0 / 0.25);
}
/* The phone's bet and answer fields stay white (dark text on them). */
body.glass .final-form input {
  background-color: rgb(255 255 255 / 0.92);
  box-shadow: inset 0 1px 0 #fff, 0 8px 24px rgb(0 0 0 / 0.18);
}

/* Team plates get a shine along the top, so the loud colours look like coloured glass. */
body.glass .plate,
body.glass .tv-teams li,
body.glass .tv-scores li,
body.glass .tv-over li,
body.glass .buzzed-name,
body.glass .final-teams li,
body.glass .judge-card.shown,
body.glass .round2-picker,
body.glass .special-team,
body.glass .team-list li,
body.glass .resume-teams li,
body.glass .rank-list li,
body.glass .freeze-team,
body.glass .swatch {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.05) 50%, rgb(0 0 0 / 0.07));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 8px 24px rgb(0 0 0 / 0.22);
}
body.glass .tv-scores li.picker {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 0 0 0.5vh var(--bg), 0 0 0 1vh #fff;
}
body.glass .tv-over li:first-child {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 3vh 8vh color-mix(in srgb, var(--team) 50%, transparent);
}
body.glass .swatch:has(input:checked) {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 0 0 4px var(--bg), 0 0 0 7px #fff, 0 8px 24px color-mix(in srgb, var(--team) 60%, transparent);
}
body.glass .freeze-team.on {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 0 0 4px rgb(185 232 255 / 0.5);
}

/* Quick quiz: the answer tiles and buttons look like coloured glass, the podium like frosted steps. */
body.glass .quick-opt,
body.glass .quick-order-result li,
body.glass .choice,
body.glass .locked-shape,
body.glass .shape-row span,
body.glass .opt-chip {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.06) 48%, rgb(0 0 0 / 0.08));
}
body.glass .quick-opt {
  box-shadow: inset 0 0.2vh 0 rgb(255 255 255 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.14), inset 0 -0.9vh 0 rgb(0 0 0 / 0.16), 0 1.4vh 4vh rgb(0 0 0 / 0.32);
}
body.glass .quick-opt.right {
  box-shadow: inset 0 0.2vh 0 rgb(255 255 255 / 0.6), 0 0 0 0.6vh #fff, 0 0 8vh var(--opt);
}
body.glass .quick-opt.wrong {
  background-color: var(--lg-tint);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.03) 48%, transparent);
  box-shadow: inset 0 0.2vh 0 rgb(255 255 255 / 0.25), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 1.4vh 4vh rgb(0 0 0 / 0.25);
}
body.glass .quick-opt.wrong .opt-shape {
  background: rgb(0 0 0 / 0.22);
  box-shadow: none;
}
body.glass .choice {
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.15), inset 0 -7px 0 rgb(0 0 0 / 0.16), 0 6px 16px rgb(0 0 0 / 0.22);
}
body.glass .choice.chosen,
body.glass .choice.ticked {
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.6), 0 0 0 4px #fff, 0 10px 30px rgb(0 0 0 / 0.3);
}
body.glass .choices,
body.glass .phone-question {
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: inset 0 1px 0 var(--lg-shine), inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
body.glass .opt-shape {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(0 0 0 / 0.1));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45);
}
body.glass .qbar-fill {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.08) 35%, transparent);
  background-color: var(--opt);
}
body.glass .qbar:not(.right) .qbar-fill {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.08));
  background-color: rgb(255 255 255 / 0.04);
}
body.glass .q-timer {
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  background-color: var(--lg-tint);
}
body.glass .step-block {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0.06) 40%, rgb(255 255 255 / 0.02));
  box-shadow: inset 0 0.9vh 0 var(--medal), inset 0 1.1vh 0 rgb(255 255 255 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 -2vh 8vh color-mix(in srgb, var(--medal) 18%, transparent);
}
body.glass .rank-plate,
body.glass .step-name,
body.glass .standings-list li,
body.glass .quick-verdict .fastest .plate {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.05) 50%, rgb(0 0 0 / 0.07));
}
body.glass .podium-rest li,
body.glass .pts-badge:not(.double) {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.06) 45%, rgb(255 255 255 / 0.03));
  box-shadow: inset 0 1px 0 var(--lg-shine), 0 6px 18px rgb(0 0 0 / 0.2);
}

/* A browser without backdrop-filter: the panels turn nearly solid so the text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.glass {
    --lg-tint: rgb(var(--deep-3-rgb) / 0.92);
    --lg-tint-deep: rgb(var(--deep-2-rgb) / 0.94);
  }
  body.glass.display {
    --lg-tint: rgb(var(--deep-1-rgb) / 0.92);
  }
  body.glass .phone-team {
    --lg-tint: rgb(0 0 0 / 0.26);
    --lg-tint-deep: rgb(0 0 0 / 0.4);
  }
}

/* The editor's Quick quiz parts. */
body.glass .ed-qrow {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.05) 45%, rgb(255 255 255 / 0.02));
  border-color: var(--lg-edge);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 4px 14px rgb(0 0 0 / 0.18);
}
body.glass .ed-sec {
  background: var(--lg-tint);
  border-color: var(--lg-edge);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 12px 40px rgb(0 0 0 / 0.25);
}
body.glass .ed-qrow.ai-filled {
  border: 1px dashed #7fe1ff;
}
/* Problems stay red on glass too. */
body.glass .ed-tile.bad,
body.glass .ed-qrow.bad {
  border-color: var(--bad);
  box-shadow: inset 0 0 0 1px var(--bad), 0 4px 14px rgb(0 0 0 / 0.18);
}

/* Avatars look like coloured glass coins: a shine across the top, behind the face. */
body.glass .avatar {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.34), rgb(255 255 255 / 0.07) 46%, transparent 58%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.14);
}
body.glass .avatar-big.avatar {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 0 0 4px var(--bg), 0 0 0 6px rgb(255 255 255 / 0.85), 0 10px 30px color-mix(in srgb, var(--team) 45%, transparent);
}
body.glass .step-face.avatar {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 0 0 0.45vh var(--medal), 0 1.5vh 5vh rgb(0 0 0 / 0.35);
}
body.glass .avatar-tab:not(.on) {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.06) 45%, rgb(255 255 255 / 0.03));
  border-color: var(--lg-edge);
  box-shadow: inset 0 1px 0 var(--lg-shine);
}
body.glass .avatar-tab.on {
  background-image: linear-gradient(180deg, #fff, var(--pale));
}

/* The colour box (askColor() in ui.js): a big sample, the colour code and three sliders whose tracks show the colours. */
.pq-color {
  --h: 250;
  --s: 70%;
  --l: 55%;
  gap: 0.6rem;
}
.pq-color-top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.pq-color-swatch {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px rgb(255 255 255 / 0.85), 0 8px 24px rgb(0 0 0 / 0.35);
}
.pq-color-hex {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
}
.pq-color-row {
  gap: 0.2rem;
}
.pq-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 48px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.pq-range.hue {
  --track: linear-gradient(to right, hsl(0 var(--s) var(--l)), hsl(60 var(--s) var(--l)), hsl(120 var(--s) var(--l)), hsl(180 var(--s) var(--l)), hsl(240 var(--s) var(--l)), hsl(300 var(--s) var(--l)), hsl(360 var(--s) var(--l)));
}
.pq-range.sat {
  --track: linear-gradient(to right, hsl(var(--h) 0% var(--l)), hsl(var(--h) 100% var(--l)));
}
.pq-range.light {
  --track: linear-gradient(to right, hsl(var(--h) var(--s) 10%), hsl(var(--h) var(--s) 50%), hsl(var(--h) var(--s) 90%));
}
.pq-range::-webkit-slider-runnable-track {
  height: 22px;
  border-radius: var(--pill);
  background: var(--track);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
}
.pq-range::-moz-range-track {
  height: 22px;
  border-radius: var(--pill);
  background: var(--track);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
}
.pq-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.45), inset 0 0 0 2px rgb(0 0 0 / 0.08);
}
.pq-range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.45);
}
.pq-range:focus-visible {
  outline: none;
}
.pq-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--focus), 0 2px 8px rgb(0 0 0 / 0.45);
}
.pq-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--focus), 0 2px 8px rgb(0 0 0 / 0.45);
}
/* The custom accent swatch is a button now (it opens the colour box). */
button.accent {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}
button.accent:focus-visible span {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

/* ---------- the website version (docs/dev/web-plan.md) ---------- */

/* The front page: the same stage as the host and TV screens, one card to type the room code, one to host. */
.home {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(60% 55% at 50% -12%, rgb(var(--light-rgb) / 0.42), transparent 70%),
    radial-gradient(35% 30% at 88% 108%, rgb(var(--flare-rgb) / 0.14), transparent 70%),
    var(--bg);
}
.home-main {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-sizing: border-box;
}
.home-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.home-langs {
  display: flex;
  gap: 0.25rem;
}
.home-langs .btn.on {
  color: var(--ink);
  text-decoration: none;
  background: var(--glass);
  border-color: var(--edge);
}
.home-hero {
  margin-top: 1.5rem;
}
.home-hero h1 {
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.home-tagline {
  color: var(--muted);
  font-size: 1.1rem;
  margin: 0.8rem 0 0;
  max-width: 34ch;
}
.home-card {
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--r-l);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 30px 80px rgb(var(--deep-0-rgb) / 0.5);
}
.home-card h2 {
  font-size: 1.4rem;
}
.home-card p {
  margin: 0;
  color: var(--muted);
}
.home-code-field input {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  min-height: 64px;
}
.home-code-field input::placeholder {
  letter-spacing: 0.22em;
  color: rgb(255 255 255 / 0.25);
}
.home-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.home-actions .btn {
  min-height: 56px;
}
.home-host .btn {
  align-self: flex-start;
  min-height: 56px;
}
.home-foot {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.home-foot a {
  color: inherit;
  display: inline-block;
  min-height: 48px;
  line-height: 48px;
}
@media (max-width: 420px) {
  .home-actions {
    grid-template-columns: 1fr;
  }
}

/* The host lobby on the website: the room code big over the QR code */
.join-card .room-code {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: 0.18em;
  line-height: 1.1;
  margin: 0 0 0.8rem;
  padding: 0.4rem 0 0.4rem 0.18em;
  border-radius: var(--r-m);
  background: var(--glass-hi);
  border: 1px solid var(--edge);
  text-align: center;
}

/* The TV lobby on the website: the code where the address was, big enough to read from the sofa */
.tv-lobby .tv-code {
  display: inline-block;
  margin-top: 1vh;
  font-family: var(--display);
  font-weight: 800;
  font-size: 9vh;
  letter-spacing: 0.16em;
  line-height: 1.05;
  color: var(--ink);
  padding: 0.5vh 2.2vh 0.5vh 3vh;
  border-radius: var(--r-l);
  background: var(--glass-hi);
  border: 1px solid var(--edge);
}

/* The website's backup reminder (backup.js): the update banner's look, in the editor under the bar and in the lobby */
.editor .backup-banner {
  margin: 0.75rem 1.25rem 0;
}
.backup-banner .backup-icon {
  color: var(--light);
}
/* The website: how big a quiz's pictures and clips are, in "About the quiz" (editor.js) */
.ed-media-size {
  margin: 0;
  color: var(--muted);
}
.ed-media-size.bad {
  color: var(--bad);
}