/* Hallmark · genre: atmospheric · route: custom (bespoke) · structure: multi-page — cinematic hero on Home, compact ring page-heroes elsewhere, seat-map booking wizard
 * enrichment: E8 hero photography + Tier-A CSS art (perspective grid, light beams, rising-sun ring, HUD brackets) + one canvas layer (sakura petals, ≤ 30, paused off-screen)
 * anime layer: kanji tags above section titles, screentone dot pattern on alt sections, speed lines on the CTA band, petal drift, lantern photography
 * nav: N10 floating-on-scroll morph · footer: Ft5 Statement · CTA: C4 sticky bottom bar (mobile)
 * theme: custom (bespoke) — see tokens.css · studied: no · v2.0.0
 */

/* ==================================================================
   0. Reset & base
   ================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration-color: var(--color-accent-2-deep); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--color-accent-2); }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-style: normal; font-weight: 700; letter-spacing: var(--tracking-display); line-height: var(--leading-snug); overflow-wrap: anywhere; min-width: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, dt, figure, blockquote { margin: 0; }
table { border-collapse: collapse; width: 100%; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tnum { font-variant-numeric: tabular-nums; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.75rem; height: 1.75rem; }

.skip-link {
  position: absolute; top: var(--space-xs); left: var(--space-xs); z-index: var(--z-toast);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-display); font-weight: 700; text-decoration: none;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

.container { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }

/* A single orchestrated reveal — one-shot, IntersectionObserver-driven */
html.js .reveal { opacity: 0; transform: translateY(14px); }
html.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ==================================================================
   1. Buttons — all 8 states
   ================================================================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-ink);
  --btn-bd: var(--color-rule);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: var(--control-h); padding: 0 1.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--btn-fg); background: var(--btn-bg);
  border: var(--rule-hair) solid var(--btn-bd); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform 100ms var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.btn .icon { width: 1.1rem; height: 1.1rem; }
.btn--primary {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-accent-ink);
  --btn-bd: var(--color-accent);
  box-shadow: 0 0 0 0 var(--alpha-accent-glow);
}
.btn--ghost {
  --btn-bd: var(--alpha-hairline);
  background: var(--alpha-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--cyan {
  --btn-fg: var(--color-accent-2);
  --btn-bd: var(--color-accent-2-deep);
}
.btn--sm { min-height: 2.5rem; padding: 0 1rem; font-size: var(--text-xs); }
.btn--block { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1.5px); }
  .btn--primary:hover { box-shadow: 0 8px 28px -6px var(--alpha-accent-glow); }
  .btn--ghost:hover { --btn-bd: var(--color-accent-2-deep); --btn-fg: var(--color-accent-2); }
  .btn--cyan:hover { --btn-bd: var(--color-accent-2); background: var(--alpha-cyan-soft); }
}
.btn:active { transform: translateY(1px); transition-duration: 60ms; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn--primary:focus-visible { outline-color: var(--color-ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[data-state="loading"] { color: transparent; pointer-events: none; }
.btn[data-state="loading"]::after {
  content: ""; position: absolute; width: 1.1rem; height: 1.1rem;
  border: 2px solid var(--btn-fg); border-right-color: transparent; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.btn[data-state="error"] { --btn-bd: var(--color-error); --btn-fg: var(--color-error); --btn-bg: transparent; }
.btn[data-state="success"] { --btn-bd: var(--color-success); --btn-fg: var(--color-success); --btn-bg: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================================================================
   2. Navigation — N10 floating-on-scroll morph
   ================================================================== */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  padding-block: 0;
  background-color: var(--alpha-glass);
  border-block-end: var(--rule-hair) solid var(--alpha-hairline-2);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  transition: padding var(--dur-morph) var(--ease-out), background-color var(--dur-morph) var(--ease-out), border-color var(--dur-morph) var(--ease-out), backdrop-filter var(--dur-morph) var(--ease-out);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  max-width: var(--page-max); min-height: 64px; margin-inline: auto;
  padding: 12px var(--page-gutter);
  border-radius: 0; background-color: transparent;
  border: var(--rule-hair) solid transparent;
  backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  box-shadow: none; transform: translateY(0);
  transition: max-width var(--dur-morph) var(--ease-out), min-height var(--dur-morph) var(--ease-out), padding var(--dur-morph) var(--ease-out), border-radius var(--dur-morph) var(--ease-out), background-color var(--dur-morph) var(--ease-out), border-color var(--dur-morph) var(--ease-out), backdrop-filter var(--dur-morph) var(--ease-out), box-shadow var(--dur-morph) var(--ease-out), transform var(--dur-morph) var(--ease-out);
}
.nav.is-floating {
  padding-block: var(--space-2xs);
  background-color: transparent;
  border-block-end-color: transparent;
  backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
}
.nav.is-floating .nav__inner {
  max-width: 62rem; min-height: 56px; padding: 4px var(--space-md) 4px var(--space-lg);
  border-radius: var(--radius-pill);
  background-color: var(--alpha-glass-strong);
  border-color: var(--alpha-hairline);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 18px 40px -18px var(--alpha-shadow), 0 0 0 1px var(--alpha-hairline-2) inset, 0 0 40px -12px var(--alpha-accent-glow);
  transform: translateY(12px);
}

.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em;
  text-decoration: none; text-transform: uppercase; white-space: nowrap;
}
.wordmark__mark { width: 1.75rem; height: 1.75rem; }
.wordmark strong { font-weight: 700; color: var(--color-ink); }
.wordmark span { font-weight: 400; color: var(--color-ink-2); }

.nav__links { display: none; align-items: center; gap: var(--space-2xs); }
.nav__link {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.75rem;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.04em;
  color: var(--color-ink-2); text-decoration: none; white-space: nowrap; border-radius: var(--radius-pill);
  position: relative;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.35rem; height: 2px;
  background: var(--color-accent-2); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out);
}
@media (hover: hover) { .nav__link:hover { color: var(--color-ink); } }
.nav__link[aria-current="true"] { color: var(--color-ink); }
.nav__link[aria-current="true"]::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--space-xs); }
.nav__cta { min-height: 2.5rem; padding: 0 1rem; font-size: var(--text-xs); }

.nav__burger {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  background: transparent; border: var(--rule-hair) solid var(--alpha-hairline); border-radius: var(--radius-pill);
  cursor: pointer; color: var(--color-ink);
}
@media (min-width: 64rem) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
  .nav__cta { min-height: 2.75rem; padding: 0 1.25rem; }
}

/* Mobile sheet (dialog) */
.sheet {
  position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  padding: var(--space-lg) var(--page-gutter) var(--space-2xl);
  border: 0; background: var(--alpha-glass-strong); color: var(--color-ink);
  backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
  z-index: var(--z-modal);
}
.sheet::backdrop { background: transparent; }
.sheet[open] { display: grid; grid-template-rows: auto 1fr auto; animation: fade var(--dur-short) var(--ease-out); }
.sheet__top { display: flex; justify-content: space-between; align-items: center; }
.sheet__close { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: var(--rule-hair) solid var(--alpha-hairline); background: transparent; border-radius: var(--radius-pill); color: var(--color-ink); cursor: pointer; }
.sheet__links { display: grid; align-content: center; gap: var(--space-2xs); padding-block: var(--space-xl); }
.sheet__link {
  display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem;
  padding: 0 var(--space-xs); border-block-end: var(--rule-hair) solid var(--alpha-hairline-2);
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
}
.sheet__link .icon { color: var(--color-accent-2); }
.sheet__meta { display: grid; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
@keyframes fade { from { opacity: 0; } }

/* ==================================================================
   3. Hero — full fold, left-biased, photographic ground + CSS art
   ================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - 64px); /* the sticky nav is in flow above */
  display: grid; align-items: end;
  padding-block: 7rem clamp(4rem, 9vh, 7rem);
  color: var(--color-ink);
}
.hero__media { position: absolute; inset: 0; z-index: -6; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%;
  filter: saturate(1.15) brightness(0.9);
  --px: 0px; --py: 0px;
  transform: scale(1.06) translate3d(var(--px), var(--py), 0);
}
.hero__tint { position: absolute; inset: 0; z-index: -5; background: linear-gradient(100deg, var(--color-paper) 8%, transparent 62%); }
.hero__tint::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--alpha-scrim) 0%, transparent 28%, transparent 62%, var(--color-paper) 100%); }
.hero__wash { position: absolute; inset: 0; z-index: -4; background: linear-gradient(120deg, var(--alpha-accent-soft), transparent 55%, var(--alpha-cyan-soft)); }

/* Perspective grid floor — Tier-A CSS art */
.hero__floor {
  position: absolute; left: -10%; right: -10%; bottom: -2%; height: 46%; z-index: -3;
  perspective: 700px; perspective-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--color-ink) 35%, var(--color-ink) 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, var(--color-ink) 35%, var(--color-ink) 80%, transparent);
  pointer-events: none;
}
.hero__floor::before {
  content: ""; position: absolute; inset: 0 0 -100% 0;
  background-image:
    linear-gradient(var(--alpha-accent-glow) 1px, transparent 1px),
    linear-gradient(90deg, var(--alpha-accent-glow) 1px, transparent 1px);
  background-size: 64px 64px;
  transform-origin: 50% 0; transform: rotateX(62deg) translateY(0);
  opacity: 0.55;
  animation: floor-drift 9s linear infinite;
}
@keyframes floor-drift { to { transform: rotateX(62deg) translateY(-64px); } }

/* Light beams */
.hero__beam {
  position: absolute; top: -20%; width: 22vw; min-width: 160px; height: 140%; z-index: -4;
  transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--alpha-accent-soft) 40%, transparent);
  opacity: 0.8; animation: beam-breathe 11s var(--ease-in-out) infinite alternate;
}
.hero__beam--2 { left: auto; right: 6%; width: 14vw; background: linear-gradient(180deg, transparent, var(--alpha-cyan-soft) 45%, transparent); animation-duration: 14s; animation-delay: -5s; }
.hero__beam--1 { left: 38%; }
@keyframes beam-breathe { from { opacity: 0.35; } to { opacity: 0.95; } }

.hero__particles { position: absolute; inset: 0; z-index: -2; pointer-events: none; }

/* HUD corner marks */
.hero__hud { position: absolute; inset: 5.5rem var(--page-gutter) var(--space-lg); z-index: 0; pointer-events: none; }
.hero__hud::before, .hero__hud::after {
  content: ""; position: absolute; width: 28px; height: 28px; border: var(--rule-hair) solid var(--alpha-hairline);
}
.hero__hud::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hero__hud::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.hero__content { position: relative; z-index: var(--z-base); display: grid; gap: var(--space-lg); max-width: 46rem; }

.status {
  display: inline-flex; align-items: center; gap: var(--space-sm); width: max-content; max-width: 100%;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  background: var(--alpha-glass); border: var(--rule-hair) solid var(--alpha-hairline); border-radius: var(--radius-pill);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-2);
}
.status__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 0 var(--color-success); animation: ping 2.2s var(--ease-out) infinite; }
.status[data-open="false"] .status__dot { background: var(--color-muted); animation: none; }
.status strong { color: var(--color-ink); font-weight: 700; }
.status span { white-space: nowrap; }
.status__sep { color: var(--color-neutral); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 var(--alpha-cyan-glow); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.hero__display {
  font-size: var(--text-display); line-height: var(--leading-tight); text-transform: uppercase;
  letter-spacing: -0.02em; max-width: 12ch;
}
.hero__display .accent { color: var(--color-accent-2); }
.hero__display .end { color: var(--color-accent); }
.hero__lede { font-size: clamp(var(--text-base), 1.2vw + 0.6rem, var(--text-md)); color: var(--color-ink-2); max-width: 36ch; font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.hero__meta a { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-ink-2); text-decoration: none; }
.hero__meta a .icon { color: var(--color-accent-2); }
@media (hover: hover) { .hero__meta a:hover { color: var(--color-accent-2); } }

.hero__rail {
  display: none; position: absolute; right: var(--page-gutter); top: 50%; z-index: var(--z-base);
  writing-mode: vertical-rl; text-orientation: mixed; transform: translateY(-50%);
  font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-muted);
  pointer-events: none;
}
.hero__rail .jp { font-family: var(--font-jp); letter-spacing: 0.4em; color: var(--color-accent-2); }
.hero__rail::after { content: ""; display: block; width: 1px; height: 6rem; margin-top: var(--space-md); margin-inline: auto; background: linear-gradient(180deg, var(--color-accent-2-deep), transparent); }
@media (min-width: 64rem) { .hero__rail { display: flex; align-items: center; gap: var(--space-md); } }

.hero__scroll { position: absolute; left: var(--page-gutter); bottom: var(--space-lg); z-index: var(--z-base); display: none; align-items: center; gap: var(--space-xs); color: var(--color-neutral); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.hero__scroll::before { content: ""; width: 3rem; height: 1px; background: var(--color-rule); }
@media (min-width: 64rem) { .hero__scroll { display: inline-flex; } }

/* ==================================================================
   4. Ticker (marquee) — pauses on hover, static on reduced motion
   ================================================================== */
.ticker { overflow: hidden; border-block: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); }
.ticker__track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__list { display: flex; align-items: center; gap: var(--space-xl); padding-inline-end: var(--space-xl); padding-block: var(--space-sm); font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink-2); white-space: nowrap; }
.ticker__list li { display: inline-flex; align-items: center; gap: var(--space-xl); }
.ticker__list li::after { content: ""; width: 0.4rem; height: 0.4rem; background: var(--color-accent); transform: rotate(45deg); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ==================================================================
   5. Sections — shared head, deliberately uneven rhythm
   ================================================================== */
.section { position: relative; padding-block: var(--space-3xl); }
.section--alt { background: var(--color-paper-2); }
.section--tight { padding-block: var(--space-2xl) var(--space-3xl); }
.section--tall { padding-block: var(--space-4xl) var(--space-3xl); }
.section--rule { border-block-start: var(--rule-hair) solid var(--color-rule-2); }

.section__head { display: grid; gap: var(--space-sm); max-width: 44rem; margin-block-end: var(--space-xl); }
.section__head--wide { max-width: none; grid-template-columns: 1fr; align-items: end; }
.section__title { font-size: var(--text-display-s); line-height: var(--leading-snug); text-transform: uppercase; letter-spacing: -0.02em; }
.section__title::before { content: ""; display: block; width: 2.5rem; height: var(--rule-thick); margin-block-end: var(--space-sm); background: var(--color-accent); }
.section__title--cyan::before { background: var(--color-accent-2); }
.section__title--magenta::before { background: var(--color-accent-3); }
.section__kicker { color: var(--color-muted); font-size: var(--text-md); max-width: 52ch; }
.section__aside { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
@media (min-width: 60rem) {
  .section__head--wide { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); }
  .section__head--wide .section__kicker { grid-column: 1; }
  .section__head--wide .section__aside { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
}

.label { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent-2); }
.label--muted { color: var(--color-muted); }
.label--purple { color: var(--color-accent); }
.pill { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 0.25rem 0.65rem; border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-2); white-space: nowrap; }
.pill--accent { border-color: var(--color-accent-deep); color: var(--color-accent); background: var(--alpha-accent-soft); }
.pill--cyan { border-color: var(--color-accent-2-deep); color: var(--color-accent-2); background: var(--alpha-cyan-soft); }
.pill--magenta { border-color: var(--color-accent-3); color: var(--color-accent-3); background: var(--alpha-magenta-soft); }

/* Card base — one containment signal (surface lightness + hairline), no shadow stacks */
.card {
  position: relative; background: var(--color-paper-3);
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md);
  transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.section--alt .card { background: var(--color-paper-3); }
@media (hover: hover) and (pointer: fine) {
  .card--lift:hover { transform: translateY(-3px); border-color: var(--color-accent-deep); }
}
.card--glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, var(--color-accent), transparent 40%, transparent 60%, var(--color-accent-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px; opacity: 0; transition: opacity var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .card--glow:hover::before, .card--glow:focus-within::before { opacity: 1; } }

/* ==================================================================
   6. Intro strip (About / The arena)
   ================================================================== */
.intro { display: grid; gap: var(--space-xl); }
.intro__copy { font-size: var(--text-md); color: var(--color-ink-2); max-width: 46ch; }
.intro__copy strong { color: var(--color-ink); font-weight: 700; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); overflow: hidden; }
.fact { padding: var(--space-lg); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); margin: -0.5px; display: grid; gap: var(--space-2xs); }
.fact__num { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--color-ink); }
.fact__num em { font-style: normal; color: var(--color-accent-2); }
.fact__txt { font-size: var(--text-sm); color: var(--color-muted); }
@media (min-width: 60rem) {
  .intro { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==================================================================
   7. Gaming PCs — F6 product cards with spec sheet
   ================================================================== */
.rigs { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .rigs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .rigs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rig { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.rig--featured { border-color: var(--color-accent-deep); }
.rig__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-paper-2); }
.rig__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .rig:hover .rig__media img { transform: scale(1.03); } }
.rig__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, var(--color-paper-3)); }
.rig__badge { position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: var(--z-raised); }
.rig__body { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.rig__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.rig__name { font-size: var(--text-lg); text-transform: uppercase; letter-spacing: -0.01em; }
.rig__hz { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-accent-2); white-space: nowrap; }
.specs { display: grid; gap: 0; }
.specs > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-xs); border-block-start: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); }
.specs dt { color: var(--color-muted); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; align-self: center; }
.specs dd { color: var(--color-ink-2); font-weight: 500; }
.rig__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); }
.price { font-family: var(--font-display); font-variant-numeric: tabular-nums; line-height: 1; }
.price__amt { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }
.price__unit { font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-inline-start: 0.25rem; }
.rig__peripherals { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

/* ==================================================================
   10. Games available — grouped chip index
   ================================================================== */
.games { display: grid; gap: var(--space-lg); }
@media (min-width: 60rem) { .games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); } }
.game-group { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.game-group h3 { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent-2); padding-top: 0.45rem; }
.game-group h3 span { display: block; color: var(--color-neutral); font-weight: 400; letter-spacing: 0.06em; margin-top: var(--space-2xs); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.85rem; border-radius: var(--radius-pill); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); white-space: nowrap; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .chip:hover { border-color: var(--color-accent-deep); color: var(--color-ink); } }
.chip--new { border-color: var(--color-accent-3); color: var(--color-ink); }
.games-note { margin-block-start: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }

/* ==================================================================
   11. Esports arena — event list + leaderboard
   ================================================================== */
.arena { display: grid; gap: var(--space-2xl); }
@media (min-width: 72rem) { .arena { grid-template-columns: 1.35fr 1fr; gap: var(--space-2xl); align-items: start; } }
.arena__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.arena__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.22; filter: saturate(0.6); }
.arena__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-paper) 0%, transparent 35%, transparent 70%, var(--color-paper) 100%); }
.section--arena > .container { position: relative; z-index: var(--z-base); }

.events { display: grid; gap: var(--space-sm); }
.event { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md); align-items: center; }
@media (min-width: 48rem) { .event { grid-template-columns: 5rem minmax(0, 1fr) auto; padding: var(--space-lg); } }
.event__date { display: grid; place-items: center; align-content: center; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); font-family: var(--font-display); line-height: 1; }
.event__date b { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }
.event__date span { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted); margin-top: var(--space-2xs); }
.event__body { display: grid; gap: var(--space-2xs); min-width: 0; }
.event__title { font-size: var(--text-md); text-transform: uppercase; letter-spacing: -0.01em; }
.event__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.event__meta b { color: var(--color-accent-2); font-weight: 600; }
.event__prize { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.event__prize .price__amt { font-size: var(--text-lg); color: var(--color-gold); }
.event__cta { grid-column: 1 / -1; display: flex; gap: var(--space-sm); flex-wrap: wrap; }
@media (min-width: 48rem) { .event__cta { grid-column: auto; } }
.event--live { border-color: var(--color-accent-3); }

   14. Gallery — mosaic + lightbox
   ================================================================== */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9rem; grid-auto-flow: dense; gap: var(--space-xs); }
@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 11rem; gap: var(--space-sm); } }
@media (min-width: 72rem) { .gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 12rem; } }
.gallery__item { position: relative; overflow: hidden; border-radius: var(--radius-md); border: 0; padding: 0; background: var(--color-paper-3); cursor: zoom-in; min-width: 0; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .gallery__item:hover img { transform: scale(1.04); } }
.gallery__item::after { content: attr(data-caption); position: absolute; left: var(--space-sm); bottom: var(--space-sm); padding: 0.2rem 0.55rem; background: var(--alpha-glass-strong); border-radius: var(--radius-sm); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-2); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
@media (hover: hover) { .gallery__item:hover::after { opacity: 1; } }
.gallery__item:focus-visible::after { opacity: 1; }
@media (pointer: coarse) { .gallery__item::after { opacity: 1; } }
.gallery__item.g-wide { grid-column: span 2; }
.gallery__item.g-tall { grid-row: span 2; }
@media (min-width: 72rem) { .gallery__item.g-big { grid-column: span 2; grid-row: span 2; } }

.lightbox { position: fixed; inset: 0; margin: auto; width: min(96vw, 80rem); height: fit-content; max-height: 94svh; padding: 0; border: 0; background: transparent; color: var(--color-ink); overflow: visible; }
.lightbox::backdrop { background: var(--alpha-scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lightbox[open] { display: grid; animation: lb-in var(--dur-long) var(--ease-out); }
@keyframes lb-in { from { opacity: 0; transform: scale(0.97); } }
.lightbox__fig { position: relative; display: grid; gap: var(--space-sm); }
.lightbox__fig img { width: 100%; max-height: 82svh; object-fit: contain; border-radius: var(--radius-md); background: var(--color-paper); }
.lightbox__cap { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-2); }
.lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--alpha-hairline); background: var(--alpha-glass-strong); color: var(--color-ink); cursor: pointer; }
.lightbox__btn--prev { left: var(--space-sm); }
.lightbox__btn--next { right: var(--space-sm); }
.lightbox__close { position: absolute; top: var(--space-sm); right: var(--space-sm); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--alpha-hairline); background: var(--alpha-glass-strong); color: var(--color-ink); cursor: pointer; }
@media (hover: hover) { .lightbox__btn:hover, .lightbox__close:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); } }

/* ==================================================================
   18. Location — map + hours + directions
   ================================================================== */
.location { display: grid; gap: var(--space-lg); }
@media (min-width: 64rem) { .location { grid-template-columns: 1.3fr 1fr; gap: var(--space-xl); align-items: stretch; } }
.map { position: relative; min-height: 22rem; overflow: hidden; border-radius: var(--radius-md); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-3); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(0.92) hue-rotate(200deg) saturate(0.6) brightness(0.9) contrast(1.05); }
.map__fallback { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.map__fallback .btn { margin-top: var(--space-sm); }
.map:has(iframe.is-loaded) .map__fallback { display: none; }
.hours { display: grid; gap: var(--space-lg); padding: var(--space-lg); }
.hours__addr { display: grid; gap: var(--space-2xs); font-style: normal; }
.hours__addr b { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-md); letter-spacing: -0.01em; }
.hours__addr span { color: var(--color-ink-2); }
.hours table { font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: var(--space-xs) 0; border-block-start: var(--rule-hair) solid var(--color-rule-2); text-align: left; font-size: var(--text-sm); }
.hours th { font-weight: 500; color: var(--color-muted); }
.hours td { font-family: var(--font-display); font-weight: 500; text-align: right; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--color-accent-2); }
.hours__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ==================================================================
   19. Forms — contact + booking (inputs match button height, no shift)
   ================================================================== */
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field label { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-2); }
.field label .req { color: var(--color-accent-3); }
.input {
  width: 100%; min-height: var(--control-h); padding: 0 var(--space-md);
  background: var(--color-paper); color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  outline: 2px solid transparent; outline-offset: 1px;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.input::placeholder { color: var(--color-neutral); }
@media (hover: hover) { .input:hover { background: var(--color-paper-2); } }
.input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); border-radius: var(--radius-sm); }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.input[disabled] { opacity: 0.55; cursor: not-allowed; }
textarea.input { min-height: 7rem; padding-block: var(--space-sm); resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; padding-inline-end: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--color-accent-2) 50%), linear-gradient(135deg, var(--color-accent-2) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
select.input option { background: var(--color-paper-2); color: var(--color-ink); }
input[type="date"].input, input[type="time"].input { color-scheme: dark; }
.field__help { min-height: 1lh; font-size: var(--text-xs); color: var(--color-muted); }
.field__help[data-error] { color: var(--color-error); }
.form-row { display: grid; gap: var(--space-md); }
@media (min-width: 40rem) { .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form-status { min-height: 1lh; font-size: var(--text-sm); }
.form-status[data-tone="error"] { color: var(--color-error); }
.form-status[data-tone="success"] { color: var(--color-success); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Contact */
.contact { display: grid; gap: var(--space-xl); }
@media (min-width: 64rem) { .contact { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-2xl); align-items: start; } }
.contact__ways { display: grid; gap: var(--space-sm); }
.way { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-md) var(--space-lg); text-decoration: none; color: var(--color-ink); }
.way .icon--lg { color: var(--color-accent-2); }
.way b { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-sm); letter-spacing: 0.06em; }
.way span { font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.way .icon--sm { color: var(--color-neutral); }
.contact__form { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.socials { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.social { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .social:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); } }

/* Booking */

/* ==================================================================
   20. CTA band + Footer (Ft5 statement) + sticky mobile bar (C4)
   ================================================================== */
.cta-band { position: relative; overflow: hidden; padding-block: var(--space-3xl); border-block: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, var(--alpha-accent-soft)), radial-gradient(30rem circle at 90% 50%, var(--alpha-cyan-soft), transparent 60%); pointer-events: none; }
.cta-band > .container { position: relative; display: grid; gap: var(--space-lg); }
@media (min-width: 60rem) { .cta-band > .container { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.cta-band__title { font-size: var(--text-display-s); text-transform: uppercase; letter-spacing: -0.02em; max-width: 16ch; }
.cta-band__title em { font-style: normal; color: var(--color-accent-2); }
.cta-band__txt { color: var(--color-muted); margin-block-start: var(--space-sm); max-width: 44ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.foot-stmt { padding: var(--space-3xl) 0 calc(var(--space-xl) + 4.5rem); display: grid; gap: var(--space-xl); }
@media (min-width: 64rem) { .foot-stmt { padding-block-end: var(--space-xl); } }
.foot-stmt__line { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.0; letter-spacing: -0.03em; text-transform: uppercase; max-width: 28ch; font-weight: 700; }
.foot-stmt__line em { font-style: normal; color: var(--color-accent); }
.foot-stmt__grid { display: grid; gap: var(--space-lg); padding-block-start: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule-2); }
@media (min-width: 48rem) { .foot-stmt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .foot-stmt__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-stmt__brand { display: grid; gap: var(--space-sm); align-content: start; color: var(--color-muted); font-size: var(--text-sm); max-width: 32ch; }
.foot-col { display: grid; gap: var(--space-xs); align-content: start; font-size: var(--text-sm); color: var(--color-ink-2); }
.foot-col h3 { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted); margin-block-end: var(--space-2xs); }
.foot-col a { text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .foot-col a:hover { color: var(--color-accent-2); } }
.foot-col .tnum { display: flex; justify-content: space-between; gap: var(--space-md); }
.foot-stmt__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-lg); padding-block-start: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule-2); color: var(--color-neutral); font-size: var(--text-xs); }
.foot-stmt__meta a { color: var(--color-muted); text-decoration: none; }
.foot-stmt__meta a:hover { color: var(--color-ink); }

.cta-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-sm) var(--page-gutter) max(var(--space-sm), env(safe-area-inset-bottom));
  background: var(--alpha-glass-strong); border-block-start: var(--rule-hair) solid var(--alpha-hairline);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  transform: translateY(110%); transition: transform var(--dur-long) var(--ease-out);
}
.cta-sticky.is-visible { transform: none; }
.cta-sticky__txt { display: grid; font-size: var(--text-xs); color: var(--color-muted); min-width: 0; }
.cta-sticky__txt b { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta-sticky .btn { flex: none; }
@media (min-width: 64rem) { .cta-sticky { display: none; } }

/* Toast (errors only) */
.toast { position: fixed; right: var(--space-md); bottom: calc(var(--space-md) + 4.5rem); z-index: var(--z-toast); max-width: min(92vw, 24rem); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper-4); border: var(--rule-hair) solid var(--color-error); color: var(--color-ink); font-size: var(--text-sm); box-shadow: 0 18px 40px -18px var(--alpha-shadow); transform: translateY(20px); opacity: 0; transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-long) var(--ease-out); pointer-events: none; }
.toast.is-visible { transform: none; opacity: 1; pointer-events: auto; }
@media (min-width: 64rem) { .toast { bottom: var(--space-md); } }

/* ==================================================================

/* ==================================================================
   30. Anime layer — kanji tags, screentone, speed lines, petals, sun
   ================================================================== */
.jp-tag { font-family: var(--font-jp); font-size: var(--text-xs); letter-spacing: 0.42em; color: var(--color-accent-3); margin-block-end: var(--space-xs); opacity: 0.9; }
.section__head .jp-tag, .why__copy .jp-tag, .about__copy .jp-tag { margin-block-end: calc(-1 * var(--space-2xs)); }
.section--tone::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.35;
  background-image: radial-gradient(var(--alpha-hairline) 0.8px, transparent 0.9px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(115deg, transparent 45%, var(--color-ink)); mask-image: linear-gradient(115deg, transparent 45%, var(--color-ink));
}
.section--tone > .container { position: relative; z-index: var(--z-base); }
.petal { position: absolute; width: 14px; height: 14px; z-index: 3; pointer-events: none; color: var(--color-accent-3); opacity: 0.85; fill: currentColor; stroke: none; animation: petal 9s var(--ease-in-out) infinite alternate; }
.petal--2 { animation-duration: 12s; animation-delay: -4s; }
.petal--3 { animation-duration: 10s; animation-delay: -7s; color: var(--color-accent-2); }
@keyframes petal { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-12px, 22px, 0) rotate(140deg); } }
.hero__sun { position: absolute; right: -8vw; top: 8%; width: 40vw; max-width: 34rem; aspect-ratio: 1; border-radius: 50%; z-index: -4; pointer-events: none;
  background: radial-gradient(circle, var(--alpha-magenta-soft), transparent 62%); opacity: 0.9; }
.hero__sun::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: var(--rule-hair) solid var(--alpha-hairline); }
.live-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent-2); animation: ping 2.2s var(--ease-out) infinite; margin-inline-end: 0.25rem; vertical-align: middle; }
.cta-band__lines { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(-28deg, transparent 0 34px, var(--alpha-hairline-2) 34px 35px);
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, var(--color-ink)); mask-image: linear-gradient(90deg, transparent 35%, var(--color-ink)); }
.cta-band .jp-tag { margin-block-end: var(--space-xs); }

/* ==================================================================
   31. Inner page hero — compact, rising-sun ring
   ================================================================== */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(6rem, 12vh, 9rem) clamp(3rem, 7vh, 5rem); background: var(--color-paper); }
.page-hero--compact { padding-block: clamp(4.5rem, 9vh, 6rem) clamp(2rem, 4vh, 3rem); }
.page-hero__ring { position: absolute; right: -10rem; top: -8rem; width: 34rem; height: 34rem; border-radius: 50%; z-index: -1; pointer-events: none;
  border: var(--rule-hair) solid var(--alpha-hairline); background: radial-gradient(circle at 50% 50%, var(--alpha-accent-soft), transparent 60%); }
.page-hero__ring::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: var(--rule-thick) solid var(--alpha-accent-glow); opacity: 0.5; }
.page-hero__ring::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--alpha-magenta-soft); filter: blur(12px); }
.page-hero__img { position: absolute; inset: 0; z-index: -2; }
.page-hero__img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; filter: saturate(0.8); }
.page-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--color-paper) 15%, transparent 70%), linear-gradient(180deg, var(--alpha-scrim), transparent 30%, var(--color-paper) 100%); }
.page-hero__title { font-size: var(--text-display-s); line-height: var(--leading-tight); text-transform: uppercase; letter-spacing: -0.02em; max-width: 16ch; }
.page-hero__lede { margin-block-start: var(--space-md); color: var(--color-ink-2); font-size: var(--text-md); max-width: 52ch; }
.page-hero .hero__actions { margin-block-start: var(--space-lg); }
.page-hero--book .page-hero__ring { background: radial-gradient(circle, var(--alpha-cyan-soft), transparent 60%); }

/* ==================================================================
   32. Home — live tiers, why, rate tiles, strip
   ================================================================== */
.tiers-live { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .tiers-live { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier-live { display: grid; gap: var(--space-xs); padding: var(--space-lg); text-decoration: none; color: var(--color-ink); }
.tier-live--gold { border-color: oklch(70% 0.12 85 / 0.35); }
.tier-live--platinum { border-color: var(--color-accent-deep); }
.tier-live--ps5 { border-color: var(--color-accent-2-deep); }
.tier-live__top { display: flex; justify-content: space-between; align-items: center; }
.tier-live__hz { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-accent-2); }
.tier-live__count { font-family: var(--font-display); line-height: 1; margin-block: var(--space-xs); }
.tier-live__count b { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.03em; }
.tier-live__count span { color: var(--color-muted); font-size: var(--text-sm); }
.tier-live__spec { font-size: var(--text-sm); color: var(--color-muted); }
.tier-live__price { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; }
.tier-live__price span { font-size: var(--text-xs); color: var(--color-muted); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.tier-live__cta { display: inline-flex; align-items: center; gap: var(--space-xs); margin-block-start: var(--space-xs); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent-2); }

.why { display: grid; gap: var(--space-2xl); }
@media (min-width: 64rem) { .why { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: var(--space-3xl); } }
.why__copy { display: grid; gap: var(--space-lg); }
.why__list { display: grid; gap: var(--space-sm); }
.why__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.why__list .icon { color: var(--color-accent-2); margin-top: 0.2rem; }
.why__list b { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-sm); letter-spacing: 0.04em; }
.why__list span { font-size: var(--text-sm); color: var(--color-muted); }
.why__art { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: var(--rule-hair) solid var(--color-rule-2); aspect-ratio: 4 / 3; }
.why__art img { width: 100%; height: 100%; object-fit: cover; }
.why__kanji { position: absolute; right: var(--space-lg); top: var(--space-lg); writing-mode: vertical-rl; font-family: var(--font-jp); font-size: var(--text-2xl); font-weight: 700; letter-spacing: 0.3em; color: var(--color-ink); text-shadow: 0 2px 16px var(--alpha-shadow); padding: var(--space-sm) var(--space-xs); background: var(--alpha-glass-strong); border: var(--rule-hair) solid var(--alpha-hairline); border-radius: var(--radius-sm); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.rate-tiles { display: grid; gap: var(--space-md); }
@media (min-width: 60rem) { .rate-tiles { grid-template-columns: 1fr 1fr 0.9fr; } }
.rate-tile { display: grid; gap: var(--space-md); padding: var(--space-lg); align-content: start; }
.rate-tile--platinum { border-color: var(--color-accent-deep); }
.rate-tile--ps5 { border-color: var(--color-accent-2-deep); }
.rate-tile__name { font-size: var(--text-md); text-transform: uppercase; }
.rate-tile__list { display: grid; }
.rate-tile__list div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-block-start: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); }
.rate-tile__list dt { color: var(--color-muted); }
.rate-tile__list dd { font-family: var(--font-display); font-weight: 700; }
.rate-tile__list small { font-weight: 400; color: var(--color-muted); font-size: var(--text-xs); }
.rate-tile .btn { justify-self: start; margin-block-start: auto; }

.strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
@media (min-width: 48rem) { .strip { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.strip__item { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; border: var(--rule-hair) solid var(--color-rule-2); text-decoration: none; }
.strip__item:first-child { grid-column: span 2; aspect-ratio: auto; }
.strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .strip__item:hover img { transform: scale(1.04); } }
.strip__item span { position: absolute; left: var(--space-sm); bottom: var(--space-sm); padding: 0.2rem 0.55rem; background: var(--alpha-glass-strong); border-radius: var(--radius-sm); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-2); }
.rigs--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .rigs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rig__blurb { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ==================================================================
   33. Gaming — seat rows
   ================================================================== */
.legend { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.seat-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-neutral); }
.seat-dot--free { background: var(--color-success); box-shadow: 0 0 8px var(--color-success); }
.seat-dot--busy { background: var(--color-accent-3); }
.seat-dot--sel { background: var(--color-accent-2); box-shadow: 0 0 8px var(--color-accent-2); }
.row-block { padding-block: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.row-block__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-block-end: var(--space-md); }
.row-block__head h3 { font-size: var(--text-md); text-transform: uppercase; }
.row-block__gpu { font-size: var(--text-sm); color: var(--color-muted); }
.seat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-sm); }
.seat-card__link { display: grid; gap: var(--space-2xs); padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule-2); text-decoration: none; color: var(--color-ink); transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .seat-card__link:hover { border-color: var(--color-accent-2-deep); transform: translateY(-2px); } }
.seat-card__code { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; }
.seat-card__spec { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.4; }
.seat-card__state { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-2); margin-block-start: var(--space-2xs); }
.seat-card.is-busy .seat-card__link { opacity: 0.7; }

/* ==================================================================
   34. Pricing — poster board, how, rules
   ================================================================== */
.price-board { display: grid; gap: var(--space-md); }
@media (min-width: 64rem) { .price-board { grid-template-columns: 1fr 1fr 0.85fr; align-items: start; } }
.price-col { display: grid; gap: var(--space-md); padding: var(--space-lg); position: relative; overflow: hidden; }
.price-col--gold { border-color: oklch(70% 0.12 85 / 0.4); }
.price-col--platinum { border-color: var(--color-accent-deep); background: var(--color-paper-4); }
.price-col--ps5 { border-color: var(--color-accent-2-deep); }
.price-col__head { display: grid; gap: var(--space-2xs); padding-block-end: var(--space-sm); border-block-end: var(--rule-thick) solid var(--color-accent); }
.price-col--gold .price-col__head { border-color: oklch(75% 0.14 85); }
.price-col--ps5 .price-col__head { border-color: var(--color-accent-2); }
.price-col__name { font-size: var(--text-xl); text-transform: uppercase; letter-spacing: -0.02em; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.price-col__name span { font-size: var(--text-sm); color: var(--color-accent-2); letter-spacing: 0.06em; }
.price-col__sub { color: var(--color-muted); font-size: var(--text-sm); }
.price-col__group { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted); font-weight: 700; margin-block-start: var(--space-xs); }
.price-col__list { display: grid; }
.price-col__list div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-xs); border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.price-col__list dt { color: var(--color-ink-2); font-size: var(--text-sm); }
.price-col__list dt small { display: block; color: var(--color-neutral); font-size: var(--text-xs); }
.price-col__list dd { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); white-space: nowrap; }
.price-col__list dd small { font-weight: 400; color: var(--color-muted); font-size: var(--text-xs); }
.price-col__list .is-hot dd { color: var(--color-accent-2); }
.price-col__art { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3 / 2; border: var(--rule-hair) solid var(--color-rule-2); }
.price-col__art img { width: 100%; height: 100%; object-fit: cover; }
.price-col .btn { margin-block-start: auto; }
.how { display: grid; gap: var(--space-md); }
@media (min-width: 48rem) { .how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .how { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.how__item { display: grid; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule-2); align-content: start; }
.how__item .icon--lg { color: var(--color-accent-2); }
.how__item h3 { font-size: var(--text-md); text-transform: uppercase; }
.how__item p { font-size: var(--text-sm); color: var(--color-ink-2); }
.rules { display: grid; gap: var(--space-lg); }
@media (min-width: 60rem) { .rules { grid-template-columns: 1fr 1.4fr; align-items: start; } }
.rules__list { display: grid; }
.rules__list li { display: flex; gap: var(--space-sm); align-items: flex-start; padding-block: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); }
.rules__list .icon { color: var(--color-accent-3); flex: none; margin-top: 0.2rem; }

/* ==================================================================
   35. Tournaments
   ================================================================== */
.tour-list { display: grid; gap: var(--space-md); }
.tour { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg); }
@media (min-width: 60rem) { .tour { grid-template-columns: 6rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-xl); } }
.tour--live { border-color: var(--color-accent-3); }
.tour__date { display: grid; place-items: center; align-content: center; gap: 0; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); font-family: var(--font-display); line-height: 1; text-align: center; }
.tour__date b { font-size: var(--text-2xl); letter-spacing: -0.02em; }
.tour__date span { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent-2); margin-top: var(--space-2xs); }
.tour__date small { font-size: 0.62rem; color: var(--color-muted); margin-top: var(--space-2xs); letter-spacing: 0.06em; }
.tour__body { display: grid; gap: var(--space-xs); min-width: 0; }
.tour__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.tour__title { font-size: var(--text-lg); text-transform: uppercase; letter-spacing: -0.01em; }
.tour__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.tour__desc { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 60ch; }
.tour__facts { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin-block-start: var(--space-xs); }
.tour__facts div { display: grid; }
.tour__facts dt { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted); }
.tour__facts dd { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); }
.gold { color: var(--color-gold); }
.tour__cta { grid-column: 1 / -1; }
@media (min-width: 60rem) { .tour__cta { grid-column: auto; } }
.past-list { display: grid; }
.past-list li { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto auto; gap: var(--space-md); align-items: center; padding-block: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-muted); }
.past-list b { color: var(--color-ink); font-family: var(--font-display); text-transform: uppercase; }
@media (max-width: 40rem) { .past-list li { grid-template-columns: minmax(0, 1fr) auto; } .past-list li > :first-child { grid-column: 1 / -1; } }
.empty { padding: var(--space-xl); border: var(--rule-hair) dashed var(--color-rule); border-radius: var(--radius-md); color: var(--color-muted); text-align: center; }

/* Modal (register) */
.modal { position: fixed; inset: 0; margin: auto; width: min(94vw, 40rem); height: fit-content; max-height: 92svh; overflow: auto; padding: var(--space-xl); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-3); color: var(--color-ink); }
.modal::backdrop { background: var(--alpha-scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal[open] { animation: lb-in var(--dur-long) var(--ease-out); }
.modal__form { display: grid; gap: var(--space-md); }
.modal__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.modal__title { font-size: var(--text-lg); text-transform: uppercase; }
.modal__sub { color: var(--color-accent-2); font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; }
.modal__done { display: grid; gap: var(--space-md); justify-items: start; }
.modal__done .icon--lg { color: var(--color-success); width: 2.5rem; height: 2.5rem; }
.opt { color: var(--color-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.req { color: var(--color-accent-3); }

/* ==================================================================
   36. Booking wizard
   ================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); margin-block-end: var(--space-lg); counter-reset: step; }
.steps__item { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-xs); border-block-end: var(--rule-thick) solid var(--color-rule-2); color: var(--color-muted); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; cursor: default; }
.steps__num { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xs); }
.steps__item.is-active { color: var(--color-ink); border-color: var(--color-accent-2); }
.steps__item.is-active .steps__num { background: var(--color-accent-2); color: var(--color-accent-ink); border-color: var(--color-accent-2); }
.steps__item.is-done { color: var(--color-ink-2); border-color: var(--color-accent-deep); cursor: pointer; }
.steps__item.is-done .steps__num { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
@media (max-width: 40rem) { .steps__label { display: none; } .steps__item.is-active .steps__label { display: inline; } }

.booking { display: grid; gap: var(--space-lg); }
@media (min-width: 64rem) { .booking { grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr); gap: var(--space-xl); align-items: start; } }
.booking__main { min-width: 0; }
.wiz { display: grid; gap: var(--space-lg); padding: var(--space-lg); }
@media (min-width: 48rem) { .wiz { padding: var(--space-xl); } }
.wiz__title { font-size: var(--text-lg); text-transform: uppercase; }
.wiz__head { display: grid; gap: var(--space-2xs); }
.wiz__sub { color: var(--color-muted); font-size: var(--text-sm); }
.wiz__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding-block-start: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.wiz__foot .btn:only-child { margin-inline-start: auto; }
.field__label { display: block; font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-2); }

.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.seg--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; }
.seg__opt span { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h); padding: 0 var(--space-sm); border-radius: var(--radius-sm); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; cursor: pointer; text-align: center; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.seg--4 .seg__opt span { flex-direction: column; gap: 0; font-size: var(--text-xs); line-height: 1.2; }
.seg--4 .seg__opt b { font-size: var(--text-md); }
.seg__opt span .opt { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; }
.seg__opt.is-off span { opacity: 0.45; cursor: not-allowed; }
.paybox { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper); border: var(--rule-hair) solid var(--color-accent-2-deep); }
.paybox__title { font-size: var(--text-md); text-transform: uppercase; } .paybox__title b { color: var(--color-accent-2); }
.paybox__form { display: grid; gap: var(--space-sm); padding-block-start: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.seg__opt input:checked + span { border-color: var(--color-accent-2); background: var(--alpha-cyan-soft); color: var(--color-ink); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.days { display: flex; gap: var(--space-xs); overflow-x: auto; padding-block: var(--space-2xs); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.day { flex: none; display: grid; gap: 0; justify-items: center; min-width: 4.25rem; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink-2); cursor: pointer; scroll-snap-align: start; line-height: 1.2; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.day__dow { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.day__num { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-ink); }
.day__mon { font-size: var(--text-xs); color: var(--color-muted); }
.day[aria-selected="true"] { border-color: var(--color-accent-2); background: var(--alpha-cyan-soft); }
.input--date { margin-block-start: var(--space-xs); max-width: 16rem; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: var(--space-2xs); max-height: 13rem; overflow-y: auto; padding: var(--space-2xs); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-sm); background: var(--color-paper); scrollbar-width: thin; }
.slot { min-height: 2.5rem; padding: 0 var(--space-xs); border-radius: var(--radius-sm); border: var(--rule-hair) solid transparent; background: transparent; color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-sm); font-variant-numeric: tabular-nums; cursor: pointer; position: relative; }
.slot::before { content: ""; position: absolute; left: 0.5rem; top: 0.35rem; width: 0.3rem; height: 0.3rem; border-radius: 50%; }
.slot--happy::before { background: var(--color-gold); }
.slot--night::before { background: var(--color-accent); }
@media (hover: hover) { .slot:not([disabled]):hover { border-color: var(--color-rule); background: var(--color-paper-3); } }
.slot[aria-selected="true"] { background: var(--color-accent-2); color: var(--color-accent-ink); border-color: var(--color-accent-2); font-weight: 700; }
.slot[disabled] { opacity: 0.3; cursor: not-allowed; }
.slots__legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-block-start: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.slots__legend span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.slot-key { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.slot-key--happy { background: var(--color-gold); } .slot-key--night { background: var(--color-accent); }

.dur { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.dur__quick { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip.is-on { border-color: var(--color-accent-2); background: var(--alpha-cyan-soft); color: var(--color-ink); }
button.chip { cursor: pointer; font-family: var(--font-display); }
.dur__step { display: inline-flex; align-items: center; gap: var(--space-xs); margin-inline-start: auto; }
.dur__btn { display: inline-grid; place-items: center; width: var(--control-h); height: var(--control-h); border-radius: var(--radius-sm); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); cursor: pointer; }
@media (hover: hover) { .dur__btn:hover { border-color: var(--color-accent-2-deep); } }
.dur__val { min-width: 4.5rem; text-align: center; font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; }

.tier-filter { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.floor { position: relative; display: grid; gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2);
  background-image: linear-gradient(var(--alpha-hairline-2) 1px, transparent 1px), linear-gradient(90deg, var(--alpha-hairline-2) 1px, transparent 1px); background-size: 24px 24px; }
.floor__screen { display: grid; place-items: center; padding: var(--space-xs); border-radius: var(--radius-sm); border: var(--rule-hair) dashed var(--color-rule); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-neutral); }
.floor__row { display: grid; gap: var(--space-sm); transition: opacity var(--dur-short) var(--ease-out); }
@media (min-width: 48rem) { .floor__row { grid-template-columns: 9rem minmax(0, 1fr); align-items: center; } }
.floor__row.is-dim { opacity: 0.35; }
.floor__label { display: grid; gap: 0; font-size: var(--text-xs); color: var(--color-muted); }
.floor__label b { font-family: var(--font-display); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink); }
.floor__seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: var(--space-xs); }
.seat { position: relative; display: grid; gap: 0; justify-items: start; padding: var(--space-xs) var(--space-sm); min-height: 4.4rem; border-radius: var(--radius-sm); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-3); color: var(--color-ink); cursor: pointer; text-align: left; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform 100ms var(--ease-out); }
.seat::before { content: ""; position: absolute; top: 0.5rem; right: 0.5rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 6px var(--color-success); }
.seat--gold { border-inline-start: var(--rule-thick) solid oklch(75% 0.14 85 / 0.7); }
.seat--platinum { border-inline-start: var(--rule-thick) solid var(--color-accent); }
.seat--ps5 { border-inline-start: var(--rule-thick) solid var(--color-accent-2); }
.seat__code { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.04em; }
.seat__spec { font-size: 0.68rem; color: var(--color-muted); line-height: 1.25; }
.seat__state { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral); margin-block-start: auto; }
@media (hover: hover) and (pointer: fine) { .seat:not([disabled]):hover { border-color: var(--color-accent-2-deep); transform: translateY(-1px); } }
.seat.is-sel { border-color: var(--color-accent-2); background: var(--alpha-cyan-soft); box-shadow: 0 0 0 1px var(--color-accent-2) inset; }
.seat.is-sel::before { background: var(--color-accent-2); box-shadow: 0 0 8px var(--color-accent-2); }
.seat.is-busy { opacity: 0.45; cursor: not-allowed; background: var(--color-paper-2); }
.seat.is-busy::before { background: var(--color-accent-3); box-shadow: none; }
.seat:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.floor__loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--alpha-scrim); border-radius: inherit; font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-2); z-index: var(--z-raised); }
.floor__loading[hidden] { display: none; }
.spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--color-accent-2); border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; margin-inline-end: var(--space-xs); vertical-align: -0.15rem; }
.terms { display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); padding-block: var(--space-sm); }
.terms li { display: flex; gap: var(--space-xs); align-items: flex-start; }
.terms .icon { color: var(--color-accent-2); margin-top: 0.2rem; }
.terms a { color: var(--color-accent-2); }
#booking-form { display: grid; gap: var(--space-md); }

.estimate { position: sticky; top: 5.5rem; display: grid; gap: var(--space-md); padding: var(--space-lg); }
.estimate__title { font-size: var(--text-md); text-transform: uppercase; }
.estimate dl { display: grid; gap: 0; font-size: var(--text-sm); }
.estimate dl div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.estimate dt { color: var(--color-muted); flex: none; }
.estimate dd { font-family: var(--font-display); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.estimate__lines { display: grid; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
.estimate__lines li { display: flex; justify-content: space-between; gap: var(--space-md); }
.estimate__lines:empty { display: none; }
.estimate__total { display: flex; justify-content: space-between; align-items: end; gap: var(--space-md); padding-block-start: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule); }
.estimate__total .price__amt { font-size: var(--text-2xl); color: var(--color-accent-2); }
.estimate__note { font-size: var(--text-xs); color: var(--color-neutral); }
@media (max-width: 64rem) { .estimate { position: static; } }

.wiz--done { text-align: left; }
.done__mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--alpha-cyan-soft); border: var(--rule-hair) solid var(--color-accent-2); color: var(--color-accent-2); }
.done__ref { font-size: var(--text-sm); color: var(--color-muted); }
.done__ref b { display: inline-block; margin-inline-start: var(--space-xs); padding: 0.2rem 0.6rem; border-radius: var(--radius-sm); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.1em; color: var(--color-ink); }
.done__summary { display: grid; font-size: var(--text-sm); }
.done__summary div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.done__summary dt { color: var(--color-muted); } .done__summary dd { font-family: var(--font-display); font-weight: 500; text-align: right; }

/* My booking */
.lookup { display: grid; gap: var(--space-lg); max-width: 52rem; }
.lookup__form { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.lookup__result { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.lookup__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.lookup__top b { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.1em; }

/* About */
.about { display: grid; gap: var(--space-2xl); }
@media (min-width: 64rem) { .about { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-3xl); align-items: center; } }
.about__copy { display: grid; gap: var(--space-lg); }
.about__art { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.about__art figure { overflow: hidden; border-radius: var(--radius-md); border: var(--rule-hair) solid var(--color-rule-2); }
.about__art img { width: 100%; height: 100%; object-fit: cover; }
.about__art .a1 { aspect-ratio: 3 / 4; } .about__art .a2 { aspect-ratio: 3 / 4; margin-block-start: var(--space-xl); } .about__art .a3 { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.about__kanji { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-family: var(--font-jp); font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 700; color: var(--color-ink); text-shadow: 0 4px 30px var(--alpha-shadow); letter-spacing: 0.1em; pointer-events: none; }
.team { display: grid; gap: var(--space-sm); }
@media (min-width: 60rem) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hours__list { display: grid; }
.hours__list div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-block-start: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); }
.hours__list dt { color: var(--color-muted); } .hours__list dd { font-family: var(--font-display); font-weight: 500; text-align: right; }
.hours .status { width: max-content; }
/* ==================================================================
   21. Reduced motion — collapse everything spatial
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; scroll-behavior: auto !important; }
  html.js .reveal { opacity: 1; transform: none; }
  .hero__media img { transform: none; }
  .hero__floor::before, .hero__beam, .status__dot, .petal, .ticker__track { animation: none !important; }
  .hero__particles { display: none; }
  .ticker__track { transform: none; }
  .card--lift:hover, .btn:hover { transform: none; }
}