/* =====================================================================
   好色教主 Project Eros — Teaser site component styles
   Depends on colors_and_type.css tokens.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--rose-300); color: #fff; }

.wrap { width: min(1240px, 92vw); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 132px) 0; position: relative; }

/* ---------- Section-opening ornament (gold rule + diamond crest) ---------- */
.section::before, .footer::before { content:""; position:absolute; top:34px; left:50%; transform:translateX(-50%);
  width:min(760px, 84vw); height:1px; pointer-events:none; opacity:.6;
  background:linear-gradient(90deg, transparent, var(--gold-500) 22%, var(--gold-200) 44%, transparent 47%, transparent 53%, var(--gold-200) 56%, var(--gold-500) 78%, transparent); }
.section::after, .footer::after { content:""; position:absolute; top:34px; left:50%; transform:translate(-50%,-50%);
  width:130px; height:24px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 24'%3E%3Cpath d='M65 3l6.5 9-6.5 9-6.5-9z' fill='%23EFD9A4' stroke='%23A67C2E' stroke-width='1'/%3E%3Cg stroke='%23C9A24B' stroke-width='1.2' fill='none'%3E%3Cpath d='M40 12h14M76 12h14'/%3E%3C/g%3E%3Ccircle cx='34' cy='12' r='2' fill='%23C9A24B'/%3E%3Ccircle cx='96' cy='12' r='2' fill='%23C9A24B'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- Ambient gold dust ---------- */
.golddust { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.golddust i { position:absolute; left:var(--x); bottom:-14px; width:var(--s); height:var(--s); border-radius:50%;
  background:radial-gradient(circle, rgba(246,231,194,.95) 0%, rgba(244,217,139,.4) 55%, transparent 72%);
  opacity:0; animation:dustRise var(--d) linear var(--dl) infinite; }
@keyframes dustRise {
  0%   { transform:translateY(0) translateX(0); opacity:0; }
  10%  { opacity:var(--o,.65); }
  80%  { opacity:var(--o,.65); }
  100% { transform:translateY(-92vh) translateX(34px); opacity:0; }
}
.milestones > .wrap, .gallery > .wrap, .story > .wrap { position:relative; z-index:2; }
@media (prefers-reduced-motion: reduce) { .golddust { display:none; } }

/* ---------- Reusable ornaments --------------------------------------- */
.spark { display:inline-block; width:1em; height:1em; vertical-align:-.12em;
  background: var(--gold-500);
  -webkit-mask: var(--spark-mask) center/contain no-repeat;
          mask: var(--spark-mask) center/contain no-repeat; }
:root { --spark-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 6.2 4.8 10.6 12 12-7.2 1.4-11.3 5.8-12 12-.7-6.2-4.8-10.6-12-12C7.2 10.6 11.3 6.2 12 0z'/%3E%3C/svg%3E"); }

.divider { display:flex; align-items:center; justify-content:center; gap:18px; color:var(--gold-500); }
.divider::before, .divider::after {
  content:""; height:1px; width:min(220px, 26vw);
  background: var(--grad-gold-line);
}
.divider .gem { width:11px; height:11px; background:var(--gold-500); transform:rotate(45deg);
  box-shadow: 0 0 0 4px var(--ivory), 0 0 0 5px rgba(201,162,75,.4); }

/* gold hairline frame used on cards & panels */
.framed { position:relative; }
.framed::after {
  content:""; position:absolute; inset:7px; border:1px solid rgba(201,162,75,.55);
  border-radius: inherit; pointer-events:none;
}

/* corner filigree marks (four ✦ at panel corners) */
.cornered > .cn { position:absolute; width:14px; height:14px; color:var(--gold-500);
  background:var(--gold-500);
  -webkit-mask: var(--spark-mask) center/contain no-repeat; mask: var(--spark-mask) center/contain no-repeat;
  opacity:.85; }
.cornered > .cn.tl{ top:12px; left:12px;} .cornered > .cn.tr{ top:12px; right:12px;}
.cornered > .cn.bl{ bottom:12px; left:12px;} .cornered > .cn.br{ bottom:12px; right:12px;}

/* ---------- Eyebrow heading group ------------------------------------ */
.eyebrow { display:flex; align-items:center; gap:12px; justify-content:center;
  font-family:var(--font-latin-display); font-weight:700; letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--gold-600); font-size:.82rem; }
.eyebrow::before, .eyebrow::after { content:""; width:34px; height:1px; background:var(--gold-500); opacity:.7; }
.sec-head { text-align:center; margin-bottom: clamp(36px,5vw,60px); }
.sec-head h2 { font-family:var(--font-display); font-weight:900; font-size:var(--fs-h1);
  margin:.4em 0 .2em; color:var(--wine-800); line-height:1.1; }
.sec-head p { font-size:var(--fs-lead); color:var(--ink-500); margin:0; }

/* =====================================================================
   Buttons — scalloped hexagonal lozenge with gold edge + corner gems
   ===================================================================== */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: 1.05em 2.4em; font-family:var(--font-display); font-weight:700; font-size:1.06rem;
  letter-spacing:.06em; color:#fff; border:none; background:transparent;
  clip-path: polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);
  transition: transform .18s ease, filter .18s ease; }
/* inner highlight stroke follows the lozenge */
.btn::after { content:""; position:absolute; inset:3px; clip-path: inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.btn .gem-l, .btn .gem-r { position:absolute; top:50%; width:8px; height:8px; background:var(--gold-200);
  transform:translateY(-50%) rotate(45deg); box-shadow:0 0 0 1px rgba(255,255,255,.5); z-index:2; }
.btn .gem-l{ left:7px;} .btn .gem-r{ right:7px;}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(0) scale(.985); }

/* fill applied directly on the element; outer glow via drop-shadow so it follows the clip */
.btn--rose { background: var(--grad-rose-h); color:#fff; text-shadow:0 1px 6px rgba(94,19,49,.5);
  filter: drop-shadow(0 12px 24px rgba(216,60,107,.42)); }
.btn--rose:hover { filter: drop-shadow(0 14px 28px rgba(216,60,107,.5)) brightness(1.06); }
.btn--gold { background: var(--grad-ivory); color: var(--wine-800); text-shadow:none;
  filter: drop-shadow(0 10px 22px rgba(94,19,49,.22)); }
.btn--gold::after { box-shadow: inset 0 0 0 1.5px rgba(201,162,75,.7); }
.btn--ghost { background: rgba(255,251,247,.9); color: var(--wine-800); }
.btn--lg { padding:1.2em 3em; font-size:1.18rem; }
.btn--sm { padding:.7em 1.4em; font-size:.92rem; }

/* gold outline pill (secondary, used in nav) */
.pill { display:inline-flex; align-items:center; gap:.5em; padding:.68em 1.5em; border-radius:var(--r-pill);
  font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.04em;
  color:#fff; background:var(--grad-rose-h); box-shadow: var(--sh-rose-glow);
  transition: transform .16s, filter .16s; }
.pill:hover { transform:translateY(-1px); filter:brightness(1.06); }

/* R18 badge */
.r18 { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-latin-display);
  font-weight:800; font-size:.76rem; letter-spacing:.04em; color:#fff; background:var(--crimson);
  border:1px solid rgba(255,255,255,.6); border-radius:6px; padding:.34em .56em; line-height:1; }

/* =====================================================================
   Top navigation
   ===================================================================== */
.nav { position:fixed; inset:0 0 auto 0; z-index:60;
  background: linear-gradient(180deg, rgba(252,246,239,.88) 0%, rgba(252,243,236,.66) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,162,75,.28);
  transition: background .3s, box-shadow .3s, backdrop-filter .3s, border-color .3s, transform .38s cubic-bezier(.4,.7,.3,1); }
.nav.nav--hidden { transform: translateY(-100%); }
.nav__inner { display:flex; align-items:center; gap:22px; height:78px;
  width:min(1320px,94vw); margin-inline:auto; }
.nav.scrolled { background: rgba(252,246,239,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(201,162,75,.45);
  box-shadow: 0 1px 0 rgba(201,162,75,.5), 0 12px 32px -22px rgba(94,19,49,.55); }
.nav__logo { display:flex; align-items:center; height:46px; }
.nav__logo img { height:42px; width:auto; filter: drop-shadow(0 2px 6px rgba(94,19,49,.25)); }
.nav__links { display:flex; gap:4px; margin-left:auto; }
.nav__links a { position:relative; padding:.6em 1.18em; font-family:var(--font-body); font-weight:600;
  font-size:1.12rem; color:var(--ink-900); transition:color .18s; }
.nav__links a::after { content:""; position:absolute; left:50%; bottom:.25em; width:0; height:2px;
  background:var(--grad-gold); transform:translateX(-50%); transition:width .22s; border-radius:2px; }
.nav__links a:hover { color:var(--wine-800); }
.nav__links a:hover::after { width:60%; }
.nav__right { display:flex; align-items:center; gap:12px; }
.nav__right .pill { font-family:var(--font-body); }
.nav.top .nav__links a { text-shadow: 0 1px 2px rgba(255,251,247,.7); }
.nav__burger { display:none; width:46px; height:46px; border-radius:50%; border:1px solid rgba(201,162,75,.6);
  background:var(--grad-rose-h); color:#fff; align-items:center; justify-content:center; }
.nav__burger span { display:block; width:18px; height:2px; background:#fff; position:relative; }
.nav__burger span::before, .nav__burger span::after { content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; }
.nav__burger span::before { top:-6px; } .nav__burger span::after { top:6px; }

/* mobile drawer */
.drawer { position:fixed; inset:0; z-index:70; display:none; }
.drawer.open { display:block; }
.drawer__scrim { position:absolute; inset:0; background:rgba(46,10,24,.5); backdrop-filter:blur(3px); }
.drawer__panel { position:absolute; top:0; right:0; height:100%; width:min(82vw,340px);
  background:var(--grad-ivory); box-shadow:var(--sh-pop); padding:84px 28px 28px;
  display:flex; flex-direction:column; gap:6px; border-left:1px solid rgba(201,162,75,.5); }
.drawer__panel a { padding:.85em .4em; font-family:var(--font-display); font-weight:600; font-size:1.2rem;
  color:var(--ink-900); border-bottom:1px solid rgba(201,162,75,.25); }
.drawer__panel .btn--rose { margin-top:18px; }
.drawer__close { position:absolute; top:22px; right:22px; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(201,162,75,.6); background:#fff; color:var(--wine-800); font-size:1.3rem; }

/* =====================================================================
   Hero
   ===================================================================== */
.hero { position:relative; min-height: 100svh; display:flex; align-items:center;
  padding: 120px 0 70px; overflow:hidden; isolation:isolate; }
.hero__bg { position:absolute; inset:0; z-index:0; overflow:hidden; background:#2a0a18; }
/* blurred fill so there are never empty bars */
.hero__blur { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center; filter: blur(9px) brightness(.97) saturate(1.06); transform:scale(1.04); }
/* the full KV — contained so the whole cast is always visible, never cropped */
.hero__kv { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center; }
@media (min-aspect-ratio: 16/9) { .hero__kv { object-position:center; } }
.hero__bg::after { content:""; position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(96% 70% at 13% 50%, rgba(252,246,239,.62) 0%, rgba(252,246,239,.26) 30%, rgba(252,246,239,0) 52%),
    linear-gradient(180deg, rgba(252,246,239,.20) 0%, rgba(252,246,239,0) 24% 72%, rgba(46,10,24,.38) 100%); }
.hero__petals { position:absolute; inset:0; z-index:3; pointer-events:none; }
.hero__petal { position:absolute; width:14px; height:14px; background:var(--rose-300); opacity:.5;
  border-radius:60% 0 60% 0; filter: blur(.3px); animation: fall linear infinite; }
@keyframes fall { 0%{ transform: translateY(-10vh) rotate(0); opacity:0; }
  10%{opacity:.55;} 100%{ transform: translateY(112vh) rotate(320deg); opacity:0; } }

.hero .wrap { position:relative; z-index:3; }
.hero__content { max-width: 640px; }
.hero__logo { width: 100%; display:block; filter: drop-shadow(0 10px 26px rgba(94,19,49,.4)); }
.hero__logoWrap { position:relative; display:block; width: min(560px, 82%); line-height:0; margin-bottom:.4em; }
.hero__logoSheen { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(112deg, transparent 43%, rgba(255,255,255,.9) 50%, transparent 57%);
  background-size:250% 100%; background-repeat:no-repeat; background-position:160% 0;
  -webkit-mask:url("assets/logo_cn_transparent.png") center/contain no-repeat;
          mask:url("assets/logo_cn_transparent.png") center/contain no-repeat;
  animation: logoSheen 7s ease-in-out infinite; }
@keyframes logoSheen { 0%, 66% { background-position:160% 0; } 88%, 100% { background-position:-60% 0; } }
@media (prefers-reduced-motion: reduce) { .hero__logoSheen { display:none; } }
.hero__sub { display:flex; align-items:center; gap:12px; margin: 6px 0 18px; }
.hero__sub .r18 { font-size:.78rem; }
.hero__sub .tag { font-family:var(--font-display); font-weight:600; color:var(--wine-800);
  letter-spacing:.16em; font-size:.96rem; }
.hero h1 { font-family:var(--font-display); font-weight:900; line-height:1.16;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem); color:var(--ink-900); margin:.1em 0 .35em; text-wrap:balance; }
.hero h1 em { font-style:normal; color:var(--crimson); }
.hero__lead { font-size:var(--fs-lead); color:var(--ink-700); line-height:1.7; margin:0 0 30px; max-width:34ch; }
.hero__cta { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.cta-r18 { position:relative; display:inline-flex; align-items:center; }
.seal-r18 { position:absolute; top:0; right:0;
  height:43px; width:auto; flex:none; z-index:3; pointer-events:none;
  transform:translate(42%,-42%) rotate(12deg);
  animation: sealBreath 2.6s ease-in-out infinite;
  transition: transform .25s ease; }
@keyframes sealBreath {
  0%,100% { transform:translate(42%,-42%) rotate(12deg) scale(1);
    filter:drop-shadow(0 3px 7px rgba(94,19,49,.45)) drop-shadow(0 0 0 rgba(244,217,139,0)); }
  50%     { transform:translate(42%,-42%) rotate(12deg) scale(1.1);
    filter:drop-shadow(0 4px 9px rgba(94,19,49,.5)) drop-shadow(0 0 8px rgba(244,217,139,.65)); }
}
.cta-r18:hover .seal-r18 { animation-play-state:paused;
  transform:translate(42%,-42%) rotate(18deg) scale(1.12);
  filter:drop-shadow(0 4px 9px rgba(94,19,49,.5)) drop-shadow(0 0 9px rgba(244,217,139,.7)); }
@media (prefers-reduced-motion: reduce) { .seal-r18 { animation:none; filter:drop-shadow(0 3px 7px rgba(94,19,49,.45)); } }
.hero__note { margin-top:18px; font-size:.84rem; color:var(--ink-500); display:flex; align-items:center; gap:8px; }

.scrollcue { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--wine-800);
  font-family:var(--font-latin-display); font-size:.66rem; letter-spacing:.3em; }
.scrollcue i { width:1px; height:34px; background:linear-gradient(var(--gold-500), transparent); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100%{ transform:scaleY(.5); transform-origin:top; opacity:.4;} 50%{ transform:scaleY(1); opacity:1;} }

/* ---------- Countdown ------------------------------------------------ */
.countdown { display:flex; align-items:flex-end; gap: clamp(8px,1.6vw,18px); margin-top: 30px; }
.cd-cell { position:relative; min-width: clamp(58px,8vw,82px); text-align:center;
  background: linear-gradient(180deg, rgba(255,253,250,.92), rgba(250,240,231,.84));
  border:1px solid rgba(201,162,75,.5); border-radius:var(--r-md); padding:.7em .4em .55em;
  box-shadow: var(--inset-gold), var(--sh-soft), 0 10px 24px -14px rgba(94,19,49,.35); backdrop-filter: blur(4px); }
.cd-cell::before { content:""; position:absolute; inset:3px; border:1px solid rgba(201,162,75,.32);
  border-radius: calc(var(--r-md) - 3px); pointer-events:none; }
.cd-cell::after { content:""; position:absolute; top:-4px; left:50%; width:7px; height:7px;
  transform:translateX(-50%) rotate(45deg); background:var(--grad-gold);
  border:1px solid rgba(166,124,46,.7); box-shadow:0 1px 4px rgba(166,124,46,.45); }
.cd-cell b { display:block; font-family:var(--font-latin-accent); font-weight:600;
  font-size: clamp(1.7rem,3.4vw,2.7rem); line-height:1; color:var(--wine-800);
  font-variant-numeric: tabular-nums; }
.cd-cell span { display:block; margin-top:.35em; font-size:.62rem; letter-spacing:.18em;
  color:var(--ink-500); text-transform:uppercase; font-family:var(--font-latin-display); }
.cd-colon { font-family:var(--font-latin-accent); font-size:2rem; color:var(--gold-500); padding-bottom:.5em; }

/* =====================================================================
   Pre-registration milestones
   ===================================================================== */
.milestones { background: var(--grad-wine); color:var(--on-dark); }
.milestones .sec-head h2 { color:#fff; }
.milestones .sec-head p { color:var(--on-dark-mut); }
.ms-count { text-align:center; margin-bottom:38px; }
.ms-count b { font-family:var(--font-latin-accent); font-weight:600; font-size: clamp(3rem,7vw,5.2rem);
  line-height:1; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric: tabular-nums; }
.ms-count span { display:block; margin-top:.4em; letter-spacing:.16em; color:var(--on-dark-mut);
  font-family:var(--font-latin-display); font-size:.8rem; text-transform:uppercase; }
/* date-driven status caption */
.ms-status { text-align:center; margin-bottom:30px; }
.ms-status__cap { display:block; font-family:var(--font-latin-display); font-size:.74rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-mut); }
.ms-status__stage { display:block; margin:.3em 0 .16em; font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.05; background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.ms-status__range { display:block; font-family:"Cormorant Garamond", var(--font-display);
  font-size:1.05rem; letter-spacing:.06em; color:var(--gold-200); }
.ms-status__row { display:flex; align-items:center; justify-content:center; gap:18px 22px; flex-wrap:wrap;
  margin:.3em 0 .16em; }
.ms-status__row .ms-status__stage { margin:0; }
.ms-follow { display:inline-flex; align-items:center; gap:10px; padding:10px 22px; border-radius:99px;
  font-family:"LXGW WenKai TC", var(--font-display); font-weight:700; font-size:1rem; color:var(--gold-100);
  background:rgba(201,162,75,.08); border:1px solid var(--gold-500); cursor:pointer; transition:.2s; white-space:nowrap; }
.ms-follow:hover { background:rgba(201,162,75,.18); color:#fff; transform:translateY(-1px); }
.ms-follow__ico { display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--grad-gold); color:var(--wine-900); font-size:.8rem; font-weight:700; line-height:1; }
.ms-follow-note { margin-top:14px; font-family:var(--font-body);
  font-size:.86rem; color:var(--on-dark-mut); line-height:1.7; }
.ms-track { position:relative; height:15px; border-radius:99px; margin: 50px 0 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 2px, transparent 2px 8px),
    rgba(255,255,255,.05);
  border:1px solid rgba(201,162,75,.45); }.ms-fill { position:absolute; inset:0 auto 0 0; border-radius:99px; background:var(--grad-gold);
  box-shadow:0 0 18px rgba(201,162,75,.7); width:0; transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.ms-fill::before { content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(100deg, transparent 26%, rgba(255,255,255,1) 50%, transparent 74%);
  background-size:60% 100%; background-repeat:no-repeat; background-position:-60% 0;
  animation: msFlow 1.6s linear infinite; }
@keyframes msFlow { 0%{ background-position:-60% 0; } 100%{ background-position:180% 0; } }
/* leading-edge light at the front of the fill */
.ms-fill::after { content:""; position:absolute; right:-3px; top:50%; width:20px; height:20px;
  transform:translateY(-50%); border-radius:50%; background:#FFF6DC;
  box-shadow:0 0 14px 5px rgba(255,239,180,.98), 0 0 30px 9px rgba(201,162,75,.85);
  animation: msHead 1.6s ease-in-out infinite; }
@keyframes msHead { 0%,100%{ opacity:.9; box-shadow:0 0 14px 5px rgba(255,239,180,.95), 0 0 28px 8px rgba(201,162,75,.8); }
  50%{ opacity:1; box-shadow:0 0 18px 6px rgba(255,239,180,1), 0 0 40px 12px rgba(201,162,75,.95); } }
@media (prefers-reduced-motion: reduce) {
  .ms-fill::before { animation:none; opacity:0; }
  .ms-fill::after { animation:none; }
}
.ms-nodes { position:absolute; inset:0; pointer-events:none; }
.ms-node { position:absolute; top:50%; transform:translate(-50%,-50%); pointer-events:auto; }
.ms-dot { width:18px; height:18px; border-radius:50%; background:var(--wine-900);
  border:2px solid var(--gold-500); box-shadow:0 0 0 3px rgba(94,19,49,.55); transition:.25s; cursor:default; display:block; }
.ms-node.reached .ms-dot { background:var(--grad-gold); box-shadow:0 0 0 3px rgba(94,19,49,.55), 0 0 14px rgba(201,162,75,.9); }
.ms-node.teaser .ms-dot { background:var(--grad-gold); box-shadow:0 0 0 3px rgba(94,19,49,.55), 0 0 12px rgba(201,162,75,.7); }
/* tooltip — each node reveals its stage reward */
.ms-tip { position:absolute; bottom:calc(100% + 13px); left:50%; transform:translateX(-50%) translateY(5px);
  min-width:128px; max-width:190px; padding:9px 13px; border-radius:10px; text-align:center;
  background:rgba(28,8,18,.97); border:1px solid var(--gold-500); box-shadow:0 12px 26px -10px rgba(0,0,0,.75);
  opacity:0; visibility:hidden; transition:.22s; z-index:6; }
.ms-tip::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--gold-500); }
.ms-node:hover .ms-tip, .ms-node:focus-within .ms-tip { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.ms-tip b { display:block; font-family:var(--font-display); font-weight:700; font-size:.78rem;
  letter-spacing:.06em; color:var(--gold-200); margin-bottom:3px; }
.ms-tip span { display:block; font-size:.95rem; font-weight:600; color:#fff; line-height:1.3; }
.ms-node:last-child .ms-tip { left:auto; right:-8px; transform:translateX(0) translateY(5px); }
.ms-node:last-child:hover .ms-tip, .ms-node:last-child:focus-within .ms-tip { transform:translateX(0) translateY(0); }
.ms-node:last-child .ms-tip::after { left:auto; right:15px; transform:none; }
/* current % pill riding the fill's leading edge */
.ms-pct { position:absolute; right:0; top:50%; transform:translate(50%,-185%); white-space:nowrap;
  font-family:"Cinzel", var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.02em;
  color:var(--wine-900); background:#FFF6DC; padding:3px 10px; border-radius:99px;
  box-shadow:0 0 12px rgba(255,239,180,.85); z-index:5;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
.ms-track:hover .ms-pct, .ms-track:focus-within .ms-pct { opacity:1; visibility:visible; }
.ms-pct::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#FFF6DC; }
.ms-cards { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-top:54px; }
.ms-card { position:relative; background: rgba(255,251,247,.06); border:1px solid rgba(201,162,75,.35);
  border-radius:var(--r-md); padding:24px 18px 22px; text-align:center; backdrop-filter:blur(2px);
  transition:.28s ease; overflow:hidden; }
.ms-card::before { content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--grad-gold); opacity:0; transition:opacity .28s; }
.ms-card.reached { background:
    linear-gradient(180deg, rgba(201,162,75,.2), rgba(201,162,75,.07));
  border-color:var(--gold-400); transform:translateY(-4px);
  box-shadow: 0 0 0 1px rgba(201,162,75,.4), 0 14px 30px -14px rgba(201,162,75,.6),
    inset 0 1px 0 rgba(255,247,222,.35), inset 0 0 26px rgba(201,162,75,.13); }
.ms-card.reached::before { opacity:1; }
.ms-card .goal { font-family:"Cinzel", var(--font-display); font-size:1.55rem; color:var(--gold-200);
  font-weight:600; line-height:1.15; font-feature-settings:"lnum" 1; letter-spacing:.01em; transition:color .28s; }
.ms-card.reached .goal { color:var(--gold-100); text-shadow:0 0 16px rgba(201,162,75,.5); }
.ms-card .reward { font-family:var(--font-display); font-weight:700; font-size:1.12rem; color:#fff; margin:.4em 0 .2em; }
.ms-card .sub { font-size:.82rem; color:var(--on-dark-mut); }
.ms-card .ms-phase { font-family:var(--font-display); font-weight:700; font-size:.84rem; letter-spacing:.08em;
  color:var(--gold-200); margin-bottom:.25em; transition:color .28s; }
.ms-card:not(.reached) .ms-phase { color:rgba(239,217,164,.6); }
/* current (next-to-unlock) tier: solid gold, gentle pulse, no padlock */
.ms-card.current { border-style:solid; border-color:var(--gold-400);
  background:linear-gradient(180deg, rgba(201,162,75,.12), rgba(201,162,75,.04));
  animation:msPulse 2.4s ease-in-out infinite; }
.ms-card.current::after { opacity:0; }
.ms-card.current .ms-phase { color:var(--gold-100); }
.ms-card.current .goal { color:var(--gold-100); }
.ms-card.current .reward { color:#fff; }
@keyframes msPulse {
  0%,100% { box-shadow:0 0 0 1px rgba(201,162,75,.4), 0 0 18px -6px rgba(201,162,75,.55); }
  50% { box-shadow:0 0 0 1.5px rgba(239,217,164,.85), 0 0 28px 2px rgba(201,162,75,.6); } }
@media (prefers-reduced-motion: reduce) { .ms-card.current { animation:none; } }
.ms-card .lock { position:absolute; top:11px; right:11px; font-size:.68rem; font-weight:600; letter-spacing:.04em;
  color:var(--on-dark-mut); padding:.28em .7em; border-radius:99px;
  border:1px solid rgba(201,162,75,.4); background:rgba(13,3,7,.35); transition:.28s; }
.ms-card.reached .lock { color:var(--wine-900); background:var(--grad-gold); border-color:transparent;
  box-shadow:0 2px 9px rgba(166,124,46,.55); }
/* locked vs reached: stronger contrast */
.ms-card:not(.reached) { border-style:dashed; }
.ms-card:not(.reached) .goal { color:rgba(239,217,164,.55); text-shadow:none; }
.ms-card:not(.reached) .reward { color:rgba(255,255,255,.7); }
.ms-card:not(.reached) .reward { letter-spacing:.2em; }
.ms-card:not(.reached) .sub { font-style:italic; opacity:.75; }
/* teaser: grand-prize card always shows its reward to drive sign-ups */
.ms-card.teaser { border-style:solid; border-color:var(--gold-400);
  background:linear-gradient(180deg, rgba(201,162,75,.16), rgba(201,162,75,.05)); }
.ms-card.teaser::before { opacity:1; }
.ms-card.teaser::after { opacity:0; }
.ms-card.teaser .ms-phase { color:var(--gold-100); }
.ms-card.teaser .reward { color:#fff; letter-spacing:normal; }
.ms-card.teaser .sub { font-style:normal; opacity:1; color:var(--on-dark-mut); }
.ms-card.teaser .lock { color:var(--wine-900); background:var(--grad-gold);
  border-color:transparent; box-shadow:0 2px 9px rgba(166,124,46,.55); }
/* 霞鶩文楷 — 進度條 + 下方 4 張獎勵卡（依需求指定） */
.ms-status__range,
.ms-tip b, .ms-tip span, .ms-pct,
.ms-card .ms-phase, .ms-card .reward, .ms-card .sub, .ms-card .lock {
  font-family: "LXGW WenKai TC", var(--font-display);
}
.ms-card:not(.reached)::after { content:""; position:absolute; top:13px; left:13px; width:17px; height:17px; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B86A' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E") center/contain no-repeat; }

/* =====================================================================
   CG Gallery — master/detail: big stage (selected) + picker (others)
   立繪 default · drag handle to wipe-reveal HCG · dark adult-premium bg
   ===================================================================== */
.gallery { position:relative; color:var(--on-dark);
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(142,31,71,.5), transparent 60%),
    radial-gradient(90% 70% at 10% 100%, rgba(201,162,75,.14), transparent 55%),
    linear-gradient(170deg, #2A0A18 0%, #1B0510 60%, #120309 100%); }
.gallery .sec-head h2 { color:#fff; } .gallery .sec-head p { color:var(--on-dark-mut); }

.cgselect { display:grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap:24px; align-items:start; }

/* ---- dynamic-content info bar (sets expectation: SOME saintesses move) ---- */
.cgnote { display:flex; align-items:center; gap:14px; margin:0 0 22px; padding:13px 20px;
  border-radius:var(--r-pill); border:1px solid rgba(201,162,75,.5);
  background:linear-gradient(100deg, rgba(54,15,33,.72), rgba(31,8,20,.66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px -16px rgba(0,0,0,.8);
  backdrop-filter: blur(8px); }
.cgnote__ico { flex:none; width:38px; height:38px; display:grid; place-items:center;
  animation: cgnotePulse 2.8s ease-in-out infinite; }
.cgnote__ico img { width:100%; height:100%; object-fit:contain; display:block;
  filter: drop-shadow(0 2px 5px rgba(94,19,49,.45)); }
.cgnote__ico svg { width:16px; height:16px; margin-left:1px; }
@keyframes cgnotePulse { 0%,100%{ transform:scale(1); filter:drop-shadow(0 0 0 rgba(244,217,139,.5)); }
  50%{ transform:scale(1.06); filter:drop-shadow(0 0 6px rgba(244,217,139,.5)); } }
.cgnote__tx { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; min-width:0; }
.cgnote__tx b { font-family:var(--font-display); font-weight:700; font-size:1.04rem; color:var(--gold-100);
  letter-spacing:.04em; }
.cgnote__tx i { font-style:normal; font-size:.92rem; color:var(--on-dark-mut); }
@media (prefers-reduced-motion: reduce) { .cgnote__ico { animation:none; } }

/* ---- LEFT: stage (click 立繪 to reveal HCG) ---- */
.cgstage { position:relative; aspect-ratio: 4/5; border-radius:var(--r-lg); overflow:hidden;
  background:#0d0307; box-shadow: var(--sh-pop); user-select:none; cursor:pointer; }
.cgstage__base, .cgstage__reveal img { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; -webkit-user-drag:none; }
.cgstage__base { z-index:1; }
.cgstage__reveal { position:absolute; inset:0; z-index:2; opacity:0; transition: opacity .5s ease; }
.cgstage__reveal img { object-position:center center; }
.cgstage.show .cgstage__reveal { opacity:1; }
/* tap hint chip — sits on the 立繪, hidden once revealed */
.cgstage__tap { position:absolute; z-index:5; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:9px; padding:.7em 1.25em; border-radius:var(--r-pill); overflow:hidden;
  background:rgba(13,3,7,.5); border:1px solid rgba(201,162,75,.6); backdrop-filter:blur(7px);
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:.95rem; letter-spacing:.02em;
  box-shadow:0 8px 24px rgba(0,0,0,.45); transition: opacity .35s ease, transform .35s ease;
  animation: tapPulse 2.6s ease-in-out infinite; }
.cgstage__tap .eye { width:20px; height:20px; flex:none; color:var(--gold-200); position:relative; z-index:1; }
.cgstage__tap > span { position:relative; z-index:1; }
.cgstage__tap::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  transform:translateX(-130%); animation: tapSheen 3.2s ease-in-out infinite; }
@keyframes tapSheen { 0%,60%{ transform:translateX(-130%); } 82%,100%{ transform:translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .cgstage__tap::after { animation:none; opacity:0; } }
@keyframes tapPulse { 0%,100%{ box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(244,217,139,.45);} 50%{ box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 0 10px rgba(244,217,139,0);} }
.cgstage.show .cgstage__tap { opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.92); }
/* small "back to 立繪" affordance shown only while revealed */
.cgstage__back { position:absolute; z-index:6; left:12px; bottom:74px; display:none; align-items:center; gap:6px;
  padding:.45em .8em; border-radius:var(--r-pill); background:rgba(13,3,7,.55); border:1px solid rgba(201,162,75,.5);
  backdrop-filter:blur(6px); color:#fff; font-family:var(--font-display); font-weight:600; font-size:.74rem; }
.cgstage.show .cgstage__back { display:inline-flex; }
.cgstage__frame { position:absolute; inset:0; z-index:5; pointer-events:none; box-shadow: var(--inset-gold); border-radius:inherit; }
.cgstage__frame::after { content:""; position:absolute; inset:9px; border:1px solid rgba(201,162,75,.5); border-radius:18px; }
.cgstage__rare { position:absolute; z-index:6; top:12px; left:12px; font-family:var(--font-latin-display);
  font-weight:800; font-size:.7rem; letter-spacing:.06em; color:var(--wine-900);
  background:var(--grad-gold); padding:.26em .55em; border-radius:5px; box-shadow:0 2px 8px rgba(166,124,46,.5); }
.cgstage__r18 { display:none; }
.cgstage__cap { position:absolute; left:0; right:0; bottom:0; z-index:6; padding:46px 20px 18px;
  background:linear-gradient(transparent, rgba(13,3,7,.9) 64%); pointer-events:none; }
.cgstage__cap .nm { font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:#fff; line-height:1.15; }
.cgstage__cap .rc { font-size:.82rem; color:var(--gold-200); letter-spacing:.08em; margin-top:.2em; }
.cgstage__hint { display:inline-flex; align-items:center; gap:7px; margin-top:10px; font-size:.74rem;
  color:var(--on-dark-mut); font-family:var(--font-latin-display); letter-spacing:.14em; text-transform:uppercase; }
.cgstage.show .cgstage__hint { display:none; }
/* "more CG in game" indicator */
.cgstage__more { position:absolute; z-index:7; right:12px; top:12px; display:flex; align-items:center; gap:8px;
  padding:.5em .8em; border-radius:var(--r-pill); background:rgba(13,3,7,.78); border:1px solid rgba(201,162,75,.6);
  backdrop-filter:blur(6px); pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.5); }
.cgstage__more .pips { display:flex; gap:5px; }
.cgstage__more .pips i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28); }
.cgstage__more .pips i.on { background:var(--gold-200); box-shadow:0 0 8px rgba(244,217,139,.8); }
.cgstage__more b { font-family:var(--font-display); font-weight:700; font-size:.78rem; color:#fff; }
.cgstage__more span { font-size:.64rem; color:var(--on-dark-mut); }

/* ---- Live2D secret seal (bottom-right of stage) ---- */
/* ---- dynamic-scene play button — heart (bottom-right of stage) ---- */
.cgstage__live2d { position:absolute; z-index:7; right:7.3%; bottom:4.0%;
  width:86px; height:85px; border:none; background:none; padding:0; cursor:pointer;
  filter: drop-shadow(0 4px 10px rgba(94,19,49,.5)); transform: rotate(0deg);
  animation: l2pulse 2.4s ease-in-out infinite; transition: transform .18s ease, filter .18s ease; }
.cgstage__live2d img { width:100%; height:100%; display:block; object-fit:contain; pointer-events:none;
  transform-origin:center 62%; animation: heartBreath 2.4s ease-in-out infinite; }
.cgstage__live2d:hover { transform: rotate(-2deg) scale(1.09); filter: drop-shadow(0 5px 13px rgba(94,19,49,.6)) brightness(1.04); }
.cgstage__live2d:active { transform: rotate(0deg) scale(.97); }
@keyframes heartBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.11); }
}
@media (prefers-reduced-motion: reduce) { .cgstage__live2d img { animation:none; } }
@keyframes l2pulse {
  0%,100% { filter: drop-shadow(0 4px 10px rgba(94,19,49,.5)) drop-shadow(0 0 0 rgba(244,217,139,0)); }
  50%     { filter: drop-shadow(0 5px 14px rgba(94,19,49,.6)) drop-shadow(0 0 11px rgba(244,217,139,.7)); }
}

/* ---- Live2D player modal ---- */
.l2modal { position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:24px; }
.l2modal.open { display:flex; }
.l2modal__scrim { position:absolute; inset:0; background:rgba(18,3,9,.84); backdrop-filter:blur(7px); }
.l2modal__panel { position:relative; z-index:1; width:min(480px,92vw); max-height:94vh; display:flex; flex-direction:column;
  border-radius:var(--r-lg); overflow:hidden;
  background:#0d0307; border:1px solid rgba(201,162,75,.55); box-shadow:var(--sh-pop); animation:cmIn .32s cubic-bezier(.2,.8,.2,1); }
.l2modal__close { position:absolute; z-index:4; top:12px; right:12px; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(201,162,75,.6); background:rgba(13,3,7,.55); backdrop-filter:blur(6px); color:#fff;
  font-size:1.4rem; line-height:1; cursor:pointer; transition:.18s; }
.l2modal__close:hover { background:rgba(13,3,7,.8); }
.l2modal__stage { position:relative; flex:1 1 auto; min-height:0; aspect-ratio:4/5; background:#0d0307; }
.l2modal__stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0d0307; display:block; }
.l2modal__ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-align:center; color:#fff; padding:24px; background:linear-gradient(rgba(13,3,7,.32), rgba(13,3,7,.66)); }
.l2modal__ph.hide { display:none; }
.l2modal__ph .pico { width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-rose-h); box-shadow:var(--sh-rose-glow); border:2px solid rgba(244,217,139,.85); }
.l2modal__ph .pico .tri { width:0; height:0; border-left:18px solid #fff; border-top:11px solid transparent;
  border-bottom:11px solid transparent; margin-left:4px; }
.l2modal__ph p { font-family:var(--font-display); font-weight:700; font-size:1.18rem; margin:0; }
.l2modal__ph .hint { font-size:.74rem; color:var(--on-dark-mut); letter-spacing:.02em; }
.l2modal__ph .hint code { font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--gold-200);
  background:rgba(0,0,0,.35); padding:.1em .45em; border-radius:4px; }
.l2modal__rare { display:none; }
.l2modal__bar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 18px;
  background:#160611; border-top:1px solid rgba(201,162,75,.3); }
.l2modal__title b { font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:#fff; }
.l2modal__title span { display:block; font-size:.74rem; color:var(--gold-200); letter-spacing:.06em; margin-top:2px; }

/* ---- RIGHT: picker ---- */
.cgpicker { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
.cgpick { position:relative; aspect-ratio: 3/4; border-radius:var(--r-md); overflow:hidden; cursor:pointer;
  border:none; padding:0; background:#1a0712; box-shadow: 0 8px 20px -12px rgba(0,0,0,.7);
  outline:1.5px solid rgba(201,162,75,.28); outline-offset:-1.5px; transition: transform .2s, outline-color .2s; }
.cgpick img { width:100%; height:100%; object-fit:cover; object-position:center top; transition: transform .35s; }
.cgpick:hover { transform:translateY(-3px); outline-color:rgba(201,162,75,.85);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.8), 0 0 18px -2px rgba(201,162,75,.45); }
.cgpick:hover img { transform:scale(1.05); }
.cgpick__nm { position:absolute; left:0; right:0; bottom:0; padding:18px 8px 7px; text-align:left;
  background:linear-gradient(transparent, rgba(13,3,7,.9)); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:.78rem; line-height:1.2; }
.cgpick__r { position:absolute; top:6px; left:6px; font-family:var(--font-latin-display); font-weight:800;
  font-size:.56rem; color:var(--wine-900); background:var(--grad-gold); padding:.18em .4em; border-radius:4px; }
.cgpick.sel { outline:2.5px solid var(--gold-400); outline-offset:-2.5px; box-shadow: var(--sh-gold-glow); }
.cgpick.sel::after { content:"✦"; position:absolute; top:6px; right:7px; color:var(--gold-200); font-size:.8rem;
  text-shadow:0 0 8px rgba(244,217,139,.9); }

.gallery__cta { text-align:center; margin-top:46px; }
.gallery__cta .hint { display:block; margin-top:14px; font-size:.82rem; color:var(--on-dark-mut); }

/* =====================================================================
   Character roster grid — clothed 立繪 cards
   ===================================================================== */
.roster { background: var(--rose-mist); }
.roster-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.char { position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--paper);
  box-shadow: var(--sh-card); transition: transform .22s, box-shadow .22s; }
.char:hover { transform: translateY(-6px); box-shadow: var(--sh-pop), 0 0 0 1.5px rgba(201,162,75,.55), 0 16px 38px -16px rgba(201,162,75,.55); }
.char { cursor: pointer; }
.char__art { position:relative; aspect-ratio: 3/4; overflow:hidden; background:
  radial-gradient(120% 92% at 50% 6%, #FFFDFB 0%, #FBF1F1 56%, var(--rose-mist) 100%); }
.char__art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top;
  transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.char:hover .char__art img { transform: scale(1.05); }
.char__art::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(transparent 60%, rgba(255,251,247,.0) 75%, var(--paper)); }
/* hover affordance — click to enlarge 立繪 */
.char__zoom { position:absolute; z-index:4; top:10px; right:10px; display:inline-flex; align-items:center; gap:6px;
  padding:.4em .7em; border-radius:var(--r-pill); background:rgba(46,10,24,.42); backdrop-filter:blur(5px);
  border:1px solid rgba(201,162,75,.55); color:#fff; font-family:var(--font-display); font-weight:600;
  font-size:.68rem; letter-spacing:.04em; opacity:0; transform:translateY(-4px); transition:.22s; pointer-events:none; }
.char:hover .char__zoom, .char:focus-visible .char__zoom { opacity:1; transform:none; }
.char__zoom svg { width:13px; height:13px; }
.char__rare { display:none; }
.char__meta { padding:14px 16px 18px; position:relative; }
.char__meta::before { content:""; position:absolute; top:0; left:16px; right:16px; height:1px; background:var(--grad-gold-line); }
.char__name { font-family:var(--font-display); font-weight:700; font-size:1.18rem; color:var(--ink-900); }
.char__race { font-size:.78rem; color:var(--rose-700); letter-spacing:.08em; margin-top:.15em; }
.char__quote { font-family:var(--font-latin-accent); font-style:italic; font-size:.92rem; color:var(--ink-500);
  margin-top:.5em; line-height:1.45; }

/* --- Roster: mystery "And more…!" card --- */
.char--more { cursor: default; }
.char--more .char__art--more { overflow: visible; display: grid; place-items: center; }
.char--more .char__art--more::after { display: none; }
.more-figure { position:absolute; bottom:0; left:50%; width:78%; height:88%;
  transform: translateX(-50%); color: var(--wine-900); opacity:.15; }
.more-heart { position:relative; z-index:3; width:46%; max-width:118px; margin-bottom:8%;
  filter: drop-shadow(0 10px 22px rgba(216,60,107,.42));
  animation: moreHeartPulse 2.8s ease-in-out infinite; }
.more-heart svg { display:block; width:100%; height:auto; }
.more-heart__q { position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:900; font-size:2.5rem; color:#FBEEF1;
  text-shadow:0 2px 6px rgba(94,19,49,.55); transform: translateY(-7%); }
@keyframes moreHeartPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .more-heart { animation: none; } }
.more-sticker { position:absolute; z-index:6; left:50%; bottom:11%;
  transform: translateX(-50%) rotate(-5deg); transition: transform .22s;
  font-family:var(--font-latin-display); font-weight:700; font-size:.96rem; letter-spacing:.03em;
  white-space:nowrap; color:#5E1331;
  background: linear-gradient(180deg,#FCEFC9 0%,#E9C870 46%,#C9A24B 100%);
  padding:.42em .92em; border-radius:999px; border:1.5px solid #FFF7E2;
  box-shadow: 0 2px 0 #9C7626, 0 4px 0 #7A5A1C, 0 12px 20px -7px rgba(94,19,49,.55),
    inset 0 1px 0 rgba(255,255,255,.75);
  text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.char--more:hover .more-sticker { transform: translateX(-50%) rotate(-5deg) translateY(-3px); }

/* --- Roster carousel: single row + arrows + dots + ornament --- */
.roster-carousel { display:flex; align-items:center; gap:0; }
.rc-viewport { flex:1 1 auto; min-width:0; }
.roster-track { display:flex; gap:22px; padding:4px 0 8px; position:relative;
  overflow-x:auto; overflow-y:hidden;
  -ms-overflow-style:none; scrollbar-width:none; }
.roster-track::-webkit-scrollbar { display:none; }
.roster-track > .char { flex:0 0 calc((100% - 66px) / 4); }
.rc-arrow { flex:0 0 auto; width:54px; height:54px; border-radius:50%;
  border:1.5px solid var(--gold-500); background:var(--paper); color:var(--wine-800);
  font-family:var(--font-display); font-size:1.7rem; line-height:1; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--sh-soft);
  transition:transform .2s, background .2s, color .2s, opacity .2s; }
.rc-arrow:hover { background:var(--grad-gold); color:var(--wine-900); transform:scale(1.07); box-shadow:var(--sh-gold-glow); }
.rc-arrow:active { transform:scale(.96); }
.rc-arrow:disabled { opacity:.28; cursor:default; box-shadow:none; }
.rc-arrow:disabled:hover { background:var(--paper); color:var(--wine-800); transform:none; }
.rc-arrow--prev { margin-right:18px; }
.rc-arrow--next { margin-left:18px; }
.rc-footer { margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:22px; }
.rc-dots { display:flex; gap:11px; }
.rc-dot { width:9px; height:9px; padding:0; border-radius:50%; border:1px solid var(--gold-500);
  background:transparent; cursor:pointer; transition:transform .2s, background .2s, box-shadow .2s; }
.rc-dot:hover { background:var(--gold-200); }
.rc-dot.active { background:var(--grad-gold); border-color:transparent; transform:scale(1.25); box-shadow:var(--sh-gold-glow); }
.rc-ornament { display:flex; flex-direction:column; align-items:center; gap:10px; }
.rc-flourish { width:300px; max-width:72vw; height:auto; }
.rc-caption { font-family:var(--font-latin-accent); font-style:italic; font-size:1.08rem;
  color:var(--rose-700); letter-spacing:.03em; margin:0; }
@media print {
  .rc-viewport { overflow:visible !important; }
  .roster-track { display:grid !important; grid-template-columns:repeat(4,1fr) !important; overflow:visible !important; }
  .roster-track > .char { flex:none !important; }
  .rc-arrow, .rc-dots { display:none !important; }
}

/* =====================================================================
   Back-to-top button
   ===================================================================== */
.to-top { position:fixed; right:22px; bottom:22px; z-index:70;
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(201,162,75,.7); color:#fff; background:var(--grad-rose-h);
  box-shadow: var(--sh-rose-glow);
  opacity:0; transform:translateY(14px) scale(.92); pointer-events:none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.4,.7,.3,1), filter .18s; }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { filter:brightness(1.07); transform:translateY(-3px); }
.to-top:active { transform:translateY(0) scale(.95); }
.to-top svg { width:22px; height:22px; }

/* Copy tone locked to the elegant (suggestive) wording */
.hype-only { display:none; }
.elegant-only { display:inline; }

/* =====================================================================
   System / world
   ===================================================================== */
.story { position:relative; color:var(--on-dark); overflow:hidden; }
.system__bg { position:absolute; inset:0; z-index:-2; }
.system__bg img { width:100%; height:100%; object-fit:cover; }
.system__bg::after { content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(46,10,24,.88), rgba(46,10,24,.78)); }
.system .sec-head h2 { color:#fff; } .system .sec-head p { color:var(--on-dark-mut); }
/* story section heading: rose fill + crisp white outline so it pops on the KV bg */
#system .sec-head h2 {
  text-shadow:
    -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
    -1px 0 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff; }
#system .sec-head p { color:#f0dce6; text-shadow:0 1px 8px rgba(0,0,0,.5); }
#system .eyebrow { color:#FBEAC4; text-shadow:0 1px 2px rgba(0,0,0,.7), 0 0 10px rgba(0,0,0,.5); }
#system .eyebrow::before, #system .eyebrow::after { background:#E9D6A2; opacity:.9; }
.feat-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.feat { position:relative; background: rgba(255,251,247,.06); border:1px solid rgba(201,162,75,.4);
  border-radius:var(--r-lg); padding:34px 26px; backdrop-filter: blur(3px); transition:.25s; }
.feat:hover { background: rgba(201,162,75,.12); transform:translateY(-4px); }
.feat .ic { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; margin-bottom:18px;
  background:var(--grad-rose-h); box-shadow:var(--sh-rose-glow); }
.feat .ic .spark { width:24px; height:24px; background:#fff; }
.feat h3 { font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:#fff; margin:0 0 .4em; }
.feat p { color:var(--on-dark-mut); line-height:1.7; font-size:.95rem; margin:0; }

/* ---- World & Story ---- */
.lore__lead { max-width:820px; margin:0 auto 56px; text-align:center; color:var(--gold-100);
  font-family:"LXGW WenKai TC", var(--font-display); font-size:1.22rem; line-height:2; letter-spacing:.02em; text-wrap:pretty; }
@media (max-width: 680px){ .lore__lead br { display:none; } }
.story-beats { display:flex; flex-direction:column; gap:40px; }
/* story as a carousel (one chapter per view) */
.story-carousel { display:flex; align-items:center; gap:0; }
.story-carousel .rc-viewport { flex:1 1 auto; min-width:0; }
.story-track { display:flex; gap:24px; overflow-x:auto; overflow-y:hidden; position:relative;
  -ms-overflow-style:none; scrollbar-width:none; padding:4px 0; }
.story-track::-webkit-scrollbar { display:none; }
.story-track > .beat { flex:0 0 100%; }
/* final teaser slide — "to be continued / discover in-game" */
.beat.beat--teaser { display:grid; grid-template-columns:1fr; place-items:center; text-align:center; min-height:340px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(142,31,71,.55), transparent 60%),
    radial-gradient(80% 80% at 50% 120%, rgba(201,162,75,.2), transparent 60%),
    linear-gradient(180deg, #240712, #160409); }
.teaser__inner { max-width:600px; padding:54px 36px; }
.teaser__inner .beat__no { display:block; color:var(--gold-300); }
.teaser__inner h3 { font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,3.4vw,2.2rem);
  color:#fff; margin:0 0 .5em; text-shadow:0 2px 20px rgba(0,0,0,.5); }
.teaser__inner p { color:var(--on-dark-mut); line-height:1.95; font-size:1rem; margin:0 0 28px; text-wrap:pretty; }
.story-carousel .rc-arrow--prev { margin-right:18px; }
.story-carousel .rc-arrow--next { margin-left:18px; }
.beat { display:grid; grid-template-columns: 1.25fr 1fr; gap:0; align-items:stretch;
  border-radius:var(--r-lg); overflow:hidden; border:1px solid rgba(201,162,75,.4);
  background:rgba(20,5,12,.5); box-shadow:0 24px 60px -28px #000; backdrop-filter:blur(3px); }
.beat__kv { position:relative; min-height:300px; overflow:hidden; }
.beat__kv img { width:100%; height:100%; object-fit:cover; display:block; }
.beat__kv::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, transparent 60%, rgba(20,5,12,.7)); }
.beat--rev .beat__kv::after { background:linear-gradient(270deg, transparent 60%, rgba(20,5,12,.7)); }
.beat__tx { padding:42px 40px; display:flex; flex-direction:column; justify-content:center; }
.beat--rev { grid-template-columns: 1fr 1.25fr; }
.beat--rev .beat__kv { order:2; } .beat--rev .beat__tx { order:1; }
.beat__no { font-family:var(--font-latin-display); letter-spacing:.22em; text-transform:uppercase;
  font-size:.8rem; color:#FBEAC4; margin-bottom:12px; }
.beat__tx h3 { font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:#fff; margin:0 0 .5em;
  text-shadow:0 2px 18px rgba(0,0,0,.5); }
.beat__tx p { color:var(--on-dark-mut); line-height:1.9; font-size:1rem; margin:0; text-wrap:pretty; }
@media (max-width: 820px){ .beat__tx p br { display:none; } }
@media (max-width: 820px){
  .beat, .beat--rev { grid-template-columns: 1fr; }
  .beat--rev .beat__kv { order:0; } .beat--rev .beat__tx { order:0; }
  .beat__kv { aspect-ratio: 16/9; min-height:0; }
  .beat__kv::after, .beat--rev .beat__kv::after { background:linear-gradient(0deg, rgba(20,5,12,.65), transparent 55%); }
  .beat__tx { padding:28px 24px; }
  .lore__lead { font-size:1.06rem; margin-bottom:40px; }
}

/* =====================================================================
   Social funnel
   ===================================================================== */
.social { background: var(--grad-ivory); text-align:center; }
.social-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content:center; gap:22px; max-width:760px; margin: 0 auto; }
.soc { position:relative; display:flex; align-items:center; gap:18px; text-align:left; padding:26px 28px; overflow:hidden;
  border-radius:var(--r-lg); background:var(--paper); box-shadow:var(--sh-card); border:1px solid rgba(201,162,75,.4);
  transition: transform .2s, box-shadow .2s, border-color .2s; }
.soc::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%);
  transform:translateX(-130%); transition:transform .65s ease; }
.soc:hover::after { transform:translateX(130%); }
.soc:hover { transform:translateY(-4px); box-shadow:var(--sh-pop), 0 0 0 1.5px rgba(201,162,75,.5); border-color:var(--gold-400); }
.soc .badge { width:58px; height:58px; border-radius:16px; display:grid; place-items:center; flex:none; color:#fff;
  box-shadow:0 0 0 2px rgba(201,162,75,.35), 0 6px 14px -6px rgba(0,0,0,.35); }
.soc .badge svg { width:30px; height:30px; }
.soc.tw .badge { background:#0f1419; } .soc.dc .badge { background:#5865F2; }
.soc b { font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink-900); display:block; }
.soc span { font-size:.86rem; color:var(--ink-500); }
.soc .arrow { margin-left:auto; color:var(--gold-600); font-size:1.3rem; }

/* =====================================================================
   Footer
   ===================================================================== */
.footer { position:relative; background: var(--grad-wine); color:var(--on-dark-mut); padding: 74px 0 36px; }
.footer__top { display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:flex-start;
  padding-bottom:34px; border-bottom:1px solid rgba(201,162,75,.3); }
.footer__brand img { height:40px; margin-bottom:14px; }
.footer__brand p { max-width:34ch; font-size:.86rem; line-height:1.7; }
.footer__tagline { max-width:40ch; }
.footer__tagline .ft-title { display:block; font-family:var(--font-display); font-weight:700;
  color:var(--gold-200); font-size:.95rem; margin-bottom:5px; }
.footer__tagline .ft-desc { display:block; text-wrap:balance; }
.footer__links { display:flex; gap:54px; flex-wrap:wrap; }
.footer__col h4 { font-family:var(--font-latin-display); letter-spacing:.16em; font-size:.72rem; text-transform:uppercase;
  color:var(--gold-200); margin:0 0 14px; }
.footer__col a { display:block; padding:.32em 0; font-size:.9rem; color:var(--on-dark-mut); transition:color .15s; }
.footer__col a:hover { color:#fff; }
.footer__bottom { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  padding-top:24px; font-size:.76rem; }
.footer__bottom .r18note { display:flex; align-items:center; gap:10px; }
.footer__rating { width:48px; height:auto; flex:none; border-radius:6px;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.55); }

/* =====================================================================
   Age gate (18+ entry confirmation)
   ===================================================================== */
html:not(.age-ok) { overflow:hidden; }
.age-ok .agegate { display:none; }
.agegate { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:24px;
  font-family:var(--font-body); }
.agegate__bg { position:absolute; inset:0; background:#1a060f;
  background-image:linear-gradient(180deg, rgba(26,6,15,.82), rgba(24,5,13,.93)), url("assets/kv/hero_main.jpg");
  background-size:cover; background-position:center top; }
.agegate__bg::after { content:""; position:absolute; inset:0; backdrop-filter:blur(2px);
  background:radial-gradient(120% 80% at 50% 28%, transparent, rgba(18,4,10,.62)); }
.agegate__panel { position:relative; z-index:1; width:min(680px,100%); text-align:center;
  background:linear-gradient(180deg, rgba(58,16,32,.8), rgba(34,9,18,.88));
  border:1px solid rgba(201,162,75,.5); border-radius:20px; padding:36px clamp(22px,5vw,54px) 32px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,247,222,.18);
  backdrop-filter:blur(6px); }
.agegate__badge { display:block; margin:0 auto 14px; width:84px; height:auto; border-radius:8px;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.7); }
.agegate__orn { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:13px; color:var(--gold-500); }
.agegate__orn span { height:1px; width:58px; background:linear-gradient(90deg,transparent,var(--gold-500)); }
.agegate__orn span:last-child { background:linear-gradient(90deg,var(--gold-500),transparent); }
.agegate__orn b { font-size:.7rem; }
.agegate__eyebrow { font-family:var(--font-latin-display); letter-spacing:.3em; text-transform:uppercase;
  font-size:.74rem; color:var(--gold-400); margin-bottom:8px; }
.agegate__title { font-family:var(--font-display); font-weight:900; font-size:clamp(1.8rem,4vw,2.5rem);
  line-height:1.1; margin-bottom:16px;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.agegate__lead { color:var(--on-dark); font-size:.95rem; line-height:1.85; margin-bottom:26px; }
.agegate__lead span { display:block; text-wrap:balance; white-space:nowrap; }
.agegate__lead span + span { margin-top:.25em; }
@media (max-width:560px){ .agegate__lead span { white-space:normal; } }
.agegate__btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.agegate__btn { flex:1 1 200px; max-width:240px; cursor:pointer; border-radius:99px; padding:14px 20px;
  font-family:var(--font-display); font-weight:700; font-size:1.12rem; line-height:1.2; color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:3px; transition:.2s; border:1px solid transparent; }
.agegate__btn small { font-family:var(--font-latin-display); font-weight:600; font-size:.64rem; letter-spacing:.2em; opacity:.85; white-space:nowrap; }
.agegate__btn--yes { background:linear-gradient(110deg,#EE6E94,#C12C5C 55%,#8E1F47); border-color:rgba(239,217,164,.6);
  box-shadow:0 12px 26px -12px rgba(142,31,71,.7); }
.agegate__btn--yes:hover { transform:translateY(-2px); box-shadow:0 0 0 1.5px #EFD9A4, 0 16px 30px -12px rgba(142,31,71,.8); }
.agegate__btn--no { background:rgba(255,255,255,.06); border-color:rgba(201,162,75,.4); color:var(--on-dark-mut); }
.agegate__btn--no:hover { background:rgba(255,255,255,.1); color:#fff; }
.agegate__note { margin-top:22px; font-size:.78rem; color:var(--on-dark-mut); line-height:1.7; }

/* =====================================================================
   Reveal-on-scroll
   ===================================================================== */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 980px) {
  .cgselect { grid-template-columns: 1fr; }
  .cgnote { margin-bottom:18px; padding:11px 16px; }
  .cgnote__tx b { font-size:.98rem; } .cgnote__tx i { font-size:.86rem; }
  .cgstage { max-width:520px; margin-inline:auto; width:100%; }
  .cgpicker { grid-template-columns: repeat(4, 1fr); }
  .ms-cards { grid-template-columns: repeat(2,1fr); }
  .roster-track > .char { flex-basis: calc((100% - 44px) / 3); }
  .feat-grid { grid-template-columns: 1fr; max-width:520px; margin-inline:auto; }
}
@media (max-width: 720px) {
  .nav__links { display:none; }
  .nav__burger { display:flex; }
  .nav__right .pill { display:none; }
  .roster-track > .char { flex-basis: calc((100% - 22px) / 2); }
  .cgpicker { grid-template-columns: repeat(3, 1fr); }
  .social-cards { grid-template-columns:1fr; }
  .divider::before, .divider::after { width: 22vw; }
  .to-top { right:14px; bottom:14px; width:46px; height:46px; }
  .rc-arrow { width:44px; height:44px; font-size:1.4rem; }
  .rc-arrow--prev { margin-right:10px; } .rc-arrow--next { margin-left:10px; }
}
@media (max-width: 480px) {
  .roster-track > .char { flex-basis: 78%; }
}
@media (max-width: 460px) {
  .ms-cards { grid-template-columns: 1fr; }
  .countdown { flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .hero__petal, .scrollcue i { animation:none; }
}

/* =====================================================================
   Character 立繪 modal (lightbox) — click a roster card to enlarge
   ===================================================================== */
.cmodal { position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:24px; }
.cmodal.open { display:flex; }
.cmodal__scrim { position:absolute; inset:0; background:rgba(40,9,21,.64); backdrop-filter:blur(8px); }
.cmodal__panel { position:relative; z-index:1; display:flex; width:min(820px, 94vw); height:min(76vh, 660px); max-height:92vh;
  background:var(--grad-ivory); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-pop);
  border:1px solid rgba(201,162,75,.55); animation: cmIn .32s cubic-bezier(.2,.8,.2,1); }
@keyframes cmIn { from{ opacity:0; transform:translateY(16px) scale(.985);} to{ opacity:1; transform:none;} }
.cmodal__art { position:relative; margin:0; flex:1 1 56%; min-width:0; min-height:0;
  background: radial-gradient(78% 64% at 50% 14%, #FFFDFB 0%, var(--rose-mist) 56%, var(--blush) 100%);
  display:flex; align-items:center; justify-content:center; padding:18px; }
.cmodal__art img { max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; object-position:center;
  filter: drop-shadow(0 18px 32px rgba(94,19,49,.32)); }
.cmodal__art::after { content:""; position:absolute; inset:10px; border:1px solid rgba(201,162,75,.5); border-radius:16px; pointer-events:none; }
.cmodal__rare { position:absolute; top:14px; left:14px; z-index:2; font-family:var(--font-latin-display); font-weight:800;
  font-size:.72rem; letter-spacing:.06em; color:var(--wine-900); background:var(--grad-gold); padding:.26em .55em;
  border-radius:5px; box-shadow:0 2px 8px rgba(166,124,46,.5); }
.cmodal__meta { flex:1 1 44%; padding:clamp(26px,4vw,42px) clamp(24px,3vw,36px); display:flex; flex-direction:column;
  justify-content:center; }
.cmodal__meta .eyebrow { justify-content:flex-start; margin-bottom:6px; }
.cmodal__name { font-family:var(--font-display); font-weight:900; font-size:clamp(1.7rem,3vw,2.5rem);
  color:var(--wine-800); line-height:1.12; }
.cmodal__race { font-size:.9rem; color:var(--rose-700); letter-spacing:.1em; margin-top:.4em; }
.cmodal__quote { font-family:var(--font-latin-accent); font-style:italic; font-size:1.22rem; color:var(--ink-700);
  line-height:1.55; margin:22px 0 0; text-wrap:pretty; }
.cmodal__r18 { display:none; }
.cmodal__close { position:absolute; top:12px; right:12px; z-index:5; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(201,162,75,.6); background:rgba(255,251,247,.92); color:var(--wine-800); font-size:1.4rem;
  line-height:1; display:grid; place-items:center; transition:.18s; }
.cmodal__close:hover { background:#fff; transform:rotate(90deg); }
.cmodal__nav { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px;
  border-radius:50%; border:1px solid rgba(201,162,75,.5); background:rgba(255,251,247,.9); color:var(--wine-800);
  font-size:1.6rem; line-height:1; display:grid; place-items:center; box-shadow:var(--sh-soft); transition:.18s; }
.cmodal__nav:hover { background:#fff; transform:translateY(-50%) scale(1.08); }
.cmodal__nav.prev { left:max(10px, 2vw); } .cmodal__nav.next { right:max(10px, 2vw); }

@media (max-width: 680px) {
  .cmodal__panel { flex-direction:column; width:94vw; height:auto; max-height:90vh; overflow-y:auto; }
  .cmodal__art { flex:none; height:46vh; padding:14px; }
  .cmodal__art img { max-height:100%; }
  .cmodal__meta { padding:24px 24px 30px; text-align:center; }
  .cmodal__meta .eyebrow, .cmodal__r18 { align-self:center; justify-content:center; }
  .cmodal__nav { width:40px; height:40px; top:auto; bottom:14px; transform:none; }
  .cmodal__nav:hover { transform:scale(1.08); }
  .cmodal__nav.prev { left:14px; } .cmodal__nav.next { right:14px; }
}
@media (prefers-reduced-motion: reduce) { .cmodal__panel { animation:none; } }

/* =====================================================================
   SSR rarity badge — Option A "Engraved Plate"
   Metallic gold gradient + bevel + occasional sheen sweep.
   Applied to every SSR badge; each keeps its own size/radius/position.
   Sheen is a background layer (under the text) so glyphs stay crisp and
   no markup change is needed.
   ===================================================================== */
:root { --metal: linear-gradient(155deg,#FCEFC9 0%,#E9C972 34%,#B98F3C 56%,#EAD08A 76%,#C9A24B 100%); }
.cgstage__rare, .char__rare, .cgpick__r, .cmodal__rare, .l2modal__rare {
  background-image:
    linear-gradient(115deg, transparent 41%, rgba(255,255,255,.72) 50%, transparent 59%),
    var(--metal);
  background-size: 230% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -65% 0, 0 0;
  color: var(--wine-900);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1.5px 2px rgba(120,80,20,.55),
    inset 0 0 0 1px rgba(94,19,49,.30),
    0 3px 9px rgba(0,0,0,.42);
  animation: ssrSheen 4.6s ease-in-out infinite;
}
@keyframes ssrSheen {
  0%, 72%   { background-position: -65% 0, 0 0; }
  88%, 100% { background-position: 170% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cgstage__rare, .char__rare, .cgpick__r, .cmodal__rare, .l2modal__rare { animation: none; }
}
@media print {
  .cgstage__rare, .char__rare, .cgpick__r, .cmodal__rare, .l2modal__rare { animation: none; }
}


/* ==================== PREREG — shared ==================== */
.prereg-cta, .prereg-tiers { background:#FCF6EF; }
.prereg-en { font-family:Cinzel, serif; font-weight:600; font-size:.78rem;
  letter-spacing:.34em; text-transform:uppercase; color:#C9A24B; margin:0 0 6px; }
.prereg-title { font-family:"Noto Serif TC", serif; font-weight:900;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem); color:#5E1331; margin:0 0 12px; }
.prereg-lead { font-family:"Noto Sans TC", sans-serif; font-size:1.02rem;
  line-height:1.9; color:rgba(94,19,49,.78); margin:0 auto 26px; max-width:34em;
  text-wrap:pretty; }
.prereg-orn { display:flex; align-items:center; gap:14px; margin:26px 0; }
.prereg-line { flex:1; height:1px;
  background:linear-gradient(90deg, transparent, #C9A24B 18%, #EFD9A4 50%, #C9A24B 82%, transparent); }
.prereg-dia { color:#C9A24B; font-size:.6rem; line-height:1; }

/* ==================== PREREG — CTA panel ==================== */
.prereg-panel { position:relative; text-align:center; background:#FFFBF7;
  border:1px solid rgba(201,162,75,.45); border-radius:18px;
  padding:46px clamp(22px, 6vw, 70px) 38px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 18px 44px -26px rgba(94,19,49,.35); }
.prereg-18 { position:absolute; top:16px; right:16px; display:inline-flex;
  align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:50%; border:2px solid #C12C5C; color:#C12C5C;
  font-family:Cinzel, serif; font-weight:800; font-size:.95rem; letter-spacing:0; }
.prereg-18 i { font-style:normal; font-size:.7em; transform:translateY(-.18em); }
.prereg-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:6px 0 16px; }
.prereg-btn { display:inline-flex; align-items:center; gap:10px;
  padding:15px 38px; border-radius:999px; text-decoration:none;
  font-family:"Noto Sans TC", sans-serif; font-weight:700; font-size:1.04rem; color:#FFF8F0;
  background:linear-gradient(110deg, #EE6E94, #C12C5C 55%, #8E1F47);
  border:1px solid rgba(201,162,75,0);
  box-shadow:0 0 0 1.5px #C9A24B, 0 0 0 4px rgba(201,162,75,.18),
    0 12px 26px -12px rgba(142,31,71,.65);
  transition:transform .22s ease, box-shadow .22s ease; }
.prereg-btn:hover { transform:translateY(-2px);
  box-shadow:0 0 0 1.5px #EFD9A4, 0 0 0 5px rgba(201,162,75,.26),
    0 16px 30px -12px rgba(142,31,71,.75); }
.prereg-btn__ico { font-family:Cinzel, serif; font-weight:700; font-size:1.05em; line-height:1; }
.prereg-note { font-family:"Noto Sans TC", sans-serif; font-size:.86rem;
  color:rgba(94,19,49,.6); margin:0; letter-spacing:.04em; }

/* ==================== PREREG — tier cards ==================== */
.prereg-tiers .sec-head { text-align:center; }
.prereg-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:34px; }
@media (max-width: 860px){ .prereg-grid { grid-template-columns:1fr; } }
.prereg-card { position:relative; background:#FFFBF7; border-radius:14px;
  border:1px solid rgba(201,162,75,.4); padding:46px 20px 30px; text-align:center;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 12px 30px -20px rgba(94,19,49,.3);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.prereg-card__state { position:absolute; top:14px; left:50%; transform:translateX(-50%);
  padding:4px 16px; border-radius:999px; font-size:.74rem; letter-spacing:.14em;
  font-family:"Noto Sans TC", sans-serif; font-weight:700; white-space:nowrap; }
.prereg-card__tier { font-family:"Noto Serif TC", serif; font-weight:900;
  font-size:1.22rem; color:#5E1331; margin:14px 0 10px; }
.prereg-card__tier::after { content:""; display:block; width:56px; height:1px; margin:10px auto 0;
  background:linear-gradient(90deg, transparent, #C9A24B 18%, #EFD9A4 50%, #C9A24B 82%, transparent); }
.prereg-card__body { min-height:64px; display:grid; place-items:center; }
.prereg-card__gift { font-family:"Noto Sans TC", sans-serif; font-size:.98rem;
  line-height:1.75; color:rgba(94,19,49,.85); margin:0; }
.prereg-card__mystery { font-family:"Noto Serif TC", serif; font-weight:900;
  font-size:1.5rem; letter-spacing:.18em; color:rgba(94,19,49,.32); margin:0;
  text-shadow:0 0 14px rgba(94,19,49,.18); }

/* 狀態:公開中 */
.prereg-card.is-open { border-color:#E0517E; }
.prereg-card.is-open .prereg-card__state { color:#FFF8F0;
  background:linear-gradient(110deg, #EE6E94, #C12C5C 55%, #8E1F47);
  box-shadow:0 0 0 1px #C9A24B; }

/* 狀態:Coming Soon */
.prereg-card.is-soon { opacity:.78; }
.prereg-card.is-soon .prereg-card__state { color:rgba(94,19,49,.55);
  background:rgba(94,19,49,.07); border:1px solid rgba(94,19,49,.18);
  font-family:Cinzel, serif; font-weight:600; letter-spacing:.1em; }

/* 狀態:已達成 */
.prereg-card.is-achieved { border-color:#C9A24B;
  background:linear-gradient(180deg, rgba(201,162,75,.14), #FFFBF7 55%);
  box-shadow:0 0 0 1px rgba(201,162,75,.35), 0 1px 0 rgba(255,255,255,.85) inset,
    0 12px 30px -18px rgba(201,162,75,.55); }
.prereg-card.is-achieved .prereg-card__state { color:#5E1331;
  background:linear-gradient(155deg, #FCEFC9, #E9C972 50%, #C9A24B);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }