/* ============================================================
   read.css — Story reader page
   Pairs with read.html.  Shares the dark editorial aesthetic
   of play.html: #0a0a0a ground, gold accent, Cinzel / Raleway.
   ============================================================ */

/* ── CSS custom properties (mirrors play.html inline vars) ── */
:root {
  --read-gold-light: #fae99b;
  --read-gold-medium: #ecce6d;
  --read-gold-dark: #bc9300;
  --read-gold-glow: rgba(250, 233, 155, 0.18);
  --read-gold-border: rgba(250, 233, 155, 0.28);
  --read-bg: #0a0a0a;
  --read-surface: #111111;
}

/* ── Reset & base ─────────────────────────────────────────── */

/* Restore [hidden] semantics — author display:flex would otherwise override the
   UA stylesheet's display:none, making hidden panels visible on load. */
[hidden] {
  display: none !important;
}

/* Wrap in @layer base so Tailwind's @layer utilities (engine.css) wins.
   Unlayered rules beat all @layer declarations regardless of specificity —
   without this, `* { margin:0; padding:0 }` would silently crush every
   Tailwind spacing utility (.p-4, .space-y-4, .rounded-lg, etc.). */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

html,
body {
  height: 100%; /* fallback: ancient browsers */
  height: 100dvh; /* modern: dynamic viewport — excludes browser toolbar,
                     mirrors Capacitor native container sizing */
  overflow: hidden;
  background: var(--read-bg);
  color: #ffffff;
  font-family:
    'Raleway',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

/* ── Page layout: header + game fill remaining height ─────── */
.read-page {
  display: flex;
  flex-direction: column;
  height: 100%; /* fallback */
  height: 100dvh; /* dynamic viewport — keeps flex chain correctly bounded */
}

/* ── Sticky header ────────────────────────────────────────── */
.read-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--read-gold-border);
  flex-shrink: 0;
  min-height: 52px;
}

.read-back-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #c8c8c8;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    color 0.2s,
    background 0.2s,
    transform 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}

.read-back-btn:hover {
  color: var(--read-gold-light);
  background: var(--read-gold-glow);
  transform: translateX(-2px);
}

.read-back-btn:focus-visible {
  outline: 2px solid rgba(250, 233, 155, 0.72);
  outline-offset: 2px;
}

.read-back-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Story title in header */
.read-story-title {
  flex: 1;
  font-family: 'Cinzel', serif;
  font-size: clamp(0.8rem, 2vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--read-gold-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Genre pill */
.read-genre-pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: linear-gradient(135deg, var(--read-gold-light) 0%, var(--read-gold-medium) 100%);
  flex-shrink: 0;
}

/* ── Game container ────────────────────────────────────────── */
.read-game-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  /* No background here — theme background is owned by the React app (bg-gray-50,
     bg-parchment-bg, bg-theme-bg, etc.) so it adapts to the player's theme.
     Desktop outer margins stay dark via html/body rules below. */
}

#root {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /* No hardcoded background — React app owns the theme colour.
     .read-loading (pre-mount) keeps its own dark background via its own rule.
     After mount, bg-gray-50 / bg-parchment-bg / bg-theme-bg on child divs
     cover every pixel, so no black bleed-through regardless of theme. */
  display: flex;
  flex-direction: column;
}

#root > * {
  flex: 1 0 auto;
  min-height: 100%;
}

/* ── Loading state ─────────────────────────────────────────── */
/* Lives inside #root (like play.html) — React replaces it on mount.
   height/width 100% fills #root which is itself position:absolute inset:0. */
.read-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  height: 100%;
  width: 100%;
  background: var(--read-bg);
  text-align: center;
  padding: 2rem;
}

.read-loading-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(250, 233, 155, 0.15);
  border-top-color: var(--read-gold-medium);
  animation: read-spin 1s linear infinite;
}

@keyframes read-spin {
  to {
    transform: rotate(360deg);
  }
}

.read-loading-text {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: rgba(250, 233, 155, 0.55);
  text-transform: uppercase;
}

/* ── Feedback states (not-found / error) ───────────────────── */
.read-feedback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--read-bg);
  text-align: center;
  padding: 2rem;
}

.read-feedback-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 600;
  color: var(--read-gold-light);
  letter-spacing: 0.04em;
}

.read-feedback-body {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 340px;
  line-height: 1.6;
}

.read-feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--read-gold-light) 0%, var(--read-gold-medium) 100%);
  color: #0a0a0a;
  border: none;
  transition:
    opacity 0.2s,
    transform 0.15s;
}

.read-feedback-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.read-feedback-btn:focus-visible {
  outline: 2px solid var(--read-gold-light);
  outline-offset: 3px;
}

/* ── Mobile tweaks ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .read-header {
    display: none;
  }

  .read-page {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .read-game-container {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* ══════════════════════════════════════════════════════════════
   TABLET READER LAYOUT  (481px – 768px)
   ──────────────────────────────────────────────────────────────
   Mirrors the desktop column strategy at a slightly narrower
   width. Tablets otherwise fall through to the unbounded mobile
   rules, producing a stretched, un-centered experience.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {
  .read-game-container {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid rgba(250, 233, 155, 0.07);
    border-right: 1px solid rgba(250, 233, 155, 0.07);
  }

  .scene-quick-actions {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }

  .stats-banner-pills {
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP READER LAYOUT  (min-width: 769px)
   ────────────────────────────────────────────────────────────────
   The game engine was built mobile-first. Every component uses
   position:fixed which on mobile fills the phone screen perfectly.
   On desktop, those same rules would span the entire browser window.

   The fix is a single CSS rule. .read-game-container already carries
   transform: translateZ(0), which creates a CSS containing block for
   all position:fixed descendants. By constraining its width to a
   centered column, every fixed child — StatsBanner, ChapterBar,
   SettingsModal, NavigatorModal, BoostModal, AchievementModal,
   VictoryScreen, DeathScreen, AchievementsView, DecisionsPanel —
   is automatically bounded to that column with zero JSX changes.

   Mobile users: completely unaffected.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* Atmospheric ambient glow behind the game column —
     makes the dark margins feel intentional, not empty */
  html,
  body {
    background:
      radial-gradient(ellipse 70% 50% at 50% 0%, rgba(188, 147, 0, 0.07), transparent 65%), #050505;
  }

  /* ── 1. The single root fix ──────────────────────────────────
     Center the game to a premium book-width column.
     ALL position:fixed children auto-bounded via transform. */
  .read-game-container {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Subtle column borders that respect the gold brand palette */
    border-left: 1px solid rgba(250, 233, 155, 0.07);
    border-right: 1px solid rgba(250, 233, 155, 0.07);
    /* Lateral depth shadow to lift the column off the bg */
    box-shadow:
      -32px 0 80px rgba(0, 0, 0, 0.55),
      32px 0 80px rgba(0, 0, 0, 0.55);
  }

  /* RewindOverlay intentionally sizes to the full viewport. While it is active,
     release the fixed-position containing block so the canvas centers on screen. */
  body.rewind-scroll-lock .read-game-container {
    transform: none;
    -webkit-transform: none;
  }

  /* ── 2. Quick-action row (Rewind | ★ | Boost) ───────────────
     SceneContent renders these as flex:1, which on mobile gives
     compact buttons. On desktop the unbounded flex makes them
     ~300px wide each — far too flat. Cap the row width. */
  .scene-quick-actions {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── 3. Stats banner pills ───────────────────────────────────
     A touch more gap between pill chips on the wider column. */
  .stats-banner-pills {
    gap: 10px;
  }

  /* ── 4. Read header: slightly larger back button on desktop ── */
  .read-back-btn {
    font-size: 0.88rem;
    padding: 0.5rem 0.9rem;
  }

  /* ── 5. Story title: allow slightly larger type on desktop ─── */
  .read-story-title {
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  }

  /* ── 6. Keyboard focus ring for quick-action buttons ────────
     Inline JS handles hover; CSS handles :focus-visible so
     keyboard users get the same gold-ring treatment. */
  .scene-quick-actions button:focus-visible {
    outline: 2px solid rgba(250, 233, 155, 0.72);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* ── 7. Error / not-found feedback panel ────────────────────
     .read-feedback uses position:absolute inset:0 so it already
     fills the container; constrain body text max-width. */
  .read-feedback-body {
    max-width: 400px;
  }
}