/* ============ FEATURES ============ */
.feat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:54px}
/* welcome-gift banner */
.gift{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,38px);align-items:center;
  padding:clamp(26px,3vw,38px);margin-bottom:22px;
  background:linear-gradient(120deg,rgba(120,160,255,.2),rgba(180,108,255,.18));
  border-color:var(--border-bright);
}
.gift__glow{position:absolute;width:440px;height:440px;border-radius:50%;right:-90px;top:-180px;background:radial-gradient(circle,rgba(190,140,255,.4),transparent 64%);filter:blur(8px);z-index:0}
.gift__icon{position:relative;z-index:2;width:clamp(68px,7vw,88px);aspect-ratio:1;border-radius:22px;display:grid;place-items:center;background:linear-gradient(150deg,rgba(150,180,255,.4),rgba(190,120,255,.34));border:1px solid var(--border-bright);box-shadow:var(--glow-violet)}
.gift__icon svg{width:46%;height:46%;stroke:var(--star);fill:none;stroke-width:1.5;stroke-linejoin:round}
.gift__body{position:relative;z-index:2}
.gift__body h3{font-family:var(--font-head);font-weight:900;font-size:clamp(23px,2.5vw,32px);color:#fff;margin:10px 0 20px}
.gift-groups{display:flex;flex-direction:column;gap:22px}
.gift-group__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:13px}
.gift-group__head .dot{width:8px;height:8px;border-radius:50%;background:var(--grad-brand);box-shadow:var(--glow-blue);flex-shrink:0}
.gift-group__head b{font-weight:600;color:var(--ink);font-size:clamp(15px,1.5vw,17px)}
.gift-group__head em{font-style:normal;font-size:12.5px;letter-spacing:.04em;color:var(--ice);padding:4px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(120,150,255,.12);white-space:nowrap}
.subset{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:11px}
.subset__cap{font-size:12px;letter-spacing:.12em;color:var(--ink-dim);min-width:64px;white-space:nowrap}
.set-slots{display:flex;flex-wrap:wrap;gap:10px}
.slot{
  width:54px;height:54px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;
  background:radial-gradient(circle at 50% 36%,rgba(120,150,255,.2),rgba(18,12,48,.66));
  border:1px solid var(--border);box-shadow:inset 0 0 12px rgba(0,0,0,.45);
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.slot:hover{transform:translateY(-3px);border-color:var(--border-bright);box-shadow:var(--glow-blue)}
.slot img{width:38px;height:38px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat-cap{
  text-align:center;margin-top:34px;font-family:var(--font-head);font-weight:700;
  font-size:clamp(17px,1.9vw,23px);letter-spacing:.04em;
  background:linear-gradient(110deg,var(--ice),var(--violet) 60%,var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.feat{padding:34px 30px 32px}
.feat__ico{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin-bottom:22px;
  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);
}
.feat__ico svg{width:30px;height:30px;stroke:var(--ice);fill:none;stroke-width:1.7}
.feat h3{font-family:var(--font-head);font-weight:700;font-size:22px;margin-bottom:10px;color:#fff}
.feat p{color:var(--ink-soft);font-size:15px}
.feat .tag{
  display:inline-block;margin-top:18px;font-size:12px;letter-spacing:.12em;color:var(--ice);white-space:nowrap;
  padding:5px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(120,150,255,.1);
}

/* ============ CLASSES ============ */
.cls-stage{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.cls-art{
  position:relative;aspect-ratio:1/1;display:grid;place-items:center;
}
.cls-art__halo{
  position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(150,120,255,.4),transparent 68%);filter:blur(8px);
}
.cls-art__ring{
  position:absolute;width:74%;aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(170,200,255,.4);animation:spin 26s linear infinite;
}
.cls-art__ring::before{content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--ice);box-shadow:var(--glow-blue)}
@keyframes spin{to{transform:rotate(360deg)}}
.cls-art img{position:relative;z-index:2;max-height:100%;width:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));transition:opacity .5s,transform .5s}
.cls-info .role{font-family:var(--font-disp);letter-spacing:.26em;font-size:13px;color:var(--ice);text-transform:uppercase}
.cls-info h3{font-family:var(--font-head);font-weight:900;font-size:clamp(34px,4.4vw,52px);margin:8px 0 6px;color:#fff;line-height:1.05}
.cls-info .en{font-family:var(--font-disp);letter-spacing:.1em;color:var(--ink-dim);font-size:15px;margin-bottom:18px}
.cls-info p{color:var(--ink-soft);font-size:16px;max-width:46ch}
.cls-bars{margin:24px 0 30px;display:flex;flex-direction:column;gap:13px;max-width:380px}
.bar{display:grid;grid-template-columns:84px 1fr;align-items:center;gap:14px;font-size:13px;color:var(--ink-soft)}
.bar i{height:7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;position:relative}
.bar i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--v,60%);background:var(--grad-brand);border-radius:99px;box-shadow:var(--glow-blue)}
.cls-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.cls-tab{
  display:flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;border-radius:14px;
  background:var(--glass-2);border:1px solid var(--border);transition:.25s;font-size:14px;font-weight:600;color:var(--ink-soft);
}
.cls-tab img{width:38px;height:38px;border-radius:10px;object-fit:cover;object-position:top center;background:rgba(120,150,255,.15);flex-shrink:0}
.cls-tab span{white-space:nowrap}
.cls-tab:hover{transform:translateY(-2px);border-color:var(--border-bright);color:#fff}
.cls-tab.on{border-color:#fff;color:#fff;background:linear-gradient(150deg,rgba(120,160,255,.32),rgba(180,108,255,.3));box-shadow:var(--glow-violet)}

/* ============ NEWS ============ */
.news-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}
.news-feature{padding:0;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px;position:relative}
.news-feature .nf-bg{position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,#3a2a8e,#1a1240);overflow:hidden}
.news-feature .nf-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,8,32,.92),rgba(10,8,32,.1) 70%)}
.news-feature .nf-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(70% 60% at 75% 30%,rgba(150,120,255,.5),transparent 70%)}
.nf-body{position:relative;z-index:2;padding:36px}
.chip{display:inline-block;font-size:12px;letter-spacing:.1em;padding:5px 13px;border-radius:999px;font-weight:700;background:var(--grad-btn);color:#1a103a;white-space:nowrap}
.chip--soft{background:rgba(120,150,255,.16);color:var(--ice);border:1px solid var(--border)}
.news-feature h3{font-family:var(--font-head);font-weight:800;font-size:clamp(24px,2.6vw,32px);color:#fff;margin:16px 0 10px}
.news-feature p{color:var(--ink-soft);max-width:48ch}
.news-list{display:flex;flex-direction:column;gap:14px}
.news-item{display:flex;gap:16px;padding:20px 22px;align-items:flex-start;transition:.25s}
.news-item:hover{transform:translateX(6px);border-color:var(--border-bright)}
.news-item .date{font-family:var(--font-disp);text-align:center;flex-shrink:0;width:54px}
.news-item .date b{display:block;font-size:24px;color:#fff;line-height:1}
.news-item .date span{font-size:11px;letter-spacing:.16em;color:var(--ink-dim)}
.news-item .nx h4{font-size:16px;color:var(--ink);margin-bottom:4px;font-weight:600}
.news-item .nx p{font-size:13.5px;color:var(--ink-dim)}
/* shop new-items banner (replaces news feature) */
.shop-feature{min-height:380px;display:flex;flex-direction:column;gap:18px;padding:32px}
.shop-feature .nf-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(70% 60% at 78% 18%,rgba(150,120,255,.42),transparent 70%);pointer-events:none}
.shop-feature>*{position:relative;z-index:2}
.shop-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.shop-off{font-size:12.5px;letter-spacing:.04em;color:var(--gold);padding:4px 12px;border:1px solid rgba(255,230,163,.4);border-radius:999px;background:rgba(255,230,163,.08);white-space:nowrap}
.shop-feature h3{font-family:var(--font-head);font-weight:800;font-size:clamp(21px,2.3vw,28px);color:#fff}
.shop-items{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2px}
.shop-item{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:14px;background:rgba(20,14,54,.5);border:1px solid var(--border);transition:.22s}
.shop-item:hover{transform:translateY(-3px);border-color:var(--border-bright);box-shadow:var(--glow-blue)}
.shop-item__info{min-width:0}
.shop-item__info>b{display:block;font-size:14.5px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price{display:flex;align-items:baseline;gap:7px;margin-top:3px;font-family:var(--font-disp)}
.price s{color:var(--ink-dim);font-size:12.5px;text-decoration-thickness:1px}
.price b{color:var(--gold);font-size:18px;font-weight:700}
.price i{font-style:normal;font-size:11px;letter-spacing:.08em;color:var(--ink-dim)}

/* ============ DOWNLOAD / COMMUNITY ============ */
.cta-band{position:relative;overflow:hidden}
.cta-card{
  padding:clamp(40px,5vw,68px);text-align:center;position:relative;overflow:hidden;
}
.cta-card .glow-orb{position:absolute;width:60vw;height:60vw;max-width:760px;max-height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(150,120,255,.35),transparent 65%);top:-30%;left:50%;transform:translateX(-50%);filter:blur(10px)}
.cta-card>*{position:relative;z-index:2}
.cta-card h2{font-family:var(--font-head);font-weight:900;font-size:clamp(28px,4vw,50px);color:#fff;line-height:1.12}
.cta-card h2 b{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-card p{color:var(--ink-soft);max-width:50ch;margin:18px auto 0;font-size:clamp(15px,1.4vw,18px)}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.store{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.store a{display:flex;align-items:center;gap:12px;padding:11px 20px;border-radius:13px;background:var(--glass-2);border:1px solid var(--border);transition:.25s;text-align:left}
.store a:hover{transform:translateY(-3px);border-color:var(--border-bright);box-shadow:var(--glow-blue)}
.store svg{width:26px;height:26px;fill:var(--ink)}
.store span{display:block;font-size:11px;color:var(--ink-dim);letter-spacing:.05em}
.store b{font-size:15px;color:#fff}
.community{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.comm{display:flex;align-items:center;gap:16px;padding:22px 24px;transition:.25s}
.comm:hover{transform:translateY(-4px);border-color:var(--border-bright);box-shadow:var(--glow-violet)}
.comm__ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;background:linear-gradient(150deg,rgba(120,160,255,.3),rgba(180,108,255,.28));border:1px solid var(--border-bright)}
.comm__ic svg{width:26px;height:26px;fill:var(--ice)}
.comm b{display:block;color:#fff;font-size:17px}
.comm span{font-size:13px;color:var(--ink-dim)}

/* ============ FOOTER ============ */
.footer{padding:56px clamp(16px,4vw,48px) 40px;position:relative}
.foot-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;border-top:1px solid var(--border);padding-top:48px}
.foot-brand img{height:46px;margin-bottom:16px;filter:drop-shadow(0 2px 8px rgba(120,140,255,.5))}
.foot-brand p{color:var(--ink-dim);font-size:14px;max-width:34ch}
.foot-col h5{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ice);margin-bottom:16px;font-family:var(--font-disp)}
.foot-col a{display:block;color:var(--ink-soft);font-size:14.5px;padding:5px 0;transition:.2s}
.foot-col a:hover{color:#fff;padding-left:5px}
.foot-bot{max-width:var(--maxw);margin:40px auto 0;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-dim);font-size:13px}

/* ============ NO-ANIM FALLBACK ============
   Some preview/headless renderers never fire requestAnimationFrame,
   so CSS transitions & keyframes never progress. In that case JS adds
   .no-anim to <html> and we snap every animated element to its visible
   end-state with transitions disabled. */
.no-anim *{transition:none !important;animation:none !important}
.no-anim .hero__logo,
.no-anim .hero__char,
.no-anim .reveal{opacity:1 !important;transform:none !important}
.no-anim .hero__char{opacity:.96 !important}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .features{grid-template-columns:1fr 1fr}
  .gift{grid-template-columns:1fr;text-align:left}
  .cls-stage{grid-template-columns:1fr;gap:30px}
  .cls-art{max-width:420px;margin:0 auto;order:-1}
  .news-grid{grid-template-columns:1fr}
  .community{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero__char{opacity:.45 !important}
}
/* 手機下拉選單頂部 logo（桌機隱藏） */
.nav__links-logo{display:none}
@media(max-width:680px){
  .nav__links{
    position:fixed;top:0;left:0;right:0;width:100%;
    flex-direction:column;gap:6px;margin:0;padding:64px 28px 26px;
    background:linear-gradient(180deg,rgba(20,14,54,.98),rgba(10,8,32,.98));
    backdrop-filter:blur(16px);
    transform:translateY(-100%);transition:transform .4s;
    border-bottom:1px solid var(--border);z-index:55;
    max-height:100svh;overflow-y:auto;
  }
  .nav__links.open{transform:translateY(0)}
  .nav__links a{font-size:18px;padding:12px 0;width:100%;text-align:center}
  .nav__links-logo{display:flex;justify-content:center;height:80px;margin:0 auto 16px;padding:0}
  .nav__links-logo img{display:block;height:100%;width:auto;filter:drop-shadow(0 2px 8px rgba(120,140,255,.5))}
  .nav__burger{display:flex;margin-left:auto;position:relative;z-index:60}
  .nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__burger.open span:nth-child(2){opacity:0}
  .nav__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .features{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .hero__char{display:none}
  .lang button{padding:5px 8px;font-size:12px}
  .moon{width:160px;height:160px}
}