/* A flat, after-dark palette. Bright era illustrations keep their original ink. */
:root {
  --paper: #0d0e11;
  --ink: #f5f4ef;
  --muted: #b7b9c2;
  --line: #35373f;
  --strong-line: #646875;
  --surface: #17191e;
  --raised: #22252c;
  --accent: #ff824b;
  --accent-soft: #31231d;
  color-scheme: dark;
}

body[data-theme="90"] { --accent: #ff824b; --accent-soft: #31231d; }
body[data-theme="2000"] { --accent: #afe0ca; --accent-soft: #1b2e29; }
body[data-theme="2008"] { --accent: #8ebbf4; --accent-soft: #1b2a40; }
body[data-theme="2015"] { --accent: #c2a0f3; --accent-soft: #2c223b; }
body[data-theme="2020"] { --accent: #d8eea4; --accent-soft: #27301d; }

::selection { background: #d8fa79; color: #20211e; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible,
textarea:focus-visible { outline-color: #d8fa79; }
.site-header { border-color: var(--line); }
.brand-title small { color: var(--muted); }
.publisher-intro { color: var(--muted); }
.icon-btn { background: var(--surface); border-color: var(--line); }
.icon-btn:hover { background: var(--raised); border-color: var(--strong-line); }
.icon-btn[aria-pressed="true"] { background: var(--lime); color: #20211e; border-color: var(--lime); }
.hero p { color: var(--muted); }
.hero h1 span { color: var(--accent); }
.hero h1 span::after { display: none; }
.hero-creature .spark { color: var(--accent); }
.hero-creature .orbit-text { color: var(--muted); }
.hero-creature .small-cursor { background: #c2a0f3; }
.eyebrow { color: var(--muted); }

/* Five colorful entrances, each retaining its own typography and shapes. */
.era-card {
  --paper: #f5f4ef;
  --ink: #20211e;
  --muted: #45483f;
  color: var(--ink);
  border-color: var(--era-accent);
}
.era-card:hover { border-color: #f5f4ef; }
.era-card:focus-visible { outline-color: #f5f4ef; }
.era-record { color: #20211e; }
.cross-mode .mode-symbol { background: #c2a0f3; color: #20211e; }
.resume-btn { color: #20211e; border-color: var(--lime); }
.social-link { background: var(--surface); border-color: var(--strong-line); }
.social-link img { filter: brightness(0) invert(1); }
.social-link:hover { background: var(--raised); border-color: var(--ink); }

/* Only the yellow ADSVARK logo badge has rounded corners. */
.sponsor, .quiz-shell > .sponsor {
  background: #172018;
  border: 1px solid #829750;
  border-radius: 0;
  color: #f5f4ef;
}
.sponsor-copy { border-left-color: #4c5b3d; }
.sponsor-copy strong span { color: #d8fa79; text-decoration: none; }
.sponsor-brand small, .sponsor-copy p { color: #c1ccb6; }
.sponsor-brand a, .sponsor-cta { background: #d8fa79; color: #20211e; }
.sponsor-brand a { border-radius: 14px; }
.sponsor a:focus-visible { outline-color: #f5f4ef; }

/* Questions live on anthracite; the illustrated side remains a color field. */
.quiz-shell, .theme-2008.quiz-shell, .theme-2020.quiz-shell {
  background: var(--surface);
  border-color: var(--strong-line);
}
.quiz-shell .game-topline { background: var(--surface); border-color: var(--line); }
.quiz-shell .chapter-heading .year { color: var(--accent); }
.quiz-shell .progress-dot { background: #3b3f48; }
.quiz-shell .progress-dot.is-done { background: #b7b9c2; }
.quiz-shell .progress-dot.is-current { background: var(--accent); }
.artifact-panel {
  --paper: #f5f4ef;
  --ink: #20211e;
  --muted: #45483f;
  color: #20211e;
}
.theme-90 .artifact-panel { background: #ff824b; border-right-color: #3b3f48; }
.era-window { --paper: #f5f4ef; color: #20211e; }
.window-controls span { background: #f5f4ef; color: #20211e; }
body[data-theme="90"] .era-window { background: #2a2d33; color: #f5f4ef; border-color: #646875; box-shadow: none; }
body[data-theme="2000"] .era-window { background: #afe0ca; border-color: #557563; }
body[data-theme="2008"] .era-window { background: #236bd0; color: #fff; }
body[data-theme="2015"] .era-window { background: #c2a0f3; border-color: #77658e; }
body[data-theme="2020"] .era-window { background: #d8eea4; border-color: #82945c; }
.theme-2000 .portal-sidebar { background: #121d1b; border-color: #354b42; }
.portal-sidebar button { color: #9fcfff; }
.portal-sidebar .session-count { border-color: #354b42; color: #b5c9bd; }
.theme-2008 .app-tabbar { background: #141f2c; border-color: #354963; }
.app-tabbar button { color: #acccf6; }
.theme-2020 .quiz-layout { background: var(--surface); }
.theme-2020 .chat-avatar { color: #c8b0e1; }
.theme-2020 .question-title { background: #24212c; border-color: #655573; }

.quiz-shell .answer-btn {
  color: var(--ink);
  background: var(--raised);
  border-color: var(--strong-line);
}
.quiz-shell .answer-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.quiz-shell .answer-letter { color: var(--accent); -webkit-text-stroke: 0; }
.quiz-shell .answer-btn:focus-visible { outline-color: var(--accent); }
.quiz-shell .answer-btn.is-correct {
  background: #203125;
  border-color: #8bbd6a;
  box-shadow: inset 0 0 0 1px #8bbd6a;
  color: #f5f4ef;
}
.quiz-shell .answer-btn.is-selected.is-correct {
  background: #314827;
  border-color: #d8fa79;
  box-shadow: inset 0 0 0 1px #d8fa79;
}
.quiz-shell .answer-btn.is-correct .answer-letter, .answer-mark { color: #d8fa79; }
.quiz-shell .answer-btn.is-wrong {
  background: #3c2724;
  border-color: #e99b82;
  box-shadow: inset 0 0 0 1px #e99b82;
  color: #ffd9cc;
}
.quiz-shell .answer-btn.is-wrong .answer-letter, .wrong-mark { color: #ffb69d; }
.quiz-shell .hint-btn { border-color: var(--strong-line); }
.hint-btn:hover { background: var(--raised); }
.hint { color: var(--ink); }
.feedback p { color: #c2c3cb; }
.theme-2020 .feedback { background: #24212c; border-color: #655573; }
.theme-2020 .feedback-correct { background: transparent; border: 0; }
.primary-btn, .next-button { background: #f5f4ef; color: #20211e; border-color: #f5f4ef; }
.primary-btn:hover, .next-button:hover { background: #d8fa79; border-color: #d8fa79; }
.quiz-shell .next-button { background: var(--accent); border-color: var(--accent); color: #20211e; }
.quiz-shell .next-button:hover { background: #f5f4ef; border-color: #f5f4ef; }
.secondary-btn { border-color: var(--strong-line); }
.secondary-btn:hover { background: var(--raised); }

/* Short, vivid feedback stays readable even with reduced motion. */
.quiz-shell .success-heading {
  --ink: #20211e;
  --paper: #f5f4ef;
  background: #d8fa79;
  color: #20211e;
  border-color: #d8fa79;
}
.success-heading .point-reward { background: #20211e; color: #f5f4ef; }
.game-score.is-celebrating { color: #d8fa79; }
.quiz-shell .feedback.feedback-wrong {
  --wrong-surface: #f4c2ad;
  --wrong-edge: #f6a27c;
  --wrong-label: #62321f;
  background: transparent;
}
.feedback.feedback-wrong .wrong-heading { --ink: #20211e; color: #20211e; }

/* A dark collectible card with a colorful, era-specific illustration. */
.fw-result-card { background: var(--surface); border-color: var(--strong-line); }
.fw-result-card .fwrc-header { border-bottom-color: var(--line); }
.fw-result-card .fwrc-series, .fw-result-card .fwrc-score-label,
.fw-result-card .fwrc-score-caption, .fw-result-card .fwrc-signature { color: var(--muted); }
.fw-result-card .fwrc-era-panel {
  --ink: #20211e;
  --paper: #f5f4ef;
  color: #20211e;
  border-color: var(--fwrc-era);
}
.fw-result-card .fwrc-challenge { background: var(--fwrc-era); color: #20211e; border-color: var(--fwrc-era); }
.fw-result-card .fwrc-challenge:hover { background: #f5f4ef; border-color: #f5f4ef; }
.fw-result-card .fwrc-challenge:focus-visible { outline-color: #d8fa79; }
.result-stats { background: var(--surface); border-color: var(--line); }
.level-scale li { border-color: #3b3f48; }
.level-scale .level-reached { border-color: var(--accent); }
.level-scale .level-current { border-color: var(--ink); }
.review-dot { color: #20211e; border-color: #b3d38d; }
.review-dot.wrong { border-color: #e3ab94; }
.challenge-comparison { background: #24301e; color: #d8fa79; border-color: #a0c46c; }
.collection-item.done { --ink: #20211e; --muted: #45483f; color: #20211e; border-color: var(--era-accent); }

.community-stats { background: #19221b; border-color: #40563c; }
.community-era { border-color: #5d7055; }
.community-metrics > div, .community-privacy { border-color: #40563c; }
.community-main-metric b { color: #d8fa79; }
.community-distribution { background: #101813; border-color: #40563c; }
.community-bar-track { border-color: #40563c; }
.community-bar-track > span { background: #8fa77f; border-color: #abc298; }
.community-bar.is-yours .community-bar-track > span { background: #ff824b; border-color: #ffad86; }
.community-bar.is-yours small { background: #ff824b; color: #20211e; border-color: #ffad86; }
.community-distribution figcaption i { background: #ff824b; border-color: #ffad86; }
.community-method, .community-waiting .community-progress-note { color: #b8c5b0; }
.community-progress { background: #303f29; border-color: #5d7055; }
.community-progress > span { background: #d8fa79; }

.newsletter { background: #231e30; border-color: #695580; border-left: 4px solid #c2a0f3; }
.newsletter-copy p, .newsletter-action small { color: #c8bfd3; }
.newsletter-identity > span { color: #c2a0f3; }
.newsletter-cta { background: #c2a0f3; color: #20211e; }
.newsletter-cta:hover { background: #d8c3f6; }

/* Support and credits are part of the same night-time interface. */
.info-dialog { background: var(--surface); border-color: var(--strong-line); }
.info-dialog::backdrop { background: #000b; }
.dialog-close { border-color: var(--strong-line); }
.dialog-close:hover { background: var(--raised); }
.studio-credit { background: #231e30; border-color: #695580; }
.studio-eyebrow { color: #c2a0f3; }
.studio-cta { background: #c2a0f3; color: #20211e; }
.studio-cta:hover { background: #d8c3f6; }
.privacy-note { background: #19271c; border-color: #a1c76f; }
.share-link-box { background: #101115; color: var(--ink); border-color: var(--strong-line); }
.share-link-box input, .share-link-box textarea { background: #17191e; color: var(--ink); border-color: var(--strong-line); }
.toast { background: #d8fa79; color: #20211e; }

@media (max-width: 650px) {
  .theme-2000 .portal-sidebar { border-bottom-color: #354b42; }
  .artifact-panel { border-bottom-color: #3b3f48; }
}