/* ══════════════════════════════════════
   nav.css — 右側懸浮藤蔓目錄 v4
   ══════════════════════════════════════ */

/* ── 整體容器：固定在右側 ── */
.side-nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1800;
  display: flex;
  align-items: center;
  flex-direction: row;
  pointer-events: none;
}

/* ── SVG 藤蔓 ── */
.side-vine-svg {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 420px;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.35));
  animation: vineSway 8s ease-in-out infinite alternate;
}
@keyframes vineSway {
  0%   { filter: drop-shadow(0 0 6px rgba(0,200,255,0.25)); }
  100% { filter: drop-shadow(0 0 14px rgba(0,200,255,0.55)); }
}

/* ── 氣泡群容器 ── */
.side-bubbles {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: auto;
  padding-right: 12px;
  position: relative;
  z-index: 2;
}

/* ── 分類標頭 ── */
.side-cat-label {
  font-family: "Orbitron", sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px dashed;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 7px;
  margin-top: 16px;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.3s;
}
.side-cat-label:first-child { margin-top: 0; }

.side-cat-label.cat-novel {
  color: var(--accent-color);
  border-color: rgba(0, 200, 255, 0.4);
  background: rgba(0, 200, 255, 0.06);
}
.side-cat-label.cat-game {
  color: #ff6b4a;
  border-color: rgba(255, 107, 74, 0.4);
  background: rgba(255, 107, 74, 0.06);
}

/* ── 單顆氣泡 ── */
.side-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin-bottom: 7px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    transform     0.4s var(--ease-pop),
    box-shadow    0.4s var(--ease-smooth),
    background    0.3s var(--ease-smooth),
    border-color  0.3s var(--ease-smooth),
    color         0.3s var(--ease-smooth),
    padding-right 0.4s var(--ease-pop);
}
.side-bubble::after {
  content: "";
  position: absolute;
  top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.6s var(--ease-smooth);
  pointer-events: none;
}
.side-bubble:hover::after { left: 200%; }
.side-bubble i {
  font-size: 0.88rem;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-pop), color 0.3s;
}

/* 小說：藍色 */
.side-bubble.bubble-novel {
  background: rgba(5, 10, 28, 0.72);
  border: 1.5px solid rgba(0, 200, 255, 0.22);
  color: var(--text-main);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4), inset 0 0 8px rgba(0,200,255,0.04);
}
.side-bubble.bubble-novel i { color: var(--accent-color); }
.side-bubble.bubble-novel:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #020a18;
  transform: translateX(-7px) scale(1.05);
  box-shadow: 0 0 30px rgba(0,200,255,0.5), 0 8px 20px rgba(0,0,0,0.3);
  padding-right: 22px;
}
.side-bubble.bubble-novel:hover i { color: #020a18; transform: scale(1.2) rotate(-8deg); }

/* 遊戲：紅橙色 */
.side-bubble.bubble-game {
  background: rgba(20, 6, 4, 0.72);
  border: 1.5px solid rgba(255, 107, 74, 0.22);
  color: var(--text-main);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4), inset 0 0 8px rgba(255,107,74,0.04);
}
.side-bubble.bubble-game i { color: #ff6b4a; }
.side-bubble.bubble-game:hover {
  background: #ff6b4a;
  border-color: #ff6b4a;
  color: #1a0800;
  transform: translateX(-7px) scale(1.05);
  box-shadow: 0 0 30px rgba(255,107,74,0.5), 0 8px 20px rgba(0,0,0,0.3);
  padding-right: 22px;
}
.side-bubble.bubble-game:hover i { color: #1a0800; transform: scale(1.2) rotate(-8deg); }

/* Active 狀態 */
.side-bubble.is-active.bubble-novel {
  background: rgba(0, 200, 255, 0.15);
  border-color: rgba(0,200,255,0.7);
  color: var(--accent-color);
  box-shadow: 0 0 20px rgba(0,200,255,0.3);
}
.side-bubble.is-active.bubble-game {
  background: rgba(255, 107, 74, 0.15);
  border-color: rgba(255,107,74,0.7);
  color: #ff6b4a;
  box-shadow: 0 0 20px rgba(255,107,74,0.3);
}

/* ── Light mode ── */
[data-theme="light"] .side-bubble.bubble-novel {
  background: rgba(235, 245, 255, 0.9);
  color: #0c1a30;
  border-color: rgba(26,109,204,0.3);
  box-shadow: 0 6px 20px rgba(10,30,80,0.10);
}
[data-theme="light"] .side-bubble.bubble-game {
  background: rgba(255, 245, 242, 0.9);
  color: #2a0a00;
  border-color: rgba(200,70,40,0.28);
  box-shadow: 0 6px 20px rgba(80,20,10,0.10);
}
[data-theme="light"] .side-cat-label.cat-novel { color: #1a6dcc; background: rgba(26,109,204,0.07); border-color: rgba(26,109,204,0.3); }
[data-theme="light"] .side-cat-label.cat-game  { color: #c04020; background: rgba(200,64,32,0.07); border-color: rgba(200,64,32,0.3); }
[data-theme="light"] .side-vine-svg { filter: drop-shadow(0 0 5px rgba(26,109,204,0.2)); }
[data-theme="light"] .side-bubble.bubble-novel:hover { background: var(--accent-color); color: #fff; }
[data-theme="light"] .side-bubble.bubble-game:hover  { background: #d04020; color: #fff; border-color: #d04020; }

/* ── 手機版 toggle 按鈕（桌面隱藏） ── */
.side-nav-toggle { display: none; }

.side-cat-label.cat-music {
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.06);
}

/* 音樂：紫色 */
.side-bubble.bubble-music {
  background: rgba(15, 5, 28, 0.72);
  border: 1.5px solid rgba(168, 85, 247, 0.22);
  color: var(--text-main);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4), inset 0 0 8px rgba(168,85,247,0.04);
}
.side-bubble.bubble-music i { color: #a855f7; }
.side-bubble.bubble-music:hover {
  background: #a855f7;
  border-color: #a855f7;
  color: #0f0020;
  transform: translateX(-7px) scale(1.05);
  box-shadow: 0 0 30px rgba(168,85,247,0.5), 0 8px 20px rgba(0,0,0,0.3);
  padding-right: 22px;
}
.side-bubble.bubble-music:hover i { color: #0f0020; transform: scale(1.2) rotate(-8deg); }

.side-bubble.is-active.bubble-music {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168,85,247,0.7);
  color: #a855f7;
  box-shadow: 0 0 20px rgba(168,85,247,0.3);
}

[data-theme="light"] .side-bubble.bubble-music {
  background: rgba(248, 240, 255, 0.9);
  color: #3b0070;
  border-color: rgba(140,60,220,0.28);
  box-shadow: 0 6px 20px rgba(80,20,120,0.10);
}
[data-theme="light"] .side-cat-label.cat-music { color: #7c3aed; background: rgba(124,58,237,0.07); border-color: rgba(124,58,237,0.3); }
[data-theme="light"] .side-bubble.bubble-music:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* ── 手機版 ── */
@media (max-width: 768px) {
  /* side-nav：固定在 modeBtn 正下方，往下展開 */
  .side-nav {
    position: fixed;
    top: 54px;        /* header(50px) + 4px 間距，緊貼 modeBtn 下方 */
    right: 12px;
    bottom: auto;
    left: auto;
    transform: none;
    flex-direction: column;
    align-items: flex-end;
    z-index: 2100;
  }

  .side-vine-svg { display: none; }

  /* Toggle 按鈕：圓形，在最上方 */
  .side-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;   /* 跟著 side-nav flow，不再獨立 fixed */
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 200, 255, 0.5);
    background: rgba(5, 10, 28, 0.88);
    color: var(--accent-color);
    font-size: 0.95rem;
    cursor: pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 0 14px rgba(0,200,255,0.25), 0 4px 16px rgba(0,0,0,0.5);
    transition:
      background   0.3s var(--ease-smooth),
      box-shadow   0.3s var(--ease-smooth),
      border-color 0.3s var(--ease-smooth),
      transform    0.4s var(--ease-pop);
    pointer-events: auto;
    flex-shrink: 0;
  }
  .side-nav-toggle:hover {
    background: rgba(0,200,255,0.15);
    box-shadow: 0 0 22px rgba(0,200,255,0.45), 0 4px 16px rgba(0,0,0,0.4);
    border-color: var(--accent-color);
  }
  .side-nav-toggle[aria-expanded="true"] {
    background: var(--accent-color);
    color: #020a18;
    border-color: var(--accent-color);
    box-shadow: 0 0 28px rgba(0,200,255,0.6), 0 4px 16px rgba(0,0,0,0.4);
    transform: rotate(180deg);   /* 向下箭頭旋轉表示展開 */
  }

  /* 氣泡群：收合時隱藏，展開往下長 */
  .side-bubbles {
    padding-right: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);   /* 向上收縮，展開往下 */
    transition:
      max-height 0.45s var(--ease-smooth),
      opacity    0.35s var(--ease-smooth),
      transform  0.4s  var(--ease-pop);
    align-items: flex-end;
    margin-top: 6px;
  }
  .side-bubbles.is-open {
    max-height: 600px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .side-cat-label { font-size: 0.52rem; padding: 3px 9px; margin-top: 10px; }
  .side-bubble    { font-size: 0.78rem; padding: 8px 13px 8px 11px; margin-bottom: 6px; }
}

/* Light mode toggle */
[data-theme="light"] .side-nav-toggle {
  background: rgba(235, 245, 255, 0.92);
  border-color: rgba(26, 109, 204, 0.45);
  color: #1a6dcc;
  box-shadow: 0 0 12px rgba(26,109,204,0.18), 0 4px 14px rgba(0,0,0,0.1);
}
[data-theme="light"] .side-nav-toggle:hover {
  background: rgba(26, 109, 204, 0.1);
  box-shadow: 0 0 20px rgba(26,109,204,0.3);
}
[data-theme="light"] .side-nav-toggle[aria-expanded="true"] {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}