/* ヘブンズ・ステップアップガチャ — gacha-game aesthetic v2
 * Heavenly gold + sky + crimson. Original — not a copy of any specific game UI. */

:root {
  --ink: #0b1530;
  --ink-2: #1a2548;
  --paper: #f6f3ea;
  --paper-2: #ecead9;
  --gold: #d8a93a;
  --gold-2: #f3d36b;
  --gold-3: #fff2b8;
  --gold-deep: #8a5e10;
  --gold-soft: #f8e9b0;
  --sky: #4f7cd4;
  --sky-deep: #1f3a86;
  --sky-soft: #c8d6f3;
  --violet: #8b3aa8;
  --crimson: #d12137;
  --crimson-deep: #7d0a1c;
  --halo: #ffe8a3;

  --serif: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --display: "Cinzel", "Cormorant Garamond", serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans-jp);
  background: #f6f3ea;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
.cinzel { font-family: var(--display); letter-spacing: 0.06em; }

/* ===== Backdrop ===== */
.page-bg {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 600px at 50% -100px, #fff7d8 0%, transparent 60%),
    radial-gradient(900px 700px at 90% 10%, #d6e2f7 0%, transparent 55%),
    linear-gradient(180deg, #f9f4e3 0%, #efeadb 35%, #e6e3d2 100%);
}
.page-bg::before {
  content: "";
  position: absolute; inset: 0;
  background: none;
}

/* ===== Topbar ===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(31,58,134,0.08);
  position: sticky; top: 0; z-index: 50;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; }
.topbar .brand img { height: 38px; width: auto; }
.topbar .brand .brandmark { filter: drop-shadow(0 2px 4px rgba(138,94,16,0.3)); }
.topbar .brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; white-space: nowrap; }
.topbar .brand-text .main {
  font-family: var(--sans-jp); font-weight: 900;
  font-size: 14px; letter-spacing: 0.08em; color: var(--ink);
  white-space: nowrap;
}
.topbar .brand .sub {
  font-family: var(--display); font-size: 9px; letter-spacing: 0.3em;
  color: var(--sky-deep);
}
.topbar nav { display: flex; gap: 28px; font-size: 13px; }
.topbar nav a { color: var(--ink); text-decoration: none; opacity: 0.7; font-weight: 500; }
.topbar nav a:hover { opacity: 1; color: var(--sky-deep); }
.topbar .pill {
  background: linear-gradient(180deg, #e8324a, #b80f24);
  color: white;
  white-space: nowrap;
  padding: 7px 14px; border-radius: 999px;
  font-size: 11px; letter-spacing: 0.15em;
  font-weight: 700;
  box-shadow: 0 6px 14px -4px rgba(200,16,46,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ===== Cinematic Hero (full-bleed image bg) ===== */
.hero-cinematic {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 0;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(11,21,48,0.15) 0%,
      rgba(11,21,48,0.0) 30%,
      rgba(11,21,48,0.55) 75%,
      rgba(11,21,48,0.85) 100%),
    linear-gradient(90deg,
      rgba(11,21,48,0.55) 0%,
      rgba(11,21,48,0.15) 45%,
      rgba(11,21,48,0.0) 70%);
}
.hero-rays {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(255,232,163,0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(31,58,134,0.3) 0%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero-grain {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.hero-bottom-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, #f6f3ea);
  z-index: 2;
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 3;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 32px 160px;
  display: grid;
  grid-template-columns: 1.1fr 0.7fr;
  gap: 48px;
  align-items: end;
  min-height: 720px;
}
.hero-copy { color: white; }
.hero-copy .eyebrow.light { color: var(--gold-2); }
.hero-copy .eyebrow.light .dot { background: var(--gold-2); box-shadow: 0 0 0 4px rgba(243,211,107,0.25); }
.hero-copy h1 {
  font-family: var(--display);
  font-size: clamp(64px, 8vw, 124px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  margin: 18px 0 8px;
  color: white;
  font-weight: 700;
  text-shadow: 0 6px 24px rgba(11,21,48,0.6), 0 2px 0 rgba(0,0,0,0.2);
}
.hero-copy h1 .gold {
  background: linear-gradient(180deg, #fff2b8 0%, #f3d36b 35%, #d8a93a 60%, #8a5e10 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 6px rgba(138,94,16,0.6));
}
.hero-copy h2 {
  font-family: var(--sans-jp); font-weight: 700;
  font-size: 22px; margin: 0 0 22px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 8px rgba(11,21,48,0.6);
}
.hero-copy .lede {
  font-size: 15px; line-height: 1.85;
  color: rgba(255,255,255,0.82);
  max-width: 540px;
  margin-bottom: 28px;
  text-shadow: 0 2px 10px rgba(11,21,48,0.6);
}
.hero-copy .lede b { color: var(--gold-2); font-weight: 800; }
.hero-copy .price-row {
  display: flex; align-items: baseline; gap: 14px;
  margin: 18px 0 32px; flex-wrap: wrap;
}
.hero-copy .price-old {
  font-family: var(--display);
  font-size: 26px; color: rgba(255,255,255,0.55);
  text-decoration: line-through;
  text-decoration-color: var(--crimson);
}
.hero-copy .price-arrow {
  font-family: var(--display); font-size: 24px;
  color: var(--gold-2);
}
.hero-copy .price-new {
  font-family: var(--display);
  font-size: 64px; line-height: 1;
  background: linear-gradient(180deg, #fff2b8, #f3d36b 50%, #d8a93a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 700;
  display: inline-flex; align-items: baseline; gap: 6px;
  filter: drop-shadow(0 4px 12px rgba(138,94,16,0.7));
}
.hero-copy .price-new small { font-size: 18px; color: rgba(255,255,255,0.7); font-family: var(--sans-jp); -webkit-text-fill-color: rgba(255,255,255,0.7); }

.hero-stats {
  display: flex; flex-direction: column; gap: 10px;
  align-self: end;
  padding-bottom: 8px;
}
.hero-stat {
  background: rgba(11,21,48,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(216,169,58,0.35);
  border-radius: 14px;
  padding: 14px 20px;
  color: white;
  box-shadow: 0 14px 30px -14px rgba(11,21,48,0.6);
}
.hero-stat .lbl {
  font-family: var(--display);
  font-size: 10px; letter-spacing: 0.32em;
  color: var(--gold-2);
  text-transform: uppercase;
}
.hero-stat .val {
  font-family: var(--display);
  font-size: 32px; font-weight: 700;
  margin-top: 2px;
  line-height: 1;
}
.hero-stat .val.gold {
  background: linear-gradient(180deg, #fff2b8, #d8a93a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stat .val small {
  font-family: var(--sans-jp); font-size: 12px;
  color: rgba(255,255,255,0.6); font-weight: 500;
}

/* ghost-light variant for cinematic hero */
.btn-gacha.ghost-light {
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.4);
  color: white;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  padding: 16px 28px 18px;
}
.btn-gacha.ghost-light::before, .btn-gacha.ghost-light::after { display: none; }
.btn-gacha.ghost-light:hover { background: rgba(255,255,255,0.2); border-color: white; }

/* ===== Roster strip ===== */
.roster-strip {
  position: relative;
  max-width: 1400px;
  margin: -60px auto 0;
  padding: 0 32px 60px;
  z-index: 4;
}
.roster-eyebrow {
  display: flex; align-items: center; gap: 16px;
  justify-content: center;
  font-family: var(--display);
  font-size: 12px; letter-spacing: 0.4em;
  color: var(--sky-deep);
  margin-bottom: 28px;
}
.roster-eyebrow .line {
  flex: 0 0 80px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,58,134,0.4), transparent);
}
.roster-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,247,216,0.85));
  border: 1.5px solid rgba(216,169,58,0.4);
  border-radius: 22px;
  padding: 26px 22px;
  box-shadow:
    0 6px 0 rgba(138,94,16,0.12),
    0 30px 60px -30px rgba(31,58,134,0.4);
}
.roster-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.roster-orb {
  position: relative;
  width: 100%; max-width: 110px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, #fff8d2 0%, #fde29c 35%, #f3d36b 60%, #d8a93a 85%, #8a5e10 100%);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.7),
    0 0 0 4px rgba(138,94,16,0.5),
    0 12px 28px -10px rgba(138,94,16,0.5);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.roster-orb img {
  width: 110%; height: auto;
  transform: translateY(-4%);
  filter: drop-shadow(0 4px 6px rgba(120,80,10,0.4));
}
.roster-card:nth-child(6) .roster-orb,
.roster-card:nth-child(7) .roster-orb {
  background:
    radial-gradient(circle at 50% 30%, #f9c8e4 0%, #ff8fd0 30%, #c44ba8 65%, #4d1066 100%);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.6),
    0 0 0 4px rgba(139,58,168,0.55),
    0 12px 28px -10px rgba(139,58,168,0.5);
}
.roster-name {
  font-family: var(--display);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.roster-role {
  font-family: var(--display);
  font-size: 9px; letter-spacing: 0.32em;
  color: var(--gold-deep);
  text-transform: uppercase;
}

/* step-card character image */
.step-card {
  grid-template-columns: 100px 1fr 110px 200px;
}
.step-char {
  position: relative;
  width: 100px; height: 110px;
  display: flex; align-items: center; justify-content: center;
}
.step-char img {
  width: 130%; height: auto;
  filter: drop-shadow(0 6px 10px rgba(120,80,10,0.4));
  position: relative; z-index: 2;
}
.step-card.active .step-char::before {
  content: ""; position: absolute; inset: 5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243,211,107,0.45), transparent 70%);
  filter: blur(8px);
  z-index: 1;
}
.hero-old-unused {
  display: none;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-size: 12px; letter-spacing: 0.3em;
  color: var(--sky-deep);
  text-transform: uppercase;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(216,169,58,0.2);
}
.price-row {
  display: flex; align-items: baseline; gap: 16px;
  margin: 18px 0 32px; flex-wrap: wrap;
}
.price-tag {
  display: inline-block;
  background: linear-gradient(180deg, #fff7d8, #f3d36b);
  border: 1px solid rgba(163,120,32,0.4);
  border-radius: 999px;
  padding: 7px 14px; font-size: 12px; font-weight: 700;
  color: #6b4d10; letter-spacing: 0.05em;
}
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ===== Gacha buttons ===== */
.btn-gacha {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 18px 32px 20px;
  border: none; cursor: pointer;
  font-family: var(--sans-jp);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.1em;
  border-radius: 14px;
  text-transform: uppercase;
  transition: transform 0.08s ease, filter 0.15s ease;
  isolation: isolate;
}
.btn-gacha::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 14px;
  z-index: -1;
}
.btn-gacha::after {
  content: ""; position: absolute;
  inset: 2px 2px 6px 2px;
  border-radius: 12px;
  z-index: -1;
}
.btn-gacha:hover { filter: brightness(1.08); }
.btn-gacha:active { transform: translateY(2px); }
.btn-gacha:active::after { inset: 2px 2px 2px 2px; }

/* gold variant */
.btn-gacha.gold {
  color: #4a2f04;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.btn-gacha.gold::before {
  background: linear-gradient(180deg, #8a5e10 0%, #5a3d08 100%);
  box-shadow: 0 6px 0 rgba(60,40,5,0.4), 0 14px 30px -8px rgba(216,169,58,0.6);
}
.btn-gacha.gold::after {
  background:
    linear-gradient(180deg, #fff2b8 0%, #f3d36b 35%, #d8a93a 75%, #b88d20 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.7),
    inset 0 -2px 0 rgba(120,80,10,0.4);
}

/* crimson PUSH variant */
.btn-gacha.crimson {
  color: white;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
  font-family: var(--display);
  letter-spacing: 0.25em;
  font-size: 22px;
  padding: 26px 64px 28px;
  border-radius: 18px;
}
.btn-gacha.crimson::before {
  border-radius: 18px;
  background: linear-gradient(180deg, #5a0612 0%, #2a0008 100%);
  box-shadow: 0 10px 0 rgba(40,5,12,0.5), 0 30px 60px -10px rgba(200,16,46,0.6);
}
.btn-gacha.crimson::after {
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 0%, #ff7a8e 0%, #e8324a 40%, #b80f24 80%, #7d0a1c 100%);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.35),
    inset 0 -3px 0 rgba(80,5,15,0.5),
    inset 0 0 0 1px rgba(255,200,200,0.3);
}
.btn-gacha.crimson::after,
.btn-gacha.crimson::before { inset: 2px 2px 8px 2px; }
.btn-gacha.crimson:active::after,
.btn-gacha.crimson:active::before { inset: 2px 2px 2px 2px; }

/* ghost */
.btn-gacha.ghost {
  background: rgba(255,255,255,0.6);
  border: 1.5px solid rgba(11,21,48,0.2);
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(11,21,48,0.08);
  padding: 16px 28px 18px;
}
.btn-gacha.ghost::before, .btn-gacha.ghost::after { display: none; }
.btn-gacha.ghost:hover { border-color: var(--sky-deep); background: white; }
.btn-gacha.ghost:active { box-shadow: 0 1px 0 rgba(11,21,48,0.08); }

.btn-gacha .arrow { font-family: var(--display); font-size: 18px; }

/* shine sweep on gold */
.btn-gacha.gold .shine {
  position: absolute; top: 0; bottom: 0; left: -30%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: skewX(-20deg);
  animation: shineSweep 3s ease-in-out infinite;
  pointer-events: none;
  border-radius: 14px;
}
@keyframes shineSweep {
  0%, 60% { left: -30%; }
  100% { left: 130%; }
}

/* ===== Hero medallion ===== */
.medallion-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
.medallion-bg {
  position: absolute; inset: 5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255,247,216,0.95) 0%,
      rgba(255,232,163,0.7) 25%,
      rgba(255,232,163,0.35) 50%,
      rgba(255,232,163,0) 75%);
  filter: blur(20px);
  z-index: 1;
}
.medallion-bg::before { display: none; }
.halo-ring {
  position: absolute; border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  display: none;
}
.halo-ring.r1 { inset: -2%; border: 1px dashed rgba(216,169,58,0.5); animation: spin 60s linear infinite; }
.halo-ring.r2 { inset: 2%; border: 2px solid rgba(255,232,163,0.5); }
.halo-ring.r3 { inset: -8%; border: 1px solid rgba(216,169,58,0.3); animation: spin 120s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.sun-burst {
  position: absolute; inset: -10%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(255,232,163,0.35) 8deg, transparent 16deg,
      transparent 30deg, rgba(255,232,163,0.35) 38deg, transparent 46deg,
      transparent 60deg, rgba(255,232,163,0.35) 68deg, transparent 76deg,
      transparent 90deg, rgba(255,232,163,0.35) 98deg, transparent 106deg,
      transparent 120deg, rgba(255,232,163,0.35) 128deg, transparent 136deg,
      transparent 150deg, rgba(255,232,163,0.35) 158deg, transparent 166deg,
      transparent 180deg, rgba(255,232,163,0.35) 188deg, transparent 196deg,
      transparent 210deg, rgba(255,232,163,0.35) 218deg, transparent 226deg,
      transparent 240deg, rgba(255,232,163,0.35) 248deg, transparent 256deg,
      transparent 270deg, rgba(255,232,163,0.35) 278deg, transparent 286deg,
      transparent 300deg, rgba(255,232,163,0.35) 308deg, transparent 316deg,
      transparent 330deg, rgba(255,232,163,0.35) 338deg, transparent 346deg);
  animation: spin 80s linear infinite;
  z-index: 0;
  filter: blur(2px);
}
.medallion-character {
  position: relative; z-index: 5;
  width: 100%; max-width: 580px;
  filter: drop-shadow(0 30px 50px rgba(120,80,10,0.45));
  animation: float 6s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 55%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, black 55%, transparent 72%);
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.stat-chip {
  position: absolute; z-index: 6;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,247,216,0.92));
  border: 1.5px solid rgba(138,94,16,0.45);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 12px;
  box-shadow: 0 16px 40px -16px rgba(120,80,10,0.5);
  text-align: center;
}
.stat-chip.tl { top: 4%; left: -2%; }
.stat-chip.br { bottom: 4%; right: -2%; }
.stat-chip .label {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.3em;
  color: var(--gold-deep); text-transform: uppercase;
}
.stat-chip .value {
  font-family: var(--display); font-size: 24px; color: var(--ink); font-weight: 700;
}
.stat-chip .value.gold {
  background: linear-gradient(180deg, #f3d36b, #8a5e10);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ===== Section base ===== */
.section { padding: 90px 32px; max-width: 1400px; margin: 0 auto; position: relative; }
.section-eyebrow {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.4em;
  color: var(--sky-deep); text-transform: uppercase;
  display: flex; align-items: center; gap: 14px;
  justify-content: center;
}
.section-eyebrow::before, .section-eyebrow::after {
  content: ""; height: 1px; flex: 0 0 60px;
  background: linear-gradient(90deg, transparent, rgba(31,58,134,0.25), transparent);
}
.section h3 {
  font-family: var(--display);
  font-size: clamp(40px, 4.5vw, 64px);
  margin: 12px 0 12px; text-align: center;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.section h3 .accent {
  background: linear-gradient(180deg, #f3d36b, #8a5e10);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section .sub {
  text-align: center; max-width: 600px; margin: 0 auto 60px;
  font-size: 15px; line-height: 1.8;
  color: rgba(11,21,48,0.7);
}

/* ===== Step tower (gacha-style) ===== */
.tower {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
.step-card {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr 110px 200px;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,247,216,0.85));
  border: 1.5px solid rgba(138,94,16,0.35);
  border-radius: 20px;
  padding: 22px 26px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1.4), box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 6px 0 rgba(138,94,16,0.15), 0 20px 40px -20px rgba(138,94,16,0.3);
  overflow: visible;
  gap: 18px;
}
.step-card:hover { transform: translateY(-3px); }
.step-card .glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(255,232,163,0.5), transparent 50%);
  pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
}
.step-card.active .glow { opacity: 1; }
.step-card.active {
  background: linear-gradient(180deg, #1a2548 0%, #0b1530 100%);
  border-color: var(--gold);
  color: white;
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    0 8px 0 rgba(11,21,48,0.4),
    0 30px 60px -15px rgba(31,58,134,0.6),
    0 0 0 1px rgba(216,169,58,0.6) inset,
    0 0 60px rgba(216,169,58,0.2) inset;
}

/* step number plate */
.step-numplate {
  position: relative;
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, #fff2b8, #f3d36b 40%, #d8a93a 70%, #8a5e10);
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.6),
    0 0 0 5px rgba(138,94,16,0.6),
    0 8px 16px -4px rgba(138,94,16,0.4),
    inset 0 -3px 0 rgba(120,80,10,0.4);
  font-family: var(--display);
  color: #4a2f04;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.step-numplate .lbl {
  position: absolute; top: 12px;
  font-size: 9px; letter-spacing: 0.25em;
}
.step-numplate .n {
  font-size: 38px; font-weight: 700; line-height: 1;
  margin-top: 8px;
}
.step-card.active .step-numplate {
  background: radial-gradient(circle at 50% 30%, #fff2b8, #f3d36b 40%, #d8a93a 70%, #8a5e10);
}

/* step body */
.step-body { padding: 0 8px; }
.step-name {
  font-family: var(--display); font-size: 28px; font-weight: 700;
  letter-spacing: 0.06em;
  color: #2a1c0a;
  margin: 0 0 10px;
}
.step-card.active .step-name {
  background: linear-gradient(180deg, #fff2b8, #d8a93a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12px; opacity: 0.75;
}
.step-meta b { font-weight: 700; opacity: 1; margin-left: 4px; }
.step-card.active .step-meta { color: rgba(255,255,255,0.85); }

/* prize panel */
.prize-panel {
  position: relative;
  background:
    linear-gradient(180deg, #1a2548, #0b1530);
  border: 1px solid rgba(216,169,58,0.5);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  color: white;
  box-shadow: inset 0 0 30px rgba(216,169,58,0.2), 0 8px 20px -8px rgba(11,21,48,0.4);
}
.step-card.active .prize-panel {
  background: linear-gradient(180deg, #f3d36b 0%, #b88d20 100%);
  border-color: white;
  color: #2a1c0a;
  box-shadow: inset 0 0 30px rgba(255,255,255,0.3), 0 0 30px rgba(216,169,58,0.5);
}
.prize-panel .l {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.3em;
  color: var(--gold-2);
}
.step-card.active .prize-panel .l { color: rgba(42,28,10,0.8); }
.prize-panel .a {
  font-family: var(--display); font-size: 30px; line-height: 1;
  margin-top: 4px; font-weight: 700;
  background: linear-gradient(180deg, #fff2b8, #d8a93a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
}
.step-card.active .prize-panel .a {
  background: linear-gradient(180deg, #4a2f04, #2a1c0a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.prize-panel .yen { font-size: 18px; }

.step-badge {
  position: absolute; top: -10px; left: 90px;
  font-size: 10px; font-weight: 700;
  padding: 5px 12px;
  background: linear-gradient(180deg, #ff5e74, #c8102e);
  color: white;
  border-radius: 999px;
  letter-spacing: 0.15em;
  box-shadow: 0 4px 10px -2px rgba(200,16,46,0.5);
  z-index: 10;
  white-space: nowrap;
}
.step-lock {
  position: absolute; top: 12px; right: 12px;
  font-size: 11px; padding: 4px 10px;
  background: rgba(11,21,48,0.1); border-radius: 999px;
  letter-spacing: 0.1em;
  color: rgba(11,21,48,0.5);
}
.step-card.active .step-lock { background: rgba(216,169,58,0.2); color: var(--gold-2); }

/* connector ladder */
.tower::before {
  content: "";
  position: absolute;
  left: 75px; top: 30px; bottom: 30px;
  width: 4px;
  background:
    linear-gradient(180deg,
      var(--gold) 0%, var(--gold) 30%,
      rgba(216,169,58,0.3) 30%, rgba(216,169,58,0.3) 100%);
  z-index: -1;
  border-radius: 4px;
}

/* progress bar */
.tower-progress {
  margin: 36px auto 0;
  max-width: 820px;
  background: rgba(11,21,48,0.08);
  height: 14px;
  border-radius: 999px;
  position: relative;
  border: 1px solid rgba(11,21,48,0.1);
  overflow: hidden;
}
.tower-progress .fill {
  height: 100%;
  background: linear-gradient(90deg, #f3d36b, #d8a93a, #f3d36b);
  background-size: 200% 100%;
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(.2,.7,.2,1.4);
  box-shadow: 0 0 20px rgba(216,169,58,0.6);
  animation: shimmer 2s linear infinite;
}
@keyframes shimmer { to { background-position: 200% 0; } }
.tower-progress .marker {
  position: absolute; top: -7px;
  transform: translateX(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, #fff2b8, #f3d36b 40%, #d8a93a 70%, #8a5e10);
  box-shadow: 0 0 0 3px white, 0 4px 8px rgba(138,94,16,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  color: #4a2f04;
}

/* ===== Code card ===== */
/* ===== Team band ===== */
.team-band {
  position: relative;
  margin: 0 auto;
  max-width: 1400px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(31,58,134,0.5);
  border: 2px solid rgba(216,169,58,0.4);
}
.team-band img { width: 100%; display: block; }
.team-band .veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(11,21,48,0.55) 100%),
    linear-gradient(90deg, rgba(11,21,48,0.4) 0%, transparent 30%, transparent 70%, rgba(11,21,48,0.4) 100%);
}
.team-band .label {
  position: absolute; left: 32px; bottom: 28px;
  color: white;
}
.team-band .label .eyebrow { color: var(--gold-2); }
.team-band .label h3 {
  font-family: var(--display);
  margin: 6px 0 0; font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: 0.04em; font-weight: 700;
  text-align: left;
}
.team-band .label h3 .accent {
  background: linear-gradient(180deg, #fff2b8, #d8a93a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.code-card {
  margin: 70px auto 0;
  max-width: 820px;
  padding: 42px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(31,58,134,0.05), rgba(216,169,58,0.08)),
    #fffdf3;
  border: 2px dashed rgba(216,169,58,0.55);
  text-align: center;
  position: relative; overflow: hidden;
}
.code-card .deco {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(216,169,58,0.12), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(31,58,134,0.08), transparent 40%);
  pointer-events: none;
}
.code-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 18px 14px 28px;
  background: white;
  border: 2px solid var(--gold);
  border-radius: 14px;
  font-family: var(--mono);
  font-size: 22px; font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative; z-index: 2;
  box-shadow: 0 4px 0 rgba(138,94,16,0.2);
}
.code-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(138,94,16,0.2); }
.code-pill .copy {
  font-family: var(--sans-jp); font-size: 12px;
  background: linear-gradient(180deg, #f3d36b, #d8a93a);
  color: #4a2f04;
  padding: 8px 14px; border-radius: 8px;
  font-weight: 700; letter-spacing: 0.1em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.code-pill.copied .copy { background: #2d8c5b; color: white; }

/* ===== How (numbered cards w/ accent character) ===== */
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.how-card {
  background: white;
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(31,58,134,0.08);
  position: relative;
  min-height: 190px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 0 rgba(31,58,134,0.05);
}
.how-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -10px rgba(31,58,134,0.25), 0 4px 0 rgba(31,58,134,0.05);
}
.how-card .num {
  font-family: var(--display);
  font-size: 64px; line-height: 0.8;
  background: linear-gradient(180deg, #f3d36b, #8a5e10);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position: absolute; top: 14px; right: 18px;
  font-weight: 700;
  opacity: 0.18;
}
.how-card .step-stamp {
  font-family: var(--display);
  font-size: 10px; letter-spacing: 0.3em;
  color: var(--sky-deep);
  margin-bottom: 8px;
}
.how-card h4 { font-size: 16px; margin: 0 0 8px; font-weight: 700; }
.how-card p { font-size: 13px; line-height: 1.7; color: rgba(11,21,48,0.7); margin: 0; }

/* ===== Games ===== */
.games-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.game-tile {
  position: relative;
  background: white;
  border: 1px solid rgba(31,58,134,0.08);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 3px 0 rgba(31,58,134,0.04);
}
.game-tile:hover {
  border-color: rgba(216,169,58,0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(216,169,58,0.4);
}
.game-tile-img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  display: block; background: #0b1530;
}
.game-tile-body { padding: 14px 16px; }
.game-tile-name { font-weight: 700; }
.game-tile .meta {
  font-size: 11px; letter-spacing: 0.1em;
  color: rgba(11,21,48,0.5);
  margin-top: 2px;
}
.game-tile .hot {
  position: absolute; top: 10px; right: 10px;
  font-size: 10px; padding: 4px 10px;
  background: linear-gradient(180deg, #ff7a3a, #c8102e);
  color: white; border-radius: 999px; letter-spacing: 0.15em;
  font-weight: 700;
  box-shadow: 0 3px 8px -2px rgba(200,16,46,0.4);
}

/* ===== FAQ ===== */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  border: 1px solid rgba(31,58,134,0.12);
  background: white;
  border-radius: 14px;
  margin-bottom: 10px;
  padding: 18px 22px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.faq-item:hover { border-color: rgba(216,169,58,0.5); }
.faq-item.open { border-color: var(--gold); box-shadow: 0 8px 20px -10px rgba(216,169,58,0.4); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 15px; font-weight: 700;
  gap: 14px;
}
.faq-q .qmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  font-family: var(--display);
  background: linear-gradient(180deg, #f3d36b, #d8a93a);
  color: #4a2f04;
  border-radius: 6px;
  font-size: 13px;
  margin-right: 12px;
  flex-shrink: 0;
}
.faq-toggle {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(11,21,48,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--ink);
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.faq-item.open .faq-toggle {
  background: var(--ink); color: var(--gold-2); border-color: var(--ink);
  transform: rotate(45deg);
}
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease, margin 0.25s ease;
  font-size: 14px; line-height: 1.85;
  color: rgba(11,21,48,0.75);
  padding-left: 38px;
}
.faq-item.open .faq-a {
  max-height: 280px; margin-top: 14px;
}

/* ===== Section accent character (small portrait orb) ===== */
.accent-char {
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}
.accent-char .orb {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, #fff8d2 0%, #fde29c 30%, #f3d36b 55%, #d8a93a 80%, #8a5e10 100%);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.6),
    0 0 0 4px rgba(138,94,16,0.5),
    0 0 0 8px rgba(255,255,255,0.3),
    0 14px 30px -10px rgba(138,94,16,0.5);
}
.accent-char.demon .orb {
  background:
    radial-gradient(circle at 50% 30%, #f9c8e4 0%, #ff5ec8 35%, #8b3aa8 70%, #2a0a3a 100%);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.4),
    0 0 0 4px rgba(139,58,168,0.6),
    0 0 0 8px rgba(255,94,200,0.15),
    0 14px 30px -10px rgba(139,58,168,0.5);
}
.accent-char img {
  position: relative;
  width: 130%; height: auto;
  z-index: 2;
  filter: drop-shadow(0 8px 12px rgba(120,80,10,0.4));
  transform: translateY(-8%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, black 50%, transparent 65%);
  mask-image: radial-gradient(circle at 50% 45%, black 50%, transparent 65%);
}
/* place above the eyebrow, centered, so it never overlaps grid content */
.accent-char.tr,
.accent-char.bl {
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  bottom: auto; right: auto;
}
.section { padding-top: 130px; }
.section .section-eyebrow { position: relative; z-index: 1; }
.section h3 { position: relative; z-index: 1; }

/* ===== Final CTA ===== */
.final {
  margin-top: 20px;
  text-align: center;
  padding: 100px 32px 140px;
  position: relative;
  background: linear-gradient(180deg, transparent, rgba(11,21,48,0.04));
}
.final h3 {
  font-family: var(--display);
  font-size: clamp(64px, 8vw, 130px);
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  background: linear-gradient(180deg, #fff2b8 0%, #f3d36b 35%, #d8a93a 60%, #8a5e10 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(255,255,255,0.5));
  font-weight: 700;
}
.final p { font-size: 16px; color: rgba(11,21,48,0.7); margin: 0 0 36px; }
.final .copy-row { margin-bottom: 36px; }

/* ===== Terms ===== */
.terms {
  background: linear-gradient(180deg, #0b1530, #050a1c);
  color: rgba(255,255,255,0.7);
  padding: 80px 32px;
  border-top: 2px solid var(--gold);
}
.terms-inner { max-width: 1000px; margin: 0 auto; }
.terms h4 {
  font-family: var(--display);
  font-size: 14px; letter-spacing: 0.3em;
  background: linear-gradient(180deg, #f3d36b, #8a5e10);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0 0 22px;
}
.terms ul { padding-left: 18px; line-height: 2; font-size: 13px; }
.terms ul li::marker { color: var(--gold); }
.footer-bar {
  background: #050a1c;
  color: rgba(255,255,255,0.5);
  padding: 22px 32px;
  display: flex; justify-content: flex-start; align-items: center; gap: 16px;
  font-size: 12px;
}
.footer-bar svg { opacity: 0.85; }

/* ===== Demon mode ===== */
body.demon { background: #0a0612; color: #f3e9ff; }
body.demon .page-bg {
  background:
    radial-gradient(1200px 600px at 50% -100px, #4d1066 0%, transparent 60%),
    radial-gradient(900px 700px at 90% 10%, #2a0a3a 0%, transparent 55%),
    linear-gradient(180deg, #0a0612 0%, #14081e 100%);
}
body.demon .topbar { background: rgba(20,8,30,0.7); border-bottom-color: rgba(139,58,168,0.3); }
body.demon .topbar nav a { color: rgba(243,233,255,0.7); }
body.demon .step-card {
  background: linear-gradient(180deg, rgba(40,18,58,0.7), rgba(20,8,30,0.85));
  border-color: rgba(139,58,168,0.35);
  color: #f3e9ff;
  box-shadow: 0 6px 0 rgba(139,58,168,0.2), 0 20px 40px -20px rgba(139,58,168,0.4);
}
body.demon .step-card.active {
  background: linear-gradient(180deg, #4d1066 0%, #14081e 100%);
  border-color: #ff5ec8;
}
body.demon .step-card.active .step-name {
  background: linear-gradient(180deg, #ffc8e8, #ff5ec8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.demon .step-numplate {
  background: radial-gradient(circle at 50% 30%, #ffc8e8, #ff5ec8 45%, #8b3aa8 75%, #2a0a3a);
  color: #14081e;
}
body.demon .prize-panel {
  background: linear-gradient(180deg, #1a0a2a, #0a0612);
  border-color: rgba(255,94,200,0.5);
}
body.demon .prize-panel .l { color: #ff5ec8; }
body.demon .prize-panel .a {
  background: linear-gradient(180deg, #ffc8e8, #ff5ec8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.demon .step-card.active .prize-panel {
  background: linear-gradient(180deg, #ff5ec8, #8b3aa8);
  color: #14081e;
}
body.demon .step-card.active .prize-panel .a {
  background: linear-gradient(180deg, #2a0a3a, #14081e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.demon .how-card {
  background: rgba(20,8,30,0.6); border-color: rgba(139,58,168,0.25);
  color: #f3e9ff;
}
body.demon .how-card p { color: rgba(243,233,255,0.7); }
body.demon .how-card .num {
  background: linear-gradient(180deg, #ff5ec8, #8b3aa8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.demon .how-card .step-stamp { color: #ff5ec8; }
body.demon .game-tile {
  background: rgba(20,8,30,0.6); border-color: rgba(139,58,168,0.25);
  color: #f3e9ff;
}
body.demon .faq-item { background: rgba(20,8,30,0.5); border-color: rgba(139,58,168,0.25); }
body.demon .faq-q .qmark { background: linear-gradient(180deg, #ff5ec8, #8b3aa8); color: white; }
body.demon .faq-toggle { border-color: rgba(243,233,255,0.3); color: #f3e9ff; }
body.demon .faq-item.open .faq-toggle { background: #ff5ec8; color: var(--ink); border-color: #ff5ec8; }
body.demon .faq-a { color: rgba(243,233,255,0.7); }
body.demon .code-card {
  background: linear-gradient(135deg, rgba(139,58,168,0.15), rgba(255,94,200,0.08)), #14081e;
  border-color: rgba(255,94,200,0.5);
}
body.demon .code-pill {
  background: #1c0a2a; color: #f3e9ff; border-color: #ff5ec8;
}
body.demon .code-pill .copy { background: linear-gradient(180deg, #ffc8e8, #ff5ec8); color: #14081e; }
body.demon .section-eyebrow { color: #ff5ec8; }
body.demon .section h3 { color: #f3e9ff; }
body.demon .section h3 .accent {
  background: linear-gradient(180deg, #ffc8e8, #ff5ec8, #8b3aa8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.demon .section .sub { color: rgba(243,233,255,0.7); }
body.demon .hero h1 .gold {
  background: linear-gradient(180deg, #ffc8e8, #ff5ec8 35%, #8b3aa8 70%, #4d1066);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.demon .hero h2 { color: #f3e9ff; }
body.demon .hero .lede { color: rgba(243,233,255,0.7); }
body.demon .price-old { color: rgba(243,233,255,0.4); }
body.demon .final h3 {
  background: linear-gradient(180deg, #ffc8e8, #ff5ec8 35%, #8b3aa8 70%, #4d1066);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.demon .final p { color: rgba(243,233,255,0.7); }
body.demon .medallion-bg {
  background:
    radial-gradient(circle at 50% 30%, #ffc8e8 0%, #ff5ec8 35%, #8b3aa8 65%, #2a0a3a 100%);
  box-shadow:
    0 0 0 6px rgba(255,255,255,0.3),
    0 0 0 7px rgba(139,58,168,0.6),
    0 0 0 14px rgba(255,94,200,0.2),
    0 30px 80px -20px rgba(139,58,168,0.5);
}
body.demon .accent-char .orb {
  background:
    radial-gradient(circle at 50% 30%, #ffc8e8 0%, #ff5ec8 35%, #8b3aa8 70%, #2a0a3a 100%);
}
body.demon .stat-chip {
  background: linear-gradient(180deg, rgba(40,18,58,0.95), rgba(20,8,30,0.92));
  border-color: rgba(255,94,200,0.5);
  color: #f3e9ff;
}
body.demon .stat-chip .label { color: #ff5ec8; }
body.demon .stat-chip .value { color: #f3e9ff; }
body.demon .stat-chip .value.gold {
  background: linear-gradient(180deg, #ffc8e8, #ff5ec8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.demon .btn-gacha.gold::after {
  background: linear-gradient(180deg, #ffc8e8 0%, #ff5ec8 35%, #8b3aa8 75%, #4d1066 100%);
}
body.demon .btn-gacha.gold::before { background: linear-gradient(180deg, #4d1066, #1c0a2a); }
body.demon .btn-gacha.ghost {
  background: rgba(20,8,30,0.5); border-color: rgba(243,233,255,0.2); color: #f3e9ff;
}
body.demon .terms { background: linear-gradient(180deg, #14081e, #0a0612); border-top-color: #ff5ec8; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .hero-cinematic { min-height: 600px; }
  .hero-inner { grid-template-columns: 1fr; padding: 60px 24px 140px; min-height: 600px; }
  .hero-stats { flex-direction: row; flex-wrap: wrap; }
  .hero-stat { flex: 1 1 30%; min-width: 140px; }
  .step-card { grid-template-columns: 84px 1fr 100px 180px; gap: 14px; padding: 20px; }
  .roster-row { grid-template-columns: repeat(4, 1fr); }
  .roster-card:nth-child(n+5) { display: none; }
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .games-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar nav { display: none; }
  .tower::before { left: 55px; }
  .accent-char { width: 110px; height: 110px; top: -40px; }
  .section { padding-top: 110px; }
}

@media (max-width: 720px) {
  /* topbar: condense */
  .topbar { padding: 12px 16px; gap: 8px; }
  .topbar .brand-text .main { font-size: 12px; letter-spacing: 0.06em; }
  .topbar .brand-text .sub { font-size: 8px; }
  .topbar .pill { font-size: 9px; letter-spacing: 0.1em; padding: 6px 10px; }

  /* hero: tighter */
  .hero-cinematic { min-height: 520px; }
  .hero-inner { padding: 40px 18px 110px; gap: 24px; min-height: 520px; }
  .hero-bg img { object-position: center 25%; }
  .hero-copy h1 { font-size: clamp(48px, 14vw, 72px); margin: 14px 0 6px; }
  .hero-copy h2 { font-size: 16px; margin-bottom: 16px; }
  .hero-copy .lede { font-size: 13px; margin-bottom: 20px; line-height: 1.7; }
  .hero-copy .price-row { gap: 10px; margin-bottom: 24px; }
  .hero-copy .price-old { font-size: 20px; }
  .hero-copy .price-arrow { font-size: 18px; }
  .hero-copy .price-new { font-size: 44px; }
  .hero-copy .price-new small { font-size: 14px; }
  .price-tag { font-size: 10px; padding: 5px 10px; }
  .cta-row { gap: 10px; }
  .btn-gacha { padding: 14px 22px 16px; font-size: 13px; }
  .hero-stats { gap: 8px; }
  .hero-stat { padding: 10px 14px; flex: 1 1 45%; }
  .hero-stat .lbl { font-size: 8px; letter-spacing: 0.22em; }
  .hero-stat .val { font-size: 22px; }

  /* sections */
  .section { padding: 90px 18px 56px; }
  .section h3 { font-size: clamp(30px, 7vw, 40px); }
  .section .sub { font-size: 13px; margin-bottom: 36px; }
  .section-eyebrow { font-size: 10px; letter-spacing: 0.3em; }
  .section-eyebrow::before, .section-eyebrow::after { flex-basis: 30px; }

  /* step cards: stack vertically */
  .tower { gap: 18px; }
  .tower::before { display: none; }
  .step-card {
    grid-template-columns: 70px 1fr;
    grid-template-areas:
      "plate body"
      "char  char"
      "prize prize";
    gap: 12px;
    padding: 18px;
  }
  .step-numplate { grid-area: plate; width: 70px; height: 70px; }
  .step-numplate .n { font-size: 30px; margin-top: 6px; }
  .step-body { grid-area: body; padding: 0; }
  .step-name { font-size: 22px; margin-bottom: 6px; }
  .step-meta { gap: 10px; font-size: 11px; }
  .step-char {
    grid-area: char;
    width: 100%; height: 90px;
    margin-top: 4px;
  }
  .step-char img { width: auto; height: 110%; max-width: 90px; }
  .prize-panel { grid-area: prize; padding: 12px; }
  .prize-panel .a { font-size: 26px; }
  .prize-panel .yen { font-size: 16px; }
  .step-badge { left: 12px; top: -10px; }

  .tower-progress { margin-top: 28px; }

  /* how + games */
  .how-grid { grid-template-columns: 1fr; gap: 10px; }
  .how-card { min-height: 0; padding: 18px; }
  .how-card .num { font-size: 48px; }
  .games-grid { grid-template-columns: 1fr; gap: 10px; }
  .game-tile { padding: 14px 16px; font-size: 13px; }

  /* faq */
  .faq-item { padding: 14px 16px; }
  .faq-q { font-size: 13px; }
  .faq-a { font-size: 12px; padding-left: 32px; }

  /* code card */
  .code-card { padding: 28px 20px; margin-top: 50px; }
  .code-card h3 { font-size: 22px !important; }
  .code-pill { font-size: 16px; padding: 12px 14px 12px 18px; }
  .code-pill .copy { font-size: 10px; padding: 6px 10px; }

  /* final */
  .final { padding: 60px 18px 90px; }
  .final h3 { font-size: clamp(48px, 14vw, 72px); }
  .final p { font-size: 13px; }
  .btn-gacha.crimson { font-size: 16px; padding: 20px 44px 22px; letter-spacing: 0.18em; }

  /* terms */
  .terms { padding: 50px 18px; }
  .terms ul { font-size: 12px; line-height: 1.9; }

  /* accent char above title */
  .accent-char { width: 88px; height: 88px; top: -28px; }
  .section { padding-top: 90px; }
}