/* ============ BLACK BULL 40K ============ */
:root {
  --skull-tile: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'><rect x='3' y='2' width='1' height='1' fill='%2316300a'/><rect x='4' y='2' width='1' height='1' fill='%2316300a'/><rect x='5' y='2' width='1' height='1' fill='%2316300a'/><rect x='6' y='2' width='1' height='1' fill='%2316300a'/><rect x='7' y='2' width='1' height='1' fill='%2316300a'/><rect x='2' y='3' width='1' height='1' fill='%2316300a'/><rect x='3' y='3' width='1' height='1' fill='%2316300a'/><rect x='4' y='3' width='1' height='1' fill='%2316300a'/><rect x='5' y='3' width='1' height='1' fill='%2316300a'/><rect x='6' y='3' width='1' height='1' fill='%2316300a'/><rect x='7' y='3' width='1' height='1' fill='%2316300a'/><rect x='8' y='3' width='1' height='1' fill='%2316300a'/><rect x='1' y='4' width='1' height='1' fill='%2316300a'/><rect x='2' y='4' width='1' height='1' fill='%2316300a'/><rect x='3' y='4' width='1' height='1' fill='%2316300a'/><rect x='5' y='4' width='1' height='1' fill='%2316300a'/><rect x='7' y='4' width='1' height='1' fill='%2316300a'/><rect x='8' y='4' width='1' height='1' fill='%2316300a'/><rect x='9' y='4' width='1' height='1' fill='%2316300a'/><rect x='1' y='5' width='1' height='1' fill='%2316300a'/><rect x='2' y='5' width='1' height='1' fill='%2316300a'/><rect x='5' y='5' width='1' height='1' fill='%2316300a'/><rect x='8' y='5' width='1' height='1' fill='%2316300a'/><rect x='9' y='5' width='1' height='1' fill='%2316300a'/><rect x='1' y='6' width='1' height='1' fill='%2316300a'/><rect x='2' y='6' width='1' height='1' fill='%2316300a'/><rect x='3' y='6' width='1' height='1' fill='%2316300a'/><rect x='4' y='6' width='1' height='1' fill='%2316300a'/><rect x='5' y='6' width='1' height='1' fill='%2316300a'/><rect x='6' y='6' width='1' height='1' fill='%2316300a'/><rect x='7' y='6' width='1' height='1' fill='%2316300a'/><rect x='8' y='6' width='1' height='1' fill='%2316300a'/><rect x='9' y='6' width='1' height='1' fill='%2316300a'/><rect x='2' y='7' width='1' height='1' fill='%2316300a'/><rect x='3' y='7' width='1' height='1' fill='%2316300a'/><rect x='5' y='7' width='1' height='1' fill='%2316300a'/><rect x='7' y='7' width='1' height='1' fill='%2316300a'/><rect x='8' y='7' width='1' height='1' fill='%2316300a'/><rect x='3' y='8' width='1' height='1' fill='%2316300a'/><rect x='4' y='8' width='1' height='1' fill='%2316300a'/><rect x='5' y='8' width='1' height='1' fill='%2316300a'/><rect x='6' y='8' width='1' height='1' fill='%2316300a'/><rect x='7' y='8' width='1' height='1' fill='%2316300a'/><rect x='3' y='9' width='1' height='1' fill='%2316300a'/><rect x='5' y='9' width='1' height='1' fill='%2316300a'/><rect x='7' y='9' width='1' height='1' fill='%2316300a'/><rect x='15' y='14' width='1' height='1' fill='%2316300a'/><rect x='16' y='14' width='1' height='1' fill='%2316300a'/><rect x='17' y='14' width='1' height='1' fill='%2316300a'/><rect x='18' y='14' width='1' height='1' fill='%2316300a'/><rect x='19' y='14' width='1' height='1' fill='%2316300a'/><rect x='14' y='15' width='1' height='1' fill='%2316300a'/><rect x='15' y='15' width='1' height='1' fill='%2316300a'/><rect x='16' y='15' width='1' height='1' fill='%2316300a'/><rect x='17' y='15' width='1' height='1' fill='%2316300a'/><rect x='18' y='15' width='1' height='1' fill='%2316300a'/><rect x='19' y='15' width='1' height='1' fill='%2316300a'/><rect x='20' y='15' width='1' height='1' fill='%2316300a'/><rect x='13' y='16' width='1' height='1' fill='%2316300a'/><rect x='14' y='16' width='1' height='1' fill='%2316300a'/><rect x='15' y='16' width='1' height='1' fill='%2316300a'/><rect x='17' y='16' width='1' height='1' fill='%2316300a'/><rect x='19' y='16' width='1' height='1' fill='%2316300a'/><rect x='20' y='16' width='1' height='1' fill='%2316300a'/><rect x='21' y='16' width='1' height='1' fill='%2316300a'/><rect x='13' y='17' width='1' height='1' fill='%2316300a'/><rect x='14' y='17' width='1' height='1' fill='%2316300a'/><rect x='17' y='17' width='1' height='1' fill='%2316300a'/><rect x='20' y='17' width='1' height='1' fill='%2316300a'/><rect x='21' y='17' width='1' height='1' fill='%2316300a'/><rect x='13' y='18' width='1' height='1' fill='%2316300a'/><rect x='14' y='18' width='1' height='1' fill='%2316300a'/><rect x='15' y='18' width='1' height='1' fill='%2316300a'/><rect x='16' y='18' width='1' height='1' fill='%2316300a'/><rect x='17' y='18' width='1' height='1' fill='%2316300a'/><rect x='18' y='18' width='1' height='1' fill='%2316300a'/><rect x='19' y='18' width='1' height='1' fill='%2316300a'/><rect x='20' y='18' width='1' height='1' fill='%2316300a'/><rect x='21' y='18' width='1' height='1' fill='%2316300a'/><rect x='14' y='19' width='1' height='1' fill='%2316300a'/><rect x='15' y='19' width='1' height='1' fill='%2316300a'/><rect x='17' y='19' width='1' height='1' fill='%2316300a'/><rect x='19' y='19' width='1' height='1' fill='%2316300a'/><rect x='20' y='19' width='1' height='1' fill='%2316300a'/><rect x='15' y='20' width='1' height='1' fill='%2316300a'/><rect x='16' y='20' width='1' height='1' fill='%2316300a'/><rect x='17' y='20' width='1' height='1' fill='%2316300a'/><rect x='18' y='20' width='1' height='1' fill='%2316300a'/><rect x='19' y='20' width='1' height='1' fill='%2316300a'/><rect x='15' y='21' width='1' height='1' fill='%2316300a'/><rect x='17' y='21' width='1' height='1' fill='%2316300a'/><rect x='19' y='21' width='1' height='1' fill='%2316300a'/><rect x='5' y='5' width='1' height='1' fill='%238aff00'/><rect x='17' y='17' width='1' height='1' fill='%238aff00'/></svg>");
  --bg: #05070a;
  --bg2: #0a0f0a;
  --panel: #0c120c;
  --green: #8aff00;
  --green-dim: #4a8f0a;
  --green-deep: #1d3a08;
  --green-glow: rgba(138, 255, 0, 0.55);
  --bone: #d6d2c4;
  --gray: #8a948a;
  --common: #9aa39a;
  --rare: #35e08d;
  --epic: #b64dff;
  --legendary: #ffb428;
  --mythic: #ff3b3b;
  --font-display: "Grenze Gotisch", serif;
  --font-body: "Rajdhani", sans-serif;
  --font-caps: "Cinzel", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: crosshair;
}
img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration: none; }

::selection { background: var(--green); color: #000; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #060906; }
::-webkit-scrollbar-thumb { background: var(--green-deep); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-dim); }

/* ---------- atmosphere ---------- */
.noise-overlay {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: noiseShift 0.4s steps(2) infinite;
}
@keyframes noiseShift { 50% { transform: translate(-4px, 3px); } }

.scanlines {
  position: fixed; inset: 0; z-index: 9991; pointer-events: none; opacity: 0.35; mix-blend-mode: overlay;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.35) 2px 4px);
}

.cursor {
  position: fixed; z-index: 9999; width: 22px; height: 22px; pointer-events: none;
  border: 1px solid var(--green); border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.18s, height 0.18s, background 0.18s, opacity 0.3s;
  mix-blend-mode: screen; opacity: 0;
}
.cursor::after {
  content: ""; position: absolute; inset: 8px; background: var(--green); border-radius: 50%;
  box-shadow: 0 0 8px var(--green-glow);
}
.cursor.is-active { opacity: 1; }
.cursor.is-hover { width: 44px; height: 44px; background: rgba(138, 255, 0, 0.08); }
@media (hover: none) { .cursor { display: none; } body { cursor: auto; } }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0.12em;
  border: 1px solid var(--green); background: transparent; color: var(--green);
  padding: 0.8em 1.7em; cursor: pointer; position: relative; overflow: hidden;
  text-transform: uppercase; transition: all 0.25s; display: inline-block; user-select: none;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.btn:hover { box-shadow: 0 0 24px var(--green-glow), inset 0 0 18px rgba(138, 255, 0, 0.15); text-shadow: 0 0 8px var(--green); }
.btn--primary { background: var(--green); color: #05070a; }
.btn--primary:hover { background: #a4ff33; color: #000; text-shadow: none; }
.btn--ghost { background: rgba(138, 255, 0, 0.04); }
.btn--small { padding: 0.45em 1em; font-size: 0.8rem; }
.btn--big { font-size: 1.05rem; padding: 1em 2.2em; }

.btn--gacha {
  width: 100%; font-size: 1.3rem; padding: 1.2em; margin-top: 1.5rem;
  font-family: var(--font-display); letter-spacing: 0.08em;
  background: linear-gradient(180deg, #182a08, #0a1404);
  border: 2px solid var(--green); color: var(--green);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  animation: gachaBtnPulse 2.2s ease-in-out infinite;
  cursor: pointer; text-transform: uppercase; transition: transform 0.15s;
}
.btn--gacha:hover { transform: scale(1.02); }
.btn--gacha:active { transform: scale(0.97); }
.btn--gacha__coin { display: inline-block; animation: coinSpin 3s linear infinite; }
@keyframes gachaBtnPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(138, 255, 0, 0.25); }
  50% { box-shadow: 0 0 42px rgba(138, 255, 0, 0.6), inset 0 0 24px rgba(138, 255, 0, 0.12); }
}
@keyframes coinSpin { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 2rem; transition: all 0.35s;
  background: linear-gradient(to bottom, rgba(4, 7, 4, 0.85), transparent);
}
.nav.is-scrolled {
  background: rgba(5, 8, 5, 0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(138, 255, 0, 0.18); padding: 0.6rem 2rem;
}
.nav__logo { display: flex; align-items: center; gap: 0.6rem; }
.nav__sigil { font-size: 1.5rem; filter: drop-shadow(0 0 6px var(--green-glow)); }
.nav__name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--bone); letter-spacing: 0.06em; }
.nav__name em { color: var(--green); font-style: normal; text-shadow: 0 0 12px var(--green-glow); }
.nav__links { display: flex; gap: 1.6rem; }
.nav__links a {
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.15em; color: var(--gray);
  transition: all 0.2s; position: relative;
}
.nav__links a:hover { color: var(--green); text-shadow: 0 0 10px var(--green-glow); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px;
  background: var(--green); transition: width 0.25s; box-shadow: 0 0 6px var(--green);
}
.nav__links a:hover::after { width: 100%; }
.nav__actions { display: flex; gap: 0.6rem; align-items: center; }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav__burger span { width: 26px; height: 2px; background: var(--green); box-shadow: 0 0 6px var(--green-glow); transition: 0.3s; }

@media (max-width: 900px) {
  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(5, 8, 5, 0.97); flex-direction: column; padding: 1.5rem 2rem; gap: 1.1rem;
    border-bottom: 1px solid rgba(138, 255, 0, 0.2);
  }
  .nav__links.is-open { display: flex; }
  .nav__burger { display: flex; }
  .nav__actions .btn--ghost { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: center;
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.15) contrast(1.1);
}
.hero__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 20%, rgba(3, 6, 3, 0.75) 75%, #030603 100%),
    linear-gradient(to bottom, rgba(3, 6, 3, 0.55), rgba(3, 6, 3, 0.25) 40%, var(--bg) 98%);
}
.hero__embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__content { position: relative; z-index: 2; padding: 6rem 1.5rem 3rem; max-width: 1000px; }
.hero__pre {
  font-family: var(--font-caps); letter-spacing: 0.4em; font-size: clamp(0.6rem, 1.6vw, 0.85rem);
  color: var(--gray); margin-bottom: 1rem;
}
.hero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 11vw, 8.5rem); line-height: 0.95; color: var(--bone);
  text-shadow: 0 0 40px rgba(138, 255, 0, 0.25), 0 4px 0 #000;
  margin-bottom: 1.2rem;
}
.hero__title span { color: var(--green); text-shadow: 0 0 30px var(--green-glow), 0 0 80px var(--green-glow); }
.hero__sub {
  font-weight: 600; letter-spacing: 0.28em; font-size: clamp(0.65rem, 1.8vw, 0.95rem);
  color: var(--gray); margin-bottom: 2.2rem;
}
.hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
.hero__scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: 0.65rem; letter-spacing: 0.3em; color: var(--gray);
}
.hero__scroll span {
  display: block; width: 1px; height: 42px; margin: 8px auto 0;
  background: linear-gradient(to bottom, var(--green), transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* glitch */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; opacity: 0;
  font-family: inherit; pointer-events: none;
}
.glitch::before { color: var(--green); z-index: -1; }
.glitch::after { color: #ff3b3b; z-index: -2; }
.glitch.is-glitching::before { opacity: 0.8; animation: glitchShift 0.25s steps(2) 2; }
.glitch.is-glitching::after { opacity: 0.6; animation: glitchShift 0.25s steps(2) 2 reverse; }
@keyframes glitchShift {
  0% { transform: translate(-6px, 3px); clip-path: inset(10% 0 60% 0); }
  50% { transform: translate(5px, -4px); clip-path: inset(55% 0 15% 0); }
  100% { transform: translate(-3px, 2px); clip-path: inset(30% 0 40% 0); }
}

/* CA bar */

/* ---------- ticker ---------- */
.ticker {
  overflow: hidden; border-top: 1px solid rgba(138, 255, 0, 0.25); border-bottom: 1px solid rgba(138, 255, 0, 0.25);
  background: linear-gradient(90deg, #060a05, #0a120a, #060a05); padding: 0.7rem 0; position: relative; z-index: 5;
}
.ticker__track { display: flex; gap: 3.5rem; white-space: nowrap; width: max-content; animation: tickerMove 30s linear infinite; }
.ticker__track span { font-weight: 700; letter-spacing: 0.22em; font-size: 0.8rem; color: var(--green-dim); }
.ticker__track span:nth-child(odd) { color: var(--green); text-shadow: 0 0 10px rgba(138, 255, 0, 0.4); }
@keyframes tickerMove { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { position: relative; padding: 7rem 2rem; max-width: 1280px; margin: 0 auto; }
.section__head { text-align: center; margin-bottom: 3.5rem; }
.section__tag {
  font-family: var(--font-caps); font-size: 0.7rem; letter-spacing: 0.5em; color: var(--green-dim);
  display: inline-block; margin-bottom: 0.8rem;
}
.section__tag::before, .section__tag::after { content: "—"; margin: 0 0.8em; color: var(--green-deep); }
.section__title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 4rem);
  color: var(--bone); line-height: 1; text-shadow: 0 3px 0 #000;
}
.section__title em { color: var(--green); font-style: normal; text-shadow: 0 0 26px var(--green-glow); }
.section__desc { color: var(--gray); margin-top: 1rem; letter-spacing: 0.08em; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- lore ---------- */
.lore__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3.5rem; align-items: center; }
.lore__text p { margin-bottom: 1.3rem; color: #b9b5a8; font-size: 1.05rem; }
.lore__text strong { color: var(--green); font-weight: 700; }
.lore__quote {
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1.35; color: var(--bone);
  border-left: 3px solid var(--green); padding-left: 1.2rem; margin-top: 2rem;
  text-shadow: 0 0 18px rgba(138, 255, 0, 0.15);
}
.lore__quote em { color: var(--green); font-style: normal; }
.lore__quote small { font-family: var(--font-body); color: var(--gray); letter-spacing: 0.1em; font-size: 0.8rem; }
.lore__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.stat {
  border: 1px solid rgba(138, 255, 0, 0.2); background: linear-gradient(160deg, #0a120a, #060a06);
  padding: 1.6rem 1.2rem; text-align: center; position: relative; overflow: hidden;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.stat::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(138, 255, 0, 0.07), transparent);
  animation: statSheen 4s ease-in-out infinite;
}
@keyframes statSheen { 0%, 60% { left: -80%; } 100% { left: 130%; } }
.stat__num {
  font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--green);
  text-shadow: 0 0 22px var(--green-glow); display: block; line-height: 1;
}
.stat__label { font-size: 0.68rem; letter-spacing: 0.2em; color: var(--gray); font-weight: 600; }

@media (max-width: 900px) { .lore__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------- squad ---------- */
.squad__commander { margin-bottom: 2rem; }
.char-card--commander {
  display: grid; grid-template-columns: 380px 1fr; gap: 0; overflow: hidden;
  border: 1px solid rgba(255, 59, 59, 0.45); background: linear-gradient(140deg, #120808, #0a0505 60%, #140a0a);
  position: relative; cursor: pointer; transition: all 0.3s;
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.char-card--commander:hover { border-color: var(--mythic); box-shadow: 0 0 50px rgba(255, 59, 59, 0.25); }
.char-card--commander .char-card__img { height: 100%; min-height: 320px; }
.char-card--commander .char-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.6s; }
.char-card--commander:hover .char-card__img img { transform: scale(1.06); }
.char-card--commander .char-card__body { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.char-card--commander .char-card__name { font-size: clamp(2rem, 4vw, 3.2rem); }
.char-card--commander .char-card__quote { font-size: 1.1rem; margin-top: 1rem; }

.squad__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.4rem; }
.char-card {
  position: relative; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(138, 255, 0, 0.18); background: linear-gradient(160deg, #0b110b, #070b07);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transform-style: preserve-3d;
}
.char-card:hover { border-color: var(--green); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6), 0 0 30px rgba(138, 255, 0, 0.12); z-index: 2; }
.char-card__img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.char-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; filter: saturate(1.05); }
.char-card:hover .char-card__img img { transform: scale(1.09); }
.char-card__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5, 8, 5, 0.95), transparent 45%);
}
.char-card__rarity {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; padding: 0.3em 0.9em;
  background: rgba(0, 0, 0, 0.75); border: 1px solid currentColor; backdrop-filter: blur(4px);
}
.char-card__rate {
  position: absolute; top: 12px; right: 12px; z-index: 2; font-family: monospace;
  font-size: 0.7rem; color: var(--gray); background: rgba(0, 0, 0, 0.6); padding: 0.2em 0.6em;
}
.char-card__body { padding: 1.1rem 1.2rem 1.3rem; position: relative; }
.char-card__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; line-height: 1; color: var(--bone);
}
.char-card__title { font-size: 0.72rem; letter-spacing: 0.18em; color: var(--green-dim); font-weight: 600; margin-top: 0.35rem; text-transform: uppercase; }
.char-card__quote { font-style: italic; color: var(--gray); font-size: 0.88rem; margin-top: 0.7rem; line-height: 1.45; }
.char-card__cta { margin-top: 0.8rem; font-size: 0.65rem; letter-spacing: 0.25em; color: var(--green); opacity: 0; transition: opacity 0.25s; }
.char-card:hover .char-card__cta { opacity: 1; }

.r-common { color: var(--common); } .r-rare { color: var(--rare); } .r-epic { color: var(--epic); }
.r-legendary { color: var(--legendary); } .r-mythic { color: var(--mythic); }

.squad__legend { display: flex; justify-content: center; gap: 1.8rem; flex-wrap: wrap; margin-top: 2.5rem; }
.squad__legend span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; display: flex; align-items: center; gap: 0.5em; }
.squad__legend i { width: 10px; height: 10px; background: currentColor; box-shadow: 0 0 10px currentColor; }

@media (max-width: 800px) {
  .char-card--commander { grid-template-columns: 1fr; }
  .char-card--commander .char-card__img { max-height: 380px; }
}

/* ---------- box ---------- */
.box { max-width: 1280px; }
.box__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; }
.box__visual { position: relative; }
.box__glow {
  position: absolute; inset: 8%; background: radial-gradient(circle, rgba(138, 255, 0, 0.22), transparent 65%);
  filter: blur(30px); animation: boxGlow 3.4s ease-in-out infinite;
}
@keyframes boxGlow { 0%, 100% { opacity: 0.5; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
.box__visual img { position: relative; animation: boxFloat 5.5s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.7)); }
@keyframes boxFloat { 0%, 100% { transform: translateY(0) rotate(-0.5deg); } 50% { transform: translateY(-16px) rotate(0.5deg); } }
.box__info .section__title { margin-bottom: 1.2rem; }
.box__info > p { color: #b9b5a8; margin-bottom: 1.4rem; }
.box__list { list-style: none; margin-bottom: 2rem; }
.box__list li {
  padding: 0.65rem 0 0.65rem 1.8rem; position: relative; color: #c9c5b8;
  border-bottom: 1px solid rgba(138, 255, 0, 0.1); font-size: 0.98rem;
}
.box__list li::before {
  content: "☠"; position: absolute; left: 0; color: var(--green);
  filter: drop-shadow(0 0 6px var(--green-glow)); font-size: 0.9rem;
}
.box__list b { color: var(--green); letter-spacing: 0.05em; }
.box__cta { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.box__note { font-size: 0.75rem; letter-spacing: 0.15em; color: var(--gray); }
@media (max-width: 900px) { .box__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------- machine ---------- */
.machine { max-width: 1280px; }
.machine__embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.machine__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; position: relative; }
.machine__visual { position: relative; text-align: center; }
.machine__aura {
  position: absolute; inset: 4%; background: radial-gradient(circle, rgba(138, 255, 0, 0.28), transparent 60%);
  filter: blur(38px); animation: boxGlow 2.8s ease-in-out infinite;
}
/* the machine art is transparent PNG/WebP — picture must not create a box
   or it breaks the centering and the aura showing through behind it */
.machine__visual picture, .gacha__machine picture { display: contents; }
.machine__visual img {
  position: relative; max-height: 640px; margin: 0 auto;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.8));
  animation: machineIdle 4s ease-in-out infinite;
}
@keyframes machineIdle {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 24px 50px rgba(0,0,0,0.8)) drop-shadow(0 0 18px rgba(138,255,0,0.15)); }
  50% { transform: translateY(-10px); filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)) drop-shadow(0 0 34px rgba(138,255,0,0.35)); }
}
.machine__steps { display: flex; flex-direction: column; gap: 0.7rem; }
.mstep {
  display: flex; align-items: center; gap: 1rem; font-weight: 600; letter-spacing: 0.14em; font-size: 0.92rem;
  border: 1px solid rgba(138, 255, 0, 0.15); padding: 0.85rem 1.2rem; color: #c9c5b8;
  background: linear-gradient(90deg, rgba(138, 255, 0, 0.05), transparent);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.mstep span { font-family: var(--font-display); font-size: 1.4rem; color: var(--green); text-shadow: 0 0 12px var(--green-glow); }
.machine__code-toggle {
  display: block; margin: 0.8rem auto 0; background: none; border: 0; cursor: pointer;
  color: var(--green); font: 700 0.72rem var(--font-body); letter-spacing: 0.24em;
  text-decoration: underline dotted; text-underline-offset: 4px;
}
.machine__code-toggle[hidden], .machine__code[hidden] { display: none; }
.machine__code { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.machine__code input {
  flex: 1; min-width: 0; background: rgba(138, 255, 0, 0.04); border: 1px solid rgba(138, 255, 0, 0.35);
  color: var(--bone); font: 700 0.95rem var(--font-body); letter-spacing: 0.14em; padding: 0.6rem 0.8rem;
  text-transform: uppercase;
}
.machine__code input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.machine__code .btn { padding: 0.6rem 1rem; }
.machine__hint { text-align: center; font-size: 0.72rem; letter-spacing: 0.2em; color: var(--gray); margin-top: 0.7rem; }

/* vault */
.vault { margin-top: 2.2rem; border-top: 1px solid rgba(138, 255, 0, 0.15); padding-top: 1.6rem; }
.vault__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.vault__head h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--bone); letter-spacing: 0.05em; }
.vault__head span { font-family: monospace; font-size: 0.8rem; color: var(--green); }
.vault__reset {
  margin-left: auto; background: none; border: 1px solid rgba(255, 59, 59, 0.4); color: #ff6b6b;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; padding: 0.3em 0.9em; cursor: pointer; transition: 0.2s;
  font-family: var(--font-body);
}
.vault__reset:hover { background: rgba(255, 59, 59, 0.15); }
.vault__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 0.6rem; }
.vault-slot {
  aspect-ratio: 3 / 4; overflow: hidden; position: relative; border: 1px solid rgba(138, 255, 0, 0.15);
  background: #060a06;
}
.vault-slot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.22); transition: filter 0.6s; }
.vault-slot.is-owned img { filter: none; }
.vault-slot.is-owned { border-color: currentColor; box-shadow: 0 0 12px -2px currentColor; }
.vault-slot.is-owned { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.vault-slot.is-owned:hover, .vault-slot.is-owned:focus-visible { transform: translateY(-3px); box-shadow: 0 0 22px 0 currentColor; outline: none; }
.vrow[role="button"] { cursor: pointer; }
.vrow[role="button"]:hover { background: rgba(138, 255, 0, 0.06); }
.vault-slot__q {
  position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display);
  font-size: 1.6rem; color: rgba(138, 255, 0, 0.4);
}
.vault-slot.is-owned .vault-slot__q { display: none; }
@media (max-width: 900px) { .machine__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------- grimnomics ---------- */
.grim__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; margin-bottom: 3rem; }
.grim-card {
  border: 1px solid rgba(138, 255, 0, 0.2); padding: 2rem 1.6rem; text-align: center;
  background: linear-gradient(170deg, #0b110b, #060a06); position: relative; overflow: hidden;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transition: transform 0.3s, box-shadow 0.3s;
}
.grim-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 26px rgba(138, 255, 0, 0.12); }
.grim-card__num {
  font-family: var(--font-display); font-size: 3.2rem; font-weight: 800; color: var(--green);
  text-shadow: 0 0 26px var(--green-glow); display: block; line-height: 1.05;
}
/* "0.1 SOL" — the unit rides at a third the size so the figure still reads as
   a display number rather than a sentence. */
.grim-card__num small {
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 700;
  letter-spacing: .14em; margin-left: .35rem; vertical-align: .55em;
}
.grim-card__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.3em; color: var(--bone); display: block; margin: 0.5rem 0 0.9rem; }
.grim-card p { font-size: 0.88rem; color: var(--gray); line-height: 1.55; }
.grim__note {
  max-width: 760px; margin: 0 auto 2.5rem; text-align: center;
  font-size: 0.78rem; line-height: 1.7; color: #6f776d; letter-spacing: 0.04em;
}
.grim__cta { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ---------- warpath ---------- */
.timeline { position: relative; max-width: 780px; margin: 0 auto; padding-left: 3rem; }
.timeline::before {
  content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--green), var(--green-deep));
  box-shadow: 0 0 12px var(--green-glow);
}
.timeline__item { position: relative; margin-bottom: 2.6rem; }
.timeline__node {
  position: absolute; left: -3rem; top: 0; width: 46px; height: 46px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: #000;
  background: var(--green); border-radius: 50%; box-shadow: 0 0 22px var(--green-glow);
}
.timeline__card {
  border: 1px solid rgba(138, 255, 0, 0.2); background: linear-gradient(160deg, #0b110b, #060a06);
  padding: 1.6rem 1.9rem; margin-left: 1.4rem;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.timeline__card h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--green); letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.timeline__card p { color: #b0ac9f; font-size: 0.95rem; }

/* ---------- footer ---------- */
.footer { text-align: center; padding: 5rem 2rem 3rem; border-top: 1px solid rgba(138, 255, 0, 0.15); background: #040604; }
.footer__sigil { font-size: 2.4rem; filter: drop-shadow(0 0 14px var(--green-glow)); margin-bottom: 0.6rem; }
.footer__name { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--bone); letter-spacing: 0.08em; }
.footer__tagline { font-size: 0.7rem; letter-spacing: 0.32em; color: var(--green-dim); margin: 0.6rem 0 1.8rem; }
.footer__links { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.footer__links a { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; color: var(--gray); transition: 0.2s; }
.footer__links a:hover { color: var(--green); text-shadow: 0 0 10px var(--green-glow); }
.footer__legal { max-width: 720px; margin: 0 auto; font-size: 0.7rem; color: #5a635a; line-height: 1.7; }

/* ---------- modals ---------- */
.modal.modal--over-gacha { z-index: 3500; }
.modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.modal.is-open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(2, 4, 2, 0.9); backdrop-filter: blur(8px); }
.modal__body { position: relative; z-index: 2; animation: modalIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes modalIn { from { opacity: 0; transform: scale(0.88) translateY(24px); } }
.modal__close {
  position: absolute; top: -14px; right: -14px; z-index: 3; width: 40px; height: 40px;
  background: var(--green); color: #000; border: none; font-size: 1.1rem; font-weight: 700; cursor: pointer;
  border-radius: 50%; box-shadow: 0 0 18px var(--green-glow); transition: transform 0.2s;
}
.modal__close:hover { transform: rotate(90deg) scale(1.08); }
.modal__body--video { width: min(920px, 94vw); }
.modal__body--video video { width: 100%; border: 1px solid rgba(138, 255, 0, 0.4); box-shadow: 0 0 60px rgba(138, 255, 0, 0.2); }

.modal__body--char {
  width: min(880px, 94vw); max-height: 88vh; overflow-y: auto;
  border: 1px solid rgba(138, 255, 0, 0.35); background: linear-gradient(150deg, #0c120c, #060a06);
  box-shadow: 0 0 80px rgba(138, 255, 0, 0.15);
}
.char-sheet { display: grid; grid-template-columns: 340px 1fr; }
.char-sheet__img { position: relative; }
.char-sheet__img img { width: 100%; height: 100%; object-fit: cover; }
.char-sheet__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, transparent 70%, #080d08); }
.char-sheet__body { padding: 2.2rem 2.4rem; }
.char-sheet__rarity { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.3em; border: 1px solid currentColor; display: inline-block; padding: 0.3em 1em; margin-bottom: 1rem; }
.char-sheet__name { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--bone); line-height: 1; }
.char-sheet__title { font-size: 0.78rem; letter-spacing: 0.22em; color: var(--green); font-weight: 600; text-transform: uppercase; margin: 0.5rem 0 1.4rem; }
.char-sheet__lore { color: #b9b5a8; font-size: 0.98rem; margin-bottom: 1.4rem; }
.char-sheet__quote {
  font-family: var(--font-display); font-size: 1.25rem; color: var(--bone); line-height: 1.4;
  border-left: 3px solid var(--green); padding-left: 1rem; margin-bottom: 1.6rem;
  text-shadow: 0 0 16px rgba(138, 255, 0, 0.12);
}
.char-sheet__meta { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.char-sheet__meta div { font-size: 0.75rem; letter-spacing: 0.15em; color: var(--gray); }
.char-sheet__meta b { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--green); letter-spacing: 0; }
@media (max-width: 760px) { .char-sheet { grid-template-columns: 1fr; } .char-sheet__img { max-height: 400px; overflow: hidden; } }

/* ---------- gacha overlay ---------- */
.gacha {
  position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #0a120a 0%, #030503 75%);
  overflow: hidden;
}
.gacha.is-open { display: flex; }
.gacha__embers { position: absolute; inset: 0; width: 100%; height: 100%; }
.gacha__rays {
  position: absolute; inset: -40%; opacity: 0; transition: opacity 1s;
  background: conic-gradient(from 0deg, transparent 0deg 14deg, rgba(138, 255, 0, 0.07) 14deg 20deg, transparent 20deg 40deg, rgba(138, 255, 0, 0.07) 40deg 46deg, transparent 46deg 70deg, rgba(138, 255, 0, 0.07) 70deg 76deg, transparent 76deg 110deg, rgba(138, 255, 0, 0.07) 110deg 116deg, transparent 116deg 150deg, rgba(138, 255, 0, 0.07) 150deg 156deg, transparent 156deg 190deg, rgba(138, 255, 0, 0.07) 190deg 196deg, transparent 196deg 240deg, rgba(138, 255, 0, 0.07) 240deg 246deg, transparent 246deg 290deg, rgba(138, 255, 0, 0.07) 290deg 296deg, transparent 296deg 360deg);
  animation: raysSpin 18s linear infinite;
}
.gacha__rays.is-on { opacity: 1; }
.gacha__rays.is-mythic { background: conic-gradient(from 0deg, transparent 0deg 14deg, rgba(255, 59, 59, 0.1) 14deg 20deg, transparent 20deg 40deg, rgba(255, 180, 40, 0.1) 40deg 46deg, transparent 46deg 70deg, rgba(255, 59, 59, 0.1) 70deg 76deg, transparent 76deg 110deg, rgba(255, 180, 40, 0.1) 110deg 116deg, transparent 116deg 150deg, rgba(255, 59, 59, 0.1) 150deg 156deg, transparent 156deg 190deg, rgba(255, 180, 40, 0.1) 190deg 196deg, transparent 196deg 240deg, rgba(255, 59, 59, 0.1) 240deg 246deg, transparent 246deg 290deg, rgba(255, 180, 40, 0.1) 290deg 296deg, transparent 296deg 360deg); }
@keyframes raysSpin { to { transform: rotate(360deg); } }

.gacha__stage { position: relative; z-index: 2; width: min(560px, 92vw); text-align: center; }
.gacha__machine { display: none; position: relative; }
.gacha__machine.is-active { display: block; }
.gacha__machine img { max-height: 62vh; margin: 0 auto; filter: drop-shadow(0 0 40px rgba(138, 255, 0, 0.3)); }
.gacha__machine.is-shaking img { animation: machineShake 0.5s ease-in-out infinite; }
@keyframes machineShake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-5px, 2px) rotate(-1deg); }
  40% { transform: translate(4px, -3px) rotate(1.2deg); }
  60% { transform: translate(-4px, -2px) rotate(-0.8deg); }
  80% { transform: translate(5px, 3px) rotate(0.9deg); }
}
.gacha__machine-flash {
  position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(138, 255, 0, 0.5), transparent 60%);
  opacity: 0; pointer-events: none;
}
.gacha__machine.is-shaking .gacha__machine-flash { animation: machineFlashPulse 0.5s ease-in-out infinite; }
@keyframes machineFlashPulse { 50% { opacity: 1; } }

.gacha__capsule { display: none; }
.gacha__capsule.is-active { display: block; }
/* The capsule is the real sprite, cut into its two halves along the gap in the
   source art. 440x304 dome over a 440x268 bowl, so the container carries their
   combined aspect and each half takes its own share of the height.
   The halves overlap by 60px of source space: the art draws them as separate
   objects, and a shut capsule seats the dome's band over the bowl's rim rather
   than resting the two edge to edge. 304 + 268 - 60 = 512. */
.capsule { position: relative; width: 264px; aspect-ratio: 440 / 512; margin: 0 auto; }
.gacha__capsule.is-dropping .capsule { animation: capsuleDrop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes capsuleDrop {
  0% { transform: translateY(-56vh) scale(0.6); opacity: 0; }
  55% { transform: translateY(0) scale(1); opacity: 1; }
  70% { transform: translateY(-42px) scale(1); }
  85% { transform: translateY(0); }
  93% { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}
.gacha__capsule.is-charging .capsule { animation: capsuleCharge 0.55s ease-in-out infinite; }
@keyframes capsuleCharge {
  0%, 100% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.05) rotate(-3deg); }
  75% { transform: scale(1.05) rotate(3deg); }
}
.capsule__half {
  position: absolute; left: 0; width: 100%;
  background-repeat: no-repeat; background-size: 100% 100%;
  /* drop-shadow rather than box-shadow so the glow hugs the sprite's silhouette
     instead of a rectangle */
  filter: drop-shadow(0 0 22px rgba(138, 255, 0, 0.4));
  transition: transform 0.55s cubic-bezier(0.5, -0.3, 0.7, 1), filter 0.4s;
}
.capsule__half--top {
  top: 0; height: 59.38%; z-index: 2;
  /* PNG first as the universal fallback, then image-set hands WebP to anything
     that supports it — 34 KB instead of 250 KB, which matters for the spectator
     iframe running inside a live stream. */
  background-image: url("/assets/capsule-top.png");
  background-image: image-set(
    url("/assets/capsule-top.webp") type("image/webp"),
    url("/assets/capsule-top.png") type("image/png")
  );
  transform-origin: 50% 100%;
}
.capsule__half--bottom {
  bottom: 0; height: 52.34%; z-index: 1;
  /* PNG first as the universal fallback, then image-set hands WebP to anything
     that supports it — 34 KB instead of 250 KB, which matters for the spectator
     iframe running inside a live stream. */
  background-image: url("/assets/capsule-bottom.png");
  background-image: image-set(
    url("/assets/capsule-bottom.webp") type("image/webp"),
    url("/assets/capsule-bottom.png") type("image/png")
  );
  transform-origin: 50% 0%;
}
.capsule__core {
  position: absolute; left: 12%; right: 12%; top: 32%; height: 36%; border-radius: 50%;
  background: radial-gradient(circle, #eaffd0, var(--green) 50%, transparent 72%);
  opacity: 0; filter: blur(10px); transition: opacity 0.4s; z-index: -1;
}
/* Charging: the light inside builds before anything opens. */
.gacha__capsule.is-charging .capsule__half {
  filter: drop-shadow(0 0 40px rgba(138, 255, 0, 0.75));
}
/* Cracking: the seam splits, the dome lifts and tips, the bowl drops away. */
.gacha__capsule.is-cracking .capsule__half--top { transform: translateY(-46%) rotate(-19deg) scale(1.02); }
.gacha__capsule.is-cracking .capsule__half--bottom { transform: translateY(52%) rotate(14deg); }
.gacha__capsule.is-cracking .capsule__core { opacity: 1; }

.gacha__reveal { display: none; }
.gacha__reveal.is-active { display: block; animation: revealIn 0.7s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes revealIn { from { opacity: 0; transform: translateY(70px) scale(0.85); } }
.pull-card {
  border: 2px solid currentColor; background: linear-gradient(155deg, #0d130d, #050805);
  padding: 1.6rem; box-shadow: 0 0 70px -8px currentColor;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.pull-card__rarity { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5em; margin-bottom: 1rem; animation: rarityFlicker 1.4s ease-in-out infinite; }
@keyframes rarityFlicker { 0%, 100% { opacity: 1; text-shadow: 0 0 14px currentColor; } 50% { opacity: 0.65; } }
.pull-card__img { width: min(300px, 62vw); margin: 0 auto 1.2rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); }
.pull-card__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pull-card__name { font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 800; color: var(--bone); line-height: 1; }
.pull-card__title { font-size: 0.72rem; letter-spacing: 0.24em; color: var(--gray); text-transform: uppercase; margin: 0.4rem 0 0.9rem; }
.pull-card__quote { font-style: italic; color: #b9b5a8; font-size: 0.92rem; max-width: 400px; margin: 0 auto 1.3rem; }
.pull-card__new { display: inline-block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3em; color: #000; padding: 0.35em 1em; margin-bottom: 1rem; }
.pull-card__actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

.gacha__flash { position: absolute; inset: 0; z-index: 5; background: #eaffd0; opacity: 0; pointer-events: none; }
.gacha__flash.is-flashing { animation: bigFlash 0.55s ease-out; }
@keyframes bigFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

.gacha__status {
  position: absolute; bottom: 7vh; left: 0; right: 0; text-align: center; z-index: 3;
  font-family: var(--font-caps); font-size: 0.8rem; letter-spacing: 0.5em; color: var(--green);
  text-shadow: 0 0 14px var(--green-glow); animation: statusBlink 1.6s ease-in-out infinite;
}
@keyframes statusBlink { 50% { opacity: 0.45; } }
.gacha__skip {
  position: absolute; top: 1.4rem; right: 1.6rem; z-index: 6; background: none; border: 1px solid rgba(214, 210, 196, 0.3);
  color: var(--gray); font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.25em;
  padding: 0.5em 1.1em; cursor: pointer; transition: 0.2s;
}
.gacha__skip:hover { border-color: var(--green); color: var(--green); }

.gacha.shake-hard { animation: hardShake 0.45s ease-in-out; }
@keyframes hardShake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-14px, 8px); }
  30% { transform: translate(12px, -10px); }
  45% { transform: translate(-10px, -6px); }
  60% { transform: translate(10px, 8px); }
  75% { transform: translate(-8px, 4px); }
}

@media (max-width: 700px) {
  .section { padding: 4.5rem 1.2rem; }
  .hero__cta .btn { width: 100%; }
}

/* ---------- wallet ---------- */
.wbtn { white-space: nowrap; }

.wchip {
  position: relative; display: flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(138,255,0,.35); background: rgba(8,14,8,.8);
  padding: .4em .8em; cursor: pointer; user-select: none;
  font-weight: 700; font-size: .78rem; letter-spacing: .08em; color: var(--bone);
  clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition: border-color .2s, box-shadow .2s;
}
.wchip:hover, .wchip:focus-visible { border-color: var(--green); box-shadow: 0 0 18px rgba(138,255,0,.25); outline: none; }
.wchip img { width: 17px; height: 17px; border-radius: 3px; }
.wchip__bal { color: var(--green); }

.wchip__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px;
  display: none; flex-direction: column;
  background: rgba(6,10,6,.97); border: 1px solid rgba(138,255,0,.25);
  backdrop-filter: blur(10px); z-index: 1100;
}
.wchip:hover .wchip__menu, .wchip:focus-within .wchip__menu { display: flex; }
.wchip__menu > * {
  background: none; border: none; border-bottom: 1px solid rgba(138,255,0,.1);
  color: var(--gray); font-family: var(--font-body); font-weight: 700;
  font-size: .66rem; letter-spacing: .16em; text-align: left;
  padding: .7em .9em; cursor: pointer; transition: color .15s, background .15s;
}
.wchip__menu > *:last-child { border-bottom: none; }
.wchip__menu > *:hover { color: var(--green); background: rgba(138,255,0,.06); }
.wchip__menu [data-act="disconnect"]:hover { color: #ff6b6b; background: rgba(255,59,59,.08); }

/* picker */
.wmodal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.wmodal.is-open { display: flex; }
.wmodal__backdrop { position: absolute; inset: 0; background: rgba(2,4,2,.9); backdrop-filter: blur(8px); }
.wmodal__body {
  position: relative; z-index: 2; width: min(420px, 94vw); padding: 2.2rem 2rem 1.6rem;
  background: linear-gradient(150deg,#0c120c,#060a06); border: 1px solid rgba(138,255,0,.35);
  box-shadow: 0 0 70px rgba(138,255,0,.14); text-align: center;
  clip-path: polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
  animation: modalIn .3s cubic-bezier(.2,1.4,.4,1);
}
.wmodal__close {
  position: absolute; top: .7rem; right: .9rem; background: none; border: none;
  color: var(--gray); font-size: 1rem; cursor: pointer; transition: color .2s;
}
.wmodal__close:hover { color: var(--green); }
.wmodal__tag { font-family: var(--font-caps); font-size: .58rem; letter-spacing: .4em; color: var(--green-dim); }
.wmodal__title { font-family: var(--font-display); font-size: 2rem; color: var(--bone); line-height: 1; margin: .5rem 0 .4rem; }
.wmodal__title em { color: var(--green); font-style: normal; text-shadow: 0 0 22px var(--green-glow); }
.wmodal__sub { font-size: .78rem; color: var(--gray); margin-bottom: 1.4rem; }
.wmodal__net { margin-top: 1.2rem; font-size: .6rem; letter-spacing: .25em; color: var(--gray); }
.wmodal__net b { color: var(--green); }
.wmodal__empty { font-size: .8rem; color: var(--gray); margin-bottom: 1rem; }
.wmodal__list { display: flex; flex-direction: column; gap: .55rem; }

.wopt {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  background: rgba(138,255,0,.04); border: 1px solid rgba(138,255,0,.18);
  padding: .75em .9em; cursor: pointer; text-align: left;
  font-family: var(--font-body); transition: border-color .2s, background .2s, transform .12s;
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.wopt:hover { border-color: var(--green); background: rgba(138,255,0,.09); transform: translateX(2px); }
.wopt__icon { width: 26px; height: 26px; border-radius: 5px; flex: 0 0 26px; background: rgba(138,255,0,.12); }
.wopt__name { flex: 1; font-weight: 700; font-size: .92rem; color: var(--bone); letter-spacing: .04em; }
.wopt__hint { font-size: .56rem; font-weight: 700; letter-spacing: .18em; color: var(--green-dim); }
.wopt.is-busy { opacity: .7; pointer-events: none; }
.wopt.is-busy .wopt__hint { color: var(--green); animation: statusBlink 1.1s ease-in-out infinite; }
.wopt.is-error { border-color: rgba(255,59,59,.5); }
.wopt.is-error .wopt__hint { color: #ff6b6b; }
.wopt--install { text-decoration: none; }
.wopt--install .wopt__hint { color: var(--green); }

@media (max-width: 900px) {
  .wchip__addr { display: none; }
  .wchip__menu { right: auto; left: 0; }
}

/* ---------- toast ---------- */
.bbtoast {
  position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  z-index: 4000; display: flex; flex-direction: column; gap: .5rem;
  align-items: center; pointer-events: none; width: min(520px, 92vw);
}
.bbtoast__item {
  background: rgba(6,10,6,.97); border: 1px solid rgba(138,255,0,.4);
  color: var(--bone); font-family: var(--font-body); font-weight: 600;
  font-size: .84rem; letter-spacing: .04em; line-height: 1.45;
  padding: .8em 1.1em; text-align: center; backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  clip-path: polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  animation: bbtoastIn .28s cubic-bezier(.2,1.3,.4,1);
}
.bbtoast__item--error { border-color: rgba(255,59,59,.55); color: #ffbdbd; }
.bbtoast__item.is-out { animation: bbtoastOut .38s ease forwards; }
@keyframes bbtoastIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes bbtoastOut { to { opacity: 0; transform: translateY(10px); } }

/* ---------- vault: duplicates + full list ---------- */
.vault-slot__n {
  position: absolute; right: 3px; bottom: 3px; z-index: 2;
  font-family: var(--font-body); font-weight: 700; font-size: .62rem; letter-spacing: .04em;
  background: currentColor; color: #05070a; padding: 0 .35em; line-height: 1.5;
}
.vault__all {
  background: none; border: 1px solid rgba(138,255,0,.35); color: var(--green);
  font-family: var(--font-body); font-weight: 700; font-size: .65rem; letter-spacing: .2em;
  padding: .3em .9em; cursor: pointer; transition: .2s; margin-left: auto;
}
.vault__all:hover { background: rgba(138,255,0,.1); border-color: var(--green); }
.vault__all + .vault__reset { margin-left: .5rem; }

.modal__body--vault {
  width: min(600px, 94vw); max-height: 86vh; overflow-y: auto;
  background: linear-gradient(150deg,#0c120c,#060a06); border: 1px solid rgba(138,255,0,.35);
  box-shadow: 0 0 70px rgba(138,255,0,.14);
}
.vlist { padding: 2rem 1.8rem 1.6rem; }
.vlist__tag { font-family: var(--font-caps); font-size: .56rem; letter-spacing: .4em; color: var(--green-dim); text-align: center; }
.vlist__title { font-family: var(--font-display); font-size: 2.1rem; color: var(--bone); line-height: 1; text-align: center; margin: .4rem 0 .3rem; }
.vlist__title em { color: var(--green); font-style: normal; text-shadow: 0 0 22px var(--green-glow); }
.vlist__sub { text-align: center; font-size: .72rem; letter-spacing: .14em; color: var(--gray); margin-bottom: 1.5rem; }
.vlist__empty { text-align: center; color: var(--gray); font-size: .85rem; padding: 2rem 0; }
.vlist__rows { display: flex; flex-direction: column; gap: .5rem; }

.vrow {
  display: flex; align-items: center; gap: .9rem;
  border: 1px solid currentColor; background: rgba(8,14,8,.6); padding: .55rem .8rem;
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.vrow__img { width: 42px; height: 54px; object-fit: cover; flex: 0 0 42px; border: 1px solid currentColor; }
.vrow__meta { flex: 1; min-width: 0; }
.vrow__meta b { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--bone); line-height: 1.1; }
.vrow__meta span { font-size: .6rem; font-weight: 700; letter-spacing: .16em; }
.vrow__link { font-size: .58rem; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }
.vrow__link--demo { color: var(--gray); }

/* ---------- what you own ---------- */
.owns__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; }
.owns-card {
  border: 1px solid rgba(138,255,0,.2); background: linear-gradient(170deg,#0b110b,#060a06);
  padding: 2rem 1.6rem 1.5rem; position: relative;
  clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transition: transform .3s, box-shadow .3s;
}
.owns-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 26px rgba(138,255,0,.1); }
.owns-card__num {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; color: var(--green);
  text-shadow: 0 0 22px var(--green-glow); display: block; line-height: 1;
}
.owns-card h3 {
  font-family: var(--font-display); font-size: 1.35rem; color: var(--bone);
  letter-spacing: .03em; margin: .5rem 0 .7rem; line-height: 1.1;
}
.owns-card p { font-size: .9rem; color: var(--gray); line-height: 1.6; }
.owns-card__when {
  display: inline-block; margin-top: 1rem; font-size: .56rem; font-weight: 700;
  letter-spacing: .22em; padding: .35em .9em; border: 1px solid currentColor;
}
.owns-card__when--soon { color: var(--legendary); }
.owns-card__when--live { color: var(--green); box-shadow: 0 0 14px rgba(138,255,0,.18); }
.owns__note {
  max-width: 780px; margin: 2.5rem auto 0; text-align: center;
  font-size: .82rem; line-height: 1.75; color: #7d867a;
  border-top: 1px solid rgba(138,255,0,.12); padding-top: 1.5rem;
}
.owns__note b { color: var(--bone); }

/* ---------- universe ---------- */
.universe { text-align: center; }
.universe__inner {
  max-width: 780px; margin: 0 auto; padding: 3rem 2rem;
  border: 1px solid rgba(138,255,0,.18);
  background: radial-gradient(ellipse at center, rgba(138,255,0,.05), transparent 70%);
  clip-path: polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
}
.universe__inner p { color: var(--gray); margin-top: 1.2rem; font-size: .98rem; }
.universe__line {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--green) !important;
  text-shadow: 0 0 22px var(--green-glow); margin-top: 1.4rem !important;
}

/* ---------- 3D demo ---------- */
.owns__demo {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center;
  margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid rgba(138,255,0,.12);
}
.owns__demo-viewer {
  position: relative; aspect-ratio: 1 / 1; min-height: 320px;
  border: 1px solid rgba(138,255,0,.22);
  background:
    radial-gradient(ellipse at 50% 65%, rgba(138,255,0,.10), transparent 60%),
    linear-gradient(170deg, #0b110b, #050805);
  clip-path: polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
  overflow: hidden;
}
.owns__demo-viewer model-viewer {
  width: 100%; height: 100%; background: transparent;
  --poster-color: transparent;
  opacity: 0; transition: opacity .8s;
}
.owns__demo-viewer.is-ready model-viewer { opacity: 1; }
.owns__demo-viewer.is-ready .owns__demo-fallback,
.owns__demo-viewer.is-loading .owns__demo-fallback p { opacity: 0; }

.owns__demo-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .8rem;
  color: var(--green-dim); pointer-events: none; transition: opacity .5s;
}
.owns__demo-fallback p { font-size: .6rem; font-weight: 700; letter-spacing: .3em; transition: opacity .4s; }
.owns__demo-spin { font-size: 2.2rem; color: var(--green); animation: coinSpin 3.2s linear infinite; }
.owns__demo-viewer.is-loading .owns__demo-spin { animation-duration: .9s; }
.owns__demo-viewer.is-failed .owns__demo-fallback p::after {
  content: " — 3D UNAVAILABLE HERE"; color: var(--gray);
}

.owns__demo-text h3 {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  color: var(--bone); line-height: 1.05; margin: .5rem 0 1rem;
}
.owns__demo-text p { color: var(--gray); font-size: .95rem; line-height: 1.65; }
.owns__demo-note {
  margin-top: 1rem; font-size: .76rem !important; color: #6f776d !important;
  border-left: 2px solid rgba(138,255,0,.25); padding-left: .8rem;
}
@media (max-width: 860px) {
  .owns__demo { grid-template-columns: 1fr; gap: 1.6rem; }
  .owns__demo-viewer { min-height: 280px; }
}

/* 3D view toggle */
.owns__demo-stage { position: relative; }
.owns__demo-toggle {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 2px; z-index: 3;
  background: rgba(4,8,4,.9); border: 1px solid rgba(138,255,0,.28); padding: 2px;
  backdrop-filter: blur(6px);
}
.owns__demo-toggle button {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: .6rem; letter-spacing: .22em;
  color: var(--gray); padding: .55em 1.2em; transition: .2s;
}
.owns__demo-toggle button:hover { color: var(--bone); }
.owns__demo-toggle button.is-on { background: var(--green); color: #05070a; }

/* ---------- gacha: transaction receipt ---------- */
/* A real mint takes an unknown amount of time and can fail in half a dozen
   ways. The flavour line at the bottom is theatre; this panel is the truth. */
.gtx {
  position: absolute; top: 1.4rem; left: 1.6rem; z-index: 6;
  width: min(268px, 42vw); padding: .85rem .95rem 0.9rem;
  background: rgba(4, 8, 4, .86); border: 1px solid rgba(138, 255, 0, .26);
  backdrop-filter: blur(8px); text-align: left;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  animation: bbtoastIn .3s cubic-bezier(.2, 1.3, .4, 1);
}
.gtx__head {
  font-family: var(--font-body); font-size: .6rem; font-weight: 700;
  letter-spacing: .28em; color: var(--green); margin: 0 0 .6rem;
}
.gtx__facts {
  display: grid; grid-template-columns: auto 1fr; gap: .22rem .6rem;
  margin: 0 0 .75rem; font-family: var(--font-body); font-size: .68rem;
}
.gtx__facts dt { letter-spacing: .16em; color: rgba(214, 210, 196, .45); }
.gtx__facts dd { margin: 0; text-align: right; color: var(--bone); font-weight: 600; }
.gtx__facts dd.is-short { color: #ff8f8f; }

.gtx__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.gtx__steps li {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-size: .66rem; letter-spacing: .1em;
  color: rgba(214, 210, 196, .34); transition: color .25s;
}
.gtx__steps li::before {
  content: "○"; font-size: .7rem; width: 1em; flex: none; text-align: center;
}
.gtx__steps li.is-active { color: var(--green); }
.gtx__steps li.is-active::before { content: "◉"; animation: gtxPulse 1s ease-in-out infinite; }
.gtx__steps li.is-done { color: rgba(214, 210, 196, .7); }
.gtx__steps li.is-done::before { content: "✓"; color: var(--green); }
.gtx__steps li.is-fail { color: #ff8f8f; }
.gtx__steps li.is-fail::before { content: "✕"; color: #ff3b3b; }
@keyframes gtxPulse { 50% { opacity: .35; } }

.gtx__link {
  display: block; margin-top: .75rem; font-family: var(--font-body);
  font-size: .62rem; letter-spacing: .16em; color: var(--green);
  text-decoration: none; border-top: 1px solid rgba(138, 255, 0, .18); padding-top: .6rem;
}
.gtx__link:hover { text-decoration: underline; }
/* display:block above beats the UA rule for [hidden], so say it explicitly. */
.gtx[hidden], .gtx__link[hidden] { display: none; }

/* On a phone the panel would cover the capsule, so it becomes a strip pinned
   under the header instead of a floating card beside the stage. */
@media (max-width: 760px) {
  .gtx {
    top: 0; left: 0; right: 0; width: auto; clip-path: none;
    border-left: 0; border-right: 0; border-top: 0;
    padding: .7rem 1rem .75rem;
  }
  .gtx__steps { grid-template-columns: 1fr 1fr; }
  .gacha.has-tx .gacha__stage { padding-top: 11rem; }
}

/* ---------- gacha: the pull failed ---------- */
/* Same slot and same shape as a successful pull, so the overlay always ends
   somewhere deliberate instead of vanishing. */
.pull-card--fail { color: #ff6b6b; }
.pull-card--fail .pull-card__rarity { color: #ff6b6b; }
.pull-card__fail-mark {
  font-size: 3.4rem; line-height: 1; margin: .4rem 0 .8rem; color: #ff3b3b;
  text-shadow: 0 0 26px rgba(255, 59, 59, .5);
}
.pull-card__fail-msg {
  font-family: var(--font-body); font-size: .92rem; line-height: 1.5;
  color: var(--bone); max-width: 34ch; margin: 0 auto 1.2rem;
}


/* ---------- the Machine, sealed ---------- */
/* Shown while there is no on-chain collection behind the button. It has to read
   as deliberate rather than broken, so it sits on the machine like a wax seal. */
.machine__seal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-9deg);
  z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
  letter-spacing: .32em; text-indent: .32em; color: #ff6b6b;
  padding: 1rem 1.8rem; border: 2px solid rgba(255, 59, 59, .55);
  background: rgba(6, 3, 3, .72); backdrop-filter: blur(3px);
  text-shadow: 0 0 22px rgba(255, 59, 59, .5);
  box-shadow: 0 0 40px rgba(0, 0, 0, .7);
}
.machine__seal span { font-size: 1.9rem; letter-spacing: 0; text-indent: 0; }
.machine__seal[hidden] { display: none; }

.btn--gacha:disabled,
.btn--gacha[aria-disabled="true"] {
  filter: grayscale(.85) brightness(.6); cursor: not-allowed;
  animation: none; box-shadow: none;
}


/* ---------- warrior media: art / 3D / mesh in one frame ---------- */
.wmedia { position: relative; }
.wmedia__3d {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 60%, #14200f 0%, #060906 75%);
}
.wmedia__3d model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.wmedia.is-3d .wmedia__3d { display: flex; }
.wmedia.is-3d .wmedia__art { visibility: hidden; }
.wmedia__spin { position: absolute; font-size: 1.6rem; color: var(--green); animation: raysSpin 1.4s linear infinite; }
.wmedia__3d.is-ready .wmedia__spin { display: none; }
.wmedia.no-3d .wmedia__3d { display: none; }
.wmedia.no-3d .wmedia__art { visibility: visible; }
.wmedia__tabs {
  position: absolute; left: 50%; bottom: .55rem; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 2px; background: rgba(0,0,0,.72); border: 1px solid rgba(138,255,0,.3); padding: 2px;
}
.wmedia__tabs button {
  background: none; border: 0; color: rgba(214,210,196,.6); cursor: pointer;
  font-family: var(--font-body); font-size: .62rem; font-weight: 700; letter-spacing: .22em;
  padding: .4em .85em;
}
.wmedia__tabs button.is-on { background: var(--green); color: #000; }
.wmedia__tabs button:hover:not(.is-on) { color: var(--green); }

/* ================= THE ALTAR — capsule reveal ================= */
.gacha.is-altar .gacha__stage { width: min(1100px, 96vw); }
.gacha.is-altar .gacha__status { bottom: 2.2vh; }

.altar {
  --rc: #8aff00;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
  gap: clamp(1rem, 3vw, 3rem); text-align: center;
}
.altar > * { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,1,.3,1); }
.altar.is-in > * { opacity: 1; transform: none; }
.altar.is-in > .holo { transition-delay: .35s; }

/* ---------- shrine: the sculpt is forged in place ---------- */
.shrine { position: relative; height: min(580px, 66vh); }
.shrine__glow {
  position: absolute; left: 50%; bottom: 6%; width: 110%; height: 95%; transform: translateX(-50%);
  background:
    radial-gradient(ellipse 38% 50% at 50% 55%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 30% at 50% 95%, rgba(170, 200, 255, .10), transparent 70%);
  filter: blur(8px); animation: shrineBreath 4s ease-in-out infinite;
}
@keyframes shrineBreath { 50% { opacity: .7; transform: translateX(-50%) scale(1.04); } }
.shrine__forge { --clay: 0%; --paint: 0%; position: absolute; inset: 0 0 8% 0; }
.shrine__layer { position: absolute; inset: 0; }
.shrine__layer model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; }
/* grey sprue rises from the floor… */
.shrine__clay {
  -webkit-mask: linear-gradient(to top, #000 var(--clay), transparent calc(var(--clay) + 3%));
          mask: linear-gradient(to top, #000 var(--clay), transparent calc(var(--clay) + 3%));
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 45%, transparent));
}
/* …then the paint sweeps up over it */
.shrine__paint {
  -webkit-mask: linear-gradient(to top, #000 var(--paint), transparent calc(var(--paint) + 2%));
          mask: linear-gradient(to top, #000 var(--paint), transparent calc(var(--paint) + 2%));
}
.shrine__forge.is-forged .shrine__paint { -webkit-mask: none; mask: none; }
.shrine__fallback { position: absolute; left: 50%; bottom: 0; height: 90%; transform: translateX(-50%); }
/* the scan line rides whichever sweep is running */
.shrine__scan {
  position: absolute; left: 8%; right: 8%; height: 3px; bottom: var(--clay); opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--rc), #fff, var(--rc), transparent);
  box-shadow: 0 0 18px 4px color-mix(in srgb, var(--rc) 70%, transparent), 0 0 60px 10px color-mix(in srgb, var(--rc) 30%, transparent);
  transition: opacity .3s;
}
.shrine__forge.is-scanning .shrine__scan { opacity: 1; }
.shrine__forge.is-painting .shrine__scan {
  bottom: var(--paint);
  background: linear-gradient(90deg, transparent, #ffd98a, #fff, #ffd98a, transparent);
  box-shadow: 0 0 18px 4px rgba(255, 210, 120, .8), 0 0 60px 10px rgba(255, 190, 90, .35);
}
.shrine__status {
  position: absolute; left: 0; right: 0; top: 46%; font-size: .62rem; letter-spacing: .34em; color: var(--rc);
  text-shadow: 0 0 12px var(--rc); opacity: 0; transition: opacity .4s;
}
.shrine__forge.is-forging .shrine__status { opacity: .9; animation: statusBlink 1.2s steps(2) infinite; }
.shrine__forge.is-scanning .shrine__status, .shrine__forge.is-painting .shrine__status { top: auto; bottom: -1.2rem; animation: none; }
@keyframes statusBlink { 50% { opacity: .35; } }
.shrine__hint {
  position: absolute; left: 0; right: 0; bottom: -1.4rem; font-size: .58rem; letter-spacing: .3em;
  color: rgba(214,210,196,.35); opacity: 0; transition: opacity .6s;
}
.shrine:has(.is-forged) .shrine__hint { opacity: 1; }

/* ---------- the holographic card ---------- */
.holo { display: flex; flex-direction: column; align-items: center; gap: .9rem; perspective: 1400px; }
.holo__card {
  --rx: 0deg; --ry: 0deg; --spin: 0deg; --px: 0; --py: 0; --mx: 50%; --my: 50%; --hyp: 0;
  position: relative; width: min(330px, 78vw); aspect-ratio: 5 / 7; cursor: grab; touch-action: none;
  transform-style: preserve-3d; outline: none;
  transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--spin)));
  transition: transform .9s cubic-bezier(.2, .9, .2, 1);
}
.holo:hover .holo__card { transition: transform .12s linear; }
.holo__card { user-select: none; -webkit-user-select: none; }
.holo__card img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* while dragging or landing, the hover transition must not win */
.holo .holo__card.is-dragging, .holo:hover .holo__card.is-dragging { transition: none; }
.holo .holo__card.is-settling, .holo:hover .holo__card.is-settling { transition: transform .7s cubic-bezier(.3, 1.35, .4, 1); }
.holo__card.is-dragging { cursor: grabbing; transition: none; }
.holo__card.is-settling { transition: transform .7s cubic-bezier(.3, 1.35, .4, 1); }

.holo__face {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 50px color-mix(in srgb, var(--rc) 25%, transparent);
}
.holo__front { background: #050605; }
.holo__back { transform: rotateY(180deg); }

/* layer 1 — the backdrop drifts on its own and parallaxes against the tilt */
.holo__bg {
  position: absolute; inset: -12%; background-size: cover; background-position: center;
  filter: blur(7px) brightness(.32) saturate(1.4) contrast(1.1);
  transform: translate(calc(var(--px) * -26px), calc(var(--py) * -26px)) scale(1.08);
  animation: holoDrift 22s ease-in-out infinite alternate;
}
@keyframes holoDrift { to { background-position: 30% 70%; } }
.holo__mist {
  position: absolute; inset: -20%; mix-blend-mode: screen; opacity: .8;
  background:
    radial-gradient(40% 30% at 30% 70%, color-mix(in srgb, var(--rc) 40%, transparent), transparent 70%),
    radial-gradient(35% 25% at 75% 30%, rgba(255, 140, 60, .18), transparent 70%);
  animation: mistMove 14s ease-in-out infinite alternate;
}
@keyframes mistMove { to { transform: translate(8%, -6%) rotate(8deg); } }
/* a slow-turning rune ring behind the warrior */
.holo__sigil {
  position: absolute; left: 50%; top: 42%; width: 88%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; opacity: .5; mix-blend-mode: screen;
  background:
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 70%, transparent) 0 2deg, transparent 2deg 15deg),
    radial-gradient(circle, transparent 58%, color-mix(in srgb, var(--rc) 55%, transparent) 59% 60%, transparent 61% 68%, color-mix(in srgb, var(--rc) 40%, transparent) 69% 69.6%, transparent 70%);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 58% 72%, transparent 73%);
          mask: radial-gradient(circle, transparent 55%, #000 58% 72%, transparent 73%);
  animation: sigilSpin 40s linear infinite;
}
@keyframes sigilSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* layer 2 — the warrior, closer to the viewer than everything behind */
.holo__char {
  position: absolute; left: 50%; bottom: 13%; height: 76%; max-width: 104%; object-fit: contain;
  transform: translateX(-50%) translate(calc(var(--px) * 14px), calc(var(--py) * 10px));
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.8)) drop-shadow(0 0 22px color-mix(in srgb, var(--rc) 35%, transparent));
}

/* layer 3 — foil: a rainbow band that slides with the pointer, dodged onto the art */
.holo__foil {
  position: absolute; inset: 0; mix-blend-mode: color-dodge; opacity: calc(.18 + var(--hyp) * .35);
  background:
    repeating-linear-gradient(115deg,
      hsl(0 90% 60% / .55) 0%, hsl(55 95% 60% / .55) 6%, hsl(120 90% 55% / .55) 12%,
      hsl(190 95% 60% / .55) 18%, hsl(265 90% 65% / .55) 24%, hsl(330 90% 62% / .55) 30%, hsl(0 90% 60% / .55) 36%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 1px, transparent 1px 5px);
  background-size: 260% 260%, auto;
  background-position: var(--mx) var(--my), 0 0;
  -webkit-mask: linear-gradient(#000, #000); mask: linear-gradient(#000, #000);
}
[data-rarity="common"] .holo__foil { opacity: calc(.08 + var(--hyp) * .15); }
[data-rarity="legendary"] .holo__foil,
[data-rarity="mythic"] .holo__foil { opacity: calc(.26 + var(--hyp) * .4); }

/* layer 4 — glare where the light hits */
.holo__glare {
  position: absolute; inset: 0; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,.1) 25%, transparent 55%);
}

/* layer 5 — engraved frame, rarity and name plate */
.holo__frame {
  position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--rc) 80%, #000),
    inset 0 0 0 7px #0b0906,
    inset 0 0 0 8px rgba(214, 180, 110, .55),
    inset 0 0 40px rgba(0,0,0,.8);
}
.holo__frame::before, .holo__frame::after { /* corner filigree */
  content: ""; position: absolute; width: 38px; height: 38px; border: 1px solid rgba(214, 180, 110, .6);
  border-radius: 2px; transform: rotate(45deg); top: -19px; left: -19px;
  box-shadow: 0 0 0 4px #0b0906, 0 0 0 5px rgba(214, 180, 110, .4);
}
.holo__frame::after { top: auto; left: auto; bottom: -19px; right: -19px; }
.holo__rarity {
  position: absolute; top: 16px; left: 0; right: 0; font-size: .62rem; font-weight: 700; letter-spacing: .35em;
  color: var(--rc); text-shadow: 0 0 12px var(--rc);
}
.holo__rate {
  position: absolute; top: 12px; right: 16px; font: 700 .6rem/1 ui-monospace, monospace; color: rgba(214,180,110,.8);
  border: 1px solid rgba(214,180,110,.45); padding: .35em .5em;
}
.holo__plate {
  position: absolute; left: 12px; right: 12px; bottom: 12px; padding: .7rem .6rem .75rem;
  background: linear-gradient(180deg, rgba(8,7,5,.2), rgba(8,7,5,.92) 30%);
  border-top: 1px solid rgba(214, 180, 110, .5);
}
.holo__plate h3 {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--bone);
  text-shadow: 0 2px 0 #000, 0 0 18px color-mix(in srgb, var(--rc) 45%, transparent);
}
.holo__plate p { font-size: .56rem; letter-spacing: .22em; color: rgba(214,180,110,.8); margin-top: .35rem; text-transform: uppercase; }

/* ============ the chosen style: TOXIC FULL-ART ============ */
/* TOXIC FULL-ART — no inner frame; the warrior over a green-drenched scene */
[data-card="toxic"] .holo__face { border-radius: 12px; box-shadow: 0 0 0 2px #8aff00, 0 0 40px rgba(138,255,0,.45), 0 30px 70px rgba(0,0,0,.75); }
[data-card="toxic"] .holo__bg { inset: -15%; filter: blur(3px) brightness(.55) saturate(2.2) hue-rotate(35deg) contrast(1.2); }
[data-card="toxic"] .holo__mist { opacity: 1; background: radial-gradient(70% 40% at 50% 105%, rgba(138,255,0,.75), transparent 70%), radial-gradient(40% 30% at 20% 20%, rgba(138,255,0,.25), transparent 70%); }
[data-card="toxic"] .holo__sigil { display: none; }
[data-card="toxic"] .holo__char { bottom: 8%; height: 90%; filter: drop-shadow(0 10px 14px rgba(0,0,0,.9)) drop-shadow(0 0 26px rgba(138,255,0,.55)); }
[data-card="toxic"] .holo__foil {
  mix-blend-mode: color-dodge; opacity: calc(.25 + var(--hyp) * .45);
  background:
    linear-gradient(180deg, transparent 55%, rgba(138,255,0,.5)),
    repeating-linear-gradient(100deg, hsl(90 100% 55% / .55) 0 4%, hsl(170 100% 50% / .45) 8%, transparent 12% 18%);
  background-size: 100% 100%, 300% 300%; background-position: 0 0, var(--mx) var(--my);
}
[data-card="toxic"] .holo__embers i { background: #caff7a; box-shadow: 0 0 6px 2px rgba(138,255,0,.8); }
[data-card="toxic"] .holo__frame { box-shadow: none; border-radius: 12px; }
[data-card="toxic"] .holo__frame::before, [data-card="toxic"] .holo__frame::after { display: none; }
[data-card="toxic"] .holo__rarity { top: 14px; left: 14px; right: auto; font-size: .55rem; padding: .35em .7em; background: var(--rc); color: #000; text-shadow: none; letter-spacing: .25em; }
[data-card="toxic"] .holo__rate { color: #000; background: #8aff00; border: 0; }
[data-card="toxic"] .holo__plate { left: 0; right: 0; bottom: 0; border: 0; padding: 2.2rem 1rem 1rem; background: linear-gradient(180deg, transparent, rgba(0,0,0,.92) 45%); text-align: left; }
[data-card="toxic"] .holo__plate h3 { font-size: 2.1rem; color: #fff; text-shadow: 0 0 18px rgba(138,255,0,.9), 0 3px 0 #000; }
[data-card="toxic"] .holo__plate p { color: #8aff00; }


/* the back: no words — the Legion's mark on a pixel-art field of skulls.
   Three depths (field, glow, emblem) shift at different rates with the tilt,
   so the flat face reads as a little box with the emblem floating inside. */
.holo__back { transform: rotateY(180deg); background: #030603; box-shadow: 0 0 0 2px #8aff00, 0 0 40px rgba(138,255,0,.45), 0 30px 70px rgba(0,0,0,.75); }
.cardback__pixels {
  position: absolute; inset: -12%;
  background: var(--skull-tile) 0 0 / 30px 30px;
  image-rendering: pixelated;
  transform: translate(calc(var(--px) * 10px), calc(var(--py) * 10px));
  animation: pixelDrift 30s linear infinite;
}
@keyframes pixelDrift { to { background-position: 60px 90px; } }
.cardback__pixels::after { /* scanlines + vignette over the field */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.45) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0,0,0,.85) 80%);
}
.cardback__glow {
  position: absolute; left: 50%; top: 44%; width: 90%; aspect-ratio: 1; transform: translate(-50%, -50%) translate(calc(var(--px) * -6px), calc(var(--py) * -6px));
  background: radial-gradient(circle, rgba(138,255,0,.35), transparent 62%); animation: backPulse 3.2s ease-in-out infinite;
}
@keyframes backPulse { 50% { opacity: .6; } }
.cardback__emblem {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%;
  transform: perspective(700px) translate(calc(var(--px) * -18px), calc(var(--py) * -14px)) rotateY(calc(var(--px) * -14deg)) rotateX(calc(var(--py) * 12deg));
}
.cardback__ball { position: relative; width: 52%; aspect-ratio: 440 / 512; filter: drop-shadow(0 18px 18px rgba(0,0,0,.9)) drop-shadow(0 0 26px rgba(138,255,0,.55)); animation: ballFloat 4s ease-in-out infinite; }
@keyframes ballFloat { 50% { transform: translateY(-4%); } }
.cardback__half { position: absolute; left: 0; width: 100%; background-repeat: no-repeat; background-size: 100% 100%; }
.cardback__half--top { top: 0; height: 59.38%; z-index: 2; background-image: url("/assets/capsule-top.webp"); }
.cardback__half--bottom { bottom: 0; height: 52.34%; z-index: 1; background-image: url("/assets/capsule-bottom.webp"); }
.cardback__logo { display: flex; flex-direction: column; align-items: center; line-height: .9; font-family: var(--font-display); font-weight: 800; }
.cardback__logo span {
  font-size: clamp(1.1rem, 2.3vw, 1.5rem); color: #e8e4d6; letter-spacing: .04em;
  /* extruded: stacked dark layers give the letters thickness */
  text-shadow: 1px 1px 0 #3a4a2c, 2px 2px 0 #2c3a20, 3px 3px 0 #1e2a15, 4px 4px 0 #111a0b, 0 0 18px rgba(138,255,0,.35);
}
.cardback__logo b {
  font-size: clamp(2rem, 4.4vw, 2.9rem); color: #8aff00;
  text-shadow: 1px 1px 0 #5aa800, 2px 2px 0 #478600, 3px 3px 0 #356400, 4px 4px 0 #234300, 5px 5px 0 #122200, 0 0 26px rgba(138,255,0,.8);
}
.cardback__foil {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: calc(.15 + var(--hyp) * .4);
  background: repeating-linear-gradient(100deg, hsl(90 100% 55% / .5) 0 4%, hsl(170 100% 50% / .4) 8%, transparent 12% 18%);
  background-size: 300% 300%; background-position: var(--mx) var(--my);
}

.altar__label { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .28em; color: #000; padding: .4em 1em; }
.altar__tip { font-size: .56rem; letter-spacing: .3em; color: rgba(214,210,196,.4); margin-top: -.3rem; }

@media (max-width: 820px) {
  .altar { grid-template-columns: 1fr; gap: .5rem; }
  .shrine { height: 34vh; order: 2; }
  .shrine__hint { display: none; }
  .holo { order: 1; }
  .holo__card { width: min(260px, 68vw); }
  .gacha.is-altar .gacha__stage { overflow-y: auto; max-height: 100vh; padding: 4.2rem 0 2rem; scrollbar-width: none; }
  .gacha.is-altar .gacha__stage::-webkit-scrollbar { display: none; }
  .gacha.is-altar .gacha__status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .holo__bg, .holo__mist, .holo__sigil, .holo__embers i, .shrine__glow { animation: none; }
}
.shrine__forge.is-forged .shrine__scan { display: none; }

/* ================= reveal choreography =================
   The sculpt is forged first. Only then does the card arrive, in stages: the
   card body, the name, the rarity stamp with its odds, and last the art wiping
   up from the bottom the same way the sculpt was painted. .card-reveal is
   added by wireAltar once the forge is done. */
.altar .holo__card { opacity: 0; scale: .9; }
.altar .holo__plate h3, .altar .holo__plate p, .altar .holo__rarity, .altar .holo__rate,
.altar .holo__bg, .altar .holo__mist, .altar .holo__foil, .altar .holo__char, .altar .holo__embers,
.altar .altar__label, .altar .altar__tip, .altar .holo .pull-card__actions { opacity: 0; }

/* No filter on the card itself: any filter left on a preserve-3d element
   flattens it, and the back face silently stops existing. The flash goes on
   the front face, and is not held (no fill-mode), so nothing lingers. */
.altar.card-reveal .holo__card { animation: cardArrive .7s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.altar.card-reveal .holo__front { animation: faceFlash .8s ease-out; }
@keyframes cardArrive {
  0% { opacity: 0; scale: .86; }
  60% { opacity: 1; }
  100% { opacity: 1; scale: 1; }
}
@keyframes faceFlash { 0% { filter: brightness(3); } 100% { filter: brightness(1); } }
/* 1 — the name condenses out of a smear of light */
.altar.card-reveal .holo__plate h3 { animation: nameIn .8s .55s cubic-bezier(.2, .9, .3, 1) forwards; }
.altar.card-reveal .holo__plate p { animation: fadeUp .6s 1.05s ease forwards; }
@keyframes nameIn {
  0% { opacity: 0; letter-spacing: .6em; filter: blur(10px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; letter-spacing: normal; filter: none; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* 2 — the rarity is stamped on, then its odds */
.altar.card-reveal .holo__rarity { animation: stamp .45s 1.45s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.altar.card-reveal .holo__rate { animation: stamp .45s 1.75s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes stamp {
  0% { opacity: 0; transform: scale(2.4) rotate(-6deg); filter: blur(4px); }
  70% { opacity: 1; transform: scale(.94) rotate(0); filter: none; }
  100% { opacity: 1; transform: none; }
}
.altar[data-rarity="legendary"].card-reveal .holo__rarity,
.altar[data-rarity="mythic"].card-reveal .holo__rarity { animation: stamp .45s 1.45s cubic-bezier(.2, 1.6, .4, 1) forwards, rarityFlash 1.2s 1.9s ease-out; }
@keyframes rarityFlash { 0% { box-shadow: 0 0 0 0 var(--rc); } 30% { box-shadow: 0 0 30px 8px var(--rc); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* 3 — the art wipes up from the bottom, like the paint on the sculpt */
.altar.card-reveal .holo__bg, .altar.card-reveal .holo__mist, .altar.card-reveal .holo__foil, .altar.card-reveal .holo__embers {
  animation: artWipe 1s 2.15s cubic-bezier(.6, 0, .2, 1) forwards;
}
.altar.card-reveal .holo__char { animation: artWipe 1s 2.3s cubic-bezier(.6, 0, .2, 1) forwards, charFlash 1.4s 2.3s ease-out; }
@keyframes artWipe {
  0% { opacity: 1; clip-path: inset(100% 0 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes charFlash { 0% { filter: brightness(2.6) drop-shadow(0 0 30px #8aff00); } 100% { } }
.altar.card-reveal .altar__label { animation: fadeUp .5s 3.2s ease forwards; }
.altar.card-reveal .altar__tip { animation: fadeUp .5s 3.4s ease forwards; }
.altar.card-reveal .holo .pull-card__actions { animation: fadeUp .5s 3.5s ease forwards; }
@media (prefers-reduced-motion: reduce) {
  .altar.card-reveal * { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ================= the altar backdrop =================
   Replaces the spinning rays for the reveal: toxic fog rolling across a dim
   field of the same pixel skulls as the card back, a pool of light on the
   floor, scanlines — the collection's own look rather than a generic burst. */
.gacha__backdrop { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; overflow: hidden; }
.gacha.is-altar .gacha__backdrop { opacity: 1; }
.gacha.is-altar .gacha__rays { opacity: 0 !important; }
.gacha__backdrop::before { /* skull field, barely there */
  content: ""; position: absolute; inset: -10%; background: var(--skull-tile) 0 0 / 34px 34px;
  image-rendering: pixelated; opacity: .22; animation: pixelDrift 40s linear infinite;
  -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 55%, #000 20%, transparent 75%);
          mask: radial-gradient(ellipse 70% 60% at 50% 55%, #000 20%, transparent 75%);
}
.gacha__fog {
  position: absolute; inset: -20% -30%; filter: blur(30px);
  background:
    radial-gradient(35% 25% at 25% 75%, rgba(138,255,0,.18), transparent 70%),
    radial-gradient(30% 22% at 75% 70%, color-mix(in srgb, var(--rc, #8aff00) 22%, transparent), transparent 70%),
    radial-gradient(40% 18% at 50% 95%, rgba(138,255,0,.25), transparent 70%);
  animation: fogRoll 18s ease-in-out infinite alternate;
}
.gacha__fog--b { animation-duration: 26s; animation-direction: alternate-reverse; opacity: .7; transform: scaleX(-1); }
@keyframes fogRoll { to { translate: 12% -4%; } }
.gacha__backdrop::after { /* scanlines + vignette */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,.8) 100%);
}

/* ================= DEGEN REALMS ================= */
/* hero: the live collection, one tap from the top of the page */
.hero__live {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.6rem;
  font-size: .68rem; letter-spacing: .24em; color: var(--bone); text-decoration: none;
  padding: .6rem 1.1rem; border: 1px solid rgba(138,255,0,.35); background: rgba(5,8,5,.6); backdrop-filter: blur(6px);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.hero__live b { color: var(--green); }
.hero__live:hover { border-color: var(--green); }
.hero__live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: liveDot 1.6s ease-in-out infinite; }
@keyframes liveDot { 50% { opacity: .35; } }

/* the three pillars */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; }
.pillar {
  position: relative; padding: 2rem 1.6rem 1.6rem; text-align: left;
  border: 1px solid rgba(138,255,0,.2); background: linear-gradient(170deg,#0b110b,#060a06);
  clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transition: transform .3s, box-shadow .3s;
}
.pillar:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 26px rgba(138,255,0,.1); }
.pillar__num { position: absolute; top: 1.2rem; right: 1.4rem; font-family: var(--font-display); font-size: 2.4rem; color: rgba(138,255,0,.14); }
.pillar__icon { font-size: 1.8rem; display: block; margin-bottom: .6rem; filter: drop-shadow(0 0 12px rgba(138,255,0,.5)); }
.pillar h3 { font-family: var(--font-display); font-size: 2rem; color: var(--green); letter-spacing: .04em; margin-bottom: .6rem; }
.pillar p { font-size: .92rem; line-height: 1.6; color: var(--gray); margin-bottom: 1rem; }

/* the brawl */
.brawl__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.brawl__board { margin: 0; position: relative; }
.brawl__board img { width: 100%; filter: drop-shadow(0 30px 60px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(138,255,0,.12)); }
.brawl__board figcaption { text-align: center; font-size: .6rem; letter-spacing: .32em; color: rgba(214,210,196,.45); margin-top: .8rem; }
.brawl__rules { list-style: none; padding: 0; margin: 0; counter-reset: rule; display: grid; gap: 1rem; }
.brawl__rules li {
  counter-increment: rule; position: relative; padding: 1.1rem 1.2rem 1.1rem 4rem;
  border: 1px solid rgba(138,255,0,.18); background: rgba(8,12,8,.7);
}
.brawl__rules li::before {
  content: counter(rule, decimal-leading-zero); position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: 1.7rem; color: var(--green); text-shadow: 0 0 14px rgba(138,255,0,.5);
}
.brawl__rules b { display: block; font-size: .8rem; letter-spacing: .22em; color: var(--bone); margin-bottom: .3rem; }
.brawl__rules span { font-size: .88rem; line-height: 1.55; color: var(--gray); }
.brawl__modes { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1.2rem; margin-top: 2.5rem; }
.brawl-mode {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.3rem;
  border: 1px solid rgba(138,255,0,.18); background: linear-gradient(170deg,#0b110b,#060a06);
}
.brawl-mode img { width: 46%; flex: none; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.brawl-mode__icon { font-size: 2rem; filter: drop-shadow(0 0 12px rgba(138,255,0,.5)); }
.brawl-mode h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--green); margin-bottom: .4rem; }
.brawl-mode p { font-size: .85rem; line-height: 1.55; color: var(--gray); margin-bottom: .6rem; }
.brawl__note { max-width: 70ch; margin: 2rem auto 0; text-align: center; font-size: .78rem; color: #7d867a; line-height: 1.7; }

/* the realms */
.realm-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1.2rem; }
.realm {
  position: relative; min-height: 340px; padding: 1.6rem; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; text-decoration: none; color: inherit; border: 1px solid rgba(138,255,0,.2);
  clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transition: transform .3s, box-shadow .3s;
}
.realm:hover { transform: translateY(-5px); }
.realm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .4s, transform .6s; }
.realm--live:hover img { opacity: .8; transform: scale(1.04); }
.realm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.92)); pointer-events: none; }
.realm > *:not(img) { position: relative; z-index: 1; }
.realm--live { border-color: var(--green); box-shadow: 0 0 40px rgba(138,255,0,.15); }
.realm--sealed { background: repeating-linear-gradient(45deg, #0a0c09 0 10px, #070807 10px 20px); }
.realm__seal { position: absolute !important; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 3.4rem; opacity: .35; }
.realm__num { font-size: .62rem; letter-spacing: .35em; color: var(--green); margin-bottom: .4rem; }
.realm h3 { font-family: var(--font-display); font-size: 1.9rem; color: var(--bone); margin-bottom: .3rem; }
.realm--sealed h3 { color: rgba(214,210,196,.45); }
.realm p { font-size: .82rem; color: var(--gray); margin-bottom: .8rem; }
.timeline__card h3 .owns-card__when { margin: 0 0 0 .6rem; vertical-align: middle; }

@media (max-width: 900px) {
  .brawl__grid, .brawl__modes, .realm-grid { grid-template-columns: 1fr; }
  .brawl-mode img { width: 40%; }
  .realm { min-height: 240px; }
}
.realm .owns-card__when { align-self: flex-start; }

/* ---------- pixel-art icons (scripts/build-pixel-icons.py) ---------- */
.pxicon { display: inline-block; width: 1em; height: 1em; image-rendering: pixelated; vertical-align: -0.12em; filter: drop-shadow(0 0 6px rgba(138,255,0,.45)); }
.pxicon--sm { width: 14px; height: 14px; margin-right: .35rem; vertical-align: -2px; }
.nav__sigil .pxicon { width: 22px; height: 22px; vertical-align: -5px; }
.footer__sigil .pxicon { width: 52px; height: 52px; }
/* The Degen Realms mark (pics/degenrealmslogo2.png, resized into assets/logo). */
.logo-mark { display: inline-block; object-fit: contain; filter: drop-shadow(0 0 6px rgba(138, 255, 0, 0.45)); }
.logo-mark--nav { width: 36px; height: 36px; vertical-align: -11px; }
.logo-mark--sm { width: 16px; height: 16px; margin-right: 0.35rem; vertical-align: -3px; }
.logo-mark--footer { width: 96px; height: 96px; filter: drop-shadow(0 0 16px rgba(138, 255, 0, 0.45)); }
.pillar__icon .pxicon { width: 44px; height: 44px; }
.brawl-mode__icon .pxicon, .brawl__online-icon .pxicon { width: 46px; height: 46px; }
.realm__seal .pxicon { width: 64px; height: 64px; filter: grayscale(.4) drop-shadow(0 0 10px rgba(138,255,0,.3)); }
.realm__seal { opacity: .55 !important; }

/* ---------- Core Arena online ---------- */
.brawl__online {
  position: relative; margin-top: 2.5rem; border: 1px solid rgba(138,255,0,.3); overflow: hidden;
  clip-path: polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 40px rgba(138,255,0,.08);
}
.brawl__online img { display: block; width: 100%; }
.brawl__online-copy {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(380px, 42%); padding: 2rem 1.8rem;
  display: flex; flex-direction: column; justify-content: center; gap: .6rem;
  background: linear-gradient(90deg, transparent, rgba(4,6,4,.92) 22%);
  padding-left: 4rem; text-align: left;
}
.brawl__online-copy h3 { font-family: var(--font-display); font-size: 2rem; color: var(--green); }
.brawl__online-copy p { font-size: .9rem; line-height: 1.6; color: #c9c5b8; }
.brawl__online-copy .owns-card__when { align-self: flex-start; }
.brawl__modes { grid-template-columns: 1.3fr 1fr; }
a.brawl-mode { text-decoration: none; color: inherit; transition: border-color .3s, transform .3s; }
a.brawl-mode:hover { border-color: var(--green); transform: translateY(-3px); }

/* ---------- Core Arena box meta ---------- */
.box__meta { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 1rem; }
.box__meta span { font-size: .6rem; font-weight: 700; letter-spacing: .22em; color: #000; background: var(--green); padding: .35em .7em; }

@media (max-width: 900px) {
  .brawl__online-copy { position: static; width: auto; padding: 1.4rem; background: #060906; }
  .brawl__modes { grid-template-columns: 1fr; }
}

/* ---------------- FREE PULL WELCOME (?code=) ---------------- */
.modal__body--code {
  width: min(520px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto;
  padding: 2.2rem 1.6rem 1.6rem; text-align: center;
  background: linear-gradient(180deg, rgba(14, 22, 10, 0.97), rgba(5, 8, 5, 0.98));
  border: 1px solid rgba(138, 255, 0, 0.45);
  box-shadow: 0 0 80px rgba(138, 255, 0, 0.18), inset 0 0 60px rgba(138, 255, 0, 0.05);
}
.modal__body--code::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background: var(--skull-tile) 0 0 / 30px 30px;
}
.modal__body--code > :not(.modal__close) { position: relative; }
.freepull__capsule { position: relative; width: 120px; height: 120px; margin: 0 auto 0.6rem; animation: freepullFloat 3.2s ease-in-out infinite; }
.freepull__glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(138, 255, 0, 0.45), transparent 65%); animation: freepullPulse 1.8s ease-in-out infinite; }
.freepull__half { position: absolute; left: 0; width: 100%; height: 50%; object-fit: cover; }
.freepull__half--top { top: 0; object-position: top; animation: freepullCrack 3.2s ease-in-out infinite; }
.freepull__half--bottom { bottom: 0; object-position: bottom; }
.freepull__tag { display: block; font-family: var(--font-caps); font-size: 0.68rem; letter-spacing: 0.4em; color: var(--green); }
.freepull__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1; margin: 0.5rem 0 0.8rem; color: var(--bone); }
.freepull__title em { font-style: normal; color: var(--green); text-shadow: 0 0 24px rgba(138, 255, 0, 0.6); }
.freepull__lead { color: #b8b4a6; font-size: 1rem; line-height: 1.45; margin: 0 0 1.1rem; }
.freepull__lead b { color: var(--bone); }
.freepull__code {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.7rem 0.9rem; border: 1px dashed rgba(138, 255, 0, 0.5); background: rgba(138, 255, 0, 0.05);
  font: 700 1.05rem var(--font-body); letter-spacing: 0.16em; color: var(--bone); text-align: left;
}
.freepull__code i { font-style: normal; font-size: 0.72rem; letter-spacing: 0.2em; padding: 0.2rem 0.5rem; }
.freepull__code i[data-state="checking"] { color: var(--gray); }
.freepull__code i[data-state="ok"] { background: var(--green); color: #050805; }
.freepull__code i[data-state="error"] { color: #ffb428; }
.freepull__code i:not([data-state="ok"]):not([data-state="checking"]):not([data-state="error"]) { background: #ff3b3b; color: #050805; }
.freepull__steps { list-style: none; padding: 0; margin: 1.1rem 0; display: grid; gap: 0.45rem; text-align: left; }
.freepull__steps li { display: flex; gap: 0.7rem; align-items: baseline; font-size: 0.92rem; color: #b8b4a6; }
.freepull__steps b { font-family: var(--font-caps); color: var(--green); font-size: 0.8rem; }
.freepull__actions { display: grid; gap: 0.6rem; }
.freepull__actions .btn--gacha { width: 100%; }
.freepull__actions .btn--gacha:disabled { opacity: 0.4; cursor: not-allowed; }
.freepull__fine { margin: 0.9rem 0 0; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--gray); }
@keyframes freepullFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes freepullPulse { 0%, 100% { opacity: 0.6; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes freepullCrack { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-5px) rotate(-3deg); } 90% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .freepull__capsule, .freepull__glow, .freepull__half--top { animation: none; } }