/* =============================================================================
   TSCHEPP-AR — Design System
   Extracted from Paper Styleguide "Tschepp-AR — Styleguide" (NA-0)
   Prefix: .fv-
   ============================================================================= */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--ar-font-body); }

/* ---------------------------------------------------------------------------
   Design Tokens — available globally
   --------------------------------------------------------------------------- */
:root {
  --ar-black: #1A1F16;
  --ar-white: #F7F5F0;
  --ar-green: #3D5A3E;
  --ar-gold: #C4A96A;
  --ar-gray: #5A5347;
  --ar-sage: #8B9D83;

  --ar-bg: var(--ar-white);
  --ar-text: var(--ar-black);
  --ar-accent: var(--ar-gold);
  --ar-action: var(--ar-green);

  --ar-font-display: 'Space Grotesk', system-ui, sans-serif;
  --ar-font-body: 'Inter', system-ui, sans-serif;
  --ar-font-cinzel: 'Cinzel', 'Times New Roman', serif;

  --ar-glass-bg: rgba(255, 255, 255, 0.12);
  --ar-glass-border: rgba(255, 255, 255, 0.08);
  --ar-glass-radius: 12px;
}

/* ---------------------------------------------------------------------------
   Page Toolbar (sky/photo toggles — floats top-right below SiteNav)
   --------------------------------------------------------------------------- */
.fv-toolbar {
  position: fixed;
  top: 64px;
  right: 12px;
  z-index: 90;
  display: flex;
  gap: 6px;
}

.fv-toolbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  color: var(--ar-white);
  background: var(--ar-glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s;
}

.fv-toolbar__btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.fv-toolbar__btn--active {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 1px var(--ar-gold);
}

/* ---------------------------------------------------------------------------
   Global Site Navigation
   --------------------------------------------------------------------------- */
.sn-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 56px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
/* Glassmorphism when scrolled */
.sn-header:not(.sn-header--transparent) {
  background: rgba(26, 31, 22, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(255,255,255,0.06);
}
.sn-header__spacer { height: 56px; }
.sn-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 24px;
}
.sn-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ar-white);
  flex-shrink: 0;
}
.sn-header__logo { height: 28px; width: auto; }
.sn-header__title {
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sn-header__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.sn-header__link {
  font-family: var(--ar-font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(247,245,240,0.55);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.sn-header__link:hover {
  color: rgba(247,245,240,0.85);
  background: rgba(255,255,255,0.06);
}
.sn-header__link--active {
  color: var(--ar-white);
  background: rgba(255,255,255,0.08);
}
.sn-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;
}
.sn-header__user {
  font-family: var(--ar-font-body);
  font-size: 13px;
  color: rgba(247,245,240,0.6);
  background: none;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sn-header__user:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(247,245,240,0.9);
}
.sn-header__auth-btn {
  font-family: var(--ar-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ar-white);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.sn-header__auth-btn:hover { background: rgba(255,255,255,0.14); }

/* Icon buttons (sky/photo toggles in header) */
.sn-header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  color: rgba(247,245,240,0.6);
  background: transparent;
  transition: color 0.2s, background 0.2s;
}
.sn-header__icon-btn:hover {
  color: var(--ar-white);
  background: rgba(255,255,255,0.08);
}
.sn-header__icon-btn--active {
  color: var(--ar-gold);
  background: rgba(196,169,106,0.12);
}

/* Fade slider popover */
.sn-fade-wrap { position: relative; }
.sn-fade-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: rgba(26, 31, 22, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  z-index: 1001;
}
.sn-fade-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sn-fade-panel span {
  font-family: var(--ar-font-body);
  font-size: 11px;
  color: rgba(247,245,240,0.5);
}
.sn-fade-panel input[type="range"] {
  width: 100%;
  accent-color: var(--ar-gold);
  height: 4px;
}

/* Hamburger */
.sn-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.sn-header__burger span {
  display: block;
  height: 2px;
  background: var(--ar-white);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}
.sn-header__burger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sn-header__burger--open span:nth-child(2) { opacity: 0; }
.sn-header__burger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer */
.sn-drawer {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  visibility: hidden;
}
.sn-drawer--open {
  pointer-events: auto;
  visibility: visible;
}
.sn-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s;
}
.sn-drawer--open .sn-drawer__backdrop { opacity: 1; }
.sn-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: rgba(26, 31, 22, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255,255,255,0.06);
  padding: 80px 24px 32px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sn-drawer--open .sn-drawer__panel { transform: translateX(0); }
.sn-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sn-drawer__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  font-family: var(--ar-font-body);
  font-size: 15px;
  font-weight: 500;
  color: rgba(247,245,240,0.6);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.sn-drawer__link:hover {
  color: var(--ar-white);
  background: rgba(255,255,255,0.06);
}
.sn-drawer__link--active {
  color: var(--ar-white);
  background: rgba(255,255,255,0.08);
}
.sn-drawer__link svg { opacity: 0.5; }
.sn-drawer__link--active svg { opacity: 1; }
.sn-drawer__divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 16px 0;
}
.sn-drawer__auth {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sn-drawer__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
}
.sn-drawer__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ar-gold);
  color: var(--ar-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.sn-drawer__user-name {
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ar-white);
}
.sn-drawer__user-email {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: rgba(247,245,240,0.35);
}
.sn-drawer__logout,
.sn-drawer__login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(247,245,240,0.7);
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  margin: 0 16px;
}
.sn-drawer__logout:hover,
.sn-drawer__login:hover { background: rgba(255,255,255,0.08); }

/* Theme toggles in drawer */
.sn-drawer__theme {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sn-drawer__theme-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(247,245,240,0.6);
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.sn-drawer__theme-btn:hover {
  color: var(--ar-white);
  background: rgba(255,255,255,0.06);
}
.sn-drawer__theme-btn--active {
  color: var(--ar-gold);
}
.sn-drawer__theme-btn svg { opacity: 0.5; }
.sn-drawer__theme-btn--active svg { opacity: 1; color: var(--ar-gold); }

/* Light mode header — dark text on light pages */
.sn-header--light .sn-header__logo { filter: brightness(0); }
.sn-header--light .sn-header__brand { color: var(--ar-black); }
.sn-header--light .sn-header__title { color: var(--ar-black); }
.sn-header--light .sn-header__link { color: rgba(26,31,22,0.5); }
.sn-header--light .sn-header__link:hover { color: rgba(26,31,22,0.8); background: rgba(0,0,0,0.04); }
.sn-header--light .sn-header__link--active { color: var(--ar-black); background: rgba(0,0,0,0.06); }
.sn-header--light .sn-header__icon-btn { color: rgba(26,31,22,0.5); }
.sn-header--light .sn-header__icon-btn:hover { color: var(--ar-black); background: rgba(0,0,0,0.06); }
.sn-header--light .sn-header__icon-btn--active { color: var(--ar-gold); background: rgba(196,169,106,0.1); }
.sn-header--light .sn-header__user { color: rgba(26,31,22,0.55); }
.sn-header--light .sn-header__user:hover { background: rgba(0,0,0,0.05); color: rgba(26,31,22,0.85); }
.sn-header--light .sn-header__auth-btn {
  color: var(--ar-black);
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}
.sn-header--light .sn-header__auth-btn:hover { background: rgba(0,0,0,0.08); }
.sn-header--light .sn-header__burger span { background: var(--ar-black); }
/* Light glassmorphism when scrolled */
.sn-header--light:not(.sn-header--transparent) {
  background: rgba(247, 245, 240, 0.82);
  border-bottom-color: rgba(0,0,0,0.06);
}

/* Mobile: show burger, hide desktop links */
@media (max-width: 768px) {
  .sn-header__links { display: none; }
  .sn-header__auth-btn { display: none; }
  .sn-header__user { display: none; }
  .sn-header__burger { display: flex; }
  .sn-header__actions { margin-left: auto; }
}
/* Desktop: hide burger, drawer still usable */
@media (min-width: 769px) {
  .sn-header__burger { display: none; }
}

/* ---------------------------------------------------------------------------
   Light Mode (default) — white/cream
   --------------------------------------------------------------------------- */
.fv-page--light {
  --ar-bg: var(--ar-white);
}

/* ---------------------------------------------------------------------------
   Day Mode — vivid summer sky
   --------------------------------------------------------------------------- */
.fv-page--day {
  --ar-bg: #5BA0E0;
}

/* ---------------------------------------------------------------------------
   Night Mode — dark sky with stars
   --------------------------------------------------------------------------- */
.fv-page--night {
  --ar-bg: #080D1A;
  --ar-text: #F7F5F0;
  --ar-glass-bg: rgba(255, 255, 255, 0.08);
  --ar-glass-border: rgba(255, 255, 255, 0.06);
}

.fv-page--night.fv-page {
  background: linear-gradient(180deg, #030508 0%, #080D1A 30%, #0C1528 60%, #111E35 100%);
}

.sg-sky-layer {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}
.sg-bg-photo .sg-sky-layer {
  display: none;
}


/* Stars overlay for night mode */
.fv-page--night::after {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 50%;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 15%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 25% 8%, rgba(255,255,255,0.65), transparent),
    radial-gradient(2px 2px at 40% 22%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.5px 1.5px at 55% 5%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 70% 18%, rgba(255,255,255,0.75), transparent),
    radial-gradient(2px 2px at 85% 12%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 15% 35%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.5px 1.5px at 35% 42%, rgba(255,255,255,0.65), transparent),
    radial-gradient(2px 2px at 60% 38%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.5px 1.5px at 80% 30%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 5% 48%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.5px 1.5px at 48% 28%, rgba(255,255,255,0.45), transparent),
    radial-gradient(2px 2px at 92% 8%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 20% 25%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 65% 45%, rgba(255,255,255,0.55), transparent),
    radial-gradient(2.5px 2.5px at 78% 3%, rgba(255,255,255,1), transparent),
    radial-gradient(1.5px 1.5px at 33% 10%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.5px 1.5px at 88% 40%, rgba(255,255,255,0.45), transparent);
  z-index: 0;
  pointer-events: none;
  animation: fv-twinkle 4s ease-in-out infinite alternate;
}

@keyframes fv-twinkle {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* Shooting stars */
.fv-page--night::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 50%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.fv-page--night .fv-shooting-star {
  position: fixed;
  top: 0; left: 0;
  width: 100px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.4) 40%, transparent);
  border-radius: 1px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform-origin: left center;
}

.fv-page--night .fv-shooting-star--a {
  animation: fv-shoot-a 12s 3s ease-in infinite;
}
.fv-page--night .fv-shooting-star--b {
  animation: fv-shoot-b 16s 9s ease-in infinite;
}
.fv-page--night .fv-shooting-star--c {
  animation: fv-shoot-c 20s 15s ease-in infinite;
}

@keyframes fv-shoot-a {
  0% { opacity: 0; top: 8%; left: 15%; transform: rotate(35deg) translateX(0); }
  1% { opacity: 1; }
  4% { opacity: 0; top: 8%; left: 15%; transform: rotate(35deg) translateX(300px); }
  100% { opacity: 0; }
}

@keyframes fv-shoot-b {
  0% { opacity: 0; top: 5%; left: 65%; transform: rotate(25deg) translateX(0); }
  1% { opacity: 1; }
  3% { opacity: 0; top: 5%; left: 65%; transform: rotate(25deg) translateX(250px); }
  100% { opacity: 0; }
}

@keyframes fv-shoot-c {
  0% { opacity: 0; top: 15%; left: 40%; transform: rotate(40deg) translateX(0); }
  0.5% { opacity: 0.8; }
  2.5% { opacity: 0; top: 15%; left: 40%; transform: rotate(40deg) translateX(350px); }
  100% { opacity: 0; }
}

.fv-page--night .fv-header__back {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.fv-page--night .fv-header__back:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.fv-page--night .fv-gorge::before {
  background: linear-gradient(180deg,
    #080D1A 0%,
    rgba(8, 13, 26, 0.95) 15%,
    rgba(8, 13, 26, 0.6) 30%,
    rgba(8, 13, 26, 0.15) 42%,
    rgba(26,31,22,0.15) 52%,
    rgba(26,31,22,0.35) 70%,
    rgba(26,31,22,0.55) 100%
  );
}

.fv-page--day .fv-gorge::before {
  background: linear-gradient(180deg,
    #5BA0E0 0%,
    rgba(91, 160, 224, 0.95) 15%,
    rgba(91, 160, 224, 0.6) 30%,
    rgba(91, 160, 224, 0.15) 42%,
    rgba(26,31,22,0.15) 52%,
    rgba(26,31,22,0.35) 70%,
    rgba(26,31,22,0.55) 100%
  );
}

.fv-page--night .fv-species__name {
  color: #fff;
}

.fv-page--night .fv-card__text {
  color: rgba(247, 245, 240, 0.7);
}

/* Browse page dark overrides */
.fv-page--night .browse-hero__subtitle {
  color: rgba(247, 245, 240, 0.55);
}

.fv-page--night .browse-chips__btn {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(247, 245, 240, 0.6);
}

.fv-page--night .browse-chips__btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--ar-white);
}

.fv-page--night .browse-chips__btn--active {
  background: var(--ar-white);
  border-color: var(--ar-white);
  color: var(--ar-black);
}

.fv-page--night .browse-chips__btn--active:hover {
  background: var(--ar-white);
  border-color: var(--ar-white);
  color: var(--ar-black);
}

.fv-page--night .browse-card {
  background: rgba(255, 255, 255, 0.04);
}

.fv-page--night .browse-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Glassmorphism cards when photo background is active */
.sg-bg-photo .browse-card {
  background: var(--ar-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--ar-glass-border);
}
.sg-bg-photo .browse-card:hover {
  box-shadow: inset 0 0 0 1px var(--ar-glass-border), 0 8px 32px rgba(0, 0, 0, 0.25);
}
.sg-bg-photo .browse-card__img-wrap {
  background: rgba(255,255,255,0.04);
}

.fv-page--night .browse-card__img-wrap {
  background: rgba(255, 255, 255, 0.03);
}

.fv-page--night .fv-loading__spinner {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: var(--ar-accent);
}

/* ---------------------------------------------------------------------------
   Page Shell
   --------------------------------------------------------------------------- */
.fv-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 56px;
  background-color: var(--ar-bg);
  color: var(--ar-text);
  font-family: var(--ar-font-body);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.fv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.fv-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fv-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(26, 31, 22, 0.06);
  color: var(--ar-text);
  text-decoration: none;
  transition: background-color 0.2s;
}

.fv-header__back:hover {
  background-color: rgba(26, 31, 22, 0.12);
}

/* Music volume control */
.fv-header__music {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fv-volume-slider {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 4px 10px;
}
.fv-volume-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  outline: none;
}
.fv-volume-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ar-accent);
  cursor: pointer;
}
.fv-volume-slider__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ar-accent);
  border: none;
  cursor: pointer;
}
.fv-volume-slider__stop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
}
.fv-volume-slider__stop:hover {
  background: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9);
}

.fv-header__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--ar-action);
  border-radius: 20px;
  padding: 8px 16px;
}

.fv-header__badge-label {
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--ar-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fv-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.fv-header__brand-group {
  text-align: right;
}

.fv-header__auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.fv-header__auth-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
}

.fv-page--light .fv-header__auth-btn {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.7);
}

.fv-page--light .fv-header__auth-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.25);
}

.fv-header__mascots {
  display: flex;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  margin-bottom: -6px;
  width: 96px;
  margin-left: auto;
  margin-right: auto;
}

.fv-header__mascot {
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 1;
  transition: opacity 500ms ease;
  mix-blend-mode: screen;
}

.fv-header__mascot--hidden {
  opacity: 0;
}

.fv-header__mascot--flip {
  transform: scaleX(-1);
}

.fv-header__brand {
  font-family: var(--ar-font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ar-text);
}

.fv-header__subtitle {
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--ar-sage);
  margin-top: 4px;
}


/* ---------------------------------------------------------------------------
   Canvas — white area, image centered, pinch-zoom, dots relative to image
   --------------------------------------------------------------------------- */
.fv-canvas {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

@media (min-width: 769px) {
  .fv-canvas--fullscreen {
    height: 100vh;
    height: 100dvh;
    flex: none;
  }
}

.fv-canvas__inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.1s ease-out;
}

.fv-canvas__image {
  display: block;
  max-width: 85vw;
  max-height: 85dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Annotation Dots — positioned relative to canvas__inner (image wrapper)
   --------------------------------------------------------------------------- */
.fv-dot-wrap {
  position: absolute;
  z-index: 5;
}

.fv-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--ar-accent);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.2s, background-color 0.2s;
  padding: 0;
  flex-shrink: 0;
}

.fv-dot--active {
  background-color: var(--ar-action);
  box-shadow: 0 0 0 4px rgba(61, 90, 62, 0.3), 0 2px 12px rgba(0, 0, 0, 0.4);
}

.fv-dot--hovered {
  box-shadow: 0 0 0 6px rgba(196, 169, 106, 0.35), 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Popover — appears next to active dot */
.fv-dot-popover {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  border-radius: var(--ar-glass-radius);
  padding: 10px 14px;
  width: 240px;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.fv-dot-popover--right {
  left: 40px;
}

.fv-dot-popover--left {
  right: 40px;
}

.fv-dot-popover__label {
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  display: block;
  margin-bottom: 3px;
}

.fv-dot-popover__text {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: rgba(247, 245, 240, 0.7);
  line-height: 1.5;
  margin: 0;
}

.fv-dot-popover__player {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.fv-dot-popover__mascot {
  width: 48px;
  height: 48px;
  object-fit: contain;
  pointer-events: none;
  flex-shrink: 0;
  margin: -20px 0 -10px;
}

.fv-dot-popover__player .fv-audio-control__play {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.fv-dot-popover__player .fv-waveform {
  transform: scale(0.6);
  transform-origin: left center;
}

/* ---------------------------------------------------------------------------
   Annotation Pills — right side of canvas
   --------------------------------------------------------------------------- */
.fv-pills {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 6;
}

.fv-pills__item {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background-color: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  border-radius: 10px;
  padding: 8px 16px;
  font-family: var(--ar-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.fv-pills__item:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.15);
}

.fv-pills__item--active {
  background-color: var(--ar-green);
  border-color: var(--ar-green);
}

.fv-pills__item--title {
  background-color: var(--ar-accent);
  border-color: var(--ar-accent);
  color: var(--ar-black);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fv-pills__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--ar-black);
  flex-shrink: 0;
}
.fv-pills__play svg {
  width: 10px;
  height: 10px;
}


/* ---------------------------------------------------------------------------
   Species Name — below canvas
   --------------------------------------------------------------------------- */
.fv-species {
  position: absolute;
  bottom: 80px;
  left: 40px;
  display: flex;
  flex-direction: column;
  z-index: 3;
  pointer-events: none;
}


.fv-species__latin {
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--ar-sage);
}

.fv-species__name {
  font-family: var(--ar-font-display);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ar-text);
  line-height: 1.1;
}

.fv-species__desc {
  font-family: var(--ar-font-body);
  font-size: 15px;
  color: var(--ar-gray);
  line-height: 1.6;
  margin: 8px 0 0;
  max-width: 520px;
  display: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(247, 245, 240, 0.7);
  border-radius: 10px;
  padding: 12px 16px;
}

.fv-species__annotation {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(247, 245, 240, 0.7);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 10px;
  max-width: 520px;
  pointer-events: auto;
}

.fv-species__annotation-label {
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ar-text);
  display: block;
  margin-bottom: 4px;
}

.fv-species__annotation-text {
  font-family: var(--ar-font-body);
  font-size: 14px;
  color: var(--ar-gray);
  line-height: 1.5;
  margin: 0;
}

.fv-species__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.fv-species__action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background-color: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  color: #d4a843;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s;
}

.fv-species__action-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.fv-species__action-btn svg {
  color: var(--ar-accent);
}
.fv-species__action-btn--ar {
  width: auto;
  padding: 0 14px;
  gap: 6px;
  border-radius: 20px;
  text-decoration: none;
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 700;
}
.fv-species__action-label {
  color: var(--ar-accent);
  letter-spacing: 0.05em;
}

.fv-species__action-btn--liked svg {
  color: #e74c3c;
}

.fv-species__action-count {
  font-size: 11px;
  font-weight: 600;
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: var(--ar-accent, #d4a843);
  color: #fff;
  border-radius: 9px;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}

/* Track buttons — play + numbered annotation triggers (mobile only) */
.fv-species__tracks {
  display: none;
  gap: 6px;
  margin-top: 10px;
  position: relative;
}

@media (max-width: 768px) {
  .fv-species__tracks {
    display: flex;
  }
}

.fv-species__track-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background-color: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  color: var(--ar-accent);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s;
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fv-species__track-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.fv-species__track-btn--active {
  background-color: var(--ar-accent);
  color: var(--ar-black);
  border-color: var(--ar-accent);
}

.fv-species__track-btn--active:hover {
  background-color: var(--ar-accent);
}

/* Mini mascot inline with track buttons */
.fv-species__mini-mascot {
  position: absolute;
  right: 0;
  bottom: 100%;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}

.fv-species__mini-mascot-owl {
  width: 80px;
  height: 80px;
  object-fit: contain;
  mix-blend-mode: screen;
}

.fv-species__mini-mascot .fv-waveform {
  transform: scale(0.5);
  transform-origin: left center;
}

/* Comments overlay */
.fv-comments-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: none;
  animation: fv-fade-in 0.2s ease;
}

@keyframes fv-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fv-comments {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  color: var(--ar-text, #F7F5F0);
  width: 100%;
  max-height: 80vh;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  animation: fv-slide-up 0.25s ease;
}

@keyframes fv-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.fv-comments__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fv-comments__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: #F7F5F0;
}

.fv-comments__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: rgba(247, 245, 240, 0.4);
}

.fv-comments__list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  min-height: 100px;
}

.fv-comments__empty {
  text-align: center;
  color: rgba(247, 245, 240, 0.4);
  font-size: 14px;
  padding: 32px 0;
}

.fv-comments__item {
  margin-bottom: 16px;
}

.fv-comments__item-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.fv-comments__author {
  font-size: 13px;
  font-weight: 600;
  color: var(--ar-gold);
}

.fv-comments__date {
  font-size: 11px;
  color: rgba(247, 245, 240, 0.3);
}

.fv-comments__body {
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  color: rgba(247, 245, 240, 0.85);
}

.fv-comments__delete {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 2px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
}
.fv-comments__item:hover .fv-comments__delete {
  opacity: 1;
}
.fv-comments__delete:hover {
  color: rgba(255, 100, 100, 0.8);
}

.fv-comments__input-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.fv-comments__input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  color: #F7F5F0;
  font-size: 14px;
  outline: none;
}

.fv-comments__input::placeholder {
  color: rgba(247, 245, 240, 0.3);
}

.fv-comments__input:focus {
  border-color: var(--ar-gold);
}

.fv-comments__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ar-accent, #d4a843);
  color: #fff;
}

.fv-comments__send:disabled {
  opacity: 0.4;
}

/* Desktop: lightbox style */
@media (min-width: 769px) {
  .fv-comments-overlay {
    align-items: center;
  }
  .fv-comments {
    max-width: 520px;
    max-height: 70vh;
    border-radius: 20px;
    animation: fv-scale-in 0.2s ease;
  }
  @keyframes fv-scale-in {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
}

@media (min-width: 769px) {
  .fv-species__desc { display: block; }
  .fv-species__name { color: #fff; }
}

/* Login prompt overlay */
.fv-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: fv-fade-in 0.2s ease;
}

.fv-login {
  position: relative;
  width: 380px;
  max-width: 90vw;
  padding: 48px 40px 40px;
  background: var(--ar-glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--ar-glass-border);
  border-radius: var(--ar-glass-radius);
  color: #F7F5F0;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
  animation: fv-scale-in 0.25s ease;
}

/* ---------------------------------------------------------------------------
   Info Bar: Player + Description + Facts — dark band
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Shared Audio Control — reused in every card
   --------------------------------------------------------------------------- */

.fv-audio-control {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fv-audio-control__mascot {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
  animation: fv-fade-in 500ms ease;
  mix-blend-mode: screen;
  pointer-events: none;
  margin: -30px 0;
  position: relative;
  left: 20px;
}

.fv-audio-control__play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--ar-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.fv-audio-control__play:hover { opacity: 0.85; }

.fv-audio-control__play--active {
  background-color: var(--ar-green);
}

.fv-audio-control__play--disabled {
  opacity: 0.3;
  cursor: default;
}

.fv-audio-control__track {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fv-audio-control__title {
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

.fv-audio-control__meta {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: rgba(247, 245, 240, 0.45);
}

.fv-infobar__desc-text {
  font-family: var(--ar-font-body);
  font-size: 15px;
  line-height: 24px;
  color: rgba(247, 245, 240, 0.7);
  margin: 0;
  max-width: 720px;
}

/* Facts row */
.fv-infobar__facts {
  display: flex;
  justify-content: space-between;
  padding: 16px 40px 20px;
  border-top: 1px solid rgba(247, 245, 240, 0.08);
}

.fv-infobar__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fv-infobar__fact-label {
  font-family: var(--ar-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ar-accent);
}

.fv-infobar__fact-value {
  font-family: var(--ar-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ar-white);
}

.fv-infobar__fact-value--accent {
  color: var(--ar-sage);
}

/* ---------------------------------------------------------------------------
   Canvas Mini-Player — floats inside the image area
   --------------------------------------------------------------------------- */
.fv-canvas-player {
  position: absolute;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: auto;
}

.fv-canvas-player__mascot {
  width: 100px;
  height: 100px;
  object-fit: contain;
  pointer-events: none;
  animation: fv-fade-in 500ms ease;
  mix-blend-mode: screen;
  flex-shrink: 0;
  margin: -50px -40px -20px 0;
  position: relative;
  left: 10px;
}

.fv-canvas-player__mascot--right {
  left: auto;
  right: -10px;
  margin: -50px 0 -20px -60px;
}

.fv-canvas-player__bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--ar-glass-radius);
  max-width: 340px;
}

.fv-canvas-player__row {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.fv-canvas-player__title {
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

.fv-canvas-player__time {
  font-family: var(--ar-font-body);
  font-size: 11px;
  color: rgba(247, 245, 240, 0.45);
}

.fv-canvas-player__waveform {
  transform: scale(0.65);
  transform-origin: left center;
  flex-shrink: 0;
  position: relative;
  left: 30px;
  top: -12px;
}

/* Speech arcs — comic-style mouth lines */
.fv-speech {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  top: -14px;
  left: 14px;
  flex-shrink: 0;
}

.fv-speech--left {
  left: -14px;
}

.fv-speech__arc {
  border-radius: 50%;
  border: 2px solid var(--ar-green);
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  animation: fv-speech-pulse 1s ease-in-out infinite;
}

.fv-speech__arc--left {
  border-top-color: transparent;
  border-bottom-color: var(--ar-green);
  border-left-color: transparent;
  border-right-color: transparent;
}

.fv-speech__arc--1 { width: 8px; height: 3px; animation-delay: 0s; }
.fv-speech__arc--2 { width: 13px; height: 3px; animation-delay: 0.2s; }
.fv-speech__arc--3 { width: 8px; height: 3px; animation-delay: 0.4s; }

@keyframes fv-speech-pulse {
  0%, 100% { opacity: 0.2; transform: scaleY(0.8); }
  50% { opacity: 1; transform: scaleY(1.6); }
}

.fv-canvas-player__desc {
  font-family: var(--ar-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(247, 245, 240, 0.7);
  margin: 0;
  white-space: normal;
}

/* ---------------------------------------------------------------------------
   Waveform bars
   --------------------------------------------------------------------------- */
.fv-waveform {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 36px;
  transform: scale(0.75);
  transform-origin: left center;
}

.fv-waveform__bar {
  width: 3px;
  border-radius: 1.5px;
  flex-shrink: 0;
  transition: height 0.12s ease;
}

.fv-waveform__bar--gold {
  background-color: var(--ar-accent);
}

.fv-waveform__bar--gold-muted {
  background-color: rgba(196, 169, 106, 0.25);
}

.fv-waveform__bar--dark {
  background-color: rgba(255, 255, 255, 0.25);
}

.fv-waveform__bar--dark-active {
  background-color: var(--ar-action);
}

/* ---------------------------------------------------------------------------
   Anatomy Intro
   --------------------------------------------------------------------------- */
.fv-anatomy-intro {
  padding: 40px 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fv-anatomy-intro__label {
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ar-accent);
}

.fv-anatomy-intro__text {
  font-family: var(--ar-font-body);
  font-size: 16px;
  line-height: 26px;
  color: var(--ar-gray);
  margin: 0;
  max-width: 680px;
}

/* ---------------------------------------------------------------------------
   Gorge Section
   --------------------------------------------------------------------------- */
.fv-gorge {
  background-image: url('/frog-view/gorge-bg.png');
  background-size: cover;
  background-position: center center;
  position: relative;
  margin-top: -60vh;
  padding: calc(60vh + 48px) 40px 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 769px) {
  .fv-gorge--desktop-hidden > .fv-card:not(.fv-card--comments),
  .fv-gorge--desktop-hidden > .fv-glass:not(.fv-card--comments) {
    display: none;
  }
}

.fv-gorge::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg,
    var(--ar-bg) 0%,
    rgba(247, 245, 240, 0.95) 15%,
    rgba(247, 245, 240, 0.6) 30%,
    rgba(247, 245, 240, 0.15) 42%,
    rgba(26,31,22,0.15) 52%,
    rgba(26,31,22,0.35) 70%,
    rgba(26,31,22,0.55) 100%
  );
  z-index: 0;
}

.fv-gorge > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   Glassmorphism Card
   --------------------------------------------------------------------------- */
.fv-glass {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background-color: var(--ar-glass-bg);
  border: 1px solid var(--ar-glass-border);
  border-radius: var(--ar-glass-radius);
}

.fv-card {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fv-card--annotation {
  display: none;
}

.fv-card__text-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
  overflow: hidden;
}
.fv-card__text-wrap--open {
  grid-template-rows: 1fr;
}
.fv-card__text-wrap > .fv-card__text {
  min-height: 0;
  overflow: hidden;
}

.fv-card__text {
  font-family: var(--ar-font-body);
  font-size: 15px; line-height: 24px;
  color: rgba(247, 245, 240, 0.7); margin: 0;
}

/* --- Inline Comments Card (mobile) ---------------------------------------- */

.fv-card--comments {
  display: flex;
  flex-direction: column;
  gap: 0;
  pointer-events: auto;
  max-width: 600px;
  align-self: flex-start;
}

.fv-card-comments__empty {
  text-align: center;
  color: rgba(247, 245, 240, 0.4);
  font-family: var(--ar-font-body);
  font-size: 14px;
  padding: 16px 0;
  margin: 0;
}
.fv-card-comments__header {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
}

.fv-card-comments__title {
  font-family: var(--ar-font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--ar-white);
  letter-spacing: 0.02em;
}

.fv-card-comments__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fv-card-comments__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fv-card-comments__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.fv-card-comments__author {
  font-size: 13px;
  font-weight: 600;
  color: var(--ar-accent);
}

.fv-card-comments__delete {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  color: rgba(247, 245, 240, 0.25);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0;
}
.fv-card-comments__item:hover .fv-card-comments__delete {
  opacity: 1;
}
.fv-card-comments__delete:hover {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.12);
}

.fv-card-comments__date {
  font-size: 11px;
  color: rgba(247, 245, 240, 0.35);
}

.fv-card-comments__body {
  font-family: var(--ar-font-body);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(247, 245, 240, 0.7);
  margin: 0;
}

.fv-card-comments__input-area {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fv-card-comments__input {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ar-white);
  font-size: 13px;
  font-family: var(--ar-font-body);
  outline: none;
}

.fv-card-comments__input::placeholder {
  color: rgba(247, 245, 240, 0.35);
}

.fv-card-comments__input:focus {
  border-color: var(--ar-accent);
}

.fv-card-comments__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--ar-accent);
  color: var(--ar-black);
  cursor: pointer;
  flex-shrink: 0;
}

.fv-card-comments__send:disabled {
  opacity: 0.4;
}

/* ---------------------------------------------------------------------------
   Sage Card
   --------------------------------------------------------------------------- */
.fv-sage {
  flex-direction: row; align-items: center;
  gap: 16px; padding: 18px 24px;
  cursor: pointer; transition: background-color 0.2s;
}

.fv-sage:hover { background-color: rgba(255, 255, 255, 0.16); }

.fv-sage__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background-color: var(--ar-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.fv-sage__content { display: flex; flex-direction: column; gap: 3px; }

.fv-sage__title {
  font-family: var(--ar-font-display);
  font-size: 16px; font-weight: 600; color: #fff;
}

.fv-sage__subtitle {
  font-family: var(--ar-font-body);
  font-size: 13px; color: rgba(247, 245, 240, 0.55);
}

.fv-sage__chevron { flex-shrink: 0; margin-left: auto; }

/* ---------------------------------------------------------------------------
   AR Button
   --------------------------------------------------------------------------- */
.fv-ar-section {
  padding: 32px 40px 48px;
  background-color: var(--ar-bg);
  position: relative;
  z-index: 1;
}

.fv-ar-btn {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 20px 24px;
  background-color: var(--ar-action);
  border-radius: 14px; border: none; cursor: pointer;
  transition: opacity 0.2s;
}

.fv-ar-btn:hover { opacity: 0.9; }

.fv-ar-btn__label {
  font-family: var(--ar-font-display);
  font-size: 16px; font-weight: 600; letter-spacing: 0.04em; color: #fff;
}

/* ---------------------------------------------------------------------------
   Loading / Error States
   --------------------------------------------------------------------------- */
.fv-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.fv-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(26, 31, 22, 0.1);
  border-top-color: var(--ar-accent);
  border-radius: 50%;
  animation: fv-spin 0.8s linear infinite;
}

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

@keyframes fv-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fv-loading__text {
  font-family: var(--ar-font-body);
  font-size: 14px;
  color: var(--ar-sage);
}

/* ---------------------------------------------------------------------------
   Pin Mascot — mobile only, owl + waveform above pin
   --------------------------------------------------------------------------- */
.fv-pin-mascot {
  display: none;
  position: absolute;
  transform: translate(-50%, -100%);
  margin-top: -12px;
  align-items: flex-end;
  gap: 2px;
  pointer-events: none;
  z-index: 7;
  animation: fv-fade-in 500ms ease;
}

.fv-pin-mascot__owl {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  mix-blend-mode: screen;
}

.fv-pin-mascot .fv-canvas-player__waveform {
  transform: scale(0.5);
  transform-origin: bottom center;
}

/* ===========================================================================
   MOBILE — max-width: 768px
   =========================================================================== */
@media (max-width: 768px) {

  .fv-header { padding: 16px 20px; }

  .fv-header__badge { padding: 6px 12px; }
  .fv-header__badge-label { font-size: 11px; }

  .fv-header__mascots { display: none; }
  .fv-header__brand { font-size: 17px; }
  .fv-header__subtitle { font-size: 10px; }

  .fv-canvas { padding-top: 30px; padding-bottom: 90px; }
  .fv-canvas__image { max-width: 95%; }

  .fv-dot { width: 22px; height: 22px; font-size: 11px; }
  .fv-dot-popover { display: none; }

  .fv-pills { display: none; }

  .fv-canvas-player { display: none; }

  .fv-pin-mascot { display: flex; }
  .fv-canvas-player__mascot { width: 80px; height: 80px; margin: -40px 0 -16px; }
  .fv-canvas-player__bar { padding: 8px 14px 8px 10px; gap: 10px; }
  .fv-canvas-player__title { font-size: 12px; }
  .fv-canvas-player__time { font-size: 10px; }
  .fv-canvas-player__bar { max-width: 280px; padding: 12px 14px; }
  .fv-canvas-player__desc { font-size: 12px; }

  .fv-species { bottom: 20px; left: 20px; }
  .fv-canvas--3d .fv-species { bottom: 80px; }
  .fv-species__latin { font-size: 12px; }
  .fv-species__name { font-size: 28px; }
  .fv-species__actions { order: -1; }

  .fv-audio-control__play { width: 30px; height: 30px; }
  .fv-audio-control__title { font-size: 13px; }
  .fv-audio-control__meta { font-size: 11px; }

  .fv-infobar__facts {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px; padding: 16px 20px;
  }
  .fv-infobar__fact-label { font-size: 10px; }
  .fv-infobar__fact-value { font-size: 15px; }

  .fv-anatomy-intro { padding: 24px 20px 16px; gap: 8px; }
  .fv-anatomy-intro__label { font-size: 11px; }
  .fv-anatomy-intro__text { font-size: 14px; line-height: 22px; }

  .fv-gorge { margin-top: -40vh; padding: calc(40vh + 24px) 16px 32px; gap: 14px; }

  .fv-glass { border-radius: 12px; }
  .fv-card { padding: 18px 20px; gap: 10px; }
  .fv-card--annotation { display: flex; }
  .fv-card__text { font-size: 13px; line-height: 20px; }

  .fv-sage { gap: 12px; padding: 14px 18px; }
  .fv-sage__icon { width: 36px; height: 36px; }
  .fv-sage__title { font-size: 14px; }
  .fv-sage__subtitle { font-size: 11px; }

  .fv-ar-section { padding: 16px 16px 32px; }
  .fv-ar-btn { padding: 18px 20px; }
  .fv-ar-btn__label { font-size: 14px; }
}

/* =============================================================================
   BROWSE PAGE — Species overview / catalog
   ============================================================================= */

/* Hero */
.browse-hero {
  padding: 100px 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.browse-hero__title {
  font-family: var(--ar-font-display);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ar-text);
  margin: 0;
}

.browse-hero__subtitle {
  font-family: var(--ar-font-body);
  font-size: 16px;
  color: var(--ar-gray);
  margin: 0;
  line-height: 1.5;
}

.browse-hero__count {
  font-family: var(--ar-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ar-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 4px 0 0;
}

/* Category chips — horizontal scroll */
.browse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 40px 24px;
}

.browse-chips__btn {
  font-family: var(--ar-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1.5px solid rgba(26, 31, 22, 0.12);
  background: transparent;
  color: var(--ar-gray);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.browse-chips__btn:hover {
  border-color: var(--ar-sage);
  color: var(--ar-text);
}

.browse-chips__btn--active {
  background: var(--ar-black);
  border-color: var(--ar-black);
  color: var(--ar-white);
}

.browse-chips__btn--active:hover {
  background: var(--ar-black);
  border-color: var(--ar-black);
  color: var(--ar-white);
}

.browse-chips__count {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.5;
}

.browse-chips__btn--active .browse-chips__count {
  opacity: 0.7;
}

/* Content area */
.browse-content {
  padding: 0 40px;
  flex: 1;
}

/* Species grid — dense, cards side by side */
.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

/* Species card */
.browse-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(26, 31, 22, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;
}

.browse-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 31, 22, 0.08);
}

.browse-card__img-wrap {
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(26, 31, 22, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.browse-card__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}

.browse-card:hover .browse-card__img {
  transform: scale(1.05);
}

.browse-card__info {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.browse-card__name {
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ar-text);
  line-height: 1.3;
}

.browse-card__latin {
  font-family: var(--ar-font-body);
  font-size: 12px;
  font-style: italic;
  color: var(--ar-sage);
  line-height: 1.3;
}

.browse-card__tag {
  font-family: var(--ar-font-body);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ar-accent);
  margin-top: 3px;
  opacity: 0.75;
}

/* Sponsor Footer (shared across all pages) */
.fv-sponsor-footer {
  padding: 40px 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.fv-sponsor-footer__text {
  font-family: var(--ar-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ar-sage);
}

.fv-sponsor-footer__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.fv-sponsor-footer__logo {
  height: 36px;
  width: auto;
  opacity: 0.45;
  filter: grayscale(100%);
  transition: opacity 0.2s;
}

.fv-sponsor-footer__logo:hover {
  opacity: 0.7;
}

/* Night mode: logos are white-on-transparent, show them brighter */
.fv-page--night .fv-sponsor-footer__logo {
  opacity: 0.35;
  filter: none;
}

.fv-page--night .fv-sponsor-footer__logo:hover {
  opacity: 0.55;
}

.fv-page--night .fv-sponsor-footer__text {
  color: rgba(247, 245, 240, 0.4);
}

/* ── Browse page mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .browse-hero { padding: 80px 16px 20px; }
  .browse-hero__title { font-size: 28px; }
  .browse-hero__subtitle { font-size: 14px; }

  .browse-chips { padding: 0 16px 16px; gap: 6px; }
  .browse-chips__btn { font-size: 12px; padding: 7px 12px; }

  .browse-content { padding: 0 16px; }

  .browse-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }

  .browse-card { border-radius: 10px; }
  .browse-card__info { padding: 8px 10px 10px; }
  .browse-card__name { font-size: 12px; }
  .browse-card__latin { font-size: 10px; }

  .fv-sponsor-footer { padding: 24px 16px 20px; gap: 14px; }
  .fv-sponsor-footer__logos { gap: 20px; }
  .fv-sponsor-footer__logo { height: 28px; }
}

/* ---------------------------------------------------------------------------
   3D Annotation Pins (CSS2DRenderer)
   --------------------------------------------------------------------------- */
.fv-3d-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.fv-3d-wrap--visible {
  opacity: 1;
  transform: scale(1);
}

.fv-3d-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--ar-accent);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: box-shadow 0.2s, background-color 0.2s;
}

.fv-3d-dot--active {
  background-color: var(--ar-action);
  box-shadow: 0 0 0 4px rgba(61, 90, 62, 0.3), 0 2px 12px rgba(0, 0, 0, 0.4);
}

.fv-3d-popover {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(247, 245, 240, 0.8);
  border-radius: 10px;
  padding: 10px 14px;
  width: 220px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: none;
}

.fv-3d-popover--visible {
  display: block;
}

.fv-3d-popover__label {
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ar-text);
  display: block;
  margin-bottom: 3px;
}

.fv-3d-popover__text {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: var(--ar-gray);
  line-height: 1.5;
  margin: 0;
}

/* =============================================================================
   3D MODEL VIEWER
   ============================================================================= */

.mv-canvas {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--ar-bg);
}

.mv-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 40px;
  background-color: var(--ar-black);
}

.mv-info__latin {
  font-family: var(--ar-font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--ar-sage);
}

.mv-info__name {
  font-family: var(--ar-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ar-white);
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .mv-info { padding: 16px 20px; }
  .mv-info__name { font-size: 18px; }
}

/* =============================================================================
   Site Footer (.site-footer)
   ============================================================================= */

.site-footer {
  margin-top: auto;
  background: transparent;
  color: #F7F5F0;
  position: relative;
  z-index: 1;
}
.sg-bg-photo .site-footer {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Top: Brand + Links side by side */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #F7F5F0;
}

.site-footer__brand-name {
  font-family: var(--ar-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.site-footer__tagline {
  font-family: var(--ar-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(247, 245, 240, 0.5);
  max-width: 320px;
}

.site-footer__links {
  display: flex;
  gap: 64px;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__col-title {
  font-family: var(--ar-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ar-gold);
  margin-bottom: 4px;
}

.site-footer__link {
  font-family: var(--ar-font-body);
  font-size: 14px;
  color: rgba(247, 245, 240, 0.6);
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer__link:hover {
  color: #F7F5F0;
}

.site-footer__text {
  font-family: var(--ar-font-body);
  font-size: 14px;
  color: rgba(247, 245, 240, 0.4);
}

/* Divider */
.site-footer__divider {
  height: 1px;
  width: 100%;
  background: rgba(247, 245, 240, 0.1);
}

/* Bottom: Sponsors + Copyright */
.site-footer__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.site-footer__sponsors {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__sponsor-label {
  font-family: var(--ar-font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.3);
}

.site-footer__sponsor-logos {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-footer__sponsor-img {
  height: 32px;
  width: auto;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.site-footer__sponsor-img:hover {
  opacity: 0.65;
}

.site-footer__copy {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: rgba(247, 245, 240, 0.25);
}

.site-footer__bottom-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.site-footer__lang {
  display: flex;
  gap: 4px;
}

.site-footer__lang-btn {
  background: none;
  border: 1px solid rgba(247, 245, 240, 0.12);
  border-radius: 4px;
  color: rgba(247, 245, 240, 0.35);
  font-family: var(--ar-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.site-footer__lang-btn:hover {
  color: rgba(247, 245, 240, 0.6);
  border-color: rgba(247, 245, 240, 0.25);
}

.site-footer__lang-btn--active {
  color: var(--ar-accent, #C4A96A);
  border-color: var(--ar-accent, #C4A96A);
  background: rgba(196, 169, 106, 0.1);
}

/* ── Site Footer mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-footer__inner { padding: 40px 20px 24px; gap: 28px; }
  .site-footer__links { flex-direction: column; gap: 28px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  .site-footer__sponsor-logos { gap: 20px; }
  .site-footer__sponsor-img { height: 26px; }
}

/* =============================================================================
   Styleguide Page (.sg-)
   ============================================================================= */

/* Photo background mode */
.sg-bg-photo__img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: url('/frog-view/gorge-bg.png') center top / cover no-repeat;
  z-index: 0;
}
.sg-bg-photo__overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}

/* Fade controls */
.sg-fade-controls {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 100;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 220px;
}
.sg-fade-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sg-fade-controls span {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.sg-fade-controls input[type="range"] {
  width: 100%;
  accent-color: var(--ar-gold);
}
.sg-fade-controls__divider {
  height: 1px;
  background: rgba(255,255,255,0.12);
}
.sg-bg-photo .sg-content {
  position: relative;
  z-index: 1;
}
/* Ensure all direct children except the photo layer sit above it */
.sg-bg-photo > *:not(.sg-bg-photo__img) {
  position: relative;
  z-index: 1;
}
/* Override sky gradient and stars in photo mode */
.sg-bg-photo.fv-page {
  background: transparent !important;
}
.sg-bg-photo::after,
.sg-bg-photo::before {
  display: none !important;
}

/* Photo button active state */
.sg-photo-btn--active {
  background-color: rgba(196,169,106,0.25) !important;
  border: 1px solid rgba(196,169,106,0.4) !important;
}

/* Light mode footer: dark text */
.fv-page--light .site-footer {
  color: #1A1F16;
}
.fv-page--light .site-footer__logo { color: #1A1F16; }
.fv-page--light .site-footer__tagline { color: rgba(26,31,22,0.6); }
.fv-page--light .site-footer__col-title { color: #1A1F16; }
.fv-page--light .site-footer__link { color: rgba(26,31,22,0.6); }
.fv-page--light .site-footer__link:hover { color: #1A1F16; }
.fv-page--light .site-footer__text { color: rgba(26,31,22,0.5); }
.fv-page--light .site-footer__divider { background: rgba(26,31,22,0.1); }
.fv-page--light .site-footer__sponsor-label { color: rgba(26,31,22,0.4); }
.fv-page--light .site-footer__copy { color: rgba(26,31,22,0.35); }
.fv-page--light .site-footer__lang-btn { color: rgba(26,31,22,0.35); border-color: rgba(26,31,22,0.12); }
.fv-page--light .site-footer__lang-btn:hover { color: rgba(26,31,22,0.6); border-color: rgba(26,31,22,0.25); }
.fv-page--light .site-footer__lang-btn--active { color: var(--ar-green, #3D5A3E); border-color: var(--ar-green, #3D5A3E); background: rgba(61,90,62,0.1); }

/* Light mode photo: footer glass */
.sg-bg-photo.fv-page--light .site-footer {
  background: rgba(247,245,240,0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sg-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px 0;
}

.sg-section { display: flex; flex-direction: column; gap: 24px; padding-bottom: 48px; }
.sg-section--last { padding-bottom: 80px; }

.sg-divider { height: 1px; width: 100%; background: var(--ar-sage); opacity: 0.25; }

.sg-label {
  font-family: var(--ar-font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ar-gold);
}

.sg-title {
  font-family: var(--ar-font-display);
  font-size: clamp(36px, 6vw, 64px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.05;
  color: var(--ar-text);
}

.sg-header { padding-top: 16px; }
.sg-header .sg-desc {
  font-family: var(--ar-font-body);
  font-size: clamp(15px, 2vw, 18px); line-height: 1.55;
  color: var(--ar-gray); max-width: 600px;
}

.sg-section-header {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 24px;
  padding-top: 16px;
}

.sg-num {
  display: block;
  font-family: var(--ar-font-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ar-gold);
}

.sg-heading {
  font-family: var(--ar-font-display);
  font-size: clamp(24px, 3vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.25;
  color: var(--ar-text); margin-top: 4px;
}

.sg-aside {
  font-family: var(--ar-font-body);
  font-size: 14px; line-height: 1.55;
  color: var(--ar-sage); max-width: 400px;
  text-align: right;
}

/* Rows */
.sg-row { display: flex; gap: 16px; }
.sg-row--2 > * { flex: 1 1 0%; min-width: 0; }
.sg-row--3 > * { flex: 1 1 0%; min-width: 0; }
.sg-row--5 > * { flex: 1 1 0%; min-width: 0; }
.sg-row--6 > * { flex: 1 1 0%; min-width: 0; }

/* Logo cards */
.sg-logo-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px; border-radius: 12px;
  aspect-ratio: 1 / 1; max-height: 280px;
}
.sg-logo-card__text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sg-logo-card__label { font-family: var(--ar-font-display); font-size: 13px; font-weight: 600; }
.sg-logo-card__sub { font-family: var(--ar-font-body); font-size: 12px; color: var(--ar-sage); }
.sg-logo-card__img { height: 80px; width: auto; }

/* Color swatches */
.sg-swatch { border-radius: 12px; overflow: clip; display: flex; flex-direction: column; }
.sg-swatch--hero { flex-direction: row; }
.sg-swatch__color { height: 100px; width: 100%; position: relative; }
.sg-swatch__color--hero { height: 200px; flex: 1; }
.sg-swatch__info--hero { width: 240px; flex-shrink: 0; justify-content: center; padding: 24px; }

/* Gold metallic swatch */
.sg-swatch__color--gold {
  background: linear-gradient(
    135deg,
    #7A6420 0%,
    #B8973C 15%,
    #E8D9A0 30%,
    #FFF8E0 40%,
    #E8D9A0 50%,
    #B8973C 65%,
    #7A6420 78%,
    #B8973C 88%,
    #E8D9A0 95%,
    #C4A96A 100%
  ) !important;
  overflow: hidden;
}

.sg-swatch__color--gold::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.7) 48%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.7) 52%,
    rgba(255, 255, 255, 0) 65%,
    transparent 80%
  );
  animation: sg-shimmer 3s 1s ease-in-out infinite;
}

@keyframes sg-shimmer {
  0% { transform: translateX(-80%) rotate(-5deg); }
  50% { transform: translateX(80%) rotate(-5deg); }
  100% { transform: translateX(80%) rotate(-5deg); }
}

/* Gold shimmer text */
.sg-gold-text {
  background: linear-gradient(
    90deg,
    #7A6420 0%,
    #C4A96A 15%,
    #D9C68A 35%,
    #E0CFA0 50%,
    #D9C68A 65%,
    #C4A96A 85%,
    #7A6420 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sg-gold-shift 8s ease-in-out infinite;
}

@keyframes sg-gold-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Gold shimmer for background elements (buttons, badges, bars) */
.sg-gold-shimmer {
  background: linear-gradient(135deg, #7A6420 0%, #B8973C 20%, #C4A96A 40%, #B8973C 60%, #7A6420 80%, #B8973C 100%) !important;
  background-size: 300% 100% !important;
  animation: sg-gold-shift 8s ease-in-out infinite !important;
  color: #1A1F16 !important;
  border: none !important;
}

.sg-swatch__info { background: #EDEAE3; padding: 14px; display: flex; flex-direction: column; gap: 3px; }
.sg-swatch__name { font-family: var(--ar-font-display); font-size: 13px; font-weight: 600; color: #1A1F16; }
.sg-swatch__hex { font-family: var(--ar-font-body); font-size: 12px; color: var(--ar-sage); }
.sg-swatch__usage { font-family: var(--ar-font-body); font-size: 11px; color: var(--ar-sage); }

/* Type cards */
.sg-type-card { border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.sg-type-card--dark { background: #1A1F16; color: #F7F5F0; }
.sg-type-card--light { background: #EDEAE3; color: #1A1F16; }

.sg-pill {
  display: inline-flex; align-self: flex-start;
  padding: 4px 12px; border-radius: 100px;
  font-family: var(--ar-font-body); font-size: 11px;
  font-weight: 500; letter-spacing: 0.06em;
}
.sg-pill--gold { background: rgba(196,169,106,0.2); color: #C4A96A; }
.sg-pill--green { background: rgba(61,90,62,0.15); color: #3D5A3E; }

.sg-type-card__specimen { display: flex; flex-direction: column; gap: 8px; }
.sg-type-card__font { font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.02em; line-height: 1.1; }
.sg-type-card__meta { font-family: var(--ar-font-body); font-size: 14px; opacity: 0.5; }
.sg-type-card__examples { display: flex; flex-direction: column; gap: 6px; }
.sg-type-card__divider { height: 1px; width: 100%; }
.sg-type-card--dark .sg-type-card__divider { background: rgba(247,245,240,0.1); }
.sg-type-card--light .sg-type-card__divider { background: #D4D0C8; }
.sg-type-card__body { display: flex; flex-direction: column; gap: 6px; font-family: var(--ar-font-body); font-size: 16px; line-height: 1.6; }
.sg-type-card--light .sg-type-card__body { color: #5A5347; }
.sg-type-card--light .sg-type-card__meta { color: var(--ar-sage); opacity: 1; }

/* Verlauf-Prinzip (horizontal: solid left → gradient → photo right) */
.sg-verlauf {
  border-radius: 12px;
  overflow: clip;
  display: flex;
  flex-direction: column;
}

.sg-verlauf--h {
  flex-direction: row;
  height: 300px;
}

.sg-verlauf__solid {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.sg-verlauf--h .sg-verlauf__solid {
  width: 35%;
  flex-shrink: 0;
}

.sg-verlauf--dark .sg-verlauf__solid { background: #1A1F16; }
.sg-verlauf--light .sg-verlauf__solid { background: #F7F5F0; }

.sg-verlauf__title {
  font-family: var(--ar-font-display);
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sg-verlauf--dark .sg-verlauf__title { color: #F7F5F0; }
.sg-verlauf--light .sg-verlauf__title { color: #1A1F16; }

.sg-verlauf__desc {
  font-family: var(--ar-font-body);
  font-size: 13px;
  line-height: 1.55;
}
.sg-verlauf--dark .sg-verlauf__desc { color: rgba(247,245,240,0.6); }
.sg-verlauf--light .sg-verlauf__desc { color: #5A5347; }

.sg-verlauf__photo {
  position: relative;
  flex: 1;
  min-height: 200px;
}

.sg-verlauf__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.sg-verlauf__fade {
  position: absolute;
  pointer-events: none;
}

.sg-verlauf--h .sg-verlauf__fade {
  top: 0; bottom: 0; left: 0;
  width: 50%;
}

.sg-verlauf__fade--dark {
  background: linear-gradient(90deg, #1A1F16 0%, transparent 100%);
}

.sg-verlauf__fade--light {
  background: linear-gradient(90deg, #F7F5F0 0%, transparent 100%);
}

/* Keep tag style shared */
.sg-gradient-card__tag { font-family: var(--ar-font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-gold); }

/* UI Cards */
.sg-ui-card { border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.sg-ui-card--dark { background: #1A1F16; color: #F7F5F0; }
.sg-ui-card--light { background: #EDEAE3; color: #1A1F16; }
.sg-ui-card__title { font-family: var(--ar-font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-gold); }
.sg-ui-card__code { font-family: var(--ar-font-body); font-size: 11px; color: var(--ar-sage); white-space: pre-wrap; line-height: 1.5; }

/* Glass demo */
.sg-glass-demo {
  background: rgba(247,245,240,0.12); border: 1px solid rgba(247,245,240,0.08);
  border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.sg-glass-demo__header { display: flex; justify-content: space-between; font-family: var(--ar-font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; }
.sg-glass-demo__player { display: flex; align-items: center; gap: 12px; }
.sg-glass-demo__play {
  width: 36px; height: 36px; border-radius: 100px;
  background: rgba(247,245,240,0.15); display: flex;
  align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.sg-glass-demo__track { flex: 1; height: 4px; background: rgba(247,245,240,0.1); border-radius: 2px; }
.sg-glass-demo__progress {
  width: 35%; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #7A6420 0%, #B8973C 20%, #C4A96A 40%, #B8973C 60%, #7A6420 80%, #B8973C 100%);
  background-size: 300% 100%;
  animation: sg-gold-shift 8s ease-in-out infinite;
}
.sg-glass-demo__time { font-family: var(--ar-font-body); font-size: 11px; opacity: 0.4; }
.sg-glass-demo__body { font-family: var(--ar-font-body); font-size: 13px; opacity: 0.6; line-height: 1.55; }

/* Badges */
.sg-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.sg-badge { padding: 8px 18px; border-radius: 100px; font-family: var(--ar-font-body); font-size: 13px; font-weight: 500; }
.sg-badge--filled { background: #3D5A3E; color: #F7F5F0; }
.sg-badge--outline { background: rgba(61,90,62,0.12); color: #3D5A3E; }
.sg-badge--gold { background: #C4A96A; color: #1A1F16; font-weight: 600; }

/* Hotspots */
.sg-hotspots { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.sg-hotspot {
  width: 40px; height: 40px; border-radius: 100px;
  background: rgba(26,31,22,0.6); border: 2px solid rgba(247,245,240,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ar-font-body); font-size: 14px; font-weight: 500;
  color: #F7F5F0; flex-shrink: 0;
}
.sg-hotspots__label { font-family: var(--ar-font-body); font-size: 12px; color: var(--ar-sage); padding-left: 8px; }

/* Rules */
.sg-rules {
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--ar-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ar-glass-border);
}
.sg-rules--do { border-color: var(--ar-glass-border); }
.sg-rules--dont { border-color: var(--ar-glass-border); }
.sg-rules__title { font-family: var(--ar-font-display); font-size: 18px; font-weight: 700; }
.sg-rules--do .sg-rules__title { color: #6B9E6E; }
.sg-rules--dont .sg-rules__title { color: #C46050; }
.sg-rules__item { display: flex; align-items: flex-start; gap: 12px; font-family: var(--ar-font-body); font-size: 14px; line-height: 1.55; color: rgba(247,245,240,0.75); }
.sg-rules__icon { flex-shrink: 0; font-size: 14px; line-height: 1.3; }
.sg-rules--do .sg-rules__icon { color: #6B9E6E; }
.sg-rules--dont .sg-rules__icon { color: #C46050; }

/* Light mode overrides for rules */
.fv-page--light .sg-rules {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(0,0,0,0.08);
}
.fv-page--light .sg-rules--do { border-color: rgba(0,0,0,0.08); }
.fv-page--light .sg-rules--dont { border-color: rgba(0,0,0,0.08); }
.fv-page--light .sg-rules--do .sg-rules__title { color: #3D5A3E; }
.fv-page--light .sg-rules--dont .sg-rules__title { color: #8B4040; }
.fv-page--light .sg-rules__item { color: var(--ar-gray); }
.fv-page--light .sg-rules--do .sg-rules__icon { color: #3D5A3E; }
.fv-page--light .sg-rules--dont .sg-rules__icon { color: #8B4040; }

/* Dialogs section */
.sg-dialogs {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.sg-dialog-preview {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sg-dialog-preview__label {
  font-family: var(--ar-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sg-dialog {
  position: relative;
  padding: 40px 32px 32px;
  background: var(--ar-glass-bg);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid var(--ar-glass-border);
  border-radius: var(--ar-glass-radius);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.sg-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.04);
  color: rgba(247,245,240,0.4);
  cursor: pointer;
  transition: all 0.15s;
}
.sg-dialog__close:hover {
  background: rgba(255,255,255,0.12);
  color: rgba(247,245,240,0.7);
}
.sg-dialog__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.sg-dialog__brand-name {
  font-family: var(--ar-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #F7F5F0;
}
.fv-page--light .sg-dialog__brand-name { color: #1A1F16; }
.sg-dialog__icon {
  color: var(--ar-gold);
  margin-bottom: 20px;
}
.sg-dialog__icon--success { color: #6B9E6E; }
.sg-dialog__icon--warn { color: #C4A96A; }
.sg-dialog__title {
  font-family: var(--ar-font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
  background: linear-gradient(90deg, #7A6420 0%, #C4A96A 15%, #D9C68A 35%, #E0CFA0 50%, #D9C68A 65%, #C4A96A 85%, #7A6420 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sg-gold-shift 8s ease-in-out infinite;
}
.sg-dialog__desc {
  font-family: var(--ar-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(247,245,240,0.85);
  margin: 0 0 28px;
  max-width: 260px;
}
.sg-dialog__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 24px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--ar-glass-radius);
  background: rgba(255,255,255,0.06);
  color: #F7F5F0;
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.sg-dialog__btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}
.sg-dialog__btn--primary {
  background: var(--ar-gold);
  border-color: transparent;
  color: #1A1F16;
}
.sg-dialog__btn--primary:hover {
  background: #D4B97A;
  border-color: transparent;
}
.sg-dialog__btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.08);
  color: rgba(247,245,240,0.6);
}
.sg-dialog__btn--ghost:hover {
  background: rgba(255,255,255,0.06);
  color: #F7F5F0;
}
.sg-dialog__btn--danger {
  background: rgba(196,60,50,0.2);
  border-color: rgba(196,60,50,0.3);
  color: #E07060;
}
.sg-dialog__btn--danger:hover {
  background: rgba(196,60,50,0.3);
  border-color: rgba(196,60,50,0.4);
}
.sg-dialog__btn--google { /* inherits default glass style */ }
.sg-dialog__actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.sg-dialog__actions .sg-dialog__btn { flex: 1; }
.sg-dialog__hint {
  font-family: var(--ar-font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(247,245,240,0.3);
  margin-top: 16px;
}

/* Light mode dialogs */
.fv-page--light .sg-dialog {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.25);
}
.fv-page--light .sg-dialog__close {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.04);
  color: rgba(26,31,22,0.4);
}
.fv-page--light .sg-dialog__close:hover {
  background: rgba(0,0,0,0.08);
  color: rgba(26,31,22,0.6);
}
.fv-page--light .sg-dialog__title {
  background: linear-gradient(90deg, #7A6420 0%, #A08040 15%, #B8973C 35%, #C4A96A 50%, #B8973C 65%, #A08040 85%, #7A6420 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sg-gold-shift 8s ease-in-out infinite;
}
.fv-page--light .sg-dialog__desc { color: rgba(26,31,22,0.85); }
.fv-page--light .sg-dialog__btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
  color: #1A1F16;
}
.fv-page--light .sg-dialog__btn:hover {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.14);
}
.fv-page--light .sg-dialog__btn--primary {
  background: var(--ar-gold);
  border-color: transparent;
  color: #1A1F16;
}
.fv-page--light .sg-dialog__btn--ghost {
  background: transparent;
  border-color: rgba(0,0,0,0.06);
  color: rgba(26,31,22,0.5);
}
.fv-page--light .sg-dialog__btn--danger {
  background: rgba(196,60,50,0.08);
  border-color: rgba(196,60,50,0.15);
  color: #8B4040;
}
.fv-page--light .sg-dialog__hint { color: rgba(26,31,22,0.3); }

/* Verlauf-Dialog light: standalone overrides (for portal rendering outside .fv-page) */
.sg-vdialog--light .sg-dialog__title {
  background: linear-gradient(90deg, #7A6420 0%, #A08040 15%, #B8973C 35%, #C4A96A 50%, #B8973C 65%, #A08040 85%, #7A6420 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sg-gold-shift 8s ease-in-out infinite;
}
.sg-vdialog--light .sg-dialog__btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
  color: #1A1F16;
}
.sg-vdialog--light .sg-dialog__btn:hover {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.14);
}
.sg-vdialog--light .sg-dialog__btn--primary {
  background: var(--ar-gold);
  border-color: transparent;
  color: #1A1F16;
}
/* Dark Verlauf — force light text even inside .fv-page--light */
.sg-vdialog--dark .sg-dialog__title {
  color: #F7F5F0;
}
.sg-vdialog--dark .sg-dialog__label {
  color: rgba(247,245,240,0.7);
}
.sg-vdialog--dark .sg-dialog__input {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: #F7F5F0;
}
.sg-vdialog--dark .sg-dialog__input::placeholder {
  color: rgba(247,245,240,0.35);
}
.sg-vdialog--dark .sg-dialog__input:focus {
  border-color: rgba(196,169,106,0.5);
  background: rgba(255,255,255,0.12);
}
.sg-vdialog--dark .sg-dialog__desc {
  color: rgba(247,245,240,0.85);
}
.sg-vdialog--dark .sg-vdialog__desc {
  color: rgba(247,245,240,0.6);
}
.sg-vdialog--dark .sg-dialog__hint {
  color: rgba(247,245,240,0.3);
}
.sg-vdialog--dark .sg-dialog__link {
  color: var(--ar-gold);
}
.sg-vdialog--dark .sg-dialog__btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: #F7F5F0;
}
.sg-vdialog--dark .sg-dialog__btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.15);
}
.sg-vdialog--dark .sg-dialog__btn--primary {
  background: var(--ar-gold);
  border-color: transparent;
  color: #1A1F16;
}
.sg-vdialog--dark .sg-dialog__btn--google {
  color: #F7F5F0;
}

.sg-vdialog--light .sg-dialog__label {
  color: rgba(26,31,22,0.7);
}
.sg-vdialog--light .sg-dialog__input {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
  color: #1A1F16;
}
.sg-vdialog--light .sg-dialog__input::placeholder {
  color: rgba(26,31,22,0.3);
}
.sg-vdialog--light .sg-dialog__input:focus {
  border-color: rgba(196,169,106,0.6);
  background: rgba(0,0,0,0.02);
}
.sg-vdialog--light .sg-dialog__hint {
  color: rgba(26,31,22,0.3);
}

/* Verlauf-Dialoge */
.sg-vdialog {
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  min-height: 540px;
}
.sg-vdialog__content {
  position: relative;
  flex: 0 0 420px;
  padding: 56px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.sg-vdialog__content .sg-dialog__form {
  width: 100%;
}
.sg-vdialog__content .sg-dialog__btn {
  width: 100%;
}
.sg-vdialog--dark .sg-vdialog__content {
  background: #1A1F16;
  color: #F7F5F0;
}
.sg-vdialog--light .sg-vdialog__content {
  background: #F7F5F0;
  color: #1A1F16;
}
.sg-vdialog__content .sg-dialog__title {
  text-align: left;
  align-self: flex-start;
}
.sg-vdialog__content .sg-vdialog__desc {
  align-self: flex-start;
}
.sg-vdialog__content--centered {
  text-align: center;
  align-items: center;
}
.sg-vdialog__content--centered .sg-dialog__title {
  text-align: center;
  align-self: center;
}
.sg-vdialog__content--centered .sg-vdialog__desc {
  align-self: center;
}
.sg-vdialog__content--centered .comic-cover__meta {
  justify-content: center;
}
.sg-vdialog__content--centered .comic-cover__label {
  align-self: center;
}
.sg-vdialog__content--centered .comic-cover__preview {
  align-self: center;
}
.sg-vdialog__content .sg-dialog__hint {
  align-self: center;
}
.sg-vdialog__desc {
  font-family: var(--ar-font-body);
  font-size: 19px;
  line-height: 1.7;
  color: rgba(247,245,240,0.7);
  margin: 0 0 28px;
}
.sg-vdialog__desc--light {
  color: rgba(26,31,22,0.6);
}
.sg-vdialog__photo {
  position: relative;
  flex: 1;
}
.sg-vdialog__img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
}
.sg-vdialog__fade {
  position: absolute;
  top: 0; left: 0; width: 50%; height: 100%;
}
.sg-vdialog__fade--dark {
  background: linear-gradient(90deg, #1A1F16 0%, transparent 100%);
}
.sg-vdialog__fade--light {
  background: linear-gradient(90deg, #F7F5F0 0%, transparent 100%);
}
.sg-vdialog__content .sg-dialog__close {
  top: 16px;
  right: auto;
  left: 16px;
}
.sg-dialog__close--light {
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.06) !important;
  color: rgba(26,31,22,0.4) !important;
}
.sg-dialog__close--light:hover {
  background: rgba(0,0,0,0.1) !important;
  color: rgba(26,31,22,0.7) !important;
}
.sg-dialog__input--light {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #1A1F16 !important;
}
.sg-dialog__input--light::placeholder {
  color: rgba(26,31,22,0.3) !important;
}

/* Verlauf dialog brand overlay */
.sg-vdialog__brand-overlay {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.sg-vdialog__brand-logo {
  width: 28px;
  height: auto;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
}
.sg-vdialog__brand-text {
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #F7F5F0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Verlauf dialog video */
.sg-vdialog__video {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 768px) {
  .sg-vdialog { flex-direction: column; height: calc(85vh); }
  .sg-vdialog__content { flex: 7; order: 2; padding: 24px 20px; border-radius: 0 0 20px 20px; overflow-y: auto; }
  .sg-vdialog__photo { flex: 2; order: 1; min-height: 0; }
  .sg-vdialog__fade { top: auto; bottom: 0; left: 0; width: 100%; height: 50%; }
  .sg-vdialog__fade--dark { background: linear-gradient(0deg, #1A1F16 0%, transparent 100%); }
  .sg-vdialog__fade--light { background: linear-gradient(0deg, #F7F5F0 0%, transparent 100%); }
  .sg-vdialog__brand-overlay { top: 12px; right: 12px; }
}

/* Compact variant — used on landing page (two side-by-side) */
.sg-vdialog--compact {
  min-height: 420px;
}
.sg-vdialog--compact .sg-vdialog__content {
  flex: 0 0 200px;
  padding: 28px 24px;
}
.sg-vdialog--compact .sg-dialog__title {
  font-size: 17px;
}
.sg-vdialog--compact .sg-vdialog__desc {
  font-size: 13px;
  margin-bottom: 12px;
}
.sg-vdialog--compact .comic-cover__meta {
  font-size: 11px;
}
.sg-vdialog--compact .comic-cover__label {
  font-size: 11px;
}
.sg-vdialog--compact .sg-vdialog__brand-overlay {
  top: 12px;
  right: 12px;
}
.sg-vdialog--compact .sg-vdialog__brand-logo {
  width: 20px;
}
.sg-vdialog--compact .sg-vdialog__brand-text {
  font-size: 11px;
}
@media (max-width: 768px) {
  .landing-stories__grid { grid-template-columns: 1fr; }
  .sg-vdialog--compact { min-height: auto; }
  .sg-vdialog--compact .sg-vdialog__content { flex: none; }
  .sg-vdialog--compact .sg-vdialog__photo { min-height: 260px; }
}

/* Dialog form elements */
.sg-dialog__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-bottom: 24px;
  text-align: left;
}
.sg-dialog__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sg-dialog__label {
  font-family: var(--ar-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(247,245,240,0.85);
}
.sg-dialog__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: #F7F5F0;
  font-family: var(--ar-font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.sg-dialog__input::placeholder {
  color: rgba(247,245,240,0.25);
}
.sg-dialog__input:focus {
  border-color: rgba(196,169,106,0.5);
  background: rgba(255,255,255,0.06);
}
.sg-dialog__link {
  color: var(--ar-gold);
  cursor: pointer;
  font-weight: 600;
}
.sg-dialog__link:hover {
  text-decoration: underline;
}

/* Divider "or" */
.sg-dialog__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 4px 0 12px;
}
.sg-dialog__divider::before,
.sg-dialog__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(26,31,22,0.1);
}
.sg-dialog__divider span {
  font-size: 12px;
  color: rgba(26,31,22,0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Success state */
.sg-dialog__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  text-align: center;
}
.sg-dialog__success p {
  font-size: 14px;
  color: rgba(26,31,22,0.7);
  margin: 0;
  line-height: 1.5;
}

/* Light mode form */
.fv-page--light .sg-dialog__label { color: rgba(26,31,22,0.85); }
.fv-page--light .sg-dialog__input {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
  color: #1A1F16;
}
.fv-page--light .sg-dialog__input::placeholder { color: rgba(26,31,22,0.3); }
.fv-page--light .sg-dialog__input:focus {
  border-color: rgba(196,169,106,0.6);
  background: rgba(0,0,0,0.02);
}

/* ── Dialog overlay (global) ───────────────────────────────────────── */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: dialog-fade-in 0.2s ease-out;
}
.dialog-overlay__inner {
  max-width: 900px;
  width: calc(100% - 32px);
  animation: dialog-slide-up 0.25s ease-out;
}
.dialog-overlay__inner .sg-dialog:only-child {
  max-width: 380px;
  margin: 0 auto;
}
@keyframes dialog-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dialog-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Styleguide mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sg-content { padding: 72px 16px 0; }
  .sg-section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sg-aside { text-align: left; max-width: none; }

  .sg-row--3, .sg-row--5, .sg-row--6 { flex-wrap: wrap; }
  .sg-row--5 > * { flex: 1 1 calc(33.33% - 12px); min-width: 90px; }
  .sg-row--6 > * { flex: 1 1 calc(33.33% - 12px); min-width: 90px; }
  .sg-swatch--hero { flex-direction: column; }
  .sg-swatch__color--hero { height: 160px; }
  .sg-swatch__info--hero { width: 100%; }
  .sg-row--3 > * { flex: 1 1 calc(50% - 8px); }
  .sg-row--2 { flex-direction: column; }

  .sg-logo-card { aspect-ratio: auto; height: 200px; }
  .sg-logo-card svg { width: 48px; height: 60px; }
  .sg-swatch__color { height: 70px; }

  .sg-verlauf--h { flex-direction: column; height: auto; }
  .sg-verlauf--h .sg-verlauf__solid { width: 100%; }
  .sg-verlauf--h .sg-verlauf__fade { top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: 50%; }
  .sg-verlauf__fade--dark { background: linear-gradient(180deg, #1A1F16 0%, transparent 100%); }
  .sg-verlauf__fade--light { background: linear-gradient(180deg, #F7F5F0 0%, transparent 100%); }
  .sg-verlauf__photo { min-height: 200px; }
  .sg-type-card { padding: 20px; }
}

/* =============================================================================
   Landing Page
   ============================================================================= */
.landing {
  --ar-black: #1A1F16;
  --ar-white: #F7F5F0;
  --ar-gold: #C4A96A;
  --ar-font-display: 'Space Grotesk', system-ui, sans-serif;
  --ar-font-body: 'Inter', system-ui, sans-serif;
  --ln-text: #F7F5F0;
  --ln-text-75: rgba(247,245,240,0.75);
  --ln-text-65: rgba(247,245,240,0.65);
  --ln-text-60: rgba(247,245,240,0.6);
  --ln-text-55: rgba(247,245,240,0.55);
  --ln-text-50: rgba(247,245,240,0.5);
  --ln-text-45: rgba(247,245,240,0.45);
  --ln-text-40: rgba(247,245,240,0.4);
  --ln-text-35: rgba(247,245,240,0.35);
  --ln-text-25: rgba(247,245,240,0.25);
  --ln-bg: var(--ar-black);
  --ln-bg-alt: #1e2318;
  --ln-card-bg: rgba(255,255,255,0.04);
  --ln-card-border: rgba(255,255,255,0.06);
  --ln-card-bg-hover: rgba(255,255,255,0.07);
  --ln-card-border-hover: rgba(255,255,255,0.1);
  --ln-btn-bg: rgba(255,255,255,0.08);
  --ln-btn-border: rgba(255,255,255,0.12);
  --ln-btn-bg-hover: rgba(255,255,255,0.14);
  --ln-btn-border-hover: rgba(255,255,255,0.2);
  background: var(--ln-bg);
  color: var(--ln-text);
  min-height: 100vh;
}
.fv-page--light.landing {
  --ln-text: #1A1F16;
  --ln-text-75: rgba(26,31,22,0.75);
  --ln-text-65: rgba(26,31,22,0.65);
  --ln-text-60: rgba(26,31,22,0.6);
  --ln-text-55: rgba(26,31,22,0.55);
  --ln-text-50: rgba(26,31,22,0.5);
  --ln-text-45: rgba(26,31,22,0.45);
  --ln-text-40: rgba(26,31,22,0.4);
  --ln-text-35: rgba(26,31,22,0.35);
  --ln-text-25: rgba(26,31,22,0.25);
  --ln-bg: #F7F5F0;
  --ln-bg-alt: #EDE9E0;
  --ln-card-bg: rgba(0,0,0,0.03);
  --ln-card-border: rgba(0,0,0,0.06);
  --ln-card-bg-hover: rgba(0,0,0,0.06);
  --ln-card-border-hover: rgba(0,0,0,0.1);
  --ln-btn-bg: rgba(0,0,0,0.06);
  --ln-btn-border: rgba(0,0,0,0.1);
  --ln-btn-bg-hover: rgba(0,0,0,0.1);
  --ln-btn-border-hover: rgba(0,0,0,0.16);
}
.sg-bg-photo.landing {
  --ln-bg: transparent;
  --ln-bg-alt: transparent;
}
/* Landing hero is full-viewport — nav overlays it, no padding-top */
.landing.fv-page {
  padding-top: 0;
}

/* ── Hero ── */
.landing-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-hero__video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.landing-hero__overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    180deg,
    rgba(26,31,22,0.2) 0%,
    rgba(26,31,22,0.1) 40%,
    rgba(26,31,22,0.5) 70%,
    rgba(26,31,22,0.85) 100%
  );
  z-index: 1;
}
.landing-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  max-width: 680px;
}
.landing-hero__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}
.landing-hero__logo {
  width: 40px;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.landing-hero__brand-name {
  font-family: var(--ar-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ar-white);
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.landing-hero__title {
  font-family: var(--ar-font-display);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.landing-hero__subtitle {
  font-family: var(--ar-font-body);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  color: rgba(247,245,240,0.75);
  margin-bottom: 40px;
  max-width: 480px;
}
/* Hero always stays light-on-dark (video behind it) */
.fv-page--light.landing .landing-hero__content { color: var(--ar-white); }
.landing-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ar-black);
  background: var(--ar-gold);
  border: none;
  border-radius: 8px;
  padding: 14px 36px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
}
.landing-hero__cta:hover {
  background: #d4b97a;
  transform: translateY(-1px);
}
.landing-hero__scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(247,245,240,0.35); /* hero always dark */
  animation: landing-bounce 2s ease-in-out infinite;
}
@keyframes landing-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ── Intro ── */
.landing-intro {
  padding: 120px 24px;
  background: var(--ln-bg);
}
.landing-intro__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.landing-intro__heading {
  font-family: var(--ar-font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}
.landing-intro__text {
  font-family: var(--ar-font-body);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.75;
  color: var(--ln-text-65);
  max-width: 560px;
  margin: 0 auto 56px;
}
.landing-intro__stats {
  display: flex;
  justify-content: center;
  gap: 64px;
}
.landing-intro__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.landing-intro__stat-num {
  font-family: var(--ar-font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: var(--ar-gold);
}
.landing-intro__stat-label {
  font-family: var(--ar-font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ln-text-40);
}

/* ── Stories ── */
.landing-stories {
  padding: 80px 24px 120px;
  background: var(--ln-bg);
}
.landing-stories__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.landing-stories__heading {
  font-family: var(--ar-font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--ln-text);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.landing-stories__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ln-text-60);
  max-width: 560px;
  margin: 0 auto 48px;
}
.landing-stories__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.landing-stories__card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ar-cream);
  background: #1A1F16;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.landing-stories__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.landing-stories__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s ease;
}
.landing-stories__card:hover .landing-stories__card-bg {
  transform: scale(1.05);
}
.landing-stories__card-emoji {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  opacity: 0.3;
}
.landing-stories__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
  pointer-events: none;
}
.landing-stories__card-content {
  position: relative;
  z-index: 1;
  padding: 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.landing-stories__card-meta {
  font-family: var(--ar-font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.landing-stories__card-title {
  font-family: var(--ar-font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--ar-cream);
  letter-spacing: -0.01em;
}
.landing-stories__card-subtitle {
  font-size: 14px;
  color: rgba(247,245,240,0.7); /* card always dark (image behind) */
  line-height: 1.4;
}
.landing-stories__card-scenes {
  font-size: 12px;
  color: rgba(212,185,122,0.7);
  margin-top: 4px;
}
.landing-stories__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ar-gold);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.landing-stories__link:hover {
  color: #e8d49e;
}

/* ── Featured Species ── */
.landing-featured {
  padding: 0 24px 120px;
  background: var(--ln-bg);
}
.landing-featured__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.landing-featured__heading {
  font-family: var(--ar-font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 48px;
}
.landing-featured__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.landing-featured__card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  color: var(--ar-white);
  transition: transform 0.25s;
}
.landing-featured__card:hover {
  transform: scale(1.02);
}
.landing-featured__card-img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}
.landing-featured__card-img img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.landing-featured__card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 16px;
  background: linear-gradient(0deg, rgba(26,31,22,0.85) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.landing-featured__card-name {
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 600;
}
.landing-featured__card-latin {
  font-family: var(--ar-font-body);
  font-size: 12px;
  font-style: italic;
  color: rgba(247,245,240,0.5); /* card always dark (image behind) */
}
.landing-featured__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ar-gold);
  text-decoration: none;
  transition: color 0.2s;
}
.landing-featured__all:hover {
  color: #d4b97a;
}

/* ── Hero actions ── */
.landing-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.landing-hero__secondary {
  font-family: var(--ar-font-body);
  font-size: 14px;
  color: rgba(247,245,240,0.55); /* hero always dark */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.landing-hero__secondary:hover {
  color: rgba(247,245,240,0.85);
}

/* ── Community section ── */
.landing-community {
  padding: 100px 24px;
  background: linear-gradient(180deg, var(--ln-bg) 0%, var(--ln-bg-alt) 50%, var(--ln-bg) 100%);
}
.landing-community__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.landing-community__heading {
  font-family: var(--ar-font-display);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.landing-community__text {
  font-family: var(--ar-font-body);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.7;
  color: var(--ln-text-60);
  max-width: 480px;
  margin: 0 auto 56px;
}
.landing-community__features {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 48px;
}
.landing-community__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 180px;
}
.landing-community__feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(196,169,106,0.1);
  border: 1px solid rgba(196,169,106,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ar-gold, #C4A96A);
}
.landing-community__feature-title {
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 600;
}
.landing-community__feature-desc {
  font-family: var(--ar-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ln-text-45);
}
.landing-community__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ln-text);
  background: var(--ln-btn-bg);
  border: 1px solid var(--ln-btn-border);
  border-radius: 8px;
  padding: 13px 28px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.landing-community__cta:hover {
  background: var(--ln-btn-bg-hover);
  border-color: var(--ln-btn-border-hover);
}

/* ── Browse auth banner ── */
.browse-auth-banner {
  padding: 0 16px;
  margin-top: 8px;
}
.browse-auth-banner__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(196,169,106,0.08);
  border: 1px solid rgba(196,169,106,0.12);
}
.browse-auth-banner__text {
  flex: 1;
  font-family: var(--ar-font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: rgba(247,245,240,0.7);
}
.browse-auth-banner__btn {
  font-family: var(--ar-font-display, 'Space Grotesk', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1A1F16;
  background: #C4A96A;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.browse-auth-banner__btn:hover {
  background: #d4b97a;
}
.browse-auth-banner__close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: rgba(247,245,240,0.35);
  transition: color 0.2s;
}
.browse-auth-banner__close:hover {
  color: rgba(247,245,240,0.7);
}
/* Light mode banner */
.fv-page--light .browse-auth-banner__inner {
  background: rgba(196,169,106,0.06);
  border-color: rgba(196,169,106,0.12);
}
.fv-page--light .browse-auth-banner__text {
  color: rgba(26,31,22,0.65);
}
.fv-page--light .browse-auth-banner__close {
  color: rgba(26,31,22,0.3);
}
.fv-page--light .browse-auth-banner__close:hover {
  color: rgba(26,31,22,0.6);
}

/* ── Footer on landing ── */
.landing .site-footer {
  background: transparent;
}
.landing .site-footer__col-title {
  color: var(--ln-text-45);
}
.landing .site-footer__link {
  color: var(--ln-text-55);
}
.landing .site-footer__link:hover {
  color: var(--ln-text);
}
.landing .site-footer__text {
  color: var(--ln-text-40);
}
.landing .site-footer__tagline {
  color: var(--ln-text-50);
}
.landing .site-footer__copy {
  color: var(--ln-text-25);
}
.landing .site-footer__sponsor-label {
  color: var(--ln-text-35);
}
.landing .site-footer__sponsor-img {
  filter: brightness(0) invert(1);
  opacity: 0.4;
}
.fv-page--light.landing .site-footer__sponsor-img {
  filter: none;
  opacity: 0.5;
}
.fv-page--light.landing .site-footer__logo { color: #1A1F16; }
.fv-page--light.landing .site-footer__brand-name { color: #1A1F16; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .landing-hero { min-height: 100svh; }
  .landing-hero__brand { margin-bottom: 32px; }
  .landing-hero__scroll-hint { bottom: 24px; }
  .landing-intro { padding: 80px 20px; }
  .landing-intro__stats { gap: 32px; }
  .landing-stories { padding: 64px 20px 80px; }
  .landing-stories__grid { grid-template-columns: 1fr; }
  .landing-stories__card { min-height: 260px; }
  .landing-featured { padding: 0 20px 80px; }
  .landing-featured__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .landing-featured__card-info { padding: 16px 12px; }
  .landing-featured__card-name { font-size: 13px; }
  .landing-community { padding: 64px 20px; }
  .landing-community__features { flex-direction: column; align-items: center; gap: 32px; }
  .landing-community__feature { max-width: 240px; }
  .landing-routes { padding: 64px 20px; }
  .landing-routes__grid { flex-direction: column; }
  .landing-routes__card { min-height: auto; }
}

/* =============================================================================
   Landing — Routes Section
   ============================================================================= */
.landing-routes {
  padding: 100px 24px;
  background: var(--ln-bg);
}
.landing-routes__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.landing-routes__heading {
  font-family: var(--ar-font-display);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.landing-routes__text {
  font-family: var(--ar-font-body);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.7;
  color: var(--ln-text-60);
  max-width: 520px;
  margin: 0 auto 48px;
}
.landing-routes__grid {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
}
.landing-routes__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 28px 24px;
  border-radius: 12px;
  background: var(--ln-card-bg);
  border: 1px solid var(--ln-card-border);
  text-decoration: none;
  color: var(--ln-text);
  transition: background 0.2s, border-color 0.2s;
  min-height: 200px;
}
.landing-routes__card:hover {
  background: var(--ln-card-bg-hover);
  border-color: var(--ln-card-border-hover);
}
.landing-routes__card-accent {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.landing-routes__card-name {
  font-family: var(--ar-font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.landing-routes__card-subtitle {
  font-family: var(--ar-font-body);
  font-size: 13px;
  color: var(--ln-text-45);
  font-style: italic;
  margin-bottom: 12px;
}
.landing-routes__card-desc {
  font-family: var(--ar-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ln-text-60);
  flex: 1;
}
.landing-routes__card-stats {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: var(--ln-text-35);
}
.landing-routes__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ar-gold, #C4A96A);
  text-decoration: none;
  transition: color 0.2s;
}
.landing-routes__link:hover { color: #d4b97a; }

/* =============================================================================
   Routes Page (/routes)
   ============================================================================= */
.rp-page {
  --ar-black: #1A1F16;
  --ar-white: #F7F5F0;
  --ar-gold: #C4A96A;
  --ar-font-display: 'Space Grotesk', system-ui, sans-serif;
  --ar-font-body: 'Inter', system-ui, sans-serif;
  /* Mode-aware text colors (night defaults) */
  --rp-text: #F7F5F0;
  --rp-text-90: rgba(247,245,240,0.9);
  --rp-text-70: rgba(247,245,240,0.7);
  --rp-text-60: rgba(247,245,240,0.6);
  --rp-text-50: rgba(247,245,240,0.5);
  --rp-text-40: rgba(247,245,240,0.4);
  --rp-text-35: rgba(247,245,240,0.35);
  --rp-text-30: rgba(247,245,240,0.3);
  --rp-text-25: rgba(247,245,240,0.25);
  --rp-text-20: rgba(247,245,240,0.2);
  --rp-text-15: rgba(247,245,240,0.15);
  --rp-text-12: rgba(247,245,240,0.12);
  --rp-text-07: rgba(247,245,240,0.07);
  --rp-text-06: rgba(247,245,240,0.06);
  --rp-subtle-bg: rgba(255,255,255,0.04);
  --rp-subtle-bg-hover: rgba(255,255,255,0.07);
  --rp-subtle-border: rgba(255,255,255,0.06);
  --rp-subtle-border-strong: rgba(255,255,255,0.08);
  --rp-line-bg: rgba(255,255,255,0.08);
}
.fv-page--light.rp-page {
  --rp-text: #1A1F16;
  --rp-text-90: rgba(26,31,22,0.9);
  --rp-text-70: rgba(26,31,22,0.7);
  --rp-text-60: rgba(26,31,22,0.6);
  --rp-text-50: rgba(26,31,22,0.5);
  --rp-text-40: rgba(26,31,22,0.4);
  --rp-text-35: rgba(26,31,22,0.35);
  --rp-text-30: rgba(26,31,22,0.3);
  --rp-text-25: rgba(26,31,22,0.25);
  --rp-text-20: rgba(26,31,22,0.2);
  --rp-text-15: rgba(26,31,22,0.15);
  --rp-text-12: rgba(26,31,22,0.12);
  --rp-text-07: rgba(26,31,22,0.07);
  --rp-text-06: rgba(26,31,22,0.06);
  --rp-subtle-bg: rgba(0,0,0,0.03);
  --rp-subtle-bg-hover: rgba(0,0,0,0.06);
  --rp-subtle-border: rgba(0,0,0,0.06);
  --rp-subtle-border-strong: rgba(0,0,0,0.08);
  --rp-line-bg: rgba(0,0,0,0.1);
}

/* Header */
.rp-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
}
.rp-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--rp-subtle-bg);
  border: 1px solid var(--rp-subtle-border-strong);
  color: var(--rp-text-60);
  text-decoration: none;
  transition: background 0.2s;
}
.rp-header__back:hover { background: rgba(255,255,255,0.1); }
.rp-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rp-header__logo { width: 22px; height: auto; }
.rp-header__title {
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Hero */
.rp-hero {
  text-align: center;
  padding: 48px 40px 56px;
  max-width: 720px;
  margin: 0 auto;
}
.rp-hero__title {
  font-family: var(--ar-font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.rp-hero__subtitle {
  font-family: var(--ar-font-body);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.7;
  color: var(--rp-text-60);
}

/* Selector */
.rp-selector {
  display: flex;
  gap: 12px;
  padding: 0 40px;
  max-width: 960px;
  margin: 0 auto 48px;
}
.rp-selector__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  border-radius: 12px;
  background: var(--rp-subtle-bg);
  border: 2px solid var(--rp-subtle-border);
  color: var(--rp-text-60);
  cursor: pointer;
  transition: all 0.2s;
}
.rp-selector__btn:hover {
  background: var(--rp-subtle-bg-hover);
}
.rp-selector__btn--active {
  background: var(--rp-subtle-border-strong);
  border-color: var(--route-color);
  color: var(--rp-text);
}
.rp-selector__name {
  font-family: var(--ar-font-display);
  font-size: 15px;
  font-weight: 700;
}
.rp-selector__meta {
  font-family: var(--ar-font-body);
  font-size: 12px;
  opacity: 0.5;
}

/* Body – two-column on desktop */
.rp-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.rp-body .rp-detail,
.rp-body .rp-section {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 1024px) {
  .rp-body {
    display: flex;
    gap: 48px;
    align-items: flex-start;
  }
  .rp-body__left {
    flex: 1.2;
    min-width: 0;
  }
  .rp-body__right {
    flex: 1;
    min-width: 0;
    position: sticky;
    top: 24px;
  }
}
@media (max-width: 768px) {
  .rp-body { padding: 0 20px; }
}

/* Detail */
.rp-detail {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px 48px;
}
.rp-detail__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.rp-detail__color {
  width: 6px;
  height: 40px;
  border-radius: 3px;
  flex-shrink: 0;
}
.rp-detail__name {
  font-family: var(--ar-font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
}
.rp-detail__subtitle {
  font-family: var(--ar-font-body);
  font-size: 14px;
  color: var(--rp-text-50);
  font-style: italic;
}
.rp-detail__desc {
  font-family: var(--ar-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--rp-text-60);
  margin-bottom: 32px;
}
.rp-detail__stats {
  display: flex;
  gap: 40px;
  margin-bottom: 24px;
}
.rp-detail__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rp-detail__stat-val {
  font-family: var(--ar-font-display);
  font-size: 24px;
  font-weight: 700;
}
.rp-detail__stat-label {
  font-family: var(--ar-font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rp-text-35);
}
.rp-detail__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rp-detail__highlight {
  font-family: var(--ar-font-body);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid;
  opacity: 0.8;
}

/* Timeline */
.rp-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 40px;
}
.rp-section--full {
  max-width: none;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}
.rp-section--last { padding-bottom: 80px; }
.rp-section--wide { max-width: 1200px; }
.rp-section__title {
  font-family: var(--ar-font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 24px;
}
.rp-timeline {
  overflow-x: auto;
  padding-bottom: 16px;
}
.rp-timeline__track {
  position: relative;
  margin: 0 60px;
}
.rp-timeline__endpoint {
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rp-timeline__endpoint--start { left: 0; }
.rp-timeline__endpoint--end { left: 100%; }
.rp-timeline__endpoint-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: -7px;
  border: 2px solid var(--rp-text-20);
}
.rp-timeline__endpoint-label {
  font-family: var(--ar-font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--rp-text-40);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rp-timeline__line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--rp-line-bg);
  border-radius: 2px;
}
.rp-timeline__line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: var(--route-color);
  border-radius: 2px;
  opacity: 0.4;
}
.rp-timeline__poi {
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
}
.rp-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rp-text-25);
  border: 2px solid var(--rp-text-20);
  margin: -5px auto 0;
  transition: all 0.2s;
}
.rp-timeline__dot--diamond {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-top: -6px;
  transform: rotate(45deg);
  background: var(--route-color);
  border-color: var(--route-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--route-color) 40%, transparent);
}
.rp-timeline__poi-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}
.rp-timeline__connector {
  position: absolute;
  left: 50%;
  width: 1px;
  background: var(--rp-text-20);
}
.rp-timeline__poi-name {
  font-family: var(--ar-font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--rp-text-70);
}
.rp-timeline__poi--highlight .rp-timeline__poi-name {
  color: var(--rp-text);
  font-size: 12px;
}
.rp-timeline__poi-km {
  font-family: var(--ar-font-body);
  font-size: 10px;
  color: var(--rp-text-30);
}
.rp-timeline__km-axis {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px 0;
  font-family: var(--ar-font-body);
  font-size: 11px;
  color: var(--rp-text-20);
}

/* POI List */
.rp-pois {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rp-pois__item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rp-subtle-bg);
}
.rp-pois__item:last-child { border-bottom: none; }
.rp-pois__marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.rp-pois__content { flex: 1; }
.rp-pois__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.rp-pois__name {
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 600;
}
.rp-pois__km {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: var(--rp-text-30);
}
.rp-pois__desc {
  font-family: var(--ar-font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--rp-text-50);
}

/* Section head with toggle */
.rp-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}
.rp-section__head .rp-section__title {
  margin-bottom: 0;
}

/* Station Toggle */
.rp-st-toggle {
  display: flex;
  gap: 4px;
  background: var(--rp-subtle-bg);
  border-radius: 8px;
  padding: 3px;
}
.rp-st-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--rp-text-30);
  cursor: pointer;
  transition: all 0.2s;
}
.rp-st-toggle__btn:hover {
  color: var(--rp-text-50);
}
.rp-st-toggle__btn--active {
  background: var(--rp-subtle-border-strong);
  color: var(--rp-text);
}

/* Station Line (vertical proportional view) */
.rp-stline {
  padding-top: 20px;
  padding-bottom: 20px;
}
.rp-stline__rail {
  position: relative;
  margin-left: 52px;
}
.rp-stline__line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--route-color), var(--rp-line-bg));
  border-radius: 1px;
}

/* km tick marks */
.rp-stline__km-tick {
  position: absolute;
  left: -44px;
  transform: translateY(-50%);
}
.rp-stline__km-tick span {
  font-family: var(--ar-font-body);
  font-size: 10px;
  color: var(--rp-text-20);
  letter-spacing: 0.02em;
}

/* Station nodes — single line, no overlap */
.rp-stline__node {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 28px;
  white-space: nowrap;
}
.rp-stline__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rp-text-20);
  border: 2px solid var(--rp-line-bg);
  flex-shrink: 0;
  margin-left: -3px;
  position: relative;
  z-index: 1;
}
.rp-stline__node--highlight .rp-stline__dot {
  width: 10px;
  height: 10px;
  margin-left: -4px;
  background: var(--route-color);
  border-color: var(--route-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--route-color) 40%, transparent);
}
.rp-stline__node--endpoint .rp-stline__dot {
  width: 12px;
  height: 12px;
  margin-left: -5px;
  border-radius: 3px;
  background: var(--route-color);
  border-color: var(--route-color);
}
.rp-stline__card-name {
  font-family: var(--ar-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--rp-text-70);
}
.rp-stline__node--highlight .rp-stline__card-name {
  color: var(--rp-text);
  font-size: 14px;
}
.rp-stline__node--endpoint .rp-stline__card-name {
  color: var(--rp-text);
}
.rp-stline__card-meta {
  font-family: var(--ar-font-body);
  font-size: 11px;
  color: var(--rp-text-20);
}

/* Footer on routes page */
.rp-page .site-footer { background: transparent; }
.rp-page .site-footer__col-title { color: rgba(247,245,240,0.45); }
.rp-page .site-footer__link { color: rgba(247,245,240,0.55); }
.rp-page .site-footer__link:hover { color: #F7F5F0; }
.rp-page .site-footer__text { color: rgba(247,245,240,0.4); }
.rp-page .site-footer__tagline { color: rgba(247,245,240,0.5); }
.rp-page .site-footer__copy { color: rgba(247,245,240,0.25); }
.rp-page .site-footer__sponsor-label { color: rgba(247,245,240,0.3); }
.rp-page .site-footer__sponsor-img { filter: brightness(0) invert(1); opacity: 0.4; }

/* Light footer on routes */
.fv-page--light.rp-page .site-footer { background: transparent; }
.fv-page--light.rp-page .site-footer__sponsor-img { filter: none; opacity: 0.5; }

/* Elevation Profile */
.rp-elev {
  width: 100%;
}
.rp-elev__stats {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.rp-elev__stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ar-font-body);
  font-size: 13px;
  color: var(--rp-text-70);
}
.rp-elev__stat svg {
  opacity: 0.5;
}
.rp-elev__stat-dim {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rp-text-35);
}
.rp-elev__svg {
  width: 100%;
  height: auto;
  display: block;
  cursor: crosshair;
  touch-action: none;
}
.rp-elev__label {
  font-family: var(--ar-font-body);
  font-size: 10px;
  fill: var(--rp-text-30);
}
.rp-elev__poi-label {
  font-family: var(--ar-font-display);
  font-size: 9px;
  font-weight: 500;
  fill: var(--rp-text-40);
  letter-spacing: 0.02em;
}
.rp-elev__poi-label--highlight {
  font-size: 10px;
  font-weight: 700;
  fill: var(--rp-text-70);
}
.rp-elev__tooltip {
  font-family: var(--ar-font-body);
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--rp-text);
  letter-spacing: 0.01em;
}

/* Mode Toggle */
.rp-mode-toggle {
  display: flex;
  gap: 8px;
}
.rp-mode-toggle__btn {
  padding: 6px 18px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(247,245,240,0.5);
  font-family: var(--ar-font-body);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.rp-mode-toggle__btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(247,245,240,0.8);
}
.rp-mode-toggle__btn--active {
  background: var(--route-color);
  color: #fff;
  border-color: var(--route-color);
}

/* Station 3D View */
.rp-st3d {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.rp-st3d__canvas {
  width: 100%;
  height: 80vh;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}
/* Glassmorphism mode */
.rp-st3d--glass .rp-st3d__canvas {
  border-radius: var(--ar-glass-radius);
  background: var(--ar-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ar-glass-border);
}
.rp-st3d__canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
/* Controls — overlay bottom of canvas */
.rp-st3d__controls {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(26, 31, 22, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  z-index: 10;
}
/* Glass mode: controls also get glass treatment */
.rp-st3d--glass .rp-st3d__controls {
  background: var(--ar-glass-bg);
  border-color: var(--ar-glass-border);
}
.rp-st3d__sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.rp-st3d__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ar-font-body);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(247,245,240,0.5);
  cursor: pointer;
  transition: all 0.2s;
}
.rp-st3d__btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(247,245,240,0.7);
}
.rp-st3d__btn--active {
  background: rgba(255,255,255,0.1);
  color: var(--ar-white);
  border-color: rgba(255,255,255,0.2);
}
.rp-st3d__slider {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(247,245,240,0.5);
  font-size: 12px;
  font-family: var(--ar-font-body);
}
.rp-st3d__slider input[type="range"] {
  width: 70px;
  accent-color: var(--route-color, var(--ar-gold));
}
.rp-st3d__slider span {
  min-width: 18px;
  text-align: right;
}
.rp-st3d__nav {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  gap: 12px;
  border-radius: 10px;
  background: rgba(26, 31, 22, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  z-index: 10;
}
.rp-st3d--glass .rp-st3d__nav {
  background: var(--ar-glass-bg);
  border-color: var(--ar-glass-border);
}
.rp-st3d__nav-btn {
  font-family: var(--ar-font-body);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(247,245,240,0.7);
  cursor: pointer;
  transition: all 0.2s;
}
.rp-st3d__nav-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  color: var(--ar-white);
}
.rp-st3d__nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
.rp-st3d__nav-label {
  font-family: var(--ar-font-head);
  font-size: 14px;
  color: var(--ar-white);
  letter-spacing: 0.03em;
  text-align: center;
  min-width: 120px;
}

/* Routes responsive */
@media (max-width: 768px) {
  .rp-selector { flex-direction: column; gap: 8px; padding: 0 20px; }
  .rp-selector__btn { flex-direction: row; justify-content: space-between; }
  .rp-detail__stats { gap: 24px; }
  .rp-hero { padding: 32px 20px 40px; }
  .rp-detail { padding: 0 20px 40px; }
  .rp-section { padding: 24px 20px; }
  .rp-elev__stats { gap: 16px; }
  .rp-stline__rail { margin-left: 44px; }
  .rp-stline__km-tick { left: -38px; }
}


/* =============================================================================
   STORIES — Overview Page
   ============================================================================= */

.stories-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px 60px;
  max-width: 640px;
  margin: 0 auto;
}

.story-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, background 0.2s ease;
}

.story-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}

.story-card__cover {
  width: 80px;
  height: 100px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--story-color, var(--ar-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.story-card__emoji {
  font-size: 36px;
}

.story-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-width: 0;
}

.story-card__title {
  font-family: var(--ar-font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--ar-white);
  line-height: 1.3;
}

.story-card__subtitle {
  font-family: var(--ar-font-body);
  font-size: 13px;
  color: rgba(247, 245, 240, 0.55);
  line-height: 1.3;
}

.story-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(247, 245, 240, 0.4);
  font-family: var(--ar-font-body);
}

.story-card__dot {
  opacity: 0.4;
}

/* --- Format comparison links --- */

.story-format-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: var(--ar-white);
  font-family: var(--ar-font-body);
  font-size: 14px;
  transition: background 0.2s;
}

.story-format-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.story-format-link__icon {
  font-size: 20px;
}

.story-format-link__label {
  font-weight: 600;
}


/* =============================================================================
   COMIC VIEWER
   ============================================================================= */

.comic-viewer {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  color: var(--ar-white);
  z-index: 50;
}

/* --- Header --- */

.comic-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  z-index: 2;
  flex-shrink: 0;
}

.comic-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ar-white);
  text-decoration: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.comic-header__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.comic-header__title {
  font-family: var(--ar-font-head);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comic-header__scene {
  font-family: var(--ar-font-body);
  font-size: 12px;
  color: rgba(247, 245, 240, 0.5);
}

/* --- Comic Cover (Verlauf-Dialog style) --- */

.comic-cover {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.comic-cover .sg-vdialog {
  max-width: 900px;
  width: 100%;
  min-height: 420px;
}

.comic-cover__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comic-cover__label {
  font-family: var(--ar-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.comic-cover__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: var(--ar-font-body);
  color: rgba(247, 245, 240, 0.4);
  margin: 4px 0 8px;
}

.comic-cover__preview {
  font-family: var(--ar-font-body);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(247, 245, 240, 0.55);
  font-style: italic;
  margin: 0 0 4px;
}

/* Story Verlauf — expandable wrapper */
.story-verlauf-wrap {
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.story-verlauf-wrap .sg-vdialog {
  min-height: 480px;
  transition: min-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.story-verlauf-wrap--expanded .sg-vdialog {
  min-height: calc(100vh - 140px);
}

@media (max-width: 768px) {
  .story-verlauf-wrap--expanded .sg-vdialog {
    min-height: auto;
  }
  .story-verlauf-wrap {
    overflow: hidden;
    border-radius: 16px;
  }
}

/* Fade overlay for film-cut transitions */
.story-fade-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 10;
  border-radius: 16px;
  transition: opacity 0.4s ease-in-out;
}

/* Reversed layout: media left, text right */
.sg-vdialog--reversed {
  flex-direction: row-reverse;
}
.sg-vdialog--reversed .sg-vdialog__fade {
  left: auto;
  right: 0;
}
.sg-vdialog--reversed .sg-vdialog__fade--dark {
  background: linear-gradient(270deg, #1A1F16 0%, transparent 100%);
}
.sg-vdialog--reversed .sg-vdialog__fade--light {
  background: linear-gradient(270deg, #F7F5F0 0%, transparent 100%);
}
.sg-vdialog--reversed .sg-vdialog__brand-overlay {
  right: auto;
  left: 20px;
}

/* Mobile: no layout reversal, always photo top + text bottom */
@media (max-width: 768px) {
  .sg-vdialog.sg-vdialog--reversed {
    flex-direction: column;
  }
  .sg-vdialog--reversed .sg-vdialog__content {
    order: 2;
  }
  .sg-vdialog--reversed .sg-vdialog__photo {
    order: 1;
  }
  .sg-vdialog--reversed .sg-vdialog__fade {
    left: 0; right: auto;
    top: auto; bottom: 0;
    width: 100%; height: 50%;
  }
  .sg-vdialog--reversed .sg-vdialog__fade--dark {
    background: linear-gradient(0deg, #1A1F16 0%, transparent 100%);
  }
  .sg-vdialog--reversed .sg-vdialog__fade--light {
    background: linear-gradient(0deg, #F7F5F0 0%, transparent 100%);
  }
}

/* Story title row with mascot */
.story-title-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  align-self: flex-start;
  width: 100%;
}
.story-title-row .sg-dialog__title {
  flex: 1;
  margin-bottom: 0;
}
.story-mascot-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  align-self: flex-start;
}
.story-mascot {
  width: 72px;
  height: 72px;
  object-fit: contain;
  mix-blend-mode: screen;
  pointer-events: none;
  margin-bottom: -4px;
}
@media (max-width: 768px) {
  .story-mascot {
    width: 56px;
    height: 56px;
    margin-bottom: -4px;
  }
}

/* Story page brand — top right, gold shimmer */
.story-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-left: auto;
}
.story-brand__logo {
  width: 26px;
  height: auto;
  filter: brightness(0) saturate(100%);
  /* Gold tint via CSS filter: sepia + saturate + hue-rotate to match #C4A96A */
  filter: sepia(1) saturate(3) brightness(0.85) hue-rotate(10deg);
  animation: sg-shimmer 3s 1s ease-in-out infinite;
}
.story-brand__text {
  font-family: var(--ar-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, #7A6420 0%, #C4A96A 15%, #D9C68A 35%, #E0CFA0 50%, #D9C68A 65%, #C4A96A 85%, #7A6420 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sg-gold-shift 8s ease-in-out infinite;
}
@media (max-width: 480px) {
  .story-brand__text { display: none; }
}

/* Expanded story: align text to bottom on desktop, top on mobile */
.story-verlauf-wrap--expanded .sg-vdialog__content {
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .story-verlauf-wrap--expanded .sg-vdialog__content {
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  .story-verlauf-wrap--expanded .sg-vdialog__content {
    overflow: visible;
  }
  .story-verlauf-wrap--expanded .sg-vdialog__desc {
    max-height: 30vh;
    overflow-y: auto;
    /* Apple-style thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
  }
  .story-verlauf-wrap--expanded .sg-vdialog__desc::-webkit-scrollbar {
    width: 3px;
  }
  .story-verlauf-wrap--expanded .sg-vdialog__desc::-webkit-scrollbar-track {
    background: transparent;
  }
  .story-verlauf-wrap--expanded .sg-vdialog__desc::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
  }
  .story-scene-location,
  .story-mascot,
  .story-scene-chapter {
    position: relative;
    z-index: 3;
  }
  .story-scene-location {
    margin-top: -100px;
  }
}

/* Story titles — Cinzel (gold, serif) */
.story-verlauf-wrap .sg-dialog__title {
  font-family: var(--ar-font-cinzel);
  font-size: 28px;
  color: var(--ar-gold);
}

/* Scene location badge */
.story-scene-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ar-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  align-self: flex-start;
}

/* Scene chapter label */
.story-scene-chapter {
  font-family: var(--ar-font-cinzel);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
  align-self: flex-start;
}

/* Scene narrator */
.story-scene-narrator {
  font-family: var(--ar-font-body);
  font-size: 13px;
  font-weight: 500;
  margin-top: auto;
  align-self: flex-start;
  padding-top: 16px;
}

/* Story navigation controls */
.story-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}
.story-nav--overlay {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 320px;
  margin-top: 0;
  z-index: 20;
}
@media (max-width: 768px) {
  .story-nav--overlay {
    bottom: 12px;
    max-width: 280px;
  }
}

.story-nav__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}
.story-nav__btn:disabled {
  opacity: 0.2;
  cursor: default;
}
.story-nav__btn:not(:disabled):hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
}
.sg-vdialog--light .story-nav__btn {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
}
.sg-vdialog--light .story-nav__btn:not(:disabled):hover {
  background: rgba(0,0,0,0.08);
}
.sg-vdialog--light .story-nav__dot {
  background: rgba(0,0,0,0.12);
}
.story-nav__btn--finish {
  border: none;
  color: #1A1F16;
}

.story-nav__dots {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.story-nav__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s, background 0.2s;
}
.story-nav__dot--active {
  transform: scale(1.4);
}
.story-nav__dot--done {
  opacity: 0.6;
}

/* Close X button — top right on media side */
/* Story audio play button with waveform */
.story-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
  width: 40px;
  height: 40px;
  justify-content: center;
}
.story-audio-btn--playing {
  border-radius: 20px;
  width: auto;
  padding: 8px 14px;
  gap: 8px;
}
.story-audio-waveform {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding-bottom: 8px;
}

.story-audio-btn:hover {
  opacity: 0.85;
}
.story-audio-btn__waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
}
.story-audio-btn__bar {
  width: 3px;
  border-radius: 2px;
  transition: height 0.08s ease;
  min-height: 3px;
}

.story-close-x {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #F7F5F0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.story-close-x:hover {
  background: rgba(0,0,0,0.6);
}

/* Zoomable canvas for story illustrations */
.story-zoom-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.story-zoom-canvas:active {
  cursor: grabbing;
}

/* Verlauf wrap needs relative positioning for fade overlay */
.story-verlauf-wrap {
  position: relative;
}

@media (max-width: 768px) {
  .comic-cover {
    padding: 0;
    align-items: stretch;
  }
  .comic-cover .sg-vdialog {
    border-radius: 0;
    min-height: auto;
  }
}

/* --- Comic Panel --- */

.comic-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
  position: relative;
  animation: comic-fade-in 0.35s ease;
}

@keyframes comic-fade-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.comic-panel__illustration {
  flex-shrink: 0;
  margin-bottom: 16px;
}

.comic-panel__illustration-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.03);
}

.comic-panel__illustration-hint {
  font-size: 12px;
  font-family: var(--ar-font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.comic-panel__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: var(--ar-font-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

/* --- Speech bubble --- */

.comic-panel__bubble {
  position: relative;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
}

.comic-panel__bubble-arrow {
  position: absolute;
  top: -8px;
  left: 32px;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-right: none;
  transform: rotate(45deg);
}

.comic-panel__bubble-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.comic-panel__narrator {
  font-family: var(--ar-font-head);
  font-size: 13px;
  font-weight: 700;
}

.comic-panel__scene-title {
  font-family: var(--ar-font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--ar-white);
}

.comic-panel__text {
  font-family: var(--ar-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(247, 245, 240, 0.85);
  margin: 0;
}

.comic-panel__number {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--ar-font-head);
  color: var(--ar-black);
  padding: 4px 10px;
  border-radius: 20px;
}

/* --- Controls --- */

.comic-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
}

.comic-controls__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ar-white);
  cursor: pointer;
  transition: opacity 0.2s;
  text-decoration: none;
  flex-shrink: 0;
}

.comic-controls__btn:disabled {
  opacity: 0.2;
  cursor: default;
}

.comic-controls__btn--finish {
  border: none;
  color: var(--ar-black);
}

/* --- Progress dots --- */

.comic-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comic-progress__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s, background 0.2s;
}

.comic-progress__dot--active {
  transform: scale(1.4);
}

.comic-progress__dot--done {
  opacity: 0.6;
}

/* --- Desktop: larger panel --- */
@media (min-width: 769px) {
  .comic-panel {
    padding: 40px;
    align-items: center;
  }

  .comic-panel__illustration {
    max-width: 640px;
    width: 100%;
  }

  .comic-panel__bubble {
    max-width: 640px;
    width: 100%;
    padding: 28px 32px;
  }

  .comic-panel__scene-title { font-size: 24px; }
  .comic-panel__text { font-size: 16px; line-height: 1.8; }
}


/* =============================================================================
   BOOK VIEWER
   ============================================================================= */

.book-viewer {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #1a1a18;
  color: var(--ar-white);
  z-index: 50;
}

/* --- Book spread --- */

.book-spread {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
}

.book-spread--flip-next {
  animation: book-flip-next 0.4s ease;
}

.book-spread--flip-prev {
  animation: book-flip-prev 0.4s ease;
}

@keyframes book-flip-next {
  0% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
  50% { opacity: 0.5; transform: perspective(1200px) rotateY(-15deg) scale(0.95); }
  100% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
}

@keyframes book-flip-prev {
  0% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
  50% { opacity: 0.5; transform: perspective(1200px) rotateY(15deg) scale(0.95); }
  100% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
}

/* Desktop: two pages side by side */
.book-spread__desktop {
  display: none;
}

/* Mobile: single stacked page */
.book-spread__mobile {
  display: block;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

@media (min-width: 769px) {
  .book-spread__desktop {
    display: flex;
    max-width: 960px;
    width: 100%;
    height: 100%;
    max-height: 600px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }
  .book-spread__mobile { display: none; }
}

/* --- Spine --- */

.book-spread__spine {
  width: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  flex-shrink: 0;
}

/* --- Book pages --- */

.book-page {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.book-page--left {
  background: #1e1e1c;
}

.book-page--right {
  background: #232320;
}

/* Left page: illustration */

.book-page__illustration {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  position: relative;
}

.book-page__illustration-inner {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 80%;
  border-radius: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.02);
}

.book-page__illustration-label {
  font-size: 11px;
  font-family: var(--ar-font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.book-page__location {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-family: var(--ar-font-body);
  color: rgba(247, 245, 240, 0.4);
  margin-top: 12px;
}

.book-page__number {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-family: var(--ar-font-body);
  color: rgba(247, 245, 240, 0.25);
}

/* Right page: text */

.book-page__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px 36px;
  overflow-y: auto;
}

.book-page__chapter {
  font-family: var(--ar-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.book-page__title {
  font-family: var(--ar-font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--ar-white);
  margin: 0 0 12px;
  line-height: 1.3;
}

.book-page__divider {
  width: 40px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 20px;
}

.book-page__narrative {
  font-family: var(--ar-font-body);
  font-size: 14px;
  line-height: 1.85;
  color: rgba(247, 245, 240, 0.8);
  margin: 0;
  flex: 1;
}

.book-page__narrator {
  margin-top: 20px;
  font-size: 12px;
  font-family: var(--ar-font-body);
}

/* --- Mobile book page (stacked) --- */

.book-page-mobile {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.book-page-mobile__illustration {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #1e1e1c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.25);
  position: relative;
  flex-shrink: 0;
}

.book-page-mobile__text {
  padding: 24px 20px 40px;
  background: #232320;
  flex: 1;
}


/* =============================================================================
   STORY VIEWER — Fullscreen horizontal strip
   ============================================================================= */

.story-viewer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 50;
  background: #1A1F16;
}

/* Header overlay — floats over content */
.story-viewer__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%);
  z-index: 10;
}

/* Controls overlay — floats at bottom */
.story-viewer__controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 100%);
  z-index: 10;
}

/* Horizontal strip */
.story-strip {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.story-strip__track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Single scene — full viewport, VerlaufDialog layout */
.story-scene {
  display: flex;
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
}

/* Text side — ~30% */
.story-scene__text {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 48px;
  z-index: 1;
  overflow-y: auto;
}

.story-scene__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: var(--ar-font-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.story-scene__chapter {
  font-family: var(--ar-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.story-scene__title {
  font-family: var(--ar-font-head);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px;
}

.story-scene__narrative {
  font-family: var(--ar-font-body);
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 24px;
}

.story-scene__narrator {
  font-family: var(--ar-font-head);
  font-size: 13px;
  font-weight: 700;
  margin-top: auto;
}

/* Media side — ~70% */
.story-scene__media {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.story-scene__media-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
}

.story-scene__media-label {
  font-size: 12px;
  font-family: var(--ar-font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Fade from text into media — same as VerlaufDialog */
.story-scene__fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .story-scene {
    flex-direction: column;
  }

  .story-scene__text {
    flex: none;
    order: 2;
    padding: 24px 20px 100px;
  }

  .story-scene__media {
    flex: none;
    height: 40vh;
    order: 1;
    border-radius: 0 0 20px 20px;
  }

  .story-scene__fade {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
  }

  .story-scene__title {
    font-size: 22px;
  }

  .story-strip__track {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* =============================================================================
   Legal Pages (Impressum, Datenschutz, AGB)
   ============================================================================= */

.legal-page {
  min-height: 100vh;
  background: var(--ar-bg);
  color: var(--ar-text);
  display: flex;
  flex-direction: column;
}

.legal-page__inner {
  flex: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  width: 100%;
}

.legal-page__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ar-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ar-green);
  text-decoration: none;
  margin-bottom: 32px;
  transition: opacity 0.2s;
}

.legal-page__back:hover {
  opacity: 0.7;
}

.legal-page__content h1 {
  font-family: var(--ar-font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--ar-black);
  margin-bottom: 8px;
}

.legal-page__meta {
  font-size: 13px;
  color: var(--ar-gray);
  margin-bottom: 32px;
}

.legal-page__content h2 {
  font-family: var(--ar-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ar-black);
  margin-top: 32px;
  margin-bottom: 12px;
}

.legal-page__content h3 {
  font-family: var(--ar-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ar-black);
  margin-top: 20px;
  margin-bottom: 8px;
}

.legal-page__content p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ar-text);
  margin-bottom: 12px;
}

.legal-page__content ul {
  padding-left: 20px;
  margin-bottom: 12px;
}

.legal-page__content li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ar-text);
  margin-bottom: 4px;
}

.legal-page__content a {
  color: var(--ar-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-page__content a:hover {
  opacity: 0.7;
}

.legal-page__content strong {
  font-weight: 600;
}

/* Legal page footer — light background overrides */
.legal-page .site-footer { color: #1A1F16; }
.legal-page .site-footer__logo { color: #1A1F16; }
.legal-page .site-footer__brand-name { color: #1A1F16; }
.legal-page .site-footer__tagline { color: rgba(26,31,22,0.6); }
.legal-page .site-footer__col-title { color: #1A1F16; }
.legal-page .site-footer__link { color: rgba(26,31,22,0.6); }
.legal-page .site-footer__link:hover { color: #1A1F16; }
.legal-page .site-footer__text { color: rgba(26,31,22,0.5); }
.legal-page .site-footer__divider { background: rgba(26,31,22,0.1); }
.legal-page .site-footer__sponsor-label { color: rgba(26,31,22,0.4); }
.legal-page .site-footer__sponsor-img { filter: none; opacity: 0.7; }
.legal-page .site-footer__copy { color: rgba(26,31,22,0.35); }
.legal-page .site-footer__lang-btn { color: rgba(26,31,22,0.35); border-color: rgba(26,31,22,0.12); }
.legal-page .site-footer__lang-btn:hover { color: rgba(26,31,22,0.6); border-color: rgba(26,31,22,0.25); }
.legal-page .site-footer__lang-btn--active { color: var(--ar-green); border-color: var(--ar-green); background: rgba(61,90,62,0.1); }

@media (max-width: 600px) {
  .legal-page__inner {
    padding: 32px 16px 48px;
  }

  .legal-page__content h1 {
    font-size: 26px;
  }

  .legal-page__content h2 {
    font-size: 18px;
  }
}

/* ── Survey Dialog ─────────────────────────────────────────────────── */
.sg-survey {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 8px 0 20px;
}
.sg-survey__question {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-survey__label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(26,31,22,0.75);
  letter-spacing: 0.01em;
}
.sg-survey__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sg-survey__chip {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid rgba(26,31,22,0.12);
  background: rgba(26,31,22,0.03);
  color: rgba(26,31,22,0.7);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.sg-survey__chip:hover {
  border-color: rgba(196,169,106,0.4);
  color: rgba(26,31,22,0.9);
}
.sg-survey__chip--active {
  background: var(--ar-gold);
  border-color: var(--ar-gold);
  color: #fff;
  font-weight: 500;
}
.sg-survey__chip--active:hover {
  background: var(--ar-gold);
  border-color: var(--ar-gold);
  color: #fff;
}
.sg-survey__textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(26,31,22,0.1);
  border-radius: 8px;
  background: rgba(26,31,22,0.03);
  color: #1A1F16;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
}
.sg-survey__textarea::placeholder {
  color: rgba(26,31,22,0.3);
}
.sg-survey__textarea:focus {
  border-color: rgba(196,169,106,0.6);
}

/* ── Onboarding Dialog ─────────────────────────────────────────────── */
.sg-onboarding {
  display: flex;
  flex-direction: row;
  background: #F7F5F0;
  border-radius: 16px;
  overflow: hidden;
  max-width: 780px;
  width: 100%;
  min-height: 420px;
}
.sg-onboarding__image {
  position: relative;
  flex: 0 0 340px;
  overflow: hidden;
}
.sg-onboarding__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sg-onboarding__fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  background: linear-gradient(90deg, transparent 0%, #F7F5F0 100%);
}
.sg-onboarding__brand {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ar-font-heading);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  letter-spacing: 0.05em;
}
.sg-onboarding__logo {
  width: 18px;
  height: 18px;
}
.sg-onboarding__content {
  flex: 1;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}
.sg-onboarding__title {
  font-family: var(--ar-font-heading);
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.2;
}
.sg-onboarding__text {
  font-family: var(--ar-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(26,31,22,0.65);
  margin: 0 0 28px;
}
.sg-onboarding__dots {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.sg-onboarding__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26,31,22,0.12);
  transition: all 0.2s ease;
}
.sg-onboarding__dot--active {
  width: 24px;
  border-radius: 4px;
}
.sg-onboarding__nav {
  display: flex;
  gap: 12px;
  width: 100%;
}
.sg-onboarding__btn {
  flex: 1;
  padding: 13px 24px;
  border-radius: 10px;
  border: none;
  font-family: var(--ar-font-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sg-onboarding__btn--primary {
  color: #fff;
}
.sg-onboarding__btn--primary:hover {
  filter: brightness(1.1);
}
.sg-onboarding__btn--ghost {
  background: rgba(26,31,22,0.05);
  color: rgba(26,31,22,0.6);
}
.sg-onboarding__btn--ghost:hover {
  background: rgba(26,31,22,0.08);
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .sg-onboarding { flex-direction: column; max-width: 100%; max-height: 85vh; min-height: auto; }
  .sg-onboarding__image { flex: 0 0 auto; height: 160px; }
  .sg-onboarding__fade { top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(0deg, #F7F5F0 0%, transparent 100%); }
  .sg-onboarding__brand { top: 12px; left: auto; right: 12px; }
  .sg-onboarding__content { padding: 0 20px 24px; align-items: center; text-align: center; }
  .sg-onboarding__title { font-size: 20px; }
  .sg-onboarding__text { font-size: 14px; }
}
/* ---------------------------------------------------------------------------
 * Navigation Mode — Map + POI overlay
 * Uses design tokens from frog-view.css (--ar-*)
 * --------------------------------------------------------------------------- */

/* ---- Floating Nav Button ---- */

.nav-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  background: rgba(61, 90, 62, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);

  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}

.nav-fab:hover {
  transform: scale(1.08);
  background: rgba(61, 90, 62, 0.95);
}

.nav-fab:active {
  transform: scale(0.95);
}

.nav-fab svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #F7F5F0;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Fullscreen Map Container ---- */

.nav-map {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #1A1F16;
  display: flex;
  flex-direction: column;
}

.nav-map__canvas {
  flex: 1;
  position: relative;
}

.nav-map__canvas .mapboxgl-map {
  width: 100%;
  height: 100%;
}

/* ---- Close Button ---- */

.nav-map__close {
  position: absolute;
  top: max(env(safe-area-inset-top, 12px), 12px);
  right: 12px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(26, 31, 22, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.nav-map__close:hover {
  background: rgba(26, 31, 22, 0.9);
}

.nav-map__close svg {
  width: 20px;
  height: 20px;
  stroke: #F7F5F0;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

/* ---- Center-on-user Button ---- */

.nav-map__center-btn {
  position: absolute;
  bottom: 24px;
  left: 16px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(26, 31, 22, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.nav-map__center-btn:hover {
  background: rgba(26, 31, 22, 0.9);
}

.nav-map__center-btn svg {
  width: 20px;
  height: 20px;
  stroke: #F7F5F0;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- User Position Dot ---- */

.nav-user-dot {
  width: 18px;
  height: 18px;
  position: relative;
}

.nav-user-dot__inner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4A90D9;
  border: 3px solid #fff;
  box-shadow: 0 0 8px rgba(74, 144, 217, 0.6);
  position: absolute;
  top: 0;
  left: 0;
}

.nav-user-dot__pulse {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(74, 144, 217, 0.35);
  position: absolute;
  top: 0;
  left: 0;
  animation: nav-pulse 2s ease-out infinite;
}

@keyframes nav-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* ---- POI Markers ---- */

.nav-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.nav-marker:hover {
  transform: scale(1.1);
}

.nav-marker__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.8);
  position: relative;
}

.nav-marker__icon--info       { background: #3D5A3E; }
.nav-marker__icon--viewpoint  { background: #C4A96A; }
.nav-marker__icon--water      { background: #4A90D9; }
.nav-marker__icon--bridge     { background: #8B6B47; }

.nav-marker--nearest .nav-marker__icon {
  width: 40px;
  height: 40px;
  font-size: 20px;
  box-shadow:
    0 0 0 4px rgba(196, 169, 106, 0.4),
    0 2px 10px rgba(0, 0, 0, 0.4);
  animation: nav-glow 2s ease-in-out infinite alternate;
}

@keyframes nav-glow {
  0% { box-shadow: 0 0 0 4px rgba(196, 169, 106, 0.3), 0 2px 10px rgba(0, 0, 0, 0.4); }
  100% { box-shadow: 0 0 0 8px rgba(196, 169, 106, 0.5), 0 2px 14px rgba(0, 0, 0, 0.5); }
}

.nav-marker__label {
  margin-top: 4px;
  font-family: var(--ar-font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* ---- Nearest POI Bottom Bar ---- */

.nav-nearest-bar {
  position: absolute;
  bottom: 24px;
  left: 72px;
  right: 16px;
  z-index: 10;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(26, 31, 22, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  color: #F7F5F0;
  font-family: var(--ar-font-body, 'Inter', sans-serif);
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-nearest-bar__label {
  font-size: 11px;
  color: var(--ar-sage, #8B9D83);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav-nearest-bar__name {
  font-size: 15px;
  font-weight: 600;
  color: #F7F5F0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-nearest-bar__dist {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--ar-gold, #C4A96A);
  white-space: nowrap;
}

/* ---- POI Info Panel (bottom sheet) ---- */

.nav-panel-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.3);
}

.nav-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 21;
  max-height: 70vh;
  border-radius: 20px 20px 0 0;
  background: #1A1F16;
  color: #F7F5F0;
  font-family: var(--ar-font-body, 'Inter', sans-serif);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: nav-slide-up 0.3s ease-out;
  padding-bottom: max(env(safe-area-inset-bottom, 16px), 16px);
}

@keyframes nav-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.nav-panel__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  margin: 12px auto 8px;
}

.nav-panel__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-panel__close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.nav-panel__close svg {
  width: 16px;
  height: 16px;
  stroke: #F7F5F0;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

.nav-panel__body {
  padding: 0 20px;
}

.nav-panel__name {
  font-family: var(--ar-font-display, 'Space Grotesk', sans-serif);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #F7F5F0;
}

.nav-panel__distance {
  font-size: 13px;
  color: var(--ar-gold, #C4A96A);
  font-weight: 600;
  margin-bottom: 12px;
}

.nav-panel__desc {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(247, 245, 240, 0.75);
  margin-bottom: 16px;
}

.nav-panel__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-panel__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: var(--ar-font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.nav-panel__btn--primary {
  background: var(--ar-green, #3D5A3E);
  color: #F7F5F0;
}

.nav-panel__btn--primary:hover {
  background: #4a6e4b;
}

.nav-panel__btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #F7F5F0;
}

.nav-panel__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}

.nav-panel__btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Loading State ---- */

.nav-map__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1A1F16;
  color: var(--ar-sage, #8B9D83);
  font-family: var(--ar-font-body, 'Inter', sans-serif);
  font-size: 15px;
  z-index: 5;
}

.nav-map__loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--ar-gold, #C4A96A);
  border-radius: 50%;
  animation: nav-spin 0.8s linear infinite;
  margin-right: 12px;
}

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