/* Samurai Task Force — web4 "Issen 一閃" (one cut).
   Hard edges, sumi ink, vermilion as the only accent, gold for ranks and holders.
   No gradients, no glows: depth comes from layered art, cut shapes and motion (transform/opacity only). */

@font-face { font-family: "Zen Antique"; src: url("assets/fonts/zen-antique-400-latin.woff2") format("woff2"); font-display: swap; font-weight: 400; }
@font-face { font-family: "Khand"; src: url("assets/fonts/khand-latin.woff2") format("woff2"); font-display: swap; font-weight: 400; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("assets/fonts/zen-kaku-gothic-new-400-latin.woff2") format("woff2"); font-display: swap; font-weight: 400; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("assets/fonts/zen-kaku-gothic-new-500-latin.woff2") format("woff2"); font-display: swap; font-weight: 500; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("assets/fonts/zen-kaku-gothic-new-700-latin.woff2") format("woff2"); font-display: swap; font-weight: 700; }

:root {
  color-scheme: dark;
  --ink: #120d0b;
  --ink-2: #1a1310;
  --ink-3: #251b17;
  --ink-4: #33261f;
  --line: #43332a;
  --line-strong: #8a7563;
  --bone: #f3e9d8;
  --bone-2: #d2c4af;
  --mute: #a69683;
  --shu: #c4232b;
  --shu-deep: #8f161c;
  --shu-hi: #f0603f;
  --gold: #e8b23a;
  --gold-soft: #c99a3a;
  --f-display: "Zen Antique", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --f-hud: "Khand", "Bahnschrift", "Arial Narrow", sans-serif;
  --f-body: "Zen Kaku Gothic New", "Yu Gothic UI", "Segoe UI", system-ui, sans-serif;
  --f-jp: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --page: min(74rem, calc(100% - 2rem));
  --wide: min(92rem, calc(100% - 2rem));
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 48px;
  --section: clamp(4.5rem, 10vw, 8.5rem);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-cut: cubic-bezier(.7, 0, .2, 1);
  --notch: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--ink); color: var(--bone-2); font: 400 1rem/1.7 var(--f-body); overflow-x: clip; text-rendering: optimizeLegibility; }
img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--shu); color: var(--bone); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

h1, h2, h3 { margin: 0; color: var(--bone); font-family: var(--f-display); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
h1 { max-width: 16ch; font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); max-width: 20ch; }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.75; max-width: 40rem; color: var(--bone-2); }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-fill { fill: currentColor; stroke: none; }

.kicker { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; color: var(--shu-hi); font: 400 1rem/1 var(--f-hud); letter-spacing: .2em; text-transform: uppercase; }
.kicker-jp { padding: .32rem .45rem .24rem; background: var(--shu); color: var(--bone); font: 400 .85rem/1 var(--f-jp); letter-spacing: .08em; }
.text-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--bone); font-weight: 500; text-decoration: underline; text-decoration-color: var(--shu-hi); text-underline-offset: .3em; text-decoration-thickness: 2px; }
.text-link .icon { width: 1em; height: 1em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.8rem; }

/* ---------- buttons: notched plate, glint on hover, press feedback */
.button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .7rem 1.4rem .62rem; border: 0; background: transparent; color: var(--bone); font: 400 1.08rem/1.1 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; overflow: hidden; transition: transform 160ms var(--ease-out); }
.button::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--ink-3); clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch))); }
.button::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; z-index: -1; width: 38%; background: var(--bone); opacity: .16; transform: translateX(-160%) skewX(-24deg); transition: transform 300ms var(--ease-out); }
.button:active:not(:disabled) { transform: scale(.97); }
.button-primary::before { background: var(--shu); }
.button-ghost::before { background: var(--bone); clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)), 0 0, 1px 1px, 1px calc(100% - var(--notch) - .4px), calc(var(--notch) + .4px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(var(--notch) + .4px), calc(100% - var(--notch) - .4px) 1px, 1px 1px); opacity: .5; }
.button .icon { width: 1.2em; height: 1.2em; }
.button:disabled { cursor: not-allowed; opacity: .55; }
.button-xl { min-height: 64px; padding: 0 1.5rem 0 0; gap: 1rem; text-align: left; }
.button-xl .button-icon { display: grid; place-items: center; align-self: stretch; width: 64px; background: var(--shu-deep); clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch))); }
.button-xl .button-icon .icon { width: 1.6rem; height: 1.6rem; }
.button-copy { display: grid; gap: .2rem; }
.button-copy b { font-weight: 400; font-size: 1.22rem; letter-spacing: .12em; }
.button-copy small { font: 400 .78rem/1.3 var(--f-body); letter-spacing: .02em; text-transform: none; color: var(--bone); opacity: .88; }
.button-play { padding-left: .6rem; }
.play-ring { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--bone); border-radius: 50%; }
.play-ring .icon { width: 1rem; height: 1rem; margin-left: 2px; }
@media (hover: hover) and (pointer: fine) {
  .button:hover::after { transform: translateX(330%) skewX(-24deg); }
  .media-shot:hover img, .media-trailer:hover img { transform: scale(1.04); }
  .fighter-pick:hover .fighter-frame { transform: translateY(-6px); }
  .social-list a:hover::before { transform: scaleX(1); }
  .social-list a:hover > .icon { transform: translate(4px, -4px); }
  .site-nav a:hover .nav-label { color: var(--bone); }
  .topic-grid a:hover { transform: translateY(-3px); }
  .shop-teaser-card:hover img, .product:hover .product-art img { transform: scale(1.035); }
}

/* ---------- beta banner + header (scrolls away; compact bar returns on scroll-up) */
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--bone); color: var(--ink); font-weight: 700; }
.skip-link:focus { top: 1rem; }
.beta-banner { position: relative; z-index: 31; padding: .45rem 1rem; background: var(--ink); border-bottom: 1px solid var(--line); color: var(--mute); font-size: .8rem; line-height: 1.4; text-align: center; }
.beta-banner strong { margin-right: .35rem; color: var(--gold); font: 400 .9rem/1 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; }
.site-header { position: absolute; left: 0; right: 0; z-index: 30; }
.site-header.is-pinned { position: fixed; top: 0; background: var(--ink); border-bottom: 1px solid var(--line); transform: translateY(-105%); transition: transform 260ms var(--ease-out); }
.site-header.is-pinned.is-shown { transform: none; }
.header-inner { display: flex; align-items: center; gap: 1.5rem; width: var(--wide); margin-inline: auto; min-height: 76px; }
.is-pinned .header-inner { min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--bone); text-decoration: none; }
.brand-mark { width: 44px; height: 44px; }
.is-pinned .brand-mark { width: 34px; height: 34px; }
.brand-word { display: grid; line-height: .9; font-family: var(--f-hud); text-transform: uppercase; }
.brand-word b { font-weight: 400; font-size: 1.35rem; letter-spacing: .14em; }
.brand-word small { font-size: .78rem; letter-spacing: .38em; color: var(--shu-hi); }
.site-nav { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.site-nav a { position: relative; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: .45rem; padding: .7rem .9rem; color: var(--bone-2); text-decoration: none; }
.nav-num { font: 400 .72rem/1 var(--f-hud); color: var(--shu-hi); letter-spacing: .1em; }
.nav-label { font: 400 1.08rem/1 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; }
.nav-jp { grid-column: 2; margin-top: .3rem; font: 400 .66rem/1 var(--f-jp); letter-spacing: .3em; color: var(--mute); }
.site-nav a[aria-current="page"] .nav-label { color: var(--bone); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .25rem; height: 2px; background: var(--shu); }
.nav-download { display: none !important; }
.header-tools { display: flex; align-items: center; gap: .9rem; }
.lang-switch { display: inline-flex; align-items: stretch; height: 38px; border: 1px solid var(--line-strong); font: 400 .95rem/1 var(--f-hud); letter-spacing: .14em; }
.lang-switch > * { display: grid; place-items: center; min-width: 44px; padding: 0 .6rem; text-decoration: none; }
.lang-current { position: relative; background: var(--bone); color: var(--ink); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.lang-switch .lang-current:last-child { clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%); }
.lang-switch a { color: var(--bone-2); }
.lang-switch a:hover { color: var(--bone); }
.header-cta { min-height: 42px; padding: .55rem 1.05rem .5rem; font-size: 1rem; }
.menu-toggle { display: none; position: relative; width: 48px; height: 48px; border: 1px solid var(--line-strong); background: var(--ink); cursor: pointer; }
.menu-toggle i { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--bone); transition: transform 220ms var(--ease-out); }
.menu-toggle i:first-of-type { top: 19px; }
.menu-toggle i:last-of-type { top: 27px; right: 19px; }
.menu-open .menu-toggle i:first-of-type { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-toggle i:last-of-type { transform: translate(-3px, -4px) rotate(-45deg) scaleX(1.5); }

/* ---------- page frame */
.section { padding-block: var(--section); }
.sec-head { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.sec-head .kicker { margin-bottom: 0; }
.sec-head > p:not(.kicker) { max-width: 38rem; }
.sec-head .button { justify-self: start; margin-top: .4rem; }
.cut-top { position: relative; }
.how, .heroes, .leagues, .media, .news, .board-top, .perks, .shop-teaser, .community, .faq-home, .catalog, .checkout, .board-section, .faq-layout { position: relative; }

/* ---------- word fly-in + reveals (motion-ready only; reduced motion shows the final state) */
[data-split] .word { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: bottom; }
[data-split] .word > span { display: inline-block; }
.js [data-split]:not(.is-in) .word > span { transform: translateY(110%); }
.js [data-split].is-in .word > span { animation: word-in 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 55ms + 80ms); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(32px); }
.js [data-reveal].is-in { animation: rise-in 900ms var(--ease-out) both; }
.beats li:nth-child(2).is-in, .patch-list li:nth-child(2).is-in, .social-list li:nth-child(2).is-in { animation-delay: 90ms; }
.beats li:nth-child(3).is-in, .patch-list li:nth-child(3).is-in, .social-list li:nth-child(3).is-in { animation-delay: 180ms; }
.social-list li:nth-child(4).is-in { animation-delay: 270ms; }
@keyframes word-in { from { transform: translateY(110%) rotate(4deg); } to { transform: translateY(0) rotate(0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- HOME: hero stage */
.home-hero { position: relative; display: grid; align-items: end; min-height: max(40rem, 100svh); overflow: hidden; background: var(--ink); }
.stage { position: absolute; inset: 0; overflow: hidden; }
.stage-art { position: absolute; inset: -2%; width: 104%; height: 104%; max-width: none; object-fit: cover; object-position: 50% 50%; animation: art-in 1800ms var(--ease-out) both; }
.stage-kanji { position: absolute; right: 1vw; top: 12%; color: var(--shu); font: 400 min(42vw, 34rem)/.9 var(--f-jp); opacity: .3; mix-blend-mode: screen; user-select: none; animation: kanji-in 1600ms 300ms var(--ease-out) both; }
.stage-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stage-mist { position: absolute; left: -4%; right: -4%; bottom: -7%; width: 108%; max-width: none; height: auto; opacity: .85; pointer-events: none; }
.stage-veil { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0 58%, color-mix(in oklch, var(--ink) 86%, transparent) 76%, transparent 100%); opacity: .84; clip-path: polygon(0 0, 52% 0, 49% 7%, 51% 14%, 47% 22%, 49% 30%, 44% 39%, 46% 48%, 42% 57%, 44% 66%, 39% 76%, 41% 86%, 37% 100%, 0 100%); animation: veil-in 1100ms 150ms var(--ease-cut) both; }
.stage-slash { position: absolute; inset: 0; background: var(--shu); clip-path: polygon(54% 0, 54.5% 0, 38.5% 100%, 38% 100%); transform-origin: 54% 0; animation: slash-in 900ms 650ms var(--ease-cut) both; }
.home-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(5rem, 10vw, 9rem); background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--shu) 42%, transparent) 58%, var(--shu)); z-index: 3; pointer-events: none; }
.hero-inner, .shop-hero-inner { position: relative; z-index: 4; width: var(--page); margin-inline: auto; }
.home-hero .hero-inner { padding-block: clamp(8.5rem, 16vh, 11rem) clamp(6.5rem, 14vh, 9rem); }
.home-hero .hero-inner > * { max-width: 40rem; }
.wordmark { position: relative; width: min(38rem, 100%); aspect-ratio: 888 / 230; margin: .2rem 0 1.6rem; }
.wm { position: absolute; inset: 0; width: 100%; height: 100%; }
.wm-a { clip-path: polygon(0 0, 100% 0, 100% 36%, 0 64%); animation: wm-a 1100ms 900ms var(--ease-out) both; }
.wm-b { clip-path: polygon(0 64%, 100% 36%, 100% 100%, 0 100%); animation: wm-b 1100ms 900ms var(--ease-out) both; }
.wm-cut { position: absolute; inset: -6% -3%; background: var(--bone); clip-path: polygon(0 63.4%, 100% 35.4%, 100% 36.6%, 0 64.6%); transform-origin: 0 50%; animation: wm-cut 1000ms 700ms var(--ease-cut) both; }
.home-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); max-width: 18ch; }
.home-hero .lead { margin-top: 1.1rem; max-width: 34rem; animation: fade-up 900ms 1500ms var(--ease-out) both; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; margin-top: 2rem; }
.home-hero .hero-actions { animation: fade-up 900ms 1650ms var(--ease-out) both; }
.hero-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 2rem; list-style: none; color: var(--bone-2); font: 400 1rem/1 var(--f-hud); letter-spacing: .12em; text-transform: uppercase; animation: fade-up 900ms 1800ms var(--ease-out) both; }
.hero-facts li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-facts b { color: var(--bone); font-weight: 400; font-size: 1.2rem; }
.hero-facts .icon { color: var(--shu-hi); }
.scroll-cue { position: absolute; right: max(1rem, calc((100% - 92rem) / 2)); bottom: clamp(4rem, 9vw, 7rem); z-index: 4; display: grid; justify-items: center; gap: .6rem; color: var(--bone-2); font: 400 .8rem/1 var(--f-hud); letter-spacing: .3em; text-transform: uppercase; text-decoration: none; writing-mode: vertical-rl; }
.scroll-cue i { display: block; width: 1px; height: 4.5rem; background: var(--line); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--shu-hi); animation: cue 2200ms var(--ease-in-out) infinite; }
@keyframes art-in { from { opacity: 0; scale: 1.12; } to { opacity: 1; scale: 1; } }
@keyframes kanji-in { from { opacity: 0; translate: 0 6%; } to { opacity: .3; translate: 0 0; } }
@keyframes veil-in { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 54% 0, 38% 100%, 0 100%); } }
@keyframes slash-in { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: .9; } }
@keyframes wm-cut { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes wm-a { from { opacity: 0; transform: translate(-9%, -4%); } to { opacity: 1; transform: translate(0, 0); } }
@keyframes wm-b { from { opacity: 0; transform: translate(9%, 4%); } to { opacity: 1; transform: translate(0, 0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* ---------- ticker band */
.ticker { position: relative; z-index: 3; overflow: hidden; color: var(--bone);
  background: var(--shu);
  box-shadow: inset 0 1px 0 rgba(232,178,58,.55), inset 0 -1px 0 rgba(232,178,58,.55), inset 0 4px 0 rgba(18,13,11,.35), inset 0 -4px 0 rgba(18,13,11,.35), 0 10px 24px rgba(0,0,0,.45); }
.ticker::before { content: ""; position: absolute; inset: 5px 0; border-block: 1px solid rgba(243,233,216,.18); pointer-events: none; }
.ticker-track { display: flex; width: max-content; align-items: center; gap: 1.4rem; padding: 1.05rem 0 1.1rem; font: 400 clamp(.95rem, 1.6vw, 1.2rem)/1 var(--f-hud); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; animation: ticker 60s linear infinite; }
.ticker-track i { position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 2em; height: 2em; font: 400 .95em/1 var(--f-jp); font-style: normal; color: var(--gold); }
.ticker-track i::before { content: ""; position: absolute; inset: .3em; z-index: -1; background: rgba(18,13,11,.6); border: 1px solid rgba(232,178,58,.75); transform: rotate(45deg); }

@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- how it plays */
.how { background: var(--ink); }
.how-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); width: var(--page); margin-inline: auto; align-items: center; }
.how .sec-head { margin-bottom: 0; }
.taskbar-stage { position: relative; margin: 0; aspect-ratio: 16 / 11.5; display: grid; grid-template-rows: 1fr auto auto; background: var(--ink-3); border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.desk { position: relative; overflow: hidden; }
.desk-win { position: absolute; display: grid; align-content: start; gap: 10px; padding: 34px 18px 18px; background: var(--ink-4); border: 1px solid var(--line); }
.desk-win::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: var(--line); }
.desk-win i { display: block; height: 8px; background: var(--bone); opacity: .1; }
.desk-win i:nth-child(2) { width: 70%; }
.desk-win i:nth-child(3) { width: 84%; }
.desk-win-a { left: 6%; top: 10%; width: 52%; height: 70%; }
.desk-win-b { right: 7%; top: 22%; width: 30%; height: 50%; }
.desk-label, .strip-label { position: absolute; z-index: 2; padding: .3rem .55rem .22rem; font: 400 .85rem/1 var(--f-hud); letter-spacing: .2em; text-transform: uppercase; }
.desk-label { left: 8%; bottom: 10%; background: var(--ink); color: var(--bone-2); border: 1px solid var(--line); }
.strip-label { left: 1rem; top: -1rem; background: var(--shu); color: var(--bone); }
.game-strip { position: relative; border-top: 2px solid var(--shu); background: var(--ink); }
.game-strip video { width: 100%; aspect-ratio: 1280 / 380; object-fit: cover; object-position: 50% 62%; }
.taskbar { display: flex; align-items: center; gap: .9rem; min-height: 44px; padding: 0 .9rem; background: #0e0a09; color: var(--bone-2); font-size: .82rem; }
.tb-start { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--bone); opacity: .7; clip-path: polygon(0 0, 46% 0, 46% 46%, 54% 46%, 54% 0, 100% 0, 100% 100%, 54% 100%, 54% 54%, 46% 54%, 46% 100%, 0 100%); }
.tb-app { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem; background: var(--ink-3); border-bottom: 2px solid var(--shu-hi); color: var(--bone); }
.tb-app img { width: 18px; height: 18px; }
.tb-live { display: inline-flex; align-items: center; gap: .4rem; font: 400 .82rem/1 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.tb-live::before, .live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: blink 1600ms steps(2, jump-none) infinite; }
.tb-clock { margin-left: auto; font: 400 .9rem/1 var(--f-hud); letter-spacing: .1em; }
@keyframes blink { 50% { opacity: .25; } }
.beats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); list-style: none; }
.beats li { position: relative; display: grid; align-content: start; gap: .7rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.beats li:nth-child(2) { margin-top: 2.5rem; }
.beats li:nth-child(3) { margin-top: 5rem; }
.beat-num { color: var(--shu-hi); font: 400 1rem/1 var(--f-hud); letter-spacing: .2em; }
.beat-jp { position: absolute; right: 0; top: -.2rem; color: var(--ink-4); font: 400 5.5rem/1 var(--f-jp); z-index: -1; }

/* ---------- section cut: a slanted edge between bands */
.heroes::before, .media::before, .perks::before, .community::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(2rem, 5vw, 4.5rem); background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%); }
.heroes::after, .media::after, .perks::after, .community::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(2rem, 5vw, 4.5rem); background: var(--shu); clip-path: polygon(0 calc(100% - 3px), 100% 0, 100% 3px, 0 100%); opacity: .9; }

/* ---------- heroes: stage + rail */
.heroes { padding-block: calc(var(--section) + 2rem) var(--section); background: var(--ink-2); overflow: hidden; }
.heroes-inner { width: var(--page); margin-inline: auto; }
.hero-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); min-height: clamp(22rem, 38vw, 32rem); overflow: hidden; }
.stage-class-kanji { position: absolute; left: 4%; top: 50%; translate: 0 -50%; color: var(--ink-3); font: 400 clamp(16rem, 34vw, 30rem)/1 var(--f-jp); user-select: none; }
.stage-figure { position: relative; display: grid; place-items: center; }
.stage-figure::before { content: ""; position: absolute; width: min(24rem, 62vw); aspect-ratio: 1; border-radius: 50%; background: var(--shu); opacity: .92; }
.sprite { position: relative; overflow: hidden; aspect-ratio: 1; }
.sprite-strip { width: calc(var(--n, 6) * 100%) !important; max-width: none !important; height: 100% !important; animation: sprite-run calc(var(--n, 6) * 115ms) steps(var(--n, 6)) infinite; }
@keyframes sprite-run { to { transform: translateX(-100%); } }
.stage-sprite { width: min(30rem, 78vw); }
.stage-floor { position: absolute; bottom: 9%; width: 46%; height: 18px; border-radius: 50%; background: var(--ink); opacity: .55; z-index: -1; }
.stage-copy { position: relative; display: grid; gap: .9rem; align-content: center; }
.stage-class { justify-self: start; padding: .35rem .7rem .28rem; border: 1px solid var(--shu-hi); color: var(--shu-hi); font: 400 1rem/1 var(--f-hud); letter-spacing: .24em; text-transform: uppercase; }
.stage-name { color: var(--bone); font: 400 clamp(2.6rem, 6vw, 5rem)/.95 var(--f-display); }
.stage-line { max-width: 26rem; font-size: 1.12rem; color: var(--bone-2); }
.stage-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.2rem; margin: 0; max-width: 30rem; }
.stage-facts div { display: contents; }
.stage-facts dt { color: var(--mute); font: 400 .9rem/1.5 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; }
.stage-facts dd { margin: 0; color: var(--bone); }
.stage-count { color: var(--mute); font: 400 1.1rem/1 var(--f-hud); letter-spacing: .2em; }
.stage-count b { color: var(--bone); font-weight: 400; font-size: 2rem; }
.stage-wipe { position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; background: var(--shu); transform: translateX(-140%) skewX(-18deg); opacity: 0; pointer-events: none; z-index: 3; }
.hero-stage.is-cutting .stage-wipe { animation: stage-cut 560ms var(--ease-cut) both; }
.hero-stage.is-cutting .stage-figure, .hero-stage.is-cutting .stage-copy, .hero-stage.is-cutting .stage-class-kanji { animation: swap 560ms var(--ease-in-out) both; }
@keyframes stage-cut { from { opacity: 1; transform: translateX(-140%) skewX(-18deg); } to { opacity: 1; transform: translateX(420%) skewX(-18deg); } }
@keyframes swap { 0% { opacity: 1; } 35%, 45% { opacity: 0; transform: translateX(-12px); } 100% { opacity: 1; transform: translateX(0); } }
.carousel-shell { position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.fighter-rail { display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: none; padding: 1rem .2rem 1.2rem; }
.fighter-rail::-webkit-scrollbar { display: none; }
.fighter { flex: 0 0 auto; width: 9.5rem; margin: 0; }
.fighter-pick { display: grid; gap: .35rem; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.fighter-frame { display: block; aspect-ratio: 1; background: var(--ink-3); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); transition: transform 220ms var(--ease-out); }
.fighter-frame img { width: 100%; height: 100%; object-fit: contain; }
.fighter-pick[aria-pressed="true"] .fighter-frame { background: var(--shu); }
.fighter-name { color: var(--bone); font: 400 1.05rem/1.15 var(--f-hud); letter-spacing: .1em; text-transform: uppercase; }
.fighter-pick small { color: var(--mute); font-size: .78rem; }
.rail-arrows { position: absolute; right: 0; top: -3.8rem; display: flex; gap: .5rem; }
.rail-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-strong); background: var(--ink); color: var(--bone); cursor: pointer; transition: transform 160ms var(--ease-out); }
.rail-arrow:active { transform: scale(.94); }
.rail-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- leagues: horizontal ride on wide screens */
.leagues { background: var(--ink); }
.journey-pin { padding-block: var(--section); }
.journey-head, .media .sec-head, .shop-teaser .sec-head { max-width: none; }
.journey-head > *, .media .sec-head > *, .shop-teaser .sec-head > * { max-width: 46rem; }
.journey-head { width: var(--page); margin-inline: auto; margin-bottom: 1.6rem; }
.journey-route { position: relative; display: flex; justify-content: space-between; width: var(--page); margin: 0 auto 2rem; list-style: none; }
.journey-route::before, .route-line { content: ""; position: absolute; left: 1.2rem; right: 1.2rem; top: 1.2rem; height: 2px; background: var(--line); }
.route-line { background: var(--shu); transform-origin: 0 50%; transform: scaleX(1); }
.leagues.is-riding .route-line { transform: scaleX(0); }
.journey-route li { position: relative; z-index: 1; display: grid; justify-items: center; gap: .45rem; }
.journey-route li span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; background: var(--shu); color: var(--bone); font: 400 1.15rem/1 var(--f-jp); }
.leagues.is-riding .journey-route li span { background: var(--ink-3); color: var(--mute); }
.leagues.is-riding .journey-route li.is-on span { background: var(--shu); color: var(--bone); }
.journey-route small { color: var(--mute); font: 400 .82rem/1 var(--f-hud); letter-spacing: .18em; text-transform: uppercase; }
.journey-track { display: grid; gap: clamp(3rem, 6vw, 5rem); width: var(--page); margin-inline: auto; }
.league { display: grid; gap: 1.4rem; }
.league-map { position: relative; margin: 0; overflow: hidden; clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); background: var(--ink-3); }
.league-map > img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.league-boss { position: absolute; right: 7%; bottom: 4%; width: clamp(7rem, 15vw, 12rem); }
.league-boss .sprite-strip { animation-duration: 900ms; }
.league-copy { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); row-gap: .6rem; align-items: start; }
.league-copy > :not(.league-waves):not(.league-kanji) { grid-column: 1; }
.league-num { color: var(--mute); font: 400 1rem/1 var(--f-hud); letter-spacing: .2em; }
.league-num span { color: var(--shu-hi); font-size: 1.6rem; }
.league-kanji { position: absolute; left: -.08em; top: -2.2rem; z-index: -1; color: var(--ink-3); font: 400 9rem/1 var(--f-jp); }
.league-boss-name { color: var(--mute); font: 400 1rem/1.2 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; }
.league-boss-name b { color: var(--gold); font-weight: 400; font-size: 1.2rem; }
.league-waves { grid-column: 2; grid-row: 1 / span 5; display: grid; gap: .6rem; list-style: none; }
.league-waves li { position: relative; }
.league-waves img { width: 100%; aspect-ratio: 900 / 215; object-fit: cover; }
.league-waves span { position: absolute; left: 0; top: 0; padding: .25rem .5rem .2rem; background: var(--ink); color: var(--bone-2); font: 400 .8rem/1 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; }
.leagues.is-riding { height: calc(100vh + var(--ride, 0px)); }
.leagues.is-riding .journey-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 1.5rem; overflow: hidden; }
.leagues.is-riding .journey-track { display: flex; width: max-content; gap: 3vw; padding-inline: max(1rem, calc((100vw - 74rem) / 2)); will-change: transform; }
.leagues.is-riding .journey-track-wrap, .leagues.is-riding .journey-pin { contain: paint; }
.leagues.is-riding .league { width: min(54rem, 70vw); flex: none; }
.leagues.is-riding .league-map > img { aspect-ratio: 3.2 / 1; }

/* ---------- statements: oversized type drifting sideways */
.statements { padding-block: var(--section); background: var(--ink); overflow: hidden; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.statement { display: grid; gap: .6rem; }
.kinetic { margin: 0; white-space: nowrap; color: var(--bone); font: 400 clamp(1.5rem, 5vw, 4.75rem)/.95 var(--f-hud); letter-spacing: .02em; text-transform: uppercase; will-change: transform; }
.kinetic i { font: 400 .8em/1 var(--f-jp); font-style: normal; color: var(--shu); margin-inline: .2em; }
.statement-alt .kinetic { color: transparent; -webkit-text-stroke: 1.5px var(--shu-hi); }
.statement-alt .kinetic i { -webkit-text-stroke: 0; color: var(--gold); }
.statement-note { width: var(--page); margin-inline: auto; max-width: 30rem; color: var(--bone-2); padding-left: 1rem; border-left: 1px solid var(--shu); }
.statement-alt .statement-note { justify-self: end; margin-right: max(1rem, calc((100% - 74rem) / 2)); }

/* ---------- media */
.media { padding-top: calc(var(--section) + 2rem); background: var(--ink-2); }
.media-inner { width: var(--wide); margin-inline: auto; }
.media .sec-head { width: var(--page); margin-inline: auto; margin-bottom: 2.5rem; }
.media-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .8rem; }
.media-trailer, .media-shot { position: relative; display: block; overflow: hidden; background: var(--ink-3); color: var(--bone); text-decoration: none; }
.media-trailer img, .media-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out); }
.media-trailer { grid-column: 1 / span 8; grid-row: 1 / span 2; clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.shot-1 { grid-column: 9 / span 4; }
.shot-2 { grid-column: 9 / span 4; }
.shot-3, .shot-4, .shot-5, .shot-6 { grid-column: span 3; aspect-ratio: 16 / 9; }
.play-ring-xl { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border: 2px solid var(--bone); background: var(--shu); }
.play-ring-xl .icon { width: 1.8rem; height: 1.8rem; }
.media-caption { position: absolute; left: 1.2rem; bottom: 1rem; padding: .35rem .7rem .28rem; background: var(--ink); font: 400 1rem/1 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; }
.media-caption b { font-weight: 400; color: var(--shu-hi); }
.shot-label { position: absolute; left: .7rem; top: .6rem; padding: .25rem .45rem .2rem; background: var(--ink); color: var(--bone-2); font: 400 .82rem/1 var(--f-hud); letter-spacing: .14em; }
.viewer { width: min(72rem, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; background: var(--ink); color: var(--bone); overflow: visible; }
.viewer::backdrop { background: var(--ink); opacity: .92; }
.viewer[open] { animation: viewer-in 260ms var(--ease-out) both; }
.viewer-frame img, .viewer-frame video { width: 100%; max-height: calc(100vh - 6rem); object-fit: contain; background: #0b0807; }
.viewer-close { position: absolute; right: 0; top: -3.2rem; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line); background: var(--ink); color: var(--bone); font: 400 1rem/1 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
@keyframes viewer-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ---------- patch notes */
.news { background: var(--ink-2); padding-top: 0; }
.news-inner { width: var(--page); margin-inline: auto; padding-top: var(--section); border-top: 1px solid var(--line); }
.patch-list { list-style: none; display: grid; }
.patch-list > li { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); gap: 1.5rem; padding-block: 1.6rem; border-top: 1px solid var(--line); }
.patch-list > li:last-child { border-bottom: 1px solid var(--line); }
.patch-meta { display: grid; align-content: start; gap: .5rem; }
.patch-meta b { color: var(--bone); font: 400 2.6rem/1 var(--f-hud); letter-spacing: .04em; }
.patch-meta time { color: var(--mute); font: 400 .95rem/1 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; }
.patch-tag { justify-self: start; padding: .28rem .5rem .22rem; background: var(--shu); color: var(--bone); font: 400 .8rem/1 var(--f-hud); letter-spacing: .2em; text-transform: uppercase; }
.patch-tag-launch { background: var(--gold); color: var(--ink); }
.patch-list h3 { margin-bottom: .5rem; }
.patch-list ul { display: grid; gap: .35rem; padding-left: 1.1rem; }
.patch-list ul li::marker { color: var(--shu-hi); }

/* ---------- leaderboard teaser */
.board-top { background: var(--ink); }
.board-top-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); width: var(--page); margin-inline: auto; align-items: start; }
.leaderboard-compact { display: grid; gap: .5rem; }
.board-top-status { padding: 1.4rem; border: 1px dashed var(--line); color: var(--mute); }
.podium, .top-ten { list-style: none; display: grid; gap: .45rem; }
.leader-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) repeat(3, minmax(4.5rem, auto)); align-items: center; gap: 1rem; min-height: 64px; padding: .5rem 1rem .5rem 0; background: var(--ink-2); }
.podium .leader-row { min-height: 78px; background: var(--ink-3); }
.leader-rank { display: grid; place-items: center; align-self: stretch; background: var(--ink-4); color: var(--bone); font: 400 1.5rem/1 var(--f-hud); }
.place-1 .leader-rank { background: var(--gold); color: var(--ink); }
.place-2 .leader-rank { background: var(--bone-2); color: var(--ink); }
.place-3 .leader-rank { background: #b5703f; color: var(--ink); }
.leader-identity { display: grid; min-width: 0; }
.player-link { justify-self: start; padding: 0; border: 0; background: none; color: var(--bone); font: 500 1.05rem/1.3 var(--f-body); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.player-link:hover { text-decoration-color: var(--shu-hi); }
.leader-meta { color: var(--mute); font-size: .8rem; }
.leader-stat { display: grid; justify-items: end; }
.leader-stat small { color: var(--mute); font: 400 .72rem/1 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; }
.leader-stat strong { color: var(--bone); font: 400 1.25rem/1.1 var(--f-hud); }
.board-skeleton { min-height: 64px; background: var(--ink-2); animation: pulse 1400ms ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* ---------- holder perks */
.perks { padding-top: calc(var(--section) + 2rem); background: var(--ink-2); }
.perks-inner { width: var(--page); margin-inline: auto; }
.perk-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); list-style: none; align-items: start; }
.perk { display: grid; gap: 1rem; }
.perk:nth-child(2) { margin-top: 3rem; }
.perk:nth-child(3) { margin-top: 6rem; }
.perk-art { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--ink-3); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.perk-art img { width: 100%; height: 100%; object-fit: cover; }
.kata-art { display: grid; place-items: center; background: var(--ink-3); }
.kata-art img { width: 58%; height: auto; object-fit: contain; }
.perk-copy { display: grid; gap: .5rem; }
.perk-name { color: var(--gold); font: 400 1.05rem/1 var(--f-hud); letter-spacing: .22em; text-transform: uppercase; }
.perk-value { color: var(--bone); font: 400 clamp(2.6rem, 5vw, 3.8rem)/.95 var(--f-hud); }
.kata-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; list-style: none; }
.kata-tiers li { display: grid; gap: .2rem; padding: .6rem .5rem; background: var(--ink-3); border-top: 2px solid var(--gold); }
.kata-tiers b { color: var(--bone); font: 400 1.7rem/1 var(--f-hud); }
.kata-tiers span { color: var(--mute); font-size: .8rem; }
.perk-rules { display: flex; flex-wrap: wrap; gap: .7rem 2rem; margin-top: 2.5rem; padding-block: 1.2rem; border-block: 1px solid var(--line); list-style: none; }
.perk-rules li { display: inline-flex; align-items: center; gap: .55rem; color: var(--bone); }
.perk-rules .icon { color: var(--gold); }
.kata-source { display: grid; gap: .4rem; margin-top: 1.6rem; max-width: 46rem; }
.kata-source-title { color: var(--bone); font: 400 1.25rem/1.2 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; }
.risk-note { color: var(--mute); font-size: .88rem; }

/* ---------- shop teaser (rail rendered by shop.js) */
.shop-teaser { background: var(--ink); }
.shop-teaser-inner { width: var(--wide); margin-inline: auto; }
.shop-teaser .sec-head { width: var(--page); margin-inline: auto; }
.shop-teaser-rail { display: flex; gap: 1.6rem; overflow-x: auto; padding: .5rem max(0px, calc((100% - 74rem) / 2)) 1.4rem; scroll-snap-type: x proximity; scrollbar-color: var(--shu) var(--ink-3); }
.teaser-group { display: flex; gap: .9rem; flex: none; }
.teaser-group .product-group-title { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; padding: .8rem .3rem; background: var(--ink-3); color: var(--shu-hi); font: 400 1rem/1 var(--f-hud); letter-spacing: .26em; text-transform: uppercase; text-align: center; }
.shop-teaser-card { display: grid; grid-template-rows: auto 1fr auto; width: 17.5rem; flex: none; scroll-snap-align: start; background: var(--ink-2); overflow: hidden; }
.shop-teaser-card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 300ms var(--ease-out); }
.shop-teaser-copy { display: grid; align-content: start; gap: .4rem; padding: 1rem 1rem .6rem; }
.shop-teaser-copy h3 { font-size: 1.25rem; }
.shop-teaser-copy p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--bone-2); font-size: .9rem; }
.teaser-purchase { padding: 0 1rem 1rem; }
.shop-status { padding: 1.2rem; color: var(--mute); }

/* ---------- purchase action (shared by teaser + shop) */
.purchase-action { display: grid; gap: .7rem; }
.price-block { display: flex; align-items: baseline; gap: .5rem; }
.buy-price { color: var(--bone); font: 400 1.8rem/1 var(--f-hud); }
.price-block small { color: var(--mute); font-size: .8rem; }
.product-buy, .teaser-buy { justify-content: space-between; width: 100%; font-size: .95rem; }
.product-buy::before, .teaser-buy::before { background: var(--shu); }
.buy-label { text-align: left; }
.buy-arrow { display: grid; place-items: center; }
.buy-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- community */
.community { padding-top: calc(var(--section) + 2rem); background: var(--ink-2); }
.community-inner { width: var(--page); margin-inline: auto; }
.social-list { list-style: none; display: grid; }
.social-list a { position: relative; isolation: isolate; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto auto; align-items: center; gap: 1.2rem; padding: 1.3rem .6rem; border-top: 1px solid var(--line); color: var(--bone); text-decoration: none; overflow: hidden; }
.social-list li:last-child a { border-bottom: 1px solid var(--line); }
.social-list a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--shu); transform: scaleX(0); transform-origin: 0 50%; transition: transform 300ms var(--ease-out); }
.social-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--line); }
.social-icon .icon { width: 1.4rem; height: 1.4rem; }
.social-name { font: 400 clamp(1.8rem, 4vw, 3rem)/1 var(--f-display); }
.social-handle { color: var(--bone-2); font: 400 1rem/1 var(--f-hud); letter-spacing: .12em; }
.social-list a > .icon { width: 1.5rem; height: 1.5rem; transition: transform 220ms var(--ease-out); }

/* ---------- faq (home + page) */
.faq-home { background: var(--ink-2); padding-top: 0; }
.faq-home-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); width: var(--page); margin-inline: auto; padding-top: var(--section); border-top: 1px solid var(--line); }
.faq-list { display: grid; align-content: start; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; color: var(--bone); font: 500 1.12rem/1.4 var(--f-body); cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.summary-mark { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--line-strong); color: var(--shu-hi); transition: transform 220ms var(--ease-out); }
details[open] > summary .summary-mark { transform: rotate(45deg); }
.faq-list details > p { max-width: 62ch; padding-bottom: 1.3rem; }
.faq-list details > p + p { margin-top: -.5rem; }
.faq-list a { color: var(--bone); text-decoration-color: var(--shu-hi); text-underline-offset: .2em; }
.faq-group { max-width: none; margin: 2.6rem 0 .8rem; color: var(--shu-hi); font: 400 1.05rem/1 var(--f-hud); letter-spacing: .22em; text-transform: uppercase; }
.faq-list .faq-group:first-child { margin-top: 0; }

/* ---------- finale */
.finale { position: relative; display: grid; align-items: center; min-height: clamp(34rem, 80vh, 48rem); overflow: hidden; background: var(--ink); }
.finale-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.finale-veil { position: absolute; inset: 0; background: var(--ink); opacity: .72; clip-path: polygon(0 0, 66% 0, 50% 100%, 0 100%); }
.finale-kanji { position: absolute; right: 4vw; bottom: -6%; color: transparent; -webkit-text-stroke: 2px var(--shu-hi); font: 400 min(40vw, 30rem)/1 var(--f-jp); opacity: .8; }
.finale-inner { position: relative; z-index: 1; width: var(--page); margin-inline: auto; padding-block: var(--section); }
.finale-inner > * { max-width: 34rem; }
.finale-inner > p:not(.kicker) { margin-top: 1rem; }

/* ---------- footer */
.site-footer { background: var(--ink); border-top: 3px solid var(--shu); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2rem; width: var(--page); margin-inline: auto; padding-block: 4rem 3rem; }
.footer-brand img { width: min(19rem, 100%); }
.footer-brand p { margin-top: 1rem; color: var(--mute); font-size: .9rem; }
.footer-col { display: grid; align-content: start; gap: .1rem; }
.footer-label { margin-bottom: .5rem; color: var(--shu-hi); font: 400 .9rem/1 var(--f-hud); letter-spacing: .22em; text-transform: uppercase; }
.footer-col a { display: inline-block; padding-block: .4rem; color: var(--bone-2); text-decoration: none; }
.footer-col a:hover, .footer-col a[aria-current] { color: var(--bone); text-decoration: underline; text-decoration-color: var(--shu-hi); text-underline-offset: .25em; }
.footer-base { display: flex; justify-content: space-between; gap: 1rem; width: var(--page); margin-inline: auto; padding-block: 1.2rem 2rem; border-top: 1px solid var(--line); color: var(--mute); font-size: .82rem; }
.footer-jp { font-family: var(--f-jp); letter-spacing: .3em; }

/* ---------- SHOP page */
.shop-hero { position: relative; padding-block: clamp(8rem, 14vh, 10rem) clamp(3rem, 6vw, 5rem); background: var(--ink); overflow: hidden; }
.shop-hero::after { content: "商"; position: absolute; right: -2vw; top: 2rem; color: var(--ink-3); font: 400 min(40vw, 34rem)/1 var(--f-jp); z-index: 0; }
.shop-hero-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.shop-hero-copy .lead { margin-top: 1rem; }
.shop-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; list-style: none; }
.shop-facts li { padding: .45rem .75rem .38rem; border: 1px solid var(--line); color: var(--bone); font: 400 .95rem/1 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; }
.shop-hero-art { position: relative; padding-bottom: 3rem; }
.shop-hero-visual { display: block; clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.shop-hero-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shop-live { position: absolute; left: -6%; bottom: 0; width: 62%; margin: 0; background: var(--ink); border: 1px solid var(--line); }
.shop-live figcaption { display: flex; justify-content: space-between; gap: .6rem; padding: .5rem .7rem; font: 400 .85rem/1.2 var(--f-hud); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-2); }
.live-dot { display: inline-flex; align-items: center; gap: .4rem; color: var(--gold); }
.buy-steps { width: var(--page); margin-inline: auto; }
.buy-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; border-block: 1px solid var(--line); }
.buy-steps li { position: relative; display: grid; gap: .35rem; padding: 1.6rem 1.4rem 1.6rem 4.6rem; }
.buy-steps li + li { border-left: 1px solid var(--line); }
.step-num { position: absolute; left: 1.2rem; top: 1.3rem; color: var(--shu-hi); font: 400 2.4rem/1 var(--f-jp); }
.buy-steps strong { color: var(--bone); font: 400 1.25rem/1.1 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; }
.page-shop .buy-steps { margin-top: 1rem; }
.catalog { background: var(--ink); }
.catalog-inner { width: var(--page); margin-inline: auto; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.filter { min-height: 44px; padding: .55rem 1rem .48rem; border: 1px solid var(--line-strong); background: var(--ink); color: var(--bone-2); font: 400 1rem/1 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: transform 160ms var(--ease-out); }
.filter:active:not(:disabled) { transform: scale(.97); }
.filter[aria-pressed="true"], .filter[aria-current="page"] { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.filter:disabled { opacity: .4; cursor: not-allowed; }
.shop-notices { display: grid; gap: .3rem; margin-bottom: 2rem; color: var(--mute); font-size: .9rem; }
.product-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.product-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.product-group[hidden] { display: none; }
.product-group[data-product-group="heroes"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-group-title { grid-column: 1 / -1; color: var(--shu-hi); font: 400 1.1rem/1 var(--f-hud); letter-spacing: .24em; text-transform: uppercase; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.product { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--ink-2); overflow: hidden; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
.product.is-filtering { opacity: 0; transform: translateY(8px); }
.product[hidden] { display: none; }
.product-art { overflow: hidden; background: var(--ink-3); }
.product-art img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 300ms var(--ease-out); }
.product-art img.is-sprite { object-fit: contain; }
.product-body { display: grid; align-content: start; gap: .8rem; padding: 1.3rem 1.4rem 1.4rem; }
.product-type { color: var(--shu-hi); font: 400 .85rem/1 var(--f-hud); letter-spacing: .22em; text-transform: uppercase; }
.product-title-row h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: none; }
.product-effect { color: var(--bone-2); }
.save-mark { position: absolute; right: 0; top: 0; z-index: 2; padding: .55rem .9rem .48rem; background: var(--gold); color: var(--ink); font: 400 1rem/1 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); }
.product-group[data-product-group="bundles"] .product.is-bundle { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: none; border-top: 3px solid var(--gold); }
.product.is-bundle .product-art img { height: 100%; aspect-ratio: auto; min-height: 22rem; }
.product.is-bundle .product-body { padding: 2rem; }
.product.is-bundle .product-title-row h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.bundle-contents, .hero-roster, .companion-roster { display: grid; gap: .6rem; }
.bundle-contents strong, .hero-roster strong, .companion-roster strong { color: var(--bone); font: 400 .95rem/1 var(--f-hud); letter-spacing: .18em; text-transform: uppercase; }
.bundle-contents ul { display: grid; gap: .45rem; list-style: none; }
.bundle-contents li { display: grid; gap: .1rem; padding-left: .9rem; border-left: 1px solid var(--line); }
.bundle-contents b { color: var(--bone); font-weight: 500; }
.bundle-contents span { color: var(--mute); font-size: .88rem; }
.hero-roster ul, .companion-roster ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.hero-roster li, .companion-roster li { display: grid; justify-items: center; gap: .25rem; width: 4.6rem; }
.roster-art { display: block; width: 4.6rem; aspect-ratio: 1; background: var(--ink-3); }
.roster-art img { width: 100%; height: 100%; object-fit: contain; }
.roster-name { color: var(--bone-2); font-size: .72rem; line-height: 1.2; text-align: center; }
.hero-roster li.is-pending { align-content: center; width: auto; padding: 0 .6rem; border: 1px dashed var(--line); }
.product-more { display: none; gap: .3rem; color: var(--bone-2); font-size: .9rem; }
.product.is-expanded .product-more { display: grid; }
.buy-alt { display: flex; flex-wrap: wrap; gap: .3rem .8rem; color: var(--mute); font-size: .82rem; }
.buy-alt a, .product-detail { color: var(--bone); text-decoration-color: var(--shu-hi); text-underline-offset: .2em; }
.product-detail { justify-self: start; font-size: .88rem; }
.costume-catalog { display: grid; gap: 1.4rem; }
.costume-catalog-head { display: grid; gap: .6rem; }
.costume-catalog-head .eyebrow { color: var(--shu-hi); font: 400 1rem/1 var(--f-hud); letter-spacing: .22em; text-transform: uppercase; }
.costume-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .8rem; list-style: none; }
.costume-card { display: grid; gap: .5rem; padding-bottom: .8rem; background: var(--ink-2); }
.costume-art { aspect-ratio: 1; background: var(--ink-3); }
.costume-art img { width: 100%; height: 100%; object-fit: contain; }
.costume-copy { display: grid; gap: .2rem; padding-inline: .7rem; }
.costume-copy h3 { font: 500 .9rem/1.3 var(--f-body); }
.costume-copy p { color: var(--mute); font-size: .8rem; }
.split-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; width: var(--page); margin-inline: auto; }
.split-cta figure { margin: 0; clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); }
.split-cta img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.split-cta h2 { margin-bottom: 1rem; }

/* ---------- BUY page */
.purchase-intro { width: var(--page); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(8rem, 14vh, 10rem) clamp(2.5rem, 5vw, 4rem); }
.purchase-intro .lead { margin-top: 1rem; }
.purchase-art { margin: 0; clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); }
.purchase-art img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.checkout { padding-top: 1rem; }
.checkout-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4rem); width: var(--page); margin-inline: auto; align-items: start; }
.checkout .buy-steps { width: auto; }
.checkout .buy-steps ol { grid-template-columns: 1fr; }
.checkout .buy-steps li + li { border-left: 0; border-top: 1px solid var(--line); }
.checkout-panel { display: grid; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--ink-2); border-top: 3px solid var(--shu); }
.checkout-panel .kicker { margin-bottom: 0; }
.checkout-status { color: var(--bone); }
.checkout-form { display: grid; gap: .5rem; }
.checkout-form[hidden] { display: none; }
.checkout-form label:not(.choice):not(.checkout-waiver), legend { margin-top: .6rem; color: var(--bone); font: 400 .95rem/1 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; }
select, input[type="search"], input[type="text"], input:not([type]) { width: 100%; min-height: 48px; padding: .6rem .8rem; border: 1px solid var(--line-strong); border-radius: 0; background: var(--ink); color: var(--bone); }
select:focus-visible, input:focus-visible { outline-offset: 0; }
fieldset { display: grid; gap: .4rem; margin: .3rem 0 0; padding: 0; border: 0; }
.choice { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .8rem; border: 1px solid var(--line-strong); cursor: pointer; }
.choice input, .checkout-waiver input { width: 20px; height: 20px; accent-color: var(--shu); }
.checkout-waiver { display: flex; gap: .7rem; align-items: start; margin-top: .6rem; font-size: .92rem; }
#checkout-note { color: var(--mute); font-size: .88rem; }
#checkout-note a { color: var(--bone); }
.checkout-form .button { margin-top: .6rem; }
.page-buy .split-cta { padding-block: var(--section); }

/* ---------- LEADERBOARD page */
.faq-intro, .leaderboard-intro { width: var(--page); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.4rem clamp(2rem, 5vw, 4rem); align-items: end; padding-block: clamp(8rem, 14vh, 10rem) clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.leaderboard-intro > .button, .faq-intro > .actions { grid-column: 2; justify-self: start; }
.faq-intro .actions { margin-top: 0; }
.board-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); gap: clamp(1.5rem, 4vw, 3rem); width: var(--page); margin-inline: auto; align-items: start; }
.board-main { display: grid; gap: 1.2rem; min-width: 0; }
.board-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; }
.board-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.board-tabs { margin: 0; }
.board-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; padding: .9rem 1rem; background: var(--ink-2); }
.board-total { color: var(--bone); font: 400 1.35rem/1 var(--f-hud); letter-spacing: .1em; text-transform: uppercase; }
.page-size { display: inline-flex; align-items: center; gap: .7rem; color: var(--bone-2); font: 400 .95rem/1 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; }
.page-size select { width: auto; min-width: 5.5rem; }
.board-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.board-search { display: grid; gap: .4rem; }
.board-search label { color: var(--bone); font: 400 .95rem/1 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; }
.field-row { display: flex; gap: .5rem; }
.field-row input { flex: 1; min-width: 0; }
.board-hint { color: var(--mute); font-size: .8rem; }
.board-status { color: var(--bone-2); }
.board-status:empty { display: none; }
.board-table-wrap { overflow-x: auto; }
.board-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board-table th, .board-table td { padding: .75rem .7rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.board-table thead th { color: var(--mute); font: 400 .82rem/1 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; }
.board-table .col-rank { width: 3.6rem; text-align: center; }
.board-table .col-name { text-align: left; white-space: normal; }
.board-table td[data-col="league"] { text-align: left; }
.board-table tbody tr:hover { background: var(--ink-2); }
.board-table tr.is-mine { background: var(--ink-3); }
.board-table td[data-col] { color: var(--bone-2); }
.board-table[data-sort="honor"] td[data-col="honor"], .board-table[data-sort="level"] td[data-col="level"], .board-table[data-sort="kills"] td[data-col="kills"], .board-table[data-sort="playtime"] td[data-col="playtime"] { color: var(--bone); font-weight: 700; }
.rank-seal, .rank-plain { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; font: 400 1.15rem/1 var(--f-hud); }
.rank-seal { background: var(--gold); color: var(--ink); }
.place-2 .rank-seal { background: var(--bone-2); }
.place-3 .rank-seal { background: #b5703f; }
.player-name { display: block; }
.player-tag { color: var(--mute); font-size: .8rem; }
.player-meta { display: none; color: var(--mute); font-size: .78rem; }
.board-skeleton td span { display: block; height: 12px; background: var(--ink-3); }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pager[hidden] { display: none; }
.pager .filter { min-width: 44px; }
.pager-gap { color: var(--mute); padding: 0 .3rem; }
.pager-info { margin-left: auto; color: var(--mute); font-size: .85rem; }
.board-note { color: var(--mute); font-size: .82rem; }
.board-side { display: grid; gap: 1rem; }
.side-panel { display: grid; gap: .7rem; padding: 1.3rem; background: var(--ink-2); border-top: 2px solid var(--line); }
.side-panel .kicker { margin-bottom: 0; }
.side-panel h2 { font-size: 1.5rem; }
.boss-panel { border-top-color: var(--shu); }
.boss-meter, .xp-bar { position: relative; height: 12px; background: var(--ink-4); overflow: hidden; }
.boss-fill, .xp-fill { position: absolute; inset: 0; background: var(--shu); transform-origin: 0 50%; transform: scaleX(var(--hp, 0)); }
.xp-fill { background: var(--gold); transform: scaleX(var(--xp, 0)); }
.boss-hp { display: flex; justify-content: space-between; color: var(--bone); font: 400 1rem/1 var(--f-hud); letter-spacing: .06em; }
.boss-time { color: var(--bone-2); font-size: .9rem; }
.boss-top { display: grid; gap: .3rem; padding-left: 1.2rem; font-size: .9rem; }
.boss-top li span.num { float: right; color: var(--bone); }
.boss-panel.is-offline .boss-meter { opacity: .4; }
.season-clock { color: var(--bone); font: 400 1.6rem/1 var(--f-hud); letter-spacing: .06em; }
.season-note, .launcher-status { color: var(--mute); font-size: .85rem; }
.profile-card { display: grid; gap: 1rem; padding: 1.5rem; background: var(--ink-2); border-top: 3px solid var(--gold); }
.profile-card[hidden] { display: none; }
.profile-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.xp-line { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--bone-2); }
.xp-line strong { color: var(--bone); }
.xp-note { color: var(--mute); font-size: .82rem; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; margin: 0; }
.profile-stats > div { padding: .7rem .8rem; background: var(--ink-3); }
.profile-stats dt { color: var(--mute); font: 400 .78rem/1 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; }
.profile-stats dd { margin: .3rem 0 0; color: var(--bone); font: 400 1.3rem/1 var(--f-hud); }
.profile-stats[hidden] { display: none; }
.badge-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; }
.badge-list li { padding: .35rem .6rem .3rem; border: 1px solid var(--gold); color: var(--gold); font: 400 .85rem/1 var(--f-hud); letter-spacing: .1em; }
.badge-list li.badge-none { border-color: var(--line); color: var(--mute); }
.competition-top { background: var(--ink-2); }
.competition-inner { width: var(--page); margin-inline: auto; }
.competition-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: end; margin-bottom: 2rem; }
.competition-window { color: var(--bone); }
.competition-reset { color: var(--mute); font-size: .88rem; }
.competition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.competition-card { display: grid; gap: .6rem; align-content: start; padding: 1.4rem; background: var(--ink); }
.competition-card .kicker { margin-bottom: 0; }
.competition-board { display: grid; gap: .3rem; list-style: none; }
.competition-board .leader-row { grid-template-columns: 3.2rem minmax(0, 1fr) auto; }
.competition-board .competition-empty { display: block; min-height: 0; padding: 1rem; color: var(--mute); }

/* ---------- FAQ page */
.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: var(--page); margin: 2.5rem auto 0; }
.topic-grid a { display: grid; gap: .3rem; padding: 1.3rem 1.3rem 1.2rem; background: var(--ink-2); border-top: 2px solid var(--shu); color: var(--bone-2); text-decoration: none; transition: transform 220ms var(--ease-out); }
.topic-grid span { color: var(--shu-hi); font: 400 1.6rem/1 var(--f-hud); }
.topic-grid strong { color: var(--bone); font: 400 1.25rem/1.1 var(--f-hud); letter-spacing: .12em; text-transform: uppercase; }
.topic-grid small { color: var(--mute); }
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: clamp(2rem, 5vw, 4rem); width: var(--page); margin-inline: auto; align-items: start; }
.help-card { position: sticky; top: 5rem; display: grid; gap: .8rem; padding: 1.6rem; background: var(--ink-2); overflow: hidden; }
.help-card h2 { font-size: 1.7rem; }
.help-card .kicker { margin-bottom: 0; }
.help-jp { position: absolute; right: -.1em; top: -.15em; color: var(--ink-3); font: 400 9rem/1 var(--f-jp); z-index: 0; pointer-events: none; }
.help-card > :not(.help-jp) { position: relative; }
.help-note { color: var(--mute); font-size: .82rem; }

/* ---------- LEGAL pages */
.legal-layout { display: grid; grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); width: var(--page); margin-inline: auto; padding-block: clamp(8rem, 14vh, 10rem) var(--section); align-items: start; }
.legal-aside { position: sticky; top: 5rem; display: grid; gap: 1.4rem; }
.legal-head h1 { font-size: clamp(2.2rem, 4vw, 3rem); }
.legal-visual { margin: 0; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.legal-visual img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.legal-nav { display: grid; border-top: 1px solid var(--line); }
.legal-nav a { padding: .7rem 0; border-bottom: 1px solid var(--line); color: var(--bone-2); font: 400 1.05rem/1 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.legal-nav a[aria-current="page"] { color: var(--bone); }
.legal-nav a[aria-current="page"]::before { content: "— "; color: var(--shu-hi); }
.legal { padding: 0; max-width: 46rem; }
.legal h2 { margin: 2.4rem 0 .8rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); max-width: none; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin: 1.6rem 0 .5rem; font-size: 1.2rem; }
.legal p, .legal li { color: var(--bone-2); }
.legal p + p { margin-top: .8rem; }
.legal ul, .legal ol { display: grid; gap: .4rem; margin: .8rem 0; padding-left: 1.2rem; }
.legal a { color: var(--bone); text-decoration-color: var(--shu-hi); text-underline-offset: .2em; }
.legal strong { color: var(--bone); }

/* ---------- result pages */
.result { position: relative; display: grid; gap: 2rem; width: var(--page); margin-inline: auto; padding-block: clamp(9rem, 16vh, 12rem) var(--section); overflow: hidden; }
.result-kanji { position: absolute; right: 0; top: 4rem; color: var(--ink-3); font: 400 min(40vw, 26rem)/1 var(--f-jp); z-index: -1; }
.result-ok .result-kanji { color: var(--shu-deep); opacity: .6; }
.result-copy .lead { margin-top: 1rem; }
.result-art { width: 100%; max-width: 56rem; aspect-ratio: 1440 / 450; object-fit: cover; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }

/* ---------- responsive */
@media (max-width: 1100px) {
  .site-nav a { padding-inline: .6rem; }
  .nav-jp { display: none; }
}
@media (max-width: 979px) {
  .menu-toggle { display: block; }
  .header-cta { display: none; }
  .site-nav { position: fixed; inset: 0; z-index: -1; display: grid; align-content: center; gap: .4rem; padding: 6rem 1.5rem 2rem; margin: 0; background: var(--ink); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0ms 220ms; }
  .menu-open .site-nav { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
  .site-nav a { grid-template-columns: 2.4rem auto 1fr; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .site-nav a .nav-label { font-size: 2rem; }
  .site-nav .nav-jp { display: block; grid-column: 3; justify-self: end; margin: 0; font-size: 1rem; }
  .site-nav a[aria-current="page"]::after { left: 0; right: auto; width: 2.4rem; bottom: -1px; }
  .nav-download { display: flex !important; align-items: center; gap: .6rem; justify-content: center; margin-top: 1.4rem; padding: 1rem; background: var(--shu); color: var(--bone); text-decoration: none; font: 400 1.2rem/1 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; border: 0 !important; }
  .menu-open { overflow: hidden; }
  .how-inner, .board-top-inner, .faq-home-inner, .shop-hero-inner, .split-cta, .purchase-intro, .checkout-inner, .faq-layout, .legal-layout, .board-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-intro, .leaderboard-intro { grid-template-columns: minmax(0, 1fr); }
  .leaderboard-intro > .button, .faq-intro > .actions { grid-column: 1; }
  .hero-stage { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .stage-class-kanji { left: 50%; top: 32%; translate: -50% -50%; }
  .media-trailer { grid-column: 1 / -1; grid-row: auto; }
  .shot-1, .shot-2, .shot-3, .shot-4, .shot-5, .shot-6 { grid-column: span 6; aspect-ratio: 16 / 9; }
  .legal-aside, .help-card { position: static; }
  .footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .competition-head, .competition-grid { grid-template-columns: minmax(0, 1fr); }
  .product-group[data-product-group="heroes"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .stage-veil { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: .7; animation: none; }
  .stage-slash { display: none; }
  .stage-art { object-position: 64% 30%; }
  .stage-kanji { right: -6vw; top: 9%; font-size: 70vw; opacity: .35; }
  .home-hero .hero-inner { padding-block: 7.5rem 5.5rem; }
  .hero-facts { gap: .5rem 1rem; font-size: .9rem; }
  .button-xl { width: 100%; }
  .hero-actions > .button-play { width: 100%; justify-content: flex-start; }
  .scroll-cue { display: none; }
  .lang-switch { height: 44px; }
  .beats { grid-template-columns: minmax(0, 1fr); }
  .beats li:nth-child(2), .beats li:nth-child(3) { margin-top: 0; }
  .taskbar-stage { aspect-ratio: auto; grid-template-rows: 9rem auto auto; }
  .tb-clock, .tb-live { display: none; }
  .league-copy { grid-template-columns: minmax(0, 1fr); }
  .league-waves { grid-column: 1; grid-row: auto; grid-template-columns: 1fr 1fr; }
  .league-map > img { aspect-ratio: 2.2 / 1; }
  .leader-row { grid-template-columns: 2.8rem minmax(0, 1fr) auto; }
  .leader-level, .leader-playtime { display: none; }
  .perk-ladder { grid-template-columns: minmax(0, 1fr); }
  .perk { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; }
  .perk:nth-child(2), .perk:nth-child(3) { margin-top: 0; }
  .perk-value { font-size: 2.4rem; }
  .kata-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kata-tiers b { font-size: 1.3rem; }
  .social-list a { grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .8rem; }
  .social-handle { display: none; }
  .social-icon { width: 2.6rem; height: 2.6rem; }
  .shot-1, .shot-2, .shot-3, .shot-4, .shot-5, .shot-6 { grid-column: span 12; }
  .product-group, .product-group[data-product-group="heroes"] { grid-template-columns: minmax(0, 1fr); }
  .product-group[data-product-group="bundles"] .product.is-bundle { grid-template-columns: minmax(0, 1fr); }
  .product.is-bundle .product-art img { min-height: 0; aspect-ratio: 16 / 10; }
  .product.is-bundle .product-body { padding: 1.3rem; }
  .buy-steps ol { grid-template-columns: minmax(0, 1fr); }
  .buy-steps li + li { border-left: 0; border-top: 1px solid var(--line); }
  .shop-live { position: relative; left: 0; width: 100%; margin-top: -2rem; }
  .shop-hero-art { padding-bottom: 0; }
  .board-tools { grid-template-columns: minmax(0, 1fr); }
  .board-table th[data-col]:not([data-col="honor"]), .board-table td[data-col]:not([data-col="honor"]) { display: none; }
  .player-meta { display: block; }
  .topic-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-base { flex-direction: column; }
  .patch-list > li { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .patch-meta { grid-auto-flow: column; justify-content: start; align-items: center; gap: .8rem; }
  .patch-meta b { font-size: 2rem; }
  .statement-alt .statement-note { justify-self: start; margin-right: 0; }
  .brand-word { display: none; }
  .header-tools { margin-left: auto; }
  .kinetic { font-size: clamp(1.3rem, 7vw, 2rem); }
}

/* ---------- reduced motion: final states, no travel */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js [data-split]:not(.is-in) .word > span, .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .ticker-track { animation: none !important; }
  .sprite-strip { animation: none !important; }
  .wm-cut { display: none; }
  .stage-wipe { display: none; }
}

/* =====================================================================
   web5: Hades-style frame. Studio bar, key-art banner hero, about panel,
   framed hero portraits, key-art banners on sub pages, Join-the-clan banner.
   ===================================================================== */
.studio-bar { position: relative; z-index: 32; background: #0b0807; border-bottom: 1px solid var(--line); }
.studio-inner { display: flex; align-items: center; gap: 1.4rem; width: var(--wide); margin-inline: auto; min-height: 44px; }
.studio-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--bone); font: 400 1rem/1 var(--f-hud); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; }
.studio-brand img { width: 30px; height: 30px; }
.studio-games { display: flex; flex-wrap: wrap; }
.studio-games a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem; color: var(--mute); font: 400 .95rem/1 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.studio-games a[aria-current] { color: var(--gold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .55em; }
.studio-games a:hover { color: var(--bone); }
.studio-social { display: flex; margin-left: auto; list-style: none; background: var(--shu); }
.studio-social a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--bone); }
.studio-social .icon { width: 1.15rem; height: 1.15rem; }

/* hero: painted key art, floating hero cut-out, ink + ember layers, slash reveal */
.home-hero .stage-art { object-position: 50% 50%; }
.home-hero .stage-veil { opacity: .58; animation: none; }
.stage-ink { position: absolute; z-index: 2; inset: 0 38% 0 0; background: linear-gradient(100deg, color-mix(in oklch, var(--ink) 94%, transparent) 0 62%, color-mix(in oklch, var(--ink) 74%, transparent) 80%, transparent); clip-path: polygon(0 0, 88% 0, 84% 8%, 89% 16%, 82% 24%, 86% 33%, 79% 42%, 84% 51%, 76% 61%, 81% 70%, 73% 80%, 78% 90%, 70% 100%, 0 100%); pointer-events: none; }
.stage-hero { position: absolute; right: max(-3vw, calc((100% - 96rem) / 2)); bottom: -3%; width: min(47vw, 54rem); animation: hero-in 1400ms 200ms var(--ease-out) both; pointer-events: none; }
.stage-hero img { width: 100%; animation: hero-float 7s ease-in-out 1600ms infinite; }
.stage-slashfx { position: absolute; z-index: 2; left: 18%; top: 18%; width: min(64%, 72rem); aspect-ratio: 3 / 1; opacity: 0; background: linear-gradient(174deg, transparent 42%, color-mix(in oklch, var(--bone) 20%, transparent) 47%, color-mix(in oklch, var(--shu) 82%, transparent) 49%, color-mix(in oklch, var(--bone) 72%, transparent) 50%, color-mix(in oklch, var(--shu) 54%, transparent) 51%, transparent 55%); clip-path: polygon(0 44%, 100% 0, 92% 26%, 9% 58%, 95% 34%, 100% 41%, 0 70%); transform-origin: 0 50%; animation: slashfx 1500ms 450ms var(--ease-cut) both; pointer-events: none; }
.home-hero .hero-inner > * { max-width: 36rem; }
.home-hero .wordmark { width: min(36rem, 100%); aspect-ratio: 1200 / 467; margin: 0 0 1.2rem -1.2rem; }
.logo-title { width: 100%; height: auto; animation: logo-cut 1100ms 650ms var(--ease-cut) both; }
.home-hero h1 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); max-width: 20ch; }
.home-hero::after { z-index: 5; }
@keyframes slashfx { 0% { opacity: 0; transform: translateX(-22%) scaleX(.45); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(14%) scaleX(1.05); } }
@keyframes logo-cut { from { clip-path: inset(0 100% 0 0); transform: translateX(-3%); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes hero-in { from { opacity: 0; translate: 8% 2%; } to { opacity: 1; translate: 0 0; } }
@keyframes hero-float { 50% { translate: 0 -14px; } }
@keyframes embers-rise { 0% { opacity: 0; transform: translateY(20%); } 15% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; transform: translateY(-55%); } }

/* about the game: panel with box art + live numbers (no ratings, no quotes) */
.about { background: var(--ink-2); }
.about-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 4vw, 3.5rem); width: var(--page); margin-inline: auto; align-items: start; }
.about-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 16.5rem); gap: clamp(1.4rem, 3vw, 2.4rem); padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--ink-3); border-top: 3px solid var(--gold); }
.about-copy { display: grid; gap: 1rem; align-content: start; }
.about-copy .kicker { margin-bottom: 0; }
.about-copy h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.about-copy strong { color: var(--bone); }
.about-features { display: grid; gap: .45rem; list-style: none; }
.about-features li { position: relative; padding-left: 1.4rem; color: var(--bone-2); }
.about-features li::before { content: ""; position: absolute; left: 0; top: .78em; width: .7rem; height: 2px; background: var(--shu-hi); }
.about-copy .text-link { justify-self: start; }
.available { display: grid; gap: .6rem; margin-top: .4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.available-label { color: var(--bone); font: 400 1.05rem/1 var(--f-hud); letter-spacing: .2em; text-transform: uppercase; }
.platform { display: inline-flex; align-items: center; gap: .8rem; justify-self: start; min-height: 56px; padding: .6rem 1.1rem .6rem .8rem; background: var(--ink); border: 1px solid var(--line-strong); color: var(--bone); text-decoration: none; transition: transform 160ms var(--ease-out); }
.platform:active { transform: scale(.97); }
.platform .icon { width: 1.9rem; height: 1.9rem; color: var(--bone); }
.platform b { display: block; font: 400 1.25rem/1 var(--f-hud); letter-spacing: .12em; text-transform: uppercase; }
.platform small { color: var(--bone-2); font-size: .78rem; }
.boxart { margin: 0; }
.boxart img { width: 100%; transition: transform 300ms var(--ease-out); }
.about-numbers { display: grid; gap: .8rem; align-content: start; padding-top: .4rem; }
.about-numbers h3 { color: var(--bone); font: 400 1.15rem/1 var(--f-hud); letter-spacing: .22em; text-transform: uppercase; }
.about-numbers dl { display: grid; margin: 0; }
.about-numbers dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .95rem 0; border-top: 1px solid var(--line); }
.about-numbers dl > div:last-child { border-bottom: 1px solid var(--line); }
.about-numbers dt { color: var(--bone-2); }
.about-numbers dd { margin: 0; color: var(--bone); font: 400 2.3rem/1 var(--f-hud); }
.about-numbers dd[data-player-total] { color: var(--gold); }
.numbers-note { color: var(--mute); font-size: .82rem; }

/* framed hero portraits */
.stage-figure { width: min(25rem, 78vw); aspect-ratio: 10 / 13; justify-self: center; background: var(--ink-3); }
.stage-frame { position: absolute; inset: 0; z-index: 2; background: url("assets/art/frame-card.webp") center / 100% 100% no-repeat; pointer-events: none; }
.stage-figure::before { width: 76%; }
.stage-sprite { width: 96%; }
.fighter { width: 8.6rem; }
.fighter-frame { position: relative; aspect-ratio: 10 / 13; clip-path: none; padding: 16% 10% 12%; }
.fighter-frame::after { content: ""; position: absolute; inset: 0; background: url("assets/art/frame-card.webp") center / 100% 100% no-repeat; pointer-events: none; }
.fighter-pick[aria-pressed="true"] .fighter-frame { background: var(--shu-deep); }

/* sub pages: short key-art banner under the header */
.page-banner { position: relative; height: clamp(15rem, 27vw, 23rem); overflow: hidden; background: var(--ink); }
.page-banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--ink); opacity: .38; }
.page-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; height: clamp(2rem, 5vw, 4rem); background: var(--ink); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.page-banner-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 24%; animation: art-in 1600ms var(--ease-out) both; }
.page-banner-slash { position: absolute; left: 26%; top: 24%; z-index: 1; width: min(56%, 52rem); max-width: none; opacity: 0; transform-origin: 0 50%; animation: slashfx 1500ms 300ms var(--ease-cut) both; }
.page-shop .shop-hero, .page-buy .purchase-intro, .page-board .leaderboard-intro, .page-faq .faq-intro { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.page-legal .legal-layout, .page-result .result { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.page-shop .shop-hero::after { top: -4rem; }

/* Join-the-clan banner at the bottom */
.finale { display: block; min-height: 0; background: var(--ink); }
.finale-banner { position: relative; height: clamp(16rem, 34vw, 32rem); overflow: hidden; }
.finale-art { object-position: 50% 45%; }
.finale-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(2rem, 5vw, 4rem); background: var(--ink); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.finale-slash { position: absolute; left: 10%; top: 30%; width: min(60%, 56rem); max-width: none; opacity: .85; pointer-events: none; }
.finale-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(-7rem, -8vw, -3rem); padding-block: 0 var(--section); align-items: start; }
.finale-inner > * { max-width: none; }
.finale-copy { position: relative; z-index: 3; padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--ink-2); border-top: 3px solid var(--shu); }
.finale-copy > p:not(.kicker) { margin-top: 1rem; }
.finale-community { position: relative; z-index: 3; padding-top: clamp(4rem, 9vw, 8rem); }
.finale-label { margin-bottom: .6rem; color: var(--shu-hi); font: 400 1rem/1 var(--f-hud); letter-spacing: .2em; text-transform: uppercase; }
.finale .social-list a { padding-block: 1rem; }
.finale .social-name { font-size: clamp(1.4rem, 2.2vw, 2rem); }

@media (hover: hover) and (pointer: fine) {
  .boxart:hover img { transform: rotate(-1.2deg) scale(1.02); }
  .platform:hover { transform: translateY(-2px); }
}
@media (max-width: 979px) {
  .about-inner, .finale-inner { grid-template-columns: minmax(0, 1fr); }
  .finale-community { padding-top: 0; }
  .stage-hero { width: 62vw; right: -10vw; opacity: .8; }
}
@media (max-width: 720px) {
  .studio-games a:not([aria-current]) { display: none; }
  .studio-brand span { display: none; }
  .studio-games a { white-space: nowrap; font-size: .82rem; padding: 0 .5rem; }
  .home-hero .stage-veil { clip-path: none; }
  .studio-social a { width: 40px; }
  .home-hero .stage-art { object-position: 76% 50%; }
  .home-hero .stage-veil { opacity: .55; }
  .stage-ink { display: none; }
  .stage-hero { width: 86vw; right: -26vw; bottom: 4%; opacity: .45; }
  .home-hero .wordmark { margin-left: -.6rem; }
  .about-panel { grid-template-columns: minmax(0, 1fr); }
  .boxart { max-width: 17rem; }
  .stage-figure { width: min(19rem, 82vw); }
  .fighter { width: 7.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-slashfx, .page-banner-slash { display: none; }
}

/* hero cut-out breaks out of the Join-the-clan banner (in the top hero it doubled the key-art fighter) */
.finale { position: relative; }
.finale-hero { position: absolute; right: max(1rem, calc((100% - 92rem) / 2)); top: clamp(1rem, 4vw, 4rem); z-index: 4; width: min(30vw, 30rem); pointer-events: none; }
.finale-hero img { width: 100%; animation: hero-float 7s ease-in-out infinite; }
.finale-community { padding-top: clamp(14rem, 24vw, 22rem); }
@media (max-width: 979px) { .finale-hero { width: 44vw; top: 1rem; } .finale-community { padding-top: 0; } }
@media (max-width: 720px) { .finale-hero { width: 46vw; right: 0; top: 1rem; } }

/* ==========================================================================
   web6: key-art reel in the hero, Hades-style breakout banners, logo v2.
   ========================================================================== */
.stage-reel { position: absolute; inset: 0; }
.stage-reel .stage-art.reel-in { animation: reel-in 1800ms var(--ease-in-out) both; }
@keyframes reel-in { from { opacity: 0; scale: 1.04; } to { opacity: 1; scale: 1; } }
@keyframes reel-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stage-reel .stage-art.reel-in { animation: reel-fade 1600ms ease both !important; } }
.home-hero .wordmark { width: min(31rem, 100%); aspect-ratio: 1200 / 687; margin: 0 0 1rem -1rem; }

/* Katana Inu stands on a flat painted band and rises above its top edge */
.breakout { position: relative; padding-top: clamp(9rem, 15vw, 14rem); background: var(--ink-2); }
.breakout-band { position: relative; display: grid; align-items: center; min-height: clamp(19rem, 30vw, 27rem); border-block: 2px solid var(--gold-soft); }
.breakout-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.breakout-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--ink); opacity: .8; clip-path: polygon(0 0, 60% 0, 47% 100%, 0 100%); }
.breakout-inner { position: relative; z-index: 2; width: var(--page); margin-inline: auto; padding-block: clamp(2rem, 4vw, 3rem); }
.breakout-copy { display: grid; gap: .85rem; max-width: 29rem; }
.breakout-copy .kicker { margin-bottom: 0; }
.breakout-name { color: var(--bone); font: 400 clamp(3rem, 6.6vw, 6rem)/.92 var(--f-display); }
.breakout-name::after { content: ""; display: block; width: 4.5rem; height: 3px; margin-top: 1rem; background: var(--gold); }
.breakout-line { color: var(--gold); font: 400 clamp(1.05rem, 1.5vw, 1.3rem)/1.4 var(--f-display); }
.breakout-copy > p:not(.kicker):not(.breakout-line) { color: var(--bone-2); }
.breakout-copy .text-link { justify-self: start; }
.breakout-figure { position: absolute; z-index: 3; right: max(0rem, calc((100% - 76rem) / 2)); bottom: 0; width: min(29rem, 38vw); pointer-events: none; }
.breakout-figure img { display: block; width: 100%; height: auto; }

/* the heroine rises out of the Join-the-clan banner */
.finale-hero { top: clamp(-9rem, -8vw, -3rem); }
@media (max-width: 979px) { .finale-hero { top: -3rem; } }
@media (max-width: 720px) {
  .breakout { padding-top: 11rem; }
  .breakout-band { align-items: end; }
  .breakout-band::before { clip-path: none; opacity: .72; }
  .breakout-figure { right: 50%; bottom: auto; top: -10.5rem; width: min(15rem, 58vw); translate: 50% 0; }
  .breakout-inner { padding-top: 9.5rem; }
  .home-hero .wordmark { margin-left: -.4rem; }
  .finale-hero { top: -2.5rem; width: 44vw; }
}

/* web6: the finale must not clip the heroine rising above the banner (x stays clipped) */
.finale { overflow: visible; overflow-x: clip; }
.breakout-name { white-space: nowrap; font-size: clamp(2.6rem, 5.6vw, 5.2rem); }
.breakout-copy { max-width: 32rem; }
/* web6: the reel brings bright paintings (moon, snow) — keep the header nav and hero copy readable on every slide */
.home-hero .stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 7.5rem; background: var(--ink); opacity: .74; clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%); pointer-events: none; }
.home-hero .stage-veil { z-index: 1; opacity: .64; }
@media (max-width: 720px) { .home-hero .stage-veil { opacity: .72; } }
.page-banner-band { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 6.5rem; background: var(--ink); opacity: .72; clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%); }

/* ==========================================================================
   web6d (Marwan 10.11.): about tiles, floating breakout hero, filled desk mock,
   bigger sprites in hero cards, league cards with overlay copy.
   ========================================================================== */
/* about */
.about { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--ink-2); }
.about-inner { align-items: start; }
.about-panel { align-items: center; gap: clamp(1.2rem, 2.6vw, 2.2rem); background: var(--ink-3); border: 1px solid var(--line); border-top: 3px solid var(--gold); box-shadow: 0 28px 60px rgba(0,0,0,.45); }
.about-copy { gap: .75rem; }
.about-features { gap: .3rem; }
.about-features li { padding-left: 1.3rem; font-size: .95rem; }
.about-features li::before { top: .55em; width: .45rem; height: .45rem; background: var(--shu-hi); transform: rotate(45deg); }
.boxart { align-self: center; transform: rotate(-2deg); filter: drop-shadow(0 18px 28px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(196,35,43,.35)); }
.available { margin-top: .2rem; padding-top: .9rem; }
.about-numbers { padding: clamp(1.2rem, 2.4vw, 1.8rem); background: #1f1714; border: 1px solid var(--line); border-top: 3px solid var(--shu); }
.about-numbers dl { grid-template-columns: 1fr 1fr; gap: .55rem; }
.about-numbers dl > div, .about-numbers dl > div:last-child { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: .4rem; padding: .85rem .95rem; background: var(--ink-3); border: 1px solid var(--line); border-left: 3px solid var(--shu); }
.about-numbers dl > div:first-child { grid-column: 1 / -1; border-left-color: var(--gold); background: #2c2117; }
.about-numbers dt { color: var(--mute); font: 400 .78rem/1.2 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; }
.about-numbers dd { font-size: 2rem; }
.numbers-note { font-size: .75rem; }

/* breakout hero floats, painting drifts */
.breakout-figure img { animation: char-float 5.5s ease-in-out infinite; filter: drop-shadow(0 22px 30px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(240,96,63,.28)); }
.breakout-bg { animation: bg-drift 26s ease-in-out infinite alternate; }
@keyframes char-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(-.8deg); } }
@keyframes bg-drift { from { object-position: 78% 50%; } to { object-position: 62% 46%; } }

/* desk mock: real-looking editor + chat instead of grey bars */
.taskbar-stage { aspect-ratio: 16 / 10; }
.desk-win { gap: 7px; padding: 32px 16px 16px; background: #2a201b; box-shadow: 0 14px 28px rgba(0,0,0,.35); }
.desk-win::before { height: 20px; background: var(--ink-4); border-bottom: 1px solid var(--line); }
.desk-win i { height: 6px; border-radius: 3px; opacity: .55; background: var(--bone-2); }
.desk-win-a i:nth-child(4n+1) { width: 46%; background: var(--gold); }
.desk-win-a i:nth-child(4n+2) { width: 72%; margin-left: 8%; background: var(--shu-hi); opacity: .5; }
.desk-win-a i:nth-child(4n+3) { width: 58%; margin-left: 8%; }
.desk-win-a i:nth-child(4n) { width: 34%; margin-left: 16%; background: #8fb1c9; opacity: .5; }
.desk-win-b { background: #241b17; }
.desk-win-b i { height: 22px; border-radius: 10px 10px 10px 2px; opacity: .22; }
.desk-win-b i:nth-child(odd) { width: 78%; }
.desk-win-b i:nth-child(even) { width: 62%; margin-left: auto; border-radius: 10px 10px 2px 10px; background: var(--shu); opacity: .45; }

/* hero cards: sprite fills the frame */
.stage-figure { width: min(22rem, 78vw); overflow: hidden; }
.stage-sprite { transform: scale(1.3); transform-origin: 50% 94%; }
.fighter { width: 7.6rem; }
.fighter-frame { padding: 8% 6% 6%; overflow: hidden; }
.fighter-frame img { transform: scale(1.18); transform-origin: 50% 92%; }

/* leagues: framed cards, copy over the map, big boss */
.league { position: relative; gap: 0; background: var(--ink-2); border: 1px solid var(--line); border-top: 2px solid var(--gold-soft); box-shadow: 0 24px 50px rgba(0,0,0,.4); }
.league-map { clip-path: none; }
.league-map > img { aspect-ratio: 2.7 / 1; transition: transform 300ms var(--ease-out); }
.league:hover .league-map > img { transform: scale(1.04); }
.league-boss { z-index: 1; right: 5%; bottom: 0; width: clamp(9rem, 19vw, 15rem); filter: drop-shadow(0 0 18px rgba(240,96,63,.45)) drop-shadow(0 12px 14px rgba(0,0,0,.6)); }
.league-copy { z-index: 2; margin-top: 1.2rem; padding: 0 clamp(1rem, 2.4vw, 1.8rem) clamp(1rem, 2.4vw, 1.6rem); }
.league-kanji { top: -1rem; left: auto; right: 1rem; z-index: 0; color: rgba(196,35,43,.14); font-size: 7rem; }
.league h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.league-waves { gap: .5rem; }
.league-waves li { overflow: hidden; border: 1px solid var(--line); }
.league-waves img { transition: transform 300ms var(--ease-out); }
.league-waves li:hover img { transform: scale(1.06); }
.league-waves span { background: var(--shu); color: var(--bone); }

@media (max-width: 760px) {
  .about-numbers dl { grid-template-columns: 1fr 1fr; }
  .taskbar-stage { aspect-ratio: auto; }
  .stage-figure { width: min(19rem, 82vw); }
  .fighter { width: 6.8rem; }
}
/* Marwan wants the page to move even with Windows animation effects off: keep the gentle float and fade. */
@media (prefers-reduced-motion: reduce) {
  .breakout-figure img { animation: char-float 5.5s ease-in-out infinite !important; }
  .breakout-bg { animation: bg-drift 26s ease-in-out infinite alternate !important; }
}

/* web6f (Marwan 10.11.): about = trailer left, copy + actions right, a few animated heroes below */
.about-v2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.6rem, 3.5vw, 3rem); width: var(--page); margin-inline: auto; align-items: center; }
.about-video { margin: 0; background: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--gold); box-shadow: 0 28px 60px rgba(0,0,0,.5); }
.about-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); }
.about-v2 .about-copy h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-top: .3rem; }
.about-actions .button small { display: block; margin-top: .2rem; color: var(--bone-2); font: 400 .72rem/1.2 var(--f-body); letter-spacing: 0; text-transform: none; }
.about-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: .6rem 0 0; }
.about-stats > div { display: flex; flex-direction: column-reverse; gap: .25rem; padding: .7rem .75rem; background: var(--ink-3); border: 1px solid var(--line); border-top: 2px solid var(--shu); }
.about-stats dd { margin: 0; color: var(--gold); font: 400 1.7rem/1 var(--f-hud); }
.about-stats dt { color: var(--mute); font: 400 .72rem/1.2 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; }
.about-cast { grid-column: 1 / -1; display: grid; gap: .8rem; padding-top: clamp(1rem, 2vw, 1.6rem); border-top: 1px solid var(--line); }
.about-cast-label { color: var(--bone); font: 400 1rem/1 var(--f-hud); letter-spacing: .22em; text-transform: uppercase; }
.about-cast ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; list-style: none; margin: 0; padding: 0; }
.about-cast li { display: grid; justify-items: center; gap: .15rem; padding: .4rem .4rem .8rem; background: var(--ink-3); border: 1px solid var(--line); border-bottom: 3px solid var(--shu-deep); text-align: center; transition: transform 200ms var(--ease-out); }
.about-cast li:hover { transform: translateY(-4px); }
.cast-sprite { width: 100%; max-width: 11rem; }
.about-cast b { color: var(--bone); font: 400 1.15rem/1.1 var(--f-hud); letter-spacing: .1em; text-transform: uppercase; }
.about-cast small { color: var(--mute); font-size: .78rem; }
@media (max-width: 980px) {
  .about-v2 { grid-template-columns: minmax(0, 1fr); }
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-cast ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* web6g: bosses stand on each arena floor (measured from the boss maps), not on the card edge */
.league-holz { --floor: 21%; } .league-eisen { --floor: 22%; } .league-silber { --floor: 25%; } .league-gold { --floor: 27%; } .league-meister { --floor: 15%; }
.league-boss { bottom: calc(var(--floor, 20%) - 1.1rem); }

/* web6h: hero carousel with arrows + auto-advance; sprites keep moving (Marwan wants motion even with OS animations off) */
.about-cast-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cast-nav { display: flex; gap: .5rem; }
.cast-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--ink-3); border: 1px solid var(--line-strong); color: var(--bone); cursor: pointer; transition: transform 160ms var(--ease-out); }
.cast-btn:hover { border-color: var(--gold); color: var(--gold); }
.cast-btn:active { transform: scale(.94); }
.cast-btn .icon { width: 1.3rem; height: 1.3rem; }
.about-cast ul { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.about-cast ul::-webkit-scrollbar { display: none; }
.about-cast li { flex: 0 0 calc((100% - 3.2rem) / 5); scroll-snap-align: start; }
@media (max-width: 980px) { .about-cast li { flex-basis: calc((100% - 1.6rem) / 3); } }
@media (max-width: 560px) { .about-cast li { flex-basis: calc((100% - .8rem) / 2); } }
@media (prefers-reduced-motion: reduce) { .about-cast .sprite-strip { animation: sprite-run calc(var(--n, 6) * 115ms) steps(var(--n, 6)) infinite !important; } }
.page-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .8; }
.league-boss { transition: translate 260ms var(--ease-out); }
.league-boss.is-striking { translate: -14px 0; }
@media (prefers-reduced-motion: reduce) { .league-boss .sprite-strip { animation: sprite-run 900ms steps(6) infinite !important; } }

/* G507: data-driven NFT preview; informational only, with no wallet or purchase controls. */
.nft-toplink { display: inline-grid; gap: .15rem; margin-bottom: 1.1rem; padding: .65rem .85rem .6rem; border-left: 3px solid var(--gold); background: var(--ink-3); color: var(--bone); text-decoration: none; }
.nft-toplink span { color: var(--mute); font: 400 .72rem/1 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; }
.nft-toplink strong { color: var(--gold); font: 400 1.2rem/1.1 var(--f-hud); letter-spacing: .12em; }
.nft-showcase { position: relative; background: #110e0d; border-block: 1px solid var(--line); overflow: hidden; }
.nft-showcase::before { content: "鋳"; position: absolute; right: -1rem; top: -3rem; color: rgba(196, 35, 43, .09); font: 400 22rem/1 var(--f-jp); pointer-events: none; }
.nft-showcase-inner { position: relative; width: var(--page); margin-inline: auto; }
.nft-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.nft-head > div { max-width: 48rem; }
.nft-head .text-link { flex: none; margin-bottom: .25rem; }
.nft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 1.7vw, 1.4rem); }
.nft-card { min-width: 0; background: var(--ink-2); border: 1px solid var(--line); border-bottom: 3px solid var(--shu-deep); }
.nft-card-art { position: relative; margin: 0; overflow: hidden; background: var(--ink-3); }
.nft-card-art img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 300ms var(--ease-out); }
.nft-card-status { position: absolute; left: .7rem; bottom: .7rem; padding: .4rem .55rem .34rem; background: rgba(15, 11, 10, .9); border: 1px solid var(--gold-soft); color: var(--gold); font: 400 .74rem/1 var(--f-hud); letter-spacing: .12em; text-transform: uppercase; }
.nft-card-body { display: grid; gap: .38rem; padding: 1rem 1.05rem 1.1rem; }
.nft-card-meta { color: var(--shu-hi); font: 400 .78rem/1 var(--f-hud); letter-spacing: .16em; text-transform: uppercase; }
.nft-card-body h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
.nft-card-supply, .nft-card-pending { color: var(--mute); font-size: .82rem; }
.nft-card-pending { padding-top: .45rem; border-top: 1px solid var(--line); }
.nft-disclaimer { margin-top: 1.2rem; padding: .85rem 1rem; border-left: 3px solid var(--gold); background: var(--ink-2); color: var(--bone-2); }
.nft-return-band { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(2.2rem, 5vw, 4rem); padding: 1rem 1.2rem; border-block: 1px solid var(--gold-soft); background: var(--ink-2); }
.nft-return-band span { color: var(--mute); font: 400 .82rem/1.2 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; }
.nft-return-band a { color: var(--gold); font: 400 1.15rem/1 var(--f-hud); letter-spacing: .12em; text-decoration: none; }
.perk-ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.perk:nth-child(2) { margin-top: 2rem; }
.perk:nth-child(3) { margin-top: 4rem; }
.perk:nth-child(4) { margin-top: 6rem; }
.perk-crusader .perk-art img { object-position: center; }
.perk-crusader .perk-value { font-size: clamp(2rem, 3vw, 2.8rem); }
@media (hover: hover) and (pointer: fine) {
  .nft-toplink:hover { background: var(--shu-deep); }
  .nft-card:hover .nft-card-art img { transform: scale(1.025); }
}

/* G511 — complete game guide */
.page-guide{background:#0d0b0b;color:var(--paper,#eee5d5)}
.guide-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:clamp(2rem,5vw,6rem);align-items:center;max-width:1440px;margin:auto;padding:clamp(5rem,10vw,9rem) clamp(1.25rem,5vw,5rem);isolation:isolate}
.guide-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 30%,rgba(163,35,23,.2),transparent 38%),linear-gradient(90deg,rgba(8,7,7,.96),rgba(8,7,7,.58));z-index:-1}
.guide-hero h1{max-width:14ch;margin:.45rem 0 1.25rem;font-size:clamp(3rem,6vw,6.5rem);line-height:.92;letter-spacing:-.045em}
.guide-hero .lead{max-width:65ch}
.guide-hero figure{margin:0;padding:.65rem;background:#120f0f;border:1px solid rgba(214,169,91,.38);box-shadow:0 28px 80px rgba(0,0,0,.5)}
.guide-hero figure img{display:block;width:100%;height:auto}
.guide-hero figcaption{padding:.75rem .25rem .15rem;color:#b9aa92;font-size:.86rem}
.guide-shell{display:grid;grid-template-columns:250px minmax(0,980px);gap:clamp(2rem,5vw,5rem);justify-content:center;max-width:1440px;margin:auto;padding:0 clamp(1.25rem,5vw,5rem) 7rem}
.guide-toc{position:relative}
.guide-toc nav{position:sticky;top:7rem;display:grid;padding:1.2rem;border-top:2px solid #b53b2d;background:linear-gradient(145deg,rgba(33,26,23,.92),rgba(15,13,13,.95));box-shadow:inset 0 0 0 1px rgba(214,169,91,.16)}
.guide-toc p{margin:0 0 .65rem;color:#d7af6b;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.11em}
.guide-toc a{padding:.48rem .2rem;color:#bcb1a1;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06)}
.guide-toc a:hover,.guide-toc a:focus-visible{color:#fff}
.guide-content{min-width:0}
.guide-section{scroll-margin-top:7rem;padding:4.5rem 0;border-top:1px solid rgba(214,169,91,.2)}
.guide-section:first-child{border-top:0}
.guide-step{margin:0 0 .65rem;color:#ce9e52;font-family:var(--font-display);font-size:.95rem;text-transform:uppercase;letter-spacing:.14em}
.guide-section>h2{max-width:20ch;margin:0 0 2rem;font-size:clamp(2.2rem,4vw,4.2rem);line-height:1}
.guide-section h3{margin:.1rem 0 .45rem;color:#f0d4a2;font-size:1.25rem}
.guide-section p,.guide-section li{color:#c9c1b6;line-height:1.7}
.guide-section ul{margin:0;padding-left:1.15rem}
.guide-section li+li{margin-top:.55rem}
.guide-media{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);gap:2rem;align-items:start}
.guide-media>img,.guide-wide{display:block;width:100%;height:auto;background:#111;border:1px solid rgba(214,169,91,.28);box-shadow:0 18px 55px rgba(0,0,0,.34)}
.guide-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.guide-cards figure{margin:0;background:#121010;border:1px solid rgba(214,169,91,.25)}
.guide-cards img{display:block;width:100%;height:auto;aspect-ratio:820/560;object-fit:cover;border-bottom:1px solid rgba(214,169,91,.18)}
.guide-cards figcaption{display:grid;gap:.45rem;padding:1.25rem}
.guide-cards figcaption strong{color:#f0d4a2;font-family:var(--font-display);font-size:1.3rem}
.guide-cards figcaption span{color:#bfb5a6;line-height:1.6}
.guide-grid,.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(214,169,91,.2);border:1px solid rgba(214,169,91,.2)}
.guide-grid>div,.mode-grid>div{padding:1.35rem;background:#121010}
.guide-grid p,.mode-grid p{margin:0}
.guide-note{margin-top:1.25rem;padding:1.25rem 1.4rem;border-left:3px solid #a82f24;background:rgba(136,31,23,.12)}
.guide-note strong{color:#f0d4a2;text-transform:uppercase;letter-spacing:.08em}
.guide-note p{margin:.35rem 0 0}
.guide-tip{display:grid;grid-template-columns:auto 1fr;gap:1rem;margin-top:1.5rem;padding:1rem 1.2rem;border:1px solid rgba(214,169,91,.3);background:linear-gradient(100deg,rgba(105,75,36,.24),rgba(16,14,13,.8))}
.guide-tip strong{color:#e9bb6a;text-transform:uppercase;letter-spacing:.09em}
.guide-tip span{color:#d3c8b7;line-height:1.55}
.guide-wide{margin-bottom:1.25rem}
.guide-subcards{margin-top:1.25rem}
.mode-focus{box-shadow:inset 3px 0 0 #bd3b2c;background:linear-gradient(120deg,#25110f,#121010)!important}
.guide-finish{max-width:980px;margin:0 auto 7rem;padding:clamp(2rem,5vw,4.5rem);text-align:center;border:1px solid rgba(214,169,91,.3);background:radial-gradient(circle at 50% 100%,rgba(158,37,25,.22),transparent 55%),#121010}
.guide-finish h2{margin:.25rem 0;font-size:clamp(2.3rem,5vw,4.5rem)}
.guide-finish p:not(.kicker){color:#bfb5a6}
@media(max-width:980px){.guide-hero{grid-template-columns:1fr}.guide-shell{grid-template-columns:1fr}.guide-toc{position:static;overflow-x:auto}.guide-toc nav{position:static;display:flex;gap:.35rem;width:max-content;max-width:none;padding:.7rem}.guide-toc nav p{display:none}.guide-toc a{white-space:nowrap;padding:.6rem .8rem;border:1px solid rgba(214,169,91,.18)}.guide-media{grid-template-columns:1fr}.guide-section{padding:3.5rem 0}}
@media(max-width:620px){.guide-hero{padding-top:3.2rem}.guide-hero h1{font-size:clamp(2.8rem,15vw,4.5rem)}.guide-hero figure{padding:.35rem}.guide-shell{padding-inline:1rem}.guide-cards,.guide-grid,.mode-grid{grid-template-columns:1fr}.guide-section>h2{font-size:2.45rem}.guide-tip{grid-template-columns:1fr;gap:.25rem}.guide-section p,.guide-section li{font-size:.96rem}.guide-finish{margin:0 1rem 4rem}.page-guide .site-footer{margin-top:0}}
@media (max-width: 979px) {
  .nft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perk-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perk:nth-child(2), .perk:nth-child(3), .perk:nth-child(4) { margin-top: 0; }
}
@media (max-width: 600px) {
  .nft-head { display: grid; align-items: start; }
  .nft-grid { display: flex; gap: .8rem; overflow-x: auto; margin-inline: calc((100vw - 100%) / -2); padding: 0 max(1rem, calc((100vw - 100%) / 2)) 1rem; scroll-snap-type: x mandatory; }
  .nft-card { flex: 0 0 min(82vw, 20rem); scroll-snap-align: start; }
  .nft-return-band { align-items: flex-start; flex-direction: column; }
  .perk-ladder { grid-template-columns: minmax(0, 1fr); }
  .perk:nth-child(4) { margin-top: 0; }
}