/* Lost Purpose's shared charcoal and lime palette. */
:root {
  color-scheme: dark;
  --paper: #121513;
  --surface: #202421;
  --surface-raised: #292e2a;
  --surface-hover: #353b36;
  --glass: #202621d9;
  --glass-edge: #dbe6db2c;
  --glass-light: inset 0 1px 0 #ffffff0e;
  --glass-shadow: 0 12px 32px #0003;
  --ink: #f7f9f6;
  --muted: #bcc5bd;
  --line: #434b44;
  --accent: #c7f47b;
  --accent-hover: #d9ff9e;
  --accent-ink: #1c2913;
  --accent-surface: #32432c;
  --green: var(--accent);
  --penalty: #ffb0b7;
  --serif: system-ui, sans-serif;
  --sans: system-ui, sans-serif;
  --mono: 'Courier New', monospace;
}
body, body.history-arcade, body.history-fieldwork {
  --night: var(--paper);
  --light: var(--ink);
  --soft: var(--muted);
  --edge: var(--line);
  --highlight: var(--accent);
  min-height: 100svh;
  background: radial-gradient(ellipse at 72% 0%, #536a3a36, transparent 48rem), var(--paper);
  color: var(--ink);
}
::selection { background: #627b4288; color: white; }
header, .museum-app > header { border-color: var(--line); }
.brand { color: var(--ink); }
.brand-mark, :is(.history-arcade,.history-fieldwork) .brand-mark {
  background: var(--surface-raised); color: var(--green); border: 1px solid #c7f47b60; border-radius: 7px;
  font: 700 25px/43px var(--sans); letter-spacing: -2px;
}
.brand small, nav button, footer, footer p { color: var(--muted); }
nav span, .sound-button span { background: transparent; color: var(--muted); }
nav .nav-active { color: var(--green); border-color: var(--green); }
nav .help-button { border-color: var(--line); }
#collection-count { background: var(--accent-surface); color: var(--green); }
h1, h2, h3 { font-weight: 700; letter-spacing: -.04em; }
.home-heading .eyebrow, .eyebrow { color: var(--accent); }
.home-heading > p:last-child, .home-footnote { color: var(--muted); }
.live-dot { background: var(--green); box-shadow: 0 0 12px #c7f47b35; }
.daily-feature {
  position: relative; isolation: isolate; border: 1px solid var(--glass-edge); border-radius: 15px;
  background: radial-gradient(ellipse at 70% 0, #607d4944, transparent 65%), var(--glass);
  box-shadow: var(--glass-shadow), var(--glass-light); overflow: hidden;
}
.daily-feature::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, #e5eee150 1px, transparent 1.5px);
  background-size: 89px 71px; opacity: .24;
}
.daily-feature::after {
  content: ''; position: absolute; width: 100%; height: 80px; top: -65px; left: -15%;
  border-radius: 50%; box-shadow: 0 12px 35px #c7f47b1c; border-bottom: 1px solid #c7f47b48;
  pointer-events: none; animation: feature-drift 9s ease-in-out infinite alternate;
}
.daily-title-line h2 { color: var(--ink); font-weight: 700; }
.daily-copy > p:not(.eyebrow), .daily-copy > small, .daily-meta, .daily-bottom { color: var(--muted); }
.daily-meta { font-size: 11px; }
.daily-meta span + span::before { color: var(--accent); }
.daily-copy .eyebrow { color: var(--green); }
.daily-bottom { background: #12151366; border-color: var(--line); font-size: 9px; }
.edition-stamp { color: var(--muted); border-color: #c7f47b44; }
.edition-stamp strong { color: var(--accent); font-style: normal; font-variant-numeric: tabular-nums; }
.daily-art .mystery-card { background: #303a30; color: var(--accent); border: 1px solid #c7f47b48; border-radius: 4px; box-shadow: 0 14px 30px #0006; }
.daily-art .card-back { background: #28322a; color: var(--accent); border-color: #c7f47b50; }
.daily-art .card-mid { background: #48594a; }
.daily-art .card-front { background: #354536; animation: artifact-float 6s ease-in-out infinite; }
.daily-art .mystery-card span { color: #dbe6da; }
.archive-circle { border-color: #c7f47b22; }
.daily-seal { background: #273425; color: var(--accent); border-color: #c7f47b66; box-shadow: 0 0 20px #c7f47b12; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.primary, #daily-start, :is(.history-arcade,.history-fieldwork) .primary {
  color: var(--accent-ink); background: var(--green); border: 1px solid #d9ff9e; border-radius: 8px;
  box-shadow: 0 3px 0 #678d41; font-weight: 700;
  transition: transform .25s, box-shadow .25s, background .25s;
}
.primary:hover:not(:disabled), #daily-start:hover { background: var(--accent-hover); box-shadow: 0 3px 0 #678d41, 0 5px 14px #0003; transform: translateY(-2px); }
.primary:disabled { background: var(--surface-raised); color: var(--muted); border-color: var(--line); box-shadow: none; }
.primary span, #daily-start span { background: #1c291312; }
.secondary, #archive-open, .viewer-bottom button { background: var(--surface-raised); color: var(--ink); border-color: #546055; box-shadow: none; }
.secondary:hover, #archive-open:hover, .viewer-bottom button:hover { background: var(--surface-hover); }
.archive-feature-link, .archive-feature-link:hover { color: var(--accent); }
.history-mode-card { background: var(--glass); border-color: var(--glass-edge); border-radius: 12px; box-shadow: var(--glass-light); transition: transform .3s, background .3s, border-color .3s; }
.history-mode-card:hover { background: var(--surface-hover); border-color: var(--green); transform: translateY(-3px); }
.history-mode-card strong { font-size: clamp(17px, 2.3vw, 22px); font-weight: 700; }
.history-mode-card small { color: var(--muted); }
.history-mode-icon { color: var(--green); background: var(--accent-surface); border-color: #60785b; border-radius: 5px; }
.history-mode-card > span:last-child { color: var(--accent); }
.banner-space { color: var(--muted); }
.banner-placement { border-color: var(--line); background: #12151355; }
.workbench { position: relative; background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 12px; box-shadow: var(--glass-shadow), var(--glass-light); transition: border-color .3s, box-shadow .3s; }
.viewer-panel { background: var(--surface-raised); border-color: var(--line); }
.viewer-stage { background-image: radial-gradient(#dfefdf24 .7px, transparent .7px); }
.viewer-stage::before { background: radial-gradient(ellipse, #5b73564f, transparent 70%); }
.orbit-ring { border-color: #c7f47b22; }
.crosshair { color: #c7f47b66; }
.case-tag { border-color: #59685c; background: #171d19aa; color: var(--muted); font-family: var(--mono); }
.scan-tag { color: var(--muted); }
.viewer-bottom, .museum-credit { color: var(--muted); border-color: var(--line); }
.museum-credit span, .object-caption small { color: var(--muted); }
.viewer-bottom button[aria-pressed=true] { background: var(--green); color: var(--accent-ink); }
.object-caption > span { font-style: normal; }
.loading { color: var(--ink); background: #171d19cc; border-radius: 4px; padding: 10px; margin-inline: 15%; }
#purpose-question { font-weight: 700; }
.case-heading .difficulty { background: #153f3c; color: #8aefc2; border-color: #357465; }
.case-heading .difficulty[data-tier=medium] { background: #3b3540; color: #ffdd9a; border-color: #78644f; }
.case-heading .difficulty[data-tier=hard] { background: #3a2540; color: #ffabcc; border-color: #75445e; }
.points-line strong, .total-score strong { color: var(--accent); }
.points-track { background: var(--line); }
.points-track div { background: var(--green); box-shadow: 0 0 8px #c7f47b24; }
#answers .answer { background: var(--surface-raised); border-color: var(--line); color: var(--ink); box-shadow: 0 2px 0 #0004; transition: border-color .25s, background .25s, box-shadow .25s, transform .25s; }
#answers .answer:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--green); transform: translateY(-2px); }
#answers .answer .letter { background: var(--paper); border-color: #4c574e; color: var(--muted); }
#answers .answer.selected { background: var(--accent-surface); border-color: var(--green); box-shadow: inset 0 0 0 1px #c7f47b44, 0 0 18px #c7f47b12; }
#answers .answer.selected .letter { background: var(--green); color: var(--accent-ink); border-color: var(--green); }
#answers .answer.wrong { color: #efabc1; opacity: .65; background: #392b2c; border-color: #664153; }
#answers .answer.answer-correct { background: #15483d; border-color: #65f1ae; color: #d7ffed; box-shadow: 0 0 20px #65f1ae25; }
#answers .answer.answer-wrong { background: #532738; border-color: #ff6584; color: #fff0f4; box-shadow: 0 0 20px #ff658425; }
.feedback, .answer-heading .wrong-cost { color: var(--penalty); }
.clue-drawer { background: var(--paper); }
.clue-drawer summary span, .clue-explainer { color: var(--muted); }
.clue, .clue.unlocked { background: var(--surface-raised); border-color: var(--line); box-shadow: none; }
.clue:hover { background: var(--surface-hover); }
.clue .clue-price { color: var(--penalty); }
.clue .clue-after, .clue small, .clue.unlocked small { color: var(--muted); }
.clue .clue-action, .clue.unlocked span, .paid-label { color: var(--green); border-color: var(--line); }
.reveal-badge { background: #133f39; color: #91f0c1; }
.reveal-score { color: #91f0c1; font-family: var(--mono); }
.reveal-story, .source-note, .reveal-score small, .no-timer { color: var(--muted); }
.source-link { color: var(--green); }
.case-button { background: var(--surface-raised); border-color: var(--line); color: var(--ink); }
.case-button.active { background: var(--accent-surface); border-color: var(--green); color: var(--green); box-shadow: 0 0 16px #c7f47b12; }
.case-button.done::after, .case-button.active.done::after { color: #8aefc2; }
dialog { background: var(--glass); border-color: var(--glass-edge); box-shadow: 0 30px 100px #0009, var(--glass-light); }
dialog::backdrop { background: #0c100daa; }
dialog p, dialog li { color: var(--muted); }
dialog a { color: var(--green); }
.archive-row, .collection-row, .result-tile { background: var(--surface-raised); border-color: var(--line); color: var(--ink); }
.archive-row:hover, .collection-row:hover { background: var(--surface-hover); }
.archive-row small, .archive-action, .result-tile small, .collection-row > span { color: var(--muted); }
.archive-date input { color: var(--ink); background: var(--paper); border-color: var(--line); }
.toast { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--green); box-shadow: 0 8px 30px #0005; }
/* One soft pulse, with an explicit text result as well as the colour. */
.answer-border { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; border: 4px solid var(--result-color); box-shadow: inset 0 0 50px var(--result-glow); }
[data-result=correct] { --result-color: #65f1ae; --result-glow: #65f1ae30; }
[data-result=wrong] { --result-color: #ff6584; --result-glow: #ff658430; }
.workbench[data-result] { border-color: var(--result-color); box-shadow: 0 0 0 2px var(--result-color), 0 0 25px var(--result-glow); }
@keyframes feature-drift { to { transform: translate(25%, 5px); } }
@keyframes artifact-float { 50% { translate: 0 -6px; } }
@media (max-width: 760px) { .brand-mark { line-height: 34px; font-size: 22px; } .answer-border { border-width: 3px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.workbench[data-result=correct] .feedback { color: #91f0c1; }
.clue .clue-price small { color: var(--penalty); }
.clue:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--green); }
.clue.unlocked .paid-label { color: var(--muted); }
.case-button { box-shadow: 0 2px 0 #111411; }
.daily-copy .live-dot { background: var(--accent); }
/* Timeline mode shares the same panels and controls. */
.history-panel, .history-object, .timeline-card, .timeline-slot {
  background: var(--surface);
  border-color: var(--line);
}
.timeline-card, .history-object { background: var(--surface-raised); }
.timeline-track { border-color: var(--line); }
.timeline-card img, .history-object img, .history-result-list img { background: var(--paper); }
.timeline-year, .timeline-slot, .history-round strong { color: var(--accent); }
.timeline-slot:hover, .timeline-slot.drop-over { background: var(--accent-surface); border-color: var(--accent); }
.timeline-slot:disabled, .history-feedback { background: #3a252d; color: var(--penalty); border-color: #75525b; }
.history-instruction, .history-date label { color: var(--muted); }
.history-date input { background: var(--paper); border-color: var(--line); }
.history-modes [aria-current="page"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.history-badge { background: var(--surface-hover); color: var(--muted); border-color: var(--line); }

/* A light frost on large surfaces keeps text and controls crisp. */
.daily-feature, .history-mode-card, dialog:not(.first-demo) {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Use spacing and contrast to group content without extra divider lines. */
header, .museum-app > header, .case-strip, .museum-credit, .reveal-facts, .archive-date {
  border: 0;
}
.museum-app footer { justify-content: flex-end; padding-block: 20px; }
.museum-app footer button { font-size: 12px; }
.history-main { padding-bottom: 28px; }
.daily-actions { margin-top: 15px; }
.daily-notes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.daily-notes small:empty, #session-label:empty { display: none; }
.daily-feature::after { border-bottom: 0; }
#game-screen .case-strip { gap: 12px; padding-block: 15px; }
#game-screen #case-buttons { width: auto; }
#game-screen model-viewer { inset-block-end: 12px; }
.case-heading .difficulty { flex: none; }
#question-panel .wrong-cost { margin: 0 0 7px; font-size: 11px; }
#reveal-panel .reveal-title { margin-top: 0; }
#reveal-panel .reveal-facts { margin: 12px 0; padding: 0; }
.history-fieldwork .guess-panel .history-badge { margin-left: 0; }
.score-help { color: var(--muted); font-size: 12px; }
.score-help summary { cursor: pointer; }
.score-help p { margin: 5px 0 0; }