/* =========================================================
   ニセコイ｜偽恋 · 主题站 — styles.css
   视觉语言继承官方站：红白强对比 / 左侧红色竖栏 /
   斜切平行四边形按钮 / 45° 菱形角色导航 / slideIn + fadeIn
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* 官方品牌红家族 */
  --red-brand:#FB0605;
  --red-accent:#FE201D;
  --red-soft:#FC5150;
  --red-deep:#C70404;
  --orange-500:#FF8B00;

  /* 中性 / 辅助 */
  --gold-500:#E5B04C;
  --gold-300:#FFD83E;
  --blue-500:#4178CF;
  --sky-300:#62C6FF;
  --pink-300:#FF9FB4;
  --peach-200:#FFD69D;
  --cream-50:#FFF9F0;
  --paper:#FFFFFF;
  --ink-900:#23202B;
  --ink-600:#6B6478;
  --line:#E4E6E5;

  /* 字体栈 */
  --f-latin:'Questrial','Zen Maru Gothic','Noto Sans SC',sans-serif;
  --f-display:'Dela Gothic One','Zen Maru Gothic','Noto Sans SC',sans-serif;
  --f-body:'Zen Maru Gothic','Noto Sans SC',system-ui,-apple-system,sans-serif;
  --f-quote:'Shippori Mincho','Noto Serif SC','Zen Maru Gothic',serif;

  /* 版式 / 结构 */
  --sidebar-w:240px;
  --topbar-h:60px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1200px;
  --gut:56px;

  /* 角色主题色（JS 覆盖） */
  --theme:#FFD447;
  --theme-2:#FF9FB4;

  /* 圆角级别（v3 增量：--r-2 用于模态面板） */
  --r-2:14px;

  /* 官方装饰素材 */
  --ui-pattern:url("assets/images/official-ui/bg_pattern.gif");
  --ui-rule:url("assets/images/official-ui/line_list_top.gif");
  --ui-dot:url("assets/images/official-ui/icon_pickup.png");
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  background:var(--cream-50);
  color:var(--ink-900);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.7;
  letter-spacing:.03em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;}
button{font:inherit;color:inherit;background:none;border:0;}
a{color:inherit;}
h1,h2,h3{line-height:1.25;letter-spacing:.02em;font-weight:700;text-wrap:balance;}
p{text-wrap:pretty;}
ul,ol{list-style:none;}
[hidden]{display:none !important;}
::selection{background:var(--red-brand);color:#fff;}

:focus-visible{
  outline:3px solid var(--red-accent);
  outline-offset:3px;
  border-radius:2px;
}
.sidebar :focus-visible{outline-color:#fff;}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--red-brand);color:#fff;
  padding:12px 20px;text-decoration:none;font-weight:700;
  transition:top .25s var(--ease);
}
.skip-link:focus{top:12px;}

.pickup-dot{
  width:16px;height:16px;flex:0 0 auto;
  background:var(--ui-dot) no-repeat 0 0 / 16px 32px;
  display:inline-block;
}

/* ---------- 3. 动效基础（官方 slideIn / fadeIn） ---------- */
@keyframes slideIn{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:translateX(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes riseIn{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}

/* 无 JS 时全部可见；JS 就绪后才进入隐藏等待态 */
.js .reveal,
.js [data-stagger] > *{
  opacity:0;
  transform:translateX(40px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.js [data-stagger] > *{transition-delay:calc(var(--i,0) * 100ms);}
.js .reveal{transition-delay:0ms;}
.js .reveal.is-in,
.js [data-stagger].is-in > *{opacity:1;transform:translateX(0);}

/* ---------- 4. 左侧红色竖栏导航（官方签名 ②） ---------- */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;
  width:var(--sidebar-w);
  background:var(--red-brand);
  color:#fff;
  display:flex;flex-direction:column;
  z-index:60;
}
.sidebar__brand{
  background:var(--paper);
  padding:22px 20px;
  display:flex;justify-content:center;
  border-bottom:1px solid var(--red-soft);
}
.sidebar__logo img{width:150px;height:auto;}

.nav{flex:1 1 auto;position:relative;}
.nav__item{position:relative;border-top:1px solid var(--red-soft);}
.nav__item:last-child{border-bottom:1px solid var(--red-soft);}
.nav__link{
  position:relative;
  display:flex;flex-direction:column;gap:1px;
  padding:15px 26px 15px 30px;
  color:#fff;text-decoration:none;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.nav__link::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:#fff;transition:width .3s var(--ease);
}
.nav__link:hover,.nav__link:focus-visible{background:rgba(0,0,0,.14);}
.nav__link:hover::before,.nav__link:focus-visible::before{width:5px;}
.nav__link.is-active{background:var(--paper);color:var(--red-brand);}
.nav__link.is-active::before{width:5px;background:var(--red-brand);}
.nav__zh{font-weight:700;font-size:16px;letter-spacing:.14em;}
.nav__ja{
  font-family:var(--f-latin);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  opacity:.78;
}
.nav__link.is-active .nav__ja{opacity:.72;}

/* 悬停展开的白色子菜单面板 */
.nav__panel{
  position:absolute;left:100%;top:-1px;width:430px;
  background:rgba(255,255,255,.96);
  border-right:3px solid var(--red-brand);
  box-shadow:14px 10px 34px rgba(35,32,43,.22);
  padding:26px 30px 28px;
  color:var(--ink-900);
  opacity:0;visibility:hidden;transform:translateX(-14px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  z-index:40;pointer-events:none;
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel{
  opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto;
}
.nav__panel-kicker{
  font-family:var(--f-latin);font-size:11px;letter-spacing:.3em;
  color:var(--red-brand);margin-bottom:10px;
}
.nav__panel-text{font-size:14px;line-height:1.75;color:var(--ink-900);}
.nav__panel-meta{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;letter-spacing:.1em;color:var(--ink-600);
}

.sidebar__foot{padding:20px 26px 24px;border-top:1px solid var(--red-soft);}
.sidebar__foot-label{
  font-family:var(--f-latin);font-size:10px;letter-spacing:.3em;
  opacity:.8;margin-bottom:10px;
}
.share{display:flex;gap:10px;}
.share__btn{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.55);border-radius:50%;
  color:#fff;cursor:pointer;text-decoration:none;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.share__btn:hover{background:#fff;color:var(--red-brand);border-color:#fff;}
.share__btn svg{width:17px;height:17px;fill:currentColor;}
.sidebar__foot-note{
  margin-top:14px;font-family:var(--f-latin);
  font-size:10px;letter-spacing:.3em;opacity:.6;
}

/* 移动端顶栏 */
.topbar{
  display:none;position:fixed;left:0;right:0;top:0;height:var(--topbar-h);
  background:var(--red-brand);z-index:70;
  align-items:center;justify-content:space-between;
  padding:0 14px;box-shadow:0 2px 14px rgba(35,32,43,.22);
}
.topbar__logo{
  background:#fff;padding:6px 10px;display:block;
  border-radius:2px;line-height:0;
}
.topbar__logo img{width:96px;height:auto;}
.hamburger{
  width:46px;height:46px;display:grid;place-content:center;gap:5px;
  cursor:pointer;border-radius:2px;
}
.hamburger span{
  display:block;width:24px;height:2px;background:#fff;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.scrim{
  position:fixed;inset:0;background:rgba(35,32,43,.5);
  z-index:55;opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility .35s;
}
.scrim.is-open{opacity:1;visibility:visible;}
.share__btn.is-copied{background:#fff;color:var(--red-brand);border-color:#fff;}
body.is-locked{overflow:hidden;}

/* ---------- 5. 主体布局 ---------- */
.site{margin-left:var(--sidebar-w);overflow-x:clip;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}

/* ---------- 6. 斜切平行四边形按钮（官方签名 ③） ---------- */
.skew-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 30px;
  border:2px solid var(--red-accent);background:transparent;color:var(--red-accent);
  font-family:var(--f-body);
  font-weight:700;font-size:15px;letter-spacing:.14em;
  text-decoration:none;cursor:pointer;
  transform:skewX(10deg);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.skew-btn > span{display:inline-flex;align-items:center;transform:skewX(-10deg);}
.skew-btn:hover{background:var(--red-accent);color:#fff;}
.skew-btn--solid{background:var(--red-brand);border-color:var(--red-brand);color:#fff;}
.skew-btn--solid:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff;}
.skew-btn--icon{min-height:46px;width:46px;padding:0;}
.skew-btn--icon svg{width:18px;height:18px;fill:currentColor;}
.skew-btn:disabled{opacity:.42;cursor:not-allowed;}
.skew-btn:disabled:hover{background:transparent;color:var(--red-accent);border-color:var(--red-accent);}
.skew-btn--solid:disabled:hover{background:var(--red-brand);border-color:var(--red-brand);color:#fff;}

.skew-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 22px;
  border:2px solid var(--red-accent);background:transparent;color:var(--red-accent);
  font-weight:700;font-size:14px;letter-spacing:.12em;cursor:pointer;
  transform:skewX(10deg);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.skew-chip > span{transform:skewX(-10deg);}
.skew-chip:hover{background:rgba(254,32,29,.12);}
.skew-chip.is-active{background:var(--red-brand);border-color:var(--red-brand);color:#fff;}

.skew-tag{
  display:inline-block;padding:3px 12px;background:var(--red-brand);color:#fff;
  font-family:var(--f-latin);font-size:11px;letter-spacing:.18em;
  transform:skewX(10deg);
}
.skew-tag > span{display:inline-block;transform:skewX(-10deg);}
.skew-tag--alt{background:var(--blue-500);}

/* ---------- 7. HERO 主视觉 ---------- */
.hero{
  position:relative;
  height:100vh;min-height:640px;
  overflow:hidden;
  background:var(--cream-50);
  scroll-margin-top:0;
}
.hero__stage{
  position:absolute;inset:0;overflow:hidden;z-index:1;
  background:linear-gradient(180deg,#FFFFFF 0%,var(--cream-50) 100%);
}
/* 角色主题色光晕：background-color 可平滑过渡 */
.hero__stage::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:var(--theme,#FFD447);
  opacity:.3;
  transition:background-color .55s var(--ease);
  -webkit-mask-image:radial-gradient(74% 84% at 70% 26%,#000 0%,rgba(0,0,0,.32) 48%,transparent 80%);
  mask-image:radial-gradient(74% 84% at 70% 26%,#000 0%,rgba(0,0,0,.32) 48%,transparent 80%);
}
/* 官方 bg_*.png：斜切剧照拼贴层。multiply 让大面积留白融进底色 */
.hero__bg-wrap{
  position:absolute;right:22%;bottom:0;height:74%;width:auto;
  aspect-ratio:1140/1600;
  z-index:1;mix-blend-mode:multiply;opacity:.9;
  will-change:transform;
}
.hero__bg{
  width:100%;height:100%;
  object-fit:contain;object-position:right bottom;
}
.hero__pattern{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--ui-pattern) repeat;opacity:.34;
}
.hero__stage::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,
    var(--cream-50) 0%,
    rgba(255,249,240,.95) 32%,
    rgba(255,249,240,.6) 52%,
    rgba(255,249,240,0) 76%);
}
.hero__stand-wrap{
  position:absolute;right:1.5%;bottom:0;height:94%;z-index:4;
  will-change:transform;
}
.hero__stand{height:100%;width:auto;object-fit:contain;object-position:bottom;}
.hero__ribbon{
  position:absolute;left:-6%;bottom:0;width:46%;height:10px;z-index:6;
  background:var(--red-brand);
  transform:skewX(-24deg);transform-origin:left bottom;
  pointer-events:none;
}

.hero__inner{
  position:relative;z-index:5;
  height:100%;width:100%;max-width:1240px;margin:0 auto;
  padding:96px var(--gut) 96px;
  display:flex;flex-direction:column;justify-content:center;
}
.hero__text{max-width:660px;}
.hero__eyebrow{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-latin);font-size:12px;letter-spacing:.32em;
  color:var(--red-brand);margin-bottom:18px;
}
.hero__title{display:flex;flex-direction:column;gap:10px;}
.hero__title-main{
  font-family:var(--f-display);
  font-size:clamp(40px,5.6vw,86px);
  line-height:1.16;
  letter-spacing:-.005em;
  color:var(--ink-900);
  text-shadow:5px 5px 0 rgba(251,6,5,.1);
}
.hero__title-sub{
  font-family:var(--f-latin);font-size:13px;letter-spacing:.46em;
  color:var(--ink-600);text-transform:uppercase;
}
.hero__who{margin-top:24px;min-height:132px;}
.hero__char{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-bottom:12px;
}
.hero__char-name{
  position:relative;padding-left:18px;
  font-family:var(--f-body);font-size:23px;font-weight:900;
  letter-spacing:.1em;color:var(--ink-900);
}
.hero__char-name::before{
  content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:8px;
  background:var(--theme,#FFD447);
  transform:skewX(-10deg);
  transition:background-color .55s var(--ease);
}
.hero__romaji{
  font-family:var(--f-latin);font-size:12px;letter-spacing:.34em;
  color:var(--ink-600);
}
.hero__blurb{
  max-width:44ch;font-size:15px;line-height:1.85;color:var(--ink-600);
  border-left:3px solid var(--theme,var(--red-brand));
  padding-left:16px;
  transition:border-color .55s var(--ease);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px;}

/* 首屏进场（官方 slideIn + fadeIn 交错） */
.hero__eyebrow{animation:slideIn .5s var(--ease) both;}
.hero__title-main{animation:slideIn .5s var(--ease) .1s both;}
.hero__title-sub{animation:slideIn .5s var(--ease) .2s both;}
.hero__cta{animation:slideIn .5s var(--ease) .3s both;}
.hero__controls{animation:slideIn .5s var(--ease) .4s both;}

/* 角色切换时的进出场 */
.hero__who.is-entering .hero__char-name{animation:slideIn .5s var(--ease) both;}
.hero__who.is-entering .hero__romaji{animation:slideIn .5s var(--ease) .1s both;}
.hero__who.is-entering .hero__blurb{animation:slideIn .5s var(--ease) .2s both;}
.hero__bg.is-entering{animation:fadeIn .8s var(--ease) both;}
.hero__stand.is-entering{animation:slideIn .5s var(--ease) both;}

.hero__controls{
  display:flex;align-items:center;gap:30px;
  margin-top:44px;
}
.diamonds{display:flex;align-items:center;padding:12px 22px;}

/* 45° 菱形角色导航（官方签名 ④） */
.diamond{
  --d:88px;
  position:relative;
  width:var(--d);height:var(--d);
  flex:0 0 auto;
  background:var(--red-brand);
  border:2px solid transparent;
  transform:rotate(45deg);
  overflow:hidden;cursor:pointer;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),
             transform .3s var(--ease),background .3s var(--ease);
}
.diamond + .diamond{margin-left:-10px;}
.diamond img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  transform:rotate(-45deg) scale(1.42);
  opacity:.3;
  transition:opacity .3s var(--ease);
}
.diamond:hover img{opacity:.75;}
.diamond:hover{border-color:rgba(255,255,255,.9);}
.diamond.is-active img{opacity:1;}
.diamond.is-active{
  border-color:#fff;
  transform:rotate(45deg) scale(1.06);
  box-shadow:0 0 0 3px var(--theme,#FFD447),0 10px 24px rgba(35,32,43,.3);
  z-index:5;
}
.diamond:focus-visible{outline:3px solid #fff;outline-offset:0;}

.hero__counter{
  font-family:var(--f-latin);font-size:14px;letter-spacing:.26em;
  color:var(--ink-600);
}
.hero__counter-sep{margin:0 6px;opacity:.5;}

.scroll-hint{
  position:absolute;
  left:max(var(--gut),calc((100% - 1240px) / 2 + var(--gut)));
  bottom:34px;z-index:6;
  display:flex;align-items:center;gap:12px;
  text-decoration:none;
  font-family:var(--f-latin);font-size:11px;letter-spacing:.32em;
  color:var(--ink-600);
}
.scroll-hint__line{
  display:block;width:52px;height:2px;background:var(--red-brand);
  transform-origin:left center;
  animation:hintPulse 2.2s var(--ease) infinite;
}
@keyframes hintPulse{
  0%,100%{transform:scaleX(.35);opacity:.45;}
  50%{transform:scaleX(1);opacity:1;}
}
.scroll-hint:hover{color:var(--red-brand);}

/* ---------- 8. 通用区块 ---------- */
.sec{position:relative;padding:112px 0;scroll-margin-top:0;}
.sec-head{max-width:790px;margin-bottom:60px;}
.rule4{
  display:block;width:132px;height:4px;
  background:var(--ui-rule) repeat-x;
  margin-bottom:22px;
}
.sec-eyebrow{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-latin);font-size:12px;letter-spacing:.3em;
  color:var(--red-brand);text-transform:uppercase;margin-bottom:14px;
}
.sec-title{
  font-family:var(--f-display);
  font-size:clamp(28px,3.4vw,50px);
  color:var(--ink-900);
}
.sec-lead{margin-top:18px;font-size:15.5px;line-height:1.85;color:var(--ink-600);max-width:64ch;}
.sec--story .sec-lead{
  font-family:var(--f-quote);
  font-size:16.5px;line-height:2.05;color:var(--ink-900);max-width:56ch;
}

/* --- Story --- */
.sec--story{background:var(--cream-50);}
.timeline{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;
}
.tl-item{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  padding:36px 26px 30px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.tl-item::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--ui-rule) repeat-x;
}
.tl-item:hover{
  transform:translateY(-8px);
  border-color:rgba(251,6,5,.35);
  box-shadow:0 18px 36px rgba(35,32,43,.12);
}
.tl-item__no{
  display:block;font-family:var(--f-latin);font-size:46px;line-height:1;
  color:rgba(251,6,5,.16);margin-bottom:14px;
}
.tl-item__era{
  font-family:var(--f-latin);font-size:11px;letter-spacing:.24em;
  color:var(--red-brand);margin-bottom:8px;
}
.tl-item__title{font-size:20px;color:var(--ink-900);margin-bottom:12px;}
.tl-item__text{font-size:14px;line-height:1.85;color:var(--ink-600);}

/* --- Characters --- */
.sec--chara{background:var(--paper);}
.sec--chara .wrap{position:relative;}
.sec--chara .wrap::after{
  content:"";position:absolute;right:0;top:-70px;width:300px;height:500px;
  background:url("assets/images/official-ui/bg_key.png") no-repeat right top / contain;
  opacity:.5;pointer-events:none;z-index:0;
}
.sec--chara .sec-head,.sec--chara .chara-grid{position:relative;z-index:1;}

.chara-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
.chara-card{
  position:relative;overflow:hidden;
  background:var(--cream-50);
  border:2px solid var(--line);
  cursor:pointer;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.chara-card__tint{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,var(--tc,#FFD447) 0%,rgba(255,255,255,0) 62%);
  opacity:.2;transition:opacity .4s var(--ease);
}
.chara-card:hover,.chara-card:focus-visible{
  transform:translateY(-10px);
  border-color:var(--tc,#FFD447);
  box-shadow:0 22px 44px rgba(35,32,43,.16);
}
@supports (color:color-mix(in oklab,red 30%,transparent)){
  .chara-card:hover,.chara-card:focus-visible{
    box-shadow:0 22px 44px rgba(35,32,43,.16),
               0 0 0 4px color-mix(in oklab,var(--tc,#FFD447) 32%,transparent);
  }
}
.chara-card[data-char="chitoge"]{--tc:#FFD447;}
.chara-card[data-char="kosaki"]{--tc:#F4A7BB;}
.chara-card[data-char="tsugumi"]{--tc:#4A6FDC;}
.chara-card[data-char="marika"]{--tc:#F0A35A;}
.chara-card:hover .chara-card__tint,.chara-card:focus-visible .chara-card__tint{opacity:.42;}

.chara-card__pic{
  position:relative;z-index:1;
  height:400px;display:flex;align-items:flex-end;justify-content:center;
  padding:14px 10px 0;
}
.chara-card__pic img{
  max-height:100%;width:auto;max-width:100%;
  transition:transform .45s var(--ease);
  filter:drop-shadow(0 12px 18px rgba(35,32,43,.16));
}
.chara-card:hover .chara-card__pic img{transform:translateY(-10px) scale(1.03);}

.chara-card__body{position:relative;z-index:1;padding:20px 22px 26px;}
.chara-card__name{width:150px;height:auto;margin-bottom:10px;}
.chara-card__tag{
  font-size:12px;letter-spacing:.12em;color:var(--red-brand);margin-bottom:10px;
}
.chara-card__text{font-size:13.5px;line-height:1.8;color:var(--ink-600);}

.chara-card__facts{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:rgba(255,255,255,.97);
  border-top:3px solid var(--tc,#FFD447);
  padding:18px 22px 20px;
  transform:translateY(102%);
  transition:transform .45s var(--ease);
}
.chara-card:hover .chara-card__facts,
.chara-card:focus-visible .chara-card__facts{transform:translateY(0);}
.chara-card__facts li{
  display:flex;gap:10px;font-size:12.5px;line-height:1.7;color:var(--ink-900);
  padding:5px 0;border-bottom:1px dashed var(--line);
}
.chara-card__facts li:last-child{border-bottom:0;}
.chara-card__facts li span{
  flex:0 0 62px;color:var(--ink-600);letter-spacing:.1em;
}

/* --- Scenes --- */
.sec--scenes{background:var(--cream-50);overflow:hidden;}
.sec--scenes::before{
  content:"";position:absolute;right:0;top:0;width:260px;height:100%;
  background:url("assets/images/official-ui/bg_parts.png") no-repeat right top;
  background-size:260px auto;
  opacity:.28;pointer-events:none;
}
.sec--scenes .wrap{position:relative;z-index:1;}

.filters{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:32px;}
.scene-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
}
.scene{
  position:relative;display:block;padding:0;cursor:pointer;
  border:2px solid var(--paper);background:var(--ink-900);
  overflow:hidden;aspect-ratio:300/169;
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.scene img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease),opacity .35s var(--ease);
}
.scene__veil{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:12px 14px;
  background:linear-gradient(180deg,rgba(251,6,5,0) 40%,rgba(251,6,5,.9) 100%);
  opacity:0;transition:opacity .35s var(--ease);
}
.scene__cap{
  font-family:var(--f-latin);font-size:11px;letter-spacing:.22em;color:#fff;
}
.scene:hover,.scene:focus-visible{border-color:var(--red-brand);transform:translateY(-4px);}
.scene:hover img,.scene:focus-visible img{transform:scale(1.08);}
.scene:hover .scene__veil,.scene:focus-visible .scene__veil{opacity:1;}
.scene.is-hidden{display:none;}

/* --- Music --- */
.sec--music{background:var(--paper);}
.music-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:44px;
  border-top:1px solid var(--line);
  padding-top:44px;
}
.music-group__label{
  font-family:var(--f-latin);font-size:11px;letter-spacing:.34em;
  color:var(--red-brand);margin-bottom:16px;
}
.music-list{border-top:1px solid var(--line);}
.music-row{
  display:grid;
  grid-template-columns:44px 58px minmax(0,1fr) 46px 42px;
  align-items:center;gap:14px;
  padding:16px 12px;
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.music-row:hover{background:rgba(251,6,5,.06);transform:translateX(4px);}
.music-row__no{
  font-family:var(--f-latin);font-size:15px;color:var(--ink-600);
}
.music-row__main{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.music-row__main strong{
  font-family:var(--f-body);font-size:16px;font-weight:700;
  color:var(--ink-900);
}
.music-row__main em{
  font-style:normal;font-size:12px;letter-spacing:.06em;color:var(--ink-600);
}
.new-badge{width:16px;height:16px;}

.fav-btn{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  color:var(--ink-600);
  transition:background .3s var(--ease);
}
.fav-btn svg{width:17px;height:17px;fill:currentColor;opacity:.4;transition:opacity .3s var(--ease);}
.fav-btn:hover{background:rgba(35,32,43,.07);}
.fav-btn:hover svg{opacity:.75;}
.fav-btn[aria-pressed="true"]{color:var(--red-brand);}
.fav-btn[aria-pressed="true"] svg{opacity:1;}

/* --- World（红底区块，官方红白 7:3 的强对比） --- */
.sec--world{background:var(--red-brand);color:#fff;}
.sec--world::after{
  content:"";position:absolute;inset:0;
  background:var(--ui-pattern) repeat;opacity:.14;pointer-events:none;
}
.sec--world .wrap{position:relative;z-index:1;}
.sec--world .rule4{background:#fff;}
.sec--world .sec-title{color:#fff;}
.sec--world .sec-lead{color:rgba(255,255,255,.9);}
.sec--world .sec-eyebrow{color:#fff;}
.sec--world .pickup-dot{filter:brightness(0) invert(1);}

.world-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.world-card{
  position:relative;background:var(--paper);color:var(--ink-900);
  padding:38px 30px 34px;
  border-bottom:5px solid rgba(255,255,255,.35);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.world-card:hover{
  transform:translateY(-10px);
  box-shadow:0 24px 46px rgba(0,0,0,.28);
}
.world-card__mark{
  position:absolute;right:22px;top:16px;
  font-family:var(--f-latin);font-size:56px;line-height:1;
  color:rgba(251,6,5,.14);
}
.world-card__title{
  font-family:var(--f-display);
  font-size:24px;color:var(--ink-900);margin-bottom:6px;
}
.world-card__sub{
  font-family:var(--f-latin);font-size:11px;letter-spacing:.26em;
  color:var(--red-brand);margin-bottom:16px;text-transform:uppercase;
}
.world-card__text{font-size:14px;line-height:1.85;color:var(--ink-600);}

/* ---------- 9. Footer ---------- */
.footer{
  position:relative;
  background:var(--paper);
  border-top:4px solid var(--red-brand);
  padding:64px 0 84px;
}
.footer__pattern{
  position:absolute;inset:0;
  background:var(--ui-pattern) repeat;opacity:.4;pointer-events:none;
}
.footer__inner{position:relative;z-index:1;text-align:center;}
.footer__logo{display:inline-block;margin-bottom:16px;}
.footer__logo img{width:132px;height:auto;}
.footer__claim{
  font-family:var(--f-latin);font-size:12px;letter-spacing:.34em;
  color:var(--red-brand);margin-bottom:20px;
}
.footer__disclaimer{
  max-width:62ch;margin:0 auto 22px;
  font-size:12.5px;line-height:1.9;color:var(--ink-600);
}
.footer__copyright{margin:0 auto 26px;width:225px;height:auto;opacity:.8;}
.footer__nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
  padding-top:22px;border-top:1px solid var(--line);
  max-width:640px;margin:0 auto;
}
.footer__nav a{
  font-size:13px;letter-spacing:.14em;color:var(--ink-600);
  text-decoration:none;padding:6px 2px;
  transition:color .3s var(--ease);
}
.footer__nav a:hover{color:var(--red-brand);}

.pagetop{
  position:fixed;right:26px;bottom:26px;z-index:50;
  width:60px;height:60px;padding:0;cursor:pointer;border-radius:50%;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  filter:drop-shadow(0 8px 18px rgba(35,32,43,.28));
}
.pagetop.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.pagetop img{width:100%;height:100%;object-fit:contain;}
.pagetop:hover{transform:translateY(-4px) scale(1.04);}

/* ---------- 10. 灯箱 ---------- */
.lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(24,20,30,.9);}
.lightbox__body{
  position:relative;z-index:1;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:72px 84px;
}
.lightbox__figure{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  animation:fadeIn .35s var(--ease) both;
  max-width:100%;max-height:100%;
}
.lightbox__img{
  max-width:min(88vw,900px);
  max-height:76vh;
  width:auto;height:auto;
  object-fit:contain;
  background:var(--paper);
  box-shadow:0 26px 60px rgba(0,0,0,.5);
}
.lightbox__cap{
  font-family:var(--f-latin);font-size:12px;letter-spacing:.28em;
  color:rgba(255,255,255,.85);text-align:center;
}
.lightbox__close{
  position:absolute;top:22px;right:26px;z-index:3;
  width:52px;height:52px;padding:0;cursor:pointer;
  transition:transform .3s var(--ease);
}
.lightbox__close img{width:100%;height:100%;object-fit:contain;}
.lightbox__close:hover{transform:rotate(90deg) scale(1.06);}
.lightbox__nav{
  position:absolute;top:50%;z-index:3;
  width:52px;height:64px;padding:0;cursor:pointer;
  display:grid;place-items:center;
  transform:translateY(-50%);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.lightbox__nav img{width:32px;height:64px;object-fit:contain;}
.lightbox__nav--prev{left:16px;}
.lightbox__nav--next{right:16px;}
.lightbox__nav:hover{transform:translateY(-50%) scale(1.08);}

/* ---------- 11. 响应式：平板 ---------- */
@media (max-width:1319px){
  :root{--gut:44px;}
  .hero__title-main{font-size:clamp(36px,4.6vw,66px);}
  .hero__stand-wrap{height:86%;right:0;}
  .chara-card__pic{height:340px;}
  .diamond{--d:84px;}
}

@media (max-width:1023px){
  /* 左栏折叠为顶部红条 + 汉堡抽屉 */
  :root{--gut:32px;}
  .topbar{display:flex;}
  .site{margin-left:0;}
  .sidebar{
    top:var(--topbar-h);
    height:calc(100% - var(--topbar-h));
    width:min(84vw,330px);
    transform:translateX(-100%);
    transition:transform .4s var(--ease);
    box-shadow:10px 0 34px rgba(35,32,43,.28);
  }
  .sidebar.is-open{transform:translateX(0);}
  .sidebar__brand{display:none;}
  .nav__panel{display:none;}
  .nav__link{padding:17px 26px 17px 30px;}
  .sec,.hero{scroll-margin-top:calc(var(--topbar-h) + 8px);}
  .hero{padding-top:var(--topbar-h);}

  .hero__title-main{font-size:clamp(34px,6vw,58px);}
  .hero__stand-wrap{height:78%;right:0;}
  .hero__stage::after{
    background:linear-gradient(95deg,
      var(--cream-50) 0%,
      rgba(255,249,240,.95) 40%,
      rgba(255,249,240,.5) 62%,
      rgba(255,249,240,0) 82%);
  }
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr));}
  .chara-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .scene-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .world-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
  .music-panel{grid-template-columns:1fr;gap:36px;}
  .sec--chara .wrap::after{display:none;}
  .diamond{--d:80px;}
}

/* ---------- 12. 响应式：手机 ---------- */
@media (max-width:767px){
  :root{--gut:20px;}
  .sec{padding:76px 0;}
  .sec-head{margin-bottom:40px;}
  .sec-title{font-size:clamp(24px,7.4vw,32px);}

  .hero{
    height:auto;min-height:100vh;min-height:100svh;
    padding:calc(var(--topbar-h) + 36px) 0 20px;
    display:flex;flex-direction:column;
  }
  .hero__inner{
    height:auto;flex:1 1 auto;padding:0 var(--gut);
    justify-content:flex-start;
  }
  .hero__bg-wrap{inset:-6% -14% -6% -14%;}
  .hero__stage::before{
    -webkit-mask-image:radial-gradient(96% 58% at 62% 76%,#000 0%,rgba(0,0,0,.3) 50%,transparent 82%);
    mask-image:radial-gradient(96% 58% at 62% 76%,#000 0%,rgba(0,0,0,.3) 50%,transparent 82%);
  }
  .hero__bg-wrap{right:-10%;bottom:0;height:44%;opacity:.72;}
  .hero__stage::after{
    background:linear-gradient(180deg,
      rgba(255,249,240,.97) 0%,
      rgba(255,249,240,.94) 52%,
      rgba(255,249,240,.5) 76%,
      rgba(255,249,240,.14) 100%);
  }
  .hero__stand-wrap{
    position:absolute;right:0;bottom:0;height:50%;z-index:4;
  }
  .hero__pattern{opacity:.28;}
  .hero__ribbon{width:62%;height:8px;left:-8%;}
  .hero__text{max-width:100%;}
  .hero__title-main{font-size:clamp(32px,10.5vw,46px);text-shadow:3px 3px 0 rgba(251,6,5,.1);}
  .hero__title-sub{letter-spacing:.34em;font-size:11px;}
  .hero__who{min-height:0;margin-top:20px;}
  .hero__char-name{font-size:20px;}
  .hero__blurb{font-size:14px;max-width:100%;}
  .hero__cta{gap:12px;margin-top:26px;}
  .skew-btn{min-height:48px;padding:0 22px;font-size:14px;}

  /* 手机端：菱形切换器改为贴底控制条，避免压在角色头部 */
  .hero__controls{
    position:absolute;left:var(--gut);right:var(--gut);bottom:20px;z-index:6;
    margin-top:0;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;
  }
  .diamond{--d:62px;}
  .diamond + .diamond{margin-left:-12px;}
  .diamonds{padding:10px 14px;}
  .hero__counter{font-size:13px;letter-spacing:.2em;}
  .scroll-hint{display:none;}

  .timeline{grid-template-columns:1fr;gap:18px;}
  .chara-grid{grid-template-columns:1fr;gap:22px;}
  .chara-card__pic{height:330px;}
  .scene-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .filters{gap:10px;}
  .skew-chip{min-height:44px;padding:0 16px;font-size:13px;}

  .music-row{
    grid-template-columns:32px 50px minmax(0,1fr) 42px;
    gap:10px;padding:14px 6px;
  }
  .fav-btn{display:none;}
  .music-row__main strong{font-size:15px;}

  .world-grid{grid-template-columns:1fr;}
  .world-card{padding:28px 22px 26px;}
  .world-card__mark{font-size:44px;}

  .footer{padding:52px 0 72px;}
  .pagetop{right:16px;bottom:16px;width:52px;height:52px;}

  .lightbox__body{padding:64px 16px;}
  .lightbox__img{max-width:92vw;}
  .lightbox__close{top:12px;right:12px;width:44px;height:44px;}
  .lightbox__nav{width:44px;height:56px;}
  .lightbox__nav img{width:26px;height:52px;}
  .lightbox__nav--prev{left:2px;}
  .lightbox__nav--next{right:2px;}
}

@media (max-width:400px){
  .hero__title-main{font-size:clamp(28px,9.6vw,38px);}
  .diamond{--d:66px;}
  .diamond + .diamond{margin-left:-10px;}
}

/* 短屏（笔记本）时压缩左栏密度 */
@media (min-width:1024px) and (max-height:740px){
  .nav__link{padding:12px 26px 12px 30px;}
  .sidebar__brand{padding:16px 20px;}
  .sidebar__logo img{width:126px;}
  .sidebar__foot{padding:14px 26px 18px;}
}

/* ---------- 13. 无障碍：减弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .js .reveal,
  .js [data-stagger] > *{opacity:1 !important;transform:none !important;}
  .chara-card__facts{transform:translateY(0) !important;position:static;border-top-width:3px;}
}