/*
 * Stylesheet for the trivia web application.
 * Light “Campfire” theme: warm ivory background, ember accents,
 * crisp charcoal text, distinct category colours. Responsive & accessible.
 */

:root {
  /* Campfire (light) — warm, friendly, high-contrast */
  --primary: #1f2937;            /* Charcoal text */
  --primary-contrast: #ffffff;   /* For text on strong fills if needed */
  --accent: #d9480f;             /* Ember orange */
  --accent-hover: #b9380b;       /* Darker ember */
  --background: #fffdf8;         /* Warm ivory page background */
  --surface: #fffaf3;            /* Light cream surface */
  --card-bg: #ffffff;            /* Cards white */
  --text: #1f2937;               /* Primary text (charcoal) */
  --muted: #6b7280;              /* Muted text */
  --border: #e5e7eb;             /* Subtle light border */
    --panel-pad: 1rem;			/*Equalise padding between question panels and answer panels*/
	--cq-sticky-top: 78px;


  /* Legacy named colours (kept in case you want them elsewhere) */
  --cat-general: #0ea5a4;
  --cat-science: #7c3aed;
  --cat-history: #dc2626;
  --cat-entertainment: #d97706;
  --cat-sports: #16a34a;
  --cat-geography: #2563eb;

  /* Fixed per-position colours (1..5) + neutral fallback */
  --cat-1: #5C92E4;
  --cat-2: #E76D6D;
  --cat-3: #78C4B5;
  --cat-4: #F1D260;
  --cat-5: #C096E0;
  --cat-neutral: #4F7F5F;

  /* richer category ribbons*/
  --cat-1-grad: linear-gradient(135deg, color-mix(in srgb, var(--cat-1) 85%, #ffffff), var(--cat-1));
  --cat-2-grad: linear-gradient(135deg, color-mix(in srgb, var(--cat-2) 85%, #ffffff), var(--cat-2));
  --cat-3-grad: linear-gradient(135deg, color-mix(in srgb, var(--cat-3) 85%, #ffffff), var(--cat-3));
  --cat-4-grad: linear-gradient(135deg, color-mix(in srgb, var(--cat-4) 85%, #ffffff), var(--cat-4));
  --cat-5-grad: linear-gradient(135deg, color-mix(in srgb, var(--cat-5) 85%, #ffffff), var(--cat-5));

  /* Shape & depth */
  --radius: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 6px 16px rgba(0,0,0,.12);

  /* Action button width (desktop/tablet) */
  --action-btn-w: 176px;
}

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

/* can delete
html { box-sizing: border-box; }
*/

body {
  margin: 0;
    font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background-color: var(--background);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
 /*replaced with below -webkit-text-size-adjust: 100%; */
  text-size-adjust: 100%;
  /*added with homepage revamp*/
  line-height: 1.55;
}

/* Headings */
h1, h2 {
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.2px;
}

h3 {
  font-family: inherit;
  letter-spacing: 0.2px;
}


main {
  flex: 1;
  padding: 1rem;
 max-width: 980px;
  width: 100%;
 margin: 0 auto;
}



/* Header */
header {
  background: #ffffff;
  color: var(--text);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* allow score pill to wrap under logo on small screens */
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border);
}
header h1,
header .site-title {
  margin: 0;
  font-size: 1.5rem; /* brand size on both pages */
  color: var(--primary);
}

header h1 > a,
header .site-title > a {
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}


header button {
  background-color: var(--accent);
  border: none;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
header button:hover { background-color: var(--accent-hover); }

/* Centered Instagram icon link in the header bar */
header .ig-link {
  display: block;
  text-align: center;
  padding: .5rem 0;
}
header .ig-link img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

/* Fredoka only for category + section titles */
header h1,
header h1 > a,
.page-title,
.page-title-small,
.category > h3,
.category-mini h3,
.result-summary h1,
.result-streak-card h2,
.insta-follow h2 {
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}


/* Temporary: pause Ember Circle UI in the header.
   This hides the tier label and the "Join the Ember Circle" link everywhere. */
.nav-tier-label,
.nav-ember-link {
  display: none !important;
}

/* Membership tier indicator and Ember Circle link in the header */
.nav-tier-label {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

/* Slight emphasis for Ember Circle members */
.nav-tier-label--ember {
  font-weight: 600;
}

/* "Join the Ember Circle" link styling */
.nav-ember-link {
  font-size: 0.85rem;
  text-decoration: underline;
  margin-right: 0.75rem;
}


/*END HEADER*/

/* Sections & lists */
section {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
section h2 { margin-top: 0; color: var(--primary); }
ul { list-style: none; padding: 0; margin: 0; }
li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
li:last-child { border-bottom: none; }

.quiz-title { font-weight: 600; margin-right: 0.5rem; }
.score { font-style: italic; margin-right: 0.5rem; }




/* Step 3 - Flatten the current week area (remove card-in-card look) */
section.active-quiz,
section.past,
#leaderboard-tile,
#quiz-container section.profile-section {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Home - align section headings and helper text with the centred 600px cards */
section.active-quiz > h2,
section.active-quiz > .row-wrap,
section.past > h1,
section.past > h2,
section.past > p,
#leaderboard-tile > h2,
#quiz-container section.profile-section > .page-title,
#quiz-container section.profile-section > .quiz-page-title,
#quiz-container section.profile-section > h1,
#quiz-container section.profile-section > h2 {
  max-width: 600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

/* Home - one shared heading style (spacing) */
section.active-quiz > h2,
section.past > h2,
#leaderboard-tile > h2,
#faq > h2,
#quiz-container section.profile-section > .page-title,
#quiz-container section.profile-section > .quiz-page-title,
#quiz-container section.profile-section > h1,
#quiz-container section.profile-section > h2  {
 margin: 0 auto 0.75rem;  /* keep 600px anchoring + same bottom gap */
}


/* Keep the countdown aligned nicely */
section.active-quiz .row-wrap {
  margin: 0 0 0.75rem 0;
}

/* The quiz card is now the single container - keep it clean */
section.active-quiz .quiz-card {
  margin-top: 0;
}


/* Buttons */
.button,
button.button {
  background-color: var(--accent);
  color: #ffffff;
  padding: 0.55rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
  transition: background-color 0.2s ease, transform 120ms ease, box-shadow 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* NEW - Make the current-week button feel like the main action */
.button.primary {
  font-weight: 700;
  padding: 0.8rem 1.1rem;
  border-radius: 999px;
}

/* NEW - On mobile, make the primary button easier to tap */
@media (max-width: 640px) {
  .button.primary {
    width: min(420px, 92vw);
    text-align: center;
  }
}

.button:hover,
button.button:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.button:active,
button.button:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.button:focus,
button.button:focus {
  outline: 2px solid rgba(217, 72, 15, 0.35);
  outline-offset: 2px;
}

/* Can delete
a.button:hover,
button.button:hover { background-color: var(--accent-hover); }
*/

.error { color: #dc2626; font-size: 0.9rem; margin-top: 0.5rem; min-height: 1.2rem; }

/* Header socials (Instagram) */
header .socials {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-left: .75rem;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0 .65rem;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
  outline: none;
  line-height: 1; /* prevents baseline wobble */
}
.social-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.social-btn:focus { outline: 2px solid rgba(217,72,15,.35); outline-offset: 2px; }
/* Instagram gradient */
.social-btn.ig {
  background: radial-gradient(120% 120% at 0% 100%, #f9ed32 0%, #ee2a7b 45%, #6228d7 100%);
}
/* Normalize icon size for both img and svg */
.social-btn img,
.social-btn svg {
  width: 18px;
  height: 18px;
  display: block;      /* remove baseline gap */
  flex: 0 0 18px;      /* prevent stretching in flex */
}
.social-btn { gap: .45rem; }
@media (max-width: 520px) {
  .social-btn span { display: none; }
  .social-btn { min-width: 36px; padding: 0; }
}

/* Quiz heading */
.quiz-intro {
  margin: 0.5rem 0 1.25rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--muted);
}


/* Questions */
.question {
  margin-bottom: 1rem;
  padding: var(--panel-pad);
  background: linear-gradient(180deg, #fffdf8 0%, #fff4e6 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.question h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-family: 'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* Step 2B.2: calmer vertical layout inside question */
.question-main-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 0px;
}

.qa-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

/* Reveal mechanic - lock future clues */
.question.is-locked h3 {
  filter: blur(6px);
  opacity: 0.6;
  user-select: none;
}

/* Reveal mechanic - hide the right-side "Check" row when locked */
.reveal-hidden {
  display: none;
}

/* Reveal mechanic - guess input (styled like a pill, matches site look) */
.reveal-guess {
  width: min(var(--action-btn-w), 100%);
  max-width: 100%;

  padding: 0.55rem 0.95rem;
  border-radius: 999px;

  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;

  color: var(--primary);

  /* subtle category-tinted surface */
  background: color-mix(in srgb, var(--cat) 6%, #ffffff);

  border: 1px solid var(--border);
  border-left: 4px solid var(--cat);

  box-shadow: var(--shadow-sm);
  outline: none;
}

.reveal-guess::placeholder {
  color: var(--muted);
  font-weight: 600;
}

.reveal-guess:focus {
  border-color: color-mix(in srgb, var(--cat) 55%, #ffffff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 22%, transparent), var(--shadow-sm);
}

.reveal-guess:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}


@media (min-width: 640px) {
  .question-main-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
	flex-wrap: wrap;
  }

  .qa-left {
    flex: 1;
    min-width: 0;
  }

  .got-it-label {
    flex: 0 0 auto;
  }
}


/* Show Answer button (soft pill, ember accent) */
.question button.show-answer,
.question .got-it-label.reveal-check {
  /* Use category colour when available, otherwise fall back to charcoal */
  background-color: var(--cat, var(--primary));
  color: #ffffff;
  border: 1px solid color-mix(in srgb, var(--cat) 55%, #ffffff);
  padding: 0.55rem 0.95rem;
  border-radius: 999px; /* more “Campfire” pill button */
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;

  /* Make it the same visual height as the revealed answer pill */
  min-height: 2.1rem;         /* matches .answer.is-visible */
  display: inline-flex;
  align-items: center;
}


.question button.show-answer:hover {
  filter: brightness(0.95);
}

/* "Got it right?" row under the main action row */
/* Make Show Answer and Got it right rows the same width */
.question button.show-answer,
.got-it-label {
  width: min(var(--action-btn-w), 100%);
  max-width: 100%;
  justify-content: center;
}

/* Revealed answer pill */
.question .answer.is-visible {
  min-width: min(var(--action-btn-w), 100%);
  width: fit-content;
  max-width: 100%;
  white-space: normal;
}

@media (min-width: 640px) {
  .question .answer.is-visible {
    max-width: 80%;
  }
}

/* Submit */
.submit-container {
  text-align: center;
  margin-top: 0.9rem; /* closer to the box above */
}

/* Make the Finish button match the pill style, but only here */
.submit-container .button {
  display: inline-flex;     /* natural width */
  width: fit-content;       /* shrink to text */
  max-width: 100%;
  margin: 0 auto 0.9rem;

  border-radius: 999px;     /* full pill ends */
  padding: 0.8rem 1.1rem;   /* matches primary button feel */
  font-weight: 600;
  font-family: inherit;
}

/* Running score pill that lives in the header on the quiz page */
.running-score {
  margin-left: auto;              /* push to the right side of the header */
  margin-top: 0;                  /* default - mobile override below can add top margin */
  padding: 0.4rem 1rem;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  position: relative;             /* lets sparkles sit around the pill */
  overflow: visible;
  box-shadow: var(--shadow-sm);
  background: linear-gradient(135deg, var(--accent), #f97316);
}

/* Pop animation when the score goes up */
@keyframes cq-score-pop {
  0% {
    transform: scale(1);
    box-shadow: var(--shadow-sm);
  }
  40% {
    transform: scale(1.08);
    box-shadow: var(--shadow-md);
  }
  100% {
    transform: scale(1);
    box-shadow: var(--shadow-sm);
  }
}

.running-score-bump {
  animation: cq-score-pop 180ms ease-out;
}

/* Score pill tiers - background gets a bit shinier as the score climbs */
.running-score-tier-0 {
  background: linear-gradient(135deg, var(--accent), #f97316);
  box-shadow: var(--shadow-sm);
}

.running-score-tier-1 {
  background: linear-gradient(135deg, #f97316, #fb923c);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2),
              0 0 14px rgba(248,113,113,0.45);
}

.running-score-tier-2 {
  background: linear-gradient(135deg, #f97316, #facc15);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25),
              0 0 16px rgba(250,204,21,0.5);
}

.running-score-tier-3 {
  background: linear-gradient(135deg, #fb923c, #22c55e);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25),
              0 0 18px rgba(34,197,94,0.5);
}

.running-score-tier-4 {
  background: linear-gradient(135deg, #f97316, #3b82f6);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3),
              0 0 20px rgba(59,130,246,0.55);
}

.running-score-tier-5 {
  background: linear-gradient(135deg, #ec4899, #f97316);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35),
              0 0 22px rgba(236,72,153,0.6);
}

/* Sparkles that float up from the score pill */
.score-sparkle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  animation: cq-score-sparkle 650ms ease-out forwards;
}

@keyframes cq-score-sparkle {
  0% {
    transform: translate3d(0, 0, 0) scale(0.9);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--sparkle-x, 0px), -18px, 0) scale(1.05);
    opacity: 0;
  }
}

/* Much bigger sparkle for every multiple of 5 */
.score-sparkle-major {
  top: 50%; /* start closer to the middle of the pill */
  font-size: 1.6rem;
  animation: cq-score-sparkle-major 1000ms ease-out forwards;
}

@keyframes cq-score-sparkle-major {
  0% {
    transform: translate3d(0, 0, 0) scale(0.9) rotateZ(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--sparkle-x, 0px), -46px, 0) scale(1.35) rotateZ(360deg);
    opacity: 0;
  }
}

/* Downward sparkles used on score milestones */
.score-sparkle-down {
  animation: cq-score-sparkle-down 700ms ease-out forwards;
}

@keyframes cq-score-sparkle-down {
  0% {
    transform: translate3d(0, 0, 0) scale(0.9);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--sparkle-x, 0px), 22px, 0) scale(1.06);
    opacity: 0;
  }
}

/* Bigger downward sparkle for milestone bursts */
.score-sparkle-major.score-sparkle-down {
  animation: cq-score-sparkle-major-down 1100ms ease-out forwards;
}

@keyframes cq-score-sparkle-major-down {
  0% {
    transform: translate3d(0, 0, 0) scale(0.9) rotateZ(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--sparkle-x, 0px), 46px, 0) scale(1.3) rotateZ(-360deg);
    opacity: 0;
  }
}




/* When the header wraps on small screens, give the pill some breathing room */
@media (max-width: 600px) {
  .running-score {
    margin-top: 0.4rem;
  }
}

/* Hide the header score pill in results mode */
.cq-results-mode #running-score {
  display: none !important;
}

.submit-container button:hover { background-color: var(--accent-hover); }

/* ─────────────────────────────────────────────────────────────
   Results mode - subtle correctness halos (tasteful, not neon)
   ───────────────────────────────────────────────────────────── */

.cq-results-mode .got-it-label {
  cursor: default;
  opacity: 0.92;
}

.cq-results-mode .got-it-label input {
  pointer-events: none;
}

.cq-results-mode .category-feedback-option {
  opacity: 0.6;
  pointer-events: none;
}

.question.cq-result-correct {
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.22),
    0 0 0 6px rgba(34, 197, 94, 0.08),
    var(--shadow-sm);
}

.question.cq-result-incorrect {
  box-shadow:
    0 0 0 2px rgba(219, 39, 119, 0.18),
    0 0 0 6px rgba(219, 39, 119, 0.06),
    var(--shadow-sm);
}

/* Results mode - hide the two intro cards only (Round + How to play) */
.cq-results-mode #quiz-intro-card,
.cq-results-mode #quiz-howto-card {
  display: none;
}



/* Results mode: "Got it" row becomes a locked result badge */
.cq-results-mode .got-it-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hide the checkbox visually but keep layout clean (it is disabled anyway) */
.cq-results-mode .got-it-label input.answer-checkbox {
  display: none;
}

/* Reveal mechanic - the "Check" pill should not show the checkbox box */
.question[data-mechanic="reveal"] .got-it-label input.answer-checkbox {
  display: none;
}


/* Text + icon wrappers */
.cq-results-mode .got-it-label .cq-gotit-text {
  font-weight: 700;
}

.cq-results-mode .got-it-label .cq-gotit-icon {
  margin-left: 0;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  width: 1.6rem;
  justify-content: center;
  flex: 0 0 1.6rem;
}

/* Correct: warm, subtle green */
.cq-results-mode .got-it-label.cq-gotit-correct,
.got-it-label.cq-gotit-correct {
  background: rgba(34, 197, 94, 0.12);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18), 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Wrong: subtle dark pink/red with ❌ */
.cq-results-mode .got-it-label.cq-gotit-wrong,
.got-it-label.cq-gotit-wrong {
  background: rgba(244, 63, 94, 0.12);
  box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.22), 0 10px 24px rgba(0, 0, 0, 0.18);
}



/* Results - summary card at top and bottom of the results section
   Use the same light card styling as the rest of the site so it stays
   easy to read and on brand. */
   
   /* Results sections should reuse the same "section.past + .quiz-page" box styling used elsewhere */
section.past.result-summary,
section.past.result-streak-card {
  margin: 0 0 1.5rem 0;
}

section.past.result-summary .quiz-page,
section.past.result-streak-card .quiz-page {
  text-align: center;
}

   
.result-summary:not(.past) {
  /* Slightly tighter breathing room */
  margin: 1.25rem 0;

  /* Slightly tighter padding */
  padding: 1rem 1rem;
  border-radius: var(--radius);
  background-color: var(--card-bg);
  color: var(--primary);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-align: center;
}


/* consolidate: shared spacing for result summary headings */
.result-summary h1,
.result-summary h2 {
  margin: 0 0 0.35rem 0;
}

.result-summary h2 {
  font-size: 1.25rem;
}

/* Also reveal text */ 
.result-greeting,
.reveal-points-note {
  margin: 0.25rem 0 0.75rem;
  font-size: 1rem;
  color: var(--accent);
}

/* Score line inside the summary card (used by JS via .result-score) */
.result-summary .result-score {
  margin: 0 0 0.6rem 0;
  font-weight: 600;

  /* Make the score read instantly: label - big number - out of */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.result-summary .result-score-label {
  font-size: 0.95rem;
  color: var(--muted);
}

.result-summary .result-score-number {
  font-size: 3rem;
  line-height: 1;
  font-weight: 800;
  color: var(--accent);
}



/* Shared action row - used for both top and bottom summary blocks */
.result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Short invite sentence under the score line */
.result-summary .result-invite {
  margin: 0 0 0.9rem 0;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Small note under the share and past quiz buttons */
.result-summary .share-note {
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Outcome line based on score band */
.result-summary .result-outcome {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  color: var(--primary);
}



/* Make the action buttons a sensible minimum width on wider screens */
.result-actions .button {
  min-width: 140px;
}

/* Mobile - stack buttons vertically to make them easy to tap */
@media (max-width: 640px) {
  .result-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .result-actions .button {
    width: 100%;
  }
}

/* Short confetti burst when results load */
.confetti-piece {
  position: fixed;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 9999;
  animation: cq-confetti-fall 1.6s ease-out forwards;
}

/* Simple falling animation for confetti pieces */
@keyframes cq-confetti-fall {
  0% {
    transform: translate3d(0, 0, 0) rotateZ(0deg);
  }
  100% {
    transform: translate3d(0, 110vh, 0) rotateZ(360deg);
  }
}

/* Save result panel shown to guests on the results screen */
.result-save-card {
  margin: 0 0 1.5rem 0;
  padding: 1rem 1rem 1.25rem;
  border-radius: var(--radius);
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.result-save-card h2,
.result-save-card h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.05rem;
  color: var(--primary);
}


.result-save-card p {
  margin: 0 0 0.75rem 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.result-save-card .button {
  min-width: 180px;
}

/* Benefit list inside the guest save card */
.result-save-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem 0;
  text-align: left;
}

.result-save-benefits li {
  font-size: 0.92rem;
  margin: 0.2rem 0;
  color: var(--primary);
}

/* Small helper note under the button */
.result-save-note {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* "Your last 4 rounds" streak card */
.result-streak-card {
  margin: 0 0 1.5rem 0;
  padding: 1rem 1rem;
  border-radius: var(--radius);
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.result-streak-card h2.result-stats-subheading {
  margin-top: 1.25rem;   /* more breathing room above */
  margin-bottom: 0.35rem; /* tighter gap to the tiles */
  font-size: 1.05rem;     /* keep subheading small */
  color: var(--primary);
}



.result-streak-label {
  margin: 0.1rem 0 0.3rem;
  font-size: 0.9rem;
  color: var(--muted);
}


/* 4 tiles in a row */
.result-streak-table {
  display: inline-block;
  margin: 0.35rem 0 0.75rem 0; /* tighter top margin so tiles sit closer to heading */
}

/* Grid for the tiles */
.result-streak-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(2.5rem, 1fr));
  column-gap: 0.75rem;
  justify-items: center;
  font-size: 0.9rem;
}

/* We no longer show separate header text - the round label is inside each tile */
.result-streak-row-header {
  height: 0;
  overflow: hidden;
}

.result-streak-row-values {
  margin-top: 0.15rem;
  row-gap: 0.4rem;  /* small vertical gap between the two rows of tiles */
}

/* Generic tile container - little rounded square */
.result-streak-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background-color: #ffffff;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    position: relative;
  overflow: hidden;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease;
  font-size: 0.85rem;
  line-height: 1.25;
}

/* Round label inside the tile, e.g. R15 */
.result-streak-tile-round {
  font-weight: 600;
  color: var(--primary);
}

/* Score or "Play" text inside the tile */
.result-streak-tile-value {
  margin-top: 0.1rem;
}

/* Played tiles - celebratory, but still clean */
.result-streak-tile--played {
  border-color: rgba(22, 163, 74, 0.35); /* soft green edge */
  background: linear-gradient(135deg, #ffffff 0%, var(--surface) 100%);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(22, 163, 74, 0.08) inset;
}

/* A subtle lift on hover (even though it is not a link) */
.result-streak-tile--played:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Score line - a bit more “reward” */
.result-streak-tile--played .result-streak-tile-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
}

.result-streak-score {
  font-weight: 800;
  font-size: 1.05rem;
  color: #16a34a; /* friendly green */
  font-variant-numeric: tabular-nums;
}

.result-streak-score-suffix {
  font-size: 0.8rem;
  color: var(--muted);
}


/* Unplayed tiles - highlighted call to action */
.result-streak-tile--unplayed {
  border-color: var(--accent);
  background-color: #fff7ed;
}

/* Current week - keep the glow, but do NOT turn played tiles orange */
.result-streak-tile--current-unplayed {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(217, 72, 15, 0.28), var(--shadow-sm);
}

.result-streak-tile--current-played {
  /* Current week AND already played - make it pop */
  border-color: rgba(34, 197, 94, 0.85);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(255, 255, 255, 0.98));
  box-shadow:
    0 0 0 4px rgba(217, 72, 15, 0.42),   /* brighter ember glow */
    0 0 0 2px rgba(34, 197, 94, 0.18) inset,
    var(--shadow-md);
}

.result-streak-tile--current-played .result-streak-score {
  color: #166534; /* deeper green for contrast */
}




.result-streak-tile--unplayed .result-streak-tile-round,
.result-streak-tile--unplayed .result-streak-tile-value {
  color: var(--accent);
}

/* Hover and focus states for clickable tiles */
.result-streak-tile--unplayed:hover,
.result-streak-tile--unplayed:focus-visible {
  background-color: #ffedd5;
  box-shadow: var(--shadow-md);
}

/* Keep link text styling minimal - tile styles do the heavy lifting */
.result-streak-play-link {
  text-decoration: none;
}

/* Guest locked tiles - look disabled but remain clickable to prompt signup */
.result-streak-lock-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.result-streak-tile--locked {
  border-color: #cbd5e1;              /* slightly stronger than --border */
  background-color: #f1f5f9;          /* a touch darker than --surface */
  opacity: 0.72;                      /* less faded so it still reads as a tile */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06), /* subtle lift like other tiles */
    0 0 0 1px rgba(31, 41, 55, 0.04) inset;
}


.result-streak-tile--locked .result-streak-tile-round,
.result-streak-tile--locked .result-streak-tile-value {
  color: var(--muted);
}

.result-streak-tile--locked:hover,
.result-streak-tile--locked:focus-visible {
  background-color: #eaf0f6;          /* tiny darken on hover */
  box-shadow:
    0 6px 16px rgba(0,0,0,.10);       /* softer than the full md */
}


/* Results - subheading inside the stats card (spacing only) */
.result-stats-subheading {
  text-align: center;
}


.result-auth-subheading {
  margin-top: 1.35rem;
  margin-bottom: 0.6rem;
  font-size: 1.05rem;
  color: var(--primary);
}



/* Visual nudge to draw attention to field */
.auth-inline-slot #login-email.cq-attention,
.reveal-guess.cq-attention {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 72, 15, 0.22);
}


.result-streak-note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.result-streak-note--guest {
  color: var(--primary);
}



.result-streak-cta {
  margin-top: 0.75rem;
}

.result-streak-footer {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted, #4b5563);
}

/* Make primary buttons in summary and streak cards consistent */
.result-summary .button,
.result-streak-card .button {
  display: block;
  width: 100%;
  max-width: 15rem;
  margin: 0.6rem auto 0;

  /* Match cq-btn pill style */
  border-radius: 999px;
  min-height: 44px;
  padding: 0.6rem 1rem;
  font-weight: 600;
}



/* Category grouping on the results page - mirrors quiz page colours */
.results-category {
  margin: 1.5rem 0 1rem;
}

/* Category heading block inside results */
.results-category .category-mini {
  margin: 0 0 1rem 0;  /* bottom margin now matches .result-item gap */
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

/* Category title pill - coloured per category position */
.results-category .category-mini h3 {
  margin: 0;
  font-size: 1.05rem;
  padding: 0.4rem 0.75rem;
  border-radius: calc(var(--radius) - 4px);
  color: #ffffff;
}

/* Optional blurb under the results category heading */
.results-category .category-blurb {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--primary);
}

/* Match quiz page category colours by position (1..5)
   - heading box and answer boxes share the same tinted background
   - heading box also gets a category-colour stripe on the left
*/
.results-category-1 .category-mini {
  background: color-mix(in srgb, var(--cat-1) 6%, #fff);
  border-left: 4px solid var(--cat-1);
}
.results-category-1 .category-mini h3 { background: var(--cat-1); }
.results-category-1 .result-item {
  background: color-mix(in srgb, var(--cat-1) 6%, #fff);
}

.results-category-2 .category-mini {
  background: color-mix(in srgb, var(--cat-2) 6%, #fff);
  border-left: 4px solid var(--cat-2);
}
.results-category-2 .category-mini h3 { background: var(--cat-2); }
.results-category-2 .result-item {
  background: color-mix(in srgb, var(--cat-2) 6%, #fff);
}

.results-category-3 .category-mini {
  background: color-mix(in srgb, var(--cat-3) 6%, #fff);
  border-left: 4px solid var(--cat-3);
}
.results-category-3 .category-mini h3 { background: var(--cat-3); }
.results-category-3 .result-item {
  background: color-mix(in srgb, var(--cat-3) 6%, #fff);
}

.results-category-4 .category-mini {
  background: color-mix(in srgb, var(--cat-4) 12%, #fff);
  border-left: 4px solid var(--cat-4);
}
.results-category-4 .category-mini h3 { background: var(--cat-4); }
.results-category-4 .result-item {
  background: color-mix(in srgb, var(--cat-4) 12%, #fff);
}

.results-category-5 .category-mini {
  background: color-mix(in srgb, var(--cat-5) 6%, #fff);
  border-left: 4px solid var(--cat-5);
}
.results-category-5 .category-mini h3 { background: var(--cat-5); }
.results-category-5 .result-item {
  background: color-mix(in srgb, var(--cat-5) 6%, #fff);
}

/* Fallback for browsers without color-mix on the results page */
@supports not (background: color-mix(in srgb, #000 10%, #fff)) {
  .results-category-1 .category-mini,
  .results-category-1 .result-item { background: rgba(14,165,164,.08); }

  .results-category-2 .category-mini,
  .results-category-2 .result-item { background: rgba(124,58,237,.08); }

  .results-category-3 .category-mini,
  .results-category-3 .result-item { background: rgba(220,38,38,.08); }

  .results-category-4 .category-mini,
  .results-category-4 .result-item { background: rgba(217,119,6,.16); }

  .results-category-5 .category-mini,
  .results-category-5 .result-item { background: rgba(37,99,235,.08); }
}

.result-item {
  margin-bottom: 1rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--card-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.result-item.correct   { border-left: 4px solid #16a34a; }
.result-item.incorrect { border-left: 4px solid #dc2626; }
.result-item h4 { margin: 0 0 0.3rem 0; font-size: 1rem; color: var(--primary); }
.result-item p  { margin: 0.2rem 0; font-size: 0.9rem; }

/* Thin divider between categories on the results page */
.cat-sep {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

/* Share UX on results */
.share-actions { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  gap: .5rem; 
  margin-top: .5rem; 
}

/* Small gap between the share icon and text inside the button */
.share-icon {
  margin-right: 0.35rem;
}

/* Results - Share button: keep prominent, but softer / nicer */
.result-actions .share-button {
  background: rgba(217, 72, 15, 0.14);              /* soft ember wash */
  border: 1px solid rgba(217, 72, 15, 0.35);        /* ember outline */
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.result-actions .share-button:hover {
  background: rgba(217, 72, 15, 0.20);
  border-color: rgba(217, 72, 15, 0.45);
}

.result-actions .share-button:active {
  transform: translateY(1px);
}


/* A lighter, outlined secondary button (Return Home) */
.button.secondary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
}
.button.secondary:hover {
  background: #fff;
  color: var(--primary);
  border-color: #d1d5db;
}

/* Results footer */
.results-footer {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin: 1.25rem 0 0;
  flex-wrap: wrap;
}
.results-footer .button { min-width: 180px; }
@media (max-width: 520px) {
  .results-footer { flex-direction: column; }
  .results-footer .button { width: 100%; }
}

/* Ensure the Results share button uses the standard button font */
.result-actions .button,
.result-actions .button .share-text {
  font-family: inherit;
}


/*END RESULTS SECTION*/

/* Small screens */
@media (max-width: 600px) {
  header h1 { font-size: 1.2rem; }
  header button { padding: 0.4rem 0.6rem; font-size: 0.8rem; }
  .auth { margin: 1rem; padding: 1rem; }
  .question { padding: 0.8rem; }
  .submit-container button { width: 100%; }
}

/* Disabled inline hints */
.disabled { color: #9ca3af; cursor: not-allowed; text-decoration: none; margin-left: 10px; }

/* Links */
a { color: var(--primary); text-decoration: underline; }
a:hover { color: var(--accent); }

/* Tap targets & form options */
.button, button, input[type="submit"] {
  min-height: 44px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
form label {
  display: block;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .5rem;
  line-height: 1.35;
  background: #fff;
}

/* Extra breathing room between the answer pill and "Got it right?" row */
.question label {
  margin-top: 0.6rem;
}

/* Plain label style for text inputs on profile page */
.field-label {
  display: block;
  padding: 0;
  margin-bottom: 0.35rem;
  border: none;
  background: transparent;
  line-height: 1.4;
}

/* Campfire name input styling */
#profile-root input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 1rem;
  box-sizing: border-box;
}

form input[type="radio"],
form input[type="checkbox"] {
  margin-right: .6rem;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  vertical-align: middle;
}

/* Comfortable reading sizes */
h1 { line-height: 1.2; }
h2, h3 { line-height: 1.25; }
@media (max-width: 480px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.125rem; }
  body { font-size: 1rem; }
}
@media (min-width: 481px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  body { font-size: 1rem; }
}

/* Quiz archive cards */
.quiz-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1rem;
}

.quiz-page {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
/* Can delete
.quiz-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "head head" "meta actions";
  row-gap: .5rem;
}
@media (min-width: 640px) {
  .quiz-card { grid-template-areas: "head actions" "meta actions"; }
}
*/

/* Pager under the past quiz list - center buttons and add space above */
#pager {
  margin-top: 1.25rem;          /* space between last quiz card and the pager */
  display: flex;                /* lay out arrows in a row */
  justify-content: center;      /* center the whole group horizontally */
  gap: 0.5rem;                  /* small gap between the arrows / page buttons */
}
/* Can delete
.quiz-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
*/

.quiz-header { grid-area: head; }
.quiz-header h3 { margin: 0; color: var(--primary); font-size: 1.05rem; }
.quiz-date { font-size: .9rem; color: var(--muted); margin-left: .5rem; }
.quiz-meta { grid-area: meta; font-size: .95rem; }
.quiz-score { color: #16a34a; font-weight: 700; }
.quiz-status { color: var(--accent); font-weight: 600; }
.quiz-actions { grid-area: actions; display: flex; gap: .5rem; align-items: center; justify-content: flex-end; }
.button.small { font-size: .85rem; padding: .4rem .7rem; }

/* Current-week category list inside quiz cards */
.quiz-cats {
  /* Span the full width of the card under the button row */
  grid-column: 1 / -1;
  margin-top: .5rem;
}

.quiz-cats-heading {
  /* Match the Week heading style closely */
  margin: 0 0 .25rem 0;
  font-size: 1.05rem;
  color: var(--primary);
}

.quiz-cats-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Override the global li styling so category items have no dividers
   and do not behave like full quiz rows */
.quiz-cats-list li {
  padding: 0;
  border: 0;
  display: block;
}


/* Vertical quiz-card layout (buttons under text, used on email-play) */
.email-layout-vertical .quiz-card {
  /* Turn off the grid layout for these cards */
  display: block !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
}

/* Stack header, text, then actions */
.email-layout-vertical .quiz-header {
  margin-bottom: 0.25rem;
}

.email-layout-vertical .quiz-meta {
  margin-bottom: 0.4rem;
}

/* Actions under the text, left aligned */
.email-layout-vertical .quiz-actions {
  grid-area: auto !important;
  display: block !important;
  margin-top: 0.6rem;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Button sits under the text in the bubble */
.email-layout-vertical .quiz-actions .button {
  display: inline-block;
  width: 100%;
  max-width: 18rem;
  text-align: center;
}


/* Can delete
/* State accents
   Keep these tiles consistent with the "value props" box (no coloured outline). 
.quiz-card.played,
.quiz-card.unplayed,
.quiz-card.locked {
  border-left: 0;
}
.quiz-card.locked { opacity: .95; }
*/


/* Deprecated can be removed.
Current week tile - match value props (no orange outline) 
.quiz-card.current {
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow:
    0 10px 24px rgba(31, 41, 55, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}*/


.quiz-card.current .quiz-header h3 {
  font-size: 1.15rem;
}

.quiz-card.current .quiz-meta {
  font-size: 1rem;
}


/* Make the View Results/Play Now buttons the same width */
.quiz-actions .button.small { width: var(--action-btn-w); justify-content: center; }

/* On narrow screens, let them grow full-width */
@media (max-width: 480px) {
  .quiz-actions { justify-content: stretch; }
  .quiz-actions .button.small { width: 100%; }
}

/* Make the View Results button match the played-state green */
.quiz-card.played a.button,
.quiz-card.played .button { background-color: #16a34a; color: #ffffff; }
.quiz-card.played a.button:hover,
.quiz-card.played .button:hover { background-color: #15803d; }
.quiz-card.played a.button:focus,
.quiz-card.played .button:focus { outline: 2px solid rgba(22, 163, 74, 0.35); outline-offset: 2px; }


.category > h3::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,0.28), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%);
  mix-blend-mode: soft-light;
}


/* Category card */
.category {
  --cat: var(--neutral);

  /* Match the home page “box” quality without being loud */
  background: linear-gradient(
  180deg,
  color-mix(in srgb, var(--cat) 18%, #ffffff) 0%,
  color-mix(in srgb, var(--cat) 10%, #ffffff) 100%
);  
  
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.06);

  padding: 0 0 1rem 0;
  margin: 22px auto 30px;
  max-width: 600px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;

  position: relative; /* needed for the left colour line */
}

/* Coloured ribbon at the very top of the category card */
.category > h3 {
  position: sticky;
  top: var(--cq-sticky-top, 0px);
  z-index: 2;
  margin: 0 0 0.6rem 0;                   /* no overflow - stays inside 600px */
  overflow: hidden;
  padding: 0.75rem 1rem;
  
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.12);
  
  background: var(--cat);
  border-bottom: 4px solid var(--cat);
  background-clip: padding-box;
  
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0;

  border-radius: 16px 16px 0 0;
}

/* Inner spacing - keeps category content aligned like homepage cards */
.category .cat-subtitle,
.category .category-blurb,
.category .question,
.category .category-feedback {
  margin-left: 1rem;
  margin-right: 1rem;
}

/* Ensure inner cards never poke outside the 600px category card */
.category .question,
.category .category-feedback {
  width: calc(100% - 2rem);   /* 100% minus the 1rem left + 1rem right spacing */
  max-width: calc(100% - 2rem);
}


/* Subheading under category (blurb) */
.category .cat-subtitle,
.category .category-blurb {
  margin-top: .45rem;
  margin-bottom: .65rem;
  color: var(--primary);
  font-size: .95rem;
  line-height: 1.35;
  padding: 0 .15rem;
}

/* Category colour assignment (scoped + consistent) */
/* pastal colours:
#quiz-form > .category:nth-child(1) { --cat: color-mix(in srgb, var(--cat-1) 22%, #ffffff); }
#quiz-form > .category:nth-child(2) { --cat: color-mix(in srgb, var(--cat-2) 22%, #ffffff); }
#quiz-form > .category:nth-child(3) { --cat: color-mix(in srgb, var(--cat-3) 22%, #ffffff); }
#quiz-form > .category:nth-child(4) { --cat: color-mix(in srgb, var(--cat-4) 22%, #ffffff); }
#quiz-form > .category:nth-child(5) { --cat: color-mix(in srgb, var(--cat-5) 22%, #ffffff); }
*/
#quiz-form > .category:nth-child(1) { --cat: var(--cat-1); }
#quiz-form > .category:nth-child(2) { --cat: var(--cat-2); }
#quiz-form > .category:nth-child(3) { --cat: var(--cat-3); }
#quiz-form > .category:nth-child(4) { --cat: var(--cat-4); }
#quiz-form > .category:nth-child(5) { --cat: var(--cat-5); }




/* Step 2B.1: question card with category colour spine */
.question {
  margin-bottom: 14px; /* spacing between question cards */
}


/* Helps anchor links land nicely below the sticky header */
#quiz-form > .category {
  scroll-margin-top: 90px;
}


/* Step 2A: question heading should be plain text (no coloured bar) */
.category .question h3 {
  margin: 0;
  padding: 0 0 10px 0;
  background: none;
  color: var(--primary);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, #000 10%, #fff)) {
  #quiz-form > .category:nth-child(1),
  #quiz-form > .category:nth-child(1) .category-feedback {
    background: rgba(14,165,164,.08);
  }

  #quiz-form > .category:nth-child(2),
  #quiz-form > .category:nth-child(2) .category-feedback {
    background: rgba(124,58,237,.08);
  }

  #quiz-form > .category:nth-child(3),
  #quiz-form > .category:nth-child(3) .category-feedback {
    background: rgba(220,38,38,.08);
  }

  #quiz-form > .category:nth-child(4),
  #quiz-form > .category:nth-child(4) .category-feedback {
    background: rgba(217,119,6,.16);
  }

  #quiz-form > .category:nth-child(5),
  #quiz-form > .category:nth-child(5) .category-feedback {
    background: rgba(37,99,235,.08);
  }
}

/* consolidate: was repeated for nth-child(1..5) */
#quiz-form > .category .category-feedback {
  background: var(--surface);
}

/* Per category feedback row under each category */
.category-feedback {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem 0.5rem;
  border-radius: calc(var(--radius) - 6px);
  background: #fff;
  border: 1px solid var(--border);
}

.category-feedback-label {
  margin: 0 0 0.4rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.category-feedback-label-strong {
  display: block;
  font-weight: 600;
  color: var(--primary);
}

.category-feedback-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Make all feedback buttons share the row and be same width */
.category-feedback-option {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  flex: 1 1 0;
  text-align: center;
  min-width: 0;
}

.category-feedback-option.is-selected {
  border-color: #f97316;      /* warm friendly orange */
  background: #ffe4d6;        /* soft peach tint */
  font-weight: 600;
}


/* Micro-interaction: subtle lift on hover (desktop only) */
@media (hover:hover) and (pointer:fine) {
  .category { transition: transform 140ms ease, box-shadow 140ms ease; }
  .category:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
}

/* Toast */
.toast {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  background: var(--primary); color: var(--primary-contrast);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-5px); }

/* Header logo (legacy class no longer used; harmless) */
.site-title { font-size: 1.25rem; font-weight: 700; }


/* NEW - Quiz tiles (match the value-props card look) */
.quiz-card {
  display: block;
  grid-template-columns: none;
  grid-template-areas: none;
  background: linear-gradient(180deg, #fffdf8 0%, #fff6ea 100%);
  border: 1px solid rgba(31, 41, 55, 0.10);
  border-radius: 14px;
  padding: 1.05rem 1.05rem 1rem;
  box-shadow:
    0 10px 24px rgba(31, 41, 55, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.quiz-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(31, 41, 55, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* Remove the old left stripe accents (they fight the new style) */
.quiz-card.played,
.quiz-card.unplayed,
.quiz-card.locked {
  border-left: none;
  opacity: 1;
}

/* Optional - subtle state emphasis without stripes */
.quiz-card.unplayed {
  box-shadow:
    0 10px 24px rgba(31, 41, 55, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.quiz-card.played {
  box-shadow:
    0 0 0 2px rgba(22, 163, 74, 0.10),
    0 10px 24px rgba(31, 41, 55, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.quiz-card.locked {
  box-shadow:
    0 10px 24px rgba(31, 41, 55, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* New 3-row layout */
.quiz-row + .quiz-row { margin-top: .55rem; }

.quiz-round {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
}


/* Can delete
.quiz-status {
  color: var(--accent);
  font-weight: 600;
}

.quiz-score {
  color: #16a34a;
  font-weight: 700;
}
*/

/* Button row - compact on desktop, full-width on mobile */
.quiz-row-3 { margin-top: .75rem; }

.quiz-row-3 .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 160px;
  padding: .55rem 1rem;
  border-radius: 999px;
}

@media (max-width: 520px) {
  /* Mobile layout:
     Row 1: Round (left half) + Button (right half, centered)
     Row 2: Status full width underneath
  */
  .quiz-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "round action"
      "status status";
    row-gap: 0.5rem;
    column-gap: 0.75rem;
    align-items: center;

  }

  /* Remove stacked spacing since grid controls spacing now */
  .quiz-row + .quiz-row { margin-top: 0; }
  .quiz-row-3 { margin-top: 0; }

  .quiz-row-1 { grid-area: round; }
  .quiz-row-2 { grid-area: status; text-align: left; }

  /* Center the button within the right half */
  .quiz-row-3 {
    grid-area: action;
    justify-self: center;
  }

  /* Keep the button a sensible size on mobile */
  .quiz-row-3 .button {
    width: fit-content;
    max-width: 100%;
    min-width: 160px;
  }
}




/* Desktop layout - put Round / Status / Button on one line when there is room */
@media (min-width: 640px) {
  .quiz-card {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    column-gap: 0.9rem;
	  padding-left: 0;
  padding-right: 0;
  }

  /* Remove the stacked spacing on desktop */
  .quiz-row + .quiz-row { margin-top: 0; }
  .quiz-row-3 { margin-top: 0; }

  /* Place the three rows into one grid row */
  .quiz-row-1 { grid-column: 1; justify-self: center; text-align: center; }
  .quiz-row-2 { grid-column: 2; justify-self: center; text-align: center; }
  .quiz-row-3 { grid-column: 3; justify-self: center; }

  /* Keep the button compact on desktop */
  .quiz-row-3 .button {
    width: fit-content;
  }
}



/* Hero */
#hero {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 2.2rem 1rem 6.5rem; /* extra bottom space for the curve */
  text-align: center;

  /* Full-width background */
  background-image: url("img/home-hero-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Make sure it never looks like a card */
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Soft overlay so text stays readable */
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 247, 237, 0.55);
  pointer-events: none;
}

/* Curved bottom "cut-out" - the page background rises up */
#hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 140%;
  height: 160px;
  background: var(--background);
  border-top-left-radius: 100% 100%;
  border-top-right-radius: 100% 100%;
}

/* Keep hero text and CTA above overlays */
#hero > * {
  position: relative;
  z-index: 1;
}

#hero h1 {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 0.5rem 0;
}

.hero-sub {
  margin: 0.5rem auto 0;
  font-size: 1rem;
  opacity: 0.95;
  max-width: 60ch;
}


/* Hero CTA */
.hero-actions {
  margin-top: 0.95rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}


.button.hero-cta {
  font-size: 1.1rem;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  width: auto;
  max-width: 360px;
  box-shadow: 0 8px 20px rgba(217, 72, 15, 0.28);
}

.hero-reassure {
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Mobile - reduce hero height a little */
@media (max-width: 480px) {
  #hero {
    margin: 0.85rem 1rem 0;
    padding: 1.15rem 0.9rem 1rem;
    border-radius: 16px;
  }

  #hero h1 {
    font-size: 1.55rem;
  }
}

/* Homepage - repeat CTA under the current week card (desktop only) */
.active-quiz-cta {
  display: none;
  margin-top: 0.75rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .active-quiz-cta {
    display: block;
  }
}

/* FAQ cards */
#faq {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

#faq .faq-item,
#faq details {
  margin-bottom: 1rem;
}

#faq details > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: -.25rem 0 .25rem;
}
#faq details > summary::-webkit-details-marker { display: none; }
#faq details > summary::marker { content: ""; }
#faq .faq-item h3 {
  margin: 0 0 .5rem 0;
  font-size: 1.05rem;
  color: var(--accent);
}
#faq .faq-item p { margin: 0; font-size: 0.95rem; line-height: 1.4; }

#faq > h2 {
  max-width: 600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Welcome message alignment (when shown in header area) */
#welcome-message {
  text-align: center;
  display: block;
  margin: 0.75rem auto;
}
header #welcome-message {
  flex: 0 0 100%;
  order: 2;
  text-align: center;
  margin: .5rem 0 0;
}

/* Welcome message on home*/
.welcome-chip {
  display: inline-block;
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-weight: 600;
  line-height: 1.2;
}
/* Only show the welcome chip when it has content */
#welcome-message:empty { display: none; }

/* CSP-safe utility classes (replace prior inline styles) */
.row-wrap { display: flex; flex-wrap: wrap; }
.gap-2 { gap: .5rem; }
.align-center { align-items: center; }
.mt-1 { margin-top: 1rem; }
.mt-05 { margin-top: .5rem; }
.text-sm { font-size: .9rem; }
.muted { color: var(--muted); }

/* Inline answer that replaces the Show Answer button
   - one-line answers are about the same height as the button
   - longer answers can grow vertically */
.answer {
  display: none;           /* hidden until revealed */
  font-style: italic;
}

/* Step 2C.1: revealed answer styling - calm and readable */
.answer.is-visible {
  display: inline-flex;   /* was block */
  align-items: center;    /* vertically centers like the buttons */
  background: color-mix(in srgb, var(--cat) 6%, #ffffff);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cat);
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1.25;
}


/* Make Show Answer, the revealed answer pill, and Got it right?
   all the same height and padding */
.question button.show-answer,
.answer.is-visible,
.got-it-label {
  min-height: 44px;                 /* consistent tap target */
  padding: 0.55rem 0.95rem;         /* match your show-answer padding */
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  max-width: 100%;
}


.answer.is-visible::before {
  content: "A: ";
  font-weight: 600;
  margin-right: 0.15rem;
}

.got-it-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 0.45rem 0.9rem;
  border-radius: 999px;

  background: #ffffff;
  border: 1px solid var(--border);

  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 700;

  cursor: pointer;
  user-select: none;
}


.got-it-label input.answer-checkbox {
  margin: 0;
  transform: translateY(1px);
}


/* Pulse + soft green glow when ticked */
.got-it-label-celebrate {
  background: #dcfce7;
  border-color: #22c55e;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.45),
    0 8px 16px rgba(34, 197, 94, 0.4);
  animation: cq-gotit-pulse 260ms ease-out;
}

/* Tiny checkmark that pops up from the right side of the label */
.got-it-sparkle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  pointer-events: none;
  opacity: 0;
  animation: cq-gotit-sparkle 600ms ease-out forwards;
}

@keyframes cq-gotit-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes cq-gotit-sparkle {
  0% {
    transform: translateY(-50%) scale(0.7);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateY(-85%) scale(1.15);
    opacity: 0;
  }
}


/*lock submit button while submitting*/
.submit-container button[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* Make the quiz "Got it right" checkbox use a green accent like the ✅ emoji */
input.answer-checkbox {
  accent-color: #22c55e; /* friendly green - tweak if you prefer a different shade */
}


/* Quiz page - streak module (top of quiz) */
.quiz-streak-wrap {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}

.quiz-streak-help {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}




/* === Inline Sign-in Nudge (brand, simple, CSP-safe) === */
#signin-nudge[hidden] { display: none !important; }
#signin-nudge {
  background: var(--primary); /* charcoal */
  color: var(--surface);      /* cream */
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#signin-nudge .sn-inner {
  max-width: 900px; margin: 0 auto; padding: .75rem 1rem;
  display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
#signin-nudge .sn-text { font-weight: 600; }
#signin-nudge .sn-actions { display: flex; gap: .5rem; align-items: center; }
#signin-nudge .button.small { min-width: auto; }
#signin-nudge .button.small.secondary {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35);
}
#signin-nudge .button.small.secondary:hover { background: rgba(255,255,255,.06); }
#signin-nudge .sn-close {
  background: transparent; border: none; color: var(--surface);
  font-size: 1.25rem; line-height: 1; cursor: pointer; padding: .25rem .4rem; border-radius: 8px;
}
#signin-nudge .sn-close:hover { background: rgba(255,255,255,.08); }


/* Soft Gate (Past Quiz) - white card style */
.cq-gate {
  background: var(--card-bg);
  color: var(--primary);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  max-width: 640px;
  margin: 24px auto;
  text-align: center;
}

.cq-gate h2 {
  font-size: 1.5rem;
  margin: 0 0 8px;
  color: var(--primary);
}

.cq-gate p {
  margin: 0 0 20px;
  color: var(--muted);
}

.cq-gate .actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.cq-btn-primary,
.cq-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none; /* override global link underline */
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s ease, box-shadow 120ms ease, transform 120ms ease, border-color 0.2s ease;
}

.cq-btn-primary {
  background: var(--accent);
  color: #ffffff;
  border: 0;
}

.cq-btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.cq-btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
}

.cq-btn-secondary:hover {
  background: #fff;
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.cq-gate .note {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Mobile - stack buttons full width */
@media (max-width: 480px) {
  .cq-gate .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cq-btn-primary,
  .cq-btn-secondary {
    width: 100%;
  }
}


/* Hide the loading line whenever the login gate is showing */
#login-gate:not([hidden]) + #quiz-loading {
  display: none;
}


/* Leaderboard — brand-aligned, lightweight */
/* optional breathing room for the inner mount */
#leaderboard-box { margin: 8px 0; }


/* Slightly reduce rank badge intensity */
#leaderboard-tile .cq-leaderboard__rank {
  background: rgba(217, 72, 15, 0.10);
}


.cq-leaderboard {
  /* No dark inner box - let the outer card provide the background */
  background: transparent;
  color: var(--primary);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.cq-leaderboard__heading {
  font-weight: 700;
  margin: 0 0 6px 0;
}

.cq-leaderboard__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cq-leaderboard__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  padding: 0.45rem 0;
  border-top: 1px solid var(--border);
}

.cq-leaderboard__row:first-child { border-top: 0; }

.cq-leaderboard__rank {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  background: rgba(217, 72, 15, 0.15);  /* ember tint */
}

.cq-leaderboard__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cq-leaderboard__score {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
}

.cq-leaderboard__empty,
.cq-leaderboard__error {
  opacity: .9;
  padding: 4px 0;
}

#leaderboard-tile .leaderboard-heading {
  font-size: 1.05rem;
  opacity: 0.9;
  margin-bottom: 0.6rem;
}

#leaderboard-tile .cq-leaderboard {
  /* Just a bit of breathing room inside the cream card */
  padding: 0.25rem 0;
}

/* De-emphasise the score (make it tertiary) */
#leaderboard-tile .cq-leaderboard__score {
  font-size: 0.9rem;
  opacity: 0.75;
}

/* Slightly soften the rank badge */
#leaderboard-tile .cq-leaderboard__rank {
  opacity: 0.9;
}

/* Empty and error states should feel calm, not shouty */
#leaderboard-tile .cq-leaderboard__empty,
#leaderboard-tile .cq-leaderboard__error {
  opacity: 0.9;
  font-size: 0.95rem;
}


/* Quiz top boxes - use the same left-aligned heading feel as homepage sections */
.profile-section .page-title {
  text-align: left;
}

#profile-subtitle {
  margin-top: 0.35rem;
}

#profile-content {
  margin-top: 1rem;
}

#profile-status {
  min-height: 1.25rem;
}


/* Make profile labels plain text (override global form label pill style) */
#profile-root .form-group label {
  display: block;
  padding: 0;
  margin-bottom: 0.35rem;
  border: none;
  background: transparent;
}

/* Space between profile form fields */
#profile-root .form-group {
  margin-bottom: 1.25rem;
}

/* Add a line between the two sections */
#profile-root .form-group + .form-group {
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* Section headings inside the profile card */
.profile-group-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

/* PLAY PAGE */
/* Instagram ad landing page */

#play-landing {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}

/* Hero card for the ad landing page */
.insta-hero {
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 2rem 1rem 1.25rem;
}

.insta-hero h1 {
  margin: 0 0 0.5rem 0;
}

.insta-hero .hero-sub {
  margin: 0.5rem auto 0.5rem;
  font-size: 1rem;
  opacity: 0.95;
  max-width: 60ch;
}

/* Small urgency line under the subheading */
.urgency-line {
  margin: 0.25rem auto 0.75rem;
  max-width: 60ch;
}

/* Make the main CTA big and thumb friendly on mobile */
.insta-cta {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0.75rem auto 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
}

/* Secondary CTA under the mini "How it works" */
.insta-cta-secondary {
  margin-top: 0.75rem;
}

/* Reassurance line under the primary button */
.reassurance-line {
  margin-top: 0.25rem;
}

/* Compact "How it works" block inside the hero */
.insta-mini-how {
  margin: 0.9rem auto 0.75rem;
  max-width: 420px;
  text-align: left;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  box-shadow: var(--shadow-sm);
}

.insta-mini-how h2 {
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
}

/* How it works list */
.how-steps {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}

/* Override global <li> styling so these are just simple steps */
.how-steps li {
  display: list-item;
  border: 0;
  padding: 0.25rem 0;
}

/* Follow block styling */
.insta-follow {
  text-align: center;
}

.insta-follow h2 {
  margin-top: 0;
}

.insta-follow .social-btn.ig {
  margin-top: 0.75rem;
}


/* title text on the pages */
.page-title {
  text-align: center;
  font-size: 1.8rem;   /* tweak if you want bigger or smaller */
  margin: 0 0 1.5rem 0;
}

.page-title-small {
  font-size: 1.05rem;   /* Smaller than the main round title */
  margin-bottom: 0.4rem;
}

/* Quiz "How to play" card – slightly tighter so it uses less space */
.quiz-page-howto {
  margin-bottom: 1rem;         /* a bit less gap under the box */
  padding-bottom: 0.7rem;      /* trims bottom padding inside the box */
}

.quiz-page-howto .quiz-intro {
  margin: 0.4rem 0 0.6rem;     /* smaller bottom margin under the text */
}

.quiz-finish-hint {
  text-align: center;
  margin: 0 1.25rem 0.5rem;
  font-size: 0.9rem;
  color: #4b5563; /* slate-ish */
}

.quiz-finish-hint strong {
  color: var(--accent, #d9480f);
}

.quiz-footer-note {
  text-align: center;
  margin: -0.25rem 1.25rem 1.75rem;
  font-size: 0.75rem;
  color: var(--muted);
}

/* === Passwordless Login page - match Profile page look === */

/* Match profile subtitle + status spacing */
#login-subtitle { margin-top: 0.35rem; }

/* Use one consistent input style (login already uses class="profile-input") */
.profile-input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 1rem;
  box-sizing: border-box;
}

/* Tight helper text under fields (replaces inline styles in login.js) */
.form-help {
  margin: 0.5rem 0 0;
}

/* Left-align actions when we use quiz-actions for forms */
.actions-left {
  justify-content: flex-start !important;
}

/* Login wrapper - remove the extra inner "card" box.
   The outer page section already provides the card styling. */
#login-card {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  row-gap: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;

  transform: none !important;
  transition: none !important;
}

/* Login page - KISS layout (no nested boxes) */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.login-input {
  margin: 0; /* keeps spacing consistent with profile page */
}

/* Login buttons - use cq-btn styling but don’t go full width on desktop */
.login-primary {
  align-self: center;      /* prevents flex “stretch” full width */
  width: auto;             /* size to content */
  justify-content: center; /* keeps text nicely centered */
}

/* Login flow - keep input + button typography consistent with the rest of the site */
.login-form input,
.login-form button {
  font-family: inherit;
  font-size: 1rem;
}


/* Mobile - keep it thumb-friendly */
@media (max-width: 480px) {
  .login-primary {
    align-self: stretch;
    width: 100%;
  }
}

/* Results page - inline auth slot sizing (keeps login page unchanged) */
.auth-inline-slot .profile-input {
  width: 100%;
  max-width: 26rem;     /* stops the “giant” input on desktop */
  margin-left: auto;
  margin-right: auto;
}

.auth-inline-slot .login-primary {
  align-self: center;   /* override the mobile stretch rule above */
  width: 100%;
  max-width: 15rem;     /* matches Share button width */
  margin-left: auto;
  margin-right: auto;
}


/* Results - streak stats (calm inline) */
.result-stats {
  margin: 0.7rem auto 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  align-items: baseline;
}

.result-stat {
  text-align: center;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.result-stat-number {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.1;
  color: var(--text, #111827);
}

.result-stat-label {
  margin-top: 0.15rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted, #6b7280);
  	text-align: center;
	line-height: 1.05;
	min-height: 2.2em; /* reserves two lines so all columns align */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.05rem;
}

.result-stat-label span {
  display: block;
}

.result-stats-help {
  margin: 0.55rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
}



/* Disabled state (used by login flow buttons) */
.cq-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-sm);
}

.login-link {
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.1rem;
  text-align: left;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.95rem;
}


#login-card:hover {
  transform: none !important;
  box-shadow: none !important;
}



/* If login-status has both muted + error, ensure error wins */
.muted.error {
  color: #dc2626;
}


/* Login polish - remove the big empty gap under the button */
#login-status {
  min-height: 0;        /* don't reserve space */
  margin: 0.5rem 0 0;   /* small, controlled spacing when text exists */
}

#login-status:empty {
  display: none;        /* hide it when there's no message */
}


/* Results page inline auth - do not reserve empty status space */
.auth-inline-slot #login-status {
  min-height: 0;
  margin-top: 0 !important; /* overrides the inline 10px margin in authFlow */
}

.auth-inline-slot #login-status:empty {
  display: none;
}


#login-code.login-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  text-align: center;
}

/* Login flow - keep fonts consistent with the rest of the site */
#login-card input,
#login-card button {
  font-family: inherit;
}

#login-card .login-link {
  font-family: inherit;
}


/* Ignite - scrolling question taste */
.ignite-taste {
  margin-top: 1rem;
}

.ignite-taste-title {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  text-align: center;
  opacity: 0.9;
}

.ignite-ticker {
  position: relative;
  height: 210px;            /* slim + focused */
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(2px);
}

.ignite-ticker-track {
  display: flex;
  flex-direction: column;
  animation: igniteScroll 22s linear infinite;
}

.ignite-q-list {
  list-style: none;
  padding: 0.75rem 0.9rem;
  margin: 0;
}

.ignite-q-list li {
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-weight: 600;
  color: #1f2937;
}

.ignite-q-list li:last-child {
  border-bottom: 0;
}

.ignite-ticker-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 38px;
  pointer-events: none;
  z-index: 2;
}

.ignite-ticker-fade.top {
  top: 0;
  background: linear-gradient(to bottom, rgba(255,247,237,1), rgba(255,247,237,0));
}

.ignite-ticker-fade.bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(255,247,237,1), rgba(255,247,237,0));
}

/* Moves up by exactly one list because we duplicated the list */
@keyframes igniteScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}


/* =========================================================
   Step 3C - Make "This Week’s Quiz" a heading + single card
   ========================================================= */

section.active-quiz {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

section.active-quiz > .card,
section.active-quiz > .panel {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Past page - current week categories inside a tile */
.quiz-card .quiz-extra {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(31, 41, 55, 0.10);
  text-align: left;
}

/* On desktop the quiz-card is a 3-column grid.
   Make the extra content span all columns and sit nicely under the centered row. */
@media (min-width: 640px) {
  .quiz-card .quiz-extra {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 560px; /* tweak 520-620 to taste */
  }
}

/* Optional tidy spacing for whatever the categories renderer outputs */
.quiz-card .quiz-extra h4,
.quiz-card .quiz-extra h3 {
  margin: 0 0 0.5rem 0;
}

.quiz-card .quiz-extra ul {
  margin: 0;
  padding-left: 1.1rem;
}


/* =========================================================
   Mobile hero fixes - full bleed + curve alignment
   ========================================================= */

@media (max-width: 600px) {
  /* Remove any layout gap above the hero */
  main {
    padding-top: 0;
  }

  /* Force hero to full-bleed across the viewport (ignores container padding) */
  #hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;

    /* Ensure no rounded corners show page background */
    border-radius: 0;
    overflow: visible;

    /* Tighter vertical spacing on mobile */
    padding: 1.6rem 1rem 5.6rem;

    /* Background positioning for mobile */
    background-position: center top;
  }
  
  #hero .button.hero-cta {
  max-width: 320px;
 }
  /* Curve tuned for mobile so it intersects the CTA area nicely */
  #hero::after {
    width: 170%;
    height: 150px;
  }
}


/* =========================================================
   Value props box under the hero
   ========================================================= */

.value-props {
  margin: -6rem auto 1.2rem; /* pull value props box up into the hero curve */
  padding: 0 1rem;             /* align with main padding */
}

/* redundant, replacded by shared rule below
.value-props-inner {
  background: linear-gradient(180deg, #fffdf8 0%, #fff4e6 100%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 0.95rem 1rem;
  backdrop-filter: blur(6px);
}
*/

/* Standard box - shared by Value Props and This Week's Quiz (current card only) */
.value-props-inner,
.quiz-card,
#faq .faq-item,
#leaderboard-box,
.quiz-page {
  background: linear-gradient(180deg, #fffdf8 0%, #fff4e6 100%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 0.95rem 1rem;
  backdrop-filter: blur(6px);
  max-width: 600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Quiz page - category cards reuse the standard box styling */
.category.quiz-page {
  padding: 0;              /* cancel the .quiz-page shared padding */
  padding-bottom: 1rem;    /* keep the nice bottom buffer you just added */
  overflow: visible;
  position: relative;
}

.vp-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.35rem 0;
}

/* Value props tile - remove the extra top padding from the first row only */
.value-props-inner .vp-row:first-child {
  padding-top: 0;
}

.vp-emoji {
  font-size: 1.25rem;
  line-height: 1.1;
  margin-top: 0.05rem;
}

.vp-text {
  font-family: 'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text);
  font-weight: 600;
}

/* Mobile tuning */
@media (max-width: 600px) {
  .value-props {
    margin: -5.6rem auto 1rem; /* pull value props box up into the hero curve */
    padding: 0 1rem;
  }

  .vp-text {
    font-size: 0.98rem;
  }
}

@media (max-width: 600px) {
  main .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* =========================================================
   Gradual migration helpers
   ========================================================= */

/* Use this on any SECTION that should not look like a card */
.section-plain {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   Content column - consistent, premium width
   ========================================================= */

main .container {
  max-width: 900px;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  margin: 0 auto;
}

/* On very wide screens, slightly widen for comfort */
@media (min-width: 1200px) {
  main .container {
    max-width: 980px;
  }
}

/* Critical: hidden welcome-box must not take any layout space */
#welcome-box[hidden] {
  display: none !important;
}


/* Centre welcome tile content only */
#welcome-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Results - inline login link in the "Want to keep playing?" sentence */
.result-streak-login-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}