/* ══════════════════════════════════════
   visual-mode.css — Visual mode UI
   ══════════════════════════════════════ */

/* Mode switching */
.view-mode {
  position: fixed; inset: 0;
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.5s var(--ease-smooth), visibility 0.5s var(--ease-smooth);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.view-mode.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

#visual-mode { background: var(--bg-color); }

/* Ambient effects */
.scan-lines {
  position: fixed; inset: 0; pointer-events: none; z-index: 900;
  background: repeating-linear-gradient(0deg,rgba(0,0,0,0.18),rgba(0,0,0,0.18) 1px,transparent 1px,transparent 3px);
  opacity: 0.18;
}

/* ── 多層次極光背景 ── */
.bg-glow {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  overflow: hidden;
}
/* 主光暈：藍色脈衝 */
.bg-glow::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 10%, rgba(0,200,255,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(61,142,255,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 70%, rgba(0,100,180,0.12) 0%, transparent 55%);
  filter: blur(80px);
  animation: auroraShift 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
/* 次光暈：流動光帶 */
.bg-glow::after {
  content: "";
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 40% 20% at 30% 40%, rgba(0,200,255,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 35% 18% at 70% 60%, rgba(100,180,255,0.08) 0%, transparent 55%);
  filter: blur(60px);
  animation: auroraFloat 20s ease-in-out infinite alternate-reverse;
  will-change: transform;
}
@keyframes auroraShift {
  0%   { opacity: 0.8;  transform: scale(1)    translateY(0)     skewY(0deg); }
  33%  { opacity: 1;    transform: scale(1.08) translateY(-15px) skewY(0.5deg); }
  66%  { opacity: 0.9;  transform: scale(1.04) translateY(-8px)  skewY(-0.3deg); }
  100% { opacity: 1.1;  transform: scale(1.15) translateY(-25px) skewY(0.8deg); }
}
@keyframes auroraFloat {
  0%   { transform: translate(0, 0)     rotate(0deg); }
  50%  { transform: translate(-3%, 5%)  rotate(1deg); }
  100% { transform: translate(3%, -5%)  rotate(-1deg); }
}

[data-theme="light"] .bg-glow::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% 10%, rgba(26,109,204,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(74,154,232,0.08) 0%, transparent 60%);
  opacity: 0.6;
}
[data-theme="light"] .bg-glow::after { opacity: 0.4; }

#particlesCanvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* Custom cursor — 跨模式全站生效 */
body[data-cursor="on"]          { cursor: none; }
body[data-cursor="on"] a,
body[data-cursor="on"] button   { cursor: none; }

.cursor-dot {
  width: 12px; height: 12px; background-color: var(--accent-color);
  box-shadow: 0 0 25px var(--accent-color), 0 0 15px #fff;
  position: fixed; border-radius: 50%; z-index: 10001; pointer-events: none;
  transform: translate(-50%,-50%);
  transition: width 0.2s var(--ease-smooth), height 0.2s var(--ease-smooth), background-color 0.3s var(--ease-smooth);
  mix-blend-mode: screen; will-change: left, top, width, height;
}
.cursor-outline {
  width: 45px; height: 45px; border: 2px solid var(--accent-color);
  position: fixed; border-radius: 50%; z-index: 10000; pointer-events: none;
  transform: translate(-50%,-50%);
  animation: cursorPulse 2.5s var(--ease-smooth) infinite;
  box-shadow: 0 0 15px var(--glass-border);
  transition: width 0.3s var(--ease-smooth), height 0.3s var(--ease-smooth);
  will-change: left, top, width, height, opacity, transform;
}
@keyframes cursorPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1);   opacity: 0.4; }
  50%     { transform: translate(-50%,-50%) scale(1.2); opacity: 0.7; }
}
.cursor-active .cursor-dot     { width: 20px; height: 20px; }
.cursor-active .cursor-outline { width: 60px; height: 60px; }

/* Container */
.container-visual {
  max-width: 100%; margin: 0;
  padding: 72px 24px 100px 24px; perspective: 1200px;
}

/* ── Hero ── */
.hero { text-align: center; margin-bottom: 4rem; }
.hero-sub {
  color: var(--text-sub); font-family: "Orbitron";
  letter-spacing: 2px; font-size: 1.1rem; margin-bottom: 2.5rem;
}

/* ── 資歷時間軸（一行） ── */
.career-timeline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  margin: 1.2rem auto 0;
  padding: 8px 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.8rem;
  max-width: 100%;
}
.career-item {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-sub);
  white-space: nowrap;
}
.career-item i {
  color: var(--accent-color); font-size: 0.75rem;
  opacity: 0.8;
}
.career-label { color: var(--text-sub); }
.career-years {
  font-family: "Orbitron"; font-size: 0.78rem; font-weight: 700;
  color: var(--accent-color);
}
.career-unit {
  font-family: "Orbitron"; font-size: 0.6rem;
  color: var(--text-sub); opacity: 0.7;
}
.career-dot {
  color: var(--glass-border); font-size: 1rem; line-height: 1;
  opacity: 0.6; user-select: none;
}
.avatar-visual {
  width: 140px; height: 140px; border-radius: 50%;
  border: 3px solid var(--accent-color);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 2rem;
  background: linear-gradient(135deg, #060a1e, #0f1a38);
  box-shadow: 0 0 40px rgba(0,200,255,0.4), inset 0 0 20px rgba(0,200,255,0.08);
  position: relative; z-index: 2;
  animation: avatarFloat 6s ease-in-out infinite; overflow: hidden;
}
.avatar-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes avatarFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-10px) rotate(5deg); }
}
.avatar-ring {
  position: absolute; top: -15px; left: -15px; right: -15px; bottom: -15px;
  border: 2px dashed var(--accent-color); border-radius: 50%;
  animation: spin 25s linear infinite; opacity: 0.4; z-index: -1;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Glitch name */
.glitch-name {
  font-family: "Orbitron"; font-size: 4.5rem; font-weight: 900;
  letter-spacing: 5px; color: var(--text-main);
  text-shadow: 3px 3px 0px #0055ff, -3px -3px 0px #00c8ff;
  margin-bottom: 20px; position: relative; display: inline-block;
  animation: nameGlow 3s ease-in-out infinite;
}
@keyframes nameGlow {
  0%,100% { text-shadow: 3px 3px 0px #0055ff, -3px -3px 0px #00c8ff; }
  50%     { text-shadow: 5px 5px 5px #0055ff, -5px -5px 5px #00c8ff; }
}
.glitch-name::before,
.glitch-name::after {
  content: attr(data-text); position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; opacity: 0.8; pointer-events: none;
}
.glitch-name::before { color: #0055ff; z-index: -1; animation: glitch-anim-1 2.5s infinite linear alternate-reverse; }
.glitch-name::after  { color: #00c8ff; z-index: -2; animation: glitch-anim-2 3.5s infinite linear alternate-reverse; }
@keyframes glitch-anim-1 {
  0%   { clip-path: inset(20% 0 80% 0); transform: translate(-3px,2px); }
  100% { clip-path: inset(60% 0 10% 0); transform: translate(3px,-2px); }
}
@keyframes glitch-anim-2 {
  0%   { clip-path: inset(10% 0 60% 0); transform: translate(3px,2px); }
  100% { clip-path: inset(80% 0 5% 0); transform: translate(-3px,-2px); }
}

/* Tags */
.tags { margin-bottom: 25px; }
.neon-tag {
  padding: 8px 20px; border-radius: 8px;
  border: 1.5px solid var(--accent-color); color: var(--accent-color);
  font-family: "Orbitron"; font-size: 0.8rem;
  background: rgba(0,200,255,0.05); margin: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 0 8px rgba(0,100,200,0.15);
  transition: all 0.4s var(--ease-pop);
  position: relative; overflow: hidden; text-decoration: none;
}
.neon-tag::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border-radius: 50%;
  background: var(--accent-color); transform: translate(-50%,-50%);
  transition: width 0.4s var(--ease-smooth), height 0.4s var(--ease-smooth); z-index: -1;
}
.neon-tag:hover {
  color: var(--bg-color); box-shadow: 0 0 25px var(--accent-color);
  transform: translateY(-3px) scale(1.05); border-color: transparent;
}
.neon-tag:hover::before { width: 220%; height: 220%; }

/* ── Glass panels ── */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border: 1px solid var(--glass-border); border-radius: 28px;
  padding: 2.8rem 3rem;
  margin-bottom: 3.5rem;
  position: relative; overflow: hidden;
  transition: transform 0.5s var(--ease-pop), box-shadow 0.5s var(--ease-smooth), border-color 0.4s var(--ease-smooth);
  box-shadow: var(--shadow-2), 0 0 0 0 transparent;
  opacity: 0; animation: fadeUpDecode 1s cubic-bezier(0.2,0.8,0.2,1) forwards;
}
/* 頂部光邊 */
.glass-panel::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,255,0.55), transparent);
  transition: opacity 0.4s;
}
/* 滑鼠光感 */
.glass-panel::after {
  content: ""; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  transition: left 0.7s var(--ease-smooth);
  pointer-events: none;
}
.glass-panel:hover {
  transform: translateY(-10px) rotateX(1.5deg);
  border-color: color-mix(in oklab, var(--accent-color) 60%, transparent);
  box-shadow:
    var(--shadow-2),
    0 0  0  1px color-mix(in oklab, var(--accent-color) 25%, transparent),
    0 30px 80px -20px rgba(0,100,200,0.35),
    inset 0 0 40px rgba(0,200,255,0.03);
}
.glass-panel:hover::after  { left: 100%; }
.glass-panel:nth-child(1) { animation-delay: 0.05s; }
.glass-panel:nth-child(2) { animation-delay: 0.15s; }
.glass-panel:nth-child(3) { animation-delay: 0.25s; }
.glass-panel:nth-child(4) { animation-delay: 0.35s; }
.glass-panel:nth-child(5) { animation-delay: 0.45s; }
.glass-panel:nth-child(6) { animation-delay: 0.55s; }
/* 防呆：動畫萬一沒跑，至少顯示出來 */
@media (prefers-reduced-motion: reduce) {
  .glass-panel { opacity: 1 !important; animation: none !important; }
}

@keyframes fadeUpDecode {
  0%   { opacity: 0; transform: translateY(40px) scale(0.96); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0) scale(1);       filter: blur(0); }
}

/* Section titles */
.section-title {
  font-family: "Orbitron"; font-size: 1.55rem; color: var(--text-main);
  margin-bottom: 0.6rem; display: flex; align-items: center; gap: 14px;
  font-weight: 700; text-transform: uppercase;
  text-shadow: 0 0 15px rgba(0,0,0,0.5); position: relative; z-index: 2;
  letter-spacing: 1.5px;
}
.section-title i {
  color: var(--accent-color);
  filter: drop-shadow(0 0 8px var(--accent-color));
  animation: iconFloat 3s ease-in-out infinite;
}
@keyframes iconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* 區塊 header 容器：標題 + badge + 分隔線 */
.section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--glass-border);
  flex-wrap: wrap;
  position: relative;
}
/* 分隔線底部光點 */
.section-header::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: 80px; height: 1px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
}
.section-header .section-title { margin-bottom: 0; }

/* ── Type badge ── */
.section-badge {
  font-family: "Orbitron", sans-serif;
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 2px; padding: 3px 10px;
  border-radius: 999px; border: 1px solid;
  opacity: 0.85; flex-shrink: 0; align-self: center;
}
.badge-novel { color: var(--accent-color); border-color: rgba(0,200,255,0.4); background: rgba(0,200,255,0.07); }
.badge-game  { color: #ff6b4a;            border-color: rgba(255,107,74,0.4); background: rgba(255,107,74,0.07); }

/* 無 header 容器時獨立 section-title 的間距 */
.glass-panel > .section-title:first-child {
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--glass-border);
}

/* Quotes */
.quote {
  border-left: 4px solid var(--accent-color);
  padding: 18px 30px; color: var(--text-sub); font-style: italic;
  background: linear-gradient(90deg, rgba(0,150,255,0.08), transparent);
  margin-bottom: 2rem; font-size: 1.05rem;
  position: relative; overflow: hidden; border-radius: 0 8px 8px 0;
}
.quote::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent-color), transparent); opacity: 0.5;
}

/* ══════════════════════════════════════
   統一 Section 模板
   ══════════════════════════════════════ */

/* 引言 */
.section-quote {
  border-left: 4px solid var(--accent-color);
  padding: 16px 28px; color: var(--text-sub); font-style: italic;
  background: linear-gradient(90deg, rgba(0,150,255,0.08), transparent);
  margin-bottom: 1.8rem; font-size: 1.05rem;
  position: relative; border-radius: 0 8px 8px 0; overflow: hidden;
}
.section-quote::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent-color), transparent); opacity: 0.5;
}

/* 系統提示 */
.section-sys {
  color: var(--text-sub); margin-bottom: 1.4rem; font-size: 1.05rem;
}

/* 主體：封面圖 + 文字並排 */
.section-body {
  display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.section-cover {
  flex: 0 0 auto; width: 200px;
}
.section-cover .link-card { border-radius: 14px; display: block; }
.section-info {
  flex: 1 1 280px; display: flex; flex-direction: column;
}

/* 多封面書系：三張封面並排 */
.section-body--books {
  flex-wrap: wrap; gap: 16px;
}
.section-body--books .section-cover {
  flex: 1 1 140px; max-width: 200px; min-width: 120px; width: auto;
}
.section-body--books .section-info {
  flex: 1 1 200px;
}

/* 作品標題 */
.section-title2 {
  font-size: 1.9rem; font-weight: 700;
  color: var(--text-main); margin-bottom: 6px; letter-spacing: 1px;
  position: relative; display: inline-block;
}
.section-title2::after {
  content: ""; position: absolute; bottom: -4px; left: 0;
  width: 40px; height: 2px;
  background: var(--accent-color);
  border-radius: 2px;
  transition: width 0.4s var(--ease-pop);
}
.section-info:hover .section-title2::after { width: 100%; }

/* 副標題 */
.section-sub {
  color: var(--accent-color); font-family: "Orbitron";
  font-size: 0.72rem; letter-spacing: 1.5px;
  margin: 10px 0 1.4rem; opacity: 0.85;
}
/* 描述 */
.section-desc {
  color: var(--text-sub); line-height: 2; font-size: 1rem;
  margin-bottom: 1.8rem;
}

/* 按鈕列 */
.section-actions {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-top: auto;
}

/* 圖片格（多張，grid） */
.section-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px; margin-top: 1.5rem;
  align-items: start; /* 每格各自高度，不撐齊最高者 */
}
.section-media--wide {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

/* 附加區塊（測驗等） */
.section-extra {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--glass-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.section-extra__title {
  font-family: "Orbitron"; font-size: 0.9rem;
  color: var(--accent-color);
  letter-spacing: 1px; opacity: 0.9;
  margin: 0;
}
.section-extra .section-actions {
  justify-content: center;
  margin-top: 0;
}

/* CTA 按鈕變體 */
.cta-btn--secondary {
  background: transparent;
  border-color: var(--accent-color);
  color: var(--accent-color);
  opacity: 0.75;
}
.cta-btn--secondary:hover {
  background: var(--accent-color);
  color: var(--bg-color);
  opacity: 1;
}
.cta-btn--featured {
  font-family: "Orbitron", sans-serif;
  font-weight: 700; font-size: 0.95rem;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, rgba(0,200,255,0.15), rgba(61,142,255,0.1));
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  box-shadow: 0 0 20px rgba(0,200,255,0.25), inset 0 0 12px rgba(0,200,255,0.06);
  animation: featuredPulse 3s ease-in-out infinite;
}
.cta-btn--featured:hover {
  background: var(--accent-color);
  color: #020a18;
  box-shadow: 0 0 40px rgba(0,200,255,0.55);
  transform: scale(1.05);
}
@keyframes featuredPulse {
  0%,100% { box-shadow: 0 0 12px rgba(0,200,255,0.18), inset 0 0 8px rgba(0,200,255,0.04); }
  50%     { box-shadow: 0 0 22px rgba(0,200,255,0.32), inset 0 0 12px rgba(0,200,255,0.08); }
}

/* ── Book / link cards ── */
.book-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 30px; margin-top: 35px;
}
.link-card {
  display: block; position: relative; text-decoration: none;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--glass-border);
  transition: all 0.5s var(--ease-pop);
  background: #000; box-shadow: var(--shadow-1); transform-style: preserve-3d;
}
.img-wrap { position: relative; overflow: hidden; aspect-ratio: 2 / 3; }
.img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease-pop), filter 0.7s var(--ease-smooth);
  filter: grayscale(40%) contrast(1.1) brightness(0.9);
}
.overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,200,255,0.4), rgba(61,142,255,0.4));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.5s var(--ease-smooth); backdrop-filter: blur(5px);
}
.overlay i {
  font-size: 2.5rem; color: #fff; margin-bottom: 15px;
  transform: translateY(30px) scale(0.8); transition: transform 0.5s var(--ease-pop);
  text-shadow: 0 0 20px var(--accent-color);
}
.overlay span {
  font-family: "Orbitron"; font-weight: bold; color: #fff;
  letter-spacing: 3px; transform: translateY(30px) scale(0.8);
  transition: transform 0.5s var(--ease-pop) 0.1s; font-size: 1rem;
  text-shadow: 0 0 10px rgba(0,0,0,0.8);
}
.link-card:hover {
  transform: translateY(-10px) scale(1.03) rotateY(3deg);
  border-color: var(--accent-color);
  box-shadow: 0 20px 50px rgba(0,100,200,0.3); z-index: 10;
}
.link-card:hover .img-wrap img  { transform: scale(1.15) rotate(2deg); filter: grayscale(0%) contrast(1.3) brightness(1.1); }
.link-card:hover .overlay       { opacity: 1; }
.link-card:hover .overlay i,
.link-card:hover .overlay span  { transform: translateY(0) scale(1); }

.book-label {
  background: rgba(4,8,20,0.95); color: var(--accent-color);
  padding: 15px; text-align: center; font-size: 0.9rem;
  font-family: "Orbitron"; letter-spacing: 1.5px;
  border-top: 1px solid var(--glass-border);
  position: relative; z-index: 2;
  transition: background 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth);
}
.link-card:hover .book-label { background: var(--accent-color); color: var(--bg-color); }

/* ── Novel layout ── */
.novel-layout { display: flex; gap: 50px; flex-wrap: wrap; align-items: stretch; }
.novel-cover-link {
  flex: 1 1 320px; max-width: 380px; text-decoration: none; display: block;
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--glass-border); position: relative;
  box-shadow: 0 15px 50px rgba(0,0,0,0.5); transition: all 0.5s var(--ease-pop);
}
.novel-cover-link img {
  width: 100%; display: block;
  transition: transform 0.7s var(--ease-pop), filter 0.7s var(--ease-smooth);
  filter: grayscale(20%) brightness(0.9);
}
.novel-cover-link:hover {
  transform: scale(1.03) translateY(-10px); border-color: var(--accent-color);
  box-shadow: 0 0 40px rgba(0,100,200,0.3);
}
.novel-cover-link:hover img { filter: grayscale(0%) brightness(1.1); transform: scale(1.08); }
.novel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  opacity: 0; transition: opacity 0.4s var(--ease-smooth);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 35px;
}
.novel-cover-link:hover .novel-overlay { opacity: 1; }
.novel-info { flex: 2 1 350px; display: flex; flex-direction: column; justify-content: center; }
.muted { color: var(--text-sub); margin-bottom: 1.5rem; font-size: 1.05rem; }

/* ── Game grid ── */
.game-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 30px; margin-top: 35px;
}
.game-grid .img-wrap { aspect-ratio: 16 / 9; }
.game-links-container { display: flex; gap: 15px; width: 100%; margin-bottom: 20px; }
.game-external-btn {
  flex: 1; padding: 12px; text-align: center;
  border: 2px solid var(--accent-color); color: var(--accent-color);
  text-decoration: none; font-family: 'Orbitron', sans-serif;
  font-weight: bold; transition: 0.3s; background: var(--glass-bg);
  border-radius: 8px; display: flex; justify-content: center;
  align-items: center; gap: 10px; font-size: 1.1rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
}
.game-external-btn i { font-size: 1.2rem; }
.game-external-btn:hover {
  background: var(--accent-color); color: var(--bg-color);
  box-shadow: 0 0 25px var(--accent-color); transform: translateY(-3px);
}

/* ── CTA Button ── */
.cta-btn {
  width: auto; height: auto; padding: 12px 40px; border-radius: 999px;
  text-decoration: none; display: inline-flex; align-items: center;
  justify-content: center; gap: 12px; font-size: 1rem; margin-top: 20px;
  background: var(--glass-bg); color: var(--accent-color);
  border: 2px solid var(--accent-color); backdrop-filter: blur(10px);
  transition: transform 0.4s var(--ease-pop), box-shadow 0.4s var(--ease-smooth),
              background 0.4s var(--ease-smooth), color 0.4s var(--ease-smooth);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  position: relative; overflow: hidden; cursor: pointer; z-index: 1;
}
.cta-btn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--accent-color); opacity: 0;
  transition: opacity 0.3s var(--ease-smooth); z-index: -1;
}
.cta-btn i { position: relative; z-index: 2; transition: transform 0.4s var(--ease-pop), color 0.4s var(--ease-smooth); }
.cta-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px color-mix(in oklab, var(--accent-color) 70%, transparent);
  color: var(--bg-color);
}
.cta-btn:hover::before { opacity: 1; }
.cta-btn:hover i       { color: var(--bg-color); }

/* ── Footer ── */
.footer-visual {
  text-align: center; margin-top: 6rem; padding-top: 3rem;
  border-top: 1px solid var(--glass-border);
  color: var(--text-sub); font-size: 0.85rem; font-family: "Orbitron";
}

/* Misc animations */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.puzzle-input.shake { animation: shake 0.4s var(--ease-smooth); }

@media (pointer: coarse) {
  .cursor-dot, .cursor-outline { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  /* 只停用裝飾性動畫，保留 modal/overlay 的 transition 以免跳現 */
  .bg-glow,
  .avatar-visual,
  .avatar-ring,
  .glitch-name,
  .glitch-name::before,
  .glitch-name::after,
  .section-title i,
  .cursor-outline,
  .spoiler-icon {
    animation: none !important;
  }
  .glass-panel,
  .link-card,
  .neon-tag,
  .bubble-link,
  .control-btn,
  .lag-img-main,
  .lag-img-small,
  .novel-cover-link {
    transition: none !important;
  }
  .scan-lines { opacity: 0.12; }
  html { scroll-behavior: auto !important; }
}

/* ══════════════════════════════════════
   Section Template — 統一區塊模板
   新增區塊只需複製 glass-panel 結構
   ══════════════════════════════════════ */

/* ── 區塊 header：標題 + badge + 底部分隔線 ── */
.section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--glass-border);
  flex-wrap: wrap;
  position: relative;
}
/* 分隔線左側亮點 */
.section-header::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: 80px; height: 1px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
}
.section-header .section-title { margin-bottom: 0; }

/* 無 header 容器時，獨立 section-title 也有分隔線 */
.glass-panel > .section-title:first-child {
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}
.glass-panel > .section-title:first-child::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: 80px; height: 1px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
}

/* ── Type badge ── */
.section-badge {
  font-family: "Orbitron", sans-serif;
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 2px; padding: 3px 10px;
  border-radius: 999px; border: 1px solid;
  opacity: 0.85; flex-shrink: 0; align-self: center;
}
.badge-novel { color: var(--accent-color); border-color: rgba(0,200,255,0.4); background: rgba(0,200,255,0.07); }
.badge-game  { color: #ff6b4a;            border-color: rgba(255,107,74,0.4); background: rgba(255,107,74,0.07); }
.badge-music { color: #a855f7;            border-color: rgba(168,85,247,0.4); background: rgba(168,85,247,0.07); }

/* ── 引言 ── */
.section-quote {
  border-left: 3px solid var(--accent-color);
  padding: 14px 22px;
  color: var(--text-sub);
  font-style: italic;
  background: linear-gradient(90deg, rgba(0,150,255,0.07), transparent);
  margin-bottom: 1.5rem;
  font-size: 1.02rem;
  line-height: 1.9;
  border-radius: 0 10px 10px 0;
  position: relative;
  box-shadow: inset 2px 0 8px rgba(0,200,255,0.05);
}
.section-quote::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
  opacity: 0.35;
}

/* ── 系統提示 ── */
.section-sys {
  color: var(--text-sub);
  font-size: 0.92rem;
  margin-bottom: 1.2rem;
  opacity: 0.85;
}
.section-sys--warn { color: var(--accent-color); font-size: 1rem; }

/* ── 主體內容 ── */
.section-body { margin-bottom: 0; }

/* 封面 + 文字並排版型 */
.section-body--cover {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.section-cover {
  flex: 0 0 auto;
  width: 220px;
  border-radius: 14px;
  overflow: hidden;
  display: block;
}
.section-info {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
}
.section-booktitle {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
  letter-spacing: 1.5px;
}
.section-subtitle {
  color: var(--accent-color);
  font-family: "Orbitron", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  margin-bottom: 1.2rem;
  opacity: 0.85;
}
.section-desc {
  color: var(--text-sub);
  line-height: 2.1;
  font-size: 1rem;
  margin-bottom: 1.6rem;
  font-style: italic;
}

/* ── 按鈕列 ── */
.section-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* 次要按鈕 */
.cta-btn--secondary {
  background: transparent;
  border-color: rgba(0,200,255,0.35);
  color: var(--text-sub);
  font-size: 0.88rem;
  padding: 10px 22px;
}
.cta-btn--secondary:hover {
  background: rgba(0,200,255,0.08);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

/* 主要發光按鈕 */
.cta-btn--featured {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, rgba(0,200,255,0.15), rgba(61,142,255,0.1));
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  box-shadow: 0 0 20px rgba(0,200,255,0.22), inset 0 0 12px rgba(0,200,255,0.05);
  animation: featuredPulse 3s ease-in-out infinite;
}
.cta-btn--featured:hover {
  background: var(--accent-color);
  color: #020a18;
  box-shadow: 0 0 40px rgba(0,200,255,0.5);
  transform: scale(1.05);
}
@keyframes featuredPulse {
  0%,100% { box-shadow: 0 0 18px rgba(0,200,255,0.2),  inset 0 0 10px rgba(0,200,255,0.04); }
  50%     { box-shadow: 0 0 32px rgba(0,200,255,0.38), inset 0 0 16px rgba(0,200,255,0.09); }
}

/* LINE 貼圖按鈕 */
.cta-btn--line {
  background: linear-gradient(135deg, rgba(0,195,76,0.18), rgba(0,195,76,0.08));
  border: 2px solid #00c34c;
  color: #00c34c;
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: 1.2px;
  box-shadow: 0 0 16px rgba(0,195,76,0.2);
}
.cta-btn--line:hover {
  background: #00c34c;
  color: #fff;
  box-shadow: 0 0 36px rgba(0,195,76,0.5);
  transform: scale(1.05);
}
.cta-btn--line::before { background: #00c34c; }
.cta-btn--line i { color: #00c34c; }
.cta-btn--line:hover i { color: #fff; }
[data-theme="light"] .cta-btn--line { background: rgba(0,180,60,0.08); }

/* ── 附加區塊（測驗、貼圖等）── 向下出血到 panel 底部 */
.section-extra {
  margin-top: 2rem;
  padding: 1.8rem 3rem;
  border-top: 1px dashed var(--glass-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(0,200,255,0.025) 0%, rgba(0,200,255,0.05) 100%);
  margin-left: -3rem; margin-right: -3rem; margin-bottom: -2.8rem;
  border-radius: 0 0 26px 26px;
}
.section-extra__title {
  font-family: "Orbitron"; font-size: 0.88rem;
  color: var(--accent-color); letter-spacing: 1.5px; opacity: 0.9; margin: 0;
}
.section-extra .section-actions { justify-content: center; margin-top: 0; }

/* ── 舊版 section-footer 對齊 section-extra ── */
.section-footer {
  margin-top: 2rem;
  padding: 1.8rem 3rem;
  border-top: 1px dashed var(--glass-border);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(0,200,255,0.025) 0%, rgba(0,200,255,0.05) 100%);
  margin-left: -3rem; margin-right: -3rem; margin-bottom: -2.8rem;
  border-radius: 0 0 26px 26px;
}
.section-footer-title {
  font-family: "Orbitron", sans-serif;
  font-size: 0.88rem;
  color: var(--accent-color);
  letter-spacing: 1.5px;
  opacity: 0.9;
}
.section-footer .section-actions { justify-content: center; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .section-body--cover { flex-direction: column; gap: 20px; }
  .section-cover { width: 100%; }
  .section-booktitle { font-size: 1.7rem; }
  .section-actions { flex-direction: column; align-items: stretch; }
  .section-actions .cta-btn { justify-content: center; }
  .section-extra,
  .section-footer {
    margin-left: -1.6rem; margin-right: -1.6rem; margin-bottom: -1.6rem;
    padding-left: 1.6rem; padding-right: 1.6rem;
  }
}

/* ══════════════════════════════════════
   hero-quicknav — 精簡導航
   ══════════════════════════════════════ */
.hero-quicknav {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 6px 10px;
  margin: 1rem auto 0.6rem;
  font-size: 0.82rem;
  width: 100%;
}
.hero-qlink {
  color: var(--accent-color); text-decoration: none;
  font-weight: 600; letter-spacing: 0.5px;
  transition: opacity 0.2s;
  display: inline-flex; align-items: center; gap: 4px;
}
.hero-qlink:hover { opacity: 0.7; }
.hero-qlink i { font-size: 0.75rem; }
.hero-qdot { color: var(--glass-border); opacity: 0.6; font-size: 0.9rem; }

/* ══════════════════════════════════════
   hero-meta — 個人資訊整合膠囊
   ══════════════════════════════════════ */
.hero-meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 5px 8px;
  margin: 0.4rem auto 0;
  padding: 6px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.76rem; max-width: fit-content;
  width: auto;
}
.hero-meta-tag { color: var(--text-sub); white-space: nowrap; }
.hero-meta-sep { color: var(--glass-border); opacity: 0.5; font-size: 0.85rem; padding: 0 2px; }
.hero-meta-career {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--text-sub); white-space: nowrap;
}
.hero-meta-career i { color: var(--accent-color); font-size: 0.7rem; opacity: 0.8; }
.hero-meta-career .career-years {
  font-family: "Orbitron"; font-size: 0.76rem; font-weight: 700;
  color: var(--accent-color);
}

/* ══════════════════════════════════════
   占卜台
   ══════════════════════════════════════ */
.divination-panel {
  margin-bottom: 3rem;
  padding: 1.6rem 2rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  animation: fadeUpDecode 0.8s cubic-bezier(0.2,0.8,0.2,1) 0.05s both;
}
.divination-panel::before {
  content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
  opacity: 0.5;
}
.divination-eyebrow {
  font-family: "Orbitron"; font-size: 0.6rem;
  letter-spacing: 3px; color: var(--accent-color); opacity: 0.7;
}
.divination-body {
  display: flex; align-items: center; gap: 2rem;
  width: 100%; max-width: 560px;
}
.divination-left {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex-shrink: 0;
}
.divination-symbol {
  font-size: 2.8rem; line-height: 1;
  filter: drop-shadow(0 0 10px var(--accent-color));
  animation: divFloat 4s ease-in-out infinite;
}
@keyframes divFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}
.divination-luck {
  font-family: "Orbitron"; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 2px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;
}
.divination-luck.luck-大吉 { color: #ffd700; background: rgba(255,215,0,0.1); }
.divination-luck.luck-小吉 { color: #00e0a0; background: rgba(0,224,160,0.1); }
.divination-luck.luck-平   { color: var(--accent-color); background: rgba(0,200,255,0.08); }
.divination-luck.luck-凶   { color: #ff6b4a; background: rgba(255,107,74,0.1); }
.divination-luck.luck-小凶 { color: #ff9a6c; background: rgba(255,107,74,0.1); }
.divination-luck.luck-小凶 { color: #ff9a3c; background: rgba(255,154,60,0.1); }
.divination-right { text-align: left; flex: 1; }
.divination-name {
  font-family: "Orbitron"; font-size: 0.95rem; font-weight: 700;
  color: var(--text-main); letter-spacing: 2px; margin-bottom: 0.5rem;
}
.divination-text {
  color: var(--text-sub); font-size: 0.9rem; line-height: 1.9; margin: 0; font-style: italic;
}
.divination-date { display: none; }
/* ══════════════════════════════════════
   攻受投票長條圖
   ══════════════════════════════════════ */
.vote-bar-panel {
  margin-bottom: 1.2rem;
  padding: 1rem 1.4rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  backdrop-filter: blur(10px);
}
.vote-bar-title {
  font-family: "Orbitron"; font-size: 0.62rem;
  letter-spacing: 2px; color: var(--accent-color);
  opacity: 0.8; margin-bottom: 0.8rem;
}
.vote-bar-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 0.5rem;
}
.vote-bar-row:last-child { margin-bottom: 0; }
.vote-bar-label {
  font-size: 0.72rem; color: var(--text-sub);
  white-space: nowrap; width: 140px; flex-shrink: 0;
  text-align: right;
}
.vote-bar-track {
  flex: 1; height: 8px; background: rgba(255,255,255,0.06);
  border-radius: 999px; overflow: hidden; min-width: 0;
}
.vote-bar-fill {
  height: 100%; border-radius: 999px; width: 0%;
  transition: width 1s var(--ease-smooth);
}
.vote-bar--deer   { background: linear-gradient(90deg, #00c8ff, #3d8eff); }
.vote-bar--lion   { background: linear-gradient(90deg, #00c8ff, #3d8eff); }
.vote-bar--switch { background: linear-gradient(90deg, #00c8ff, #3d8eff); }
.vote-bar-pct {
  font-family: "Orbitron"; font-size: 0.65rem;
  color: var(--text-sub); width: 40px; flex-shrink: 0; text-align: right;
}