/* ════════════════════════════════════════════════════════════════════════
   MATERIALS — the de-AI core. Distinct surface recipes, full-width layout.
   Liquid Glass (real refraction) is reserved for floating chrome ONLY (nav,
   overlay). Solid lit panels carry content. Glow is reserved for active objects.
   Everything is driven by --pk-* tokens so both themes (Vault / Crystal) work.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Layout rhythm ── */
:root {
  --pk-gutter: clamp(16px, 4vw, 56px);
  --pk-nav-h: 64px;
}

/* ════════════════════════════════════════════════════════════════════════
   MATERIAL A — REAL LIQUID GLASS (floating chrome only: nav, overlay).
   Three stacked truths of Apple's material:
     1. refraction  — the backdrop bends through it (SVG #pk-liquid-glass)
     2. adaptive blur+tint — it samples + warms what's behind
     3. specular rim — a bright lit edge that tracks the light (top-left)
   This is NOT uniform frosted blur on every panel — that's the AI tell we kill.
   ════════════════════════════════════════════════════════════════════════ */
.mat-liquid-glass {
  position: relative;
  isolation: isolate;
  background: var(--pk-mat-glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(170%) brightness(1.04);
  backdrop-filter: blur(14px) saturate(170%) brightness(1.04);
  box-shadow:
    /* specular rim: bright top-left → dark bottom Fresnel */
    inset 0 1px 0 var(--pk-mat-glass-rim-top),
    inset 1px 0 0 color-mix(in srgb, var(--pk-mat-glass-rim-top) 60%, transparent),
    inset 0 -1px 0 var(--pk-mat-glass-rim-bottom),
    0 18px 50px -18px rgba(0,0,0,.5);
  border: none;
}
/* The refraction layer: a copy of the backdrop, displaced, peeking at the edges. */
.mat-liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  filter: url(#pk-liquid-glass);
  opacity: .6;
  pointer-events: none;
}
/* A faint moving specular highlight so the glass reads as glass, not a flat fill. */
.mat-liquid-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 12% -10%, color-mix(in srgb, var(--pk-mat-glass-rim-top) 70%, transparent), transparent 40%);
  mix-blend-mode: screen;
  opacity: .5;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mat-liquid-glass { background: color-mix(in srgb, var(--pk-mat-panel-bg) 92%, transparent); }
  .mat-liquid-glass::before { display: none; }
}

/* ── MATERIAL B — Solid Lit Panel (pack cards, sections, steps) ── */
.mat-panel {
  background: var(--pk-mat-panel-bg);
  border-radius: var(--pk-radius-card);
  box-shadow:
    inset 0 1px 0 var(--pk-mat-panel-rimlight),
    0 2px 4px color-mix(in srgb, var(--pk-mat-panel-shadow) 50%, transparent),
    0 18px 44px -16px var(--pk-mat-panel-shadow);
  border: none;
}

/* ── MATERIAL C — Defined-Edge Chip (badges, small labels) ── */
.mat-chip {
  background: var(--pk-mat-chip-bg);
  border: 1px solid var(--pk-mat-chip-edge);
  border-radius: var(--pk-radius-chip);
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════════
   MATERIAL D — THE GROUND (lit parlor backdrop, behind everything).
   Warm sodium-lamp key light + masked grid-dots + bokeh + grain + vignette.
   Cream canvas in light, near-black in dark — never a flat empty void.
   ════════════════════════════════════════════════════════════════════════ */
.pk-ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.pk-ground__wash,
.pk-ground__vignette { position: absolute; inset: 0; }
.pk-ground__wash { background: var(--pk-ground-wash); }
.pk-ground__key { background: var(--pk-ground-key); }
.pk-ground__bokeh {
  position: absolute;
  inset: -10%;
  opacity: var(--pk-ground-bokeh-opacity);
  will-change: transform;
}
.pk-ground__dot { position: absolute; border-radius: 50%; filter: blur(2px); }
.pk-ground__grain {
  background-repeat: repeat;
  background-size: 140px 140px;
  opacity: .03;
  mix-blend-mode: overlay;
}
.pk-ground__vignette { background: var(--pk-ground-vignette); }

@media (prefers-reduced-motion: reduce) {
  .pk-ground__bokeh { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   THE CRAFTED CTA — the loudest, most crafted object on the page. Not a material.
   ════════════════════════════════════════════════════════════════════════ */
.cta-loud {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--pk-accent-alt) 0%, var(--pk-accent) 55%, var(--pk-accent-deep) 100%);
  color: #fff;
  font-family: var(--font-display), sans-serif;
  font-weight: 900;
  letter-spacing: .01em;
  border: none;
  border-radius: var(--pk-radius-button);
  padding: 13px 22px;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 8px 20px -6px color-mix(in srgb, var(--pk-accent) 60%, transparent),
    0 2px 4px rgba(0,0,0,.25);
  transition: transform var(--pk-dur-fast) var(--pk-ease-out-quint),
    box-shadow var(--pk-dur-fast) var(--pk-ease-out-quint);
}
.cta-loud::before { /* top specular sheen */
  content: "";
  position: absolute;
  inset: 1px 1px 50% 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent);
  pointer-events: none;
}
.cta-loud::after { /* slow idle shimmer sweep */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: cta-shimmer 6s ease-in-out infinite;
}
.cta-loud:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 12px 30px -6px color-mix(in srgb, var(--pk-accent) 72%, transparent),
    0 2px 4px rgba(0,0,0,.25);
}
.cta-loud:active { /* WEIGHTED press — compress, drop the bloom, deepen bottom inset */
  transform: translateY(1px) scale(.992);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -3px 0 rgba(0,0,0,.32),
    0 3px 8px -4px color-mix(in srgb, var(--pk-accent) 50%, transparent),
    0 1px 2px rgba(0,0,0,.3);
}
.cta-loud:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pk-accent) 70%, #fff);
  outline-offset: 2px;
}
.cta-loud__price { font-family: var(--font-voice), monospace; font-weight: 500; opacity: .92; }
.cta-loud--quiet {
  padding: 9px 16px;
  font-size: var(--pk-fs-sm);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 4px 12px -4px color-mix(in srgb, var(--pk-accent) 45%, transparent),
    0 1px 3px rgba(0,0,0,.22);
}
.cta-loud--quiet::after { animation-duration: 8s; }
.cta-loud--block { display: flex; width: 100%; white-space: nowrap; }
.cta-loud--block > span { white-space: nowrap; }
@keyframes cta-shimmer {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(220%); }
  100% { transform: translateX(220%); }
}

/* ════════════════════════════════════════════════════════════════════════
   GLASS PILL — the ONE primary CTA across the app.
   SOLID color-filled capsule (Apple/shadcn proportions): full pill radius,
   weight 600, soft neutral drop shadow, subtle hover lift + brightness,
   tactile active scale. No backdrop blur, no neon glow. Theme-aware via
   --pk-* tokens. Color via .glass-pill--{contrast,green,red,violet,gold,neutral}.
   Sizes: --sm ≈32px · default ≈38px · --lg ≈46px tall.
   ════════════════════════════════════════════════════════════════════════ */
.glass-pill {
  /* per-instance knobs the modifiers set */
  --pill-fill: var(--pk-mat-panel-bg);
  --pill-label: var(--pk-text);
  --pill-shadow-tint: rgba(0, 0, 0, .28);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--pill-label);
  background: var(--pill-fill);
  font-family: var(--font-body), sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
  font-size: var(--pk-fs-sm);     /* 14px — default size */
  line-height: 20px;              /* explicit room for the EN→JA .swap */
  border: 0;
  border-radius: var(--pk-radius-pill);   /* 999px — full capsule */
  padding: 8px 18px;              /* default ≈ 38px tall */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .04),
    0 4px 12px -6px var(--pill-shadow-tint);
  transition:
    transform var(--pk-dur-fast) var(--pk-ease-out-quint),
    filter var(--pk-dur-fast) var(--pk-ease-out-quint),
    box-shadow var(--pk-dur-fast) var(--pk-ease-out-quint),
    background var(--pk-dur-fast) var(--pk-ease-out-quint),
    color var(--pk-dur-fast) var(--pk-ease-out-quint);
}
.glass-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .04),
    0 8px 18px -8px var(--pill-shadow-tint);
}
.glass-pill:active {
  transform: translateY(0) scale(.97);
  filter: brightness(.98);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .10),
    0 3px 8px -6px var(--pill-shadow-tint);
}
.glass-pill:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pk-accent) 70%, #fff);
  outline-offset: 2px;
}
.glass-pill:disabled,
.glass-pill[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

/* price keeps the Kode Mono voice; rides the label colour */
.glass-pill__price {
  font-family: var(--font-voice), monospace;
  font-weight: 600;
  opacity: .82;
  color: currentColor;
}

/* ── Color modifiers (solid fills) ──────────────────────────────────────── */
/* CONTRAST — LOGIN. Dark: white fill / ink. Light: ink fill / white (below). */
.glass-pill--contrast {
  --pill-fill: #FFFFFF;
  --pill-label: #15171E;
  --pill-shadow-tint: rgba(0, 0, 0, .30);
}
/* GREEN — Buy / Keep / Make an Offer */
.glass-pill--green {
  --pill-fill: var(--pk-accent);
  --pill-label: #FFFFFF;
  --pill-shadow-tint: color-mix(in srgb, var(--pk-accent-deep) 55%, rgba(0,0,0,.3));
}
/* RED — Sell back */
.glass-pill--red {
  --pill-fill: var(--pk-rarity-elite);
  --pill-label: #FFFFFF;
  --pill-shadow-tint: color-mix(in srgb, #B91C1C 55%, rgba(0,0,0,.3));
}
/* VIOLET — List */
.glass-pill--violet {
  --pill-fill: var(--pk-rarity-rookie);
  --pill-label: #FFFFFF;
  --pill-shadow-tint: color-mix(in srgb, #6D28D9 55%, rgba(0,0,0,.3));
}
/* GOLD — Open Packs / Pull / Pull again (primary play action) */
.glass-pill--gold {
  --pill-fill: var(--pk-coin);
  --pill-label: #2A1C00;
  --pill-shadow-tint: color-mix(in srgb, #B07A00 55%, rgba(0,0,0,.3));
}
/* NEUTRAL — quiet secondary (Browse Packs, View Card, Load more, Flip, Add funds, Redeem) */
.glass-pill--neutral {
  --pill-fill: var(--pk-mat-panel-bg);
  --pill-label: var(--pk-text);
  --pill-shadow-tint: rgba(0, 0, 0, .22);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pk-text) 12%, transparent),
    0 2px 8px -6px rgba(0, 0, 0, .22);
}
.glass-pill--neutral:hover {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pk-text) 18%, transparent),
    0 6px 14px -8px rgba(0, 0, 0, .25);
}

/* ── Theme-specific overrides ───────────────────────────────────────────── */
:root[data-theme="light"] .glass-pill--contrast {
  --pill-fill: #15171E;
  --pill-label: #FFFFFF;
  --pill-shadow-tint: rgba(60, 40, 20, .30);
}
:root[data-theme="dark"] .glass-pill--neutral { --pill-fill: #1E1A17; }
:root[data-theme="light"] .glass-pill--neutral {
  --pill-fill: #FFFDF2;
  --pill-shadow-tint: rgba(60, 40, 20, .20);
}

/* ── Block + size variants (capsule-correct padding) ────────────────────── */
.glass-pill--block { display: flex; width: 100%; white-space: nowrap; }
.glass-pill--block > span { white-space: nowrap; }
/* compact — navbar LOGIN, Flip, View Card → ≈ 32px tall */
.glass-pill--sm { padding: 5px 14px; font-size: 13px; line-height: 20px; }
/* large — hero Open Packs, machine Pull → ≈ 46px tall */
.glass-pill--lg { padding: 11px 26px; font-size: clamp(15px, 1.05vw, 17px); line-height: 22px; }

/* ════════════════════════════════════════════════════════════════════════
   EN→JA HOVER SWAP — shared label mechanic, identical timing to the nav menu.
   Wrap a label in <Swap en ja/>; it crossfades to Japanese when the nearest
   .glass-pill button or the .nav__brand logo is hovered.
   ════════════════════════════════════════════════════════════════════════ */
.swap { position: relative; display: inline-grid; place-items: center; }
.swap__en, .swap__ja {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition: opacity var(--pk-dur-base) var(--pk-ease-out-quint),
    transform var(--pk-dur-base) var(--pk-ease-out-quint);
}
.swap__ja {
  opacity: 0;
  transform: translateY(5px);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  letter-spacing: .08em;
}
.glass-pill:hover .swap__en,
.nav__brand:hover .swap__en,
.footer__link:hover .swap__en { opacity: 0; transform: translateY(-5px); }
.glass-pill:hover .swap__ja,
.nav__brand:hover .swap__ja,
.footer__link:hover .swap__ja { opacity: 1; transform: translateY(0); }
/* In the left-aligned footer column, align EN/JA to the start so the English
   label doesn't get centered inside a wider Japanese box (buttons stay centered). */
.footer__link .swap { justify-items: start; text-align: left; }


/* ════════════════════════════════════════════════════════════════════════
   CONNECT — the original pachinko.fun pill (Work Sans 600, ink #2A2A2A, full).
   ════════════════════════════════════════════════════════════════════════ */
.connect-btn {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2.1px;
  color: #fff;
  background: var(--pk-connect-bg, #2A2A2A);
  border: none;
  border-radius: var(--pk-radius-pill);
  padding: 10px 24px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 2px 8px -2px rgba(0,0,0,.4);
  transition: transform var(--pk-dur-fast) var(--pk-ease-out-quint),
    box-shadow var(--pk-dur-fast) var(--pk-ease-out-quint),
    background var(--pk-dur-fast) var(--pk-ease-out-quint);
}
[data-theme="light"] .connect-btn { --pk-connect-bg: #2A2A2A; }
.connect-btn:hover {
  background: #161616;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px -2px rgba(0,0,0,.5);
}
.connect-btn:active { transform: scale(.97); }
.connect-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pk-accent) 70%, #fff);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   BALANCE PILL — quiet, recessed "wallet holster" (true pill is correct here).
   ════════════════════════════════════════════════════════════════════════ */
.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 7px;
  border-radius: var(--pk-radius-pill);
  background: var(--pk-mat-chip-bg);
  border: 1px solid var(--pk-mat-chip-edge);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
  color: var(--pk-text);
  font-family: var(--font-voice), monospace;
  font-weight: 500;
  font-size: var(--pk-fs-sm);
}
.balance-pill__coin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, #fff 0%, #FFE9A8 22%, var(--pk-coin) 60%, #B07A00 100%);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
}
.balance-pill__num { transition: color var(--pk-dur-base) var(--pk-ease-out-quint); }
.balance-pill--flash .balance-pill__num { color: var(--pk-coin); }
@media (max-width: 880px) { .balance-pill { display: none; } }

/* PROFILE CHIP — replaces the points pill: balance + account avatar (→ Profile). */
.profile-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 4px 5px 4px 12px;
  border-radius: var(--pk-radius-pill);
  background: var(--pk-mat-chip-bg);
  border: 1px solid var(--pk-mat-chip-edge);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.22);
  color: var(--pk-text); text-decoration: none;
  transition: border-color var(--pk-dur-fast) var(--pk-ease-out-quint);
}
.profile-chip:hover { border-color: color-mix(in srgb, var(--pk-accent) 55%, var(--pk-mat-chip-edge)); }
.profile-chip__balance { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-voice), monospace; font-weight: 500; font-size: var(--pk-fs-sm); }
.profile-chip__coin { width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, #fff 0%, #FFE9A8 22%, var(--pk-coin) 60%, #B07A00 100%);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4); }
.profile-chip__avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center; background: var(--pk-mat-panel-bg); border: 1px solid var(--pk-mat-chip-edge); }
.profile-chip__avatar img { width: 28px; height: 28px; object-fit: contain; }
@media (max-width: 880px) { .profile-chip__balance { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
   THEME SWITCH — minimalist Apple-native icon button (NOT a chunky toggle).
   ════════════════════════════════════════════════════════════════════════ */
.theme-switch {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--pk-radius-pill);
  background: transparent;   /* blends into the bar — no container circle */
  border: none;
  box-shadow: none;
  color: var(--pk-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: color var(--pk-dur-fast) var(--pk-ease-out-quint);
}
.theme-switch:hover { color: var(--pk-text); }
.theme-switch:focus-visible { outline: 2px solid color-mix(in srgb, var(--pk-accent) 70%, #fff); outline-offset: 2px; }
.theme-switch__glyphs { position: relative; width: 14px; height: 14px; display: grid; place-items: center; }
.theme-switch__sun, .theme-switch__moon {
  grid-area: 1 / 1;
  transition: opacity var(--pk-dur-base) var(--pk-ease-out-quint), transform var(--pk-dur-base) var(--pk-ease-out-quint);
}
/* dark theme shows the sun (tap → go light); light shows the moon. */
[data-theme="dark"] .theme-switch__moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
[data-theme="dark"] .theme-switch__sun  { opacity: 1; transform: none; }
[data-theme="light"] .theme-switch__sun  { opacity: 0; transform: rotate(40deg) scale(.6); }
[data-theme="light"] .theme-switch__moon { opacity: 1; transform: none; }

/* Whole-page warm cross-fade sweep when the theme flips. */
.pk-theme-sweep {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--pk-accent) 22%, transparent), transparent 70%);
  opacity: 0;
  animation: theme-sweep var(--pk-dur-slow) var(--pk-ease-out-quint);
}
@keyframes theme-sweep { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }

/* ════════════════════════════════════════════════════════════════════════
   TOP NAV — ingrained, full-width, hairline divider. Liquid Glass material.
   ════════════════════════════════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  /* the header strip is transparent; let clicks pass through to content beside
     the floating pill — only .nav__inner (the pill) captures pointer events */
  pointer-events: none;
}
.nav__inner {
  margin: 0 auto;                  /* centers when the pill narrows on scroll */
  pointer-events: auto;            /* re-enable on the bar/pill itself */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--pk-nav-h);
  padding: 0 var(--pk-gutter);
  /* width / maxWidth / lift / blur are animated by Motion; these props ease via
     the class swap. Same 0.55s weighted ease as Motion so they move in lockstep. */
  border: 1px solid transparent;
  border-radius: var(--pk-radius-pill);
  transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* scrolled: a floating glass pill in our material (theme-correct via tokens) */
.nav__inner--pill {
  height: calc(var(--pk-nav-h) - 12px);
  padding: 0 22px;
  background: var(--pk-mat-glass-bg);
  border-color: color-mix(in srgb, var(--pk-text) 12%, transparent);
  box-shadow:
    0 14px 38px -14px var(--pk-mat-panel-shadow),
    inset 0 1px 0 var(--pk-mat-glass-rim-top);
}
/* mobile: keep the bar full-width (no narrow pill that would clip content) */
@media (max-width: 880px) {
  .nav__inner { width: 100% !important; max-width: none !important; }
  .nav__inner--pill { border-radius: 0; padding: 0 var(--pk-gutter); }
}
.nav__brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.nav__mascot-wrap { display: grid; place-items: center; }
.nav__mascot { object-fit: contain; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--pk-accent) 25%, rgba(0,0,0,.4))); }
.nav__wordmark {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--pk-text);
}
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative;
  padding: 8px 14px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pk-text-muted);
  transition: color var(--pk-dur-fast) var(--pk-ease-out-quint);
}
.nav__link:hover { color: var(--pk-text); }
.nav__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* EN→JA hover swap (grid-stacked → width = max(EN,JA), no layout shift) */
.nav-swap { display: grid; place-items: center; }
.nav-swap__en, .nav-swap__ja {
  grid-area: 1 / 1;
  transition: opacity var(--pk-dur-base) var(--pk-ease-out-quint),
    transform var(--pk-dur-base) var(--pk-ease-out-quint);
}
.nav-swap__ja {
  opacity: 0;
  transform: translateY(5px);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  letter-spacing: .08em;
}
.nav__link:hover .nav-swap__en { opacity: 0; transform: translateY(-5px); }
.nav__link:hover .nav-swap__ja { opacity: 1; transform: translateY(0); }
@media (max-width: 880px) { .nav__links { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
   PRIZE TICKER — the original recessed prize-pool marquee under the header.
   ════════════════════════════════════════════════════════════════════════ */
.prize-ticker {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--pk-mat-chip-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--pk-text) 7%, transparent);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--pk-mat-panel-shadow) 40%, transparent);
}
.prize-ticker__rail {
  display: flex;
  width: max-content;
  animation: ticker-scroll 38s linear infinite;
}
.prize-ticker__track { display: inline-flex; align-items: center; gap: 28px; padding: 10px 28px; white-space: nowrap; }
.prize-ticker__label {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--pk-text-muted);
}
.prize-ticker__amount {
  font-size: 18px;
  font-weight: 900;
  color: var(--pk-accent);
}
.prize-ticker__amount:first-of-type { color: var(--pk-coin); }
.prize-ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pk-success); box-shadow: 0 0 8px var(--pk-success); }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }

/* ════════════════════════════════════════════════════════════════════════
   HERO BANNER (ROUND 9, Change 1) — full-width showcase below the header.
   Phygitals energy, our craft: solid + muted headline, glass-pill CTA, a
   fanned PSA-slab + pack + mascot showcase over a soft brand glow/bokeh.
   Edge-to-edge; sits on the lit grid-dot ground; works in BOTH themes.
   ════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  /* No border/edges — the hero blends edge-to-edge into the page ground. */
}
/* The hero has no local glow/bokeh — it shares the page-wide .pk-ground so it
   blends seamlessly into the sections around it (no tinted "panel" region). */

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(40px, 6vw, 84px) var(--pk-gutter);
  min-height: clamp(360px, 46vw, 560px);
}

/* ── Copy column ── */
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 620px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pk-accent);
}
.hero__title {
  margin: 0;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: .98;
  letter-spacing: -.01em;
}
.hero__title-solid { color: var(--pk-text); }
.hero__title-muted { color: var(--pk-text-muted); }
.hero__sub {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--pk-text-muted);
}
.hero__sub-hi {
  color: var(--pk-accent);
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--pk-radius-chip);
  background: color-mix(in srgb, var(--pk-accent) 14%, transparent);
  white-space: nowrap;
}
.hero__cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.hero__proof {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: .04em; color: var(--pk-text-muted);
}
.hero__proof-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pk-success); box-shadow: 0 0 8px var(--pk-success);
}

/* ── Showcase column (PSA slabs + packs + mascot) ── */
.hero__showcase {
  position: relative;
  min-height: clamp(300px, 34vw, 460px);
  display: grid;
  place-items: center;
  perspective: 1200px;
  --px: 0; --py: 0;
}
.hero__mascot-wrap {
  position: absolute;
  right: 2%;
  bottom: -4%;
  width: clamp(150px, 19vw, 250px);
  transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 10px), 0) rotate(4deg);
  transition: transform var(--pk-dur-slow) var(--pk-ease-out-quint);
  z-index: 0;
}
.hero__mascot { width: 100%; height: auto; filter: drop-shadow(0 16px 26px rgba(0,0,0,.26)); }

/* A PSA-slab: a graded-card holder — bevelled window + grade label + tier label. */
.hero__slab {
  position: absolute;
  margin: 0;
  width: clamp(120px, 14vw, 188px);
  aspect-ratio: 3 / 4.1;
  display: flex;
  flex-direction: column;
  padding: 10px 9px 9px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pk-mat-glass-rim-top) 30%, transparent), transparent 30%),
    color-mix(in srgb, var(--pk-mat-panel-bg) 78%, color-mix(in srgb, var(--rarity-color) 22%, transparent));
  border: 1px solid color-mix(in srgb, var(--rarity-color) 55%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  backdrop-filter: blur(6px) saturate(150%);
  box-shadow:
    inset 0 1px 0 var(--pk-mat-glass-rim-top),
    0 2px 4px rgba(0,0,0,.3),
    0 26px 50px -18px color-mix(in srgb, var(--rarity-color) 50%, rgba(0,0,0,.6));
  transform:
    translate3d(calc(var(--tx) + var(--px) * var(--depth) * 26px),
                calc(var(--ty) + var(--py) * var(--depth) * 20px), 0)
    rotate(var(--rot));
  transition: transform var(--pk-dur-slow) var(--pk-ease-out-quint);
}
.hero__slab-glow {
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rarity-color), transparent 68%);
  opacity: .22; filter: blur(20px); z-index: -1; pointer-events: none;
}
.hero__slab-grade {
  align-self: flex-end;
  font-size: 9px; letter-spacing: .1em; font-weight: 700;
  color: var(--rarity-color);
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--rarity-color) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--rarity-color) 40%, transparent);
}
.hero__slab-window {
  position: relative;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  margin: 8px 0;
  border-radius: 7px;
  background:
    radial-gradient(80% 70% at 50% 30%, color-mix(in srgb, var(--rarity-color) 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--pk-canvas-2) 70%, transparent);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.4);
  overflow: hidden;
}
.hero__slab-img {
  height: 86%; width: auto; max-width: 88%; object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
.hero__slab-label {
  text-align: center;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pk-text);
}

@media (prefers-reduced-motion: reduce) {
  .hero__bokeh { animation: none !important; }
  .hero__mascot-wrap, .hero__slab { transition: none; transform: translate3d(0,0,0) rotate(var(--rot, 0deg)); }
}
@media (max-width: 920px) {
  .hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .hero__showcase { min-height: 320px; order: 2; }
  .hero__copy { order: 1; max-width: none; align-items: center; text-align: center; }
  .hero__sub { max-width: 38ch; }
  .hero__cta-row { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE SHELL + SECTION HEADERS (full-width, gutter only).
   ════════════════════════════════════════════════════════════════════════ */
.home { padding-bottom: 0; }
.home-packs { padding-top: clamp(28px, 5vw, 56px); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--pk-gutter);
  margin-bottom: clamp(18px, 2.5vw, 28px);
}
.section-head__lead { display: flex; flex-direction: column; gap: 6px; }
.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--pk-accent);
}
.section-head__title {
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.04;
  color: var(--pk-text);
  margin: 0;
}
.section-head__note { font-size: 12px; letter-spacing: .04em; color: var(--pk-text-muted); }
@media (max-width: 620px) {
  .section-head { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════════
   PACKS GRID — FULL-WIDTH, fills the row (auto-fit; up to 7 across).
   ════════════════════════════════════════════════════════════════════════ */
.home-packs__grid-wrap { padding: 0 var(--pk-gutter); }
.packs-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  width: 100%;
}
@media (max-width: 1500px) { .packs-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .packs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .packs-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── PACK CARD — Material B, 4:3 stage, tier-escalating. ── */
.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 16px;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--pk-dur-slow) var(--pk-ease-out-quint),
    box-shadow var(--pk-dur-slow) var(--pk-ease-out-quint);
  will-change: transform;
}
.pack:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 var(--pk-mat-panel-rimlight),
    0 2px 4px color-mix(in srgb, var(--pk-mat-panel-shadow) 50%, transparent),
    0 26px 56px -18px color-mix(in srgb, var(--rarity-color) 40%, var(--pk-mat-panel-shadow));
}
/* thin tier-color top hairline — the only edge accent allowed */
.pack::before {
  content: "";
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--rarity-color, var(--pk-accent)), transparent);
  opacity: .85;
}
.pack__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pack__tier {
  font-size: clamp(15px, 1.3vw, 19px);
  letter-spacing: .01em;
  color: var(--rarity-color, var(--pk-text));
  margin: 0;
}
.pack__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rarity-color, var(--pk-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rarity-color) 18%, transparent);
  flex-shrink: 0;
}

/* The lit pack object on its 4:3 stage (pointer-tilt + glint) */
.pack__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 10px;
  perspective: 700px;
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%;
}
.pack__bloom {
  position: absolute;
  inset: 10% 16%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rarity-color, var(--pk-accent)), transparent 70%);
  opacity: .14;
  filter: blur(22px);
  transition: opacity var(--pk-dur-slow) var(--pk-ease-out-quint);
  pointer-events: none;
}
.pack:hover .pack__bloom { opacity: .36; }
.pack__glint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(180px 180px at var(--gx) var(--gy), rgba(255,255,255,.22), transparent 60%);
  opacity: 0;
  transition: opacity var(--pk-dur-base) var(--pk-ease-out-quint);
  mix-blend-mode: screen;
}
.pack:hover .pack__glint { opacity: 1; }
.pack__obj {
  position: relative;
  height: 100%;
  width: auto;
  max-width: 82%;
  object-fit: contain;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(-3deg);
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.5));
  transition: transform var(--pk-dur-base) var(--pk-ease-out-quint),
    filter var(--pk-dur-slow) var(--pk-ease-out-quint);
  transform-style: preserve-3d;
}
/* the pack rises with the card on hover — its cast shadow deepens to sell height */
.pack:hover .pack__obj { filter: drop-shadow(0 28px 44px rgba(0, 0, 0, .56)); }

.pack__badge {
  align-self: flex-start;
  padding: 3px 9px;
  margin-bottom: 9px;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--pk-text-muted);
}
.pack__odds {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 12px;
  font-size: 11px;
}
.pack__odds-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pack__odds-key { color: var(--pk-text-muted); letter-spacing: .08em; }
.pack__odds-val { display: inline-flex; align-items: baseline; gap: 5px; }
.pack__odds-pct { color: var(--rarity-color, var(--pk-accent)); font-weight: 700; }
.pack__odds-sep { opacity: .35; }
.pack__odds-frac { color: var(--pk-text); opacity: .8; }
.pack__cta {
  margin-top: auto;
  padding: 12px 14px;
  font-size: clamp(13px, 1.05vw, 15px);
  gap: 5px;
}
.pack__cta .glass-pill__price { font-size: clamp(12px, 1vw, 14px); }

/* ── Tier-escalating surface treatments ── */
.pack--matte { /* base panel only */ }
.pack--satin::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: linear-gradient(125deg, transparent 40%, color-mix(in srgb, var(--rarity-color) 8%, transparent) 50%, transparent 60%);
}
.pack--foil {
  background:
    repeating-linear-gradient(115deg, transparent 0 6px, color-mix(in srgb, var(--rarity-color) 5%, transparent) 6px 7px),
    var(--pk-mat-panel-bg);
}
.pack--foil::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rarity-color) 12%, transparent), transparent 55%);
}
.pack--metallic {
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--rarity-color) 12%, transparent), transparent 45%),
    linear-gradient(0deg, color-mix(in srgb, var(--pk-mat-panel-shadow) 30%, var(--pk-mat-panel-bg)), var(--pk-mat-panel-bg-2));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--rarity-color) 40%, rgba(255,255,255,.3)),
    0 2px 4px color-mix(in srgb, var(--pk-mat-panel-shadow) 50%, transparent),
    0 18px 44px -16px var(--pk-mat-panel-shadow);
}
[data-theme="light"] .pack--metallic {
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--rarity-color) 16%, transparent), transparent 45%),
    var(--pk-mat-panel-bg);
}

/* Light theme: the silver/iridescent packs (mythic #AEB8D6, platinum #C7CDD6)
   are light-on-light and wash out on cream — and their rarity bloom is light
   too, so it gives no contrast. Mix dark ink into the bloom to seat the pack,
   and add a tight contour drop-shadow for silhouette definition. Colored tiers
   keep their hue (just slightly seated); the light packs finally read — without
   reviving the white box we just removed. */
[data-theme="light"] .pack__bloom {
  background: radial-gradient(circle,
    color-mix(in srgb, var(--pk-text) 24%, var(--rarity-color)), transparent 68%);
  opacity: .2;
}
[data-theme="light"] .pack:hover .pack__bloom { opacity: .38; }
[data-theme="light"] .pack__obj {
  filter:
    drop-shadow(0 1px 1px rgba(58, 44, 24, .32))
    drop-shadow(0 14px 22px rgba(58, 44, 24, .24));
}
[data-theme="light"] .pack:hover .pack__obj {
  filter:
    drop-shadow(0 2px 2px rgba(58, 44, 24, .34))
    drop-shadow(0 24px 36px rgba(58, 44, 24, .26));
}
.pack--holo { overflow: hidden; }
.pack--holo .pack__holo {
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--pk-rarity-rookie) 30%, transparent),
    color-mix(in srgb, var(--pk-rarity-pro) 30%, transparent),
    color-mix(in srgb, var(--pk-rarity-legend) 30%, transparent),
    color-mix(in srgb, var(--pk-rarity-elite) 30%, transparent),
    color-mix(in srgb, var(--pk-rarity-rookie) 30%, transparent));
  opacity: .2;
  filter: blur(26px);
  animation-play-state: paused;
}
.pack--holo:hover .pack__holo { animation: holo-spin 7s linear infinite; opacity: .34; }
@keyframes holo-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════
   RECENT PULLS — full-width live marquee of graded slabs.
   ════════════════════════════════════════════════════════════════════════ */
.recent { padding-top: clamp(48px, 6vw, 80px); }
.recent__live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pk-hot);
  box-shadow: 0 0 8px var(--pk-hot);
  animation: live-blink 1.6s ease-in-out infinite;
}
@keyframes live-blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.recent__rail {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.recent__track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 8px var(--pk-gutter);
  animation: recent-scroll 48s linear infinite;
}
.recent__rail:hover .recent__track { animation-play-state: paused; }
@keyframes recent-scroll { to { transform: translateX(calc(-50% - 8px)); } }

.pull-slab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 268px;
  flex-shrink: 0;
  padding: 12px;
  border-radius: var(--pk-radius-card);
}
.pull-slab__thumb {
  position: relative;
  width: 56px; height: 78px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--rarity-color) 60%, transparent), color-mix(in srgb, var(--rarity-color) 18%, var(--pk-mat-panel-bg-2)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity-color) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.pull-slab__grade { font-size: 13px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.pull-slab__sheen {
  position: absolute; inset: 0;
  background: linear-gradient(125deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
}
.pull-slab__info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pull-slab__name {
  font-size: 13px; font-weight: 600; color: var(--pk-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pull-slab__user { font-size: 11px; color: var(--pk-text-muted); }

/* ════════════════════════════════════════════════════════════════════════
   HOW IT WORKS — solid lit panels (NOT glass). Mascot hosts + CTA.
   ════════════════════════════════════════════════════════════════════════ */
.hiw { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 96px); }
.hiw__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.15fr;
  gap: clamp(14px, 1.6vw, 22px);
  padding: 0 var(--pk-gutter);
}
@media (max-width: 1100px) { .hiw__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .hiw__grid { grid-template-columns: 1fr; } }

.hiw__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  overflow: hidden;
}
.hiw__kana {
  position: absolute;
  top: 8px; right: 14px;
  font-size: 56px;
  line-height: 1;
  color: var(--pk-accent);
  opacity: .14;
  pointer-events: none;
}
.hiw__step-title { font-size: 22px; color: var(--pk-text); margin: 4px 0 0; }
.hiw__body { font-size: 14px; line-height: 1.55; color: var(--pk-text-muted); }

.hiw__host {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--pk-accent) 8%, transparent), transparent 60%),
    var(--pk-mat-panel-bg);
}
.hiw__host-bloom {
  position: absolute;
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pk-accent) 28%, transparent), transparent 65%);
  filter: blur(28px);
  animation: hero-pulse 5s ease-in-out infinite;
}
.hiw__host-img {
  position: relative; z-index: 1;
  width: min(150px, 60%); height: auto;
  filter: drop-shadow(0 16px 30px color-mix(in srgb, var(--pk-accent) 22%, rgba(0,0,0,.4)));
  animation: hero-float 6s ease-in-out infinite;
}
.hiw__host-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hiw__host-line { font-size: 22px; color: var(--pk-text); }
@keyframes hero-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hero-pulse { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* ════════════════════════════════════════════════════════════════════════
   OPEN-PACK OVERLAY — the addictive moment. Liquid Glass scrim + panel.
   ════════════════════════════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}
.overlay__scrim {
  position: absolute;
  inset: 0;
  border: none;
  cursor: pointer;
  background: color-mix(in srgb, var(--pk-canvas-2) 55%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  animation: overlay-fade var(--pk-dur-base) var(--pk-ease-out-quint);
}
.overlay__panel {
  position: relative;
  z-index: 1;
  width: min(440px, 92vw);
  border-radius: var(--pk-radius-panel);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: overlay-rise var(--pk-dur-slow) var(--pk-ease-out-quint);
}
.overlay__panel::after { opacity: .35; } /* calm the specular sweep inside the modal */
.overlay__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--pk-radius-pill);
  border: 1px solid var(--pk-mat-chip-edge);
  background: var(--pk-mat-chip-bg);
  color: var(--pk-text);
  cursor: pointer;
  transition: color var(--pk-dur-fast) var(--pk-ease-out-quint), border-color var(--pk-dur-fast) var(--pk-ease-out-quint);
}
.overlay__close:hover { color: var(--pk-accent); border-color: var(--pk-accent); }
.overlay__close:focus-visible { outline: 2px solid color-mix(in srgb, var(--pk-accent) 70%, #fff); outline-offset: 2px; }
.overlay__head { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding-right: 40px; }
.overlay__eyebrow { font-size: 11px; letter-spacing: .16em; color: var(--rarity-color, var(--pk-accent)); }
.overlay__title { font-size: 30px; color: var(--pk-text); margin: 0; }
.overlay__odds { font-size: 12px; color: var(--pk-text-muted); }

.overlay__stage {
  position: relative;
  z-index: 2;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: var(--pk-radius-card);
  overflow: hidden;
  background: radial-gradient(80% 70% at 50% 35%, color-mix(in srgb, var(--rarity-color) 16%, transparent), transparent 70%);
}
.overlay__loop { position: absolute; inset: 0; opacity: .35; }
.overlay__loop-img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; }
.overlay__bloom {
  position: absolute;
  width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rarity-color) 50%, transparent), transparent 65%);
  filter: blur(34px);
  animation: hero-pulse 4s ease-in-out infinite;
}
.overlay__machine {
  position: relative; z-index: 1;
  width: 74%; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.55));
  animation: hero-float 5s ease-in-out infinite;
}
.overlay.is-pulling .overlay__machine,
.overlay__panel.is-pulling .overlay__machine { animation: machine-shake .35s ease-in-out infinite; }
@keyframes machine-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-2px) rotate(-.4deg); } 75% { transform: translateX(2px) rotate(.4deg); } }
.overlay__drop { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }

.overlay__foot { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.overlay__pull { width: 100%; font-size: 18px; padding: 16px 22px; }
.overlay__verify {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 11px; letter-spacing: .04em; color: var(--pk-text-muted);
}
.overlay__verify-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pk-success); box-shadow: 0 0 8px var(--pk-success); }

@keyframes overlay-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlay-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* ════════════════════════════════════════════════════════════════════════
   FOOTER — original pachinko.fun lockup (パチンコ / PACHINKO / CASH IN·CRASH OUT).
   ════════════════════════════════════════════════════════════════════════ */
.footer {
  width: 100%;
  border-top: 1px solid color-mix(in srgb, var(--pk-text) 9%, transparent);
  background: var(--pk-mat-chip-bg);
}
.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding: clamp(36px, 5vw, 64px) var(--pk-gutter) 28px;
}
.footer__lockup { display: flex; flex-direction: column; gap: 4px; max-width: 280px; }
.footer__kana { font-size: 26px; color: var(--pk-text); letter-spacing: .04em; line-height: 1; }
.footer__wordmark { font-size: 40px; color: var(--pk-text); letter-spacing: .01em; line-height: .95; }
.footer__tag { font-size: 13px; letter-spacing: .14em; color: var(--pk-text-muted); margin-top: 10px; line-height: 1.5; }
.footer__powered { font-size: 11px; letter-spacing: .1em; color: var(--pk-accent); opacity: .8; margin-top: 10px; }

.footer__cols { display: flex; gap: clamp(32px, 5vw, 72px); flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col-title { font-size: 11px; letter-spacing: .18em; color: var(--pk-text); }
.footer__link { font-size: 14px; color: var(--pk-text-muted); text-decoration: none; transition: color var(--pk-dur-fast) var(--pk-ease-out-quint); }
.footer__link:hover { color: var(--pk-accent); }

.footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px var(--pk-gutter);
  border-top: 1px solid color-mix(in srgb, var(--pk-text) 6%, transparent);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--pk-text-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cta-loud::after,
  .prize-ticker__rail,
  .recent__track,
  .pack--holo:hover .pack__holo,
  .hiw__host-img, .hiw__host-bloom,
  .overlay__machine, .overlay__bloom,
  .recent__live-dot { animation: none !important; }
  .pk-theme-sweep { display: none; }
  .pack:hover { transform: none; }
  .pack__obj { transition: none; }
  .mat-liquid-glass::before { display: none; }
}