/* ==========================================================================
 * American Civics Five Minute Quiz — styles.css
 * White background · flag red #B22234 · flag blue #3C3B6E · tasteful USA accents.
 * Premium, family-friendly, mobile-first, desktop-friendly. System fonts only.
 * Readability: no visible text below 16px. Accessible contrast. No external CDNs.
 * 2026-06-27 polish pass (palette harmonized with the merged stylesheet).
 * ========================================================================== */

:root{
  --red:#C8102E;          /* strong flag red */
  --red-700:#9E0C24;
  --blue:#102A54;         /* deep navy */
  --blue-700:#0A1C3A;
  --gold:#C9A227;         /* restrained gold highlight */
  --white:#ffffff;
  --paper:#F5F7FB;
  --paper-2:#e9edf6;
  --line:#dfe4ef;
  --ink:#0E1726;
  --ink-soft:#46506a;
  --good:#16A34A; --good-bg:#DCFCE7;
  --bad:#DC2626;  --bad-bg:#FEE2E2;
  --shadow:0 8px 26px rgba(16,42,84,.14);
  --shadow-sm:0 2px 8px rgba(16,42,84,.08);
  --r:16px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--white); color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:18px; line-height:1.5; -webkit-text-size-adjust:100%;
  min-width:360px; }
body{ overflow-x:auto; }
#app{ max-width:1040px; min-width:360px; margin:0 auto; padding:0 18px 56px; box-sizing:border-box; }

/* ---------------- App bar ---------------- */
.appbar{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 0; background:rgba(255,255,255,.94); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:3px solid var(--red); min-width:360px; }
.brand{ display:flex; flex-direction:column; gap:0; min-width:0; max-width:calc(100% - 120px); flex:1 1 auto; }
/* One line when room; "250th Anniversary" drops as a unit when narrow */
.brand-title{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:0.3em; row-gap:2px;
  font-size:24px; font-weight:800; color:var(--blue); line-height:1.2;
}
/* Keep space between "Bible Knowledge" and "5-Minute…" even when the second line wraps */
.brand-title .brand-a{ white-space:nowrap; }
.brand-title .brand-b{ white-space:nowrap; font-weight:800; color:var(--blue); }
.brand-sub{ display:none; }
.flag-lg{ font-size:30px; }
/* hero no longer repeats the title */
.hero-title{ display:none; }

/* HOLDER beside EN / ES (same row) */
.appbar-actions{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; flex-shrink:0; }
.hdr-holder-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 14px;
  border-radius:999px; font-size:14px; font-weight:900; letter-spacing:.7px; text-transform:uppercase;
  text-decoration:none; color:#1a1300; white-space:nowrap;
  background:linear-gradient(180deg,#ffe08a 0%,#e8c04a 40%,#d4af37 100%);
  border:1px solid #a07820;
  box-shadow:0 3px 0 #8a6a18, 0 8px 14px rgba(168,120,24,.28), inset 0 1px 0 rgba(255,255,255,.7);
}
.hdr-holder-btn:hover{ filter:brightness(1.05); }
.hdr-holder-btn:active{ transform:translateY(1px); box-shadow:0 2px 0 #8a6a18; }

/* Language toggle (segmented pill) */
.lang-toggle{
  display:flex; background:linear-gradient(180deg,#f8fafc,#eef2ff); border:1px solid #c7d2fe;
  border-radius:9999px; padding:3px; box-shadow:0 2px 8px rgba(16,42,84,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.lang-btn{ min-width:48px; min-height:44px; padding:8px 16px; border:none; background:transparent; cursor:pointer;
  font-size:16px; font-weight:800; color:var(--blue); border-radius:9999px; }
.lang-btn.active{
  background:linear-gradient(180deg,#3b5b9e 0%,#102A54 48%,#0A1C3A 100%); color:#fff;
  box-shadow:0 3px 0 #06101f, 0 6px 12px rgba(16,42,84,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.lang-btn:focus-visible{ outline:3px solid #9aa6e6; outline-offset:2px; }

/* ---------------- Hero ---------------- */
.hero{ padding:26px 0 18px; }
.hero-title{ font-size:30px; line-height:1.14; font-weight:900; letter-spacing:-.2px; color:var(--ink); margin:0 0 8px; }
.hero-sub{ font-size:19px; font-weight:700; color:var(--red); margin:0 0 8px; }
/* Hook first, tagline second — one line when wide; each unit drops whole on narrow */
.hero-lead{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:0; row-gap:6px;
  margin:0 0 14px; max-width:100%;
}
.hero-hook-part{
  white-space:nowrap; font-size:20px; font-weight:800; color:var(--red);
  letter-spacing:-.1px;
}
.hero-sep{ white-space:nowrap; font-size:18px; font-weight:700; color:var(--gold); padding:0 2px; }
.hero-tag-part{
  white-space:nowrap; font-size:18px; font-weight:700; color:var(--ink-soft);
}
.hero-hook{ font-size:18px; font-style:italic; color:var(--ink-soft); margin:0; }

.section-label{ font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--ink-soft); margin:22px 0 12px; }

/* ---------------- Category grid ---------------- */
.categories{ display:grid; grid-template-columns:1fr; gap:16px; }
.category-card{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%); border:1px solid var(--line);
  border-radius:18px; padding:18px;
  box-shadow:0 4px 0 rgba(16,42,84,.06), var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.category-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 0 rgba(16,42,84,.08), 0 14px 28px rgba(16,42,84,.14);
  border-color:#c7d2fe;
}
.card-top{ display:flex; align-items:center; gap:14px; }
.card-emoji{ font-size:30px; width:56px; height:56px; flex:0 0 56px; display:flex; align-items:center; justify-content:center;
  background:var(--paper); border:1px solid var(--line); border-radius:14px; }
.card-titles{ min-width:0; }
.card-title{ font-size:19px; font-weight:800; color:var(--blue); }
.card-desc{ font-size:16px; color:var(--ink-soft); margin-top:2px; }
.card-modes{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 6px; }
.mode-chip{ font-size:16px; font-weight:700; color:var(--blue); background:var(--paper-2); border:1px solid var(--line);
  border-radius:9999px; padding:5px 12px; }
.card-progress{ font-size:16px; color:var(--red); font-weight:700; margin:6px 0 12px; }
.card-actions{ display:flex; gap:10px; }
.card-actions .btn{ width:auto; flex:1; margin:0; }

.footer-note{ font-size:16px; color:var(--ink-soft); text-align:center; margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }
.link-btn{ font-size:16px; font-weight:800; color:var(--blue); background:none; border:none; cursor:pointer; text-decoration:underline; padding:6px; }

/* ---------------- Page heads ---------------- */
.page-head{ margin:18px 0 8px; }
.page-title{ font-size:26px; font-weight:900; color:var(--ink); margin:14px 0 6px; }
.page-desc{ font-size:18px; color:var(--ink-soft); margin:0 0 12px; }

/* ---------------- Buttons (high-end gradients) ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:54px;
  font-size:18px; font-weight:800; border-radius:9999px; border:1px solid transparent; cursor:pointer;
  padding:13px 20px; margin:10px 0; position:relative; overflow:hidden;
  transition:transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);
  transform:translateX(-140%); transition:transform .5s ease;
}
.btn:hover::after{ transform:translateX(140%); }
.btn:hover{ transform:translateY(-1px); filter:brightness(1.04); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:3px solid #9aa6e6; outline-offset:2px; }
.btn[disabled]{ opacity:.42; cursor:default; transform:none; filter:none; }
.btn[disabled]::after{ display:none; }
.btn-blue{
  color:#fff; border-color:#0A1C3A;
  background:linear-gradient(180deg,#3b5b9e 0%,#1e3a6e 40%,#102A54 72%,#0A1C3A 100%);
  box-shadow:0 4px 0 #06101f, 0 10px 18px rgba(16,42,84,.28), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-blue:hover{ filter:brightness(1.06); }
.btn-red{
  color:#fff; border-color:#7a0a1a;
  background:linear-gradient(180deg,#e85a6a 0%,#C8102E 38%,#9E0C24 72%,#7a0a1a 100%);
  box-shadow:0 4px 0 #5c0814, 0 10px 18px rgba(200,16,46,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-red:hover{ filter:brightness(1.06); }
.btn-ghost{
  color:var(--blue); border-color:#c7d2fe;
  background:linear-gradient(180deg,#ffffff 0%,#eef2ff 48%,#e0e7ff 100%);
  box-shadow:0 3px 0 #a5b4fc, 0 8px 16px rgba(16,42,84,.12), inset 0 1px 0 #fff;
}
.btn-ghost:hover{ filter:brightness(1.03); }
.btn-ghost.danger{ color:var(--red); border-color:#fecaca;
  background:linear-gradient(180deg,#fff 0%,#fef2f2 100%); box-shadow:0 3px 0 #fca5a5, 0 8px 14px rgba(220,38,38,.12);
}
.btn-back{
  width:auto; min-height:44px; padding:8px 16px; margin:0; font-size:16px;
  color:#fff; border-color:#0A1C3A;
  background:linear-gradient(180deg,#3b5b9e 0%,#102A54 55%,#0A1C3A 100%);
  box-shadow:0 3px 0 #06101f, 0 6px 12px rgba(16,42,84,.22), inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modes .btn{ margin:8px 0; }

/* ---------------- Score bar / stats ---------------- */
.scorebar,.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.stats{ grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); }
.score-cell,.stat{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 8px; text-align:center; }
.sc-val,.stat-value{ font-size:26px; font-weight:900; color:var(--blue); }
.sc-lab,.stat-label{ font-size:16px; color:var(--ink-soft); margin-top:2px; }

/* ---------------- Flashcards ---------------- */
.count-pill{ display:inline-block; font-size:16px; font-weight:800; color:var(--blue); background:var(--paper);
  border:1px solid var(--line); border-radius:9999px; padding:7px 14px; margin:8px 0 14px; }
.flashcard{ width:100%; min-height:240px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:20px; border:3px solid var(--blue); box-shadow:var(--shadow); padding:28px; text-align:center;
  background:linear-gradient(180deg,#ffffff,#f7f8fd); transition:transform .25s ease, background .2s ease, border-color .2s ease; }
.flashcard.is-back{ background:linear-gradient(180deg,var(--blue),var(--blue-700)); border-color:var(--blue); }
.fc-inner{ font-size:24px; font-weight:800; color:var(--ink); white-space:pre-line; line-height:1.4; }
.flashcard.is-back .fc-inner{ color:#fff; font-weight:700; }
.flip-hint{ text-align:center; font-size:16px; color:var(--ink-soft); margin:12px 0 16px; }
.cards-restart-row{ margin-top:10px; justify-content:center; }
.lab-list{ margin:0 0 16px 1.25rem; padding:0; font-size:16px; line-height:1.55; color:var(--ink); }
.lab-list li{ margin:0 0 8px; }
.lab-steps{ list-style:decimal; }
.lab-list.lab-steps{ list-style:decimal; }

/* ---------------- Timeline ---------------- */
.timeline{ margin:8px 0 18px; }
.tl-item{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.tl-year{ flex:0 0 66px; font-size:20px; font-weight:900; color:var(--red); }
.tl-title{ font-size:18px; font-weight:800; color:var(--blue); }
.tl-text{ font-size:16px; color:var(--ink-soft); margin-top:2px; }

/* ---------------- Quiz ---------------- */
.quiz-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 6px; flex-wrap:wrap; }
.q-cat{ font-size:18px; font-weight:800; color:var(--blue); }
.q-meta{ display:flex; align-items:center; gap:14px; }
.timer{ font-size:28px; font-weight:900; color:var(--blue); }
.timer.low{ color:var(--red); }
.q-progress{ font-size:16px; font-weight:700; color:var(--ink-soft); }
.q-score{ font-size:17px; font-weight:800; color:var(--blue); }
.question{ font-size:22px; font-weight:800; color:var(--ink); white-space:pre-line; line-height:1.35;
  background:var(--paper); padding:18px; border-radius:14px; border-left:6px solid var(--blue); margin:14px 0 16px; }
.options{ display:grid; grid-template-columns:1fr; gap:12px; }
.option{ width:100%; min-height:56px; text-align:left; font-size:18px; font-weight:700; color:var(--ink);
  background:var(--white); border:2px solid var(--line); border-radius:14px; padding:14px 16px; cursor:pointer; transition:border-color .12s, background .12s; }
.option:hover{ border-color:var(--blue); background:#fbfbfe; }
.option.correct{ background:var(--good-bg); border-color:var(--good); color:#0f6b3a; }
.option.incorrect{ background:var(--bad-bg); border-color:var(--bad); color:#9c1c1c; }
.quiz-actions{ margin-top:14px; }

/* ---------------- Results ---------------- */
.result-title{ font-size:28px; font-weight:900; color:var(--ink); text-align:center; margin:18px 0 6px; }
.result-hero{ text-align:center; padding:8px 0 4px; }
.rh-num{ font-size:64px; font-weight:900; color:var(--blue); line-height:1; }
.rh-lab{ font-size:18px; font-weight:700; color:var(--ink-soft); }
.saved-pill{ text-align:center; font-size:17px; font-weight:800; color:#0f6b3a; background:var(--good-bg);
  border:1px solid #bfe6cf; border-radius:14px; padding:10px; margin:12px 0; }

/* ---------------- Review ---------------- */
.review-item{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px; margin:10px 0; }
.ri-q{ font-size:18px; font-weight:800; color:var(--ink); white-space:pre-line; }
.ri-row{ font-size:17px; margin-top:4px; }
.ri-your{ color:var(--red); }
.ri-correct{ color:#0f6b3a; }
.muted{ font-size:17px; color:var(--ink-soft); }

/* ---------------- About ---------------- */
.about-card{ background:linear-gradient(180deg,#ffffff,#f6f7fb); border:1px solid var(--line);
  border-left:6px solid var(--red); border-radius:18px; padding:18px; box-shadow:var(--shadow-sm); }
.about-price{ font-size:26px; font-weight:900; color:var(--blue); }
.about-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.tag{ font-size:16px; font-weight:700; color:var(--blue); background:var(--paper-2); border:1px solid var(--line); border-radius:9999px; padding:6px 12px; }
.about-blurb{ font-size:17px; color:var(--ink-soft); margin:8px 0 0; }
.lang-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.opt{ min-height:54px; font-size:18px; font-weight:800; color:var(--blue); background:var(--white); border:2px solid var(--line); border-radius:14px; cursor:pointer; }
.opt.on{ border-color:var(--blue); background:#eef0fa; }
.privacy-note{ font-size:16px; color:var(--ink-soft); margin:16px 0; }

/* ---------------- Desktop ---------------- */
@media (min-width:720px){
  .categories{ grid-template-columns:1fr 1fr; }
  .hero-title{ font-size:36px; }
}
@media (prefers-reduced-motion:reduce){
  .category-card,.btn,.flashcard{ transition:none; }
  .btn:hover,.btn:active,.category-card:hover{ transform:none; }
}

/* ===================== 5-minute challenge patch (high-end) ============== */
.hero{ padding:24px 0 16px; border-bottom:none; }
.hero-title{ font-size:30px; line-height:1.14; font-weight:900; color:var(--ink); margin:0 0 10px; }
/* Keep the category list on one line (do not drop "places." etc.) */
.hero-desc{
  font-size: clamp(12px, 2.6vw, 17px);
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: none;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  line-height: 1.35;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-cta .btn{ width:auto; margin:0; }
.btn-hero{
  font-size:20px; min-height:60px; padding:16px 28px;
  box-shadow:0 5px 0 #5c0814, 0 14px 24px rgba(200,16,46,.28), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-hero-sec{ min-height:56px; padding:14px 22px; font-size:17px; }
.btn-hero:hover{ filter:brightness(1.05); }

.section-head{ font-size:20px; font-weight:900; color:var(--blue); margin:26px 0 12px;
  padding-bottom:8px; border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--gold),#f5e6a8,var(--gold)) 1; }
.section-sub{ color:var(--ink-soft); border-bottom-color:var(--line); }
.section-note{ font-size:16px; color:var(--ink-soft); margin:0 0 12px; }

.card-progress.has{ color:var(--red); }
.btn-sm{ min-height:44px; font-size:16px; padding:10px 14px; }
.card-actions .btn-sm{ flex:0 0 auto; }

/* Study Tools (secondary) */
.study-tools{ display:grid; grid-template-columns:1fr; gap:10px; }
.tool-btn{
  width:100%; text-align:left; font-size:17px; font-weight:700; color:var(--blue);
  background:linear-gradient(180deg,#fff,#eef2ff); border:1px solid #c7d2fe; border-radius:14px;
  padding:14px 16px; cursor:pointer;
  box-shadow:0 3px 0 #a5b4fc, 0 8px 14px rgba(16,42,84,.1), inset 0 1px 0 #fff;
  transition:transform .08s, filter .15s;
}
.tool-btn:hover{ filter:brightness(1.03); transform:translateY(-1px); }
.tool-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

/* When the second phrase wraps, hide the · so the line break is clean */
@media (max-width:640px){
  .hero-sep{ width:100%; height:0; overflow:hidden; padding:0; margin:0; opacity:0; }
}

.appbar{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96));
  box-shadow:0 4px 16px rgba(16,42,84,.06);
}
.option{
  box-shadow:0 2px 0 rgba(16,42,84,.05), 0 4px 10px rgba(16,42,84,.04);
}
.option:hover{
  border-color:var(--blue);
  background:linear-gradient(180deg,#fff,#eef2ff);
  box-shadow:0 3px 0 #c7d2fe, 0 8px 16px rgba(16,42,84,.1);
}

/* Results extras */
.best-banner{ text-align:center; font-size:18px; font-weight:900; color:var(--blue);
  background:#fff8e1; border:1px solid var(--gold); border-radius:14px; padding:10px; margin:6px 0; }
.result-meta{ text-align:center; margin:8px 0; }
.rm-cat{ font-size:17px; font-weight:700; color:var(--ink-soft); }
.beat-note{ text-align:center; font-size:17px; font-weight:800; color:var(--red); margin:8px 0; }

/* Scores screen */
.scores-list{ display:grid; grid-template-columns:1fr; gap:10px; margin:8px 0 16px; }
.score-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.sr-label{ font-size:17px; font-weight:800; color:var(--blue); }
.sr-val{ font-size:16px; font-weight:700; color:var(--red); }

/* hero accent bar under header */
.appbar{ border-bottom:3px solid var(--red); }
.brand-title{ color:var(--blue); }

/* Readable independence disclaimer (>=16px, not fine print) */
.disclaimer{ font-size:16px; line-height:1.5; color:var(--ink-soft); text-align:center;
  max-width:62ch; margin:18px auto 0; padding:14px 16px; background:var(--paper);
  border:1px solid var(--line); border-radius:14px; }

/* Answer explanation + Next control (>=16px) */
.explain{ font-size:16px; line-height:1.5; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:12px;
  padding:12px 14px; margin:14px 0 6px; }
.explain-label{ font-weight:700; color:var(--blue); }
.next-row{ display:flex; justify-content:flex-end; margin-top:6px; }
.btn-next{ min-width:140px; }

/* Tagline + live bilingual toggle hint (>=16px) */
.hero-tagline{ font-size:18px; font-weight:600; color:var(--red); margin:2px 0 10px; }
.toggle-hint{ font-size:16px; color:var(--blue); opacity:.85; margin:8px 0 0; }
/* Polished language toggle (not tiny, clear active state) */
.lang-toggle{ display:inline-flex; gap:2px; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:3px; }
.lang-btn{ min-width:48px; min-height:36px; font-size:16px; font-weight:700; border:0; border-radius:999px; background:transparent; color:var(--blue); cursor:pointer; }
.lang-btn.active{ background:var(--blue); color:#fff; }
.ri-expl{ color:var(--blue); }
/* Full score rows + share */
.score-row-full{ flex-direction:column; align-items:stretch !important; gap:6px; padding:12px 14px; }
.score-row-full .sr-val{ white-space:normal; line-height:1.35; }
.score-row-full .sr-sub{ font-size:14px; font-weight:600; color:var(--muted,#64748b); line-height:1.35; }
.card-progress{ white-space:normal; line-height:1.35; }