/* Hallmark · macrostructure: Split Studio · tone: high-contrast ACG commerce · anchor hue: orange
 * theme: custom · vibe: red-black Japanese game retail · paper: oklch(98% 0.008 72) · accent: oklch(79.3% 0.171 70.7)
 * axes: light / classical-serif / warm · nav: N12 · footer: Ft1 · enrichment: verified game imagery
 * audience: Chinese players researching the game · use: reach verified download guidance · motion: CTA press + one entrance
 * contrast: pass (40–41) · nav: N12 · footer: Ft1 · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobile: pass (34, 49, 50–57) · Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 */
@import url("../../tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: calc(var(--nav-h) + var(--space-md)); }
body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.68; padding-bottom: 4.75rem; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.12em; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
:focus-visible { outline: var(--rule-strong) solid var(--color-focus); outline-offset: var(--space-2xs); }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }

.skip-link { position: fixed; inset-block-start: var(--space-xs); inset-inline-start: var(--space-xs); transform: translateY(-160%); z-index: var(--z-tooltip); background: var(--color-paper); color: var(--color-ink); padding: var(--space-sm) var(--space-md); border: var(--rule-strong) solid var(--color-ink); }
.skip-link:focus { transform: none; }
.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; min-width: 0; }
.narrow { width: min(calc(100% - 2rem), 52rem); margin-inline: auto; }
.measure { max-width: 65ch; }
.muted { color: var(--color-muted); }
.data-label { font-family: var(--font-data); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--dark { background: var(--color-ink); color: var(--color-paper); }
.section--tint { background: var(--color-paper-2); color: var(--color-ink); }
.section-head { display: grid; gap: var(--space-sm); margin-block-end: var(--space-xl); max-width: 48rem; }
.section-head h2, .section-head p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; overflow-wrap: anywhere; min-width: 0; line-height: 1.14; letter-spacing: -0.025em; }
h1 { font-size: var(--text-display-s); }
h2 { font-size: clamp(2rem, 4vw, var(--text-3xl)); }
h3 { font-size: var(--text-lg); }
p { margin-block: 0 var(--space-md); }
.lede { font-size: var(--text-md); line-height: 1.58; max-width: 60ch; }
.kicker { display: inline-flex; width: fit-content; align-items: center; gap: var(--space-xs); font-family: var(--font-data); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.kicker::before { content: ""; width: 1.25rem; height: var(--rule-strong); background: var(--color-accent); }

.site-header { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky); }
.nav-bar { min-height: var(--nav-h); display: flex; align-items: center; background: var(--color-ink); color: var(--color-paper); border-block-end: var(--rule-thin) solid var(--color-rule-dark); }
.nav-inner { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); }
.nav-inner > .cta-row { grid-column: 3; }
.wordmark { font-family: var(--font-display); font-size: clamp(0.82rem, 3.4vw, var(--text-md)); font-weight: 700; letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
.nav-links { display: none; align-items: center; justify-content: center; gap: var(--space-lg); }
.nav-links a, .footer a { white-space: nowrap; }
.nav-links a { min-height: 2.75rem; display: inline-flex; align-items: center; text-decoration: none; color: var(--color-paper); border-block-end: var(--rule-strong) solid transparent; }
.nav-links a[aria-current="page"], .nav-links a:hover { border-block-end-color: var(--color-accent); }
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; border: var(--rule-thin) solid var(--color-rule-dark); cursor: pointer; white-space: nowrap; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu-panel { position: absolute; inset-block-start: calc(100% + var(--space-xs)); inset-inline-end: 0; min-width: 12rem; display: grid; padding: var(--space-xs); background: var(--color-ink); color: var(--color-paper); border: var(--rule-thin) solid var(--color-rule-dark); box-shadow: 0 var(--space-xs) var(--space-lg) var(--color-shadow); }
.nav-menu-panel a { padding: var(--space-sm) var(--space-md); text-decoration: none; white-space: nowrap; }
.nav-menu-panel a:hover, .nav-menu-panel a:focus-visible { background: var(--color-ink-2); color: var(--color-paper); }
.nav-inner > .cta-row > .button { display: none; }
.nav-links a:active, .footer a:active, .nav-menu-panel a:active { color: var(--color-accent); }

.button { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-lg); border: var(--rule-strong) solid var(--color-ink); border-radius: var(--radius-xs); background: var(--color-paper); color: var(--color-ink); font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.button--primary { position: relative; overflow: hidden; background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-ink); }
.button--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, var(--color-paper) 50%, transparent 70%); opacity: 0.34; transform: translateX(-140%); animation: cta-sheen 4.8s var(--ease-in-out) infinite; pointer-events: none; }
.button--dark { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-paper); }
.button[aria-disabled="true"], .button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.button[data-state="loading"] { cursor: progress; }
.button[data-state="error"] { border-style: double; border-color: var(--color-alert); }
.button[data-state="success"] { border-style: double; }
.button:active { transform: translateY(var(--space-3xs)); }
@keyframes cta-sheen { 0%, 62% { transform: translateX(-140%); } 88%, 100% { transform: translateX(140%); } }

.hero { position: relative; min-height: 49rem; display: grid; align-items: end; background: var(--color-ink); color: var(--color-paper); padding-block: calc(var(--nav-h) + var(--space-lg)) calc(var(--space-4xl) + var(--space-lg)); }
.hero--gallery { min-height: 36rem; }
.hero--subpage { min-height: 39rem; }
.hero--article { min-height: 34rem; }
.hero-media { position: absolute; inset: 0; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-overlay), transparent), linear-gradient(0deg, var(--color-overlay), transparent); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-content { position: relative; z-index: var(--z-raised); display: grid; gap: var(--space-lg); max-width: 54rem; min-width: 0; }
.hero h1, .hero p { margin: 0; }
.hero h1 { font-size: var(--text-display); word-break: break-word; }
.hero .english-name { display: block; max-width: 100%; margin-block-start: var(--space-xs); font-family: var(--font-body); font-size: var(--text-md); font-weight: 700; letter-spacing: 0; overflow-wrap: anywhere; }
.tag-row, .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tag { display: inline-flex; align-items: center; min-height: 2rem; padding-inline: var(--space-sm); background: var(--color-ink); color: var(--color-paper); border: var(--rule-thin) solid var(--color-rule-dark); font-family: var(--font-data); font-size: var(--text-xs); white-space: nowrap; }
.metric-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rule-thin); background: var(--color-rule-dark); border: var(--rule-thin) solid var(--color-rule-dark); max-width: 44rem; }
.metric { min-width: 0; background: var(--color-ink); padding: var(--space-sm) var(--space-md); }
.metric strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-paper); }
.metric strong { overflow-wrap: anywhere; }
.metric span { color: var(--color-paper-3); font-size: var(--text-sm); }

.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rule-thin); background: var(--color-rule-dark); border: var(--rule-thin) solid var(--color-rule-dark); }
.info-item { background: var(--color-ink-2); color: var(--color-paper); padding: var(--space-lg); min-width: 0; }
.info-item dt { color: var(--color-paper-3); font-size: var(--text-sm); }
.info-item dd { margin: var(--space-xs) 0 0; font-family: var(--font-display); font-size: var(--text-md); overflow-wrap: anywhere; }
.source-note { margin-block-start: var(--space-lg); color: var(--color-paper-3); font-size: var(--text-sm); }

.split { display: grid; gap: var(--space-xl); align-items: center; }
.split-media { min-width: 0; border: var(--rule-thin) solid var(--color-rule); background: var(--color-paper-2); }
.split-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.split-copy { min-width: 0; }
.split-copy h2 { margin-block: var(--space-sm) var(--space-lg); }

.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.feature-card { position: relative; min-width: 0; padding: var(--space-xl); background: var(--color-paper); color: var(--color-ink); border: var(--rule-thin) solid var(--color-rule); }
.feature-card::before { content: attr(data-code); display: block; font-family: var(--font-data); font-size: var(--text-sm); color: var(--color-alert); margin-block-end: var(--space-xl); }
.feature-card h3 { margin: 0 0 var(--space-sm); }
.feature-card p { margin: 0; }

.gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.gallery-item { min-width: 0; margin: 0; }
.gallery-button { display: block; width: 100%; padding: 0; border: var(--rule-strong) solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); cursor: zoom-in; overflow: hidden; }
.gallery-button img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.gallery-item figcaption { padding-block-start: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-xl); }
.tab { min-height: 2.75rem; padding-inline: var(--space-md); border: var(--rule-thin) solid var(--color-ink); background: var(--color-paper); color: var(--color-ink); font-weight: 700; white-space: nowrap; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); border-block-end-color: var(--color-accent); }
.tab:active, .icon-button:active, .gallery-button:active, .nav-menu summary:active { transform: translateY(var(--space-3xs)); }
.tab:disabled, .icon-button:disabled, .gallery-button:disabled { opacity: 0.5; cursor: not-allowed; }
.empty-filter { display: none; padding: var(--space-xl); border: var(--rule-thin) dashed var(--color-rule); color: var(--color-muted); }
.empty-filter.is-visible { display: block; }

.lightbox { position: fixed; inset: 0; margin: auto; width: min(94%, 78rem); max-height: 90dvh; padding: var(--space-md); border: var(--rule-thin) solid var(--color-rule-dark); background: var(--color-ink); color: var(--color-paper); }
.lightbox::backdrop { background: var(--color-overlay); }
.lightbox figure { margin: 0; display: grid; gap: var(--space-sm); }
.lightbox img { width: 100%; max-height: 72dvh; object-fit: contain; }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.icon-button { min-width: 2.75rem; min-height: 2.75rem; border: var(--rule-thin) solid var(--color-rule-dark); background: var(--color-ink-2); color: var(--color-paper); cursor: pointer; white-space: nowrap; }

.timeline { display: grid; gap: var(--space-md); }
.timeline details, .faq details { border-block-start: var(--rule-thin) solid var(--color-rule); }
.timeline summary, .faq summary { min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); cursor: pointer; font-weight: 800; list-style: none; }
.timeline summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.timeline summary::after, .faq summary::after { content: "+"; font-family: var(--font-data); font-size: var(--text-lg); flex: 0 0 auto; }
.timeline details[open] summary::after, .faq details[open] summary::after { content: "−"; }
.timeline .details-body, .faq .details-body { padding-block: 0 var(--space-lg); max-width: 70ch; }

.review-summary { display: grid; gap: var(--space-md); padding: var(--space-xl); background: var(--color-ink); color: var(--color-paper); border-block-start: var(--space-xs) solid var(--color-accent); }
.review-score { font-family: var(--font-display); font-size: var(--text-4xl); line-height: 1; font-variant-numeric: tabular-nums; }
.review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-block-start: var(--space-lg); }
.review-card { min-width: 0; padding: var(--space-lg); background: var(--color-paper); color: var(--color-ink); border: var(--rule-thin) solid var(--color-rule); }
.js .review-card[data-reveal] { opacity: 0; transform: translateY(var(--space-xs)); }
.js .review-card[data-reveal].is-visible { opacity: 1; transform: none; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--reveal-index, 0) * var(--dur-micro)); }
.review-card h3 { margin-block-start: 0; }
.review-card small { color: var(--color-muted); }

.download-panel { display: grid; gap: var(--space-lg); padding: var(--space-xl); border: var(--rule-strong) solid var(--color-ink); background: var(--color-paper); }
.download-panel.is-recommended { border-block-start: var(--space-xs) solid var(--color-accent); }
.download-panel.is-unverified { background: var(--color-paper-2); }
.platform-grid, .requirements-grid, .article-grid, .guide-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.steps { counter-reset: steps; display: grid; gap: var(--space-lg); }
.step { counter-increment: steps; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.step::before { content: counter(steps, decimal-leading-zero); width: 3rem; height: 3rem; display: grid; place-items: center; background: var(--color-ink); color: var(--color-paper); font-family: var(--font-data); }
.spec-list { margin: 0; }
.spec-list div { display: grid; grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-block-end: var(--rule-thin) solid var(--color-rule); }
.spec-list dt { font-weight: 800; }
.spec-list dd { margin: 0; overflow-wrap: anywhere; }

.article-card, .guide-card { min-width: 0; padding: var(--space-lg); border: var(--rule-thin) solid var(--color-rule); background: var(--color-paper); }
.article-card h3, .guide-card h3 { margin-block-start: 0; }
.article-card a, .guide-card a { display: inline-flex; min-height: 2.75rem; align-items: center; font-weight: 800; white-space: nowrap; }
.article-shell { display: grid; gap: var(--space-xl); }
.article-nav { padding: var(--space-lg); background: var(--color-ink); color: var(--color-paper); }
.article-nav ol { margin: 0; padding-inline-start: var(--space-lg); }
.article-nav a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--color-paper); }
.prose { max-width: 72ch; }
.prose h2 { margin-block-start: var(--space-2xl); }
.prose h3 { margin-block-start: var(--space-xl); }
.prose li + li { margin-block-start: var(--space-xs); }
.prose table { width: 100%; border-collapse: collapse; margin-block: var(--space-lg); }
.prose th, .prose td { padding: var(--space-sm); text-align: start; border: var(--rule-thin) solid var(--color-rule); vertical-align: top; }
.prose th { background: var(--color-paper-2); }
.source-box { margin-block-start: var(--space-2xl); padding: var(--space-lg); border-inline-start: var(--space-2xs) solid var(--color-alert); background: var(--color-paper-2); }

.final-cta { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-3xl); }
.final-cta-inner { display: grid; gap: var(--space-lg); }
.final-cta h2 { margin: 0; max-width: 20ch; }
.final-cta p { color: var(--color-paper-3); }

.site-footer { padding-block: var(--space-3xl) 7rem; background: var(--color-paper-2); color: var(--color-ink); border-block-start: var(--rule-strong) solid var(--color-ink); }
.footer-mast { display: grid; gap: var(--space-xl); }
.footer-brand { max-width: 38rem; }
.footer-brand .wordmark { display: inline-block; max-width: 100%; font-size: clamp(var(--text-xl), 5vw, var(--text-2xl)); white-space: normal; }
.footer-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.footer-group { min-width: 0; }
.footer-group h2 { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.footer-links a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.footer-legal { padding-block-start: var(--space-lg); border-block-start: var(--rule-thin) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }

.sticky-cta { position: fixed; inset: auto 0 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 4.25rem; padding: var(--space-xs) max(var(--space-md), env(safe-area-inset-right)) max(var(--space-xs), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left)); background: var(--color-ink); color: var(--color-paper); border-block-start: var(--rule-thin) solid var(--color-rule-dark); }
.sticky-cta span { display: none; }
.sticky-cta .button { width: 100%; }
.sticky-cta .button--primary { background: var(--color-ink-2); color: var(--color-paper); border-color: var(--color-accent); }
.hero .cta-row .button { flex: 1 1 100%; }

.section--dark :focus-visible, .site-header :focus-visible, .sticky-cta :focus-visible { outline-color: var(--color-accent); }

@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(calc(var(--space-3xs) * -1)); background: var(--color-ink); color: var(--color-paper); }
  .button--primary:hover { background: var(--color-accent-deep); color: var(--color-accent-ink); }
  .feature-card:hover { box-shadow: 0 var(--space-xs) var(--space-lg) var(--color-shadow); transform: translateY(calc(var(--space-3xs) * -1)); }
  .gallery-button:hover img { transform: scale(1.015); opacity: 0.9; }
}

@media (min-width: 40rem) {
  .container { width: min(calc(100% - 3rem), var(--container)); }
  .metric-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-grid, .requirements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-grid, .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky-cta span { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sticky-cta .button { width: auto; }
  .hero .cta-row .button { flex: 0 0 auto; }
  .nav-inner > .cta-row > .button { display: inline-flex; }
}

@media (min-width: 60rem) {
  body { padding-bottom: 0; }
  .nav-links { display: flex; }
  .nav-inner { gap: var(--space-lg); }
  .nav-menu { display: none; }
  .split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--space-3xl); }
  .split--reverse .split-media { order: -1; }
  .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(14rem, auto); }
  .feature-card:nth-child(1), .feature-card:nth-child(6) { grid-column: span 2; }
  .feature-card:nth-child(3) { grid-row: span 2; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-item:first-child { grid-column: span 2; }
  .review-summary { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-columns { grid-template-columns: 0.7fr 1.3fr; }
  .sticky-cta { inset-inline: auto var(--space-lg); inset-block-end: var(--space-lg); width: min(34rem, calc(100% - 3rem)); border: var(--rule-thin) solid var(--color-rule-dark); }
  .article-shell { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; }
  .article-nav { position: sticky; inset-block-start: calc(var(--nav-h) + var(--space-xl)); }
}

@media (min-width: 90rem) {
  .hero-content { margin-inline-start: 4vw; }
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery-item:first-child .gallery-button img { aspect-ratio: 16 / 9; height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .button--primary::after { display: none; }
  .js .review-card[data-reveal] { opacity: 1; transform: none; }
}