@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --primary:#4F46E5;
  --primary-alt:#7C3AED;
  --accent:#22D3EE;
  --ink:#0F172A;
  --muted:#4B5563;
  --bg:#F5F7FF;
  --surface:rgba(255,255,255,0.82);
  --surface-alt:rgba(255,255,255,0.94);
  --border:rgba(79,70,229,0.18);
  --shadow:0 22px 48px rgba(15,23,42,0.12);
  --radius-card:22px;
  --radius-control:14px;
  --font-body:'Plus Jakarta Sans','Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-head:'Outfit','Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  --input-border:rgba(148,163,184,0.35);
  --focus-ring:rgba(79,70,229,0.22);
  --header-blur:18px;
}

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

body {
  margin:0;
  font-family:var(--font-body);
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(124,58,237,0.18) 0%, rgba(59,130,246,0.08) 35%, rgba(14,116,144,0) 65%),
    radial-gradient(140% 120% at 100% 0%, rgba(34,211,238,0.14) 0%, rgba(79,70,229,0.08) 40%, rgba(15,23,42,0) 70%),
    var(--bg);
  transition:background-color .25s ease,color .25s ease;
}

header {
  padding:18px 24px;
  background:rgba(255,255,255,0.82);
  border-bottom:1px solid rgba(255,255,255,0.4);
  backdrop-filter:blur(var(--header-blur));
  box-shadow:0 12px 40px rgba(79,70,229,0.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:20;
}
body[data-theme="dark"] header {
  background:rgba(15,23,42,0.9);
  border-bottom:1px solid rgba(148,163,184,0.3);
  box-shadow:0 18px 48px rgba(2,6,23,0.55);
}
body[data-theme="dark"] header h1,
body[data-theme="dark"] header .small,
body[data-theme="dark"] header .bar,
body[data-theme="dark"] header a,
body[data-theme="dark"] header button { color:#e2e8f0; }
body[data-theme="dark"] header .hamburger { background:rgba(79,70,229,0.18); }
body[data-theme="dark"] header .hamburger:hover { background:rgba(79,70,229,0.26); }
body[data-theme="dark"] header .hamburger .bar { background:#c7d2fe; }

h1, h2, h3, h4 {
  font-family:var(--font-head);
  margin:0;
}

h1 { font-size:22px; letter-spacing:-0.01em; }

.container { max-width:1040px; margin:32px auto; padding:0 18px; }

.card {
  background:var(--surface);
  border:1px solid rgba(255,255,255,0.45);
  border-radius:var(--radius-card);
  padding:24px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(26px);
  position:relative;
  overflow:hidden;
}

.card::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(79,70,229,0.08) 0%, rgba(124,58,237,0.06) 45%, rgba(34,211,238,0.04) 100%);
  opacity:.85;
}

.card > * { position:relative; z-index:1; }

.grid { display:grid; gap:24px; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }

/* Auth experience */
.auth-layout {
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,520px) minmax(0,1fr);
  position:relative;
}

.auth-panel {
  padding:64px clamp(24px,4vw,80px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:28px;
}

.auth-card {
  background:var(--surface);
  border-radius:26px;
  padding:36px;
  box-shadow:0 26px 60px rgba(15,23,42,0.18);
  border:1px solid rgba(255,255,255,0.42);
  backdrop-filter:blur(28px);
}

.auth-card h1 { font-size:2rem; margin-bottom:4px; }
.auth-card p { color:var(--muted); margin:0 0 28px; }
.auth-card form { display:flex; flex-direction:column; gap:18px; }
.auth-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.auth-meta { font-size:.9rem; color:var(--muted); }
.auth-error {
  background:rgba(220, 38, 38, 0.12);
  border:1px solid rgba(220, 38, 38, 0.3);
  color:#991B1B;
  padding:12px 16px;
  border-radius:14px;
  font-weight:500;
  animation:fadeIn .4s ease;
}

.auth-error {
  background:rgba(220, 38, 38, 0.12);
  border:1px solid rgba(220, 38, 38, 0.3);
  color:#991B1B;
  padding:12px 16px;
  border-radius:14px;
  font-weight:500;
  animation:fadeIn .4s ease;
}

@keyframes fadeIn {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}

.auth-hero {
  position:relative;
  overflow:hidden;
  padding:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(79,70,229,0.95) 0%, rgba(124,58,237,0.82) 45%, rgba(34,211,238,0.68) 100%);
  color:#fff;
}

.auth-hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(80% 80% at 20% 20%, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 100%);
  opacity:.6;
}

.auth-hero__inner {
  position:relative;
  z-index:1;
  max-width:520px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:32px;
}

.auth-hero__badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(15,23,42,0.2);
  border:1px solid rgba(255,255,255,0.22);
  font-weight:600;
  font-size:0.9rem;
}

.auth-hero__title { font-size:2.8rem; line-height:1.1; margin:0; }
.auth-hero__subtitle { font-size:1.05rem; max-width:480px; opacity:.92; }

.auth-hero__mockup {
  display:flex;
  justify-content:flex-start;
}

.auth-hero__mockup img {
  width:100%;
  max-width:420px;
  filter:drop-shadow(0 30px 50px rgba(15,23,42,0.35));
  border-radius:26px;
}

@media (max-width:1100px) {
  .auth-layout { grid-template-columns:1fr; }
  .auth-hero { order:-1; padding:48px 32px; }
  .auth-panel { padding:48px 18px 64px; }
  .auth-hero__inner { text-align:center; align-items:center; }
  .auth-hero__mockup { justify-content:center; }
}

@media (max-width:640px) {
  .auth-card { padding:28px 24px; border-radius:22px; }
  .auth-card h1 { font-size:1.75rem; }
  .auth-hero__title { font-size:2.2rem; }
}

label { display:block; margin:8px 0 4px; font-weight:600; }

input[type=text],
input[type=email],
input[type=password],
textarea,
select,
input[type=number] {
  width:100%;
  padding:12px 14px;
  border:1px solid var(--input-border);
  border-radius:var(--radius-control);
  background:var(--surface-alt);
  color:var(--ink);
  box-shadow:0 12px 30px rgba(15,23,42,0.08);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Ensure clear text color in light modes */
body:not([data-theme="dark"]) input[type=text],
body:not([data-theme="dark"]) input[type=email],
body:not([data-theme="dark"]) input[type=password],
body:not([data-theme="dark"]) textarea,
body:not([data-theme="dark"]) select,
body:not([data-theme="dark"]) input[type=number] {
  color:#111;
}

/* Placeholder visibility */
input::placeholder, textarea::placeholder { color: rgba(0,0,0,0.45); }
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder { color: rgba(255,255,255,0.55); }

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
textarea:focus,
select:focus,
input[type=number]:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--focus-ring);
  transform:translateY(-2px);
}

button,
.btn {
  appearance:none;
  border:0;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-alt) 50%, var(--accent) 100%);
  color:#fff;
  padding:12px 18px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}

button:active,
.btn:active { transform:translateY(1px); }

button:hover,
.btn:hover {
  box-shadow:0 18px 40px rgba(79,70,229,0.26);
  transform:translateY(-1px);
}

.btn-secondary {
  background:rgba(15,23,42,0.75);
  color:#fff;
  border:1px solid rgba(255,255,255,0.22);
}

.btn-secondary:hover { box-shadow:0 16px 36px rgba(15,23,42,0.24); }

.badge {
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(79,70,229,0.1);
  color:var(--primary);
  font-size:0.8rem;
  font-weight:600;
}

.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:8px; border-bottom:1px solid #eee; text-align:left; }

.actions { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.actions a { display:inline-flex; align-items:center; }

.join-form button { margin-top:12px; }
.center { text-align:center; }
.pin { font-size:40px; letter-spacing:6px; font-weight:800; }
.leaderboard {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.leaderboard-empty {
  padding:12px 14px;
  border-radius:14px;
  background:var(--surface-alt);
  border:1px dashed var(--border);
  color:var(--muted);
  text-align:center;
  font-weight:600;
}
.leaderboard-row {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background:var(--surface-alt);
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(15,23,42,0.08);
  transition:transform .18s ease, box-shadow .18s ease;
}
.leaderboard-row.top-1 { box-shadow:0 14px 30px rgba(79,70,229,0.22); }
.leaderboard-row.top-1 .leaderboard-rank { background:linear-gradient(135deg,#facc15,#f97316); color:#111827; }
.leaderboard-row.top-2 .leaderboard-rank { background:linear-gradient(135deg,#cbd5f5,#94a3b8); color:#0f172a; }
.leaderboard-row.top-3 .leaderboard-rank { background:linear-gradient(135deg,#f59e0b,#facc15); color:#111827; }
.leaderboard-row:hover { transform:translateY(-2px); box-shadow:0 16px 38px rgba(15,23,42,0.18); }
.leaderboard-rank {
  width:34px;
  height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:18px;
  background:rgba(79,70,229,0.12);
  color:var(--primary);
}
.leaderboard-player {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.leaderboard-name {
  font-weight:700;
  font-size:1rem;
  color:var(--ink);
  word-break:break-word;
}
.leaderboard-bar {
  position:relative;
  height:8px;
  border-radius:999px;
  background:rgba(148,163,184,0.3);
  overflow:hidden;
}
.leaderboard-bar span {
  display:block;
  height:100%;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-alt) 100%);
  transition:width .25s ease;
}
.leaderboard-score {
  font-weight:800;
  font-size:1.1rem;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  min-width:42px;
}
.player-question.results-card { display:flex; flex-direction:column; gap:12px; }
.player-question.results-card .leaderboard { margin-top:6px; }
.player-question.results-card .leaderboard-row { background:var(--surface); }
body[data-theme="dark"] .player-question.results-card .leaderboard-row {
  background:rgba(30,41,59,0.9);
  border-color:rgba(148,163,184,0.28);
}
body[data-theme="hc"] .player-question.results-card .leaderboard-row {
  background:#fff8c5;
  border-color:#000;
}

footer { padding:24px; color:var(--muted); text-align:center; }
.small { font-size:12px; color:var(--muted); }
.hidden { display:none; }

/* Slide-in menu */
.hamburger {
  appearance:none;
  border:0;
  background:rgba(79,70,229,0.12);
  cursor:pointer;
  padding:10px;
  border-radius:12px;
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  transition:background .2s ease, transform .18s ease;
}

.hamburger:focus { outline:none; box-shadow:0 0 0 3px rgba(79,70,229,0.25); }
.hamburger:hover { background:rgba(79,70,229,0.2); transform:translateY(-1px); }
.hamburger .bar { display:block; width:22px; height:2px; background:var(--primary); border-radius:2px; }

.drawer {
  position:fixed; inset:0; display:none; z-index:1000;
}
.drawer.open { display:block; }
.drawer-backdrop { position:absolute; inset:0; background:rgba(15,23,42,0.45); backdrop-filter:blur(4px); }
.drawer-panel {
  position:absolute; top:0; right:0; height:100%; width:300px; max-width:90vw;
  background:rgba(15,23,42,0.86);
  border-left:1px solid rgba(255,255,255,0.14);
  box-shadow:-12px 0 32px rgba(15,23,42,0.25);
  backdrop-filter:blur(18px);
  transform:translateX(100%);
  transition:transform .22s ease-out;
  padding:16px;
}
.drawer.open .drawer-panel { transform:translateX(0); }
.drawer h3 { margin:0 0 12px; font-size:18px; color:#fff; }
.drawer .menu a {
  display:block;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:16px;
  margin:8px 0;
  text-decoration:none;
  color:#E2E8F0;
  font-weight:600;
  font-size:16px;
  background:rgba(255,255,255,0.05);
  transition:background .18s ease, transform .18s ease;
}
.drawer .menu a:hover { background:rgba(255,255,255,0.12); transform:translateX(-2px); }
.drawer .menu a.primary { background:linear-gradient(135deg, var(--primary) 0%, var(--primary-alt) 100%); color:#fff; border-color:rgba(255,255,255,0.24); }

/* Drag-and-drop order items */
.dnd-list { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.dnd-item {
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-control);
  background:var(--surface-alt);
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:12px;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dnd-item .handle {
  cursor:grab;
  color:var(--muted);
}
.dnd-item:focus-within,
.dnd-item:hover {
  border-color:var(--primary);
  box-shadow:0 10px 24px rgba(15,23,42,0.12);
}
.dnd-item.dragging {
  opacity:.85;
  box-shadow:0 16px 36px rgba(15,23,42,0.18);
}
body[data-theme="dark"] .dnd-item {
  background:rgba(15,23,42,0.92);
  border-color:rgba(148,163,184,0.38);
  color:#e2e8f0;
  box-shadow:0 16px 34px rgba(2,6,23,0.58);
}
body[data-theme="dark"] .dnd-item:hover,
body[data-theme="dark"] .dnd-item:focus-within {
  border-color:rgba(129,140,248,0.7);
  box-shadow:0 18px 40px rgba(15,23,42,0.65);
}
body[data-theme="dark"] .dnd-item span,
body[data-theme="dark"] .dnd-item .handle { color:#e2e8f0; }
body[data-theme="hc"] .dnd-item {
  background:#fff9c4;
  border-color:#111;
  color:#000;
  box-shadow:none;
}

/* Touch fallback controls */
.reorder { margin-left:auto; display:flex; gap:12px; }
.btn, .btn-ghost { display:inline-flex; align-items:center; }
.btn-ghost {
  appearance:none;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--ink);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:16px;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-ghost:hover:not(:disabled),
.btn-ghost:focus-visible {
  background:var(--surface-alt);
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(79,70,229,0.18);
  outline:none;
}
.btn-ghost:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
body[data-theme="dark"] .btn-ghost {
  background:rgba(15,23,42,0.92);
  border-color:rgba(148,163,184,0.38);
  color:#e2e8f0;
}
body[data-theme="hc"] .btn-ghost {
  background:#fff;
  border-color:#000;
  color:#000;
}
.timer-card {
  margin-top:14px;
  padding:12px 14px;
  border:1px dashed var(--border, #d0d5dd);
  border-radius:var(--radius-control);
  background:rgba(148,163,184,0.08);
}
.timer-card .timer-toggle { display:flex; align-items:center; gap:8px; font-weight:600; }
.timer-config { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.timer-config input[type="number"] { max-width:160px; }
.muted { color:var(--muted, #64748b); }

/* Playful skin overrides */
body[data-skin="kids"] {
  --primary:#ff7a5a;
  --ink:#2c1b27;
  --bg:#fff5c7;
  --muted:#5f4b8b;
  --surface:#fff2b8;
  --surface-alt:#ffefad;
  --border:#2c1b27;
  --shadow:4px 4px 0 rgba(44,27,39,0.16);
  --radius-card:22px;
  --radius-control:18px;
  --font-body:'Short Stack','Comic Neue','Comic Sans MS','Trebuchet MS',sans-serif;
  --font-head:'Fredoka','Short Stack','Comic Sans MS','Trebuchet MS',sans-serif;
  --input-border:#2c1b27;
  --focus-ring:rgba(255,154,117,0.28);
  background:none;
}

body[data-theme="dark"] {
  --primary:#A855F7;
  --primary-alt:#6366F1;
  --accent:#06B6D4;
  --ink:#E2E8F0;
  --bg:#0F172A;
  --muted:#94A3B8;
  --surface:rgba(15,23,42,0.82);
  --surface-alt:rgba(30,41,59,0.94);
  --border:rgba(99,102,241,0.35);
  --shadow:0 24px 42px rgba(2,6,23,0.55);
  --input-border:rgba(148,163,184,0.35);
  --focus-ring:rgba(99,102,241,0.32);
}

body[data-theme="dark"][data-skin="kids"] {
  --primary:#F472B6;
  --ink:#FEFCE8;
  --bg:#111827;
  --muted:#FBCFE8;
  --surface:rgba(30,19,46,0.88);
  --surface-alt:rgba(43,27,61,0.94);
  --border:rgba(250,232,255,0.25);
  --shadow:0 0 0 rgba(0,0,0,0.4);
  --input-border:rgba(250,232,255,0.3);
  --focus-ring:rgba(236,72,153,0.35);
}

/* High contrast player theme */
body[data-theme="hc"] {
  --ink: rgba(0,0,0,0.8);
  --bg: #FFEDA9; /* pastel purple per brief */
  --surface: #FFEDA9;
  --surface-alt: #FFEDA9;
  --border: rgba(0,0,0,0.18);
  --shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Player question + answers styling */
.player-question {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px;
  margin-bottom: 12px;
  position:relative;
}
body[data-theme="hc"] .player-question { background:#F8FD89; }

.player-question.has-timer {
  padding-right: 110px;
  min-height: 116px;
}

.question-timer {
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.question-timer .timer-circle {
  --timer-color: var(--primary);
  width:74px;
  height:74px;
  border-radius:50%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#0f172a;
  background:conic-gradient(var(--timer-color) calc(var(--pct,100)*1%), rgba(148,163,184,0.25) 0);
  box-shadow:0 8px 18px rgba(15,23,42,0.18);
  transition:background .18s ease, transform .18s ease;
}
.question-timer .timer-circle::before{
  content:'';
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:var(--surface, #fff);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.question-timer .timer-circle span{
  position:relative;
  z-index:1;
  font-size:1.15rem;
}
.question-timer .timer-circle.warn{ --timer-color:#f59e0b; animation:pulseWarn 1s ease-in-out infinite; }
.question-timer .timer-circle.crit{ --timer-color:#ef4444; animation:pulseCrit 0.6s ease-in-out infinite; color:#111827; }
.question-timer .timer-meta { font-size:0.8rem; color:var(--muted, #64748b); display:block; font-weight:600; }
@keyframes pulseWarn{ 0%{ transform:scale(1);} 50%{ transform:scale(1.04);} 100%{ transform:scale(1);} }
@keyframes pulseCrit{ 0%{ transform:scale(1);} 50%{ transform:scale(1.06);} 100%{ transform:scale(1);} }
.order-disabled { opacity:0.7; pointer-events:none; }

.player-image { margin:8px 0 6px; }
.player-image img { max-width:100%; max-height:300px; border-radius:10px; border:1px solid var(--border); background:#fff; }

@media (max-width: 900px) {
  .player-question.has-timer {
    padding-right: 96px;
  }
}

@media (max-width: 640px) {
  .player-question.has-timer {
    padding-right: 16px;
    padding-top: 98px;
    min-height: 0;
  }
  .player-question.has-timer .question-timer {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

@media (max-width: 480px) {
  .question-timer .timer-circle {
    width:64px;
    height:64px;
  }
  .question-timer .timer-circle::before {
    inset:7px;
  }
  .question-timer .timer-circle span {
    font-size:1.05rem;
  }
}

body[data-theme="dark"] .question-timer .timer-circle {
  color:#e2e8f0;
  box-shadow:0 8px 18px rgba(2,6,23,0.42);
}
body[data-theme="dark"] .question-timer .timer-circle::before {
  background:rgba(15,23,42,0.92);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.28);
}
body[data-theme="dark"] .question-timer .timer-circle.crit {
  color:#f8fafc;
}
body[data-theme="dark"] .question-timer .timer-meta {
  color:rgba(226,232,240,0.78);
}

/* Host view (4:3 stage) */
body.host-view header { display:none; }
body.host-view .container.host-container { max-width:1280px; padding:0 24px; }
body.host-view .host-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
body.host-view .host-stage-card { display:flex; flex-direction:column; gap:24px; padding:24px; border-radius:24px; }
body.host-view .host-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
body.host-view .host-actions { display:flex; flex-wrap:wrap; gap:12px; }
body.host-view .host-actions button { font-size:1rem; padding:12px 18px; }
body.host-view .host-stage { position:relative; width:100%; }
.auto-advance-note { margin-top:8px; color:var(--muted, #64748b); }
body.host-view .auto-advance-note { color:rgba(226,232,240,0.85); }
body.host-view .host-stage::before { content:''; display:block; padding-top:56.25%; }
body.host-view .host-stage-inner { position:absolute; inset:0; border-radius:32px; border:1px solid rgba(255,255,255,0.18); background:linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(30,58,138,0.82) 45%, rgba(76,29,149,0.75) 100%); box-shadow:0 36px 110px rgba(15,23,42,0.45); display:flex; align-items:center; justify-content:center; padding:40px; text-align:left; overflow:hidden; }
body.host-view .host-stage-inner > * { max-width:100%; width:100%; }
body.host-view .host-stage-layout { display:flex; align-items:stretch; justify-content:space-between; gap:32px; width:100%; min-height:0; }
body.host-view .host-question-pane { flex:1 1 52%; background:rgba(17,24,39,0.55); border:1px solid rgba(255,255,255,0.12); border-radius:28px; padding:32px; display:flex; flex-direction:column; gap:22px; box-shadow:0 24px 60px rgba(15,23,42,0.35); backdrop-filter:blur(18px); color:#e2e8f0; }
body.host-view .host-question-header { display:flex; justify-content:flex-start; }
body.host-view .host-question-pane h3 { font-size:2.6rem; line-height:1.2; margin:0; }
body.host-view .host-question-pane .badge { font-size:1.05rem; padding:6px 20px; border-radius:999px; }
body.host-view .host-question-body { display:flex; flex-direction:column; gap:18px; }
body.host-view .host-question-body:empty { display:none; }
body.host-view .host-question-body .small { color:rgba(226,232,240,0.85); }
body.host-view .host-question-pane .answer-list { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); width:100%; }
body.host-view .host-question-pane .answer-chip { font-size:1.05rem; padding:15px 18px; border-radius:16px; }
body.host-view .host-media-pane { flex:1 1 48%; border-radius:28px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.04); backdrop-filter:blur(18px); display:flex; align-items:center; justify-content:center; padding:24px; position:relative; min-height:320px; box-shadow:0 32px 80px rgba(15,23,42,0.35); }
body.host-view .host-media-pane.has-media { background:rgba(8,13,27,0.6); }
body.host-view .host-media-content { width:100%; height:100%; display:block; object-fit:contain; border-radius:22px; box-shadow:0 30px 70px rgba(15,23,42,0.45); }
body.host-view .host-media-video { background:#000; }
body.host-view .host-media-image { background:rgba(255,255,255,0.92); padding:10px; }
body.host-view .host-media-placeholder { max-width:70%; text-align:center; color:rgba(226,232,240,0.75); font-size:1.1rem; }
body.host-view .host-wordcloud { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; color:#e2e8f0; }
body.host-view .host-wordcloud span { font-weight:700; text-shadow:0 6px 18px rgba(15,23,42,0.55); }
body.host-view .host-order { color:#e2e8f0; }
body.host-view .host-poll { display:flex; flex-direction:column; gap:14px; }
body.host-view .host-poll-row { display:grid; grid-template-columns:1fr; gap:6px; }
body.host-view .host-poll-label { font-weight:600; color:#e2e8f0; }
body.host-view .host-poll-bar { height:12px; border-radius:999px; background:rgba(148,163,184,0.25); overflow:hidden; }
body.host-view .host-poll-bar span { display:block; height:100%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-alt) 100%); }
body.host-view .host-poll-meta { color:rgba(226,232,240,0.85); }
body.host-view .host-waiting { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; font-size:1.15rem; width:100%; text-align:center; }
body.host-view .host-waiting .small { font-size:1rem; }
body.host-view .host-qr { width:380px; max-width:90%; height:auto; border-radius:20px; border:1px solid var(--border); background:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.08); }
body.host-view .pin { font-size:64px; letter-spacing:10px; }
body.host-view header h1 { font-size:28px; }
/* Floating hamburger (host) */
body.host-view .host-fab { position:fixed; top:14px; right:16px; z-index:1100; }

/* Slide/fade transitions for stage/area swaps */
.slide-fade-out-left { animation: gizmoSlideOutLeft .18s ease both; }
.slide-fade-out-right { animation: gizmoSlideOutRight .18s ease both; }
.slide-fade-in-left { animation: gizmoSlideInLeft .22s ease both; }
.slide-fade-in-right { animation: gizmoSlideInRight .22s ease both; }
@keyframes gizmoSlideOutLeft { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(-28px); } }
@keyframes gizmoSlideOutRight{ from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(28px); } }
@keyframes gizmoSlideInLeft  { from { opacity:0; transform:translateX(-28px);} to { opacity:1; transform:translateX(0);} }
@keyframes gizmoSlideInRight { from { opacity:0; transform:translateX(28px);} to { opacity:1; transform:translateX(0);} }

/* Host large timer overlay (timed questions) */
body.host-view .host-timer {
  position:absolute;
  top:20px;
  right:24px;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
body.host-view .host-timer .circle{
  --timer-color:#ffffff;
  width:110px; height:110px; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center; font-weight:900; color:#0f172a;
  background:conic-gradient(var(--timer-color) calc(var(--pct,100)*1%), rgba(255,255,255,0.15) 0);
  box-shadow:0 12px 28px rgba(0,0,0,0.45);
}
body.host-view .host-timer .circle::before{ content:''; position:absolute; inset:12px; border-radius:50%; background:rgba(255,255,255,0.95); box-shadow: inset 0 0 0 1px rgba(15,23,42,0.18); }
body.host-view .host-timer .circle span{ position:relative; z-index:1; font-size:1.4rem; }
body.host-view .host-timer .label{ color:rgba(226,232,240,0.9); text-shadow:0 1px 2px rgba(0,0,0,0.4); font-weight:700; }

/* Reveal button progress fill */
/* Progress fill using background-size so text never gets covered */
body.host-view .host-actions button.btn-progress{
  position:relative;
  color:#f8fafc; /* lighter label for stronger contrast */
  text-shadow:0 1px 2px rgba(0,0,0,0.45);
  background-color: rgba(255,255,255,0.08);
  background-image: linear-gradient(90deg, rgba(99,102,241,0.35) 0%, rgba(168,85,247,0.90) 100%);
  background-size: var(--fill, 0%) 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  transition: background-size .10s linear, color .15s ease;
}
body.host-view .host-actions button.allow-override{
  border-color: rgba(34,197,94,0.55);
  box-shadow: 0 0 0 2px rgba(34,197,94,0.18);
}
/* When almost full, switch to a dark label for contrast */
body.host-view .host-actions button.btn-progress.is-full {
  color:#0f172a;
  text-shadow:0 1px 1px rgba(255,255,255,0.55);
}
body.host-view .host-sidebar { position:sticky; top:32px; align-self:start; padding:24px; border-radius:24px; }
body.host-view .host-sidebar h3 { font-size:1.4rem; margin-bottom:12px; }
body.host-view .leaderboard-row { font-size:1rem; background:rgba(255,255,255,0.92); border-color:rgba(148,163,184,0.28); }
body.host-view .leaderboard-row.top-1 { border-color:rgba(79,70,229,0.35); }
body.host-view .leaderboard-empty { background:rgba(255,255,255,0.9); border-color:rgba(148,163,184,0.35); }
body.host-view[data-theme="dark"] .leaderboard-row {
  background:rgba(30,41,59,0.92);
  border-color:rgba(148,163,184,0.28);
  box-shadow:0 16px 36px rgba(2,6,23,0.55);
}
body.host-view[data-theme="dark"] .leaderboard-row.top-1 {
  box-shadow:0 20px 42px rgba(79,70,229,0.45);
}
body.host-view[data-theme="dark"] .leaderboard-bar { background:rgba(148,163,184,0.25); }
body.host-view[data-theme="dark"] .leaderboard-empty {
  background:rgba(30,41,59,0.9);
  border-color:rgba(148,163,184,0.3);
  color:rgba(226,232,240,0.75);
}
body.host-view[data-theme="hc"] .leaderboard-row {
  background:#fff8c5;
  border-color:#000;
  box-shadow:none;
}
body.host-view[data-theme="hc"] .leaderboard-bar { background:#fff; }
body.host-view[data-theme="hc"] .leaderboard-bar span { background:#2e7d32; }
body.host-view[data-theme="hc"] .leaderboard-empty {
  background:#fdf49e;
  border-color:#000;
  color:#000;
}
body.host-view #parts { margin:12px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:0.95rem; }
@media (max-width:1180px) {
  body.host-view .host-grid { grid-template-columns:1fr; }
  body.host-view .host-sidebar { position:static; order:-1; margin-bottom:16px; }
  body.host-view .host-stage-layout { flex-direction:column; }
  body.host-view .host-media-pane { min-height:260px; }
}
body.host-view .host-grid.no-sidebar { grid-template-columns:minmax(0,1fr); }
body.host-view .host-stage-layout.reveal-mode .host-question-pane { flex:1 1 74%; }
body.host-view .host-stage-layout.reveal-mode .host-media-pane { flex:0 0 22%; max-width:260px; min-height:200px; padding:16px; }
body.host-view .host-media-pane.compact { flex:0 0 22%; max-width:260px; min-height:200px; padding:16px; }
body.host-view .host-media-pane.compact .host-media-content { height:auto; max-height:220px; border-radius:18px; box-shadow:0 18px 45px rgba(15,23,42,0.35); }
body.host-view .host-media-pane.compact.has-media { background:rgba(8,13,27,0.7); }

/* No-media layout expands the question pane */
body.host-view .host-stage-layout.no-media { justify-content:center; }
body.host-view .host-stage-layout.no-media .host-question-pane { flex:1 1 100%; }

body.host-view[data-theme="light"] .host-stage-inner { background:linear-gradient(135deg, rgba(241,245,249,0.95) 0%, rgba(226,232,240,0.92) 45%, rgba(209,250,229,0.88) 100%); border:1px solid rgba(15,23,42,0.08); }
body.host-view[data-theme="light"] .host-question-pane { background:rgba(255,255,255,0.9); color:#0f172a; border:1px solid rgba(15,23,42,0.12); box-shadow:0 22px 48px rgba(15,23,42,0.18); }
body.host-view[data-theme="light"] .host-question-pane .badge { background:rgba(59,130,246,0.12); color:#1d4ed8; }
body.host-view[data-theme="light"] .host-question-pane .answer-chip { background:rgba(255,255,255,0.92); color:#0f172a; border-color:rgba(148,163,184,0.32); }
body.host-view[data-theme="light"] .host-question-pane .answer-chip.correct { background:linear-gradient(135deg,#4F46E5,#22D3EE); color:#fff; border-color:transparent; }
body.host-view[data-theme="dark"] .host-question-pane .answer-chip {
  background:rgba(15,23,42,0.82);
  border-color:rgba(148,163,184,0.28);
  color:#cbd5f5;
  box-shadow:0 18px 42px rgba(2,6,23,0.55);
}
body.host-view[data-theme="dark"] .host-question-pane .answer-chip.correct {
  background:linear-gradient(135deg,#7c3aed 0%,#22d3ee 100%);
  border-color:transparent;
  color:#f8fafc;
  box-shadow:0 22px 48px rgba(99,102,241,0.45);
}
body.host-view[data-theme="dark"] .host-question-pane .answer-chip.wrong {
  background:rgba(15,23,42,0.7);
  border-color:rgba(99,102,241,0.18);
  color:rgba(203,213,225,0.7);
}
body.host-view[data-theme="light"] .host-poll-bar { background:rgba(148,163,184,0.25); }
body.host-view[data-theme="light"] .host-poll-label,
body.host-view[data-theme="light"] .host-poll-meta,
body.host-view[data-theme="light"] .host-order,
body.host-view[data-theme="light"] .host-wordcloud span { color:#1f2937; text-shadow:none; }
body.host-view[data-theme="light"] .host-media-pane { background:rgba(255,255,255,0.78); border:1px solid rgba(148,163,184,0.35); }
body.host-view[data-theme="light"] .host-media-pane.has-media { background:rgba(255,255,255,0.92); }
body.host-view[data-theme="light"] .host-media-image { background:#fff; }
body.host-view[data-theme="light"] .host-media-placeholder { color:rgba(71,85,105,0.9); }

.answers { display:flex; flex-direction:column; gap:10px; }
.answers.two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.answer-btn {
  display:block;
  width:100%;
  padding:14px 16px;
  font-weight:700;
  font-size:18px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface-alt);
  color:var(--ink);
  position:relative;
  text-align:left;
  transition:background .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.answer-btn:hover:not(:disabled),
.answer-btn:focus-visible {
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(15,23,42,0.14);
}
.answer-btn:focus-visible {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(34,211,238,0.35), 0 12px 28px rgba(15,23,42,0.18);
}
.answer-btn.selected,
.answer-btn[aria-pressed="true"] {
  border-color:var(--primary);
  background:linear-gradient(135deg, rgba(79,70,229,0.14) 0%, rgba(124,58,237,0.1) 100%);
  box-shadow:0 0 0 3px rgba(79,70,229,0.24), 0 14px 34px rgba(79,70,229,0.2);
}
.answer-btn:disabled {
  opacity:0.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
body[data-theme="dark"] .answer-btn {
  background:rgba(30,41,59,0.94);
  border-color:rgba(148,163,184,0.32);
  box-shadow:0 12px 30px rgba(2,6,23,0.45);
}
body[data-theme="dark"] .answer-btn.selected,
body[data-theme="dark"] .answer-btn[aria-pressed="true"] {
  background:linear-gradient(135deg, rgba(99,102,241,0.28) 0%, rgba(168,85,247,0.24) 100%);
  box-shadow:0 0 0 3px rgba(129,140,248,0.4), 0 18px 38px rgba(15,23,42,0.6);
}
body[data-theme="hc"] .answer-btn {
  background:#A5F7E1;
  color:rgba(0,0,0,0.85);
  border:2px solid rgba(0,0,0,0.7);
  box-shadow:none;
}
body[data-theme="hc"] .answer-btn.selected,
body[data-theme="hc"] .answer-btn[aria-pressed="true"] {
  background:#2e7d32;
  color:#fff;
  border-color:#1b5e20;
  box-shadow:none;
}

/* High-contrast: clearer reveal colors */
body[data-theme="hc"] .answer-chip.correct {
  background:#2e7d32; /* stronger green for clarity */
  border-color:#2e7d32;
  color:#fff;
}
body[data-theme="hc"] .answer-chip.wrong {
  background:#e7e7e7; /* softer grey against pastel bg */
  border-color:#d0d0d0;
  color:rgba(0,0,0,0.8);
  opacity:1; /* keep readable but clearly muted by color */
}

/* Revealed styling for answers */
.answer-list { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.answer-chip {
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface-alt);
  color:var(--ink);
}
.answer-chip.correct { background:linear-gradient(135deg, var(--primary) 0%, var(--primary-alt) 100%); color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(79,70,229,0.25); }
.answer-chip.wrong { opacity:.6; }
body[data-theme="dark"] .answer-chip { background:rgba(30,41,59,0.9); color:#cbd5f5; border-color:rgba(148,163,184,0.28); }
body[data-theme="dark"] .answer-chip.correct {
  background:linear-gradient(135deg, #7c3aed 0%, #22d3ee 100%);
  color:#f8fafc;
  border-color:transparent;
  box-shadow:0 20px 46px rgba(79,70,229,0.45);
}
body[data-theme="dark"] .answer-chip.wrong {
  opacity:1;
  background:rgba(15,23,42,0.78);
  border-color:rgba(148,163,184,0.25);
  color:rgba(203,213,225,0.7);
}

.tf-grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 769px) {
  .tf-grid { max-width:520px; margin:0 auto; }
}

.order-hint { margin-top:8px; font-size:14px; color:var(--muted); }

/* Player drawer for appearance */
.player-drawer .menu { margin-top:6px; }
.player-drawer .menu label { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface-alt); cursor:pointer; }
.player-drawer .menu input[type=radio] { accent-color: var(--primary); }

body[data-skin="kids"] header,
body[data-skin="kids"] .card,
body[data-skin="kids"] .drawer-panel,
body[data-skin="kids"] .skin-toggle-bar {
  border:2px solid var(--border);
  box-shadow:var(--shadow);
}

body[data-skin="kids"] h1,
body[data-skin="kids"] h2,
body[data-skin="kids"] h3,
body[data-skin="kids"] h4 {
  letter-spacing:0.4px;
}

/* Confetti overlay (iMessage-like) */
.confetti-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5; /* keep below revealed content */
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -10vh;
  width: 10px;
  height: 14px;
  opacity: 0.9;
  border-radius: 2px;
  transform: translate3d(0, -100%, 0) rotate(0deg);
  animation-name: confetti-fall, confetti-spin;
  animation-timing-function: ease-in, linear;
  animation-iteration-count: 1, infinite;
}
@keyframes confetti-fall {
  0% { transform: translate3d(var(--x, 0px), -110%, 0) rotate(0deg); }
  100% { transform: translate3d(var(--xEnd, 0px), 110vh, 0) rotate(360deg); }
}
@keyframes confetti-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Emphasis ring around correct answer when revealed */
.answer-chip.correct.reveal-pulse {
  position: relative;
  z-index: 10; /* ensure above confetti */
  box-shadow: 0 0 0 0 rgba(34,211,238,0.6);
  animation: correctPulse 1.2s ease-out 2;
}
@keyframes correctPulse {
  0% { box-shadow: 0 0 0 0 rgba(34,211,238,0.55); }
  70% { box-shadow: 0 0 0 14px rgba(34,211,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}

/* Shake wrong selection subtly */
.answer-chip.wrong.selected {
  animation: wrongShake 320ms ease-in-out 1;
  border-color: rgba(220, 38, 38, 0.6);
}
@keyframes wrongShake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

body[data-skin="kids"] button,
body[data-skin="kids"] .btn {
  border:2px solid var(--border);
  border-radius:var(--radius-control);
  box-shadow:0 4px 0 rgba(44,27,39,0.18);
  font-weight:700;
  letter-spacing:0.3px;
}

body[data-skin="kids"] button:active,
body[data-skin="kids"] .btn:active {
  transform:translateY(2px);
  box-shadow:0 2px 0 rgba(44,27,39,0.18);
}

body[data-skin="kids"] .btn-secondary {
  background:#6b6dff;
  color:#fff;
  border-color:var(--border);
}

body[data-skin="kids"] .badge {
  background:#ffd972;
  color:var(--ink);
  border:2px solid var(--border);
  border-radius:18px;
  box-shadow:2px 3px 0 rgba(44,27,39,0.15);
}

body[data-skin="kids"] input[type=text],
body[data-skin="kids"] input[type=email],
body[data-skin="kids"] input[type=password],
body[data-skin="kids"] textarea,
body[data-skin="kids"] select,
body[data-skin="kids"] input[type=number] {
  border:2px solid var(--border);
  border-radius:var(--radius-control);
  box-shadow:3px 3px 0 rgba(44,27,39,0.1);
  background:#fffef8;
}

body[data-skin="kids"] input[type=text]:focus,
body[data-skin="kids"] input[type=email]:focus,
body[data-skin="kids"] input[type=password]:focus,
body[data-skin="kids"] textarea:focus,
body[data-skin="kids"] select:focus,
body[data-skin="kids"] input[type=number]:focus {
  box-shadow:0 0 0 4px rgba(255,154,117,0.2);
}

body[data-skin="kids"] .drawer .menu a {
  border:2px solid var(--border);
  box-shadow:3px 3px 0 rgba(44,27,39,0.15);
  background:#fffef5;
}

body[data-skin="kids"] .drawer .menu a.primary {
  background:#ffd972;
  color:var(--ink);
  border-color:var(--border);
  box-shadow:3px 3px 0 rgba(44,27,39,0.2);
}

body[data-skin="kids"] .hamburger .bar { background:var(--ink); height:3px; width:22px; }

/* Make appearance button match sketchbook controls */
body[data-skin="kids"] .appearance-trigger {
  border:2px solid var(--border);
  background:#fffef5;
  box-shadow:2px 2px 0 rgba(44,27,39,0.12);
  font-weight:700;
}

/* Dark variant: darker buttons/text on sketchbook dark */
body[data-theme="dark"][data-skin="kids"] .drawer .menu a,
body[data-theme="dark"][data-skin="kids"] .drawer .menu button,
body[data-theme="dark"][data-skin="kids"] .appearance-trigger {
  background:#2a2a2a;
  color:#fff5e8;
  border-color:var(--border);
}

body[data-skin="kids"] .dnd-item {
  border:2px dashed var(--border);
  background:#fffbed;
  box-shadow:3px 3px 0 rgba(44,27,39,0.12);
}

body[data-skin="kids"] .btn-ghost {
  border:2px solid var(--border);
  background:#fff6f0;
  box-shadow:2px 2px 0 rgba(44,27,39,0.12);
}

body[data-skin="kids"] .leaderboard-row {
  border:2px solid var(--border);
  background:#fff6f0;
  box-shadow:3px 3px 0 rgba(44,27,39,0.18);
}
body[data-skin="kids"] .leaderboard-row.top-1 {
  box-shadow:5px 5px 0 rgba(255,122,90,0.35);
}
body[data-skin="kids"] .leaderboard-rank {
  background:#ff9abb;
  color:#2c1b27;
}
body[data-skin="kids"] .leaderboard-bar {
  background:rgba(255,154,187,0.35);
}
body[data-skin="kids"] .leaderboard-bar span {
  background:linear-gradient(135deg,#ff7a5a,#ff9abb);
}
body[data-skin="kids"] .leaderboard-empty {
  background:#fffbe6;
  border:2px dashed var(--border);
  color:#2c1b27;
}

body[data-skin="kids"] footer,
body[data-skin="kids"] .small { color:rgba(47,32,56,0.8); }

body[data-theme="dark"] footer,
body[data-theme="dark"] .small { color:var(--muted); }

body[data-theme="dark"][data-skin="kids"] footer,
body[data-theme="dark"][data-skin="kids"] .small { color:rgba(255,245,232,0.75); }

.audio-toggle {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-alt);
  color:var(--ink);
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(15,23,42,0.16);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.audio-toggle .icon { font-size:18px; line-height:1; }
.audio-toggle:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(15,23,42,0.2); }
.audio-toggle:focus-visible {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(34,211,238,0.28), 0 12px 26px rgba(15,23,42,0.18);
}
.audio-toggle[data-muted="true"] {
  background:rgba(248,113,113,0.16);
  border-color:rgba(248,113,113,0.45);
  color:#b91c1c;
}
.audio-toggle[data-muted="true"] .icon { color:#ef4444; }
body[data-theme="dark"] .audio-toggle {
  background:rgba(30,41,59,0.94);
  border-color:rgba(148,163,184,0.32);
  box-shadow:0 18px 40px rgba(2,6,23,0.6);
}
body[data-theme="dark"] .audio-toggle[data-muted="true"] {
  background:rgba(239,68,68,0.15);
  border-color:rgba(248,113,113,0.6);
  color:#fecaca;
}
body[data-theme="hc"] .audio-toggle {
  background:#fff8c5;
  border:2px solid #000;
  color:#000;
  box-shadow:none;
}
body[data-theme="hc"] .audio-toggle[data-muted="true"] {
  background:#ffb4a2;
  color:#000;
}
.appearance-section .audio-toggle { margin-top:6px; }
.appearance-section .audio-toggle + .small { margin-top:6px; color:var(--muted); }

@media (max-width: 640px) {
  .card,
  .player-question,
  body.host-view .host-question-pane,
  body.host-view .host-media-pane,
  .drawer-panel {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  body[data-theme="light"] .card,
  body[data-theme="light"] .player-question,
  body[data-theme="light"] .host-question-pane,
  body[data-theme="light"] .host-media-pane,
  body[data-theme="light"] .drawer-panel {
    background:rgba(255,255,255,0.98);
  }
  body[data-theme="dark"] .card,
  body[data-theme="dark"] .player-question,
  body[data-theme="dark"] .host-question-pane,
  body[data-theme="dark"] .host-media-pane,
  body[data-theme="dark"] .drawer-panel {
    background:rgba(15,23,42,0.96);
    box-shadow:0 16px 32px rgba(2,6,23,0.65);
  }
  body[data-theme="hc"] .card,
  body[data-theme="hc"] .player-question,
  body[data-theme="hc"] .host-question-pane,
  body[data-theme="hc"] .host-media-pane,
  body[data-theme="hc"] .drawer-panel {
    background:#fdf49e;
  }
}

/* Drawer buttons */
.drawer .menu button {
  display:block;
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-control);
  margin:8px 0;
  text-align:left;
  background:var(--surface-alt);
  color:var(--ink);
  font-weight:600;
  font-size:16px;
  cursor:pointer;
}

.drawer .menu button:hover,
.drawer .menu button:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--focus-ring);
}

.drawer .menu button.primary {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

/* Appearance modal */
.appearance-modal {
  position:fixed;
  inset:0;
  display:none;
  z-index:1200;
}

.appearance-modal.open { display:block; }

.appearance-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
}

.appearance-dialog {
  position:relative;
  margin:6vh auto;
  max-width:420px;
  width:92vw;
  background:var(--surface);
  color:var(--ink);
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 12px 30px rgba(0,0,0,0.3);
  padding:20px 22px;
  outline:none;
}

.appearance-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.appearance-header h3 { margin:0; font-size:1.2rem; }

.appearance-close {
  appearance:none;
  border:0;
  background:transparent;
  font-size:1.6rem;
  color:var(--ink);
  cursor:pointer;
}

.appearance-body { display:flex; flex-direction:column; gap:18px; }

.appearance-section h4 {
  margin:0 0 8px;
  font-size:1rem;
}

.appearance-view-buttons,
.appearance-theme-buttons {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.appearance-btn {
  appearance:none;
  border:1px solid var(--border);
  background:var(--surface-alt);
  color:var(--ink);
  padding:8px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:600;
  transition:transform .1s ease, box-shadow .1s ease;
}

.appearance-btn.active,
.appearance-btn:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--focus-ring);
  outline:none;
}

.appearance-btn:disabled {
  opacity:0.6;
  cursor:not-allowed;
}

.appearance-view-disabled {
  padding:10px 12px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:var(--surface-alt);
  font-weight:600;
}

/* Cookie policy modal */
.cookie-policy-modal,
.gizmo-modal {
  position:fixed;
  inset:0;
  display:none;
  z-index:9999; /* ensure above any app chrome */
  align-items:center; /* center dialog vertically */
  justify-content:center; /* center dialog horizontally */
}

.cookie-policy-modal.open,
.gizmo-modal.open { display:flex; }

.cookie-policy-backdrop,
.gizmo-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:0;
}

.cookie-policy-dialog,
.gizmo-dialog {
  position:relative;
  margin:0;
  max-width:540px;
  width:92vw;
  max-height:90vh;
  overflow:auto;
  background:var(--surface);
  color:var(--ink);
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 12px 30px rgba(0,0,0,0.3);
  padding:22px 24px;
  outline:none;
  z-index:10000; /* above backdrop within modal */
}

.cookie-policy-dialog h3 { margin:0 0 10px; font-size:1.2rem; }
.cookie-policy-dialog p { margin:0 0 12px; line-height:1.55; }
.cookie-policy-dialog ul { margin:0 0 12px 20px; padding:0; }
.cookie-policy-dialog ul li { margin-bottom:8px; }

.cookie-policy-actions,
.gizmo-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

.cookie-policy-close,
.gizmo-close {
  appearance:none;
  border:1px solid var(--border);
  background:var(--surface-alt);
  color:var(--ink);
  padding:8px 12px;
  border-radius:var(--radius-control);
  cursor:pointer;
  font-weight:600;
}

.cookie-policy-close:hover,
.cookie-policy-close:focus,
.gizmo-close:hover,
.gizmo-close:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--focus-ring);
}

body[data-skin="kids"] code {
  background:#fff1d6;
  padding:2px 4px;
  border-radius:8px;
}
.appearance-trigger {
  appearance:none;
  border:1px solid var(--border);
  background:var(--surface-alt);
  color:var(--ink);
  padding:8px 12px;
  border-radius:var(--radius-control);
  font-weight:600;
  font-size:16px;
  font-family:var(--font-body);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.appearance-trigger:hover,
.appearance-trigger:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--focus-ring);
}