/* quizr — cloth-paper ground, burnt umber tiles, a blue face on the flip.
   One committed look: this runs on a telly or a laptop in a living room, so
   there is no dark mode to chase. */

:root {
  --paper:       #e3d8bd;
  --paper-deep:  #d2c3a0;
  --paper-edge:  #b8a67f;
  --chalk:       #f8f2e2;
  --ink:         #2a2018;
  --ink-soft:    #5c4c3a;

  --umber:       #8d4a24;
  --umber-deep:  #6b3416;
  --umber-lift:  #a55b30;

  --reveal:      #1d4e89;
  --reveal-deep: #123457;

  --brass:       #c08a2e;
  --right:       #3f6b3a;
  --wrong:       #8f2f28;

  --tile-radius: 4px;
  --card-radius: 10px;

  --shadow-tile: 0 2px 0 rgba(0, 0, 0, 0.28), 0 6px 14px rgba(42, 32, 24, 0.22);
  --shadow-card: 0 18px 50px rgba(42, 32, 24, 0.42);

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* Every layout rule below sets `display`, which would otherwise beat the
   browser's own [hidden] rule and leave hidden views on screen. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background-color: var(--paper);
  /* Cloth weave: two hairline gratings crossed, over a paper grain. */
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 96, 62, 0.055) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 96, 62, 0.055) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 22% 18%, rgba(255, 250, 235, 0.55), transparent 55%),
    radial-gradient(circle at 78% 82%, rgba(150, 122, 80, 0.28), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

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

/* ---- shared bits ------------------------------------------------------ */

.eyebrow {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.button {
  border: 1px solid var(--paper-edge);
  background: linear-gradient(180deg, var(--chalk), var(--paper-deep));
  color: var(--ink);
  padding: 0.7rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 620;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 5px rgba(42, 32, 24, 0.18);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.button:hover { filter: brightness(1.04); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.button--primary {
  background: linear-gradient(180deg, var(--umber-lift), var(--umber-deep));
  border-color: var(--umber-deep);
  color: var(--chalk);
}
.button--right { background: linear-gradient(180deg, #58884f, var(--right)); border-color: #2f5330; color: var(--chalk); }
.button--wrong { background: linear-gradient(180deg, #a8443c, var(--wrong)); border-color: #6b201b; color: var(--chalk); }
.button--ghost { background: transparent; box-shadow: none; }
.button--quiet { font-weight: 500; font-size: 0.85rem; color: var(--ink-soft); }
.button--danger { color: var(--wrong); border-color: var(--wrong); }

:where(button, input, select, a):focus-visible {
  outline: 3px solid var(--reveal);
  outline-offset: 2px;
}

.pill {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(42, 32, 24, 0.08);
  color: var(--ink-soft);
}

/* ---- gate ------------------------------------------------------------- */

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.gate__card {
  width: min(26rem, 100%);
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.92), rgba(238, 229, 208, 0.92));
  border: 1px solid var(--paper-edge);
  border-radius: var(--card-radius);
  padding: 2.2rem;
  box-shadow: var(--shadow-card);
}

.wordmark {
  font-family: var(--display);
  font-size: clamp(3rem, 12vw, 4.4rem);
  line-height: 0.9;
  margin: 0.4rem 0 0.8rem;
  letter-spacing: -0.03em;
}
/* The dot on the i is the buzzer. */
.wordmark::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.12em;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--umber-lift), var(--umber-deep));
  box-shadow: 0 0 0 3px var(--brass);
  vertical-align: 0.06em;
}

.gate__blurb { margin: 0 0 1.6rem; color: var(--ink-soft); line-height: 1.55; }

.form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.35rem; }
.field__label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field__input {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--paper-edge);
  border-radius: 6px;
  background: rgba(255, 253, 246, 0.85);
}
.field__input::placeholder { color: rgba(92, 76, 58, 0.55); }

.toggle { display: flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; color: var(--ink-soft); }
.toggle input { width: 1.05rem; height: 1.05rem; accent-color: var(--umber); }

.form__error {
  margin: 0;
  color: var(--wrong);
  font-size: 0.9rem;
}

/* ---- the QR code ------------------------------------------------------- */

.gate__card--wide { width: min(32rem, 100%); text-align: center; }

.qr {
  background: var(--chalk);
  border: 1px solid var(--paper-edge);
  border-radius: 8px;
  padding: 0.9rem;
  margin: 0 auto 1.2rem;
  width: min(18rem, 100%);
  box-shadow: 0 2px 8px rgba(42, 32, 24, 0.18);
}
.qr svg, .qr img { display: block; width: 100%; height: auto; }

.ready__url { margin: 0 0 0.4rem; font-family: var(--mono); font-size: 0.9rem; word-break: break-all; }
.ready__url a { color: var(--umber-deep); }
.ready__note { margin: 0 0 1.4rem; color: var(--ink-soft); font-size: 0.85rem; }
.ready__actions { display: grid; gap: 0.6rem; }

/* The TV in the lobby: the screen becomes the joining instructions. */
.tvjoin {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  flex-wrap: wrap;
}
.tvjoin .eyebrow { font-size: clamp(0.8rem, 1.6vw, 1.2rem); }
.tvjoin__url {
  margin: 0.6rem 0 0;
  font-family: var(--mono);
  font-size: clamp(1rem, 2.2vw, 1.9rem);
  word-break: break-all;
  max-width: 18ch;
}
.qr--tv { width: min(34vh, 22rem); margin: 0; }

/* ---- stage and topbar -------------------------------------------------- */

.stage { min-height: 100dvh; padding: 1.1rem clamp(0.8rem, 3vw, 2rem) 2rem; }

/* The contestant board must fit the window. Nobody scrolls a quiz board. */
.stage--play {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding-bottom: 1.1rem;
}
.stage--play .board { flex: 1; min-height: 0; }
.stage--play .scores { flex: 0 0 auto; }

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  border-bottom: 1px solid rgba(120, 96, 62, 0.3);
  padding-bottom: 0.7rem;
  margin-bottom: 1.1rem;
}
.topbar__title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
}
.topbar__status { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }

/* ---- board ------------------------------------------------------------- */

.board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
  /* One header row, then one equal row per value. */
  grid-template-rows: auto repeat(var(--rows, 5), minmax(0, 1fr));
  gap: clamp(0.3rem, 0.8vw, 0.6rem);
  align-content: start;
}

/* On the contestant board the rows share the leftover height, so tiles stretch
   instead of forcing the page to scroll. The QM board keeps a fixed shape
   because it lives inside a panel. */
.stage--play .tile { aspect-ratio: auto; height: 100%; }
.stage--play .board { align-content: stretch; }

.cat {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(0.6rem, 1.05vw, 0.82rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  padding: 0.75rem 0.4rem;
  border-radius: var(--tile-radius);
  color: var(--chalk);
  background: linear-gradient(180deg, #4a3324, #33221a);
  box-shadow: var(--shadow-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
}

.tile {
  appearance: none;
  border: none;
  cursor: pointer;
  border-radius: var(--tile-radius);
  aspect-ratio: 16 / 10;
  font-family: var(--display);
  font-size: clamp(1rem, 2.4vw, 1.9rem);
  font-weight: 700;
  color: var(--brass);
  background: linear-gradient(180deg, var(--umber-lift), var(--umber-deep));
  box-shadow: var(--shadow-tile);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  transition: transform 0.14s ease, filter 0.14s ease;
}
.tile:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07); }
.tile:disabled { cursor: default; }

.tile--used {
  color: transparent;
  background: linear-gradient(180deg, rgba(120, 96, 62, 0.16), rgba(94, 74, 48, 0.2));
  box-shadow: inset 0 1px 3px rgba(42, 32, 24, 0.3);
}
.tile--live {
  background: linear-gradient(180deg, #2a67ad, var(--reveal-deep));
  color: var(--chalk);
}
.board--qm .tile { aspect-ratio: 16 / 7; font-size: clamp(0.8rem, 1.4vw, 1.1rem); }

/* ---- scores strip ------------------------------------------------------ */

.scores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
}

.score {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--paper-edge);
  background: rgba(255, 253, 246, 0.7);
}
.score--control { border-color: var(--umber); box-shadow: 0 0 0 2px rgba(141, 74, 36, 0.22); }
.score--gone { opacity: 0.45; }
.score__name { font-weight: 640; }
.score__value { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.score__value--minus { color: var(--wrong); }
.score__crown { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--umber); }

/* ---- the clue card ----------------------------------------------------- */

.cardstage {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  padding: clamp(0.8rem, 3vw, 2.2rem);
  background: rgba(30, 22, 16, 0.55);
  backdrop-filter: blur(3px);
  perspective: 1400px;
}

.card {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(72rem, 100%);
  max-height: 100%;
  overflow: auto;
  padding: clamp(1.4rem, 4vw, 3rem);
  border-radius: var(--card-radius);
  color: var(--chalk);
  background: linear-gradient(180deg, #24619f, var(--reveal-deep));
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transform-origin: center;
  animation: flip-in 620ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

@keyframes flip-in {
  0%   { transform: rotateY(-92deg) scale(0.86); background: linear-gradient(180deg, var(--umber-lift), var(--umber-deep)); }
  55%  { background: linear-gradient(180deg, var(--umber-lift), var(--umber-deep)); }
  100% { transform: rotateY(0) scale(1); }
}

/* The clock is a draining band across the top edge of the card, not a number
   you have to read. The number is there for anyone who wants it. */
.card__clock {
  position: absolute;
  inset: 0 0 auto 0;
  height: 7px;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.card__clock-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--brass), #e6b455);
}
.card__clock--out .card__clock-fill { background: var(--wrong); }

.card__category {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(248, 242, 226, 0.72);
}
.card__value {
  margin: 0 0 1.2rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--brass);
}
.card__prompt {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.4vw, 2.6rem);
  line-height: 1.28;
  text-wrap: balance;
}
.card__image {
  display: block;
  max-width: 100%;
  max-height: 42vh;
  margin: 1.4rem auto 0;
  border-radius: 6px;
  border: 3px solid rgba(248, 242, 226, 0.8);
}
.card__answer {
  margin: 1.6rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(248, 242, 226, 0.25);
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  color: var(--brass);
}

/* ---- buzz list --------------------------------------------------------- */

.buzzlist { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.buzzlist li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.16);
}
.buzzlist li:first-child { background: rgba(192, 138, 46, 0.28); font-weight: 640; }
.buzzlist time { font-family: var(--mono); font-variant-numeric: tabular-nums; opacity: 0.85; }

.buzzlist--qm li { background: rgba(42, 32, 24, 0.07); color: var(--ink); }
.buzzlist--qm li:first-child { background: rgba(192, 138, 46, 0.3); }

/* ---- the TV ------------------------------------------------------------ */

/* Read across a room, so everything grows. */
.stage--tv .cat { font-size: clamp(0.8rem, 1.3vw, 1.15rem); letter-spacing: 0.12em; }
.stage--tv .tile { font-size: clamp(1.6rem, 3.4vw, 3.2rem); }
.stage--tv .topbar__title { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.stage--tv .topbar__status { font-size: clamp(0.95rem, 1.4vw, 1.25rem); }
.stage--tv .score { font-size: clamp(1rem, 1.6vw, 1.4rem); padding: 0.6rem 1.2rem; }
.stage--tv .card__prompt { font-size: clamp(1.8rem, 4vw, 3.4rem); }
.stage--tv .card__image { max-height: 52vh; }
.stage--tv .cardstage { grid-template-rows: 1fr; }

/* ---- buzzer-only phone (a TV has the board) ---------------------------- */

.buzzonly {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  text-align: center;
}
.buzzonly__clue {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.buzzonly .buzzer { width: min(58vw, 15rem); }
.buzzer__caption--dark { color: var(--ink-soft); max-width: 22rem; }

/* ---- the buzzer -------------------------------------------------------- */

.buzzer-well { justify-self: center; text-align: center; }

.buzzer {
  position: relative;
  width: clamp(7rem, 22vw, 9.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  padding: 0;
  color: var(--chalk);
  background: radial-gradient(circle at 36% 30%, #c2622f, #8d2f16 62%, #5d1d0d);
  box-shadow:
    0 0 0 8px var(--brass),
    0 0 0 10px rgba(90, 60, 20, 0.75),
    0 14px 0 -2px rgba(60, 34, 16, 0.9),
    0 22px 34px rgba(0, 0, 0, 0.45);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.buzzer__face {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.buzzer:hover:not(:disabled) { transform: translateY(-2px); }
.buzzer:active:not(:disabled),
.buzzer--in {
  transform: translateY(10px);
  box-shadow:
    0 0 0 8px var(--brass),
    0 0 0 10px rgba(90, 60, 20, 0.75),
    0 4px 0 -2px rgba(60, 34, 16, 0.9),
    0 8px 16px rgba(0, 0, 0, 0.4);
}
.buzzer:disabled { cursor: not-allowed; filter: grayscale(0.55) brightness(0.8); }
.buzzer--in { background: radial-gradient(circle at 36% 30%, #4d8f45, #2f5f2c 62%, #1e3f1d); }

.buzzer__caption {
  margin: 1rem 0 0;
  color: rgba(248, 242, 226, 0.82);
  font-size: 0.88rem;
}

/* ---- quiz-master ------------------------------------------------------- */

/* The QM screen fills the window and never scrolls as a page. Rulings and
   scores must both stay reachable however tall the live clue grows — an open
   answer panel used to push the scores off the bottom. */
.stage--qm {
  max-width: 100rem;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.qm-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.9fr) minmax(21rem, 1fr);
  align-items: stretch;
}

/* Live clue takes the slack and scrolls inside itself; scores keep their own
   space at the bottom of the rail. */
.qm-rail {
  display: grid;
  gap: 1rem;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}
.qm-rail > .panel { min-height: 0; overflow-y: auto; }
.qm-grid > .panel { min-height: 0; overflow-y: auto; }

@media (max-width: 60rem) {
  /* Too narrow to hold two columns open at once, so let the page scroll. */
  .stage--qm { height: auto; }
  .qm-grid { grid-template-columns: minmax(0, 1fr); }
  .qm-rail { grid-template-rows: auto auto; }
  .qm-rail > .panel, .qm-grid > .panel { overflow: visible; }
}

.panel {
  background: rgba(255, 253, 246, 0.66);
  border: 1px solid var(--paper-edge);
  border-radius: 8px;
  padding: 1rem 1.1rem 1.2rem;
}
.panel--rail { display: grid; gap: 1rem; align-content: start; }
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.panel__title { margin: 0; font-family: var(--display); font-size: 1.15rem; }
.panel__subtitle {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.panel__hint { margin: 0 0 0.8rem; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.5; }
.panel__tools { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--paper-edge);
  border-radius: 6px;
  background: rgba(255, 253, 246, 0.9);
  max-width: 14rem;
}

.qm-clue__prompt {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.4;
  margin: 0 0 0.5rem;
}
.qm-clue__meta { margin: 0; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.qm-clue__image { max-width: 100%; border-radius: 6px; margin-top: 0.6rem; }

.qm-answer__body {
  margin-top: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  background: rgba(29, 78, 137, 0.1);
  border: 1px solid rgba(29, 78, 137, 0.28);
  font-size: 0.92rem;
  line-height: 1.5;
}
.qm-answer__answer { font-family: var(--display); font-size: 1.15rem; margin: 0 0 0.35rem; }
.qm-answer__aside { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.85rem; }

.qm-rule { display: grid; gap: 0.6rem; padding-top: 0.6rem; border-top: 1px solid rgba(120, 96, 62, 0.3); }
.qm-rule__who { margin: 0; font-size: 0.95rem; }
.qm-rule__who strong { font-family: var(--display); font-size: 1.2rem; }
.qm-rule__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.qm-players { display: grid; gap: 0.5rem; }
.qm-player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--paper-edge);
  background: rgba(255, 253, 246, 0.75);
}
.qm-player--control { border-color: var(--umber); box-shadow: inset 3px 0 0 var(--umber); }
.qm-player__name { font-weight: 640; min-width: 5rem; }
.qm-player__score { font-family: var(--mono); font-variant-numeric: tabular-nums; min-width: 3rem; }
.qm-player__spacer { flex: 1; }
.qm-player__nudge {
  border: 1px solid var(--paper-edge);
  background: rgba(255, 253, 246, 0.9);
  border-radius: 5px;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.qm-player__state { font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---- toast and connection ---------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 60;
  margin: 0;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  background: rgba(42, 32, 24, 0.92);
  color: var(--chalk);
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.dropped {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  margin: 0;
  padding: 0.5rem;
  text-align: center;
  background: var(--wrong);
  color: var(--chalk);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- the quiz builder --------------------------------------------------- */

.build {
  display: block;
  width: min(52rem, 100%);
  margin: 0 auto;
  padding: 1.4rem 1rem 4rem;
}

.build__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}
.build__tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* The wordmark is a hero on the gate; in the builder it is a label. */
.wordmark--small { font-size: clamp(1.8rem, 6vw, 2.4rem); margin: 0.1rem 0 0; }

.cat-list { display: grid; gap: 0.7rem; }

.cat-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 253, 246, 0.66);
  border: 1px solid var(--paper-edge);
  border-radius: 8px;
}
/* A draft is unfinished, not broken — a dashed edge, not a red one. */
.cat-card--draft { border-style: dashed; background: rgba(255, 253, 246, 0.4); }

.cat-card__body { min-width: 12rem; flex: 1 1 12rem; }
.cat-card__name { margin: 0 0 0.2rem; font-family: var(--display); font-size: 1.1rem; }
.cat-card__meta { margin: 0; font-size: 0.84rem; color: var(--ink-soft); }
.cat-card__tools { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.cat-meta { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .cat-meta { grid-template-columns: 2fr 1fr; }
}

#clue-list { display: grid; gap: 0.9rem; }
#clue-list .panel { display: grid; gap: 0.85rem; }
#clue-list .field__input { font-size: 0.95rem; }

.field__hint { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.45; }

.clue-image__preview {
  display: block;
  max-width: min(18rem, 100%);
  max-height: 11rem;
  width: auto;
  border: 1px solid var(--paper-edge);
  border-radius: 6px;
  background: var(--chalk);
}
.clue-image__tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.clue-image__file { font-size: 0.82rem; max-width: 100%; }
.field__aside { text-transform: none; letter-spacing: 0; opacity: 0.7; }

textarea.field__input { resize: vertical; min-height: 4.5rem; font: inherit; }

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