/* ========================================================================
   FunQuiz Hub — design system
   Soft pastel palette, mobile-first, cards-heavy. One file, no framework.
   ======================================================================== */

:root {
  --c-bg: #fdfbff;
  --c-surface: #ffffff;
  --c-surface-2: #f6f1fb;
  --c-cream: #fff8ee;
  --c-pink: #ffd6e7;
  --c-pink-strong: #ff5a8a;
  --c-purple: #c9b8ff;
  --c-purple-strong: #7b5dff;
  --c-blue: #cfe6ff;
  --c-blue-strong: #4b8bff;
  --c-text: #1f1735;
  --c-text-soft: #59506e;
  --c-text-mute: #8c84a0;
  --c-border: #ece6f5;
  --c-border-strong: #d8d0e6;
  --c-success: #2dbf85;
  --c-warn: #f6a623;
  --shadow-sm: 0 1px 2px rgba(31, 23, 53, 0.06);
  --shadow-md: 0 6px 18px rgba(123, 93, 255, 0.10);
  --shadow-lg: 0 16px 40px rgba(123, 93, 255, 0.18);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --space-xs: 6px;
  --space-sm: 10px;
  --space: 16px;
  --space-md: 22px;
  --space-lg: 32px;
  --container: 1200px;
  --header-h: 60px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--c-purple-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 16px; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--space) 0; color: var(--c-text); font-weight: 700; }
h1 { font-size: 26px; letter-spacing: -0.01em; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
p { margin: 0 0 var(--space); color: var(--c-text-soft); }
small { color: var(--c-text-mute); font-size: 13px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--space);
  padding-right: var(--space);
}

.section { padding: var(--space-lg) 0; }
.section-tight { padding: var(--space-md) 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space); margin-bottom: var(--space); }
.section-head h2 { margin: 0; }
.section-head a { font-size: 14px; font-weight: 600; }

/* Centred, gradient section title — the reference layout leads every band with
   one of these instead of a left-aligned heading. */
.section-head.is-center { flex-direction: column; align-items: center; gap: 6px; text-align: center; margin-bottom: var(--space-md); }
.section-head.is-center h2 {
  font-size: 24px; letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--c-pink-strong), var(--c-purple-strong));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Full-bleed tinted band behind alternating sections, so long card grids read
   as separate shelves rather than one endless wall. */
.section-band {
  background: linear-gradient(180deg, #f7f2ff 0%, #fdf6fb 100%);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  margin: var(--space-md) 0;
}
.section-band > .container > .section { padding-top: var(--space-md); padding-bottom: var(--space-md); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 251, 255, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--c-border);
}
.header-inner {
  display: flex; align-items: center; gap: var(--space);
  height: var(--header-h);
}
.logo {
  font-weight: 800; font-size: 20px; color: var(--c-text);
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px;
}
.logo-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--c-pink-strong), var(--c-purple-strong));
  display: inline-block;
}
.logo:hover { text-decoration: none; }
.nav-desktop { display: none; flex: 1; gap: 4px; margin-left: var(--space-md); }
.nav-desktop a {
  color: var(--c-text-soft); font-weight: 500; font-size: 14px;
  padding: 8px 12px; border-radius: var(--radius-pill);
}
.nav-desktop a:hover { background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.nav-desktop a.is-active { background: var(--c-surface-2); color: var(--c-purple-strong); }

/* "More" dropdown — nine categories in a row pushed the header into a wall of
   links, so only the top few stay inline and the tail folds in here. */
.nav-more { position: relative; }
.nav-more-btn {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--c-text-soft); font-weight: 500; font-size: 14px;
  padding: 8px 12px; border: 0; border-radius: var(--radius-pill);
  background: transparent;
}
.nav-more-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-more-btn svg { transition: transform .18s ease; }
.nav-more.is-open .nav-more-btn { background: var(--c-surface-2); color: var(--c-text); }
.nav-more.is-open .nav-more-btn svg { transform: rotate(180deg); }
.nav-more-btn.is-active { background: var(--c-surface-2); color: var(--c-purple-strong); }
.nav-more-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 190px; padding: 6px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  display: none; flex-direction: column; gap: 2px;
  z-index: 60;
}
/* Bridge the 8px gap between the button and the menu. Without it the pointer
   passes through dead space on the way down, :hover drops, and the menu closes
   before it can be reached — the dropdown was effectively unusable by mouse. */
.nav-more-menu::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -10px; height: 10px;
}
/* Click-toggle is in site.js; hover/focus-within keep the menu reachable with
   no JS and by keyboard alone. */
.nav-more.is-open .nav-more-menu,
.nav-more:hover .nav-more-menu,
.nav-more:focus-within .nav-more-menu { display: flex; }
.nav-more-menu a {
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; color: var(--c-text-soft);
}
.nav-more-menu a:hover { background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.nav-more-menu a.is-active { color: var(--c-purple-strong); background: var(--c-surface-2); }
.nav-more-menu hr { border: 0; border-top: 1px solid var(--c-border); margin: 4px 6px; }

.header-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--c-border); border-radius: var(--radius-pill);
  background: var(--c-surface); color: var(--c-text);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.icon-btn:hover { background: var(--c-surface-2); }
.lang-switch {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--c-border); border-radius: var(--radius-pill);
  background: var(--c-surface); padding: 4px;
}
.lang-switch a {
  font-size: 12px; font-weight: 700; color: var(--c-text-soft);
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.lang-switch a.is-active { background: var(--c-purple-strong); color: #fff; }
.lang-switch a:hover { text-decoration: none; }

/* ---------- Mobile drawer ---------- */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(31, 23, 53, 0.4);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  z-index: 90;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(86vw, 320px); background: var(--c-surface);
  z-index: 100; transform: translateX(100%);
  transition: transform .25s ease;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.drawer.is-open { transform: translateX(0); }
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer-head {
  padding: var(--space); display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--c-border);
}
.drawer-nav { padding: var(--space-sm); display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.drawer-nav a {
  color: var(--c-text); font-weight: 500; font-size: 16px;
  padding: 12px 14px; border-radius: var(--radius-md);
}
.drawer-nav a:hover { background: var(--c-surface-2); text-decoration: none; }
.drawer-label {
  padding: 14px 14px 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-mute);
}

/* ---------- Hero ---------- */
.hero {
  margin-top: var(--space);
  padding: var(--space-md) var(--space);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 80% 0%, var(--c-pink) 0%, transparent 50%),
    radial-gradient(circle at 0% 80%, var(--c-blue) 0%, transparent 50%),
    linear-gradient(135deg, #fff 0%, var(--c-surface-2) 100%);
  text-align: center;
}
.hero h1 {
  font-size: 30px; line-height: 1.15;
  background: linear-gradient(135deg, var(--c-pink-strong), var(--c-purple-strong));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: var(--space-sm);
}
.hero p { color: var(--c-text-soft); font-size: 15px; max-width: 560px; margin: 0 auto var(--space); }
.hero .cta-row { display: flex; justify-content: center; gap: var(--space-sm); flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; line-height: 1;
  padding: 14px 22px; border-radius: var(--radius-pill);
  border: 1px solid transparent; transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(135deg, var(--c-pink-strong), var(--c-purple-strong));
  color: #fff; box-shadow: var(--shadow-md);
}
.btn-primary:hover { box-shadow: var(--shadow-lg); }

/* Quiz play "View My Result" — gentle pulse the moment it becomes enabled,
   then a calm idle glow so the user notices the button is now actionable. */
.btn-primary.is-ready {
  animation: cta-pop .9s ease-out 1, cta-glow 2.4s ease-in-out infinite;
}
@keyframes cta-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.05); }
  60%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(123, 93, 255, 0.18); }
  50%      { box-shadow: 0 10px 28px rgba(255, 90, 138, 0.42); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary.is-ready { animation: none; }
}
.btn-secondary {
  background: var(--c-surface); color: var(--c-text);
  border-color: var(--c-border-strong);
}
.btn-secondary:hover { background: var(--c-surface-2); }
.btn-ghost { background: transparent; color: var(--c-purple-strong); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 26px; font-size: 16px; }

/* ---------- Tags / chips ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  background: var(--c-surface-2); color: var(--c-text-soft);
  border-radius: var(--radius-pill);
}
.tag-pop { background: var(--c-pink); color: #b32762; }
.tag-purple { background: #e9e1ff; color: #5c3fd9; }
.tag-blue { background: var(--c-blue); color: #1f5fbf; }
.tag-cream { background: var(--c-cream); color: #a26a17; }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.chip-row { display: flex; gap: var(--space-xs); overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 8px 14px; border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text-soft);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; cursor: pointer;
  text-decoration: none;
}
.chip:hover { background: var(--c-surface-2); text-decoration: none; }
.chip.is-active { background: var(--c-purple-strong); color: #fff; border-color: transparent; }

/* ---------- Quiz card ----------
   Poster-first card, modelled on the reference layout in `ref/`: a 16:9 cover
   doing all the selling, and a bold title underneath. No description, no meta
   row, no category badge — in a dense grid the extra text only competes with
   the artwork and drags the cards taller than a screen. */
.grid {
  display: grid; gap: var(--space);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-1 { grid-template-columns: 1fr; }

/* Vertical stack — used inside narrow asides where .grid breakpoints would split too aggressively */
.stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.stack .quiz-card { width: 100%; }

/* In a ~300px rail the poster card wastes the whole column on art, so the
   aside flips to a compact row: thumbnail left, title right. */
.stack .quiz-card { flex-direction: row; align-items: stretch; }
.stack .quiz-card .cover { flex: 0 0 116px; width: 116px; aspect-ratio: 4 / 3; }
.stack .quiz-card .body { padding: 10px 12px; justify-content: center; }
.stack .quiz-card h3 { font-size: 14px; -webkit-line-clamp: 3; }

.quiz-card {
  background: var(--c-surface); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border);
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .2s ease;
  text-decoration: none; color: inherit;
}
.quiz-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.quiz-card .cover {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--c-purple), var(--c-pink));
  position: relative; overflow: hidden;
}
.quiz-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.quiz-card .body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.quiz-card h3 {
  font-size: 15px; line-height: 1.35; margin: 0; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.quiz-card:hover h3 { color: var(--c-purple-strong); }

/* ---------- Quiz intro ---------- */
.intro-hero {
  background: var(--c-surface); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  margin-top: var(--space);
}
.intro-hero .cover {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--c-purple), var(--c-pink));
}
.intro-hero .cover img { width: 100%; height: 100%; object-fit: cover; }
.intro-body { padding: var(--space-md); }
.intro-body h1 { font-size: 24px; margin-bottom: var(--space-sm); }
.intro-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--space-sm) 0 var(--space); }
.intro-meta .meta-item {
  background: var(--c-surface-2); border-radius: var(--radius-pill);
  padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--c-text-soft);
  display: inline-flex; align-items: center; gap: 4px;
}

.seo-block { margin-top: var(--space-md); }
.seo-block h2 { font-size: 18px; margin-bottom: var(--space-sm); }
.seo-block p { font-size: 14px; }
.seo-block ul { padding-left: 20px; }
.seo-block li { color: var(--c-text-soft); font-size: 14px; margin-bottom: 4px; }

/* Sticky CTA bar (mobile) */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px var(--space) calc(10px + env(safe-area-inset-bottom));
  background: rgba(253, 251, 255, 0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-border);
  display: flex; gap: 10px;
}
.sticky-cta .btn { flex: 1; }
.with-sticky-cta { padding-bottom: 90px; }

/* ---------- Quiz play ---------- */
.progress-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: var(--space) 0;
}
.progress-text { font-size: 13px; color: var(--c-text-soft); font-weight: 600; white-space: nowrap; }
.progress-bar { flex: 1; height: 8px; background: var(--c-surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--c-pink-strong), var(--c-purple-strong));
  transition: width .3s ease;
}

.question-card {
  background: var(--c-surface); border-radius: var(--radius-lg);
  padding: var(--space);
  box-shadow: var(--shadow-sm);
}
.question-card h2 { font-size: 18px; margin-bottom: 10px; }
.question-card .qnum {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--c-purple-strong);
  background: var(--c-surface-2); padding: 4px 10px;
  border-radius: var(--radius-pill); margin-bottom: 6px;
}

/* All-questions-on-one-page layout: locked blocks visibly gray out + freeze input.
   A translucent overlay sits ABOVE the card so the gray is unmistakable, with a
   lock icon top-right. backdrop-filter falls back gracefully where unsupported. */
.question-block { position: relative; margin-bottom: var(--space); transition: filter .3s ease; }
.question-block.is-locked { pointer-events: none; user-select: none; }
.question-block.is-locked .question-card { filter: grayscale(80%); }
.question-block.is-locked::after {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  background: rgba(246, 241, 251, 0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 2;
}
.lock-badge {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-text-mute); color: #fff;
  display: none; align-items: center; justify-content: center;
  z-index: 3; box-shadow: var(--shadow-sm);
}
.question-block.is-locked .lock-badge { display: flex; }

.answers { display: grid; grid-template-columns: repeat(var(--answer-cols, 2), minmax(0, 1fr)); gap: var(--space-sm); }

/* "Pick one of these pictures" questions: the image IS the answer, so the tile
   is edge-to-edge art with a numbered badge and no min-height floor. */
.answers.is-picker { gap: 8px; }
.answer.is-picker { padding: 0; min-height: 0; border-width: 3px; overflow: hidden; gap: 0; }
.answer.is-picker .answer-img { aspect-ratio: 1 / 1; border-radius: 0; position: relative; }
.answer.is-picker .answer-num {
  position: absolute; top: 6px; left: 6px;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  background: var(--c-purple-strong); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; line-height: 1;
  border: 2px solid #fff; box-shadow: var(--shadow-sm);
}
.answer.is-picker .answer-text {
  display: block; padding: 7px 8px; text-align: center;
  font-size: 12px; font-weight: 700;
}
.answer.is-picker.is-selected { transform: scale(1.04); }
.answer {
  position: relative;
  background: var(--c-surface); border: 2px solid var(--c-border);
  border-radius: var(--radius-md); padding: 12px;
  text-align: left; cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  /* The column layout exists for picture options (art on top, label under). A
     plain text answer has nothing to stack, so it was pinned to the top of an
     88px box and left ~50px of dead space underneath each button. Centre it and
     let the box shrink to the text. */
  min-height: 0;
}
.answer:not(.is-picker) { padding: 14px 12px; }
.answer:hover { background: var(--c-surface-2); }
.answer.is-selected {
  border-color: var(--c-purple-strong);
  background: linear-gradient(135deg, #f6f0ff, #fff5fa);
  transform: scale(1.02);
}
.answer .answer-img {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--c-blue), var(--c-purple));
  overflow: hidden;
}
.answer .answer-img img { width: 100%; height: 100%; object-fit: cover; }
.answer .answer-text { font-size: 14px; font-weight: 600; color: var(--c-text); line-height: 1.35; }
.answer .check {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-purple-strong); color: #fff;
  display: none; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.answer.is-selected .check { display: inline-flex; }

.play-actions { display: flex; gap: 10px; margin-top: var(--space); }

/* ---------- Result ---------- */
.result-loading {
  text-align: center; padding: var(--space-lg) var(--space);
}
.result-loading .spinner {
  width: 48px; height: 48px; margin: 0 auto var(--space);
  border-radius: 50%;
  border: 4px solid var(--c-surface-2); border-top-color: var(--c-purple-strong);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.result-card {
  background: var(--c-surface); border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.result-card .result-image {
  aspect-ratio: 1 / 1; max-width: 220px; margin: 0 auto var(--space);
  border-radius: var(--radius-md); overflow: hidden;
  background: linear-gradient(135deg, var(--c-pink), var(--c-purple));
}
.result-card .result-image img { width: 100%; height: 100%; object-fit: cover; }
.result-card h1 { font-size: 24px; }
.result-card .result-tag {
  display: inline-block; background: var(--c-surface-2);
  color: var(--c-purple-strong); font-weight: 700; font-size: 12px;
  padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: 8px;
}
.result-card p { text-align: left; }

.scores { margin-top: var(--space); }
.score-row { margin-bottom: var(--space-sm); }
.score-row .label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 600; color: var(--c-text-soft); margin-bottom: 4px;
}
.score-row .label b { color: var(--c-text); }
.score-row .bar { height: 8px; background: var(--c-surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.score-row .fill { height: 100%; background: linear-gradient(90deg, var(--c-pink-strong), var(--c-purple-strong)); border-radius: inherit; }

.share-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: var(--space); }

/* Social share icon row — small circular buttons under the Try Again CTA. */
.share-icons {
  display: flex; justify-content: center; gap: 12px;
  margin-top: var(--space);
}
.share-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-soft);
  cursor: pointer;
  transition: transform .12s ease, color .15s ease, border-color .15s ease, background .15s ease;
  text-decoration: none;
}
.share-icon:hover { transform: translateY(-2px); text-decoration: none; }
.share-x:hover    { color: #000;     border-color: #000;     background: #fafafa; }
.share-fb:hover   { color: #1877f2;  border-color: #1877f2;  background: #f0f6ff; }
.share-wa:hover   { color: #25d366;  border-color: #25d366;  background: #f0fff7; }
.share-tg:hover   { color: #229ed9;  border-color: #229ed9;  background: #effaff; }
.share-copy:hover { color: var(--c-purple-strong); border-color: var(--c-purple-strong); background: var(--c-surface-2); }
.share-copy.is-copied { color: var(--c-success); border-color: var(--c-success); background: #effdf6; }
.copy-hint.is-shown { opacity: 1 !important; }

/* ---------- Search ---------- */
.search-form { position: relative; }
.search-form input {
  width: 100%; padding: 14px 18px 14px 44px;
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-pill);
  background: var(--c-surface); color: var(--c-text); outline: none;
}
.search-form input:focus { border-color: var(--c-purple-strong); box-shadow: 0 0 0 4px rgba(123,93,255,0.15); }
.search-form .search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--c-text-mute);
}
.empty-state {
  background: var(--c-surface); border-radius: var(--radius-md);
  padding: var(--space-lg); text-align: center;
  border: 1px dashed var(--c-border-strong);
}

/* ---------- Articles ---------- */
.article-card {
  background: var(--c-surface); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.article-card .cover {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--c-blue), var(--c-purple));
}
.article-card .body { padding: 14px 16px 18px; }
.article-card h3 { font-size: 16px; margin: 0 0 6px; }
.article-card .excerpt { font-size: 13px; color: var(--c-text-soft); margin: 0; }
.article-card .meta { font-size: 12px; color: var(--c-text-mute); margin-top: 8px; }

.article-body { background: var(--c-surface); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-sm); }
.article-body h1 { font-size: 26px; }
.article-body h2 { font-size: 20px; margin-top: var(--space-md); }
.article-body p { font-size: 15px; }
.article-body .meta-line { color: var(--c-text-mute); font-size: 13px; margin-bottom: var(--space); }
.toc {
  background: var(--c-surface-2); border-radius: var(--radius-md);
  padding: var(--space); margin-bottom: var(--space);
}
.toc h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-mute); margin: 0 0 8px; }
.toc ol { padding-left: 18px; margin: 0; }
.toc li { font-size: 14px; margin-bottom: 4px; }

/* ---------- Static pages ---------- */
.static-page {
  background: var(--c-surface); border-radius: var(--radius-lg);
  padding: var(--space-md); box-shadow: var(--shadow-sm); margin-top: var(--space);
}
.static-page h1 { font-size: 26px; }
.static-page h2 { font-size: 18px; margin-top: var(--space); }
.form-row { margin-bottom: var(--space); }
.form-row label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--c-text); }
.form-row input, .form-row textarea, .form-row select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-md);
  background: var(--c-surface); color: var(--c-text); outline: none;
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row input:focus, .form-row textarea:focus { border-color: var(--c-purple-strong); box-shadow: 0 0 0 4px rgba(123,93,255,0.15); }

/* ---------- Ad placeholder ---------- */
/* Flat: no background, no border. Just a small uppercase label so the slot is
   recognisable to readers (and to compliance/auditors) without being an
   in-content visual element competing with the quiz. */
.ad-slot {
  background: transparent;
  border: 0;
  padding: 14px 0;
  text-align: center;
  color: var(--c-text-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 8px 0;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--space-lg);
  padding: var(--space-lg) 0 var(--space-md);
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-border);
}
.footer-grid { display: grid; gap: var(--space); grid-template-columns: 1fr 1fr; }
.footer-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-mute); margin-bottom: 10px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-grid a { color: var(--c-text-soft); font-size: 14px; }
.footer-bottom { text-align: center; color: var(--c-text-mute); font-size: 12px; padding-top: var(--space); border-top: 1px solid var(--c-border); margin-top: var(--space); }

/* ---------- Misc utilities ---------- */
.row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.spacer { flex: 1; }
.text-center { text-align: center; }
.muted { color: var(--c-text-mute); }
.hide { display: none !important; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-text-soft); font-size: 14px; font-weight: 600;
  margin: var(--space) 0 var(--space-sm);
}

/* ---------- Layout breakpoints ---------- */
@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .answers { grid-template-columns: repeat(var(--answer-cols, 2), minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  h1 { font-size: 32px; }
  .hero h1 { font-size: 36px; }
  .hero { padding: var(--space-lg); }
}

@media (min-width: 980px) {
  .nav-desktop { display: flex; }
  .menu-btn { display: none; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* .grid-3 stays at three across on every desktop width — used for the
     related/you-may-like shelves on detail pages, where bigger posters beat
     more of them. */
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .with-sticky-cta { padding-bottom: var(--space-lg); }
  .sticky-cta { display: none; }

  /* Quiz intro: image left, text right */
  .intro-hero { display: grid; grid-template-columns: 1fr 1fr; }
  .intro-hero .cover { aspect-ratio: auto; height: 100%; min-height: 360px; }
  .intro-body { padding: var(--space-lg); }

  /* Quiz play: main + sidebar */
  .play-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--space-md); align-items: start; }
  .category-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: var(--space-md); align-items: start; }
}

@media (min-width: 1200px) {
  .hero h1 { font-size: 42px; }
}

/* Print: just keep it clean if anyone prints a result */
@media print {
  .site-header, .site-footer, .sticky-cta, .ad-slot, .share-row { display: none !important; }
}

/* Entertainment notice — shown above the fold on quiz intro + result, not
   buried in the footer. Readable but not alarming: it has to survive an
   AdSense review without scaring off a casual player. */
.entertainment-notice {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0; padding: 10px 12px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text-mute);
  font-size: 12.5px; line-height: 1.45; text-align: left;
}
.entertainment-notice svg { flex-shrink: 0; margin-top: 1px; opacity: .75; }
.result-card .entertainment-notice { margin: 12px auto 4px; max-width: 520px; }

/* Scored-quiz result: the number is the hero, since that is what gets shared. */
.result-score { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 10px; }
.result-score .score-big {
  font-size: 52px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, var(--c-pink-strong), var(--c-purple-strong));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.result-score .score-of { font-size: 26px; opacity: .55; }
.result-score .score-cap { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-mute); }

/* Illustrative photo under the question text. Stock imagery from Pexels; it is
   context, not an answer, so it never competes with the option buttons. */
.question-image {
  /* Deliberately small and centred: the photo is context for the question, not
     a hero image. Full-bleed 16:9 pushed the answer buttons below the fold on a
     phone, which is exactly where the interaction needs to be. */
  margin: 0 0 12px;
  /* Full-width banner with a fixed height, not a centred thumbnail.
     Capping the WIDTH looked fine on a phone but left a 260px image marooned in
     the middle of a 1000px desktop card. Fixing the HEIGHT instead keeps the
     vertical cost constant on every screen and lets the strip span the card, so
     there is no dead space either side. object-fit crops rather than letterboxes. */
  width: 100%;
  height: 120px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-surface-2);
}
.question-image img { width: 100%; height: 100%; object-fit: cover; }

/* Second-level category chips. Lighter than the filter row above them so the
   two rows read as different levels rather than one long strip of buttons. */
.sub-row .chip { font-size: 13px; padding: 6px 12px; }
.sub-row .chip-n {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--c-surface-2);
  font-size: 11px; font-weight: 700; color: var(--c-text-mute);
}
.sub-row .chip.is-active .chip-n { background: rgba(255,255,255,.25); color: #fff; }

/* Article links on a quiz page. Distinct from a quiz card on purpose: this is
   further reading, and it should not compete with the two shelves of quiz cards
   further down. Hence the horizontal layout, the eyebrow label and the muted
   surface. */
.reading-list { display: grid; gap: 12px; }

.reading-item {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px 12px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: inherit;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
/* The global a:hover adds an underline, which struck through both the title and
   the excerpt on hover. Cancelled here and on the children, since the whole
   card is already the affordance. */
.reading-item,
.reading-item:hover,
.reading-item:hover b,
.reading-item:hover .reading-excerpt { text-decoration: none; }

.reading-item:hover {
  border-color: var(--c-purple-strong);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(80, 50, 140, .10);
}

.reading-item img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--c-surface-2);
}

.reading-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  margin-bottom: 3px;
}
.reading-item b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
  color: var(--c-text);
}
.reading-excerpt {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-text-soft);
  /* Two lines, then ellipsis — excerpts vary in length and a ragged stack of
     cards of different heights looks like a bug. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reading-arrow {
  font-size: 18px;
  color: var(--c-text-mute);
  transition: transform .16s ease, color .16s ease;
}
.reading-item:hover .reading-arrow { transform: translateX(2px); color: var(--c-purple-strong); }

@media (max-width: 419px) {
  /* On the narrowest phones the three columns squeeze the title to two words
     per line, so the arrow goes and the thumbnail shrinks. */
  .reading-item { grid-template-columns: 72px 1fr; padding: 10px; gap: 12px; }
  .reading-item img { width: 72px; height: 60px; }
  .reading-arrow { display: none; }
}
@media (min-width: 900px) { .reading-list { grid-template-columns: 1fr 1fr; } }