/* ============================================================
   楓葉幻想 · style3.css — shared shell for sub-pages
   (page hero, class roster, patch timeline, download steps)
   ============================================================ */

/* ---------- sub-page header (compact hero) ---------- */
.page-hero{
  position:relative;padding:clamp(120px,15vw,170px) clamp(16px,4vw,48px) clamp(40px,5vw,60px);
  text-align:center;overflow:hidden;
}
.page-hero__bg{
  position:absolute;inset:0;z-index:0;
  background:url(img/hero_bg.png?v=2) center 30% / cover no-repeat;opacity:.32;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 60%,transparent 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 60%,transparent 100%);
}
.page-hero__veil{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(10,8,32,.55),rgba(10,8,32,.2) 40%,var(--night-0))}
.page-hero>*{position:relative;z-index:2}
.page-hero .h-sec{font-size:clamp(34px,5.4vw,62px)}
.page-hero .sub-sec{margin:16px auto 0}
.breadcrumb{
  display:flex;gap:8px;justify-content:center;align-items:center;
  font-size:13px;letter-spacing:.06em;color:var(--ink-dim);margin-bottom:18px;
}
.breadcrumb a{color:var(--ice);transition:.2s}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{opacity:.5}

/* nav active state */
.nav__links a.active{color:#fff}
.nav__links a.active::after{right:0}

/* ============ CLASS ROSTER ============ */
.cat{display:flex;align-items:center;gap:16px;margin:54px 0 24px}
.cat__bar{height:1px;flex:1;background:linear-gradient(90deg,var(--border-bright),transparent)}
.cat__name{font-family:var(--font-head);font-weight:900;font-size:clamp(22px,2.6vw,30px);color:#fff;white-space:nowrap}
.cat__en{font-family:var(--font-disp);letter-spacing:.24em;font-size:12px;color:var(--ice);text-transform:uppercase}
.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rcard{
  position:relative;border-radius:20px;overflow:hidden;aspect-ratio:3/4;
  background:linear-gradient(170deg,rgba(40,28,92,.5),rgba(18,12,48,.7));
  border:1px solid var(--border);box-shadow:var(--shadow-card);
  display:flex;align-items:flex-end;transition:transform .3s,border-color .3s,box-shadow .3s;
}
.rcard__glow{position:absolute;inset:0;z-index:0;background:radial-gradient(70% 55% at 50% 32%,rgba(150,120,255,.4),transparent 70%);opacity:.6;transition:opacity .3s}
.rcard img{
  position:absolute;z-index:1;left:50%;top:46%;transform:translate(-50%,-50%) scale(1);
  height:84%;width:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));transition:transform .35s;
}
.rcard__cap{
  position:relative;z-index:2;width:100%;padding:46px 18px 18px;
  background:linear-gradient(0deg,rgba(8,6,26,.94),rgba(8,6,26,.55) 60%,transparent);
}
.rcard__role{font-family:var(--font-disp);font-size:11px;letter-spacing:.18em;color:var(--ice);text-transform:uppercase}
.rcard__name{font-family:var(--font-head);font-weight:800;font-size:21px;color:#fff;margin-top:3px}
.rcard__en{font-size:12px;color:var(--ink-dim);letter-spacing:.08em}
.rcard:hover{transform:translateY(-6px);border-color:var(--border-bright);box-shadow:0 26px 60px -20px #000,var(--glow-violet)}
.rcard:hover .rcard__glow{opacity:1}
.rcard:hover img{transform:translate(-50%,-50%) scale(1.05)}
.rcard__badge{
  position:absolute;top:12px;right:12px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:4px 10px;border-radius:999px;background:var(--grad-btn);color:#1a103a;
}

/* ============ PATCH TIMELINE ============ */
.timeline{position:relative;max-width:880px;margin:0 auto;padding-left:34px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--ice),var(--violet),transparent)}
.tl-item{position:relative;margin-bottom:30px}
.tl-item::before{
  content:"";position:absolute;left:-34px;top:5px;width:16px;height:16px;border-radius:50%;
  background:var(--grad-btn);box-shadow:var(--glow-blue);border:3px solid var(--night-1);
}
.tl-date{font-family:var(--font-disp);font-size:13px;letter-spacing:.12em;color:var(--ice);margin-bottom:10px}
.tl-card{padding:24px 26px}
.tl-card .chip{margin-bottom:12px}
.tl-card h3{font-family:var(--font-head);font-weight:800;font-size:clamp(19px,2vw,24px);color:#fff;margin-bottom:10px}
.tl-card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.tl-card li{display:flex;gap:11px;color:var(--ink-soft);font-size:15px;align-items:flex-start}
.tl-card li svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;stroke:var(--ice);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* big feature update banner */
.patch-hero{padding:0;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;margin-bottom:30px;min-height:300px}
.patch-hero__body{padding:clamp(28px,3.5vw,44px);display:flex;flex-direction:column;justify-content:center}
.patch-hero__body h2{font-family:var(--font-head);font-weight:900;font-size:clamp(26px,3.2vw,40px);color:#fff;line-height:1.15;margin:14px 0 12px}
.patch-hero__body p{color:var(--ink-soft);font-size:clamp(15px,1.4vw,17px);max-width:46ch}
.patch-hero__art{position:relative;overflow:hidden}
.patch-hero__art .pa-bg{position:absolute;inset:0;background:url(img/hero_bg.png?v=2) center/cover;opacity:.9}
.patch-hero__art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--night-1),transparent 40%),linear-gradient(0deg,rgba(10,8,32,.6),transparent)}

/* ============ DOWNLOAD STEPS / REQ ============ */
.dl-platforms{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}
.dlp{padding:32px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.dlp__ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin-bottom:14px;background:linear-gradient(150deg,rgba(120,160,255,.3),rgba(180,108,255,.28));border:1px solid var(--border-bright);box-shadow:var(--glow-blue)}
.dlp__ic svg{width:34px;height:34px;fill:var(--ice)}
.dlp h3{font-family:var(--font-head);font-weight:800;font-size:22px;color:#fff}
.dlp p{color:var(--ink-dim);font-size:13.5px;margin-bottom:8px}
.dlp .btn{margin-top:auto;width:100%}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{padding:28px 24px;position:relative}
.step__n{font-family:var(--font-disp);font-weight:700;font-size:42px;line-height:1;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.step h4{font-family:var(--font-head);font-weight:700;font-size:18px;color:#fff;margin-bottom:8px}
.step p{color:var(--ink-soft);font-size:14px}
.step:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:42px;color:var(--ink-dim);font-size:20px;z-index:3}

.req{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.req-col{padding:26px 28px}
.req-col h4{font-family:var(--font-head);font-weight:700;font-size:18px;color:#fff;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.req-col h4 svg{width:22px;height:22px;stroke:var(--ice);fill:none;stroke-width:1.8}
.req-col dl{display:grid;grid-template-columns:auto 1fr;gap:11px 18px}
.req-col dt{color:var(--ink-dim);font-size:14px;white-space:nowrap}
.req-col dd{color:var(--ink);font-size:14px;text-align:right}

/* faq */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{padding:0 24px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:var(--font-head);font-weight:700;font-size:17px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;color:var(--ice);transition:transform .25s;font-weight:400}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--ink-soft);font-size:15px;padding:0 0 22px;max-width:64ch}

/* ============ AUTH (login / register) ============ */
.auth-wrap{max-width:1020px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:24px;overflow:hidden}
.auth-card{padding:clamp(32px,4vw,52px)}
.auth-card h1{font-family:var(--font-head);font-weight:900;font-size:clamp(26px,3vw,36px);color:#fff;margin-bottom:8px}
.auth-card .sub-sec{font-size:15px;margin:0 0 26px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:13px;letter-spacing:.04em;color:var(--ink-soft);font-weight:600}
.field input{
  width:100%;padding:13px 15px;border-radius:12px;font-size:15px;font-family:inherit;
  color:var(--ink);background:rgba(12,9,32,.6);border:1px solid var(--border);transition:.2s;
}
.field input::placeholder{color:var(--ink-dim)}
.field input:focus{outline:none;border-color:var(--border-bright);box-shadow:var(--glow-blue);background:rgba(18,12,48,.75)}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 22px;font-size:13.5px}
.check{display:flex;align-items:center;gap:9px;color:var(--ink-soft);cursor:pointer;user-select:none}
.check input{width:17px;height:17px;accent-color:var(--violet);cursor:pointer}
.auth-row a{color:var(--ice);transition:.2s}
.auth-row a:hover{color:#fff}
.auth-card .btn{width:100%}
.auth-div{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--ink-dim);font-size:12.5px;letter-spacing:.06em}
.auth-div::before,.auth-div::after{content:"";flex:1;height:1px;background:var(--border)}
.social{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.social a{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:12px;background:var(--glass-2);border:1px solid var(--border);font-size:14px;font-weight:600;color:var(--ink);transition:.2s}
.social a:hover{transform:translateY(-2px);border-color:var(--border-bright);box-shadow:var(--glow-blue)}
.social svg{width:20px;height:20px}
.auth-swap{text-align:center;margin-top:24px;font-size:14px;color:var(--ink-dim)}
.auth-swap a{color:var(--ice);font-weight:600}
.auth-swap a:hover{color:#fff}
.agree{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink-soft);margin:2px 0 22px;line-height:1.5}
.agree input{margin-top:3px;width:16px;height:16px;accent-color:var(--violet);flex-shrink:0;cursor:pointer}
.agree a{color:var(--ice)}
/* email verification code row */
.code-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:stretch}
.code-row input{
  width:100%;padding:13px 15px;border-radius:12px;font-size:15px;font-family:inherit;letter-spacing:.18em;
  color:var(--ink);background:rgba(12,9,32,.6);border:1px solid var(--border);transition:.2s;
}
.code-row input::placeholder{letter-spacing:.04em;color:var(--ink-dim)}
.code-row input:focus{outline:none;border-color:var(--border-bright);box-shadow:var(--glow-blue);background:rgba(18,12,48,.75)}
.code-send{padding:0 18px;font-size:13.5px;white-space:nowrap;border-radius:12px}
.code-send:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
/* aside panel */
.auth-aside{position:relative;padding:clamp(32px,4vw,46px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:linear-gradient(160deg,rgba(60,42,142,.55),rgba(26,18,64,.75))}
.auth-aside__bg{position:absolute;inset:0;background:url(img/hero_bg.png?v=2) center/cover;opacity:.3}
.auth-aside__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,54,.5),rgba(10,8,32,.7))}
.auth-aside>*{position:relative;z-index:2}
.auth-aside h2{font-family:var(--font-head);font-weight:800;font-size:clamp(22px,2.4vw,28px);color:#fff;margin:14px 0 12px}
.auth-aside p{color:var(--ink-soft);font-size:15px;margin-bottom:22px}
.auth-aside .set-slots{gap:9px}
.auth-aside .slot{width:46px;height:46px}
.auth-aside .slot img{width:32px;height:32px}

/* ============ SHOP ============ */
.shop-filter{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:36px}
.shop-filter button{
  padding:10px 22px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.03em;
  color:var(--ink-soft);background:var(--glass-2);border:1px solid var(--border);transition:.22s;
}
.shop-filter button:hover{color:#fff;border-color:var(--border-bright)}
.shop-filter button.on{color:#fff;background:var(--grad-btn);border-color:transparent;box-shadow:var(--glow-violet)}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pcard{position:relative;padding:22px 20px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .28s,border-color .28s,box-shadow .28s}
.pcard:hover{transform:translateY(-6px);border-color:var(--border-bright);box-shadow:0 24px 54px -22px #000,var(--glow-violet)}
.pcard__badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:var(--grad-btn);color:#1a103a}
.pcard__off{position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:999px;background:rgba(255,120,160,.18);color:#ff9ec0;border:1px solid rgba(255,120,160,.4)}
.pcard__thumb{
  width:118px;height:118px;border-radius:18px;display:grid;place-items:center;margin:8px 0 16px;
  background:radial-gradient(circle at 50% 36%,rgba(120,150,255,.26),rgba(18,12,48,.7));
  border:1px solid var(--border);box-shadow:inset 0 0 18px rgba(0,0,0,.5);
}
.pcard__thumb img{width:84px;height:84px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55))}
.pcard__name{font-family:var(--font-head);font-weight:700;font-size:16px;color:#fff;margin-bottom:10px;min-height:2.6em;display:flex;align-items:center}
.pcard__price{display:flex;align-items:baseline;gap:8px;margin-bottom:16px}
.pcard__price s{color:var(--ink-dim);font-size:13px}
.pcard__price b{font-family:var(--font-disp);font-weight:700;font-size:24px;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.pcard__price i{font-size:12px;color:var(--ink-dim);font-style:normal}
.pcard .btn{width:100%;padding:11px;font-size:14px}

@media(max-width:980px){
  .auth-wrap{grid-template-columns:1fr;max-width:480px}
  .auth-aside{order:-1;min-height:auto}
  .shop-grid{grid-template-columns:repeat(3,1fr)}
  .roster{grid-template-columns:repeat(3,1fr)}
  .patch-hero{grid-template-columns:1fr}
  .patch-hero__art{min-height:180px;order:-1}
  .dl-platforms{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2)::after,.step:not(:last-child)::after{display:none}
}
@media(max-width:680px){
  .roster{grid-template-columns:1fr 1fr;gap:14px}
  .rcard__name{font-size:18px}
  .req{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .cat{margin:38px 0 18px}
  .shop-grid{grid-template-columns:1fr 1fr;gap:14px}
  .social{grid-template-columns:1fr}
}