/* Kahuut — app layer on top of the Modernist system.
   The "rounded remix" from the design doc: radius vars overridden to
   10/16/22px, chips go pill, motion dialed up. One red, ink on paper. */

:root {
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --c-gold: #e39d0e;
  --c-gold-100: #fdf3dc;
  --c-violet: #9a4fe0;
  --c-violet-100: #f3eafd;
  --c-blue: #2f7de0;
}

html, body { height: 100%; }
/* Kahuut is a light design. Declaring it stops dark-mode TVs and phones from
   auto-inverting the page (which turned the join QR into an invisible smudge). */
:root { color-scheme: light; }
body { background: var(--color-bg); color: var(--color-text); font-size: 16px; }

/* the QR must survive every forced-color / auto-dark mode a TV can throw */
.qr-card { background: #fff !important; forced-color-adjust: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.qr-card svg { forced-color-adjust: none; }
.qr-card .lbl { color: #201e1d !important; }

/* inputs must be ≥16px or iOS Safari zooms the page on focus */
.input { font-size: 16px; }

.tag { border-radius: 999px; padding: 4px 12px; }
.seg { border-radius: 999px; }

/* native selects drop the OS chrome and dress like every other .input:
   same rounded corners, same surface, plus an ink chevron */
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201e1d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px;
}

.btn { transition: transform .15s cubic-bezier(.2,1.4,.4,1), background .15s, box-shadow .2s; }
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: scale(.96); }
.btn-primary:hover { box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 35%, transparent); }
.input { transition: border-color .15s, box-shadow .15s; }
.input:focus-visible { box-shadow: 0 0 0 3px var(--color-accent-200); }

/* ── keyframes (from the prototype) ─────────────────────────────── */
@keyframes blink { 0%,88%,100% { transform: scaleY(1); } 93% { transform: scaleY(.08); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes fall { 0% { transform: translateY(-40px) rotate(0); } 100% { transform: translateY(105vh) rotate(260deg); } }
@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes popin { 0% { transform: scale(0) rotate(-6deg); } 62% { transform: scale(1.25) rotate(2deg); } 82% { transform: scale(.94); } 100% { transform: scale(1) rotate(0); } }
@keyframes jelly { 0% { transform: scale(1); } 25% { transform: scale(1.14,.86); } 45% { transform: scale(.9,1.1); } 65% { transform: scale(1.06,.95); } 85% { transform: scale(.98,1.02); } 100% { transform: scale(1); } }
@keyframes boing { 0%,100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-16px) scale(1.06); } 50% { transform: translateY(0) scale(.94,1.03); } 66% { transform: translateY(-7px); } 82% { transform: translateY(0); } }
@keyframes slidein { from { transform: translateX(-16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes tickpop { 0% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1); } }
@keyframes sweep { 0% { transform: translateX(-120%) skewX(-18deg); } 60%,100% { transform: translateX(240%) skewX(-18deg); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
@keyframes floatup { 0% { transform: translateY(0) scale(.5) rotate(-8deg); opacity: 0; } 10% { opacity: 1; transform: translateY(-36px) scale(1.2) rotate(4deg); } 100% { transform: translateY(-70vh) scale(.95) rotate(14deg); opacity: 0; } }
@keyframes floatup2 { 0% { transform: translateY(0) scale(.5) rotate(8deg); opacity: 0; } 10% { opacity: 1; transform: translateY(-36px) scale(1.2) rotate(-4deg); } 100% { transform: translateY(-70vh) scale(.95) rotate(-14deg); opacity: 0; } }

/* ── language switcher ──────────────────────────────────────────── */
.lang-switch { display: inline-flex; border: 1px solid var(--color-divider); border-radius: 999px; overflow: hidden; }
.lang-switch a {
  font: 800 10.5px var(--font-heading); letter-spacing: .06em; padding: 5px 10px;
  text-decoration: none; color: var(--color-neutral-600);
}
.lang-switch a + a { border-left: 1px solid var(--color-divider); }
.lang-switch a:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.lang-switch a[aria-current="true"] { background: var(--color-text); color: var(--color-bg); }
/* phones get a native dropdown instead of the cramped three-pill row */
.lang-select { display: none; }
@media (max-width: 700px) {
  .lang-switch { display: none; }
  .lang-select {
    display: inline-block; width: auto; min-height: 44px; flex: none;
    font: 800 13px var(--font-heading); padding-block: 0; padding-left: 12px;
    border-radius: 999px; background-color: var(--color-bg);
  }
}

/* ── mobile: actions span the full width, thumbs can't miss ─────── */
@media (max-width: 700px) {
  .btn { min-height: 48px; }
  /* every standalone action goes full width; toolbar/segmented rows opt out */
  .page-head .btn,
  .auth-form .btn,
  .entry .btn:not(.btn-shuffle):not(.lang-switch a),
  .play-pad > .btn,
  .dialog-actions .btn { width: 100%; justify-content: center; }
  .page-head { gap: 10px; }
  .page-head .btn + .btn { margin-top: 0; }
  .dialog-actions { flex-direction: column-reverse; align-items: stretch; }
  /* keep genuinely paired controls side by side */
  .entry-join form > div[style*="display:flex"] .btn-shuffle { width: auto; }
  #tv-form .btn { width: auto; }
  .shout-compose .btn, .shout-chip { width: auto; }
  .play-pad > .btn.play-leave { width: auto; }
}

/* ── brand ──────────────────────────────────────────────────────── */
.brand { font: 800 17px var(--font-heading); letter-spacing: -.01em; text-decoration: none; color: inherit; }
.brand b { color: var(--color-accent); display: inline-block; animation: wiggle 3s ease-in-out infinite; font-weight: inherit; }

/* ── app nav (library / reports) ────────────────────────────────── */
.nav { background: var(--color-bg); border-bottom-width: 2px; position: relative; }
.nav .nav-brand, .nav a { white-space: nowrap; }
.nav .avatar-chip {
  width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--color-text);
  color: var(--color-bg); display: grid; place-items: center; font: 800 12px var(--font-heading);
  border: 0; padding: 0; cursor: default;
}
/* the account menu only exists on phones */
.nav-menu { display: none; }

@media (max-width: 700px) {
  .nav { gap: 10px; padding: 10px 14px; }
  .hide-sm { display: none; }
  /* the language picker and Sign out move into the avatar's menu, so the
     bar can never run off the edge however long the labels get */
  .nav-wide { display: none; }
  .nav .avatar-chip { cursor: pointer; }
  .nav .avatar-chip[aria-expanded="true"] { background: var(--color-accent); }
  .nav-menu:not(.hidden) {
    display: flex; flex-direction: column; gap: 12px;
    position: absolute; top: calc(100% + 6px); right: 12px; z-index: 60;
    min-width: 220px; max-width: calc(100vw - 24px);
    background: var(--color-bg); border: 2px solid var(--color-text);
    border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-lg);
    animation: popin .22s cubic-bezier(.2,1.3,.4,1) both;
  }
  .nav-menu-who { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
  .nav-menu-who strong { font: 800 15px var(--font-heading); }
  .nav-menu-who span { font-size: 12.5px; color: var(--color-neutral-600); word-break: break-all; }
  .nav-menu .lang-select { display: block; width: 100%; }
  .nav-menu .btn { margin-top: 0; }
}

/* ── entry page: join big, hosting tucked underneath ────────────── */
.entry {
  min-height: 100vh; min-height: 100dvh; width: 100%; max-width: 520px;
  margin: 0 auto; padding: 18px 20px 26px; display: flex; flex-direction: column; gap: 18px;
}
.entry-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entry-join h1 { font-size: clamp(38px, 11vw, 56px); line-height: .96; margin: 8px 0 8px; }
.entry-sub { font-size: 16px; color: var(--color-neutral-700); margin-bottom: 20px; }
.entry-join .field { margin-bottom: 14px; }
.entry-join .field > label { font-size: 14px; }
.entry-note { font-size: 13px; color: var(--color-neutral-600); margin: 12px 0 0; }
.entry-host { border-top: 2px solid var(--color-divider); padding-top: 18px; margin-top: auto; }
.entry-foot { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--color-neutral-600); }

/* the big, thumb-friendly controls the entry page is built around */
.input-xl { min-height: 60px; font-size: 20px; font-weight: 600; padding-inline: 14px; }
.code-input { font: 800 30px var(--font-heading); letter-spacing: .26em; text-align: center; }
.btn-xl { min-height: 60px; font-size: 19px; justify-content: center; }
.btn-shuffle { min-height: 60px; padding-inline: 18px; font: 800 22px var(--font-heading); }

/* ── auth pages ─────────────────────────────────────────────────── */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-rail { border-right: 2px solid var(--color-text); display: flex; flex-direction: column; }
.auth-rail-inner { padding: 40px; flex: 1; }
.auth-rail h1 { font-size: clamp(38px, 4.6vw, 58px); line-height: .98; margin: 26px 0 12px; max-width: 11ch; }
.auth-rail p { font-size: 14px; color: var(--color-neutral-700); max-width: 34ch; }
.auth-banner { background: var(--color-accent); color: var(--color-bg); padding: 18px 40px; display: flex; align-items: center; gap: 16px; }
.auth-banner .big { font: 800 15px var(--font-heading); }
.auth-banner .small { font: 400 11.5px var(--font-body); opacity: .85; }
.auth-form { padding: 40px; display: flex; flex-direction: column; justify-content: center; max-width: 460px; width: 100%; margin: 0 auto; }
.auth-rail.poster { background: var(--color-accent); color: var(--color-bg); }
.auth-rail.poster h1 { color: inherit; }
.auth-rail.poster p { color: inherit; opacity: .9; }
.or-rule { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.or-rule span { flex: 1; height: 2px; background: var(--color-divider); }
.or-rule i { font: 400 10.5px var(--font-body); font-style: normal; letter-spacing: .1em; color: var(--color-neutral-600); }
.form-error { font-size: 12.5px; color: var(--color-accent-700); margin: 0 0 12px; animation: shake .3s both; }

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-rail { border-right: 0; border-bottom: 2px solid var(--color-text); }
  .auth-rail-inner { padding: 26px 22px; }
  .auth-rail h1 { margin-top: 16px; }
  .auth-banner { padding: 14px 22px; }
  .auth-form { padding: 26px 22px 34px; }
}

/* ── library ────────────────────────────────────────────────────── */
.page { padding: 28px 34px 44px; max-width: 1200px; margin: 0 auto; }
@media (max-width: 700px) { .page { padding: 18px 16px 36px; } }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(30px, 4vw, 40px); margin: 0; }
.page-head .sub { margin: 2px 0 0; font-size: 12.5px; color: var(--color-neutral-700); }
.lib-table .quiz-title { font-weight: 600; }
.lib-table .quiz-meta { font-size: 11px; color: var(--color-neutral-600); font-weight: 400; }
.lib-table td { vertical-align: middle; }
@media (max-width: 820px) {
  .lib-table thead { display: none; }
  .lib-table, .lib-table tbody, .lib-table tr, .lib-table td { display: block; width: 100%; }
  .lib-table tr { border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px; }
  .lib-table td { border: 0; padding: 3px 0; }
  .lib-table td[data-th]::before { content: attr(data-th) ' · '; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); }
  .lib-table td.actions::before { content: ''; }
}

/* ── editor ─────────────────────────────────────────────────────── */
.editor { display: grid; grid-template-columns: 250px 1fr 280px; }
.editor > * { min-width: 0; }
.ed-list { border-right: 2px solid var(--color-text); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.ed-main { padding: 24px; border-right: 2px solid var(--color-text); }
.ed-side { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
/* on desktop, lock the editor to the viewport: the two bars above it keep
   their height and each column scrolls on its own — no page scrollbar */
@media (min-width: 1000px) {
  body:has(.editor:not(.hidden)) { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
  body:has(.editor:not(.hidden)) .editor { flex: 1; min-height: 0; }
  .ed-list, .ed-main, .ed-side { overflow-y: auto; min-height: 0; }
}

/* ── music bingo ────────────────────────────────────────────────── */
.bingo-grid { display: grid; gap: 8px; flex: 1; }
.bingo-cell {
  border: 2px solid var(--color-text); border-radius: 14px; padding: 6px;
  display: grid; place-items: center; text-align: center; cursor: pointer;
  font: 600 15px/1.3 var(--font-body); color: var(--color-text); background: transparent;
  min-height: 44px; transition: transform .12s cubic-bezier(.2,1.4,.4,1);
  overflow: hidden;
}
.bingo-cell:active { transform: scale(.93); }
.bingo-cell.marked {
  background: var(--color-accent); border-color: var(--color-accent);
  color: var(--color-bg); font-weight: 800; animation: jelly .55s both;
}
.bingo-cell.shake { animation: shake .35s both; }
.eq-bars { display: inline-flex; gap: 7px; align-items: flex-end; height: 90px; }
.eq-bars span {
  width: 14px; border-radius: 6px 6px 3px 3px; background: var(--color-accent);
  animation: eqbounce 1s ease-in-out infinite; transform-origin: bottom;
}
@keyframes eqbounce { 0%,100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.score-row {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-divider);
  border-radius: 12px; padding: 8px 14px; font: 600 14px var(--font-body);
}
.score-row.top1 { background: var(--c-gold); color: var(--color-bg); border-color: transparent; }
.score-row .got { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); animation: popin .3s both; }
.score-row.top1 .got { background: var(--color-bg); }
.ed-qrow {
  display: flex; gap: 8px; align-items: center; padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--color-divider); border-radius: 10px; font-size: 12px; background: none; text-align: left; width: 100%;
  font-family: var(--font-body); color: var(--color-text);
}
.ed-qrow .num { font: 800 11px var(--font-heading); color: var(--color-neutral-500); }
.ed-qrow .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-qrow.active { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.ed-qrow.active .num { color: var(--color-accent-400); }
@media (max-width: 1000px) {
  .editor { grid-template-columns: 1fr; }
  .ed-list { border-right: 0; border-bottom: 2px solid var(--color-text); flex-direction: row; flex-wrap: wrap; }
  .ed-qrow { width: auto; }
  .ed-qrow .txt { max-width: 130px; }
  .ed-main { border-right: 0; }
  .ed-side { border-top: 2px solid var(--color-divider); }
}
/* on a phone the wrapped chips are unreadable — give every question its own
   full-width row, with room for the whole question text */
@media (max-width: 700px) {
  .ed-list { flex-direction: column; flex-wrap: nowrap; padding: 14px; }
  .ed-qrow { width: 100%; min-height: 48px; padding: 10px 12px; font-size: 14px; }
  .ed-qrow .txt { max-width: none; flex: 1; }
  .ed-main, .ed-side { padding: 16px 14px; }
  /* the inline grid on #ed-answers has to be overridden explicitly */
  .ed-main #ed-answers { grid-template-columns: 1fr !important; }
  /* the editor's own toolbars stay inline; only these two need full width */
  .ed-list > div:last-of-type .btn { flex: 1 1 auto; justify-content: center; }
}

/* answer tile inputs in the editor — the four fill identities */
.tile-edit { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 10px 12px; }
.tile-edit .letter { font: 800 20px var(--font-heading); }
.tile-edit input.input { background: transparent; }
.tile-edit .ck {
  width: 18px; height: 18px; border-radius: 5px; flex: none; cursor: pointer; display: grid; place-items: center;
  border: 2px solid currentColor; background: transparent; padding: 0; color: inherit;
}
.tile-a { background: var(--color-text); color: var(--color-bg); }
.tile-a input.input { border-color: color-mix(in srgb, #f3f2f2 35%, transparent); color: inherit; }
.tile-b { background: var(--color-accent); color: var(--color-bg); }
.tile-b input.input { border-color: color-mix(in srgb, #f3f2f2 35%, transparent); color: inherit; }
.tile-c { background: var(--color-accent-200); color: var(--color-accent-900); }
.tile-d { border: 2px solid var(--color-text); }

/* ── projector (host) ───────────────────────────────────────────── */
/* hard-locked to the screen: a projector must never show a scrollbar —
   if content ever exceeds an odd TV resolution, the body scrolls inside */
.proj { height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); position: relative; overflow: hidden; }
.proj-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 28px; border-bottom: 2px solid var(--color-text); position: relative; z-index: 2; }
.proj-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.proj-live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); animation: pulse 1.6s infinite; }
.proj-body { flex: 1; display: flex; flex-direction: column; position: relative; z-index: 1; min-height: 0; overflow-y: auto; }

.code-big { font: 800 clamp(64px, 11vw, 130px)/1 var(--font-heading); letter-spacing: .02em; }
.qr-card { background: #fff; border: 2px solid var(--color-text); border-radius: 18px; padding: 12px 12px 8px; text-align: center; animation: popin .5s .25s both; }
.qr-card .lbl { font: 800 10px var(--font-heading); letter-spacing: .1em; margin-top: 6px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px; border: 2px solid var(--color-text); border-radius: 999px;
  padding: 5px 14px 5px 6px; font: 600 13px var(--font-body); animation: popin .35s both; background: transparent; color: var(--color-text);
  cursor: pointer; transition: transform .12s cubic-bezier(.2,1.4,.4,1);
}
.chip:hover { transform: translateY(-2px) rotate(-1deg); }
.chip.you { background: var(--color-accent); color: var(--color-bg); }
.chip.wob { animation: jelly .55s both; }

.timer-rail { height: 8px; background: var(--color-accent-200); }
.timer-rail .fill { width: 100%; height: 100%; background: var(--color-accent); transform-origin: left; }

.ans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ans-tile { display: flex; align-items: center; gap: 18px; border-radius: 20px; padding: 20px 24px; }
.ans-tile .letter { font: 800 clamp(28px, 3.4vw, 44px)/1 var(--font-heading); }
.ans-tile .label { font: 600 clamp(15px, 2vw, 24px)/1.2 var(--font-body); }
.fill-a { background: var(--tile-a, var(--color-text)); color: var(--tile-a-ink, var(--color-bg)); }
.fill-b { background: var(--tile-b, var(--color-accent)); color: var(--tile-b-ink, var(--color-bg)); }
.fill-c { background: var(--tile-c, var(--color-accent-200)); color: var(--tile-c-ink, var(--color-accent-900)); }
.fill-d { border: 3px solid var(--tile-d, var(--color-text)); background: transparent; color: var(--tile-d, var(--color-text)); }

.dist-row { display: grid; grid-template-columns: 44px 1fr 52px; gap: 12px; align-items: center; }
.dist-row .bar-rail { height: 30px; border-radius: 9px; background: var(--color-neutral-200); overflow: hidden; }
.dist-row .bar { height: 100%; border-radius: 9px; transform-origin: left; animation: growx .5s both; display: flex; align-items: center; padding-left: 10px; }
.dist-row .bar.win { animation: growx .5s both, jelly .8s .55s both; }

/* ── reveal: bars race under a drumroll, then the answer lands ──── */
.dist-row .bar { transition: width .45s cubic-bezier(.2,1.1,.35,1), background .3s; }
.dist-row .bar.racing {
  animation: race .45s ease-in-out infinite alternate !important;
  transform-origin: left;
}
/* each lane gets its own tempo and a negative delay, so they start out of
   phase and drift — a race, not a marching band. (The shorthand above resets
   delay, so these longhand overrides have to come after it.) */
.dist-row:nth-child(1) .bar.racing { animation-duration: .38s !important; animation-delay: -.05s !important; }
.dist-row:nth-child(2) .bar.racing { animation-duration: .53s !important; animation-delay: -.24s !important; }
.dist-row:nth-child(3) .bar.racing { animation-duration: .46s !important; animation-delay: -.33s !important; }
.dist-row:nth-child(4) .bar.racing { animation-duration: .61s !important; animation-delay: -.14s !important; }
@keyframes race { from { transform: scaleX(.16); } to { transform: scaleX(.94); } }
.dist-row .bar.land { animation: growx .45s both, jelly .7s .4s both !important; }
.dist-row .rv-count { transition: opacity .3s; }
.dist-row .rv-letter { transition: color .3s; }
/* the "…" that holds the answer's place while the drumroll runs */
.rv-dots i {
  font-style: normal; display: inline-block; animation: dotpulse 1s infinite;
  color: var(--color-neutral-400);
}
.rv-dots i:nth-child(2) { animation-delay: .15s; }
.rv-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotpulse { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

.board-row {
  display: flex; align-items: center; gap: 14px; border: 1px solid var(--color-divider); border-radius: 14px;
  padding: 11px 18px; animation: slidein .4s both;
}
.board-row.you { background: var(--color-accent); color: var(--color-bg); border-color: transparent; }
.board-row.top1 { background: var(--c-gold); color: var(--color-bg); border-color: transparent; }

/* between-question board: movement, not just totals */
.board-row { animation: none; }
.board-row.land { animation: slidein .42s cubic-bezier(.2,1.2,.35,1) both; }
.board-row.climbed.land { animation: slidein .42s cubic-bezier(.2,1.2,.35,1) both, jelly .5s .42s both; }
.board-row.fell.land { animation: slidein .42s cubic-bezier(.2,1.2,.35,1) both; opacity: .85; }
.board-row .delta {
  font: 800 12px var(--font-heading); padding: 3px 9px; border-radius: 999px; flex: none;
  animation: popin .3s .34s both;
}
.board-row .delta.up { background: var(--color-accent); color: var(--color-bg); }
.board-row .delta.down { background: var(--color-neutral-300); color: var(--color-neutral-800); }
.board-row .delta.hold { background: transparent; color: var(--color-neutral-500); }
.board-row.top1 .delta.up { background: var(--color-bg); color: var(--c-gold); }
.board-row .board-gain { font: 800 13px var(--font-heading); color: var(--color-accent); animation: popin .3s .42s both; }
.board-row.top1 .board-gain, .board-row.you .board-gain { color: var(--color-bg); }

.trend-card {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  background: var(--color-accent); color: var(--color-bg);
  border-radius: 18px; padding: 12px 18px; position: relative; overflow: hidden;
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .3s, transform .45s cubic-bezier(.2,1.4,.4,1);
}
.trend-card.in { opacity: 1; transform: none; }
.trend-card.in::after {
  content: ''; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #f3f2f2 40%, transparent), transparent);
  animation: sweep 3s ease-in-out infinite;
}
.trend-tag {
  font: 800 11px var(--font-heading); letter-spacing: .12em; padding: 4px 10px;
  background: var(--color-bg); color: var(--color-accent); border-radius: 999px; flex: none;
  animation: wiggle 2.2s ease-in-out infinite;
}
.trend-text { font: 800 clamp(15px, 1.7vw, 20px)/1.2 var(--font-heading); }

/* podium takeover */
.podium { background: var(--color-accent); color: var(--color-bg); }
.podium-cols { flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: end; padding: 22px 36px 26px; }
.podium-block { border-radius: 20px; padding: 12px 16px; font: 800 clamp(40px, 6vw, 76px)/1 var(--font-heading); transform-origin: bottom; animation: rise .55s cubic-bezier(.2,1.3,.4,1) both; position: relative; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.confetti span { position: absolute; top: 0; }

.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.floaters > span { position: absolute; bottom: 10px; opacity: 0; }

/* ── player (mobile) ────────────────────────────────────────────── */
.play { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-bg); max-width: 560px; margin: 0 auto; width: 100%; position: relative; font-size: 16px; }
/* readable-at-arm's-length bumps: paragraphs and labels on the phone */
.play p { font-size: 15px; }
.play .field > label { font-size: 14px; }
.play-pad { flex: 1; display: flex; flex-direction: column; padding: 24px 20px 26px; }
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
/* short phones (iPhone SE class): tighten the join screen so it fits */
@media (max-height: 700px) {
  .play-pad { padding: 16px 18px 18px; }
  .play-pad h2 { font-size: 30px !important; margin-top: 12px !important; }
  .avatar-pick { padding: 2px; }
  .avatar-pick svg { width: 30px; height: 30px; }
  .play .field { margin-bottom: 10px !important; }
  .play-pad h2 + p { margin-bottom: 10px !important; }
}
.avatar-pick { border: 2.5px solid var(--color-divider); background: transparent; border-radius: 12px; padding: 4px; display: grid; place-items: center; cursor: pointer; transition: transform .12s cubic-bezier(.2,1.4,.4,1); }
.avatar-pick:hover { transform: scale(1.08); }
.avatar-pick.sel { border-color: var(--color-accent); background: var(--color-accent-100); }

.play-tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.play-tile {
  cursor: pointer; border: 0; border-radius: 20px; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end; gap: 2px; padding: 12px 14px; min-height: 44px; text-align: left;
  transition: transform .12s cubic-bezier(.2,1.4,.4,1); animation: popin .45s both; font-family: var(--font-body);
}
.play-tile:active { transform: scale(.9) rotate(-2deg); }
.play-tile .letter { font: 800 44px/1 var(--font-heading); }
.play-tile .label { font: 600 17px/1.25 var(--font-body); }
.play-tile.fill-d { border: 3px solid var(--tile-d, var(--c-violet)); color: var(--tile-d, var(--c-violet)); background: transparent; }
.play-tile:nth-child(2) { animation-delay: .07s; }
.play-tile:nth-child(3) { animation-delay: .14s; }
.play-tile:nth-child(4) { animation-delay: .21s; }
.play-tile.fill-c { background: var(--tile-c, var(--c-gold-100)); color: var(--tile-c-ink, #8a5c00); }

.hype-row { display: flex; gap: 8px; }
.hype-btn {
  cursor: pointer; flex: 1; min-height: 48px; display: grid; place-items: center; border: 2px solid var(--color-text);
  border-radius: 14px; transition: transform .12s cubic-bezier(.2,1.4,.4,1); padding: 0;
}
.hype-btn:hover { transform: translateY(-2px); }
.hype-btn:active { transform: scale(.85) rotate(-5deg); }
.hype-bolt { background: var(--c-gold-100); }
.hype-heart { background: var(--color-accent-100); }
.hype-bang { background: var(--c-violet-100); }

.takeover-right { background: var(--color-accent); color: var(--color-bg); }
.takeover-wrong { background: var(--color-text); color: var(--color-bg); }

.count-big { font: 800 clamp(130px, 22vw, 200px)/1 var(--font-heading); color: var(--color-accent); text-shadow: 8px 8px 0 var(--c-gold); animation: boing .8s ease-in-out infinite; }

.sheen { position: relative; display: inline-block; overflow: hidden; padding-right: 16px; }
.sheen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, #f3f2f2 45%, transparent), transparent); width: 40%; animation: sweep 3.4s ease-in-out infinite; }

/* stat cards (profile/report style) */
.stat-card { background: var(--color-surface); border-radius: 16px; padding: 16px 20px; animation: slidein .4s both; }
.stat-card .n { font: 800 36px/1 var(--font-heading); }
.stat-card .l { font-size: 11.5px; color: var(--color-neutral-700); margin-top: 4px; }

.hidden { display: none !important; }

/* ── QR scanner overlay (entry page, phones) ────────────────────── */
.scan-overlay {
  position: fixed; inset: 0; z-index: 90; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.scan-overlay video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame {
  position: relative; width: min(72vw, 300px); aspect-ratio: 1;
  border: 3px solid var(--color-accent); border-radius: 22px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
}
.scan-hint {
  position: relative; margin: 22px 0 0; color: #f3f2f2;
  font: 600 16px var(--font-body); text-align: center; padding: 0 24px;
}
.scan-overlay .btn {
  position: relative; margin-top: 20px; background: #f3f2f2; color: #201e1d;
  border-radius: 14px; padding: 12px 28px; min-height: 48px;
}
/* the notice left by a game that ended or lost its host */
.entry-notice {
  font-size: 14px; background: var(--color-accent-100); color: var(--color-accent-900);
  border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; animation: popin .35s both;
}

/* On a phone the nickname comes first: it is usually already filled in from
   last time, so you glance at it and move straight to typing the code. */
@media (max-width: 700px) {
  .join-fields { display: flex; flex-direction: column; }
  .join-fields .f-nick { order: 1; }
  .join-fields .f-room { order: 2; }
  .join-fields #en-scan { order: 3; }
  .join-fields .field:not(.f-nick):not(.f-room) { order: 4; }
}

/* ── shouts: a few words that fly across the projector ──────────── */
.shout-box { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.shout-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.shout-chip {
  border: 2px solid var(--color-divider); background: transparent; color: var(--color-text);
  border-radius: 999px; padding: 8px 14px; font: 600 14px var(--font-body); cursor: pointer;
  transition: transform .12s cubic-bezier(.2,1.4,.4,1), border-color .15s, background .15s;
}
.shout-chip:hover { border-color: var(--color-text); }
.shout-chip:active { transform: scale(.92); background: var(--color-accent-100); border-color: var(--color-accent); }
.shout-compose { display: flex; gap: 8px; }
.shout-compose .input { flex: 1; min-height: 46px; }
.shout-compose .btn { min-height: 46px; white-space: nowrap; }
.shout-hint { font-size: 12px; color: var(--color-neutral-600); margin: 0; }
.play-leave { align-self: flex-start; color: var(--color-neutral-600); font-size: 13px; padding-inline: 0; }
.play-leave:hover { color: var(--color-accent-700); }

/* the bubble version of a floater, on the projector */
.floaters .shout {
  font: 800 clamp(18px, 2.2vw, 30px) var(--font-heading);
  background: var(--color-bg); color: var(--color-text);
  border: 2px solid var(--color-text); border-radius: 999px;
  padding: 8px 18px; white-space: nowrap; box-shadow: var(--shadow-md);
}

/* a chip whose player walked out */
.chip.leaving { animation: chipout .24s ease-in both; pointer-events: none; }
@keyframes chipout { to { transform: scale(.7); opacity: 0; } }

/* ── picture questions ──────────────────────────────────────────── */
/* The projector pane sizes its own heading so a picture question can give
   the wording less room and the shots more. */
.q-pane h1 { font-size: clamp(30px, 4.6vw, 56px); }
.q-pane.picture h1 { font-size: clamp(22px, 2.6vw, 34px); }
.q-pane.picture .ans-grid { gap: 10px; }
.q-pane.picture .ans-tile { padding: 12px 18px; gap: 14px; }
.q-pane.picture .ans-tile .letter { font-size: clamp(22px, 2.2vw, 30px); }
.q-pane.picture .ans-tile .label { font-size: clamp(14px, 1.4vw, 20px); }

/* The shots: one row, centred in the middle of the stage. Each slot's width
   comes from its picture's own aspect ratio (set by fitShots), so the slots
   hug the photos and the whole group sits centred instead of the pictures
   drifting apart inside slots stretched edge to edge. If the group is wider
   than the stage, the slots shrink together and the photos scale with them. */
.img-stage { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; gap: 16px; margin: 14px 0 16px; }
.img-stage .shot {
  flex: 0 1 auto; min-width: 0; min-height: 0; margin: 0; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; animation: popin .45s both;
}
.img-stage .shot img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  border: 2px solid var(--color-text); border-radius: 18px; background: var(--color-neutral-100);
}
/* a single shot has the whole row, so let it run to the edges */
.img-stage[data-n="1"] .shot img { border-radius: 20px; }
/* a laptop standing in for the TV: stack them rather than slicing three ways */
@media (max-width: 700px) {
  .img-stage { flex-direction: column; gap: 10px; }
}

/* ── editor: the picture slots ──────────────────────────────────── */
.img-slots { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.img-slot {
  position: relative; width: 150px; height: 110px; border: 2px solid var(--color-text); border-radius: 14px;
  overflow: hidden; background: var(--color-neutral-100); animation: popin .35s both;
}
.img-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-slot .tag {
  position: absolute; top: 6px; left: 6px; background: var(--color-text); color: var(--color-bg);
  font: 800 11px var(--font-heading); border-radius: 999px; padding: 2px 8px;
}
.img-slot .img-x {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: var(--color-accent); color: var(--color-bg); font: 800 15px/1 var(--font-heading);
  cursor: pointer; display: grid; place-items: center; padding: 0;
}
.img-slot .img-x:hover { transform: scale(1.1); }
.img-add {
  width: 150px; height: 110px; border: 2px dashed var(--color-neutral-400); border-radius: 14px;
  background: transparent; color: var(--color-neutral-700); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font: 600 12.5px var(--font-body); transition: border-color .15s, color .15s, transform .12s cubic-bezier(.2,1.4,.4,1);
}
.img-add:hover { border-color: var(--color-text); color: var(--color-text); }
.img-add:active { transform: scale(.95); }

/* ── birthday: no answer key, so the correct-answer ticks step aside ── */
#ed-answers.no-key .ck { display: none; }
#ed-answers.no-key .tile-edit .input { margin-right: 0; }

/* ── birthday: the crowned chip in the lobby, and the solo turn ── */
.chip.star { background: var(--c-gold-100); border-color: var(--c-gold); color: #8a5c00; }
.chip.star::after { content: "★"; font-size: 13px; margin-left: 2px; }
.lobby-grid .chip { cursor: pointer; }

/* the star answers alone: the tiles are on the wall for reading, not choosing */
.q-pane.solo .ans-grid { opacity: .45; filter: saturate(.5); transition: opacity .3s; }
.star-wait { display: inline-flex; align-items: center; gap: 10px; }

/* ── projector look: the host's wallpaper and tile colours ───────────
   Only `.themed` re-derives the palette, so an untouched quiz still renders
   in the house style, pixel for pixel. Everything drawn on the wallpaper
   takes its colour from the ink the wallpaper earned, never from a literal. */
.proj.themed {
  --color-bg: var(--tv-bg, #f3f2f2);
  --color-text: var(--tv-ink, #201e1d);
  --color-divider: color-mix(in srgb, var(--color-text) 34%, transparent);
  --color-surface: color-mix(in srgb, var(--color-text) 8%, transparent);
  --color-neutral-200: color-mix(in srgb, var(--color-text) 12%, transparent);
  --color-neutral-300: color-mix(in srgb, var(--color-text) 22%, transparent);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 34%, transparent);
  --color-neutral-500: color-mix(in srgb, var(--color-text) 46%, transparent);
  --color-neutral-600: color-mix(in srgb, var(--color-text) 58%, transparent);
  --color-neutral-700: color-mix(in srgb, var(--color-text) 72%, transparent);
  background: var(--color-bg);
  /* `color` is inherited from body, which computed it from the house token
     long before this rule redefined it — so the ink has to be re-set here or
     every descendant keeps painting dark text on a dark wallpaper */
  color: var(--color-text);
}
/* the wallpaper sits under everything and is held back far enough that
   question text stays comfortable on top of it */
.proj.themed::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--tv-wall, none);
  background-size: cover; background-position: center;
  opacity: .3;
}
/* the QR card stays white paper — a code has to scan off any wallpaper */
.proj.themed .qr-card { background: #fff; border-color: #201e1d; }
.proj.themed .qr-card .lbl { color: #201e1d; }

/* editor: the look panel */
.look-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.look-swatches label { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 800 10px var(--font-heading); color: var(--color-neutral-600); }
.look-swatches input[type="color"] { width: 38px; height: 30px; padding: 0; border: 2px solid var(--color-text); border-radius: 8px; background: none; cursor: pointer; }
.look-preset { display: flex; align-items: center; gap: 0; border: 2px solid var(--color-text); border-radius: 9px; padding: 3px; cursor: pointer; background: transparent; }
.look-preset i { width: 13px; height: 20px; display: block; }
.look-preset:hover { transform: translateY(-2px); }
.look-preset[aria-pressed="true"] { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.look-tv { border: 2px solid var(--color-text); border-radius: 12px; overflow: hidden; }
.look-tv .sky { height: 42px; background-size: cover; background-position: center; display: grid; place-items: center; font: 800 11px var(--font-heading); }
.look-tv .row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; }
.look-tv .row b { height: 17px; border-radius: 5px; display: block; }

/* Once a host has picked four colours, every tile is filled with the colour
   they picked. The house style's outlined D is a flourish tuned to paper; a
   chosen colour has to read on the TV's wallpaper AND on a phone's paper, and
   only a filled tile with derived ink does both. */
.tiles-themed .fill-d,
.tiles-themed .play-tile.fill-d {
  background: var(--tile-d);
  border-color: var(--tile-d);
  color: var(--tile-d-ink);
}

/* ── zoom-out pictures ───────────────────────────────────────────
   The shot opens far past recognition and retreats to full frame across the
   question's own timer. The delay is set negative so a projector that
   reloaded mid-question drops in at the frame the room is already looking at. */
.img-stage.zooming .shot { overflow: hidden; border-radius: 18px; }
.img-stage.zooming .shot img { animation: zoomback var(--zoom-dur, 20s) linear both; animation-delay: var(--zoom-delay, 0s); }
@keyframes zoomback { from { transform: scale(9); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .img-stage.zooming .shot img { animation-duration: var(--zoom-dur, 20s); }
}

/* ── nearest wins: the number line ───────────────────────────────
   Guesses are pinned along the range and the true value drops in on top.
   Pins alternate above and below the axis so crowded guesses stay readable. */
.numline { flex: 1; min-height: 0; position: relative; margin: 26px 0 22px; }
/* a projector is read from the back of the room, so the pins carry TV-sized
   type rather than the document-sized type a chart would use on a laptop */
.numline .axis { position: absolute; top: 50%; left: 0; right: 0; height: 3px; background: var(--color-text); border-radius: 2px; }
.numline .pin { position: absolute; top: 50%; transform: translate(-50%, 0); text-align: center; animation: popin .4s both; }
.numline .pin::before { content: ""; display: block; width: 3px; height: 30px; margin: -30px auto 0; background: var(--color-neutral-500); }
.numline .pin b { display: block; font: 800 clamp(13px, 1.15vw, 21px) var(--font-heading); }
.numline .pin i { display: block; font: 600 clamp(12px, 1vw, 18px) var(--font-body); color: var(--color-neutral-600); font-style: normal; font-variant-numeric: tabular-nums; }
.numline .pin:nth-child(even) { transform: translate(-50%, -100%); }
.numline .pin:nth-child(even)::before { margin: 0 auto -30px; }
.numline .pin.win b { color: var(--color-accent); }
.numline .pin.win::before { background: var(--color-accent); width: 4px; }
.numline .truth { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.numline .truth::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent); border: 3px solid var(--color-bg); }
.numline .truth span { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); font: 800 clamp(16px, 1.7vw, 32px) var(--font-heading); color: var(--color-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── teams ───────────────────────────────────────────────────────*/
.chip.teamed { border-color: var(--team); box-shadow: inset 0 0 0 2px var(--team); }
.team-opt[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.team-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--team, var(--color-text)); }
.team-row .swatch { width: 16px; height: 16px; border-radius: 5px; background: var(--team); flex: none; }
.team-row .nm { font: 800 17px var(--font-heading); }
.team-row .sc { margin-left: auto; font: 800 20px var(--font-heading); font-variant-numeric: tabular-nums; }

/* ── plans ───────────────────────────────────────────────────────*/
.usage-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13.5px; margin: 18px 0 8px; }
.note-soft { font-size: 13px; color: var(--color-neutral-700); border-left: 3px solid var(--color-accent); padding-left: 12px; margin: 14px 0 0; max-width: 70ch; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 26px; align-items: stretch; }
.plan-card { border: 2px solid var(--color-divider); border-radius: 18px; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.plan-card.featured { border-color: var(--color-text); }
.plan-card.current { border-color: var(--color-accent); }
.plan-card h3 { font: 800 20px var(--font-heading); margin: 0; }
.plan-card .blurb { font-size: 13px; color: var(--color-neutral-700); margin: 0; min-height: 2.6em; }
.plan-card .price { font: 800 32px var(--font-heading); margin: 0; font-variant-numeric: tabular-nums; }
.plan-card .price span { font: 600 13px var(--font-body); color: var(--color-neutral-600); margin-left: 3px; }
.plan-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.plan-card li::before { content: "→ "; color: var(--color-accent); font-weight: 700; }
.plan-card .plan-cta { margin-top: auto; }
.plan-card .plan-cta.muted { font: 800 12px var(--font-heading); color: var(--color-neutral-600); text-transform: uppercase; letter-spacing: .08em; padding-top: 8px; }

/* ── share links ─────────────────────────────────────────────────*/
.share-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid var(--color-divider); border-radius: 12px; padding: 8px 12px; font-size: 13px; }
.share-row.dead { opacity: .5; }
.share-row code { font: 800 14px var(--font-heading); letter-spacing: .06em; background: var(--color-surface); border-radius: 6px; padding: 3px 8px; }
.share-row .meta { color: var(--color-neutral-600); }
.share-row .grow { flex: 1; }

/* ── superadmin console ──────────────────────────────────────────*/
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat { border: 2px solid var(--color-divider); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.stat .n { font: 800 30px var(--font-heading); font-variant-numeric: tabular-nums; }
.stat .l { font: 600 12px var(--font-body); color: var(--color-neutral-600); }
.admin-table { width: 100%; font-size: 13.5px; }
.admin-table th { font: 800 10px var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); }
.admin-table td { vertical-align: middle; }
.admin-table .sub2 { font-size: 11.5px; color: var(--color-neutral-600); }
.admin-table code { font: 800 13px var(--font-heading); letter-spacing: .05em; }
.admin-table .actions { text-align: right; white-space: nowrap; }
.admin-table .row-live td { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.admin-table .row-dead { opacity: .5; }
.btn.mini, .input.mini { padding: 3px 9px; font-size: 12px; min-height: 0; }
.input.mini { width: auto; display: inline-block; }
.btn.mini.danger { color: var(--color-accent-700); }

/* ── console: settings ───────────────────────────────────────────*/
.set-card { border: 2px solid var(--color-divider); border-radius: 18px; padding: 20px 22px; max-width: 620px; display: flex; flex-direction: column; gap: 4px; }
.set-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.set-head h3 { font: 800 19px var(--font-heading); margin: 0; }
.set-help { font-size: 12.5px; color: var(--color-neutral-700); margin: 2px 0 0; max-width: 60ch; }
.set-help code { font: 700 12px ui-monospace, Menlo, monospace; background: var(--color-surface); border-radius: 5px; padding: 2px 6px; display: inline-block; margin-top: 3px; word-break: break-all; }
.set-note { border-left: 3px solid var(--color-accent); padding-left: 10px; }

/* ── Google sign-in, wearing the house style ─────────────────────
   Google's rendered button cannot be restyled — it is their markup and their
   branding rules. So it is laid over ours at zero opacity and keeps the click,
   the keyboard focus and the screen-reader label; the button you can see is
   inert decoration that matches the form beneath it. */
.gsi-wrap { position: relative; margin-bottom: 12px; overflow: hidden; }
.gsi-face {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 6px 14px;
  border: 2px solid var(--color-text); border-radius: var(--radius-md);
  background: var(--color-bg); color: var(--color-text);
  font: var(--font-heading-weight) 14px var(--font-heading);
  transition: background .15s, transform .12s cubic-bezier(.2,1.4,.4,1);
  pointer-events: none;          /* the real button above it takes every click */
  user-select: none;
}
.gsi-face svg { flex: none; }
/* the real button is on top and invisible, so hover and focus have to be
   reflected from it onto the face underneath */
.gsi-wrap:hover .gsi-face { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.gsi-wrap:active .gsi-face { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.gsi-wrap:focus-within .gsi-face { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.gsi-real { position: absolute; inset: 0; opacity: 0; display: flex; align-items: center; justify-content: center; }
/* Only the button CONTAINER is stretched. Never size Google's iframes: GIS
   renders a hidden helper iframe after the button, and forcing dimensions on
   it once left an invisible 48px strip hanging below the wrapper, eating the
   clicks meant for the email field underneath. The overflow:hidden on the
   wrapper is the second lock on that same door. */
.gsi-real > div { width: 100%; }
/* until Google's script answers, the face is all there is — keep it inert so a
   click on nothing does not read as a broken button */
.gsi-wrap:not(.ready) { opacity: .55; pointer-events: none; }

/* ── cookie notice ───────────────────────────────────────────────
   Anchored to the bottom so it never covers a question on the projector or
   the answer tiles on a phone. */
.ck-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--color-bg); border-top: 2px solid var(--color-text);
  box-shadow: 0 -8px 24px color-mix(in srgb, var(--color-text) 12%, transparent);
  animation: ckup .3s cubic-bezier(.2,1,.3,1) both;
}
@keyframes ckup { from { transform: translateY(100%); } to { transform: none; } }
.ck-inner {
  max-width: 980px; margin: 0 auto; padding: 14px 22px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.ck-text { flex: 1; min-width: 260px; }
.ck-text strong { display: block; font: 800 14px var(--font-heading); margin-bottom: 3px; }
.ck-text p { margin: 0; font-size: 13px; color: var(--color-neutral-700); max-width: 78ch; }
.ck-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ck-acts .btn { min-height: 40px; }
@media (max-width: 560px) {
  .ck-inner { padding: 12px 16px; }
  .ck-acts { width: 100%; }
  .ck-acts .btn { flex: 1; }
}
.ck-blocked {
  font-size: 13px; color: var(--color-neutral-700);
  border-left: 3px solid var(--color-accent); padding-left: 12px; margin: 0 0 12px;
}

/* ── footer ──────────────────────────────────────────────────────*/
.site-foot {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  max-width: 1180px; margin: 40px auto 0; padding: 16px 22px 26px;
  border-top: 2px solid var(--color-divider);
  font-size: 12.5px; color: var(--color-neutral-600);
}
.site-foot .btn { font-size: 12.5px; padding-inline: 0; }
/* the projector and the player screen fill the viewport; no footer there */
.proj ~ .site-foot, .play ~ .site-foot { display: none; }

/* ── privacy page ────────────────────────────────────────────────*/
.legal .legal-date { font-size: 12.5px; color: var(--color-neutral-600); margin-top: 8px; }
.legal-block { margin-top: 30px; }
.legal-block h2 { font: 800 20px var(--font-heading); margin: 0 0 8px; }
.legal-block p { font-size: 15px; line-height: 1.62; max-width: 68ch; margin: 0 0 10px; }
.legal-operator {
  border: 2px dashed var(--color-accent); border-radius: 12px; padding: 12px 14px;
  font: 600 14px var(--font-body); color: var(--color-accent-700);
}
.legal-table { width: 100%; font-size: 13px; margin-top: 14px; }
.legal-table th { font: 800 10px var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); }
.legal-table code { font: 700 12px ui-monospace, Menlo, monospace; word-break: break-all; }
.legal-choice { font-size: 13.5px; margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* the operator box drops its warning dress once real details are in */
.legal-operator.filled {
  border: 2px solid var(--color-divider); color: var(--color-text);
  font: 400 14.5px/1.6 var(--font-body);
}
.legal-operator.filled strong { font: 800 15px var(--font-heading); }
.set-stack { display: flex; flex-direction: column; gap: 16px; }
.set-card textarea.input { resize: vertical; min-height: 58px; }