/* Hallmark · genre: atmospheric editorial · macrostructure: Lantern Steps · theme: Verdant Nocturne · enrichment: real Flower Witch assets · nav: N3 · footer: Ft4
 * audience: Chinese players searching install, guide and codex pages
 * use: homepage hub + SEO articles + screenshot browsing
 * tone: botanical, mystical, calm
 * pre-emit critique: P4 H4 E4 S4 R4 V4
 */
html,body{overflow-x:clip;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);color:var(--fw-ink);background:
radial-gradient(circle at 18% 10%,oklch(38% .06 138 / .18),transparent 22rem),
radial-gradient(circle at 84% 12%,oklch(48% .08 28 / .12),transparent 24rem),
linear-gradient(180deg,oklch(16% .024 172),oklch(14% .02 170) 40%,oklch(13% .018 170));
line-height:1.7}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.site-shell{width:min(var(--shell),calc(100% - 28px));margin-inline:auto}
.nav-masthead{position:sticky;top:0;z-index:60;padding:14px 0 0}
.nav-inner{width:min(1160px,calc(100% - 20px));margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:12px 14px;border:1px solid var(--fw-line);border-radius:var(--radius-pill);background:var(--fw-glass);backdrop-filter:blur(18px);box-shadow:var(--shadow-soft)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:42px;height:42px;border-radius:12px;object-fit:cover;border:1px solid var(--fw-line)}
.brand-text{display:grid;min-width:0}
.brand-text strong{font:600 1rem/1.1 var(--font-display);letter-spacing:.01em}
.brand-text span:last-child{color:var(--fw-ink-soft);font-size:.78rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.nav-links{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.nav-links a:not(.btn),.nav-panel a{padding:10px 14px;border-radius:var(--radius-pill);color:var(--fw-ink-soft);white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current=page],.nav-panel a:hover{background:var(--fw-paper-3);color:var(--fw-ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:var(--radius-pill);font-weight:700;border:1px solid var(--fw-line);white-space:nowrap}
.btn-primary{background:linear-gradient(120deg,var(--fw-accent),var(--fw-accent-2));color:oklch(15% .02 168);border-color:transparent;box-shadow:0 12px 28px oklch(8% .02 170 / .26)}
.btn-secondary{background:var(--fw-paper-2);color:var(--fw-ink)}
.btn-ghost{background:transparent;color:var(--fw-ink-soft)}
.nav-toggle{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--fw-line);background:var(--fw-paper-2);color:var(--fw-ink);place-items:center}
.nav-panel{display:none}
main{padding-bottom:54px}
.hero{padding:42px 0 32px}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.92fr);gap:22px;align-items:stretch}
.hero-copy,.hero-card,.hero-notes,.panel,.article-card,.faq-item,.guide-card,.info-card,.fit-card,.timeline-item,.gallery-frame,.platform-card,.req-card,.topic-chip,.summary-card,.article-shell,.article-links a,.table-shell,.step-card{background:linear-gradient(180deg,oklch(20% .03 170 / .86),oklch(17% .026 170 / .94));border:1px solid var(--fw-line);box-shadow:var(--shadow-soft)}
.hero-copy{padding:30px;border-radius:28px}
.hero-kicker,.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fw-accent-3)}
.hero-kicker:before,.eyebrow:before{content:"";width:42px;height:1px;background:linear-gradient(90deg,var(--fw-accent),transparent)}
h1,h2,h3{margin:0;font-style:normal}
h1{font:600 clamp(2.8rem,6vw,5.5rem)/.94 var(--font-display);overflow-wrap:anywhere}
h1 .en{display:block;margin-top:10px;font:600 clamp(1rem,2.5vw,1.8rem)/1.2 var(--font-detail);color:var(--fw-ink-soft)}
.hero-sub{margin:20px 0 0;max-width:42rem;font-size:1.08rem;color:var(--fw-ink-soft)}
.badge-row,.metric-row,.inline-links,.topic-links,.footer-links,.checklist-links{display:flex;flex-wrap:wrap;gap:10px}
.badge,.metric,.topic-chip{padding:10px 14px;border:1px solid var(--fw-line);border-radius:var(--radius-pill);background:oklch(24% .03 168 / .72);color:var(--fw-ink-soft)}
.metric strong{display:block;color:var(--fw-ink);font-size:1rem}
.metric span{font-size:.8rem;color:var(--fw-muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero-card{padding:12px;border-radius:28px;display:grid;grid-template-rows:auto auto}
.hero-card img{width:100%;min-height:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px}
.hero-card figcaption{padding:12px 8px 2px;color:var(--fw-ink-soft);font-size:.95rem}
.hero-notes{margin-top:18px;padding:18px 20px;border-radius:22px}
.hero-notes ul{margin:12px 0 0;padding-left:18px;color:var(--fw-ink-soft)}
section{padding:26px 0}
.split-band{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:16px}
.section-head h2,.article-shell h1{font:600 clamp(1.7rem,4vw,3rem)/1.02 var(--font-display)}
.section-head p,.article-shell p,.article-shell li,.article-shell td{color:var(--fw-ink-soft)}
.section-head p{max-width:40rem}
.info-grid,.feature-grid,.fit-grid,.gallery-grid,.guide-grid,.platform-grid,.req-grid,.topic-grid,.summary-grid{display:grid;gap:14px}
.info-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.fit-grid,.platform-grid,.req-grid,.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.guide-grid,.topic-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.info-card,.fit-card,.platform-card,.req-card,.summary-card,.step-card{padding:18px;border-radius:20px}
.info-card span,.summary-card span{display:block;font-size:.82rem;color:var(--fw-muted);text-transform:uppercase;letter-spacing:.08em}
.info-card strong{display:block;margin-top:8px;font:600 1.05rem/1.3 var(--font-detail)}
.feature-card,.guide-card,.article-card{padding:20px;border-radius:20px;transition:transform .2s ease,border-color .2s ease}
.feature-card:hover,.guide-card:hover,.article-card:hover,.gallery-frame:hover{transform:translateY(-3px);border-color:var(--fw-accent)}
.feature-card h3,.guide-card h3,.article-card h3{font:600 1.2rem/1.15 var(--font-detail);margin-bottom:10px}
.feature-card p,.guide-card p,.article-card p,.fit-card p,.platform-card p,.req-card p,.summary-card p{margin:0;color:var(--fw-ink-soft)}
.gallery-frame{padding:10px;border-radius:20px;cursor:pointer}
.gallery-frame img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.gallery-frame figcaption{padding:12px 6px 4px;color:var(--fw-ink-soft)}
.story-ribbon,.download-band,.final-cta,.article-links a,.table-shell,.panel{padding:22px;border-radius:24px}
.story-ribbon{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.download-band,.final-cta{text-align:center;background:
radial-gradient(circle at top,var(--fw-accent-2),transparent 16rem),
linear-gradient(145deg,oklch(22% .05 150),oklch(18% .028 170))}
.download-band p,.final-cta p{color:var(--fw-ink-soft)}
.timeline{display:grid;gap:12px}
.timeline-item{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:18px;border-radius:18px}
.timeline-item time{font:600 1rem/1 var(--font-detail);color:var(--fw-accent-3)}
.topic-links,.article-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.topic-links a,.article-links a{padding:16px;border-radius:18px}
.topic-links a:hover,.article-links a:hover{border-color:var(--fw-accent)}
.faq-list{display:grid;gap:10px}
.faq-item{border-radius:18px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:700}
.faq-item summary::-webkit-details-marker{display:none}
.faq-body{padding:0 20px 20px;color:var(--fw-ink-soft)}
.lightbox,.modal{position:fixed;inset:0;z-index:90;background:oklch(7% .02 170 / .88);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.is-open,.modal.is-open{display:flex}
.lightbox img{max-width:min(100%,1100px);max-height:80vh;border-radius:18px;border:1px solid var(--fw-line)}
.lightbox-close,.lightbox-nav{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--fw-line);background:var(--fw-paper-2);color:var(--fw-ink)}
.lightbox-close{top:20px;right:20px}
.lightbox-nav.prev{left:20px}
.lightbox-nav.next{right:20px}
.page-hero{padding:34px 0 12px}
.page-hero-grid{display:grid;grid-template-columns:1fr 320px;gap:18px}
.article-shell{padding:28px;border-radius:28px;max-width:920px}
.article-shell .direct-answer{font-size:1.08rem;color:var(--fw-ink);margin-top:16px}
.article-shell h1{margin-bottom:14px}
.article-shell h2{font:600 1.5rem/1.1 var(--font-display);margin:28px 0 12px}
.article-shell ul,.article-shell ol{padding-left:20px}
.article-shell table{width:100%;border-collapse:collapse}
.article-shell th,.article-shell td{padding:13px 12px;border-bottom:1px solid var(--fw-line);text-align:left;vertical-align:top}
.article-shell th{color:var(--fw-accent-3);font-weight:700}
.article-meta{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.article-meta span{padding:8px 12px;border-radius:var(--radius-pill);border:1px solid var(--fw-line);background:oklch(23% .03 168 / .76);color:var(--fw-ink-soft);font-size:.88rem}
.callout{padding:16px 18px;border-left:3px solid var(--fw-accent);background:oklch(24% .032 166 / .64);border-radius:0 14px 14px 0;color:var(--fw-ink-soft)}
.site-footer{padding:30px 0 20px;border-top:1px solid var(--fw-line)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px}
.footer-meta{display:flex;justify-content:space-between;gap:16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--fw-line);color:var(--fw-muted);font-size:.88rem}
.footer-links a,.related-games a{display:inline-flex;padding:8px 0;color:var(--fw-ink-soft)}
.table-shell table{width:100%;border-collapse:collapse}
.table-shell th,.table-shell td{padding:12px;border-bottom:1px solid var(--fw-line);text-align:left;color:var(--fw-ink-soft)}
.table-shell th{color:var(--fw-accent-3)}
.steps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.step-card strong{display:block;margin-bottom:8px;font:600 1rem/1.2 var(--font-detail);color:var(--fw-ink)}
.subdued{color:var(--fw-muted)}
@media (max-width:980px){
  .nav-inner{grid-template-columns:auto auto auto}
  .nav-links{display:none}
  .nav-toggle{display:grid}
  .nav-panel.is-open{display:grid;grid-column:1/-1;gap:6px;padding-top:6px}
  .hero-layout,.split-band,.story-ribbon,.page-hero-grid,.footer-grid{grid-template-columns:1fr}
  .info-grid,.feature-grid,.gallery-grid,.guide-grid,.topic-grid,.topic-links,.article-links,.steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fit-grid,.platform-grid,.req-grid,.summary-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .site-shell{width:min(var(--shell),calc(100% - 20px))}
  h1{font-size:2.6rem}
  .info-grid,.feature-grid,.gallery-grid,.guide-grid,.topic-grid,.topic-links,.article-links,.steps-grid{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:1fr}
  .btn{width:100%}
  .hero-actions{display:grid}
  .footer-meta{display:grid}
  .page-hero{padding-top:22px}
}