/* The haunted look, on every page. Loaded after each page's own styles.
   Two moods, switched by the moon/sun button in the header (labs/theme.js):
   Default = an old mansion in daylight (parchment, candle-orange, ectoplasm green).
   Evening (html[data-theme="evening"]) = an old farmhouse alone in a foggy field at dusk.
   html:root beats the plain :root token blocks, so these palettes win everywhere. */
html:root {
  --bg: #f3ede1; --fg: #221c2b; --muted: #5f566b; --line: #ddd3c1;
  --card: #fbf7ee; --accent: #2d6a52; --accent-soft: #e1eee6;
  --pop: #9a4a12; --pop-soft: #f5e5cf; --code-bg: #1b1624; --code-fg: #c9f5dc;
  --ok: #e3efe4; --brk: #f6e3dc; --how: #e9e6f3;
  --fog: rgba(120, 104, 140, .10); --glow: rgba(45, 106, 82, .25);
  color-scheme: light;
}
/* Pages darken a few labels for dark phones; the default look stays light, so undo that. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="evening"]) :is(.btn:not(.ghost), .start .n, .step .num, .mnum, .talk button) { color: #fff; }
}

/* The header switch. */
.mode { background: none; border: 1px solid var(--muted); border-radius: 999px; padding: 4px 10px; min-width: 44px; min-height: 44px; font: 15px/1.2 system-ui, sans-serif; color: var(--fg); cursor: pointer; }
.mode:hover, .mode:focus-visible { border-color: var(--pop); outline: none; }
header .wrap { gap: 10px 14px; }
header nav { margin-left: auto; }
.mode { order: 2; }   /* wide screens: after the nav */
@media (max-width: 820px) { .mode { order: 0; margin-left: auto; } header nav { flex-basis: 100%; margin-left: 0; } }   /* phones: beside the name, nav on its own row */

/* The evening field canvas only exists in the evening look. */
.scene canvas { display: none; }

/* Fog that creeps along the bottom of the screen, behind everything. */
body::before {
  content: ""; position: fixed; left: -20%; right: -20%; bottom: 0; height: 45vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 60% at 20% 100%, var(--fog), transparent 70%),
    radial-gradient(ellipse 35% 50% at 60% 100%, var(--fog), transparent 70%),
    radial-gradient(ellipse 45% 55% at 95% 100%, var(--fog), transparent 70%);
}

/* A cobweb hanging in the top corner of the header. */
header .wrap { position: relative; }
header .wrap::after {
  content: ""; position: absolute; top: -16px; right: -64px; width: 56px; height: 56px; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23857a96' stroke-width='1'%3E%3Cpath d='M64 0 L0 64 M64 0 L20 64 M64 0 L44 64 M64 0 L0 20 M64 0 L0 44'/%3E%3Cpath d='M52 0 Q54 10 64 12 M38 0 Q42 22 64 26 M24 0 Q30 34 64 40 M10 0 Q18 46 64 54'/%3E%3C/svg%3E") no-repeat top right / contain;
}

/* The cobweb hangs just outside the header row, so it never sits on the switch or links. */
@media (max-width: 1179px) { header .wrap::after { display: none; } }

/* Pages with a single nav link keep brand ... link [switch] on phones too. */
@media (max-width: 820px) {
  header:not(:has(nav a + a)) nav { flex-basis: auto; margin-left: auto; }
  header:not(:has(nav a + a)) .mode { order: 2; margin-left: 0; }
}

/* Phones: stacked buttons share one width instead of a staircase. */
@media (max-width: 520px) { .btn { display: flex; justify-content: center; width: 100%; margin-right: 0; } }

/* Default look: old-print headings too (body text stays plain). */
html:root:not([data-theme="evening"]) :is(h1, h2, .brand) { font-family: "IM Fell English", Georgia, serif; font-weight: 400; letter-spacing: 0; }

/* Cards glow faintly, like something is inside. */
.lab:hover, .next-haunt:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 26px var(--glow) !important; }

@media (prefers-reduced-motion: no-preference) {
  body::before { animation: creep 38s ease-in-out infinite alternate; }
  @keyframes creep { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

  /* Now and then a ghost drifts across the page. Faint, harmless, never in the way. */
  html::after {
    content: "👻"; position: fixed; top: 38vh; left: 0; font-size: 34px; z-index: 40; pointer-events: none; opacity: 0;
    animation: wander 45s linear 6s infinite;
  }
  @keyframes wander {
    0% { transform: translate(-10vw, 0); opacity: 0; }
    3% { opacity: .22; }
    10% { transform: translate(40vw, -30px); }
    17% { opacity: .22; }
    20% { transform: translate(110vw, 20px); opacity: 0; }
    100% { transform: translate(110vw, 20px); opacity: 0; }
  }

  /* Section squiggles flicker like a candle about once every few seconds. */
  section h2::after, .wall { animation: candle 5s infinite; }
  @keyframes candle { 0%, 90%, 100% { opacity: 1; } 92% { opacity: .4; } 94% { opacity: .9; } 96% { opacity: .5; } }
}

/* ------------------------------------------------------------------ evening */
html[data-theme="evening"]:root {
  --bg: #222b2b; --fg: #e4e8e6; --muted: #a9b3af; --line: #3a4646;
  --card: #2a3433; --accent: #8fd3c0; --accent-soft: #2f3d3e;
  --pop: #f2b866; --pop-soft: #3b3226; --code-bg: #151b1a; --code-fg: #c9f0d6;
  --ok: #26382d; --brk: #3d2a26; --how: #2b3140;
  --night: #2b3742; --fog: rgba(215, 214, 206, .08); --glow: rgba(242, 184, 102, .22);
  --print: "IM Fell English", Georgia, serif;
  --hand: "IM Fell English", Georgia, serif;
  color-scheme: dark;
}
html[data-theme="evening"] body { font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif; font-synthesis: none; }
html[data-theme="evening"] :is(h1, h2, h3, .brand) { font-family: var(--print); font-weight: 400 !important; letter-spacing: 0 !important; }
html[data-theme="evening"] .brand span { color: var(--pop); }
html[data-theme="evening"] header { background: var(--night) !important; border-bottom-color: rgba(0, 0, 0, .25) !important; }
html[data-theme="evening"] header .wrap::after { display: none; }
html[data-theme="evening"] :is(.start .n, .step .num, .mnum, .talk button, .summon button:not(.quick)) { color: #1b2422; }

/* Handwritten quips become old italic print. */
html[data-theme="evening"] :is(.scribble, .card-quip, .stats span, .band blockquote, .crew .try, .mycrew p, .cert .gave,
  .ccna .pinned p, .ccna .score .arrow, .box.mystery p, .quip) { font-style: italic; font-weight: 400 !important; }

/* No sticker shadows: things glow faintly instead, like a candle is behind them. */
html[data-theme="evening"] .btn { background: var(--fg); color: #1b2422 !important; border: 1px solid var(--fg); box-shadow: none; border-radius: 4px; }
html[data-theme="evening"] .btn:hover { transform: none; box-shadow: 0 0 22px var(--glow); }
html[data-theme="evening"] .btn:active { transform: translateY(1px); box-shadow: none; }
html[data-theme="evening"] .btn.ghost { background: rgba(20, 26, 30, .45); color: var(--fg) !important; border-color: var(--muted); }
html[data-theme="evening"] :is(.lab, .next-haunt):hover { transform: translateY(-3px); border-color: var(--pop); box-shadow: 0 0 0 1px var(--pop), 0 0 28px var(--glow) !important; }
html[data-theme="evening"] :is(.cert, .br, .ccna .score div) { border: 1px solid var(--line) !important; box-shadow: none !important; }
html[data-theme="evening"] .hero h1 em { color: var(--pop); background: none; text-shadow: 0 0 26px rgba(242, 184, 102, .35); }
html[data-theme="evening"] .hero-bg { background-image: none; }
html[data-theme="evening"] main p a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
html[data-theme="evening"] .ccna .score .bad b { color: #ff8a7a; }
html[data-theme="evening"] .sketch .s-t-red { fill: #ff8a7a; }
html[data-theme="evening"] .sketch :is(.s-line.s-red, .s-box.s-red) { stroke: #ff8a7a; }
html[data-theme="evening"] .thumb { background: var(--accent-soft); }

/* Homepage: the evening field painted behind the hero (labs/field.js). */
html[data-theme="evening"] .scene { position: relative; overflow: hidden; background: var(--night); }
html[data-theme="evening"] .scene canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-theme="evening"] .scene .hero { position: relative; grid-template-columns: minmax(0, 1fr); max-width: 1040px; padding-bottom: clamp(280px, 48vw, 420px); }
html[data-theme="evening"] .scene .hero > div { max-width: 640px; }
html[data-theme="evening"] .scene .sketch-frame { display: none; }
html[data-theme="evening"] .scene .hero h1 { text-shadow: 0 2px 18px rgba(20, 26, 30, .9); }
html[data-theme="evening"] .scene :is(.scribble, .lead) { text-shadow: 0 0 10px var(--night), 0 0 4px var(--night), 0 1px 2px #000; }
html[data-theme="evening"] .scene .lead { color: var(--fg); }
html[data-theme="evening"] .scene .kicker { background: rgba(20, 26, 30, .5); color: var(--pop); }
html[data-theme="evening"] .stats { padding-top: 36px; }