/* K Media admin · Trivia & QR (rendered by admin-trivia.js into #trivia-screen).
   Every rule is scoped to #trivia-screen. Colours come from the shared --km-* tokens in style.css
   (light on :root, dark under [data-theme="dark"]); the fallbacks are the light design values.
   The shared header (.km-header, .km-nav, .km-btn …) is styled by style.css, not here. */

#trivia-screen {
  --kt-bg: var(--km-bg, #FAF7F2);
  --kt-surface: var(--km-surface, #FFFFFF);
  --kt-surface-2: var(--km-surface-2, #F6F1EA);
  --kt-line: var(--km-line, #EAE3D9);
  --kt-line-2: var(--km-line-2, #F0EAE1);
  --kt-line-strong: var(--km-line-strong, #DDD4C8);
  --kt-ink: var(--km-ink, #1F1B16);
  --kt-dim: var(--km-dim, #5E554C);
  --kt-muted: var(--km-muted, #6B6259);
  --kt-label: var(--km-label, #7A7066);
  --kt-hover: var(--km-hover, #F3ECE3);
  --kt-clay: var(--km-clay, #B5531A);
  --kt-clay-dk: var(--km-clay-dk, #96431A);
  --kt-clay-soft: var(--km-clay-soft, #FBF1E8);
  --kt-clay-line: var(--km-clay-line, #E6BE9E);
  --kt-on-clay: var(--km-on-clay, #FFFFFF);
  --kt-brand: var(--km-brand, #D2691E);
  --kt-green: var(--km-green, #1D6A3E);
  --kt-green-bg: var(--km-green-bg, #E4F3EA);
  --kt-chart-green: var(--km-chart-green, #2F9A5C);
  --kt-chart-soft: var(--km-chart-soft, #E6BE9E);
  --kt-red: var(--km-red, #C53030);
  --kt-red-bg: var(--km-red-bg, #FDECEC);
  --kt-amber: var(--km-amber, #7A4F00);
  --kt-amber-bg: var(--km-amber-bg, #FCF1D6);
  --kt-dot-amber: var(--km-dot-amber, #D4940A);
  --kt-focus: var(--km-focus, #B5531A);
  --kt-scrim: var(--km-scrim, rgba(31, 27, 22, .45));
  --kt-shadow-lg: var(--km-shadow-lg, 0 24px 48px -16px rgba(60, 40, 20, .28), 0 2px 6px rgba(60, 40, 20, .06));
  --kt-sans: var(--km-sans, 'Figtree', system-ui, sans-serif);
  --kt-serif: var(--km-serif, 'Source Serif 4', Georgia, serif);
  --kt-radius: var(--km-radius, 16px);
  --kt-radius-sm: var(--km-radius-sm, 10px);
  /* mixes of the tokens above, so they follow dark mode too */
  --kt-green-line: color-mix(in srgb, var(--kt-green) 40%, var(--kt-surface));
  --kt-green-soft: color-mix(in srgb, var(--kt-green-bg) 55%, var(--kt-surface));
  --kt-bar-other: color-mix(in srgb, var(--kt-label) 55%, var(--kt-surface));
  --kt-clay-border: color-mix(in srgb, var(--kt-clay-line) 60%, var(--kt-surface));

  min-height: 100vh;
  background: var(--kt-bg);
  color: var(--kt-ink);
  font-family: var(--kt-sans);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
#trivia-screen [hidden] { display: none !important; }
#trivia-screen .kt-main :focus-visible,
#trivia-screen .kt-overlay :focus-visible { outline: 2px solid var(--kt-focus); outline-offset: 2px; }
#trivia-screen .kt-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#trivia-screen .kt-muted { color: var(--kt-muted); }
#trivia-screen .kt-strong { font-weight: 700; }
#trivia-screen .kt-small { font-size: 13px; }
#trivia-screen .kt-tnum { font-variant-numeric: tabular-nums; }
#trivia-screen .kt-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#trivia-screen .kt-stack-lg { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
#trivia-screen .kt-grow { flex: 1 1 auto; }
#trivia-screen .kt-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#trivia-screen .kt-ic {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ------------------------------------------------------------ page layout */
#trivia-screen .kt-main {
  width: 100%; max-width: 1440px; margin: 0 auto; padding: 36px 64px 56px;
  display: flex; flex-direction: column; gap: 28px;
}
#trivia-screen .kt-body { display: flex; flex-direction: column; gap: 28px; min-width: 0; transition: opacity .15s; }
#trivia-screen .kt-body.is-loading { opacity: .55; pointer-events: none; }

#trivia-screen .kt-pagehead { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 32px; }
#trivia-screen .kt-pagehead-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 380px; }
#trivia-screen .kt-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 12px;
  height: auto; margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
  font-size: 14px; color: var(--kt-muted);
}
#trivia-screen .kt-crumbs a { color: var(--kt-clay); font-weight: 600; text-decoration: none; border-radius: 4px; }
#trivia-screen .kt-crumbs a:hover { color: var(--kt-clay-dk); text-decoration: underline; }
#trivia-screen .kt-h1 {
  margin: 0; font-family: var(--kt-serif); font-size: 36px; line-height: 1.1; font-weight: 600;
  letter-spacing: -0.01em; color: var(--kt-ink); overflow-wrap: anywhere;
}
#trivia-screen .kt-h1:focus, #trivia-screen .kt-h1:focus-visible { outline: none; }
#trivia-screen .kt-h1-q { font-size: 34px; }
#trivia-screen .kt-h1-sub { font-size: 22px; font-weight: 500; color: var(--kt-muted); letter-spacing: 0; }
#trivia-screen .kt-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
#trivia-screen .kt-sub { margin: 0; max-width: 780px; font-size: 15px; line-height: 1.45; color: var(--kt-muted); }
#trivia-screen .kt-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
#trivia-screen .kt-btn-group { display: flex; flex-wrap: wrap; gap: 12px; }

#trivia-screen .kt-card { min-width: 0; background: var(--kt-surface); border: 1px solid var(--kt-line); border-radius: var(--kt-radius); }
#trivia-screen .kt-sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#trivia-screen .kt-sec-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
#trivia-screen .kt-eyebrow {
  display: block; margin: 0; font-size: 12px; line-height: 1.3; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--kt-label);
}
#trivia-screen .kt-sec-note { font-size: 14px; color: var(--kt-muted); }
#trivia-screen .kt-footnote { margin: 0; font-size: 13px; line-height: 1.45; color: var(--kt-muted); }

/* ------------------------------------------------------------ buttons */
#trivia-screen .kt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; margin: 0; padding: 0 16px;
  border: 1px solid var(--kt-line-strong); border-radius: 12px;
  background: var(--kt-surface); color: var(--kt-ink);
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
#trivia-screen .kt-btn:hover { background: var(--kt-hover); color: var(--kt-ink); }
#trivia-screen .kt-btn-primary { background: var(--kt-clay); border-color: var(--kt-clay); color: var(--kt-on-clay); }
#trivia-screen .kt-btn-primary:hover { background: var(--kt-clay-dk); border-color: var(--kt-clay-dk); color: var(--kt-on-clay); }
#trivia-screen .kt-btn-open { height: 34px; padding: 0 12px; border-radius: 10px; border-color: var(--kt-clay-border); color: var(--kt-clay); }
#trivia-screen .kt-btn-open:hover { background: var(--kt-clay-soft); color: var(--kt-clay-dk); }
#trivia-screen .kt-btn-sm { height: 38px; padding: 0 14px; border-radius: 10px; }
#trivia-screen .kt-btn-xs { height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; gap: 6px; }
#trivia-screen .kt-btn-danger { border-color: var(--kt-red); color: var(--kt-red); }
#trivia-screen .kt-btn-danger:hover { background: var(--kt-red-bg); color: var(--kt-red); }
#trivia-screen .kt-btn[aria-busy="true"] { opacity: .65; cursor: progress; }
#trivia-screen .kt-link-btn {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px;
  border: 0; border-radius: 4px; background: none; color: var(--kt-clay);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
#trivia-screen .kt-link-btn:hover { color: var(--kt-clay-dk); }
#trivia-screen .kt-icon-btn {
  width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--kt-dim); cursor: pointer;
}
#trivia-screen .kt-icon-btn:hover { background: var(--kt-hover); color: var(--kt-ink); }
#trivia-screen .kt-icon-btn .kt-ic { width: 20px; height: 20px; }

/* segmented control (date range, status) */
#trivia-screen .kt-seg {
  display: inline-flex; gap: 4px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--kt-surface); border: 1px solid var(--kt-line); border-radius: 12px;
}
#trivia-screen .kt-seg::-webkit-scrollbar { display: none; }
#trivia-screen .kt-seg button {
  flex: 0 0 auto; height: 36px; padding: 0 14px; border: 0; border-radius: 9px;
  background: transparent; color: var(--kt-dim); font: inherit; font-size: 14px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
#trivia-screen .kt-seg button:hover { background: var(--kt-hover); color: var(--kt-ink); }
#trivia-screen .kt-seg button[aria-pressed="true"] { background: var(--kt-clay); color: var(--kt-on-clay); }
#trivia-screen .kt-seg-sm button { height: 32px; padding: 0 12px; font-size: 13px; }
#trivia-screen .kt-seg-n { margin-left: 2px; font-weight: 500; opacity: .8; font-variant-numeric: tabular-nums; }

/* selects: own chevron (follows the theme), so the shared background chevron is switched off */
#trivia-screen .kt-select-wrap { position: relative; display: inline-flex; min-width: 0; }
#trivia-screen .kt-select-wrap::after {
  content: ""; position: absolute; top: 50%; right: 17px; width: 7px; height: 7px; margin-top: -6px;
  border-right: 2px solid var(--kt-dim); border-bottom: 2px solid var(--kt-dim);
  transform: rotate(45deg); pointer-events: none;
}
#trivia-screen .kt-select {
  height: 46px; min-width: 160px; margin: 0; padding: 0 42px 0 16px;
  border: 1px solid var(--kt-line-strong); border-radius: 12px;
  background-color: var(--kt-surface); background-image: none; color: var(--kt-ink);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
#trivia-screen .kt-select:focus { outline: 2px solid var(--kt-focus); outline-offset: 0; border-color: var(--kt-focus); }
#trivia-screen .kt-select-block { display: flex; width: 100%; }
#trivia-screen .kt-select-block .kt-select { width: 100%; height: 44px; border-radius: var(--kt-radius-sm); font-size: 15px; font-weight: 500; }

/* ------------------------------------------------------------ KPIs */
#trivia-screen .kt-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
#trivia-screen .kt-kpi {
  min-width: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px;
  background: var(--kt-surface); border: 1px solid var(--kt-line); border-radius: var(--kt-radius);
}
#trivia-screen .kt-kpi-label {
  font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--kt-label);
}
#trivia-screen .kt-kpi-value {
  font-family: var(--kt-serif); font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -0.01em;
  color: var(--kt-ink); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere;
}
#trivia-screen .kt-kpi-value.is-clay { color: var(--kt-clay); }
#trivia-screen .kt-kpi-value.is-green { color: var(--kt-green); }
#trivia-screen .kt-kpi-note { font-size: 13px; line-height: 1.35; color: var(--kt-muted); }
#trivia-screen .kt-kpis-sm { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
#trivia-screen .kt-kpis-sm .kt-kpi { justify-content: space-between; gap: 6px; padding: 16px; border-radius: 14px; }
#trivia-screen .kt-kpis-sm .kt-kpi-label { letter-spacing: .12em; }
#trivia-screen .kt-kpis-sm .kt-kpi-value { font-size: 30px; }

#trivia-screen .kt-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
#trivia-screen .kt-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ------------------------------------------------------------ tables (scroll inside their card) */
#trivia-screen .kt-table-card { overflow: hidden; }
/* position: relative keeps visually hidden labels inside the scroll box (else they widen the page) */
#trivia-screen .kt-table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#trivia-screen .kt-table-scroll:focus-visible { outline-offset: -2px; border-radius: var(--kt-radius); }
#trivia-screen .kt-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
#trivia-screen .kt-table th {
  height: 44px; padding: 0 12px; border: 0; text-align: left; vertical-align: middle; white-space: nowrap;
  background: var(--kt-surface-2); color: var(--kt-muted);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
#trivia-screen .kt-table td {
  padding: 10px 12px; border: 0; border-top: 1px solid var(--kt-line-2);
  background: transparent; color: var(--kt-ink); font-size: 15px; vertical-align: middle;
}
#trivia-screen .kt-table th:first-child, #trivia-screen .kt-table td:first-child { padding-left: 20px; }
#trivia-screen .kt-table th:last-child, #trivia-screen .kt-table td:last-child { padding-right: 20px; }
#trivia-screen .kt-table tbody tr:hover > td { background: transparent; }
#trivia-screen .kt-table tbody tr.kt-row-link { cursor: pointer; }
#trivia-screen .kt-table tbody tr.kt-row-link:hover > td { background: var(--kt-clay-soft); }
#trivia-screen .kt-table .kt-num { text-align: right; white-space: nowrap; }
#trivia-screen .kt-table .kt-end { width: 1%; text-align: right; white-space: nowrap; }
#trivia-screen .kt-table .kt-strong { font-weight: 700; }
#trivia-screen .kt-table-byq { min-width: 640px; }
#trivia-screen .kt-table-bank { min-width: 980px; }
#trivia-screen .kt-table-links { min-width: 760px; }
#trivia-screen .kt-cell-q { min-width: 240px; }
#trivia-screen .kt-q-text { display: block; font-weight: 600; line-height: 1.3; }
#trivia-screen .kt-q-meta { display: block; margin-top: 2px; font-size: 13px; color: var(--kt-muted); }
#trivia-screen .kt-st { font-weight: 600; }
#trivia-screen .kt-st-live { color: var(--kt-green); }
#trivia-screen .kt-st-paused { color: var(--kt-amber); }
#trivia-screen .kt-st-ready, #trivia-screen .kt-st-draft { color: var(--kt-dim); }
#trivia-screen .kt-empty-cell { margin: 0; padding: 28px 20px; text-align: center; font-size: 14px; color: var(--kt-muted); }
#trivia-screen .kt-table-foot { padding: 6px 20px; border-top: 1px solid var(--kt-line-2); text-align: center; }

/* status pills */
#trivia-screen .kt-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  background: var(--kt-surface-2); color: var(--kt-dim);
  font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle;
}
#trivia-screen .kt-pill::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 999px; background: currentColor; }
#trivia-screen .kt-pill-live, #trivia-screen .kt-pill-on { background: var(--kt-green-bg); color: var(--kt-green); }
#trivia-screen .kt-pill-live::before, #trivia-screen .kt-pill-on::before { background: var(--kt-chart-green); }
#trivia-screen .kt-pill-ready::before { background: var(--kt-bar-other); }
#trivia-screen .kt-pill-paused, #trivia-screen .kt-pill-warn { background: var(--kt-amber-bg); color: var(--kt-amber); }
#trivia-screen .kt-pill-paused::before { background: var(--kt-dot-amber); }
#trivia-screen .kt-pill-draft { background: transparent; color: var(--kt-muted); box-shadow: inset 0 0 0 1px var(--kt-line-strong); }
#trivia-screen .kt-pill-off { background: var(--kt-red-bg); color: var(--kt-red); }
#trivia-screen .kt-pill-sm { height: 22px; padding: 0 8px; font-size: 11.5px; }

/* ------------------------------------------------------------ overview: chart + cities + empty states */
#trivia-screen .kt-chart { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
#trivia-screen .kt-bars { display: flex; flex-direction: column; gap: 6px; }
#trivia-screen .kt-bar-plot { height: 140px; display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--kt-line); }
#trivia-screen .kt-bar-col {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
}
#trivia-screen .kt-bar-val { font-size: 12px; font-weight: 600; color: var(--kt-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
#trivia-screen .kt-bar { display: block; width: 100%; border-radius: 6px 6px 0 0; background: var(--kt-chart-soft); }
#trivia-screen .kt-bar.is-top { background: var(--kt-clay); }
#trivia-screen .kt-bar-axis { display: flex; gap: 10px; }
#trivia-screen .kt-bar-axis span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 12px; color: var(--kt-muted); }
#trivia-screen .kt-chart-empty { margin: 0; font-size: 13px; color: var(--kt-muted); }

#trivia-screen .kt-city-list { overflow: hidden; }
#trivia-screen .kt-city { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--kt-line-2); font-variant-numeric: tabular-nums; }
#trivia-screen .kt-city:first-child { border-top: 0; }
#trivia-screen .kt-city-top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
#trivia-screen .kt-city-name { font-size: 15px; font-weight: 600; }
#trivia-screen .kt-city-meta { font-size: 13px; color: var(--kt-muted); }
#trivia-screen .kt-city-stats { font-size: 13px; color: var(--kt-dim); }
#trivia-screen .kt-track { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--kt-line-2); }
#trivia-screen .kt-track-lg { height: 14px; }
#trivia-screen .kt-fill { display: block; height: 100%; border-radius: 999px; background: var(--kt-brand); }
#trivia-screen .kt-fill.is-right { background: var(--kt-chart-green); }
#trivia-screen .kt-fill.is-other { background: var(--kt-bar-other); }

#trivia-screen .kt-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 28px; text-align: center; }
#trivia-screen .kt-empty-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--kt-clay-soft); color: var(--kt-clay); }
#trivia-screen .kt-empty-ic .kt-ic { width: 28px; height: 28px; stroke-width: 1.8; }
#trivia-screen .kt-empty-title { margin: 0; font-family: var(--kt-serif); font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--kt-ink); }
#trivia-screen .kt-empty-text { margin: 0; max-width: 540px; font-size: 15px; line-height: 1.5; color: var(--kt-muted); }
#trivia-screen .kt-empty > .kt-btn, #trivia-screen .kt-empty > .kt-inline { margin-top: 4px; justify-content: center; }
#trivia-screen .kt-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px;
  padding: 14px 18px; border-radius: 14px; background: var(--kt-clay-soft); border: 1px solid var(--kt-clay-border);
}
#trivia-screen .kt-banner p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--kt-ink); }
#trivia-screen .kt-empty-inline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 18px 20px; }
#trivia-screen .kt-empty-inline p { margin: 0; color: var(--kt-muted); }
#trivia-screen .kt-empty-sm { margin: 0; padding: 16px; border-radius: 12px; background: var(--kt-bg); text-align: center; color: var(--kt-muted); }

/* ------------------------------------------------------------ question detail */
#trivia-screen .kt-q-grid { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 32px; align-items: start; }
#trivia-screen .kt-setup { padding: 26px; border-radius: 20px; display: flex; flex-direction: column; gap: 20px; }
#trivia-screen .kt-swatch-row { display: flex; align-items: center; gap: 16px; }
#trivia-screen .kt-swatch {
  display: inline-block; flex-shrink: 0; border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kt-ink) 14%, transparent);
}
#trivia-screen .kt-swatch-lg { width: 64px; height: 64px; }
#trivia-screen .kt-swatch-sm { width: 28px; height: 28px; }
#trivia-screen .kt-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#trivia-screen .kt-opt { min-height: 50px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--kt-line); border-radius: 12px; }
#trivia-screen .kt-opt.is-right { border: 1.5px solid var(--kt-green-line); background: var(--kt-green-soft); }
#trivia-screen .kt-opt-l { width: 20px; flex-shrink: 0; font-weight: 700; }
#trivia-screen .kt-opt-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#trivia-screen .kt-opt.is-right .kt-opt-t { font-weight: 600; }
#trivia-screen .kt-opt-tag {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kt-green);
}
#trivia-screen .kt-opt-tag .kt-ic { width: 14px; height: 14px; stroke-width: 2.4; }
#trivia-screen .kt-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#trivia-screen .kt-fact { min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 2px; border-radius: 12px; background: var(--kt-bg); }
#trivia-screen .kt-fact span { font-size: 12px; color: var(--kt-muted); }
#trivia-screen .kt-fact strong { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
#trivia-screen .kt-readfield { display: flex; flex-direction: column; gap: 4px; }
#trivia-screen .kt-readlabel { font-size: 13px; font-weight: 600; color: var(--kt-muted); }
#trivia-screen .kt-readfield p { margin: 0; font-size: 15px; line-height: 1.45; }
#trivia-screen .kt-sponsor-inline { display: inline-flex; align-items: center; gap: 10px; }
#trivia-screen .kt-logo-box {
  width: 44px; height: 44px; flex-shrink: 0; display: inline-grid; place-items: center; padding: 4px; overflow: hidden;
  border: 1px solid var(--kt-line); border-radius: 10px; background: #FFFFFF; /* logos are made for a light background */
}
#trivia-screen .kt-logo-box img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
#trivia-screen .kt-logo-fallback { background: var(--kt-surface-2); color: var(--kt-muted); font-size: 16px; font-weight: 700; }

#trivia-screen .kt-dist { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
#trivia-screen .kt-dist-grid {
  display: grid; grid-template-columns: minmax(96px, 200px) minmax(0, 1fr) auto; align-items: center; gap: 12px 16px;
  font-size: 15px; font-variant-numeric: tabular-nums;
}
#trivia-screen .kt-dist-l { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
#trivia-screen .kt-dist-l.is-right { font-weight: 700; }
#trivia-screen .kt-dist-l .kt-ic { color: var(--kt-green); stroke-width: 2.4; }
#trivia-screen .kt-dist-v { text-align: right; white-space: nowrap; }

#trivia-screen .kt-cell-qr { width: 72px; }
#trivia-screen .kt-qr-thumb { display: block; width: 48px; height: 48px; padding: 3px; border: 1px solid var(--kt-line); border-radius: 8px; background: #FFFFFF; }
#trivia-screen .kt-qr-thumb svg { display: block; width: 100%; height: 100%; }
#trivia-screen .kt-link-cell { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
#trivia-screen .kt-link-text { font-size: 14px; color: var(--kt-dim); }

/* ------------------------------------------------------------ question bank */
#trivia-screen .kt-filters { display: flex; flex-direction: column; gap: 14px; }
#trivia-screen .kt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#trivia-screen .kt-chip {
  height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--kt-line-strong); border-radius: 999px; background: var(--kt-surface); color: var(--kt-ink);
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
#trivia-screen .kt-chip:hover { background: var(--kt-hover); }
#trivia-screen .kt-chip[aria-pressed="true"] { background: var(--kt-ink); border-color: var(--kt-ink); color: var(--kt-surface); }
#trivia-screen .kt-chip-n { font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }
#trivia-screen .kt-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
#trivia-screen .kt-search { position: relative; display: flex; align-items: center; min-width: 0; }
#trivia-screen .kt-filter-row .kt-search { flex: 0 1 300px; min-width: 200px; }
#trivia-screen .kt-search .kt-ic { position: absolute; left: 12px; color: var(--kt-label); pointer-events: none; }
#trivia-screen .kt-search .kt-input { padding-left: 36px; }
#trivia-screen .kt-search-sm .kt-input { height: 40px; }
#trivia-screen .kt-result { margin-left: auto; font-size: 14px; color: var(--kt-muted); font-variant-numeric: tabular-nums; }
#trivia-screen .kt-cell-id { width: 70px; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--kt-muted); }
#trivia-screen .kt-table td.kt-cell-id { font-size: 13px; }
#trivia-screen .kt-q-wrap { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
#trivia-screen .kt-q-link { color: var(--kt-ink); font-weight: 600; line-height: 1.35; text-decoration: none; border-radius: 4px; }
#trivia-screen .kt-q-link:hover { color: var(--kt-clay); text-decoration: underline; }
#trivia-screen .kt-opt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#trivia-screen .kt-chip-opt {
  display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 3px 10px;
  border: 1px solid var(--kt-line); border-radius: 8px; background: var(--kt-bg); color: var(--kt-dim);
  font-size: 14px; font-weight: 500; line-height: 1.3;
}
#trivia-screen .kt-chip-opt.is-right { border-color: var(--kt-green-line); background: var(--kt-green-bg); color: var(--kt-green); font-weight: 700; }
#trivia-screen .kt-chip-opt .kt-ic { width: 14px; height: 14px; stroke-width: 2.4; }
#trivia-screen .kt-table td.kt-cell-cat { white-space: nowrap; font-size: 14px; color: var(--kt-dim); }

/* ------------------------------------------------------------ screens */
#trivia-screen .kt-screen-list { display: flex; flex-direction: column; gap: 14px; }
#trivia-screen .kt-screen { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
#trivia-screen .kt-screen-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
#trivia-screen .kt-screen-code {
  margin: 0; font-family: var(--kt-serif); font-size: 28px; line-height: 1.1; font-weight: 600;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
#trivia-screen .kt-screen-where { margin: 2px 0 0; font-size: 14px; color: var(--kt-muted); overflow-wrap: anywhere; }
#trivia-screen .kt-screen-state { flex-shrink: 0; }
#trivia-screen .kt-switch {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px;
  border: 0; border-radius: 10px; background: transparent; color: var(--kt-ink);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
#trivia-screen .kt-switch-track { position: relative; flex-shrink: 0; width: 44px; height: 26px; border-radius: 999px; background: var(--kt-line-strong); transition: background-color .15s; }
#trivia-screen .kt-switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px;
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s;
}
#trivia-screen .kt-switch[aria-checked="true"] .kt-switch-track { background: var(--kt-chart-green); }
#trivia-screen .kt-switch[aria-checked="true"] .kt-switch-thumb { transform: translateX(18px); }
#trivia-screen .kt-switch-text { min-width: 26px; text-align: left; }
#trivia-screen .kt-switch[aria-busy="true"] { opacity: .65; cursor: progress; }
#trivia-screen .kt-note { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
#trivia-screen .kt-note-warn { background: var(--kt-amber-bg); color: var(--kt-amber); }
#trivia-screen .kt-mini-stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#trivia-screen .kt-mini-stats > div { min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; border-radius: 12px; background: var(--kt-bg); }
#trivia-screen .kt-mini-stats dt { font-size: 12px; color: var(--kt-muted); }
#trivia-screen .kt-mini-stats dd { margin: 0; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#trivia-screen .kt-expander {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px;
  border: 1px solid var(--kt-clay-border); border-radius: 10px; background: var(--kt-surface); color: var(--kt-clay);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
#trivia-screen .kt-expander:hover { background: var(--kt-clay-soft); }
#trivia-screen .kt-expander .kt-ic { transition: transform .15s; }
#trivia-screen .kt-expander[aria-expanded="true"] .kt-ic { transform: rotate(180deg); }
#trivia-screen .kt-setup-area {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px;
  padding-top: 18px; border-top: 1px solid var(--kt-line);
}
#trivia-screen .kt-setup-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
#trivia-screen .kt-block { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#trivia-screen .kt-block-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
#trivia-screen .kt-block-h { margin: 0; font-size: 15px; font-weight: 700; color: var(--kt-ink); }
#trivia-screen .kt-block-h .kt-muted { font-weight: 500; }
#trivia-screen .kt-phone { display: flex; align-items: center; gap: 14px; }
#trivia-screen .kt-qr-img { width: 96px; height: 96px; flex-shrink: 0; padding: 4px; border: 1px solid var(--kt-line); border-radius: 10px; background: #FFFFFF; }
#trivia-screen .kt-copy-line { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
#trivia-screen .kt-code {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1px solid var(--kt-line); border-radius: 8px;
  background: var(--kt-bg); color: var(--kt-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.4;
  overflow-wrap: anywhere; word-break: break-all;
}
#trivia-screen .kt-steps { list-style: none; margin: 0; padding: 0; counter-reset: kt-step; display: flex; flex-direction: column; gap: 14px; }
#trivia-screen .kt-steps > li { counter-increment: kt-step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
#trivia-screen .kt-steps > li::before {
  content: counter(kt-step); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px;
  background: var(--kt-clay-soft); color: var(--kt-clay); font-size: 14px; font-weight: 700;
}
#trivia-screen .kt-step-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 3px; }
#trivia-screen .kt-step-body strong { font-size: 15px; }
#trivia-screen .kt-step-body .kt-muted { font-size: 13px; }
#trivia-screen .kt-step-body .kt-copy-line { margin-top: 4px; }
#trivia-screen .kt-setup-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#trivia-screen .kt-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#trivia-screen .kt-pick-list { position: relative; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--kt-line); border-radius: 12px; background: var(--kt-surface); }
#trivia-screen .kt-pick { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-top: 1px solid var(--kt-line-2); font-size: 14px; cursor: pointer; }
#trivia-screen .kt-pick:first-child { border-top: 0; }
#trivia-screen .kt-pick:hover { background: var(--kt-hover); }
#trivia-screen .kt-pick input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--kt-clay); }
#trivia-screen .kt-pick-code { flex-shrink: 0; min-width: 48px; font-size: 13px; font-weight: 700; color: var(--kt-muted); font-variant-numeric: tabular-nums; }
#trivia-screen .kt-pick-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#trivia-screen .kt-qlist { position: relative; list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--kt-line); border-radius: 12px; }
#trivia-screen .kt-qlist li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--kt-line-2); font-size: 14px; }
#trivia-screen .kt-qlist li:first-child { border-top: 0; }
#trivia-screen .kt-pad { margin: 0; padding: 14px; }
#trivia-screen .kt-fallback { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
#trivia-screen .kt-inline-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
#trivia-screen .kt-fallback-line { margin: 0; font-family: var(--kt-serif); font-size: 20px; font-weight: 600; }
#trivia-screen .kt-fb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#trivia-screen .kt-fb-phone { flex: 0 1 220px; }

/* ------------------------------------------------------------ form controls */
#trivia-screen .kt-form { display: flex; flex-direction: column; }
#trivia-screen .kt-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#trivia-screen .kt-field > label, #trivia-screen .kt-label, #trivia-screen .kt-label-row label { font-size: 14px; font-weight: 600; color: var(--kt-ink); }
#trivia-screen .kt-label-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#trivia-screen .kt-optional { font-weight: 500; color: var(--kt-muted); }
#trivia-screen .kt-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--kt-muted); }
#trivia-screen .kt-counter { font-size: 12px; color: var(--kt-muted); font-variant-numeric: tabular-nums; }
#trivia-screen .kt-counter.is-near { color: var(--kt-amber); font-weight: 700; }
#trivia-screen .kt-input {
  width: 100%; height: 44px; min-width: 0; margin: 0; padding: 0 12px;
  border: 1px solid var(--kt-line-strong); border-radius: var(--kt-radius-sm);
  background-color: var(--kt-surface); color: var(--kt-ink);
  font: inherit; font-size: 15px; line-height: 1.3;
}
#trivia-screen .kt-input::placeholder { color: var(--kt-label); opacity: 1; }
#trivia-screen .kt-input:focus { outline: 2px solid var(--kt-focus); outline-offset: 0; border-color: var(--kt-focus); }
#trivia-screen .kt-input[aria-invalid="true"], #trivia-screen .kt-select[aria-invalid="true"] { border-color: var(--kt-red); }
#trivia-screen .kt-input:disabled { background-color: var(--kt-surface-2); color: var(--kt-muted); }
#trivia-screen .kt-textarea { height: auto; min-height: 72px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
#trivia-screen .kt-input-sm { height: 36px; font-size: 14px; }
#trivia-screen .kt-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
#trivia-screen .kt-fieldset > legend { margin: 0 0 10px; padding: 0; font-size: 14px; font-weight: 600; color: var(--kt-ink); }
#trivia-screen .kt-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
#trivia-screen .kt-opt-edits { display: flex; flex-direction: column; gap: 8px; }
#trivia-screen .kt-opt-edit { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
#trivia-screen .kt-opt-edit .kt-opt-l { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--kt-surface-2); }
#trivia-screen .kt-right-pick {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--kt-line-strong); border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--kt-dim); white-space: nowrap; cursor: pointer;
}
#trivia-screen .kt-right-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--kt-chart-green); }
#trivia-screen .kt-right-pick:has(input:checked) { border-color: var(--kt-green-line); background: var(--kt-green-bg); color: var(--kt-green); }
#trivia-screen .kt-swatch-edit { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-height: 44px; }
#trivia-screen .kt-swatch-edit input[type="color"] {
  width: 52px; height: 44px; margin: 0; padding: 3px;
  border: 1px solid var(--kt-line-strong); border-radius: 10px; background-color: var(--kt-surface); cursor: pointer;
}
#trivia-screen .kt-swatch-edit input[type="color"]:disabled { opacity: .35; cursor: not-allowed; }
#trivia-screen .kt-swatch-edit output { min-width: 76px; font-size: 14px; font-weight: 600; color: var(--kt-dim); }
#trivia-screen .kt-check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; color: var(--kt-ink); cursor: pointer; }
#trivia-screen .kt-check input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--kt-clay); }
#trivia-screen .kt-check-inline { min-height: 44px; }
#trivia-screen .kt-city-group { display: flex; flex-direction: column; padding: 8px 14px; border: 1px solid var(--kt-line); border-radius: 12px; }
#trivia-screen .kt-city-group + .kt-city-group { margin-top: 8px; }
#trivia-screen .kt-check-all { margin-bottom: 2px; border-bottom: 1px solid var(--kt-line-2); }
#trivia-screen .kt-check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 16px; }
#trivia-screen .kt-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#trivia-screen .kt-choice {
  min-height: 44px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--kt-line-strong); border-radius: 12px; cursor: pointer;
}
#trivia-screen .kt-choice:has(input:checked) { border-color: var(--kt-clay); background: var(--kt-clay-soft); }
#trivia-screen .kt-choice input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--kt-clay); }
#trivia-screen .kt-choice-text { display: flex; flex-direction: column; gap: 2px; }
#trivia-screen .kt-choice-text strong { font-size: 14px; }
#trivia-screen .kt-choice-text span { font-size: 13px; line-height: 1.4; color: var(--kt-muted); }
#trivia-screen .kt-form-error { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--kt-red); }
#trivia-screen .kt-form-error:empty { display: none; }
#trivia-screen .kt-file { max-width: 100%; font-size: 14px; color: var(--kt-dim); }
#trivia-screen .kt-file::file-selector-button {
  height: 36px; margin-right: 10px; padding: 0 12px; border: 1px solid var(--kt-line-strong); border-radius: 8px;
  background: var(--kt-surface); color: var(--kt-ink); font: inherit; font-weight: 600; cursor: pointer;
}
#trivia-screen .kt-file-btn { position: relative; }
#trivia-screen .kt-file-btn:has(input:focus-visible) { outline: 2px solid var(--kt-focus); outline-offset: 2px; }

/* sponsors */
#trivia-screen .kt-sp-list { list-style: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--kt-line); border-radius: 12px; }
#trivia-screen .kt-sp { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; border-top: 1px solid var(--kt-line-2); }
#trivia-screen .kt-sp:first-child { border-top: 0; }
#trivia-screen .kt-sp-main { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#trivia-screen .kt-sp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#trivia-screen .kt-rename { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#trivia-screen .kt-rename .kt-input { flex: 1 1 160px; width: auto; }
#trivia-screen .kt-sp-add { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--kt-line); border-radius: 12px; background: var(--kt-bg); }

/* ------------------------------------------------------------ dialogs */
/* head and foot stay put; only the body scrolls */
#trivia-screen .kt-overlay {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  padding: 32px 16px; background: var(--kt-scrim);
}
#trivia-screen .kt-dialog {
  position: relative; width: 100%; max-width: 620px; max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--kt-surface); color: var(--kt-ink); border: 1px solid var(--kt-line); border-radius: 20px;
  box-shadow: var(--kt-shadow-lg); outline: none;
}
#trivia-screen .kt-dialog-wide { max-width: 760px; }
#trivia-screen .kt-dialog > .kt-form { flex: 1 1 auto; min-height: 0; }
#trivia-screen .kt-modal-head {
  flex-shrink: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--kt-line-2);
}
#trivia-screen .kt-modal-title { margin: 0; font-family: var(--kt-serif); font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
#trivia-screen .kt-modal-body {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 20px; padding: 20px 24px 24px;
}
#trivia-screen .kt-modal-foot {
  flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 16px 24px;
  border-top: 1px solid var(--kt-line-2); background: var(--kt-surface);
}
#trivia-screen .kt-foot-note { flex: 1 1 220px; }

/* ------------------------------------------------------------ loading */
#trivia-screen .kt-skel { display: block; max-width: 100%; border-radius: 6px; background: var(--kt-line-2); animation: kt-pulse 1.4s ease-in-out infinite; }
#trivia-screen .kt-skel-card { display: flex; flex-direction: column; }
#trivia-screen .kt-skel-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; border-top: 1px solid var(--kt-line-2); }
#trivia-screen .kt-skel-row:first-child { border-top: 0; }
@keyframes kt-pulse { 50% { opacity: .45; } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1240px) {
  #trivia-screen .kt-main { padding: 28px 32px 48px; }
  #trivia-screen .kt-split, #trivia-screen .kt-q-grid { grid-template-columns: minmax(0, 1fr); }
  #trivia-screen .kt-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
  #trivia-screen .kt-kpis-sm { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  #trivia-screen .kt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #trivia-screen .kt-kpis-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #trivia-screen .kt-setup-area, #trivia-screen .kt-choices { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  #trivia-screen .kt-main { padding: 20px 16px 40px; gap: 20px; }
  #trivia-screen .kt-body, #trivia-screen .kt-stack-lg { gap: 20px; }
  #trivia-screen .kt-h1, #trivia-screen .kt-h1-q { font-size: 28px; }
  #trivia-screen .kt-h1-sub { font-size: 18px; }
  #trivia-screen .kt-pagehead { align-items: flex-start; }
  #trivia-screen .kt-fallback .kt-field { flex: 1 1 100%; }
  #trivia-screen .kt-pagehead-text { flex-basis: 100%; }
  #trivia-screen .kt-tools, #trivia-screen .kt-btn-group { width: 100%; }
  #trivia-screen .kt-tools > .kt-seg { width: 100%; }
  #trivia-screen .kt-tools > .kt-seg button { flex: 1 1 auto; }
  #trivia-screen .kt-tools > .kt-select-wrap { flex: 1 1 100%; }
  #trivia-screen .kt-tools > .kt-select-wrap .kt-select { width: 100%; }
  #trivia-screen .kt-tools > .kt-btn, #trivia-screen .kt-btn-group > .kt-btn { flex: 1 1 auto; }
  #trivia-screen .kt-kpis, #trivia-screen .kt-kpis-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #trivia-screen .kt-kpi { padding: 16px; }
  #trivia-screen .kt-kpi-value { font-size: 30px; }
  #trivia-screen .kt-kpis-sm .kt-kpi-value { font-size: 26px; }
  #trivia-screen .kt-side { grid-template-columns: minmax(0, 1fr); }
  #trivia-screen .kt-chart { padding: 18px; }
  #trivia-screen .kt-bar-plot, #trivia-screen .kt-bar-axis { gap: 6px; }
  #trivia-screen .kt-setup { padding: 20px 18px; }
  #trivia-screen .kt-dist { padding: 18px; }
  #trivia-screen .kt-dist-grid { grid-template-columns: minmax(80px, 130px) minmax(0, 1fr) auto; gap: 10px 12px; font-size: 14px; }
  #trivia-screen .kt-filter-row { align-items: stretch; }
  #trivia-screen .kt-filter-row .kt-search { flex: 1 1 100%; min-width: 0; }
  #trivia-screen .kt-result { margin-left: 0; }
  #trivia-screen .kt-banner .kt-btn { width: 100%; }
  #trivia-screen .kt-screen { padding: 16px; }
  #trivia-screen .kt-screen-code { font-size: 24px; }
  #trivia-screen .kt-mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #trivia-screen .kt-phone { flex-direction: column; align-items: flex-start; }
  #trivia-screen .kt-copy-line { width: 100%; }
  #trivia-screen .kt-field-grid { grid-template-columns: minmax(0, 1fr); }
  #trivia-screen .kt-overlay { padding: 0; align-items: stretch; }
  #trivia-screen .kt-dialog, #trivia-screen .kt-dialog-wide { max-width: none; height: 100%; border: 0; border-radius: 0; }
  #trivia-screen .kt-modal-head { padding: 16px; }
  #trivia-screen .kt-modal-body { padding: 16px; }
  #trivia-screen .kt-modal-foot { padding: 12px 16px; }
  #trivia-screen .kt-modal-title { font-size: 22px; }
  #trivia-screen .kt-opt-edit { gap: 8px; }
  #trivia-screen .kt-right-pick { padding: 0 10px; }
  #trivia-screen .kt-filter-row > .kt-seg { width: 100%; }
  #trivia-screen .kt-filter-row > .kt-seg button { flex: 1 1 auto; padding: 0 8px; }
  #trivia-screen .kt-empty { padding: 32px 18px; }
}
/* 44 px touch targets on touch screens and small windows */
@media (pointer: coarse), (max-width: 720px) {
  #trivia-screen .kt-btn, #trivia-screen .kt-btn-sm, #trivia-screen .kt-btn-xs, #trivia-screen .kt-btn-open,
  #trivia-screen .kt-link-btn, #trivia-screen .kt-expander, #trivia-screen .kt-chip, #trivia-screen .kt-seg button,
  #trivia-screen .kt-select, #trivia-screen .kt-input { min-height: 44px; }
  #trivia-screen .kt-icon-btn { min-width: 44px; min-height: 44px; }
  #trivia-screen .kt-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #trivia-screen .kt-skel { animation: none; }
  #trivia-screen .kt-body, #trivia-screen .kt-switch-track, #trivia-screen .kt-switch-thumb, #trivia-screen .kt-expander .kt-ic { transition: none; }
}
@media (forced-colors: active) {
  #trivia-screen .kt-bar, #trivia-screen .kt-fill { forced-color-adjust: none; background: CanvasText; }
  #trivia-screen .kt-bar.is-top, #trivia-screen .kt-fill.is-right { background: Highlight; }
  #trivia-screen .kt-switch-track { border: 1px solid CanvasText; }
}