<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EchoHeart & Girls Phantom Dead — Otaku Overload</title>
  <link rel="stylesheet" href="style.css">
  <script type="module" src="firebase-config.js?v=2"></script>
  <script type="module" src="age-gate.js"></script>
  <style>
    :root {
      /* Twilight Mode Palette */
      --bg-dark: #0b0818;
      --card-bg: rgba(22, 15, 42, 0.88);
      --card-inner: rgba(14, 11, 26, 0.85);
      --nav-bg: rgba(18, 12, 36, 0.94);
      --nav-border: rgba(168, 139, 235, 0.35);
      --accent-purple: #a88beb;
      --accent-pink: #f4b8c4;
      --accent-cyan: #00F0FF;
      --accent-gold: #FFD166;
      --accent-glow: rgba(168, 139, 235, 0.35);
      --text-main: #e2daf8;
      --text-light: #F4EFFD;
      --text-muted: #cbb8f6;
      --btn-grad: linear-gradient(135deg, #a88beb 0%, #f4b8c4 100%);
      --btn-text: #0b0818;
      --card-border: rgba(168, 139, 235, 0.3);
      --border-subtle: rgba(168, 139, 235, 0.3);
      --card-hover-border: #f4b8c4;
      --card-hover-shadow: rgba(244, 184, 196, 0.25);
    }

/* ============================================================ */
/* 🔮 ORB COUNTER & VIP CHAT HEADER DECO                        */
/* ============================================================ */
.chat-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  font-size: 0.88rem;
}

.vip-badge-pill {
  background: linear-gradient(135deg, var(--accent-gold), #ffa500);
  color: #000000;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 6px;
}

.orb-counter-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(168, 139, 235, 0.12);
  border: 1px solid var(--border-subtle);
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 700;
  color: var(--text-light);
}

.daily-bonus-toast {
  position: absolute;
  top: 100%;
  right: 16px;
  margin-top: 8px;
  background: var(--card-bg);
  color: var(--accent-cyan);
  border: 1.5px solid var(--accent-cyan);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 100;
  animation: toastFadeInOut 3s ease forwards;
}

@keyframes toastFadeInOut {
  0% { opacity: 0; transform: translateY(-4px); }
  15% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* ============================================================ */
/* 🕵️ SAKURAOKA MYSTERY DECODER & BADGE GRID STYLES              */
/* ============================================================ */

/* --- INVESTIGATOR DOSSIER & BADGE GRID --- */
.investigator-docket {
  background: linear-gradient(135deg, rgba(30, 22, 50, 0.95), rgba(15, 11, 28, 0.95));
  border: 1.5px solid var(--border-subtle);
  border-radius: 18px;
  padding: 20px 24px;
  margin-bottom: 22px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.rank-badge-pill {
  background: rgba(255, 209, 102, 0.18);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* 6-Badge Showcase Layout */
.badge-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

/* Locked Card State */
.badge-item-card {
  background: var(--card-inner);
  border: 1px dashed rgba(160, 155, 185, 0.3);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-muted);
  opacity: 0.45;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  user-select: none;
}

/* Unlocked Card State */
.badge-item-card.unlocked {
  opacity: 1;
  color: var(--text-light);
  border: 1.5px solid var(--accent-gold);
  background: rgba(255, 209, 102, 0.08);
  box-shadow: 0 0 16px rgba(255, 209, 102, 0.18);
  transform: translateY(-2px);
}

.badge-item-card.unlocked:hover {
  box-shadow: 0 0 22px rgba(255, 209, 102, 0.35);
  border-color: #FFE599;
}

.badge-icon-disp {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.badge-title-disp {
  line-height: 1.3;
}

/* Equipped Profile Badge next to Username */
.user-equipped-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 209, 102, 0.15);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(255, 209, 102, 0.2);
  transition: all 0.25s ease;
}

.user-equipped-badge:hover {
  background: rgba(255, 209, 102, 0.28);
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.4);
}


/* --- MYSTERY DECODER TERMINAL --- */
.terminal-analyzer-box {
  background: rgba(11, 9, 20, 0.95);
  border: 2px solid var(--accent-cyan);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.terminal-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 240, 255, 0.3);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.terminal-code-input-group {
  display: flex;
  gap: 12px;
  margin: 22px 0 16px;
}

.terminal-text-input {
  flex: 1;
  background: #05040A;
  border: 1.5px solid var(--accent-cyan);
  border-radius: 12px;
  padding: 12px 18px;
  color: var(--accent-cyan);
  font-family: 'M PLUS Rounded 1c', monospace;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 1px;
  outline: none;
  transition: all 0.25s ease;
}

.terminal-text-input:focus {
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.35);
  border-color: #70F8FF;
}

.terminal-submit-btn {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 12px 26px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 59, 141, 0.3);
  transition: all 0.2s ease;
}

.terminal-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 59, 141, 0.45);
}

.terminal-submit-btn:active {
  transform: translateY(0);
}

/* Feedback Box Output */
.terminal-output-log {
  background: #05040A;
  border: 1px solid rgba(178, 130, 255, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 0.9rem;
  line-height: 1.6;
  display: none;
  margin-top: 14px;
  animation: fadeInLog 0.3s ease-out forwards;
}

@keyframes fadeInLog {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.terminal-output-log.success {
  display: block;
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: rgba(255, 209, 102, 0.08);
  box-shadow: 0 0 16px rgba(255, 209, 102, 0.15);
}

.terminal-output-log.error {
  display: block;
  border-color: var(--accent-pink);
  color: var(--accent-pink);
  background: rgba(255, 59, 141, 0.08);
  box-shadow: 0 0 16px rgba(255, 59, 141, 0.15);
}

    /* Basement Mode Color Overrides (17+ Subterranean) */
    body.basement-mode {
      --bg-dark: #05020c;
      --card-bg: rgba(18, 7, 28, 0.92);
      --nav-bg: rgba(14, 5, 20, 0.96);
      --nav-border: rgba(255, 77, 109, 0.5);
      --accent-purple: #ff4d6d;
      --accent-pink: #ff007f;
      --accent-glow: rgba(255, 77, 109, 0.45);
      --text-main: #fce8ec;
      --text-muted: #e0b0bb;
      --btn-grad: linear-gradient(135deg, #ff4d6d 0%, #7209b7 100%);
      --btn-text: #ffffff;
      --card-border: rgba(255, 77, 109, 0.4);
      --card-hover-border: #ff007f;
      --card-hover-shadow: rgba(255, 0, 127, 0.35);
    }

    /* Backstage VIP Mode Color Overrides */
    body.backstage-mode {
      --bg-dark: #05020a;
      --card-bg: rgba(22, 12, 38, 0.92);
      --nav-bg: rgba(14, 6, 22, 0.98);
      --nav-border: rgba(255, 209, 102, 0.5);
      --accent-purple: #ffd166;
      --accent-pink: #ff007f;
      --accent-glow: rgba(255, 209, 102, 0.45);
      --text-main: #ffffff;
      --text-muted: #e2daf8;
      --btn-grad: linear-gradient(135deg, #ffd166 0%, #ff007f 100%);
      --btn-text: #000000;
      --card-border: rgba(255, 209, 102, 0.4);
      --card-hover-border: #ffd166;
      --card-hover-shadow: rgba(255, 209, 102, 0.35);
    }

    body {
      background-color: var(--bg-dark);
      color: var(--text-main);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      transition: background-color 0.4s ease, color 0.4s ease;
    }

    /* Universal Stacked Navbar Styling */
    .navbar {
      position: sticky;
      top: 0;
      z-index: 1000;
      width: 100%;
      background: var(--nav-bg);
      border-bottom: 2px solid var(--nav-border);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: 14px 20px 12px;
      box-sizing: border-box;
      transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    }

    body.basement-mode .navbar {
      box-shadow: 0 4px 20px rgba(255, 77, 109, 0.18);
    }

    body.backstage-mode .navbar {
      box-shadow: 0 4px 20px rgba(255, 209, 102, 0.25);
    }

    .nav-header-stacked {
      max-width: 1300px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      position: relative;
    }

    /* Centered Branding */
    .brand-centered {
      text-align: center;
    }

    .logo-link {
      text-decoration: none;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
    }

    .logo-main {
      font-family: 'Fredoka', 'Segoe UI', cursive, sans-serif;
      font-size: 1.85rem;
      font-weight: 900;
      letter-spacing: 2px;
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-purple) 50%, var(--accent-pink) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 12px var(--accent-glow));
      transition: all 0.4s ease;
    }

    .logo-link:hover .logo-main {
      transform: scale(1.02);
      filter: drop-shadow(0 0 18px var(--accent-pink));
    }

    .logo-sub {
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 3px;
      color: var(--accent-pink);
      text-transform: uppercase;
      opacity: 0.95;
      margin-top: 1px;
      transition: color 0.4s ease;
    }

    /* Centered Nav Links Row */
    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px 12px;
      width: 100%;
    }

    .nav-item {
      color: var(--text-muted);
      font-size: 0.88rem;
      font-weight: 700;
      padding: 8px 14px;
      border-radius: 10px;
      text-decoration: none;
      background: rgba(168, 139, 235, 0.08);
      border: 1px solid rgba(168, 139, 235, 0.2);
      transition: all 0.25s ease;
      white-space: nowrap;
    }

    .nav-item:hover, .nav-item.active {
      background: rgba(168, 139, 235, 0.22);
      color: #ffffff;
      border-color: var(--accent-pink);
      box-shadow: 0 0 12px var(--accent-glow);
    }

    body.basement-mode .nav-item:hover, 
    body.basement-mode .nav-item.active {
      background: rgba(255, 77, 109, 0.22);
      border-color: #ff007f;
      box-shadow: 0 0 12px rgba(255, 77, 109, 0.35);
    }

    body.backstage-mode .nav-item:hover, 
    body.backstage-mode .nav-item.active {
      background: rgba(255, 209, 102, 0.22);
      border-color: #ffd166;
      box-shadow: 0 0 12px rgba(255, 209, 102, 0.35);
    }

    /* 3-Tier Switcher Pill */
    .tier-switcher-pill {
      display: inline-flex;
      background: rgba(10, 5, 22, 0.7);
      border: 1px solid var(--nav-border);
      border-radius: 20px;
      padding: 3px;
      gap: 4px;
    }

    .tier-btn {
      background: transparent;
      border: none;
      color: var(--text-muted);
      padding: 5px 12px;
      border-radius: 16px;
      font-size: 0.78rem;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .tier-btn.active, .tier-btn:hover {
      background: rgba(168, 139, 235, 0.25);
      color: #ffffff;
    }

    body.basement-mode .tier-btn.active {
      background: rgba(255, 77, 109, 0.3);
      color: #ffffff;
      box-shadow: 0 0 10px rgba(255, 77, 109, 0.4);
    }

    body.backstage-mode .tier-btn.active {
      background: rgba(255, 209, 102, 0.3);
      color: #ffd166;
      box-shadow: 0 0 10px rgba(255, 209, 102, 0.4);
    }

    .mobile-menu-btn {
      display: none;
    }

    /* Mobile Collapsible Navigation */
    @media (max-width: 992px) {
      .nav-header-stacked {
        flex-direction: row;
        justify-content: space-between;
      }

      .logo-main { font-size: 1.35rem; }
      .logo-sub { font-size: 0.62rem; letter-spacing: 2px; }

      .mobile-menu-btn {
        display: flex !important;
        background: rgba(168, 139, 235, 0.15);
        border: 1px solid var(--card-border);
        border-radius: 8px;
        padding: 8px;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
      }

      .hamburger-bar {
        width: 22px;
        height: 2.5px;
        background: var(--accent-pink);
        border-radius: 2px;
      }

      .nav-links {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--nav-bg);
        border-bottom: 2px solid var(--nav-border);
        flex-direction: column;
        padding: 16px;
        gap: 10px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85);
      }

      .nav-links.open { display: flex !important; }
      .nav-item, .tier-switcher-pill { width: 100%; box-sizing: border-box; justify-content: center; }
    }

    /* Hero Banner */
    .hero-container {
      max-width: 1200px;
      margin: 40px auto 20px;
      padding: 48px 24px;
      text-align: center;
      background: var(--card-bg);
      border: 2px solid var(--card-border);
      border-radius: 24px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 20px var(--accent-glow);
      transition: all 0.4s ease;
    }

    .hero-badge {
      display: inline-block;
      padding: 6px 16px;
      border-radius: 20px;
      background: rgba(168, 139, 235, 0.15);
      border: 1px solid var(--card-border);
      color: var(--accent-pink);
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .hero-title {
      font-size: 3rem;
      margin: 0 0 16px;
      background: linear-gradient(135deg, #ffffff 20%, var(--accent-pink) 60%, var(--accent-purple) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 900;
      letter-spacing: -0.5px;
    }

    .hero-subtitle {
      font-size: 1.15rem;
      color: var(--text-muted);
      max-width: 750px;
      margin: 0 auto 32px;
      line-height: 1.6;
    }

    .hero-cta-group {
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .cta-btn-primary {
      background: var(--btn-grad);
      color: var(--btn-text);
      font-weight: 800;
      padding: 14px 28px;
      border-radius: 14px;
      text-decoration: none;
      box-shadow: 0 4px 20px var(--accent-glow);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .cta-btn-secondary {
      background: rgba(35, 25, 65, 0.8);
      border: 1px solid var(--card-border);
      color: var(--text-main);
      font-weight: 800;
      padding: 14px 28px;
      border-radius: 14px;
      text-decoration: none;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    body.basement-mode .cta-btn-secondary { background: rgba(28, 10, 38, 0.8); }
    body.backstage-mode .cta-btn-secondary { background: rgba(38, 20, 50, 0.8); }

    .cta-btn-primary:hover { 
      transform: translateY(-3px); 
      box-shadow: 0 8px 28px var(--card-hover-shadow); 
    }
    .cta-btn-secondary:hover { 
      background: rgba(168, 139, 235, 0.25); 
      color: #ffffff; 
      border-color: var(--card-hover-border);
    }

    /* Gateway Grid Cards */
    .gateway-grid {
      max-width: 1200px;
      margin: 30px auto 50px;
      padding: 0 20px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }

    .gateway-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      padding: 26px;
      text-decoration: none;
      color: inherit;
      transition: all 0.35s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      backdrop-filter: blur(10px);
    }

    .gateway-card:hover {
      transform: translateY(-6px);
      border-color: var(--card-hover-border);
      box-shadow: 0 12px 32px var(--card-hover-shadow);
    }

    .gateway-icon {
      font-size: 2.5rem;
      margin-bottom: 14px;
    }

    .gateway-card h3 {
      font-size: 1.25rem;
      margin: 0 0 8px;
      color: #ffffff;
      font-weight: 800;
    }

    .gateway-card p {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.5;
      margin: 0 0 18px;
    }

    .gateway-link-text {
      font-size: 0.88rem;
      font-weight: 800;
      color: var(--accent-pink);
      display: flex;
      align-items: center;
      gap: 6px;
      transition: gap 0.2s ease;
    }

    .gateway-card:hover .gateway-link-text { gap: 10px; }

    /* Modal Overlay Styles */
    .modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(5, 2, 12, 0.88);
      backdrop-filter: blur(12px);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .modal-card {
      background: var(--card-bg);
      border: 2px solid var(--accent-purple);
      border-radius: 22px;
      padding: 30px;
      max-width: 440px;
      width: 100%;
      text-align: center;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 25px var(--accent-glow);
    }

    .modal-card h3 { margin: 0 0 10px; color: #ffffff; font-size: 1.35rem; font-weight: 800; }
    .modal-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; margin-bottom: 22px; }
    .modal-actions { display: flex; flex-direction: column; gap: 10px; }
    .modal-btn { width: 100%; padding: 12px; border-radius: 12px; border: none; font-weight: 800; cursor: pointer; }
    .google-btn { background: #ffffff; color: #111; }
    .close-btn { background: transparent; color: var(--accent-purple); border: 1px solid var(--card-border); }

    /* Footer Styles */
    .site-footer {
      width: 100%;
      background: rgba(8, 3, 16, 0.95);
      border-top: 1px solid rgba(0, 240, 255, 0.25);
      padding: 24px 16px;
      margin-top: 40px;
      text-align: center;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
    }

    .footer-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .copyright-text {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin: 0;
    }

    .footer-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .footer-links a {
      color: var(--accent-cyan);
      font-size: 0.85rem;
      font-weight: 700;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-links a:hover {
      color: var(--accent-pink);
      text-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
    }

    .footer-divider {
      color: rgba(184, 167, 212, 0.4);
      font-size: 0.8rem;
    }
  </style>
</head>
<body class="twilight-mode">

  <!-- Universal Header Navigation Bar -->
  <header class="navbar">
    
    <!-- Member Orb & VIP Status Bar -->
    <div id="chat-header-bar" class="chat-header-bar">
      <div class="user-profile-summary">
        <span id="header-username" style="font-weight: 700;">Guest Member</span>
        <span id="vip-badge" class="vip-badge-pill" style="display: none;">👑 VIP</span>
      </div>

      <div class="orb-counter-badge">
        <span>🔮</span>
        <span id="orb-count-display">0 Orbs</span>
      </div>

      <div id="daily-toast" class="daily-bonus-toast" style="display: none;"></div>
    </div>

    <div class="nav-header-stacked">
      
      <!-- Fancy Centered Brand Title -->
      <div class="brand-centered">
        <a href="index.html" class="logo-link">
          <span class="logo-main">⚡ OTAKU OVERLOAD ⚡</span>
          <span class="logo-sub">✦ GIRLS DEAD PHANTOM ✦</span>
        </a>
      </div>

      <!-- Mobile Hamburger Toggle Button -->
      <button class="mobile-menu-btn" id="mobile-menu-toggle" aria-label="Toggle Navigation Menu" onclick="toggleMobileMenu()">
        <span class="hamburger-bar"></span>
        <span class="hamburger-bar"></span>
        <span class="hamburger-bar"></span>
      </button>

      <!-- Main Destinations & Access Mode Switcher -->
      <nav class="nav-links" id="nav-menu">
        <a href="index.html" class="nav-item active">🏠 Home</a>
        <a href="podcast.html" class="nav-item">🎙️ Podcast</a>
        <a href="bbs-forum.html" class="nav-item">💬 Sakuraoka BBS</a>
        <a href="neko-fm.html" class="nav-item">📻 24/7 Neko FM</a>
        <a href="anime.html" class="nav-item">📺 Otaku Hub</a>
        <a href="chat.html" class="nav-item">💬 Live Chat</a>
        <a href="hub.html" class="nav-item">🌌 Universe Hub</a>

        <button id="nav-auth-btn" onclick="if (window.openAuthOrAccount) { window.openAuthOrAccount(); } else if (window.loginWithGoogle) { window.loginWithGoogle(); }" class="nav-item" style="background: rgba(168, 139, 235, 0.25); border: 1px solid var(--accent-purple); cursor: pointer;">
          🔑 Login
        </button>

        <!-- Segmented 3-Tier Access Switcher Pill -->
        <div class="tier-switcher-pill">
          <button type="button" class="tier-btn" data-mode="twilight" onclick="handleModeChange('twilight')">🌸 Twilight</button>
          <button type="button" class="tier-btn" data-mode="basement" onclick="handleModeChange('basement')">⚡ Basement 🔒</button>
          <button type="button" class="tier-btn vip" data-mode="backstage" onclick="handleModeChange('backstage')">👑 VIP ✦</button>
        </div>
      </nav>

    </div>
  </header>

  <!-- Hero Banner -->
  <section class="hero-container">
    <span class="hero-badge">✦ Official Audio Drama & Fan Portal</span>
    <h1 class="hero-title">EchoHeart & Girls Phantom Dead</h1>
    <p class="hero-subtitle">
      Step into Sakuraoka High's Prep Room B. Listen to weekly audio drama broadcasts, stream 24/7 J-Rock radio, chat with fellow listeners, and explore cavern lore.
    </p>
    <div class="hero-cta-group">
      <a href="podcast.html" class="cta-btn-primary">🎙️ Listen to Podcast</a>
      <a href="chat.html" class="cta-btn-secondary">💬 Enter Locker 102 Chat</a>
    </div>
  </section>

  <!-- Primary Feature Gateway Grid -->
  <main class="gateway-grid">
    <a href="podcast.html" class="gateway-card">
      <div>
        <div class="gateway-icon">🎙️</div>
        <h3>Whisper Radio Podcast Studio</h3>
        <p>Full-length audio drama episodes featuring Nekomi, Sera, Akari Minase, and Aoi.</p>
      </div>
      <span class="gateway-link-text">Launch Studio Stage →</span>
    </a>

    <a href="neko-fm.html" class="gateway-card">
      <div>
        <div class="gateway-icon">📻</div>
        <h3>24/7 Neko FM Radio Lounge</h3>
        <p>Continuous J-Pop/J-Rock streams, station tuner presets, and setlist voting polls.</p>
      </div>
      <span class="gateway-link-text">Tune In Now →</span>
    </a>

    <a href="bbs-forum.html" class="gateway-card">
      <div>
        <div class="gateway-icon">💬</div>
        <h3>Sakuraoka Student BBS</h3>
        <p>Anonymized campus board, multi-NPC mystery threads, and investigator badges.</p>
      </div>
      <span class="gateway-link-text">Explore Student BBS →</span>
    </a>

    <a href="hub.html" class="gateway-card">
      <div>
        <div class="gateway-icon">🌌</div>
        <h3>Universe Hub Portal</h3>
        <p>Light novel lore, character bio archives, stem mixer, and Atelier asset downloads.</p>
      </div>
      <span class="gateway-link-text">Explore Portal →</span>
    </a>
  </main>

  <!-- GLOBAL SITE FOOTER -->
  <footer class="site-footer">
    <div class="footer-container">
      <p class="copyright-text">&copy; 2026 Otaku Overload & 24/7 Neko FM. All rights reserved.</p>
      <div class="footer-links">
        <a href="about.html">About Us</a>
        <span class="footer-divider">•</span>
        <a href="contact.html">Contact Us</a>
        <span class="footer-divider">•</span>
        <a href="privacy.html">Privacy Policy</a>
      </div>
    </div>
  </footer>

  <script>
    async function handleModeChange(targetMode) {
      if (targetMode === 'twilight') {
        applyThemeMode('twilight');
        return;
      }

      if (targetMode === 'basement') {
        if (!window.currentUser) {
          showAuthModal('Sign-In Required', 'Sign in with Google to access After-Hours Basement streams.');
          return;
        }

        if (window.userData && window.userData.ageVerified17) {
          applyThemeMode('basement');
          return;
        }

        if (typeof window.handleContentAccess === "function") {
          const allowed = await window.handleContentAccess('basement');
          if (allowed) applyThemeMode('basement');
        } else {
          alert("The Basement Channel requires 17+ age verification.");
        }
        return;
      }

      if (targetMode === 'backstage') {
        if (!window.currentUser) {
          showAuthModal('Sign-In Required', 'Sign in with Google to check your VIP Backstage Pass status.');
          return;
        }

        if (window.userData && window.userData.isVIP) {
          applyThemeMode('backstage');
        } else {
          showVIPPromoModal();
        }
      }
    }

    function getCurrentMode() {
      return localStorage.getItem('neko_active_mode') || 'twilight';
    }

    function applyThemeMode(mode) {
      localStorage.setItem('neko_active_mode', mode);
      const body = document.body;

      body.classList.remove('twilight-mode', 'basement-mode', 'backstage-mode');
      body.classList.add(`${mode}-mode`);

      document.querySelectorAll('.tier-btn').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.mode === mode);
      });
    }

    function showVIPPromoModal() {
      removeExistingModals();
      const modalHTML = `
        <div id="neko-gate-modal" class="modal-overlay">
          <div class="modal-card" style="border-color: #ffd166;">
            <span style="background: linear-gradient(135deg, #ffd166, #ff007f); color: #000; font-weight: 900; font-size: 0.72rem; padding: 4px 12px; border-radius: 20px; text-transform: uppercase;">Backstage Pass Locked</span>
            <h3 style="margin: 14px 0 8px; color: #ffd166;">👑 VIP Backstage Access</h3>
            <p style="color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin-bottom: 16px;">
              Get access to exclusive stem mixers, gold name glows, custom avatar frames, and private band lounge chats!
            </p>
            <div style="background: rgba(35, 20, 60, 0.6); padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 209, 102, 0.2); margin-bottom: 18px; text-align: left; font-size: 0.82rem;">
              <div style="font-weight: 800; color: #ffd166; margin-bottom: 6px;">🎁 How to get 30 Days Free:</div>
              • Vote in daily <b>Neko FM Setlist Polls</b><br>
              • Catch random <b>Golden Key drops</b> in Live Chat<br>
              • Win weekly <b>Prep Room B Trivia Events</b>
            </div>
            <div class="modal-actions">
              <a href="neko-fm.html" class="modal-btn" style="background: linear-gradient(135deg, #ffd166, #ff007f); color: #000; text-decoration: none; display: block; box-sizing: border-box;">📊 Vote in Polls & Earn VIP</a>
              <button class="modal-btn close-btn" onclick="removeExistingModals()">Close</button>
            </div>
          </div>
        </div>
      `;
      document.body.insertAdjacentHTML('beforeend', modalHTML);
    }

    function showAuthModal(title, message) {
      removeExistingModals();
      const modalHTML = `
        <div id="neko-gate-modal" class="modal-overlay">
          <div class="modal-card">
            <h3>🔑 ${title}</h3>
            <p>${message}</p>
            <div class="modal-actions">
              <button class="modal-btn google-btn" onclick="if (window.loginWithGoogle) { window.loginWithGoogle(); }">Sign In with Google</button>
              <button class="modal-btn close-btn" onclick="removeExistingModals()">Cancel</button>
            </div>
          </div>
        </div>
      `;
      document.body.insertAdjacentHTML('beforeend', modalHTML);
    }

    function removeExistingModals() {
      const existing = document.getElementById('neko-gate-modal');
      if (existing) existing.remove();
    }

    function toggleMobileMenu() {
      const navMenu = document.getElementById('nav-menu');
      if (navMenu) navMenu.classList.toggle('open');
    }

    document.addEventListener('DOMContentLoaded', () => {
      applyThemeMode(getCurrentMode());

      document.addEventListener('click', function(event) {
        const navMenu = document.getElementById('nav-menu');
        const isInsideNavbar = event.target.closest('.navbar');
        if (!isInsideNavbar && navMenu && navMenu.classList.contains('open')) {
          navMenu.classList.remove('open');
        }
      });
    });
  </script>

  <script src="global-player.js"></script>
</body>
</html>
