/* In Hot Pursuit of Happiness — small reader-shell stylesheet.
 *
 * Loaded by every reading surface that uses reader.js. The CSS custom
 * properties on :root[data-palette="…"] are the toggle's mechanism; the
 * surface's own stylesheet must consume them (background/color = var(...))
 * for the toggle to take visible effect. */

:root {
  /* Daylight defaults (match book.json:palette). The surface stylesheet
   * sets --paper/--ink/--accent inline; this fills in the role variables
   * that the per-palette overrides below also touch.
   *
   * --frame  : dark outer surround (body bg) around .page-paper.
   * --chrome : the LIGHT color in the active palette, used for elements
   *            that sit on --frame (nav arrows, page folio, etc.) and
   *            therefore need to contrast with it. In daylight that's
   *            --paper (cream); in twilight/phosphor it's --ink (the
   *            bright text color), since --paper becomes the dark page
   *            color and would be invisible against the darker frame. */
  --frame: #1a1714;
  --chrome: var(--paper);
}

:root[data-palette="twilight"] {
  --paper: #1f1d20 !important;
  --ink: #d9d2c0 !important;
  --accent: #c0a060 !important;
  --frame: #0e0c0e !important;
  --chrome: var(--ink) !important;
}
:root[data-palette="phosphor"] {
  --paper: #0a1208 !important;        /* slightly green-tinted near-black */
  --ink: #33ff77 !important;
  --accent: #66ff99 !important;
  --frame: #000 !important;
  --chrome: var(--ink) !important;
}

/* For per-page HTML the .page is the panel-bearing surface. */
:root[data-palette="twilight"] .page { background: var(--paper) !important; }
:root[data-palette="phosphor"] .page { background: var(--paper) !important; }

/* The splash, contents, and story pages use .page-paper for their main
 * reading surface. Frame body bg distinct from paper bg so the page edge
 * stays visible in all palettes. */
:root[data-palette="twilight"] body,
:root[data-palette="phosphor"] body {
  background: var(--frame) !important;
}
:root[data-palette="twilight"] .page-paper,
:root[data-palette="phosphor"] .page-paper {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* ── Ghost-pitch overlay (per-page only, gated by ?ghost=1) ─────────── */
.ghost-pitch {
  display: none;
}
:root[data-ghost="1"] .panel .ghost-pitch {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px 12px;
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(244, 234, 216, 0.92);
  background: linear-gradient(to top, rgba(26,23,20,0.78) 0%, rgba(26,23,20,0.55) 80%, transparent 100%);
  pointer-events: none;
  z-index: 4;
}

/* ── Deep-link pulse ─────────────────────────────────────────────── */
@keyframes ihpoh-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(122, 59, 31, 0.55); outline: 2px solid rgba(122, 59, 31, 0.65); }
  100% { box-shadow: 0 0 0 28px rgba(122, 59, 31, 0); outline: 2px solid rgba(122, 59, 31, 0); }
}
.ihpoh-pulse {
  animation: ihpoh-pulse 1.3s ease-out 2;
  outline-offset: 4px;
}

/* ── Toast ───────────────────────────────────────────────────────── */
.ihpoh-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1714;
  color: #f4ead8;
  padding: 9px 18px;
  border: 1px solid rgba(244, 234, 216, 0.25);
  border-radius: 2px;
  font: 13px/1 'IM Fell English', Georgia, serif;
  letter-spacing: 0.06em;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  pointer-events: none;
}
.ihpoh-toast--leave {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}

/* ── Cinematic mode ─────────────────────────────────────────────── */
body.ihpoh-cinematic .nav-btn,
body.ihpoh-cinematic .page-folio {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
body.ihpoh-cinematic { cursor: none; }
body.ihpoh-cinematic:hover { cursor: auto; }

/* ── Lightbox (lazy-module driven) ──────────────────────────────── */
.ihpoh-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: zoom-out;
  animation: ihpoh-lightbox-fade 0.18s ease-out;
}
@keyframes ihpoh-lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ihpoh-lightbox img,
.ihpoh-lightbox video {
  max-width: 96vw;
  max-height: 96vh;
  object-fit: contain;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
}

/* ── Konami diagnostic overlay ─────────────────────────────────── */
.ihpoh-diag-bbox {
  position: absolute;
  border: 1px solid #c84a1f;
  background: rgba(200, 74, 31, 0.07);
  font: 11px/1 'Courier New', Courier, monospace;
  color: #c84a1f;
  padding: 2px 4px;
  pointer-events: none;
  z-index: 50;
}
.ihpoh-diag-bbox::before {
  content: attr(data-label);
  display: block;
}

/* ── Motion glyph (for panels with ambient animation) ──────────── */
.motion-glyph {
  position: absolute;
  right: 14px;
  bottom: 14px;
  font-size: 18px;
  color: var(--ink, #1a1714);
  opacity: 0.32;
  pointer-events: none;
  transition: opacity 240ms ease-out;
  text-shadow: 0 0 4px var(--paper, #f4ead8);
  z-index: 5;
}
.panel[data-animated="true"]:hover .motion-glyph { opacity: 0.82; }

/* ── Final-page badge (lazy-module driven) ─────────────────────── */
.ihpoh-badge-host {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 36px auto 12px;
  text-align: center;
  font-family: 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(244, 234, 216, 0.7);
  position: relative;
  z-index: 10;
}
.ihpoh-badge {
  width: 128px;
  height: 128px;
  display: block;
}

/* ── Print booklet ─────────────────────────────────────────────── */
@media print {
  @page { size: A5; margin: 12mm; }
  html, body {
    background: white !important;
    color: black !important;
  }
  .nav-btn, .page-folio, .ihpoh-toast, .ihpoh-lightbox, .motion-glyph {
    display: none !important;
  }
  .page-wrap, .page {
    box-shadow: none !important;
    transform: none !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }
  .panel { page-break-inside: avoid; }
  .panel-image { max-width: 100% !important; height: auto !important; }
}
:root[data-print="1"] body {
  background: white !important;
  color: black !important;
  max-width: 148mm;
  margin: 0 auto;
  padding: 12mm;
}
:root[data-print="1"] .nav-btn,
:root[data-print="1"] .page-folio {
  display: none !important;
}

/* ── Reduced-motion: turn off non-essential animations ─────────── */
@media (prefers-reduced-motion: reduce) {
  .ihpoh-pulse { animation: none !important; outline: 2px solid rgba(122,59,31,0.65); }
  .ihpoh-toast { transition: none !important; }
}