/* ==========================================================================
   FUN QUIZZES — shared track styling
   --------------------------------------------------------------------------
   One sheet for every Fun Quizzes category: Countries & Capitals, Flags,
   States & Capitals, Inventors & Discoverers, World History, Space &
   Astronomy, Nobel Prize Winners, and the Random Quiz builder.

   What is NOT here, deliberately: the quiz screen itself, the hint box,
   results and review. Those are shared with SAT, which pushes its questions
   into the same engine and renders on the same screen — moving them here
   would put competitive-exam styling in a file named for another track.
   They stay in style.css as shared engine chrome.

   A new Fun Quizzes category needs no new CSS; it inherits from
   `.fun-quiz-group` and the shared set/category chrome.
   ========================================================================== */

/* ==========================================================================
   The quiz-play chrome: sets grid, question card, answer area, hint box,
   controls, results and review. Moved here from style.css.

   This sheet is linked immediately after style.css, before the other track
   sheets, because every rule below started life in style.css and some are
   overridden by competitive-exams.css and coding-courses.css at equal
   specificity. Loading it later would silently flip those.
   ========================================================================== */

/* ─── Sets Screen ─────────────────────────────────────────────────────── */
.back-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 8px 0;
  margin-bottom: 8px;
  transition: color var(--transition);
}
.back-btn:hover { color: var(--accent); }

.sets-hero {
  padding: 20px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cat-hero-icon {
  min-width: 52px; height: 52px; padding: 0 10px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface2);
  color: var(--accent); font-size: .7rem; font-weight: 850; letter-spacing: .06em;
  align-self: flex-start;
  margin-bottom: 4px;
  line-height: 1;
}
.cat-hero-icon:has(.cat-hero-logo) { width: auto; height: auto; padding: 0; border: 0; background: transparent; }
.cat-hero-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.sets-hero h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
}

#sets-grid, #continents-grid, #extra-grid, #inventors-grid, #history-period-grid, #space-grid, #nobel-grid, #flags-mode-grid, #flags-cont-grid, #states-country-grid, #states-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 28px;
}

.set-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
  display: flex; flex-direction: column;
  gap: 4px;
  color: var(--text);
  font-family: inherit;
  box-shadow: var(--shadow-sm);
}

.set-card:hover {
  border-left-color: var(--card-accent, var(--accent));
  background: var(--surface2);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.set-card.selected {
  border-left-color: var(--card-accent, var(--accent));
  background: var(--surface);
  box-shadow: var(--shadow);
}
.set-card.selected .set-name { color: var(--card-accent, var(--accent)); }

.set-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 16%, var(--surface));
  color: var(--card-accent, var(--accent));
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
.set-name { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.set-count { font-size: 0.72rem; color: var(--text-muted); }

.start-btn-wrap { text-align: left; }

/* Buttons */
.btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 12px 28px;
  font-size: 0.93rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-primary:hover {
  background: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(212,98,26,0.25);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary.disabled, .btn-primary:disabled {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.6;
}
.btn-primary.disabled:hover, .btn-primary:disabled:hover {
  background: var(--border);
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: var(--surface2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-secondary:hover { color: var(--text); border-color: var(--accent); }


/* ─── Quiz topbar: back, breadcrumb, reset, timer ────────────────────── */
.quiz-topbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 8px; }
/* Back + breadcrumb shown when a quiz was launched from a course that has a
   navigable tree (SAT). Sits at the left; Reset/timer stay right. */
.quiz-trail { display: flex; align-items: center; gap: 14px; margin-right: auto; min-width: 0; }
.quiz-back-btn { margin-bottom: 0; padding-left: 0; padding-right: 0; flex: none; }
.quiz-crumbs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .quiz-trail { gap: 8px; }
  .quiz-trail .quiz-crumbs { display: none; }
}
.quiz-reset-btn {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); border-radius: 999px; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 0.82rem;
  padding: 6px 14px; transition: all var(--transition);
}
.quiz-reset-btn:hover { border-color: #c0392b; color: #c0392b; background: #fdecea; }

/* ─── Quiz Screen ─────────────────────────────────────────────────────── */
.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

#progress-text { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
#score-display {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.progress-bar {
  height: 4px;
  background: var(--border-light);
  border-radius: 99px;
  overflow: hidden;
  flex: 1;
}
#progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.4s ease;
  width: 0%;
}

/* Question Card */
.question-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.q-meta {
  display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
}

.q-category, .q-subject, .q-type {
  font-size: 0.67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 3px;
}

.q-category {
  background: rgba(0,0,0,0.05);
  color: var(--badge-color, var(--accent));
  border: 1px solid rgba(0,0,0,0.08);
}
/* Category brand colours (CATEGORIES[…].color) are chosen for the light
   background — several are deep navies/violets that all but vanish on the dark
   surface (Pandas #150458 lands at 1.04:1). Blend each toward the cream text
   colour so every badge clears AA without hand-picking a second palette. */
html[data-theme="dark"] .q-category {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: color-mix(in srgb, var(--badge-color, var(--accent)) 45%, #F1EADF);
}

.q-subject {
  background: var(--surface2);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}

.q-type {
  background: var(--surface2);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}

#q-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--text);
}

.blank {
  display: inline-block;
  min-width: 70px;
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
  margin: 0 3px;
  text-align: center;
}


/* ─── Answer Area ─────────────────────────────────────────────────────── */
.answer-area { margin-bottom: 12px; }
.answer-area.hidden { display: none !important; }

/* MCQ */
.answer-area.mcq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
@media (max-width: 480px) { .answer-area.mcq { grid-template-columns: 1fr; } }

.option-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  display: flex; align-items: center; gap: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.option-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-pale);
}
.option-btn.selected {
  border-color: var(--accent);
  background: var(--accent-pale);
}
.option-btn.correct {
  border-color: var(--success);
  background: var(--success-pale);
  color: var(--success);
}
.option-btn.wrong {
  border-color: var(--error);
  background: var(--error-pale);
  color: var(--error);
  opacity: 0.7;
}
.option-btn:disabled { cursor: default; }

.opt-label {
  min-width: 24px; height: 24px;
  background: var(--surface2);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
}
.option-btn.correct .opt-label {
  background: var(--success-pale);
  border-color: var(--success);
  color: var(--success);
}
.option-btn.wrong .opt-label {
  background: var(--error-pale);
  border-color: var(--error);
  color: var(--error);
}

.opt-text { flex: 1; line-height: 1.4; }

/* Flag question image (Guess by Flag) */
.q-flag-wrap {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}
.q-flag-img {
  width: 220px;
  max-width: 70%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}

/* Flag image options (Guess by Country) */
.answer-area.mcq-images {
  grid-template-columns: 1fr 1fr;
}
.option-btn-img {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.opt-flag {
  flex: 1;
  display: flex;
  justify-content: center;
}
.opt-flag img {
  width: 100%;
  max-height: 84px;
  object-fit: contain;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--surface);
}

/* Flag thumbnails in the results review */
.review-flag-img {
  height: 22px;
  width: auto;
  vertical-align: middle;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  margin-top: 4px;
}

/* Fun Quizzes landing — compact, friendly, and intentionally understated. */
.fun-quiz-group .sets-hero {
  display: grid;
  grid-template-columns: 74px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 18px;
  padding: 18px 0 24px;
}

/* Coding directory uses the same compact horizontal card rhythm as quizzes. */
.coding-group .sets-hero,
.school-group .sets-hero {
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:18px;
  padding:18px 0 24px;
}
.coding-group .sets-hero .cat-hero-icon,
.school-group .sets-hero .cat-hero-icon {
  grid-row:1 / 3;
  align-self:center;
  margin:0;
}
.coding-group .sets-hero .cat-hero-logo,
.school-group .sets-hero .cat-hero-logo {
  width:68px;
  height:68px;
}
.coding-group .sets-hero h2,
.school-group .sets-hero h2 {
  align-self:end;
  font-size:2rem;
  line-height:1.15;
}
.coding-group .sets-hero .hero-sub,
.school-group .sets-hero .hero-sub {
  align-self:start;
  max-width:none;
  color:var(--text-muted);
}
.coding-group #group-section-title { margin-bottom:13px; }
.coding-group #group-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
.coding-group #group-grid .category-card {
  min-height:108px;
  padding:15px 16px;
  flex-direction:row;
  justify-content:flex-start;
  gap:13px;
  text-align:left;
  border-top-width:1px;
  box-shadow:none;
}
.coding-group #group-grid .category-card:hover {
  transform:translateY(-1px);
  border-color:var(--cat-color);
}
.coding-group #group-grid .cat-icon-img,
.coding-group #group-grid .cat-icon {
  width:52px;
  height:52px;
  flex:0 0 52px;
  object-fit:contain;
}
.coding-group #group-grid .cat-info {
  min-width:0;
  align-items:flex-start;
  text-align:left;
}
.coding-group #group-grid .cat-name {
  font-size:.9rem;
  font-weight:700;
  line-height:1.25;
}
.coding-group #group-grid .cat-count {
  color:var(--cat-color);
  font-weight:600;
  line-height:1.4;
}
@media (max-width:760px) {
  .coding-group #group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:500px) {
  .coding-group .sets-hero,
  .school-group .sets-hero {
    grid-template-columns:60px minmax(0,1fr);
    column-gap:13px;
  }
  .coding-group .sets-hero .cat-hero-logo,
  .school-group .sets-hero .cat-hero-logo {
    width:56px;
    height:56px;
  }
  .coding-group .sets-hero h2,
  .school-group .sets-hero h2 { font-size:1.65rem; }
  .coding-group #group-grid { grid-template-columns:1fr; }
}

.school-group #group-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
.school-group #group-grid .category-card {
  width:100%;
  min-width:0;
}
@media (max-width:760px) {
  .school-group #group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:500px) {
  .school-group #group-grid { grid-template-columns:1fr; }
}


/* ─── Hint Box ────────────────────────────────────────────────────────── */
#hint-box {
  background: var(--warn-pale);
  border: 1px solid rgba(168,96,16,0.25);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 12px;
  display: none;
  flex-direction: column;
  gap: 6px;
  animation: slideDown 0.2s ease;
}
#hint-box.show { display: flex; }

.hint-top { display: flex; align-items: center; gap: 7px; }

.hint-icon { font-size: 0.95rem; flex-shrink: 0; }
.hint-label {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--warn);
}

#hint-text {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.55;
  padding-left: 24px;
}

.answer-reveal {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--success-pale);
  border: 1px solid rgba(45,107,60,0.25);
  border-radius: var(--radius);
  margin-top: 4px;
  animation: slideDown 0.2s ease;
}
.answer-reveal.show { display: flex; }

.answer-reveal-label {
  font-size: 0.73rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--success);
  white-space: nowrap;
}

.answer-reveal strong {
  font-size: 0.93rem;
  color: var(--success);
  font-weight: 700;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ─── Quiz Controls ───────────────────────────────────────────────────── */
.quiz-controls {
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
}

#mic-btn, #read-btn {
  display: flex; align-items: center; gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 13px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
#mic-btn:hover { border-color: var(--accent); color: var(--accent); }
#read-btn:hover { border-color: var(--info); color: var(--info); }

#mic-btn.listening {
  border-color: var(--error);
  background: var(--error-pale);
  color: var(--error);
  animation: pulse 1s infinite;
}
.mic-icon { font-size: 0.9rem; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,48,48,0.25); }
  50%       { box-shadow: 0 0 0 4px rgba(184,48,48,0); }
}

.btn-show-answer {
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 8px 13px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-show-answer:hover {
  border-color: var(--warn);
  color: var(--warn);
  background: var(--warn-pale);
  border-style: solid;
}

#skip-btn { margin-left: auto; }

#quit-btn {
  display: flex; align-items: center; gap: 4px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition);
}
#quit-btn:hover { border-color: var(--error); color: var(--error); }


/* ─── Results Screen ──────────────────────────────────────────────────── */
.results-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--shadow);
  max-width: 440px;
  margin: 36px auto 0;
}

.score-ring-wrap {
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.score-ring { transform: rotate(-90deg); }
.score-ring-bg { fill: none; stroke: var(--border-light); stroke-width: 7; }
.score-ring-fill {
  fill: none;
  stroke: url(#ring-grad);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1);
  stroke-dasharray: 339.29;
  stroke-dashoffset: 339.29;
}

.score-ring-text {
  position: absolute;
  inset: 0; display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}

#result-score {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
#result-pct {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
  margin-top: 2px;
}

.results-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
#result-msg {
  color: var(--text-muted);
  margin-bottom: 24px;
  font-size: 0.93rem;
}

.breakdown {
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 24px;
  text-align: left;
}

/* Pie Chart */
.pie-chart-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 10px 0;
}

#pie-chart {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text);
}

.pie-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pie-label {
  color: var(--text-muted);
  min-width: 80px;
}

.results-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-accent {
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  width: 100%;
}
.btn-accent:hover { background: #B84F14; }


/* ─── Review List ─────────────────────────────────────────────────── */
.review-list {
  margin-top: 20px;
  text-align: left;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.review-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.85rem;
}
.review-row:last-child { border-bottom: none; }

.review-correct  { background: #f0fdf4; }
.review-second   { background: #fffbeb; }
.review-wrong    { background: #fef2f2; }
.review-skipped  { background: #f8fafc; }

.review-q-num {
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.review-q-body { flex: 1; min-width: 0; }

.review-q-text {
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 4px;
}

.review-q-answer {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.review-q-answer strong { color: var(--text); }

.review-badge {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 500px) {
  .review-row { flex-wrap: wrap; gap: 6px; }
  .review-badge { width: 100%; text-align: right; }
}






/* ─── Random Quiz ─────────────────────────────────────────────────── */
.group-random-host:empty { display: none; }
.group-random-host { margin: 4px 0 22px; }

.rq-big-box {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light, var(--accent)));
  color: #fff;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  transition: transform 0.15s, box-shadow 0.15s;
}
.rq-big-box:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.2); }
.rq-big-icon {
  width: 46px; height: 46px; display: grid; place-items: center; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.45); border-radius: 13px;
  background: rgba(255,255,255,.16); font-size: .72rem; font-weight: 800; letter-spacing: .06em;
}
.rq-big-icon img {
  display: block; width: 42px; height: 42px; object-fit: contain;
}
.rq-big-body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.rq-big-title { font-size: 1.15rem; font-weight: 700; font-family: 'Playfair Display', serif; }
.rq-big-sub { font-size: 0.85rem; opacity: 0.92; }
.rq-big-arrow { font-size: 1.6rem; opacity: 0.8; flex-shrink: 0; }
.fun-quiz-group .sets-hero .cat-hero-icon {
  grid-row: 1 / 3; align-self:center; margin:0;
}
.fun-quiz-group .sets-hero .cat-hero-logo { width:68px; height:68px; }
.fun-quiz-group .sets-hero h2 {
  align-self:end; font-size:2rem; line-height:1.15;
}
.fun-quiz-group .sets-hero .hero-sub {
  align-self:start; max-width:none; color:var(--text-muted);
}
.fun-quiz-group .group-random-host { margin:0 0 26px; }
.fun-quiz-group .rq-big-box {
  padding:18px 22px;
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg,var(--accent),#E67E22);
  color:#fff;
  box-shadow:0 6px 20px rgba(212,98,26,.28);
}
.fun-quiz-group .rq-big-box:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(212,98,26,.36);
}
.fun-quiz-group .rq-big-icon {
  width:50px; height:50px;
  border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.16);
}
.fun-quiz-group .rq-big-icon img { width:43px; height:43px; }
.fun-quiz-group .rq-big-title {
  color:#fff; font-family:'DM Sans',sans-serif; font-size:1rem;
}
.fun-quiz-group .rq-big-sub { color:#fff; font-size:.78rem; opacity:.9; }
.fun-quiz-group .rq-big-arrow { color:#fff; }
.fun-quiz-group #group-section-title { margin-bottom:13px; }
.fun-quiz-group #group-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
.fun-quiz-group #group-grid .category-card {
  min-height:108px;
  padding:15px 16px;
  flex-direction:row;
  justify-content:flex-start;
  gap:13px;
  text-align:left;
  border-top-width:1px;
  box-shadow:none;
}
.fun-quiz-group #group-grid .category-card:hover {
  transform:translateY(-1px);
  border-color:var(--cat-color);
}
.fun-quiz-group #group-grid .cat-icon-img,
.fun-quiz-group #group-grid .cat-icon {
  width:52px; height:52px; flex:0 0 52px;
}
.fun-quiz-group #group-grid .cat-info { align-items:flex-start; text-align:left; }
.fun-quiz-group #group-grid .cat-name { font-size:.9rem; font-weight:700; line-height:1.25; }
.fun-quiz-group #group-grid .cat-count { color:var(--cat-color); font-weight:600; }
@media (max-width:760px) {
  .fun-quiz-group #group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media (max-width:500px) {
  .fun-quiz-group .sets-hero { grid-template-columns:60px minmax(0,1fr); column-gap:13px; }
  .fun-quiz-group .sets-hero .cat-hero-logo { width:56px; height:56px; }
  .fun-quiz-group .sets-hero h2 { font-size:1.65rem; }
  .fun-quiz-group #group-grid { grid-template-columns:1fr; }}

.rq-config { display: flex; flex-direction: column; gap: 18px; max-width: 100%; }
.rq-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.rq-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rq-section-title { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.rq-selected-count { font-size: 0.8rem; color: var(--accent); font-weight: 600; }

.rq-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.rq-mini-btn {
  font-size: 0.78rem; font-weight: 600; font-family: inherit;
  padding: 5px 12px; border-radius: 20px; cursor: pointer;
  background: var(--accent-pale); color: var(--accent); border: 1px solid var(--border-light);
}
.rq-mini-btn:hover { background: rgba(212,98,26,0.15); }

.rq-tree { max-height: 340px; overflow-y: auto; }
.rq-row { display: flex; align-items: center; gap: 4px; padding: 3px 0; }
.rq-toggle, .rq-toggle-spacer {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.8rem; font-family: inherit;
}
.rq-toggle:hover { color: var(--accent); }
.rq-check { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; font-size: 0.9rem; }
.rq-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.rq-check-label { flex: 1; color: var(--text); }
.rq-count {
  font-size: 0.72rem; color: var(--text-muted);
  background: var(--surface2); border-radius: 10px; padding: 1px 8px;
}

.rq-notimer { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9rem; color: var(--text); margin-bottom: 10px; }
.rq-notimer input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.rq-notimer:has(input:not(:checked)) { margin-bottom: 12px; }

.rq-field { display: flex; align-items: center; gap: 10px; }
.rq-field input {
  width: 110px; padding: 9px 12px; font-size: 0.95rem; font-family: inherit;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
}
.rq-field input:focus { outline: none; border-color: var(--accent); }
.rq-field-hint { font-size: 0.82rem; color: var(--text-muted); }

.rq-start-btn { align-self: flex-start; padding: 12px 26px; font-size: 1rem; }

/* ─── Responsive ──────────────────────────────────────────────────────── */
/* This lived in style.css, which loads BEFORE this file — so once the base
   .results-card moved here it started winning the tie and the mobile padding
   silently stopped applying. It has to sit after the base, in the same file. */
@media (max-width: 480px) {
  .results-card { padding: 28px 20px; }
}