/* ============================================================
   异世界天堂 — Arcane Portal Theme
   Rich gold + deep purple + celestial cream.
   Light theme inspired by magical isekai fantasy worlds.
   Unique design for Isekai Paradise (Isekai Heaven).
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
  /* Warm celestial parchment background */
  --bg: #FDF8F0;
  --bg-alt: #F5EDE0;
  --bg-warm: #FDF3E4;

  /* Primary accent: Arcane gold */
  --accent: #C8A415;
  --accent-hover: #D4AF37;
  --accent-light: #FFF8E1;
  --accent-dark: #8B6914;
  --accent-glow: rgba(200, 164, 21, 0.2);

  /* Secondary: Deep arcane purple */
  --purple: #4A0E5C;
  --purple-dark: #2D0738;
  --purple-light: #7B3F8C;
  --purple-pale: #F3E5F5;

  /* Forest green (nature/elves) */
  --green: #2D5A27;
  --green-light: #A5D6A7;
  --green-pale: #E8F5E9;

  /* Crystal blue (magic portals) */
  --blue: #1565C0;
  --blue-light: #90CAF9;
  --blue-pale: #E3F2FD;

  /* Demon crimson */
  --red: #C62828;
  --red-light: #FFCDD2;

  /* Text */
  --text: #2D2D2D;
  --text-secondary: #5D5D5D;
  --text-muted: #8D8D8D;
  --text-soft: #757575;
  --text-on-dark: #F5F0E8;

  /* Surfaces */
  --card-bg: #FFFFFF;
  --card-border: #E8E0D4;
  --header-bg: #2D0738;
  --header-border: #C8A415;

  /* Typography */
  --font-heading: 'Noto Serif SC', 'STSong', 'SimSun', 'KaiTi', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;

  /* Spacing */
  --radius: 8px;
  --radius-lg: 12px;
  --max-width: 1100px;

  /* Shadows */
  --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
  --card-shadow-hover: 0 6px 24px rgba(0,0,0,0.1);
  --glow: 0 0 20px rgba(200, 164, 21, 0.3);
}

/* --- Reset & Base --- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body); font-size:16px; line-height:1.75;
  color:var(--text); background:var(--bg); min-height:100vh;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(200,164,21,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 55%, rgba(74,14,92,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(45,90,39,0.03) 0%, transparent 50%);
}
a { color:var(--accent); text-decoration:none; transition:color 0.2s; }
a:hover { color:var(--accent-hover); }
img { max-width:100%; height:auto; display:block; }
ul { list-style:none; }

/* --- Utility Classes --- */
.text-center { text-align:center; }
.text-muted { color:var(--text-muted); }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --- Header --- */
.site-header {
  background:var(--header-bg); border-bottom:3px solid var(--header-border);
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 16px rgba(45,7,56,0.3);
}
.header-inner {
  max-width:var(--max-width); margin:0 auto; padding:0 1.5rem;
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.logo {
  display:flex; align-items:center; gap:0.5rem;
  font-family:var(--font-heading); font-size:1.2rem; font-weight:700;
  color:var(--text-on-dark); text-decoration:none; letter-spacing:0.03em;
}
.logo:hover { color:#FFD54F; }
.logo-icon {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, #C8A415, #8B6914);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
  box-shadow:0 0 12px rgba(200,164,21,0.3);
}

/* Nav */
.nav-links { display:flex; align-items:center; gap:0.15rem; }
.nav-links a {
  color:#CEB8DB; padding:0.45rem 0.85rem; border-radius:var(--radius);
  font-size:0.9rem; font-weight:500; transition:color 0.2s, background 0.2s;
}
.nav-links a:hover, .nav-links a.active {
  color:#FFFFFF; background:rgba(200,164,21,0.2);
}
.nav-cta {
  background:var(--accent) !important; color:#fff !important;
  padding:0.4rem 1rem !important; border-radius:var(--radius) !important;
  font-weight:600 !important; transition:background 0.2s, box-shadow 0.2s !important;
  margin-left:0.3rem;
}
.nav-cta:hover { background:var(--accent-hover) !important; box-shadow:var(--glow); }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.hamburger span {
  display:block; width:22px; height:2px; background:#CEB8DB;
  border-radius:2px; transition:transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* --- Hero Section (index) --- */
.hero {
  background:linear-gradient(160deg, #2D0738 0%, #4A0E5C 35%, #6A1B7A 100%);
  color:var(--text-on-dark); padding:5rem 1.5rem 4rem; text-align:center;
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(200,164,21,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(21,101,192,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(198,40,40,0.06) 0%, transparent 40%);
}
.hero::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.03;
  background-image:
    repeating-conic-gradient(rgba(255,255,255,0.02) 0% 25%, transparent 0% 50%);
  background-size:60px 60px;
}
.hero-content { position:relative; z-index:1; max-width:800px; margin:0 auto; }
.hero-title-main {
  font-family:var(--font-heading); font-size:3rem; font-weight:900;
  color:#FFFFFF; text-shadow:0 2px 12px rgba(0,0,0,0.3);
  margin-bottom:0.75rem; line-height:1.25; letter-spacing:0.05em;
}
.hero-subtitle {
  font-size:1.1rem; color:#CEB8DB; margin-bottom:1.5rem; line-height:1.7;
  max-width:650px; margin-left:auto; margin-right:auto;
}
.hero-tags {
  display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; margin-bottom:2rem;
}
.tag {
  display:inline-block; padding:0.3rem 0.8rem; border-radius:20px;
  font-size:0.8rem; font-weight:600; letter-spacing:0.02em;
  background:rgba(200,164,21,0.2); color:#FFD54F;
  border:1px solid rgba(200,164,21,0.3);
}
.tag-green {
  background:rgba(45,90,39,0.25); color:#A5D6A7;
  border-color:rgba(45,90,39,0.4);
}
.tag-blue {
  background:rgba(21,101,192,0.25); color:#90CAF9;
  border-color:rgba(21,101,192,0.4);
}
.tag-red {
  background:rgba(198,40,40,0.25); color:#EF9A9A;
  border-color:rgba(198,40,40,0.4);
}

/* Buttons */
.btn {
  display:inline-block; padding:0.75rem 2rem; border-radius:var(--radius);
  font-weight:600; font-size:0.95rem; cursor:pointer; border:none;
  text-align:center; transition:background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary {
  background:linear-gradient(135deg, #C8A415, #8B6914); color:#fff;
}
.btn-primary:hover {
  background:linear-gradient(135deg, #D4AF37, #C8A415); color:#fff;
  box-shadow:var(--glow);
}
.btn-outline {
  background:transparent; color:var(--text-on-dark);
  border:2px solid rgba(255,255,255,0.3);
}
.btn-outline:hover { border-color:var(--accent); color:#FFD54F; }
.btn-lg { padding:0.9rem 2.5rem; font-size:1.05rem; }
.btn-sm { padding:0.45rem 1.2rem; font-size:0.85rem; }

/* --- Sub-Page Hero --- */
.hero-subpage { padding:40px 24px 48px !important; }
.hero-subpage-title {
  font-size:2rem !important; font-weight:700 !important;
  color:#FFFFFF !important; text-shadow:0 2px 8px rgba(0,0,0,0.3) !important;
  font-family:var(--font-heading) !important;
}
.hero-subpage p {
  color:#CEB8DB; font-size:1rem; margin-top:0.5rem;
  position:relative; z-index:1;
}

/* --- Content Sections --- */
section.content-section { padding:3.5rem 1.5rem; }
.section-inner { max-width:var(--max-width); margin:0 auto; }
.section-alt { background:var(--bg-alt); }
.section-heading {
  font-family:var(--font-heading); font-size:1.8rem; font-weight:700;
  text-align:center; color:var(--purple); margin-bottom:6px; position:relative;
}
.section-heading::after {
  content:''; display:block; width:50px; height:3px;
  background:linear-gradient(90deg, #C8A415, #8B6914);
  margin:0.6rem auto 0; border-radius:2px;
}
.section-heading-alt {
  font-family:var(--font-heading); font-size:1.8rem; font-weight:700;
  text-align:center; color:var(--purple); margin-bottom:20px;
}
.section-heading-alt-spaced { margin-top:48px; }
.section-subtext {
  text-align:center; color:var(--text-soft); margin-bottom:24px; font-size:0.95rem;
}
.section-subheading {
  text-align:center; margin:40px 0 24px;
  font-family:var(--font-heading); font-size:1.5rem; font-weight:700;
  color:var(--purple);
}
.section-title-group-spaced { margin-top:48px; }
.prose-centered {
  text-align:center; max-width:800px; margin:0 auto 32px;
  color:var(--text-soft); line-height:1.85; font-size:0.95rem;
}
.prose-centered:last-of-type { margin-bottom:40px; }
.game-info-desc {
  text-align:center; color:var(--text-muted); font-size:0.85rem; margin-top:0;
}

/* --- Info Cards --- */
.info-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:1.25rem; margin-bottom:2rem;
}
.info-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-lg); padding:1.5rem; text-align:center;
  box-shadow:var(--card-shadow);
  transition:box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}
.info-card:hover {
  box-shadow:var(--card-shadow-hover); border-color:var(--accent);
  transform:translateY(-2px);
}
.info-card-icon { font-size:2.2rem; margin-bottom:0.75rem; }
.info-card h3 {
  font-size:1.05rem; font-weight:700; color:var(--purple);
  margin-bottom:0.4rem; font-family:var(--font-heading);
}
.info-card p { font-size:0.9rem; color:var(--text-secondary); line-height:1.5; }

/* --- Feature Cards --- */
.feature-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1.5rem; margin-bottom:2rem;
}
.feature-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-left:4px solid var(--accent); border-radius:var(--radius-lg);
  padding:1.5rem; box-shadow:var(--card-shadow);
  transition:box-shadow 0.2s, border-left-color 0.2s, transform 0.15s;
}
.feature-card:hover {
  box-shadow:var(--card-shadow-hover); border-left-color:#8B6914;
  transform:translateY(-2px);
}
.feature-card h3 {
  font-size:1.1rem; font-weight:700; color:var(--purple);
  margin-bottom:0.5rem; font-family:var(--font-heading);
}
.feature-card p { font-size:0.92rem; color:var(--text-secondary); line-height:1.65; }
.feature-icon { font-size:1.6rem; margin-bottom:0.5rem; }

/* --- Gallery --- */
.gallery {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1rem; margin-bottom:2rem;
}
.gallery-item {
  border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  border:2px solid var(--card-border);
  transition:border-color 0.2s, box-shadow 0.2s;
  aspect-ratio:16/9; background:var(--purple-dark);
}
.gallery-item:hover {
  border-color:var(--accent); box-shadow:0 0 16px rgba(200,164,21,0.15);
}
.gallery-item img { width:100%; height:100%; object-fit:cover; }

/* --- Stats --- */
.stats-row {
  display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-bottom:1rem;
}
.stat-item { text-align:center; padding:1rem 1.5rem; }
.stat-value {
  font-family:var(--font-heading); font-size:2rem; font-weight:800;
  color:var(--accent);
}
.stat-label { font-size:0.85rem; color:var(--text-muted); margin-top:0.25rem; }

/* --- CTA Banner (index only) --- */
.cta-banner {
  background:linear-gradient(160deg, #2D0738, #4A0E5C);
  color:var(--text-on-dark); padding:3.5rem 1.5rem; text-align:center;
  position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(200,164,21,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(21,101,192,0.06) 0%, transparent 40%);
}
.cta-banner h2 {
  position:relative; z-index:1; font-family:var(--font-heading);
  font-size:1.8rem; font-weight:800; margin-bottom:0.75rem; color:#FFFFFF;
}
.cta-banner p {
  position:relative; z-index:1; color:#CEB8DB; font-size:1.05rem; margin-bottom:1.5rem;
}
.cta-banner .btn-primary { position:relative; z-index:1; }

/* --- Guide Steps --- */
.guide-steps {
  display:flex; flex-direction:column; gap:1.25rem; margin-bottom:2rem;
}
.guide-step {
  display:flex; gap:1.25rem; background:var(--card-bg);
  border:1px solid var(--card-border); border-radius:var(--radius-lg);
  padding:1.5rem; box-shadow:var(--card-shadow);
  transition:box-shadow 0.2s, border-color 0.2s;
}
.guide-step:hover { box-shadow:var(--card-shadow-hover); border-color:var(--accent); }
.step-number {
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, #C8A415, #8B6914); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.1rem;
  box-shadow:0 0 12px rgba(200,164,21,0.25);
}
.step-content h3 {
  font-size:1.05rem; font-weight:700; color:var(--purple);
  margin-bottom:0.4rem; font-family:var(--font-heading);
}
.step-content p { font-size:0.9rem; color:var(--text-secondary); line-height:1.65; }
.guide-intro {
  font-size:0.95rem; color:var(--text-soft); line-height:1.8; margin-bottom:1.5rem;
}
.guide-intro-top {
  font-size:0.95rem; color:var(--text-soft); line-height:1.8;
  margin-bottom:1.5rem; margin-top:4px;
}
.route-desc {
  font-size:0.92rem; color:var(--text-secondary); line-height:1.7; margin-bottom:1rem;
}
.route-heading {
  font-family:var(--font-heading); font-size:1.25rem; font-weight:700;
  color:var(--purple); margin-bottom:0.5rem;
}

/* --- Ending Cards --- */
.ending-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.25rem; margin-bottom:2rem;
}
.ending-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-left:4px solid var(--accent); border-radius:var(--radius-lg);
  padding:1.5rem; box-shadow:var(--card-shadow);
}
.ending-type {
  display:inline-block; font-size:0.75rem; font-weight:700;
  padding:0.2rem 0.7rem; border-radius:12px;
  background:var(--accent-light); color:var(--accent); margin-bottom:0.5rem;
}
.ending-card h3 {
  font-family:var(--font-heading); font-size:1.1rem; font-weight:700;
  color:var(--purple); margin-bottom:0.4rem;
}
.ending-card p { font-size:0.88rem; color:var(--text-secondary); line-height:1.5; }

/* --- Story Blocks --- */
.story-grid {
  display:flex; flex-direction:column; gap:1.5rem; margin-bottom:2rem;
}
.story-block {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-left:4px solid var(--purple); border-radius:var(--radius-lg);
  padding:1.5rem; box-shadow:var(--card-shadow);
  transition:box-shadow 0.2s, border-left-color 0.2s;
}
.story-block:hover { box-shadow:var(--card-shadow-hover); border-left-color:var(--accent); }
.story-chapter {
  display:inline-block; font-size:0.75rem; font-weight:700; color:var(--accent);
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.5rem;
  background:var(--accent-light); padding:0.15rem 0.7rem; border-radius:10px;
}
.story-block h3 {
  font-size:1.15rem; font-weight:700; color:var(--purple);
  margin-bottom:0.5rem; font-family:var(--font-heading);
}
.story-block p { font-size:0.92rem; color:var(--text-secondary); line-height:1.7; }
.chapter-title {
  font-family:var(--font-heading); font-size:1.35rem; font-weight:700;
  color:var(--purple); margin-bottom:0.5rem;
}

/* --- Character Cards --- */
.char-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.5rem; margin-bottom:2rem;
}
.char-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--card-shadow);
  transition:box-shadow 0.2s, transform 0.2s;
}
.char-card:hover { box-shadow:var(--card-shadow-hover); transform:translateY(-3px); }
.char-card-img {
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
}
.char-card-header {
  background:var(--purple); color:#fff; padding:1.25rem; text-align:center;
}
.char-card-header h3 {
  font-size:1.05rem; font-weight:700; margin-bottom:0.15rem;
  font-family:var(--font-heading);
}
.char-role { font-size:0.78rem; color:#CEB8DB; font-weight:500; }
.char-card-body { padding:1.25rem; }
.char-card-body p { font-size:0.88rem; color:var(--text-secondary); line-height:1.55; }
.char-traits { display:flex; flex-wrap:wrap; gap:0.35rem; margin-top:0.75rem; }
.char-trait {
  font-size:0.72rem; padding:0.2rem 0.6rem; border-radius:12px;
  background:var(--accent-light); color:var(--accent-dark); font-weight:600;
}

/* --- FAQ Accordion --- */
.faq-list { display:flex; flex-direction:column; gap:0.75rem; margin-bottom:2rem; }
.faq-item {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--card-shadow);
}
.faq-question {
  width:100%; text-align:left; background:none; border:none;
  padding:1.15rem 1.25rem; font-size:0.98rem; font-weight:600;
  color:var(--text); cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; transition:color 0.2s;
}
.faq-question:hover { color:var(--accent); }
.faq-toggle {
  flex-shrink:0; width:24px; height:24px; display:flex;
  align-items:center; justify-content:center; font-size:1.2rem;
  font-weight:700; color:var(--accent); transition:transform 0.3s;
}
.faq-item.open .faq-toggle { transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.35s ease; }
.faq-item.open .faq-answer { max-height:800px; }
.faq-answer-inner {
  padding:0 1.25rem 1.25rem; font-size:0.92rem;
  color:var(--text-secondary); line-height:1.7;
}
.faq-answer-inner p { margin-bottom:0.75rem; }
.faq-note {
  font-size:0.85rem; color:var(--text-muted); margin-top:0.75rem;
  padding:0.75rem; background:var(--accent-light); border-radius:var(--radius);
  border-left:3px solid var(--accent);
}
.faq-intro {
  font-size:0.98rem; color:var(--text-soft); text-align:center;
  margin-bottom:1.5rem; line-height:1.7;
}

/* --- Reviews / Quotes --- */
.quotes-section { margin-bottom:2rem; }
.quotes-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1.25rem;
}
.quote-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-lg); padding:1.5rem; box-shadow:var(--card-shadow);
}
.quote-text {
  font-size:0.92rem; color:var(--text-secondary); line-height:1.6;
  font-style:italic; margin-bottom:0.75rem; position:relative; padding-left:1.5rem;
}
.quote-text::before {
  content:'"'; position:absolute; left:0; top:-0.1rem;
  font-size:1.8rem; color:var(--accent); font-family:var(--font-heading);
  line-height:1;
}
.quote-author { font-size:0.85rem; color:var(--text-muted); text-align:right; }

/* --- Tables --- */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.info-table {
  width:100%; border-collapse:collapse; margin-bottom:1.5rem;
  font-size:0.9rem; border:1px solid var(--card-border); border-radius:var(--radius-lg);
  overflow:hidden;
}
.info-table thead { background:var(--purple); color:#fff; }
.info-table th {
  padding:0.75rem 1rem; text-align:left; font-weight:600; font-size:0.85rem;
}
.info-table td {
  padding:0.65rem 1rem; border-bottom:1px solid var(--card-border);
  color:var(--text-secondary);
}
.info-table tbody tr:hover { background:var(--accent-light); }
.info-table tbody tr:last-child td { border-bottom:none; }

/* --- Lists --- */
.content-list { list-style:disc; padding-left:1.5rem; margin-bottom:0.75rem; }
.content-list-num { list-style:decimal; padding-left:1.5rem; margin-bottom:0.75rem; }
.content-li { margin-bottom:5px; color:var(--text-soft); font-size:0.9rem; }
.content-li-sm { margin-bottom:4px; color:var(--text-soft); font-size:0.88rem; }
.content-li-md { margin-bottom:8px; color:var(--text-soft); font-size:0.9rem; }
.content-li-lg { margin-bottom:10px; color:var(--text-soft); font-size:0.92rem; }

/* --- Colored strong spans --- */
.strong-gold { color:var(--accent-dark); }
.strong-purple { color:var(--purple); }
.strong-red { color:var(--red); }
.strong-green { color:var(--green); }
.strong-blue { color:var(--blue); }
.strong-muted { color:var(--text-muted); }

/* --- Sys reqs h3 --- */
.sys-reqs-h3 {
  font-family:var(--font-heading); font-size:1.2rem; font-weight:700;
  color:var(--purple); margin-bottom:0.75rem; margin-top:0.25rem;
}
.sys-reqs-h3:first-of-type { margin-top:0; }

/* --- Footer --- */
.site-footer {
  text-align:center; padding:2rem 1.5rem; background:var(--header-bg);
  color:#CEB8DB; font-size:0.85rem;
}
.site-footer p { margin:0; }

/* --- Lightbox --- */
.lightbox {
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.92); align-items:center; justify-content:center;
}
.lightbox.open { display:flex; }
.lightbox-img { max-width:90vw; max-height:90vh; object-fit:contain; }
.lightbox-close {
  position:absolute; top:1.5rem; right:1.5rem;
  background:none; border:none; color:#fff; font-size:2.5rem;
  cursor:pointer; line-height:1; opacity:0.7; transition:opacity 0.2s;
}
.lightbox-close:hover { opacity:1; }

/* --- Responsive: Tablet (768px) --- */
@media (max-width: 768px) {
  .hero-title-main { font-size:2.2rem; }
  .hero-subtitle { font-size:0.95rem; }
  .hero-tags { gap:0.4rem; }
  .section-heading, .section-heading-alt { font-size:1.5rem; }
  .section-subtext { font-size:0.88rem; }
  .feature-grid { grid-template-columns:1fr; }
  .gallery { grid-template-columns:1fr; }
  .info-grid { grid-template-columns:1fr 1fr; }
  .stats-row { gap:1rem; }
  .stat-item { padding:0.75rem 1rem; }
  .cta-banner h2 { font-size:1.5rem; }
  .hamburger { display:flex; }
  .nav-links {
    display:none; flex-direction:column; position:absolute;
    top:64px; left:0; right:0; background:var(--header-bg);
    padding:1rem; gap:0; border-top:2px solid var(--header-border);
    box-shadow:0 4px 16px rgba(0,0,0,0.2);
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:0.7rem 1rem; border-radius:0; width:100%; }
  .nav-cta { margin-left:0; text-align:center; margin-top:0.25rem; }
  .char-grid { grid-template-columns:1fr; }
  .ending-grid { grid-template-columns:1fr; }
  .quotes-grid { grid-template-columns:1fr; }
}

/* --- Responsive: Mobile (480px) --- */
@media (max-width: 480px) {
  .hero { padding:3rem 1rem 2.5rem; }
  .hero-title-main { font-size:1.8rem; }
  .hero-subtitle { font-size:0.88rem; }
  section.content-section { padding:2.5rem 1rem; }
  .info-grid { grid-template-columns:1fr; }
  .guide-step { flex-direction:column; gap:0.75rem; }
  .step-number { width:36px; height:36px; font-size:1rem; }
  .stat-value { font-size:1.5rem; }
  .stats-row { gap:0.5rem; }
  .cta-banner { padding:2.5rem 1rem; }
  .faq-question { font-size:0.9rem; padding:1rem; }
}