/* common.css — 冥王星伺服器 共用樣式 */
:root{
  --void:#090d0c; --marsh:#101a17; --card:#14211d; --bone:#e7e2d3;
  --sage:#8098a0; --sage-dim:#526258; --gold:#b8935a; --gold-bright:#d9b787;
  --line: rgba(184,147,90,0.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--void);color:var(--bone);font-family:'Noto Sans TC',sans-serif;font-weight:300;overflow-x:hidden;position:relative;min-height:100vh;}

.fog-layer{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(ellipse 60% 40% at 20% 20%, rgba(23,60,52,.5), transparent 60%),
              radial-gradient(ellipse 50% 35% at 80% 30%, rgba(30,45,70,.4), transparent 60%);
  animation:drift 26s ease-in-out infinite alternate;}
@keyframes drift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-3%,2%) scale(1.08);}}

.crystal-layer{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.2; }
.crystal-layer svg{ position:absolute; }
.crystal-layer .c1{ top:6%; left:4%; width:180px; animation: crystalPulse 9s ease-in-out infinite; }
.crystal-layer .c2{ top:38%; right:6%; width:150px; animation: crystalPulse 11s ease-in-out infinite 1.5s; }
.crystal-layer .c3{ bottom:10%; left:10%; width:130px; animation: crystalPulse 8s ease-in-out infinite .8s; }
.crystal-layer .c4{ top:65%; right:16%; width:100px; animation: crystalPulse 10s ease-in-out infinite 2.4s; }
@keyframes crystalPulse{ 0%,100%{ opacity:.35; } 50%{ opacity:.75; } }

.mushroom-deco{ position:fixed; right:2vw; bottom:6vh; width:200px; opacity:.16; z-index:1; pointer-events:none; }
@media(max-width:700px){ .mushroom-deco{ width:120px; right:-10px; } }

/* 音樂播放按鈕 */
.music-toggle{ width:64px; height:64px; border-radius:50%; border:2px solid var(--gold); background:rgba(20,33,29,.75); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.35s; flex-shrink:0; box-shadow:0 0 16px rgba(217,183,135,.4); animation: musicPulseIdle 2s ease-in-out infinite; }
.music-toggle:hover{ box-shadow:0 0 26px rgba(217,183,135,.7); transform:scale(1.08); }
.music-toggle svg{ width:28px; height:28px; transition:transform .3s; }
.music-toggle.playing{ animation: musicGlow 1.8s ease-in-out infinite; }
.music-toggle.playing svg{ animation: spinRecord 3s linear infinite; }
@keyframes musicPulseIdle{ 0%,100%{ transform:scale(1); box-shadow:0 0 12px rgba(217,183,135,.35); } 50%{ transform:scale(1.12); box-shadow:0 0 28px rgba(217,183,135,.75); } }
@keyframes musicGlow{ 0%,100%{ box-shadow:0 0 16px rgba(217,183,135,.5); transform:scale(1); } 50%{ box-shadow:0 0 34px rgba(217,183,135,.9); transform:scale(1.1); } }
@keyframes spinRecord{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* 燈箱(圖片放大) */
.lightbox-backdrop{ position:fixed; inset:0; background:rgba(9,13,12,.94); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; pointer-events:none; transition:opacity .35s ease; cursor:zoom-out; }
.lightbox-backdrop.open{ opacity:1; pointer-events:auto; }
.lightbox-backdrop img{ max-width:92vw; max-height:92vh; object-fit:contain; box-shadow:0 30px 90px -20px rgba(0,0,0,.8); }

/* 18+ 年齡確認彈窗 */
.age-gate{ position:fixed; inset:0; background:rgba(9,13,12,.97); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; z-index:500; text-align:center; padding:6vw; }
.age-gate-box{ max-width:420px; }
.age-gate-mark{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.3em; color:var(--gold); margin-bottom:18px; }
.age-gate-title{ font-family:'Cormorant Garamond','Noto Serif TC',serif; font-style:italic; font-weight:600; font-size:30px; color:var(--gold-bright); margin-bottom:16px; }
.age-gate-desc{ color:var(--sage); font-size:13px; line-height:1.9; margin-bottom:34px; }
.age-gate-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.age-gate-yes{ background:rgba(184,147,90,.15); border:1px solid var(--gold); color:var(--gold-bright); padding:13px 28px; border-radius:3px; font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.08em; cursor:pointer; transition:.3s; }
.age-gate-yes:hover{ background:rgba(184,147,90,.28); }
.age-gate-no{ background:none; border:1px solid var(--line); color:var(--sage); padding:13px 28px; border-radius:3px; font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.08em; cursor:pointer; transition:.3s; }
.age-gate-no:hover{ border-color:var(--sage); }

/* 私人房門 */
.private-door-wrap{ text-align:center; }
.private-door{ width:140px; height:190px; margin:0 auto 18px; border:1px solid var(--line); border-radius:6px 6px 3px 3px; background-color:#101a17; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.4s; }
.private-door:hover{ border-color:var(--gold); box-shadow:0 20px 50px -18px rgba(184,147,90,.35); transform:translateY(-4px); }
.private-door:not(.has-photo){ background-image:none; }
.private-door-label{ font-family:'Cormorant Garamond','Noto Serif TC',serif; font-style:italic; color:var(--gold-bright); font-size:20px; }
.private-door-hint{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--sage-dim); letter-spacing:.15em; margin-top:6px; }

section, header, footer{position:relative; z-index:2;}

/* 頂欄(子頁面用) */
.topbar{ position:relative; z-index:3; padding:22px 6vw; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.back{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.15em; color:var(--sage); text-decoration:none; }
.back:hover{ color:var(--gold-bright); }
.logo{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; color:var(--gold-bright); text-decoration:none; }

/* 橫幅 */
.banner{
  height:44vh; min-height:280px; position:fixed; top:0; left:0; right:0; z-index:0;
  display:flex; align-items:flex-end; justify-content:center; text-align:center;
  background-image: linear-gradient(to top, rgba(9,13,12,.92) 0%, rgba(9,13,12,.35) 45%, rgba(9,13,12,.15) 100%), url('assets/banner.png');
  background-size:cover; background-position:center 30%; border-bottom:1px solid var(--line); overflow:hidden;
}
.page-content{ position:relative; z-index:5; background:var(--void); margin-top:44vh; }
@media(max-width:700px){
  .banner{ position:relative; height:36vh; min-height:220px; }
  .page-content{ margin-top:0; }
}
.banner-inner{position:relative;z-index:2; padding-bottom:34px;}
.banner-tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.35em;color:var(--sage-dim);margin-bottom:12px;}
.banner h1{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:clamp(30px,5.5vw,54px);color:var(--gold-bright);}
.banner p{margin-top:8px;font-size:12px;color:var(--sage);font-family:'JetBrains Mono',monospace;letter-spacing:.1em;}
.pet-rest-dock{ position:absolute; bottom:6px; left:0; right:0; height:0; z-index:5; pointer-events:none;}

/* 自介 + OC */
.intro{ padding:52px 6vw 20px; border-bottom:1px solid var(--line); }
.intro-inner{ max-width:1080px; margin:0 auto; display:flex; flex-wrap:wrap; gap:36px; align-items:flex-start; justify-content:space-between; }
.intro-bio{ flex:1 1 380px; }
.intro-bio .eyebrow{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.3em;color:var(--gold);margin-bottom:10px;}
.intro-bio p{ color:var(--sage); font-size:13.5px; line-height:1.9; max-width:460px; margin-bottom:20px; }
.oc-inline-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.oc-inline-label{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.15em; color:var(--sage-dim); margin-right:2px; }
.oc-orb{ text-align:center; cursor:pointer; }
.oc-frame{ width:74px; height:74px; border-radius:50%; overflow:hidden; position:relative; border:2px solid var(--line); transition:.5s cubic-bezier(.2,.8,.2,1); background-color:#1c2e2a; background-image:linear-gradient(150deg,#1c2e2a,#0d1512); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.oc-orb:hover .oc-frame{ border-color:var(--gold); transform:translateY(-4px) scale(1.08); box-shadow:0 10px 26px -10px rgba(184,147,90,.45); }
.oc-frame span{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:8px; color:var(--sage-dim); }

.quick-nav{ display:flex; flex-wrap:wrap; gap:12px; }
.quick-nav a{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--bone); border:1px solid var(--line); padding:10px 18px; border-radius:2px; text-decoration:none; transition:.35s; white-space:nowrap; }
.quick-nav a:hover{ border-color:var(--gold); color:var(--gold-bright); background:rgba(184,147,90,.06); }

.divider{ display:flex; align-items:center; gap:18px; max-width:1080px; margin:0 auto; padding:0 6vw; opacity:.7; }
.divider .ln{ flex:1; height:1px; background:linear-gradient(to right, transparent, var(--line) 30%, var(--line) 70%, transparent); }
.divider .mark{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--sage-dim); font-size:13px; letter-spacing:.2em; }

.wrap{ max-width:1200px; margin:0 auto; padding:56px 6vw 20px; }
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;color:var(--gold);display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--gold);}
.section-title{font-family:'Cormorant Garamond','Noto Serif TC',serif;font-weight:600;font-size:clamp(26px,4vw,40px);margin-bottom:6px;}
.section-head-row{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px; }
.see-more{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--gold); text-decoration:none; }
.see-more:hover{ color:var(--gold-bright); }
.section-desc{color:var(--sage);max-width:560px;line-height:1.85;font-size:13.5px;margin-bottom:34px;}

/* 本月活動角色 */
.event-section{ background:linear-gradient(160deg, rgba(122,44,58,.10), rgba(16,26,23,0) 60%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.event-badge{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.25em; color:#d98fa0; border:1px solid rgba(217,143,160,.35); padding:6px 14px; border-radius:20px; margin-bottom:14px; }
.event-badge .dot{ width:6px; height:6px; border-radius:50%; background:#d98fa0; }
.event-card{ width:min(80vw,300px); border:1px solid rgba(217,143,160,.25); border-radius:3px; padding:26px 24px; background:linear-gradient(160deg, rgba(122,44,58,.14), var(--card)); text-decoration:none; display:block; color:inherit; }
.event-card h3{ font-family:'Noto Serif TC',serif; font-weight:700; font-size:17px; color:#e8b9c4; margin-bottom:8px; }
.event-card p{ color:var(--sage); font-size:12px; line-height:1.8; margin-bottom:14px; }
.event-card .ev-cta{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#e8b9c4; letter-spacing:.1em; }

.hscroll{ display:flex; gap:20px; overflow-x:auto; padding:6px 6vw 26px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.hscroll > *{ scroll-snap-align:start; flex-shrink:0; }
.hscroll::-webkit-scrollbar{ height:5px; }
.hscroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }

.world-card{ width:min(78vw,320px); border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--card); text-decoration:none; display:block; color:inherit; transition:.4s; }
.world-card:hover{ transform:translateY(-6px); box-shadow:0 20px 50px -18px rgba(23,60,52,.7),0 0 0 1px var(--gold); border-color:var(--gold); }
.world-card-img{ height:150px; background:linear-gradient(150deg,#1c2e2a,#0d1512); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.world-card-img span{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:11px; color:var(--sage-dim); }
.world-card-body{ padding:16px 18px 18px; }
.world-card-body h3{ font-family:'Noto Serif TC',serif; font-weight:700; font-size:17px; color:var(--gold-bright); }
.world-card h3{font-family:'Noto Serif TC',serif;font-weight:700;font-size:20px;color:var(--gold-bright);margin-bottom:10px;}
.world-card p{color:var(--sage);font-size:12.5px;line-height:1.8;}
.world-meta{display:flex;gap:16px;margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--sage-dim);flex-wrap:wrap;}

.char-card{ width:200px; border-radius:4px; overflow:hidden; border:1px solid var(--line); background:var(--card); text-decoration:none; display:block; color:inherit;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s; }
.char-card:hover{ transform:translateY(-6px); box-shadow:0 20px 50px -18px rgba(23,60,52,.7),0 0 0 1px var(--gold); border-color:var(--gold); }
.char-img{ height:200px; background:linear-gradient(150deg,#1c2e2a,#0d1512); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.char-img span{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:11px; color:var(--sage-dim); }
.char-body{ padding:14px 16px 18px; }
.char-tag{ font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--sage-dim); letter-spacing:.13em; display:block; margin-bottom:6px; }
.char-name{ font-family:'Noto Serif TC',serif; font-weight:700; font-size:16px; margin-bottom:6px; }
.char-desc{ color:var(--sage); font-size:11px; line-height:1.7; }

.novel-panel{ border:1px solid var(--line); border-radius:3px; background:linear-gradient(160deg,var(--marsh),var(--card)); padding:34px 32px; min-height:160px; }
.novel-panel .fname{ font-family:'Noto Serif TC',serif; font-weight:700; font-size:19px; color:var(--gold-bright); margin-bottom:16px; }
.typewriter{ font-family:'Cormorant Garamond','Noto Serif TC',serif; font-size:16.5px; line-height:2.05; color:#d8d3c4; white-space:pre-wrap; }
.cursor{ display:inline-block; width:2px; height:1em; background:var(--gold-bright); margin-left:2px; vertical-align:-2px; animation:blink 1s step-end infinite; }
@keyframes blink{50%{opacity:0;}}

.novel-card{ border:1px solid var(--line); border-radius:3px; background:linear-gradient(160deg,var(--marsh),var(--card)); padding:22px 20px; text-decoration:none; color:inherit; display:block; transition:.35s; }
.novel-card:hover{ border-color:var(--gold); transform:translateY(-4px); }
.novel-status{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.15em; color:var(--gold); margin-bottom:10px; }
.novel-title{ font-family:'Noto Serif TC',serif; font-weight:700; font-size:17px; margin-bottom:8px; }
.novel-desc{ color:var(--sage); font-size:11.5px; line-height:1.75; }

.frag-card{ width:min(78vw,270px); border:1px solid var(--line); border-left:2px solid var(--gold); border-radius:2px; padding:20px 20px 20px 18px; background:linear-gradient(160deg,var(--marsh),var(--card)); text-decoration:none; color:inherit; display:block; transition:.35s; position:relative; }
.frag-card:hover{ border-color:var(--gold); transform:translateX(4px); }
.frag-card::before{ content:'✦'; position:absolute; top:18px; right:18px; color:var(--sage-dim); font-size:11px; opacity:.5; }
.frag-tag{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.15em; color:var(--gold); display:block; margin-bottom:8px; }
.frag-char{ font-family:'Noto Serif TC',serif; font-weight:700; font-size:14px; color:var(--bone); margin-bottom:4px; }
.frag-title{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold-bright); font-size:14px; margin-bottom:8px; }
.frag-desc{ color:var(--sage); font-size:11px; line-height:1.7; }

footer{ padding:44px 6vw; text-align:center; color:var(--sage-dim); font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em; border-top:1px solid var(--line); }

.loading-msg{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--sage-dim); padding:20px 0; }
.error-msg{ font-family:'JetBrains Mono',monospace; font-size:11px; color:#c9737f; padding:16px 18px; border:1px solid rgba(122,44,58,.4); background:rgba(122,44,58,.08); border-radius:3px; }

.pet{ position:fixed; z-index:40; pointer-events:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.pet.roam{ transition: left 3.5s linear, top 3.5s linear, transform .4s ease; z-index:40; }
.pet.resting{ animation: breathe 3s ease-in-out infinite; z-index:1; }
@keyframes breathe{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-2px) scale(1.03); } }

/* 塔羅牌展開 */
.tarot-backdrop{ position:fixed; inset:0; background:rgba(9,13,12,.88); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:100; opacity:0; pointer-events:none; transition:opacity .4s ease; }
.tarot-backdrop.open{ opacity:1; pointer-events:auto; }
.tarot-card{ width:min(90vw,340px); background:linear-gradient(165deg,var(--marsh),var(--card)); border:1px solid var(--gold); border-radius:8px; overflow:hidden; transform:rotateY(90deg) scale(.9); transition:transform .55s cubic-bezier(.34,1.56,.64,1); box-shadow:0 30px 80px -20px rgba(0,0,0,.7); position:relative; }
.tarot-backdrop.open .tarot-card{ transform:rotateY(0deg) scale(1); }
.tarot-img{ height:250px; background-color:#0d1512; background-image:linear-gradient(150deg,#1c2e2a,#0d1512); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--gold); }
.tarot-img.has-photo{ background-size:contain; background-repeat:no-repeat; }
.tarot-img span{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--sage-dim); font-size:13px; }
.tarot-body{ padding:24px 26px 30px; }
.tarot-name{ font-family:'Cormorant Garamond','Noto Serif TC',serif; font-style:italic; font-weight:600; font-size:24px; color:var(--gold-bright); text-align:center; margin-bottom:6px; }
.tarot-sub{ text-align:center; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em; color:var(--sage-dim); margin-bottom:18px; }
.tarot-desc{ font-size:12.5px; color:var(--sage); line-height:1.85; text-align:center; }
.tarot-close{ position:absolute; top:16px; right:18px; color:var(--sage); font-family:'JetBrains Mono',monospace; font-size:18px; cursor:pointer; z-index:5; }

/* 角色細節頁專用 */
.file-hero{ position:relative; z-index:2; display:grid; grid-template-columns: 300px 1fr; gap:0; border-bottom:1px solid var(--line); }
@media(max-width:780px){ .file-hero{ grid-template-columns:1fr; } }
.file-img{ height:400px; background:linear-gradient(150deg,#1c2e2a,#0d1512) center/cover; display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid var(--line); position:relative; }
.file-img span{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--sage-dim); }
.thumb-row{ position:absolute; bottom:14px; left:14px; right:14px; display:flex; gap:8px; }
.thumb{ flex:1; height:44px; border:1px solid var(--line); border-radius:2px; background-size:cover; background-position:center; background-color:rgba(20,33,29,.7); cursor:pointer; transition:.3s; }
.thumb:hover, .thumb.active{ border-color:var(--gold); }
.file-main{ padding:40px 5vw; }
.file-tag{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.25em; color:var(--gold); margin-bottom:14px; }
.file-name{ font-family:'Cormorant Garamond','Noto Serif TC',serif; font-weight:600; font-size:clamp(34px,5vw,52px); color:var(--bone); margin-bottom:6px; }
.nickname{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--sage-dim); letter-spacing:.1em; margin-bottom:4px; }
.file-alias{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--sage); font-size:15px; margin-bottom:16px; }
.tags{ display:flex; gap:10px; flex-wrap:wrap; }
.tag{ border:1px solid var(--line); padding:7px 16px; border-radius:20px; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--sage); }
.trope-tag{ border:1px solid rgba(184,147,90,.4); background:rgba(184,147,90,.08); padding:7px 16px; border-radius:20px; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--gold-bright); }
.stat-row{ display:flex; gap:24px; flex-wrap:wrap; font-family:'JetBrains Mono',monospace; font-size:13.5px; color:var(--sage-dim); margin:16px 0; }
.stat-row b{ color:var(--bone); font-weight:500; font-size:14px; }
.notice{ margin-top:16px; border:1px solid rgba(122,44,58,.4); background:rgba(122,44,58,.08); border-radius:3px; padding:14px 18px; display:flex; gap:12px; align-items:flex-start; }
.notice .n-mark{ font-family:'JetBrains Mono',monospace; font-size:11px; color:#c9737f; letter-spacing:.1em; flex-shrink:0; }
.notice p{ color:#d8a8ae; font-size:12px; line-height:1.75; }

.block{ max-width:900px; margin:0 auto; padding:0 6vw; margin-bottom:44px; }
.block h3{ font-family:'Noto Serif TC',serif; font-weight:700; font-size:18px; color:var(--gold-bright); margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.block h3::before{ content:''; width:20px; height:1px; background:var(--gold); }
.block p{ color:#d8d3c4; font-size:14px; line-height:1.95; font-family:'Cormorant Garamond','Noto Serif TC',serif; white-space:pre-wrap; }

.play-links{ display:flex; gap:12px; flex-wrap:wrap; }
.play-link{ display:flex; align-items:center; gap:10px; padding:12px 18px; border:1px solid var(--line); border-radius:3px; text-decoration:none; transition:.35s; }
.play-link:hover{ border-color:var(--gold); background:rgba(184,147,90,.06); transform:translateY(-2px); }
.play-link .pl-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.play-link span{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.08em; color:var(--bone); }

.event-list{ display:flex; flex-direction:column; }
.event-item{ display:flex; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); }
.event-item:last-child{ border-bottom:none; }
.event-tag{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--gold); letter-spacing:.1em; flex-shrink:0; width:80px; padding-top:2px; }
.event-body .event-title{ font-family:'Noto Serif TC',serif; color:var(--bone); font-size:14px; margin-bottom:4px; }
.event-body .event-desc{ color:var(--sage); font-size:12px; line-height:1.8; }

.related-novels{ display:flex; gap:14px; flex-wrap:wrap; }
.rn-card{ border:1px solid var(--line); border-radius:3px; padding:14px 16px; width:190px; background:var(--card); transition:.35s; text-decoration:none; color:inherit; }
.rn-card:hover{ border-color:var(--gold); transform:translateY(-3px); }
.rn-title{ font-family:'Noto Serif TC',serif; color:var(--bone); font-size:13px; margin-bottom:4px; }
.rn-meta{ font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--sage-dim); }

/* 目錄頁 */
.filters{ position:relative; z-index:2; max-width:1200px; margin:24px auto 0; padding:0 6vw; display:flex; gap:10px; flex-wrap:wrap; }
.chip{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; color:var(--sage); border:1px solid var(--line); padding:8px 16px; border-radius:20px; transition:.3s; cursor:pointer; background:none; }
.chip.active{ color:var(--gold-bright); border-color:var(--gold); background:rgba(184,147,90,.08); }
.grid{ position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:36px 6vw 80px; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; }
@media(max-width:520px){
  .grid{ grid-template-columns:repeat(2,1fr); gap:12px; padding:24px 4vw 60px; }
  .char-img{ height:150px; }
  .char-body{ padding:12px 12px 14px; }
  .char-name{ font-size:14px; }
  .char-desc{ font-size:10px; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
}
.grid-novels{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }