/* ============================================================
   超兽武装 Ultra Beast Force —— 浅色科幻主题
   ============================================================ */
:root{
  --bg:#f4f7fb;
  --bg2:#eaf1f7;
  --panel:rgba(255,255,255,.82);
  --panel-solid:#ffffff;
  --line:rgba(37,77,108,.14);
  --line-strong:rgba(20,117,157,.38);
  --text:#183247;
  --muted:#62788b;
  --cyan:#087f9f;
  --blue:#3868b8;
  --red:#c9544b;
  --gold:#a87418;
  --purple:#7653ad;
  --pink:#c15d8e;
  --radius:16px;
  --font:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans SC",sans-serif;
  color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(63,216,255,.28)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:var(--font)}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#e9f0f5}
::-webkit-scrollbar-thumb{background:#b6c9d5;border-radius:6px;border:2px solid #e9f0f5}
::-webkit-scrollbar-thumb:hover{background:#91adbd}

/* ---------- 全局背景网格 & 星云 ---------- */
.bg-fx{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1000px 520px at 85% -10%, rgba(122,60,255,.14), transparent 60%),
    radial-gradient(900px 600px at -10% 25%, rgba(0,140,255,.10), transparent 60%),
    radial-gradient(700px 500px at 60% 110%, rgba(255,80,50,.08), transparent 60%),
    var(--bg);
}
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(80,140,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80,140,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, #000 30%, transparent 75%);
}

/* ---------- 顶部导航 ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,4vw,48px);height:64px;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px;letter-spacing:2px}
.nav-logo .mark{width:34px;height:34px;flex:none}
.nav-logo small{display:block;font-size:9px;letter-spacing:3.5px;color:var(--muted);font-weight:400;margin-top:1px}
.nav-links{display:flex;gap:4px;list-style:none}
.nav-links a{position:relative;display:block;padding:8px 14px;font-size:14.5px;color:var(--muted);letter-spacing:1px;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{text-shadow:0 0 14px rgba(63,216,255,.55)}
.nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:8px;
  width:40px;height:36px;cursor:pointer;color:var(--cyan);font-size:18px;line-height:1}

/* ---------- 页面通用 ---------- */
.page{max-width:1240px;margin:0 auto;padding:110px clamp(16px,4vw,40px) 60px}
.page-head{margin-bottom:38px}
.crumb{font-size:12.5px;color:var(--muted);letter-spacing:2px;margin-bottom:10px}
.crumb b{color:var(--cyan);font-weight:600}
h1.page-title{font-size:clamp(30px,4.5vw,46px);font-weight:800;letter-spacing:4px;line-height:1.25}
h1.page-title .en{display:block;font-size:12px;letter-spacing:5px;color:var(--cyan);font-weight:500;margin-top:8px;opacity:.85}
.page-desc{max-width:760px;color:var(--muted);margin-top:16px;font-size:15px}

.sec{margin-top:64px}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:3px}
.sec-head h2::before{content:"／";color:var(--cyan);margin-right:8px;font-weight:400}
.sec-head .en{font-size:11px;letter-spacing:4px;color:var(--muted);text-transform:uppercase}
.sec-head .line{flex:1;height:1px;min-width:60px;background:linear-gradient(90deg,var(--line-strong),transparent)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.glow-box{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.glow-box::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(63,216,255,.6),transparent)}

/* 页脚 */
.footer{margin-top:90px;border-top:1px solid var(--line);padding:34px clamp(16px,4vw,40px) 46px;
  text-align:center;color:var(--muted);font-size:13px}
.footer .f-title{font-weight:800;letter-spacing:3px;color:var(--text);font-size:15px;margin-bottom:8px}
.footer .f-note{max-width:680px;margin:10px auto 0;line-height:1.9;font-size:12.5px;opacity:.85}

/* 通用动效 */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001s !important}
}

/* ---------- 首页 Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
#stars{position:absolute;inset:0;z-index:0}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
  padding:120px clamp(16px,4vw,40px) 80px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero-tag{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:3px;color:var(--cyan);
  border:1px solid rgba(63,216,255,.35);padding:6px 16px;border-radius:999px;
  background:rgba(63,216,255,.07);margin-bottom:22px}
.hero-tag i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.hero h1{font-size:clamp(44px,7vw,84px);font-weight:900;letter-spacing:6px;line-height:1.12;
  background:linear-gradient(115deg,#fff 30%,#9fdcff 55%,#ff8a6a 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(63,160,255,.35))}
.hero .sub-en{margin-top:6px;font-size:clamp(12px,1.4vw,15px);letter-spacing:8px;color:var(--muted)}
.hero p.lead{margin:26px 0 34px;max-width:560px;color:#526b7c;font-size:15.5px;line-height:2}
.hero p.lead b{color:var(--cyan);font-weight:600}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 30px;border-radius:10px;
  font-size:15px;letter-spacing:2px;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(120deg,#0e5dff,#22c1f5);color:#fff;
  box-shadow:0 8px 28px rgba(20,120,255,.35)}
.btn-primary:hover{box-shadow:0 12px 36px rgba(34,193,245,.5)}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:rgba(63,140,255,.06)}
.btn-ghost:hover{background:rgba(63,216,255,.14);box-shadow:0 8px 24px rgba(63,160,255,.18)}
.hero-mecha{position:relative}
.hero-mecha .frame{position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(120,180,255,.25);
  background:radial-gradient(120% 100% at 50% 0%,rgba(30,60,120,.35),rgba(6,10,20,.9));
  box-shadow:0 30px 80px rgba(0,20,60,.55), inset 0 0 60px rgba(40,120,255,.08)}
.hero-mecha img{width:100%;transform:scale(1.02);animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{transform:scale(1.02) translateY(-12px)}}
.hero-mecha .caption{position:absolute;left:14px;bottom:12px;font-size:11.5px;letter-spacing:2.5px;color:#bcd6ff;
  background:rgba(5,10,20,.65);padding:5px 12px;border-radius:6px;border:1px solid rgba(120,180,255,.2)}
.hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  color:var(--muted);font-size:11px;letter-spacing:3px;text-align:center;animation:fadeUp 1s .6s both}
.hero-scroll::after{content:"";display:block;width:1px;height:34px;margin:8px auto 0;
  background:linear-gradient(180deg,var(--cyan),transparent);animation:drop 1.8s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fadeUp{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* 统计条 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:-54px;position:relative;z-index:3}
.stat{padding:22px 18px;text-align:center;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(16,26,46,.9),rgba(9,14,26,.9));
  border:1px solid var(--line)}
.stat b{display:block;font-size:clamp(26px,3.4vw,40px);font-weight:900;letter-spacing:1px;
  background:linear-gradient(120deg,#fff,#7fd0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:12.5px;color:var(--muted);letter-spacing:2px}

/* 简介双卡 */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.duo-card{position:relative;padding:30px 28px;border-radius:var(--radius);overflow:hidden;
  background:var(--panel);border:1px solid var(--line);transition:transform .3s,border-color .3s}
.duo-card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.duo-card .no{position:absolute;right:18px;top:8px;font-size:64px;font-weight:900;opacity:.07;letter-spacing:-2px}
.duo-card h3{font-size:21px;letter-spacing:2px;margin-bottom:4px}
.duo-card .meta{font-size:12.5px;color:var(--cyan);letter-spacing:2px;margin-bottom:14px}
.duo-card p{color:var(--muted);font-size:14px}

/* 首页角色预览条 */
.team-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.team-cell{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel-solid);aspect-ratio:3/4.1;cursor:pointer;transition:transform .3s,border-color .3s,box-shadow .3s}
.team-cell img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s;filter:saturate(1.05)}
.team-cell:hover{transform:translateY(-6px);border-color:var(--c,var(--cyan));box-shadow:0 14px 34px -12px var(--c,var(--cyan))}
.team-cell:hover img{transform:scale(1.07)}
.team-cell .nm{position:absolute;left:0;right:0;bottom:0;padding:20px 8px 8px;text-align:center;font-size:13px;letter-spacing:2px;font-weight:600;
  background:linear-gradient(transparent,rgba(3,6,12,.92))}
.team-cell .nm i{display:block;font-style:normal;font-size:9.5px;color:var(--muted);letter-spacing:1px;margin-top:2px;font-weight:400}

/* 语录轮播 */
.quote-stage{position:relative;padding:54px 30px;text-align:center;overflow:hidden;border-radius:var(--radius);
  background:radial-gradient(90% 130% at 50% -20%,rgba(40,90,190,.22),rgba(6,10,20,.7)),var(--panel);
  border:1px solid var(--line)}
.quote-stage .qm{position:absolute;font-size:150px;line-height:1;color:rgba(90,160,255,.12);font-family:Georgia,serif;top:-24px;left:18px}
#heroQuote{font-size:clamp(17px,2.3vw,23px);font-weight:600;letter-spacing:1.5px;max-width:820px;margin:0 auto;min-height:2.6em;
  transition:opacity .5s}
#heroQuoteBy{margin-top:18px;color:var(--cyan);font-size:13.5px;letter-spacing:2px;transition:opacity .5s}
.quote-dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
.quote-dots i{width:22px;height:3px;border-radius:2px;background:#25375a;cursor:pointer;transition:background .3s}
.quote-dots i.on{background:var(--cyan);box-shadow:0 0 8px rgba(63,216,255,.7)}

/* 首页宇宙带 */
.uni-band{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.uni-chip{position:relative;padding:16px 10px 14px;border-radius:12px;text-align:center;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);transition:transform .25s,border-color .25s}
.uni-chip:hover{transform:translateY(-4px);border-color:var(--uc)}
.uni-chip b{display:block;font-size:15px;letter-spacing:1px}
.uni-chip .idx{font-size:10px;letter-spacing:2px;color:var(--uc);display:block;margin-bottom:6px;font-weight:700}
.uni-chip span{font-size:11px;color:var(--muted)}

/* 入口卡片 */
.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.entry-card{position:relative;padding:26px 24px;border-radius:var(--radius);overflow:hidden;
  background:var(--panel);border:1px solid var(--line);transition:transform .3s,border-color .3s}
.entry-card:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.entry-card .ic{font-size:26px;margin-bottom:12px}
.entry-card h3{font-size:18px;letter-spacing:2px;margin-bottom:6px}
.entry-card p{color:var(--muted);font-size:13px}
.entry-card .go{position:absolute;right:20px;top:24px;color:var(--cyan);opacity:0;transform:translateX(-6px);transition:.3s}
.entry-card:hover .go{opacity:1;transform:none}

/* ---------- 世界观页 ---------- */
.uni-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.uni-card{position:relative;padding:24px 22px;border-radius:var(--radius);overflow:hidden;
  background:var(--panel);border:1px solid var(--line);transition:transform .3s,border-color .3s}
.uni-card:hover{transform:translateY(-4px);border-color:var(--uc)}
.uni-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--uc)}
.uni-card .u-no{font-size:11px;letter-spacing:3px;color:var(--uc);font-weight:700}
.uni-card h3{font-size:19px;letter-spacing:2px;margin:6px 0 10px}
.uni-card .u-row{font-size:13px;color:var(--muted);margin-top:6px}
.uni-card .u-row b{color:var(--text);font-weight:600}
.concept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.concept-card{padding:28px 26px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
.concept-card h3{font-size:18px;letter-spacing:2px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.concept-card h3 .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.concept-card p,.concept-card li{color:var(--muted);font-size:13.5px}
.concept-card ul{padding-left:18px;margin-top:8px}
.concept-card li{margin-bottom:6px}
.concept-card blockquote{margin-top:14px;padding:12px 16px;border-left:3px solid var(--cyan);
  background:rgba(63,216,255,.06);border-radius:0 8px 8px 0;font-size:13px;color:#bcd2ee}

/* 合体表 */
.combo-table{width:100%;border-collapse:collapse;font-size:14px}
.combo-table th,.combo-table td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line)}
.combo-table th{color:var(--cyan);font-weight:600;letter-spacing:2px;font-size:12.5px;background:rgba(63,140,255,.05)}
.combo-table tr:hover td{background:rgba(63,140,255,.05)}
.combo-table td:first-child{font-weight:700;letter-spacing:1px;white-space:nowrap}
.combo-img{margin-top:22px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.combo-img figcaption{padding:12px 16px;font-size:12.5px;color:var(--muted);background:rgba(8,12,22,.8);letter-spacing:1px}

/* ---------- 角色页 ---------- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.chip{padding:8px 20px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;letter-spacing:2px;
  color:var(--muted);background:transparent;cursor:pointer;transition:.25s}
.chip:hover{color:var(--text);border-color:var(--line-strong)}
.chip.on{color:#ffffff;background:linear-gradient(120deg,var(--cyan),#7fe7ff);border-color:transparent;font-weight:700;
  box-shadow:0 6px 18px rgba(63,216,255,.35)}
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.char-card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  background:var(--panel-solid);border:1px solid var(--line);transition:transform .3s,border-color .3s,box-shadow .3s}
.char-card:hover{transform:translateY(-6px);border-color:var(--c);box-shadow:0 18px 40px -14px var(--c)}
.char-card .ph{position:relative;aspect-ratio:1/1.02;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,rgba(40,80,160,.25),rgba(6,9,17,.6))}
.char-card .ph img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.char-card:hover .ph img{transform:scale(1.06)}
.char-card .ph .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:88px;font-weight:900;color:var(--c);opacity:.9;text-shadow:0 0 44px var(--c);
  font-family:"Microsoft YaHei",sans-serif}
.char-card .badge{position:absolute;top:10px;left:10px;font-size:10.5px;letter-spacing:1.5px;
  padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.90);border:1px solid var(--c);color:var(--c)}
.char-card .source-badge{position:absolute;right:10px;top:10px;padding:4px 8px;border-radius:6px;
  background:rgba(255,255,255,.92);border:1px solid rgba(255,194,75,.72);color:#956817;font-size:10px;
  letter-spacing:1px;backdrop-filter:blur(4px)}
.char-card .info{padding:14px 16px 16px;border-top:1px solid var(--line)}
.char-card .info h3{font-size:18px;letter-spacing:2px}
.char-card .info .t{font-size:11.5px;color:var(--c);letter-spacing:1.5px;margin-top:2px}
.char-card .info .s{margin-top:8px;font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.faction-title{margin:46px 0 20px;display:flex;align-items:center;gap:14px}
.faction-title h2{font-size:23px;letter-spacing:3px}
.faction-title .line{flex:1;height:1px;background:linear-gradient(90deg,var(--fc,var(--cyan)),transparent)}
.faction-title .fc-en{font-size:11px;letter-spacing:3px;color:var(--muted)}

/* 角色弹窗 */
.modal-mask{position:fixed;inset:0;z-index:200;background:rgba(25,58,73,.28);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:20px}
.modal-mask.show{display:flex;animation:maskIn .25s}
@keyframes maskIn{from{opacity:0}}
.modal{width:min(1020px,100%);height:min(88vh,900px);max-height:88vh;overflow:hidden;border-radius:18px;position:relative;
  display:flex;flex-direction:column;background:linear-gradient(160deg,#ffffff,#f2f7fa);border:1px solid var(--line-strong);
  box-shadow:0 35px 90px rgba(37,72,91,.26);animation:popIn .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes popIn{from{opacity:0;transform:translateY(26px) scale(.97)}}
.modal-close{position:absolute;top:14px;right:14px;z-index:5;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.92);color:var(--text);font-size:17px;cursor:pointer}
.modal-close:hover{color:var(--cyan);border-color:var(--cyan)}
.modal-body{display:grid;grid-template-columns:340px minmax(0,1fr);gap:0;flex:1;min-height:0;overflow:hidden;padding:0 30px 30px;margin-top:0}
.modal-visual{position:relative;align-self:stretch;min-height:0;overflow:hidden}
.modal-visual .imgwrap{position:static;top:auto;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 0%,rgba(50,100,200,.18),rgba(5,8,15,.7))}
.modal-visual img{width:100%;height:340px;object-fit:contain;padding:10px}
.modal-visual .thumbs{display:flex;gap:8px;margin-top:10px}
.modal-visual .thumbs img{width:64px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--line);
  cursor:pointer;opacity:.6;padding:0;transition:.25s}
.modal-visual .thumbs img.on,.modal-visual .thumbs img:hover{opacity:1;border-color:var(--cyan)}
.modal-info{padding:34px 8px 12px 30px;min-width:0;min-height:0;overflow-y:auto;scrollbar-gutter:stable}
.modal-info h2{font-size:30px;letter-spacing:3px}
.modal-info .alias{color:var(--muted);font-size:12.5px;letter-spacing:1px;margin-top:4px}
.modal-info .title-line{color:var(--c,var(--cyan));font-size:13.5px;letter-spacing:2px;margin-top:6px}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tag{font-size:11.5px;padding:4px 12px;border-radius:6px;border:1px solid var(--line-strong);color:#41657a;letter-spacing:1px}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}
.stat-item{padding:10px 14px;border-radius:10px;background:rgba(63,140,255,.05);border:1px solid var(--line)}
.stat-item .k{font-size:11px;color:var(--muted);letter-spacing:2px}
.stat-item .v{font-size:14px;font-weight:600;margin-top:2px;letter-spacing:.5px}
.modal-sec{margin-top:22px}
.modal-sec h4{font-size:14px;letter-spacing:3px;color:var(--cyan);margin-bottom:10px}
.modal-sec h4::before{content:"▍";margin-right:6px}
.modal-sec p{font-size:13.5px;color:#526b7c}
.baike-sec{padding:16px 16px 14px;border:1px solid rgba(255,194,75,.26);border-radius:12px;background:rgba(255,194,75,.035)}
.baike-sec h4{color:#956817}
.baike-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.baike-fact{padding:9px 10px;border-radius:8px;background:rgba(255,255,255,.025);border:1px solid var(--line);min-width:0}
.baike-fact span{display:block;color:var(--muted);font-size:10px;letter-spacing:1px;margin-bottom:3px}
.baike-fact b{display:block;color:#294a5f;font-size:12px;line-height:1.55;font-weight:500;word-break:break-word}
.baike-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:var(--muted)}

.tag-source{color:#956817;border-color:rgba(255,194,75,.55)}
.m-quote{position:relative;margin-top:10px;padding:12px 16px 12px 40px;border-radius:10px;font-size:13.5px;color:#36576d;
  background:rgba(63,160,255,.06);border:1px solid var(--line)}
.m-quote::before{content:"“";position:absolute;left:12px;top:2px;font-size:30px;color:var(--c,var(--cyan));font-family:Georgia,serif}

/* ---------- 关系网页 ---------- */
.rel-wrap{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
/* 关系网需要更大的阅读画布：桌面端让网络独占一行，详情放在图例下方，避免节点被压缩。 */
body[data-page="relations"] .page{max-width:1480px;padding-left:28px;padding-right:28px}
body[data-page="relations"] .rel-wrap{grid-template-columns:minmax(0,1fr);gap:20px}
body[data-page="relations"] .rel-side{position:static;min-height:220px}
.rel-canvas-box{position:relative;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(80% 90% at 50% 10%,rgba(30,70,150,.16),rgba(4,7,13,.9))}
#relSvg{display:block;width:100%;height:auto}
.rel-node{cursor:pointer}
.rel-node circle{transition:.25s}
.rel-node text{pointer-events:none;font-family:var(--font)}
.rel-edge{transition:opacity .25s}
.rel-legend{display:flex;flex-wrap:wrap;gap:8px 16px;padding:14px 18px;border-top:1px solid var(--line);
  background:rgba(6,10,18,.85);font-size:12px;color:var(--muted)}
.rel-legend i{display:inline-block;width:20px;height:0;border-top:3px solid var(--lc);margin-right:7px;vertical-align:middle;border-radius:2px}
.rel-legend i.dash{border-top-style:dashed}
.rel-side{position:sticky;top:84px;padding:22px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);min-height:300px}
.rel-side h3{font-size:20px;letter-spacing:2px}
.rel-side .r-title{color:var(--cyan);font-size:12.5px;letter-spacing:2px;margin-top:4px}
.rel-side .r-desc{margin-top:12px;font-size:13px;color:var(--muted)}
.rel-side ul{list-style:none;margin-top:14px}
.rel-side ul li{padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px}
.rel-side ul li b{color:var(--cyan);font-weight:600}
.rel-side ul li .rt{font-size:11px;color:#ffffff;background:var(--cyan);border-radius:4px;padding:1px 7px;margin-right:8px;font-weight:700}
.rel-hint{font-size:12px;color:var(--muted);margin-bottom:14px;letter-spacing:1px}
.rel-hint b{color:var(--cyan)}
.cause-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.cause-card{padding:22px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden}
.cause-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--red),transparent)}
.cause-card h3{font-size:16.5px;letter-spacing:2px;margin-bottom:10px}
.cause-card h3 span{font-size:11px;color:var(--red);border:1px solid rgba(255,90,60,.4);border-radius:5px;padding:2px 8px;margin-left:10px;letter-spacing:1px}
.cause-card .flow{font-size:13px;color:var(--muted)}
.cause-card .flow b{color:#ffb3a3;font-weight:600}
.cause-card .impact{margin-top:10px;font-size:12.5px;color:#9fdcff;border-top:1px dashed var(--line);padding-top:10px}

/* ---------- 剧集页 ---------- */
.season-tabs{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap}
.season-tab{padding:12px 26px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;transition:.25s}
.season-tab b{display:block;font-size:16px;letter-spacing:2px}
.season-tab span{font-size:11px;color:var(--muted);letter-spacing:1px}
.season-tab.on{border-color:var(--cyan);background:rgba(63,216,255,.1);box-shadow:0 8px 24px rgba(63,180,255,.15)}
.season-tab.on b{color:var(--cyan)}
.ep-tools{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;align-items:center}
.ep-search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;padding:11px 18px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line)}
.ep-search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:14px;font-family:var(--font)}
.ep-search input::placeholder{color:var(--muted)}
.ep-count{font-size:12.5px;color:var(--muted);letter-spacing:1px}
.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.ep-card{display:flex;gap:16px;padding:18px;border-radius:12px;background:var(--panel);border:1px solid var(--line);transition:.25s}
.ep-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.ep-card .no{flex:none;width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:900;color:var(--cyan);
  background:rgba(63,180,255,.08);border:1px solid rgba(63,180,255,.25)}
.ep-card h3{font-size:16px;letter-spacing:2px}
.ep-card .who{font-size:11.5px;color:var(--cyan);margin:3px 0 6px;letter-spacing:.5px}
.ep-card p{font-size:12.5px;color:var(--muted);line-height:1.7}
.ep-empty{padding:50px;text-align:center;color:var(--muted);grid-column:1/-1}

/* ---------- 语录页 ---------- */
.quote-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.quote-wall{columns:3;column-gap:16px}
.q-card{break-inside:avoid;margin-bottom:16px;padding:24px 22px;border-radius:var(--radius);position:relative;
  background:var(--panel);border:1px solid var(--line);transition:.25s}
.q-card:hover{border-color:var(--qc,var(--cyan));transform:translateY(-3px)}
.q-card::before{content:"“";position:absolute;top:2px;left:12px;font-size:52px;font-family:Georgia,serif;color:var(--qc,var(--cyan));opacity:.35}
.q-card p{font-size:14.5px;line-height:1.9;padding-left:26px}
.q-card .who{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:12.5px;letter-spacing:2px;color:var(--qc,var(--cyan))}
.q-card .who span{color:var(--muted);margin-left:8px;letter-spacing:1px}

/* ---------- 配音页 ---------- */
.cast-table{width:100%;border-collapse:collapse;font-size:14px}
.cast-table th,.cast-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cast-table th{color:var(--cyan);font-size:12.5px;letter-spacing:2px;font-weight:600;background:rgba(63,140,255,.05)}
.cast-table tr:hover td{background:rgba(63,140,255,.04)}
.cast-table .va{font-weight:700;letter-spacing:1px;white-space:nowrap}
.cast-table .main-r{color:#ffd9a3}
.cast-table .minor-r{color:var(--muted);font-size:13px}
.crew-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.crew-item{padding:18px 20px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.crew-item .k{font-size:11.5px;color:var(--muted);letter-spacing:2px;margin-bottom:4px}
.crew-item .v{font-size:15px;font-weight:600;letter-spacing:1px}

/* ============================================================
   浅色主题升级 · 晨曦蓝 / 暖砂金
   ============================================================ */
html{background:var(--bg)}
body{background:var(--bg);color:var(--text)}
::selection{background:rgba(8,127,159,.18);color:var(--text)}
::-webkit-scrollbar-track{background:#e9f0f5}
::-webkit-scrollbar-thumb{background:#b6c9d5;border-color:#e9f0f5}
::-webkit-scrollbar-thumb:hover{background:#91adbd}
.bg-fx{background:
  radial-gradient(900px 520px at 92% -8%,rgba(86,157,209,.20),transparent 62%),
  radial-gradient(820px 560px at -12% 20%,rgba(242,190,116,.16),transparent 62%),
  radial-gradient(700px 500px at 64% 112%,rgba(191,120,167,.10),transparent 60%),
  var(--bg)}
.bg-grid{opacity:.42;background-image:
  linear-gradient(rgba(45,105,137,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(45,105,137,.07) 1px,transparent 1px)}
.nav{height:72px;background:rgba(255,255,255,.84);border-bottom-color:var(--line);
  box-shadow:0 8px 28px rgba(41,75,97,.07)}
.nav-logo small{color:#7890a0}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active{text-shadow:0 0 16px rgba(8,127,159,.18)}
.nav-toggle{background:rgba(255,255,255,.72);color:var(--cyan)}
.page{max-width:1320px}
.page-head{position:relative;padding-left:22px}
.page-head::before{content:"";position:absolute;left:0;top:5px;width:4px;height:72px;border-radius:4px;background:linear-gradient(180deg,var(--cyan),rgba(8,127,159,.12))}
.crumb{color:#7890a0}
.crumb b{color:var(--cyan)}
h1.page-title{color:#16354b;letter-spacing:3px}
h1.page-title .en{color:var(--cyan)}
.page-desc{color:var(--muted)}
.sec-head h2{color:#183247}
.sec-head h2::before{color:var(--cyan)}
.sec-head .en{color:#8296a5}
.sec-head .line{background:linear-gradient(90deg,var(--line-strong),transparent)}
.panel,.glow-box{background:var(--panel);border-color:var(--line);box-shadow:0 18px 42px rgba(49,83,102,.07)}
.glow-box::before{background:linear-gradient(90deg,transparent,rgba(8,127,159,.45),transparent)}
.footer{border-top-color:var(--line);color:var(--muted)}
.footer .f-title{color:var(--text)}
.hero{background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 55%)}
.hero h1{background:linear-gradient(115deg,#173d55 20%,#0a7899 56%,#b85c48 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 20px rgba(58,106,135,.12))}
.hero .sub-en{color:#7890a0}
.hero p.lead{color:#4d6577}
.hero p.lead b{color:var(--cyan)}
.hero-tag{color:var(--cyan);border-color:rgba(8,127,159,.28);background:rgba(8,127,159,.06)}
.hero-tag i{background:var(--cyan);box-shadow:0 0 10px rgba(8,127,159,.38)}
.btn-primary{background:linear-gradient(120deg,#0d7595,#4d74bd);box-shadow:0 10px 28px rgba(30,99,139,.22)}
.btn-primary:hover{box-shadow:0 14px 36px rgba(30,99,139,.30)}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:rgba(255,255,255,.58)}
.btn-ghost:hover{background:rgba(8,127,159,.08);box-shadow:0 10px 26px rgba(49,108,137,.12)}
.hero-mecha .frame{border-color:rgba(43,112,145,.22);background:radial-gradient(120% 100% at 50% 0%,rgba(142,204,229,.34),rgba(232,240,245,.86));box-shadow:0 30px 70px rgba(61,101,122,.18),inset 0 0 60px rgba(255,255,255,.45)}
.hero-mecha .caption{color:#456375;background:rgba(255,255,255,.76);border-color:rgba(43,112,145,.18)}
.stat{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(236,244,248,.88));border-color:var(--line);box-shadow:0 14px 34px rgba(53,88,108,.09)}
.stat b{background:linear-gradient(120deg,#1a5067,#177f9b);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted)}
.duo-card,.entry-card,.uni-card,.concept-card,.q-card,.ep-card,.crew-item,.cause-card{background:var(--panel);border-color:var(--line);box-shadow:0 12px 30px rgba(49,83,102,.06)}
.duo-card:hover,.entry-card:hover,.uni-card:hover,.q-card:hover,.ep-card:hover{border-color:var(--line-strong);box-shadow:0 18px 38px rgba(49,83,102,.11)}
.duo-card .meta,.entry-card .go,.ep-card .who{color:var(--cyan)}
.duo-card p,.entry-card p,.uni-card .u-row,.concept-card p,.concept-card li,.q-card .who span,.ep-card p,.crew-item .k{color:var(--muted)}
.team-cell{background:#e7eef3;border-color:var(--line);box-shadow:0 8px 22px rgba(49,83,102,.07)}
.team-cell .nm{background:linear-gradient(transparent,rgba(16,45,62,.88))}
.quote-stage{background:radial-gradient(90% 130% at 50% -20%,rgba(145,203,224,.30),rgba(255,255,255,.80)),var(--panel);border-color:var(--line);box-shadow:0 16px 36px rgba(49,83,102,.08)}
.quote-stage .qm{color:rgba(8,127,159,.12)}
#heroQuoteBy{color:var(--cyan)}
.quote-dots i{background:#bfd0da}
.uni-chip{background:var(--panel);border-color:var(--line);box-shadow:0 8px 20px rgba(49,83,102,.04)}
.entry-card .ic{filter:saturate(.82)}
.concept-card blockquote{background:rgba(8,127,159,.06);color:#527083}
.combo-table th{color:var(--cyan);background:rgba(8,127,159,.055)}
.combo-table tr:hover td,.cast-table tr:hover td{background:rgba(8,127,159,.045)}
.combo-img{border-color:var(--line);box-shadow:0 16px 34px rgba(49,83,102,.09)}
.combo-img figcaption{color:var(--muted);background:rgba(255,255,255,.88)}
.chip{color:var(--muted);background:rgba(255,255,255,.56);border-color:var(--line)}
.chip:hover{color:var(--text);border-color:var(--line-strong)}
.chip.on{color:#fff;background:linear-gradient(120deg,#0c7898,#4b75bd);box-shadow:0 8px 20px rgba(37,111,146,.20)}
.char-card{background:#fff;border-color:var(--line);box-shadow:0 12px 28px rgba(49,83,102,.08)}
.char-card:hover{box-shadow:0 18px 42px rgba(50,105,132,.18)}
.char-card .ph{background:radial-gradient(120% 90% at 50% 0%,rgba(145,204,225,.34),rgba(231,239,244,.78))}
.char-card .badge,.char-card .source-badge{background:rgba(255,255,255,.90);backdrop-filter:blur(8px)}
.char-card .source-badge{color:#9c6d18;border-color:rgba(168,116,24,.55)}
.char-card .info{border-top-color:var(--line)}
.modal-mask{background:rgba(36,63,78,.34)}
.modal{background:linear-gradient(160deg,#ffffff,#f2f7fa);border-color:var(--line-strong);box-shadow:0 35px 90px rgba(37,72,91,.26)}
.modal-close{background:rgba(255,255,255,.92);border-color:var(--line-strong);color:var(--text)}
.modal-close:hover{color:var(--cyan);border-color:var(--cyan)}
.modal-visual .imgwrap{background:radial-gradient(120% 90% at 50% 0%,rgba(145,204,225,.28),rgba(236,244,247,.84));border-color:var(--line)}
.tag{color:#41657a;border-color:var(--line-strong)}
.stat-item{background:rgba(8,127,159,.045);border-color:var(--line)}
.modal-sec p{color:#526b7c}
.baike-sec{border-color:rgba(168,116,24,.30);background:rgba(234,189,99,.09)}
.baike-sec h4{color:#956817}
.baike-fact{background:rgba(255,255,255,.66);border-color:var(--line)}
.baike-fact b{color:#294a5f}
.tag-source{color:#996c18;border-color:rgba(168,116,24,.45)}
.m-quote{color:#36576d;background:rgba(8,127,159,.055);border-color:var(--line)}
.rel-canvas-box{background:radial-gradient(80% 90% at 50% 10%,rgba(143,201,222,.25),rgba(250,252,253,.96));border-color:var(--line);box-shadow:0 18px 40px rgba(49,83,102,.09)}
.rel-legend{background:rgba(255,255,255,.90);border-top-color:var(--line);color:var(--muted)}
.rel-side{background:rgba(255,255,255,.84);border-color:var(--line);box-shadow:0 16px 34px rgba(49,83,102,.08)}
.rel-side .r-title{color:var(--cyan)}
.rel-side .r-desc{color:var(--muted)}
.rel-side ul li{border-bottom-color:var(--line)}
.rel-side ul li b{color:var(--cyan)}
.cause-card::before{background:linear-gradient(180deg,var(--red),transparent)}
.cause-card .flow{color:var(--muted)}
.cause-card .impact{color:#4c7690;border-top-color:var(--line)}
.season-tab{background:var(--panel);border-color:var(--line);color:var(--text);box-shadow:0 8px 22px rgba(49,83,102,.05)}
.season-tab.on{border-color:var(--cyan);background:rgba(8,127,159,.08);box-shadow:0 10px 24px rgba(37,111,146,.13)}
.season-tab.on b{color:var(--cyan)}
.ep-search{background:rgba(255,255,255,.82);border-color:var(--line)}
.ep-search input{color:var(--text)}
.cast-table th{color:var(--cyan);background:rgba(8,127,159,.055)}
.cast-table .minor-r{color:var(--muted)}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr;padding-top:110px}
  .hero-mecha{max-width:520px;margin:0 auto}
  .team-strip{grid-template-columns:repeat(4,1fr)}
  .uni-band{grid-template-columns:repeat(4,1fr)}
  .quote-wall{columns:2}
  .rel-wrap{grid-template-columns:1fr}
  .rel-side{position:static}
  .modal{height:auto;max-height:88vh;overflow-y:auto;display:block}
  .modal-body{display:block;overflow:visible;padding:0 30px 30px}
  .modal-visual{overflow:visible}
  .modal-info{padding:20px 0 0;overflow:visible}
  .baike-facts{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav-links{position:fixed;top:72px;right:0;left:0;flex-direction:column;padding:12px;
    background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);display:none;
    box-shadow:0 14px 26px rgba(49,83,102,.12)}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .stats{grid-template-columns:repeat(2,1fr);margin-top:-30px}
  .duo{grid-template-columns:1fr}
  .entry-grid{grid-template-columns:1fr}
  .team-strip{grid-template-columns:repeat(4,1fr);gap:8px}
  .uni-band{grid-template-columns:repeat(2,1fr)}
  .quote-wall{columns:1}
  .stat-grid{grid-template-columns:1fr}
  .ep-grid{grid-template-columns:1fr}
  .page{padding-top:92px}
}


/* ============================================================
   大师级视觉收尾 · 纸张感、秩序感与可读性
   ============================================================ */
:root{
  --paper:#f8fbfd;
  --ink:#183247;
  --ink-soft:#4e687b;
  --accent-soft:rgba(8,127,159,.09);
  --shadow-soft:0 18px 46px rgba(37,77,108,.08);
}
html{background:var(--paper);scrollbar-color:#b6c9d5 #e9f0f5}
body{min-height:100vh;background:var(--bg);color:var(--ink)}
button,a,input{ -webkit-tap-highlight-color:transparent }
:focus-visible{outline:3px solid rgba(8,127,159,.34);outline-offset:3px}

.nav{padding-inline:max(18px,calc((100vw - 1440px)/2));}
.nav-logo{color:var(--ink);white-space:nowrap}
.nav-logo .mark{filter:drop-shadow(0 5px 12px rgba(8,127,159,.15))}
.nav-links a{font-weight:600}
.nav-links a::after{height:3px;bottom:0}

.page{padding-bottom:86px}
.page-head{margin-bottom:46px}
.page-head::before{box-shadow:0 0 18px rgba(8,127,159,.18)}
h1.page-title{max-width:1000px;text-wrap:balance}
.page-desc{line-height:1.95}
.sec{margin-top:78px}
.sec-head{margin-bottom:28px}
.sec-head h2{font-size:clamp(21px,2.4vw,29px)}
.sec-head .line{height:2px;opacity:.72}

.panel,.duo-card,.entry-card,.uni-card,.concept-card,.q-card,.ep-card,.crew-item,.cause-card,.season-tab,.ep-search,.rel-side,.stat,.char-card{
  box-shadow:var(--shadow-soft);
}
.duo-card,.entry-card,.uni-card,.concept-card,.q-card,.ep-card,.crew-item,.cause-card,.season-tab,.ep-search,.rel-side,.stat,.char-card{
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.duo-card,.entry-card,.uni-card,.concept-card,.q-card,.ep-card,.crew-item,.cause-card{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease}
.duo-card:hover,.entry-card:hover,.uni-card:hover,.concept-card:hover,.q-card:hover,.ep-card:hover,.crew-item:hover,.cause-card:hover{background:rgba(255,255,255,.94)}

.hero{min-height:clamp(680px,100svh,940px)}
.hero-inner{max-width:1440px;gap:clamp(34px,6vw,96px)}
.hero h1{letter-spacing:clamp(3px,.7vw,8px);text-wrap:balance}
.hero p.lead{font-size:clamp(15px,1.3vw,17px);line-height:2.05}
.hero-cta{gap:12px}
.btn{min-height:48px;box-shadow:0 8px 18px rgba(37,77,108,.08)}
.btn-primary{border:0}
.btn-ghost{box-shadow:none}
.hero-mecha .frame{box-shadow:0 30px 70px rgba(61,101,122,.18),inset 0 0 60px rgba(255,255,255,.45)}
.hero-mecha .frame::after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.42);border-radius:12px;pointer-events:none}
.stats{gap:16px;margin-top:-42px}
.stat{padding:24px 18px}
.stat b{font-variant-numeric:tabular-nums}

.team-strip{gap:14px}
.team-cell{box-shadow:0 10px 24px rgba(49,83,102,.08)}
.team-cell .nm{background:linear-gradient(transparent,rgba(17,43,57,.88))}
.uni-band{gap:12px}
.uni-chip{min-height:104px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 10px 24px rgba(49,83,102,.06)}
.entry-grid{gap:18px}
.entry-card{min-height:168px}
.entry-card .ic{filter:saturate(.82)}
.quote-stage{padding-block:64px}
.quote-dots i{background:#c7d6df}
.quote-dots i.on{box-shadow:0 0 10px rgba(8,127,159,.28)}

/* 角色页：统一封面比例，减少照片尺寸差异造成的视觉跳动。 */
.char-grid{grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:20px}
.char-card .ph{background:linear-gradient(145deg,#eef5f8,#dfeaf0)}
.char-card .ph img{object-position:50% 12%}
.char-card .info{min-height:132px}
.char-card .info .s{line-height:1.7}
.source-badge{font-weight:700}

/* 关系网：桌面放大阅读，移动端允许横向阅读而不是把节点压成小点。 */
body[data-page="relations"] .page{max-width:1520px}
body[data-page="relations"] .rel-canvas-box{box-shadow:0 22px 50px rgba(49,83,102,.10)}
body[data-page="relations"] #relSvg{height:clamp(660px,55vw,900px);min-height:660px}
.rel-legend{gap:10px 22px;line-height:1.7}
.rel-legend span{white-space:nowrap}
.rel-side{min-height:240px}
.rel-side h3{font-size:22px}
.rel-side .r-desc{line-height:1.85}
.rel-side ul li{line-height:1.7}

/* 弹窗：左侧视觉列固定，只有右侧资料列拥有滚动上下文。 */
.modal{width:min(1080px,100%);height:min(90vh,920px)}
.modal-body{grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);padding:0 34px 34px}
.modal-visual{position:relative;overflow:hidden;padding-top:18px}
.modal-info{padding-top:34px}
.modal-visual .imgwrap{box-shadow:0 14px 32px rgba(49,83,102,.10)}
.modal-info::-webkit-scrollbar{width:8px}
.modal-info::-webkit-scrollbar-track{background:transparent}
.modal-info::-webkit-scrollbar-thumb{background:#c1d1da;border:2px solid transparent;background-clip:padding-box}

.combo-table th,.cast-table th{font-weight:800}
.combo-table td,.cast-table td{line-height:1.7}
.combo-img figcaption{background:rgba(255,255,255,.9)}
.ep-card .no{font-variant-numeric:tabular-nums}
.q-card{padding:27px 24px}
.q-card p{line-height:1.95}
.footer{padding-top:42px}

@media (max-width:1080px){
  .hero{min-height:auto}
  .hero-inner{padding-top:132px;padding-bottom:112px}
  .stats{margin-top:-28px}
  .modal{height:min(90vh,900px);overflow:hidden;display:flex}
  .modal-body{display:grid;grid-template-columns:minmax(250px,.82fr) minmax(0,1.18fr);overflow:hidden;padding:0 24px 24px}
  .modal-visual{overflow:hidden}
  .modal-info{overflow-y:auto;padding:24px 0 10px 24px}
}
@media (max-width:720px){
  .nav{height:64px}
  .nav-links{top:64px}
  .page{padding-inline:16px;padding-bottom:60px}
  .page-head{padding-left:16px;margin-bottom:36px}
  .page-head::before{height:62px;width:3px}
  h1.page-title{letter-spacing:2px}
  .sec{margin-top:58px}
  .hero-inner{padding-top:112px;padding-bottom:100px;gap:34px}
  .hero h1{font-size:clamp(42px,13vw,64px)}
  .hero .sub-en{letter-spacing:4px}
  .hero p.lead{font-size:14px}
  .hero-mecha .frame::after{inset:8px}
  .stats{gap:10px;margin-top:-20px}
  .stat{padding:18px 10px}
  .stat b{font-size:29px}
  .stat span{font-size:11px;letter-spacing:1px}
  .team-strip{gap:8px}
  .team-cell .nm{font-size:11px;letter-spacing:1px;padding:16px 4px 6px}
  .uni-chip{min-height:92px;padding:12px 6px}
  .uni-chip b{font-size:13px}
  .entry-card{min-height:0}
  .quote-stage{padding:48px 20px}
  .quote-stage .qm{font-size:116px}
  .char-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .char-card .info{padding:12px 12px 14px;min-height:126px}
  .char-card .info h3{font-size:16px;letter-spacing:1px}
  .char-card .info .s{font-size:11px}
  body[data-page="relations"] .page{padding-inline:14px}
  body[data-page="relations"] #relSvg{width:900px;height:650px;min-height:650px}
  body[data-page="relations"] .rel-canvas-box{overflow-x:auto;overscroll-behavior-x:contain}
  .rel-legend{font-size:11px;padding:12px 14px}
  .rel-side{min-height:0;padding:18px}
  .modal{width:calc(100vw - 20px);height:min(92vh,760px);border-radius:16px}
  .modal-body{display:flex;flex-direction:column;overflow:hidden;padding:0 16px 16px}
  .modal-visual{flex:none;max-height:238px;overflow:visible;padding-top:10px}
  .modal-visual .imgwrap{height:205px}
  .modal-visual img{height:205px}
  .modal-info{min-height:0;overflow-y:auto;padding:18px 3px 10px}
  .modal-info h2{font-size:25px}
  .stat-grid{gap:8px}
  .stat-item{padding:9px 10px}
  .baike-facts{grid-template-columns:1fr}
  .footer{margin-top:56px;padding-inline:18px}
}

/* 配音页移动端：将宽表重排为可扫描的资料卡，避免三列挤压成逐字换行。 */
@media (max-width:720px){
  .cast-table,
  .cast-table tbody,
  .cast-table tr,
  .cast-table td{display:block;width:100%;}
  .cast-table{border-collapse:separate;border-spacing:0;}
  .cast-table thead{display:none;}
  .cast-table tr{
    margin:10px 0;
    padding:13px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.72);
    box-shadow:0 8px 20px rgba(49,83,102,.045);
  }
  .cast-table td{
    padding:5px 0;
    border:0;
    line-height:1.65;
    text-align:left;
  }
  .cast-table td::before{
    display:inline-block;
    width:74px;
    margin-right:8px;
    color:var(--muted);
    font-size:11px;
    font-weight:600;
    letter-spacing:1px;
    vertical-align:top;
  }
  .cast-table td.va::before{content:"配音演员";}
  .cast-table td.main-r::before{content:"主要角色";}
  .cast-table td.minor-r::before{content:"次要角色";}
  .cast-table .va{font-size:15px;letter-spacing:1px;}
  .cast-table .main-r,.cast-table .minor-r{font-size:13px;}
}

/* 移动端弹窗：视觉列包含缩略图后再交给资料列，避免标题与缩略图重叠。 */
@media (max-width:720px){
  .modal-visual{max-height:294px;overflow:hidden;}
}

/* 关系线标签使用纸白描边，压住底下的线与渐变，提升密集区域的阅读清晰度。 */
.rel-elabel{
  paint-order:stroke;
  stroke:rgba(250,252,253,.96);
  stroke-width:6px;
  stroke-linejoin:round;
  font-weight:600;
}

/* 语录页：由瀑布流改为规整网格，同一行卡片自动对齐，避免格子高低错落造成视觉跳动。 */
.quote-wall{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  columns:initial;
  align-items:stretch;
}
.quote-wall .q-card{
  margin:0;
  min-height:150px;
  display:flex;
  flex-direction:column;
}
.quote-wall .q-card .who{margin-top:auto;}
@media (max-width:1080px){
  .quote-wall{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .quote-wall{grid-template-columns:1fr;}
}

/* 配音页：主要角色使用更深的暖金色，确保浅色背景上的文字对比度。 */
.cast-table .main-r{
  color:#9b6414;
  font-weight:600;
}

/* ============================================================
   首页主视觉再设计 · 收紧首屏节奏，建立作品海报感
   ============================================================ */
@media (min-width:1081px){
  .hero{
    min-height:clamp(720px,calc(100svh - 100px),860px);
    isolation:isolate;
    background:
      linear-gradient(180deg,rgba(255,255,255,.34),rgba(248,251,253,.08) 62%,rgba(232,241,246,.28)),
      radial-gradient(900px 540px at 72% 45%,rgba(137,204,224,.16),transparent 68%);
  }
  .hero::before{
    content:"";
    position:absolute;
    z-index:1;
    width:min(760px,58vw);
    aspect-ratio:1;
    right:-13vw;
    top:5%;
    border-radius:50%;
    background:radial-gradient(circle,transparent 56%,rgba(65,151,181,.10) 56.2%,rgba(65,151,181,.10) 56.45%,transparent 56.8%,transparent 68%,rgba(214,163,89,.12) 68.2%,rgba(214,163,89,.12) 68.4%,transparent 68.8%);
    pointer-events:none;
  }
  .hero::after{
    content:"";
    position:absolute;
    z-index:1;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg,transparent 4%,rgba(57,133,161,.24) 28%,rgba(213,164,91,.28) 72%,transparent 96%);
    pointer-events:none;
  }
  .hero-inner{
    max-width:1440px;
    padding:80px clamp(28px,4vw,56px) 70px;
    grid-template-columns:minmax(0,1.05fr) minmax(480px,.95fr);
    gap:clamp(42px,5vw,88px);
    transform:translateY(-10px);
  }
  .hero-inner > div:first-child{max-width:680px}
  .hero-tag{
    margin-bottom:18px;
    letter-spacing:2.4px;
    background:rgba(255,255,255,.58);
    box-shadow:0 8px 22px rgba(49,113,137,.06);
  }
  .hero h1{
    font-size:clamp(56px,6.2vw,88px);
    line-height:1.04;
    letter-spacing:clamp(4px,.55vw,8px);
  }
  .hero .sub-en{letter-spacing:6px;font-size:clamp(11px,1.05vw,14px)}
  .hero p.lead{max-width:610px;margin:24px 0 30px}
  .hero-mecha{
    width:100%;
    max-width:650px;
    justify-self:end;
    transform:translateY(2px);
  }
  .hero-mecha::before{
    content:"07  /  PARALLEL UNIVERSES";
    position:absolute;
    z-index:3;
    top:-24px;
    right:18px;
    color:#7897a5;
    font-size:10px;
    font-weight:700;
    letter-spacing:2.6px;
  }
  .hero-mecha .frame{
    padding:10px;
    border-radius:24px;
    border-color:rgba(43,112,145,.30);
    background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(225,239,245,.90));
    box-shadow:0 34px 80px rgba(61,101,122,.20),0 0 0 8px rgba(255,255,255,.35),inset 0 0 60px rgba(255,255,255,.70);
  }
  .hero-mecha .frame::after{inset:10px;border-radius:15px;border-color:rgba(43,112,145,.18)}
  .hero-mecha img{display:block;aspect-ratio:16/9;object-fit:cover;border-radius:15px;transform:scale(1.015);animation:floaty 7s ease-in-out infinite}
  .hero-mecha .caption{left:22px;bottom:22px;background:rgba(255,255,255,.86);border-color:rgba(43,112,145,.22);box-shadow:0 5px 16px rgba(61,101,122,.10)}
  .hero-scroll{bottom:16px;color:#6d8d9c}
  .hero-scroll::after{height:28px;background:linear-gradient(180deg,#4babc1,transparent)}
  .stats{margin-top:-30px}
}

@media (max-width:1080px){
  .hero-mecha::before{display:none}
}

@media (max-width:720px){
  .hero{background:linear-gradient(180deg,rgba(255,255,255,.30),transparent 60%)}
  .hero-inner{transform:none}
  .hero-mecha .frame{padding:7px;border-radius:18px}
  .hero-mecha img{display:block;border-radius:11px}
}

@media (max-width:720px){
  .hero .sub-en{font-size:10px;letter-spacing:3px;white-space:nowrap}
}

/* ============================================================
   关系网最终版 · 纯净画布、稳定交互、可读标签
   ============================================================ */
body[data-page="relations"] .rel-canvas-box{
  position:relative;
  overflow:hidden;
  border:1px solid #d8e7ec;
  background:
    radial-gradient(900px 460px at 50% 0%,rgba(226,244,247,.62),transparent 70%),
    #ffffff;
  box-shadow:0 18px 44px rgba(68,111,128,.10);
}
body[data-page="relations"] #relSvg{
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  background:transparent;
}
body[data-page="relations"] .rel-edge-layer,
body[data-page="relations"] .rel-node-layer{
  isolation:isolate;
}
body[data-page="relations"] .rel-edge-path{
  vector-effect:non-scaling-stroke;
  opacity:.44;
  transition:opacity .18s ease,stroke-width .18s ease;
}
body[data-page="relations"] .rel-edge-path[stroke-dasharray]{opacity:.34}
body[data-page="relations"] .rel-elabel{
  pointer-events:none;
  paint-order:stroke;
  stroke:#ffffff;
  stroke-width:6px;
  stroke-linejoin:round;
  font-size:12px !important;
  font-weight:600;
  opacity:.52;
  transition:opacity .18s ease,font-size .18s ease,font-weight .18s ease;
}
body[data-page="relations"] .rel-node{
  cursor:pointer;
  outline:none;
  opacity:1;
  transition:opacity .18s ease;
}
body[data-page="relations"] .rel-node circle{
  filter:none !important;
  transition:stroke-width .18s ease,fill .18s ease;
}
body[data-page="relations"] .rel-node text{
  pointer-events:none;
  paint-order:stroke;
  stroke:#ffffff;
  stroke-width:3px;
  stroke-linejoin:round;
}
body[data-page="relations"] .rel-node text:first-of-type{
  fill:#173f56 !important;
  font-weight:800;
}
body[data-page="relations"] .rel-node text:last-of-type{
  fill:#557789 !important;
  font-weight:600;
}
body[data-page="relations"] .rel-node.rel-muted{opacity:.16}
body[data-page="relations"] .rel-node.rel-connected{opacity:1}
body[data-page="relations"] .rel-node.rel-focus{opacity:1}
body[data-page="relations"] .rel-node.rel-focus circle{stroke-width:4px !important;fill:#f9fdfe}
body[data-page="relations"] .rel-node.rel-focus text:first-of-type{font-weight:900}
body[data-page="relations"] .rel-node:focus-visible circle{
  stroke:#0a91b0;
  stroke-width:4px;
}
body[data-page="relations"] .rel-edge-path.rel-active{
  opacity:.92;
  stroke-width:3.2;
}
body[data-page="relations"] .rel-edge-path.rel-muted{opacity:.045}
body[data-page="relations"] .rel-elabel.rel-active{
  opacity:.98;
  font-size:14px !important;
  font-weight:800;
}
body[data-page="relations"] .rel-elabel.rel-muted{opacity:.055}
body[data-page="relations"] .rel-legend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 18px;
  padding:13px 18px;
  border-top:1px solid #e1edf0;
  background:#ffffff;
  color:#607b89;
  font-size:12px;
  line-height:1.7;
}
body[data-page="relations"] .rel-legend span{white-space:nowrap}
body[data-page="relations"] .rel-legend .legend-node-label{margin-left:auto}
body[data-page="relations"] .rel-legend i{opacity:.88}
body[data-page="relations"] .rel-side{
  min-height:220px;
  padding:22px;
  background:#ffffff;
  border:1px solid #dce9ed;
  box-shadow:0 12px 30px rgba(68,111,128,.07);
}
body[data-page="relations"] .rel-side h3{color:#173f56}
body[data-page="relations"] .rel-side .r-title{color:#0b809d}
body[data-page="relations"] .rel-side .r-desc{color:#607b89;line-height:1.85}
body[data-page="relations"] .rel-side ul li{border-bottom-color:#e4eef1;line-height:1.7}
body[data-page="relations"] .rel-side ul li b{color:#17647e}
body[data-page="relations"] .rel-hint{color:#607b89}
body[data-page="relations"] .rel-hint b{color:#0b809d}
body[data-page="relations"] .mobile-rel-hint{display:none;margin-left:8px;color:#75909c}
body[data-page="relations"] .rel-wrap{gap:18px}

@media (max-width:720px){
  body[data-page="relations"] .rel-canvas-box{
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-color:#b7d3dc transparent;
  }
  body[data-page="relations"] #relSvg{
    width:1080px;
    min-width:1080px;
    height:675px;
    min-height:675px;
    max-width:none;
  }
  body[data-page="relations"] .rel-legend{
    position:sticky;
    left:0;
    width:100%;
    min-width:0;
    padding:12px 14px;
    gap:7px 12px;
    font-size:11px;
  }
  body[data-page="relations"] .rel-legend .legend-node-label{margin-left:0}
  body[data-page="relations"] .rel-side{padding:18px}
  body[data-page="relations"] .mobile-rel-hint{display:inline}
}

/* ============================================================
   全站背景音乐播放器 · 浅色悬浮面板
   ============================================================ */
.bgm-player{
  position:fixed;
  right:clamp(14px,2vw,28px);
  bottom:clamp(14px,2vw,26px);
  z-index:140;
  width:min(360px,calc(100vw - 28px));
  color:var(--text);
  background:rgba(255,255,255,.94);
  border:1px solid rgba(8,127,159,.20);
  border-radius:18px;
  box-shadow:0 18px 48px rgba(38,78,98,.18),0 3px 12px rgba(38,78,98,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
  transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;
}
.bgm-player:hover{border-color:rgba(8,127,159,.36);box-shadow:0 22px 58px rgba(38,78,98,.22),0 4px 14px rgba(38,78,98,.10)}
.bgm-player.is-playing{border-color:rgba(8,127,159,.34)}
.bgm-head{display:flex;align-items:center;gap:11px;padding:12px 12px 11px}
.bgm-play{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(8,127,159,.24);background:linear-gradient(145deg,#0b91b0,#087f9f);color:#fff;box-shadow:0 7px 16px rgba(8,127,159,.22);font-size:15px;line-height:1;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.bgm-play:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(8,127,159,.30)}
.bgm-play:active{transform:translateY(0) scale(.96)}
.bgm-meta{min-width:0;flex:1;line-height:1.3}
.bgm-kicker{display:flex;align-items:center;gap:6px;color:#6a8794;font-size:9px;letter-spacing:1.5px;font-weight:800}
.bgm-kicker i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#d59a28;box-shadow:0 0 0 3px rgba(213,154,40,.12)}
.bgm-player.is-playing .bgm-kicker i{background:#0b91b0;box-shadow:0 0 0 3px rgba(11,145,176,.13);animation:bgmPulse 1.5s ease-in-out infinite}
@keyframes bgmPulse{50%{transform:scale(.72);opacity:.45}}
.bgm-title{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:800;color:#173f56}
.bgm-status{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#78909b;font-size:10px}
.bgm-icon-btn,.bgm-control-btn{font-family:var(--font);cursor:pointer}
.bgm-collapse{flex:none;width:30px;height:30px;border:1px solid #dce9ed;border-radius:9px;background:#f8fbfc;color:#66818e;font-size:17px;line-height:1;transition:color .2s,border-color .2s,background .2s}
.bgm-collapse:hover{color:var(--cyan);border-color:rgba(8,127,159,.35);background:#edf8fa}
.bgm-body{padding:0 13px 12px;transition:opacity .2s ease,max-height .25s ease,padding .25s ease}
.bgm-player.is-collapsed .bgm-body{display:none}
.bgm-progress-row{display:flex;align-items:center;gap:10px}
.bgm-progress{--bgm-progress:0%;flex:1;min-width:0;height:4px;appearance:none;-webkit-appearance:none;border-radius:99px;outline:none;background:linear-gradient(90deg,var(--cyan) 0 var(--bgm-progress),#dcebee var(--bgm-progress) 100%);cursor:pointer}
.bgm-progress::-webkit-slider-thumb,.bgm-volume-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:var(--cyan);box-shadow:0 1px 5px rgba(8,127,159,.3);cursor:pointer}
.bgm-progress::-moz-range-thumb,.bgm-volume-range::-moz-range-thumb{width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:var(--cyan);box-shadow:0 1px 5px rgba(8,127,159,.3);cursor:pointer}
.bgm-time{display:flex;justify-content:space-between;gap:5px;min-width:76px;color:#7b919a;font-size:10px;font-variant-numeric:tabular-nums}
.bgm-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}
.bgm-track-controls{display:flex;align-items:center;gap:6px}
.bgm-control-btn{height:28px;min-width:29px;padding:0 8px;border:1px solid #deeaed;border-radius:8px;background:#fbfdfe;color:#52717f;font-size:12px;line-height:1;transition:color .2s,border-color .2s,background .2s,transform .2s}
.bgm-control-btn:hover{color:var(--cyan);border-color:rgba(8,127,159,.34);background:#eef9fb;transform:translateY(-1px)}
.bgm-list-toggle{font-size:11px;letter-spacing:1px}
.bgm-volume{display:flex;align-items:center;gap:7px;color:#77909b;font-size:10px;white-space:nowrap}
.bgm-volume-range{width:72px;height:4px;appearance:none;-webkit-appearance:none;border-radius:99px;outline:none;background:#dcebee;cursor:pointer}
.bgm-list{margin-top:11px;padding-top:8px;border-top:1px solid #e5eff1}
.bgm-list[hidden]{display:none}
.bgm-list-item{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;padding:8px 7px;border:0;border-radius:8px;background:transparent;color:#557482;text-align:left;font-family:var(--font);font-size:12px;cursor:pointer;transition:background .2s,color .2s}
.bgm-list-item:hover{background:#eff9fb;color:var(--cyan)}
.bgm-list-item.is-current{background:#eaf7f9;color:#087f9f;font-weight:700}
.bgm-list-index{color:#9ab0b9;font-size:10px;font-variant-numeric:tabular-nums}
.bgm-list-state{color:#9ab0b9;font-size:10px;font-weight:500}
.bgm-list-item.is-current .bgm-list-state{color:#087f9f}
.bgm-audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}
.bgm-player button:focus-visible,.bgm-player input:focus-visible{outline:2px solid #0b91b0;outline-offset:2px}

@media (max-width:720px){
  .bgm-player{right:12px;bottom:12px;width:min(350px,calc(100vw - 24px));border-radius:16px}
  .bgm-head{padding:10px}
  .bgm-body{padding:0 11px 11px}
  .bgm-controls{gap:8px}
  .bgm-volume span{display:none}
}

@media (prefers-reduced-motion:reduce){
  .bgm-player,.bgm-play,.bgm-control-btn{transition:none}
  .bgm-player.is-playing .bgm-kicker i{animation:none}
}