/* ============================================================
   UNSEAL — original design system
   Mechanics learned from trygacha.app · visuals original
   Palette: ink / ember / mint / gold · chamfered corners
   Fonts: Unbounded (display) · Chivo Mono (data) · Sora (body)
   ============================================================ */

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/unbounded.woff2") format("woff2");
}
@font-face {
  font-family: "Chivo Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/chivo-mono.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/sora.woff2") format("woff2");
}

:root {
  --ink: #07080f;
  --ink-2: #0b0c16;
  --panel: #0d0e18;
  --line: #ffffff14;
  --line-strong: #ffffff26;
  --ember: #ff5c28;
  --ember-deep: #e03c10;
  --mint: #3ce6a3;
  --gold: #ffd166;
  --text: #f2f1f5;
  --muted: #9a97ad;
  --dim: #5c5970;
  --font-display: "Unbounded", sans-serif;
  --font-data: "Chivo Mono", monospace;
  --font-body: "Sora", sans-serif;
  /* signature chamfer */
  --chamfer: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --chamfer-sm: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--text);
  min-width: 320px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* scanline texture on panels */
.scanlines:before, .pack-experience:before, .flip-stage:before, .receipt-panel:before, .contact-form:before, .contact-card:before, .support-card:before, .legal-document:before, .app-launch-grid:before {
  content: ""; pointer-events: none; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 3px, #ffffff05 3px 4px);
  -webkit-mask-image: linear-gradient(#000, #0000 82%); mask-image: linear-gradient(#000, #0000 82%);
}

.site-shell { --cursor-x: 50vw; --cursor-y: 50vh; isolation: isolate; min-height: 100vh; position: relative; }
.cursor-aurora {
  z-index: -1; left: var(--cursor-x); top: var(--cursor-y); pointer-events: none;
  border: 1px solid #ff5c2847; background: radial-gradient(circle, #ff5c280d, transparent 62%);
  border-radius: 50%; width: 46px; height: 46px;
  transition: left .06s linear, top .06s linear, opacity .2s;
  position: fixed; transform: translate(-50%, -50%); box-shadow: 0 0 22px #ff5c282e;
}
.scroll-progress {
  z-index: 100; width: var(--scroll-progress);
  background: linear-gradient(90deg, var(--ember), var(--gold)); height: 2px;
  position: fixed; top: 0; left: 0; box-shadow: 0 0 12px var(--ember);
}

/* ---- topline ticker ---- */
.topline {
  z-index: 22; color: var(--muted); letter-spacing: .13em; text-transform: uppercase;
  background: var(--ink-2); border-bottom: 1px solid #ff5c2833;
  height: 28px; font-size: 9px; font-weight: 700; display: flex; align-items: center;
  position: fixed; inset: 0 0 auto; overflow: hidden;
}
.ticker-track { display: flex; gap: 48px; white-space: nowrap; animation: 26s linear infinite ticker-scroll; }
.ticker-track b { color: var(--dim); font-weight: 700; }
.ticker-track .t-ember { color: var(--ember); }
.ticker-track .t-mint { color: var(--mint); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pulse-dot { background: var(--mint); width: 7px; height: 7px; box-shadow: 0 0 12px var(--mint); border-radius: 50%; animation: 1.5s ease-in-out infinite pulse-dot; }

/* ---- nav ---- */
.nav-shell {
  z-index: 20; border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  background: #07080fe0; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px;
  padding: 0 max(30px, 50vw - 660px); display: grid; position: fixed; inset: 28px 0 auto;
}
/* anchor jumps land below the fixed nav */
html { scroll-padding-top: 104px; }
.brand-mark {
  font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: .04em;
  color: var(--text); display: inline-flex; align-items: baseline; gap: 4px;
}
.brand-mark i { color: var(--ember); font-style: normal; width: 9px; height: 9px; background: var(--ember); display: inline-block; clip-path: var(--chamfer-sm); box-shadow: 0 0 12px #ff5c2859; }
.brand-mark small { font-family: var(--font-data); font-size: 8px; font-weight: 600; letter-spacing: .3em; color: var(--dim); }
.nav-links { align-self: stretch; gap: clamp(13px, 1.5vw, 26px); display: flex; }
.nav-links a {
  color: var(--muted); letter-spacing: .08em; text-transform: uppercase; place-items: center;
  font-size: 10px; font-weight: 700; transition: color .2s; display: grid; position: relative;
}
.nav-links a:hover { color: #fff; }
.nav-links a:after {
  content: ""; background: var(--ember); height: 2px; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition: left .25s, right .25s; position: absolute; bottom: 0; left: 50%; right: 50%;
  box-shadow: 0 0 14px var(--ember);
}
.nav-links a:hover:after { left: 0; right: 0; }
.nav-actions { justify-self: end; align-items: center; gap: 10px; display: flex; }
.x-social-handle {
  color: var(--muted); border: 1px solid var(--line); letter-spacing: .02em; background: #ffffff07;
  border-radius: 12px; align-items: center; gap: 7px; height: 40px; padding: 0 12px;
  font-size: 10px; font-weight: 700; transition: color .2s, border-color .2s, transform .2s, box-shadow .2s; display: flex;
}
.x-social-handle b { color: #fff; font-size: 14px; }
.x-social-handle:hover { color: #fff; border-color: #ff5c28a6; transform: translateY(-1px); box-shadow: 0 0 18px #ff5c282e; }
.profile-button {
  color: #fff; cursor: pointer; background: var(--ink-2); border: 1px solid #ff5c28b8;
  width: 40px; height: 40px; clip-path: var(--chamfer-sm); transition: transform .2s, box-shadow .2s;
  box-shadow: 0 0 18px #ff5c2859, inset 0 0 12px #ff5c281f;
}
.profile-button:hover { transform: scale(1.06); box-shadow: 0 0 26px #ff5c288c; }
.menu-button { display: none; }

/* ---- hero ---- */
.hero { align-items: center; min-height: 800px; padding: 150px max(30px, 50vw - 660px) 72px; display: flex; position: relative; overflow: hidden; }
.hero:after {
  content: ""; background: linear-gradient(90deg, #07080f 6%, #07080fe6 38%, #07080f1f 68%),
    linear-gradient(#0000 55%, #07080f 100%); position: absolute; inset: 0;
}
.hero-bg {
  opacity: .96; background: url(hero-bg.png) 59% / cover no-repeat;
  animation: 18s ease-in-out infinite alternate hero-drift; position: absolute; inset: 0; transform: scale(1.08);
}
@keyframes hero-drift { from { transform: scale(1.08) translate(0, 0); } to { transform: scale(1.14) translate(-1.2%, .8%); } }
.hero-grid {
  opacity: .1; transform-origin: top;
  background-image: linear-gradient(#ff5c2833 1px, #0000 1px), linear-gradient(90deg, #ff5c2833 1px, #0000 1px);
  background-size: 62px 62px; position: absolute; inset: 48% 0 0;
  transform: perspective(380px) rotateX(62deg) scale(1.2);
  -webkit-mask-image: linear-gradient(#000, #0000); mask-image: linear-gradient(#000, #0000);
}
.hero-content { z-index: 3; width: min(720px, 58vw); max-width: 720px; position: relative; }
.hero-content:before {
  content: ""; z-index: -1; background: radial-gradient(circle, #ff5c2812, #0000 66%);
  width: 720px; height: 720px; position: absolute; top: -140px; left: -170px;
}
/* ember sparks (own signature — not shards) */
.hero-shards { z-index: 2; pointer-events: none; position: absolute; inset: 0; }
.hero-shards span {
  background: radial-gradient(circle, #ffd166 0%, var(--ember) 55%, transparent 75%);
  width: 5px; height: 5px; border-radius: 50%; filter: drop-shadow(0 0 6px var(--ember));
  animation: 9s linear infinite ember-rise; position: absolute;
}
.hero-shards span:nth-child(1) { animation-delay: -1s; top: 68%; left: 55%; }
.hero-shards span:nth-child(2) { animation-delay: -3.4s; top: 76%; left: 66%; transform: scale(.7); }
.hero-shards span:nth-child(3) { animation-delay: -5.6s; top: 71%; left: 78%; }
.hero-shards span:nth-child(4) { animation-delay: -2.2s; top: 80%; left: 87%; transform: scale(1.5); }
.hero-shards span:nth-child(5) { animation-delay: -7.1s; top: 64%; left: 62%; }
.hero-shards span:nth-child(6) { animation-delay: -4.5s; top: 78%; left: 74%; transform: scale(.6); }
.hero-shards span:nth-child(n+7) { display: none; }
@keyframes ember-rise {
  0% { opacity: 0; transform: translateY(40px) scale(.6); }
  25% { opacity: .9; }
  to { opacity: 0; transform: translateY(-420px) scale(1.15); }
}
.live-pill {
  width: fit-content; color: var(--mint); letter-spacing: .14em; text-transform: uppercase;
  background: #3ce6a314; border: 1px solid #3ce6a347; clip-path: var(--chamfer-sm);
  align-items: center; gap: 9px; padding: 10px 14px; font-size: 10px; font-weight: 800; display: flex;
}
.live-pill span, .status-chip span { background: var(--mint); width: 8px; height: 8px; box-shadow: 0 0 12px var(--mint); border-radius: 50%; animation: 1.5s ease-in-out infinite pulse-dot; }
h1 {
  font-family: var(--font-display); letter-spacing: -.02em; text-transform: uppercase;
  margin: 26px 0 20px; font-size: clamp(46px, 5.4vw, 82px); line-height: 1.02;
}
h1 em, h2 em, h3 em {
  color: transparent; background: linear-gradient(105deg, #ffd166 4%, var(--ember) 55%, #ff8a5c);
  -webkit-background-clip: text; background-clip: text; font-style: normal;
}
.hero-content > p { color: var(--muted); max-width: 620px; margin: 0 0 30px; font-size: 17px; line-height: 1.7; }
.hero-actions { align-items: center; gap: 12px; display: flex; }
.primary-cta, .secondary-cta {
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer; clip-path: var(--chamfer);
  justify-content: center; align-items: center; min-height: 54px; padding: 0 26px; font-size: 12px; font-weight: 800;
  transition: transform .2s, filter .2s, box-shadow .2s; display: inline-flex; position: relative;
}
.primary-cta {
  color: #fff; background: linear-gradient(105deg, var(--ember-deep), var(--ember) 55%, #ff8a5c) 0 0 / 160% 160%;
  min-width: 190px; animation: 6s infinite ember-shift;
  box-shadow: 0 0 30px #ff5c284a, inset 0 1px #ffffff59;
}
@keyframes ember-shift { 0%, to { background-position: 0; } 50% { background-position: 100%; } }
.secondary-cta { border: 1px solid var(--line-strong); color: var(--text); background: #0d0e18b8; }
.primary-cta:hover, .secondary-cta:hover { filter: brightness(1.12); transform: translateY(-3px); }
.primary-cta:hover { box-shadow: 0 0 42px #ff5c2878, inset 0 1px #ffffffa6; }
.primary-cta:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(); }
.secondary-cta span { color: var(--ember); margin-left: 18px; font-size: 17px; }
.trust-row { margin-top: 52px; display: flex; gap: 0; }
.trust-row div { border-left: 1px solid var(--line); min-width: 150px; padding: 0 24px; }
.trust-row div:first-child { border: 0; padding-left: 0; }
.trust-row strong, .trust-row span { display: block; }
.trust-row strong { font-family: var(--font-data); font-size: 20px; color: #fff; }
.trust-row strong em { color: var(--ember); font-style: normal; }
.trust-row span { color: var(--dim); letter-spacing: .12em; text-transform: uppercase; margin-top: 5px; font-size: 9px; font-weight: 800; }

/* ---- shared section primitives ---- */
.section { max-width: 1320px; margin: 0 auto; padding: 122px 30px; }
.section-kicker {
  color: var(--mint); font-family: var(--font-data); letter-spacing: .2em; text-transform: uppercase;
  align-items: center; gap: 12px; margin-bottom: 15px; font-size: 10px; font-weight: 700; display: flex;
}
.section-kicker:before { content: "//"; color: var(--ember); font-weight: 800; }
.section-heading { justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 38px; display: flex; }
.section-heading h2, .auction-copy > h2, .vault-copy h2, .final-cta h2 {
  font-family: var(--font-display); letter-spacing: -.01em; text-transform: uppercase; margin: 0;
  font-size: clamp(36px, 4.2vw, 60px); line-height: 1.02;
}
.section-heading p, .auction-copy > p, .vault-copy > p { color: var(--muted); margin: 10px 0 0; font-size: 15px; line-height: 1.65; }
.section-heading > a { color: var(--ember); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; font-weight: 800; }
.text-button {
  color: #ffb08f; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; background: 0 0;
  border: 0; border-bottom: 1px solid #ff5c2866; width: fit-content; margin-top: 28px; padding: 0 0 6px;
  font-size: 10px; font-weight: 800; transition: color .2s;
}
.text-button:hover { color: #fff; }
.text-button span { margin-left: 9px; }

/* ---- live collector room ---- */
.pack-world { background: radial-gradient(circle at 50% 30%, #ff5c2814, #0000 28%), var(--ink); position: relative; overflow: hidden; }
.pack-world:before, .pack-world:after { content: ""; filter: blur(90px); pointer-events: none; border-radius: 50%; width: 620px; height: 620px; position: absolute; }
.pack-world:before { background: #ff5c280d; top: 22%; left: -440px; }
.pack-world:after { background: #3ce6a30a; top: 55%; right: -460px; }
.pack-section { max-width: 1380px; }
.collection-tabs { grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 16px; display: grid; }
.commerce-room .collection-tabs { grid-template-columns: repeat(5, 1fr); }
.commerce-room .collection-tabs span { font-size: 13px; }
.commerce-room .collection-tabs small { font-size: 11px; }
.collection-tabs button {
  color: var(--muted); border: 1px solid var(--line); cursor: pointer;
  background: linear-gradient(150deg, var(--ink-2), #0a0b12); clip-path: var(--chamfer-sm);
  justify-content: space-between; align-items: center; min-height: 60px; padding: 0 20px;
  display: flex; position: relative; overflow: hidden; transition: color .2s, border-color .2s;
}
.collection-tabs button:before {
  content: ""; opacity: 0; background: linear-gradient(90deg, #0000, var(--ember), #0000); height: 2px;
  transition: opacity .25s, transform .25s; position: absolute; inset: auto 0 0; transform: scaleX(.4);
}
.collection-tabs button:hover, .collection-tabs button.active { color: #fff; border-color: #ff5c28a6; }
.collection-tabs button.active {
  background: radial-gradient(circle at 50% 115%, #ff5c2829, #0000 57%), var(--ink-2);
  box-shadow: 0 0 22px #ff5c2817, inset 0 0 16px #ff5c2810;
}
.collection-tabs button.active:before { opacity: 1; transform: scaleX(1); }
.collection-tabs span { font-family: var(--font-data); text-transform: uppercase; font-size: 12px; font-weight: 700; position: relative; }
.collection-tabs small { color: var(--dim); text-transform: uppercase; font-size: 9px; position: relative; }
.collection-intro {
  color: var(--muted); background: #0a0b13db; border: 1px solid var(--line); clip-path: var(--chamfer-sm);
  grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; min-height: 53px;
  margin-bottom: 15px; padding: 0 17px; font-size: 11px; display: grid;
}
.collection-intro > span { color: var(--mint); letter-spacing: .07em; text-transform: uppercase; font-weight: 800; }
.collection-intro p { margin: 0; }
.collection-intro > div { color: var(--dim); text-transform: uppercase; align-items: center; gap: 8px; display: flex; }
.collection-intro i { background: var(--mint); width: 6px; height: 6px; box-shadow: 0 0 8px var(--mint); border-radius: 50%; }
.commerce-room .collection-intro { font-size: 13px; }
.commerce-notice, .commerce-empty {
  border: 1px solid var(--line); background: #0a0b13; clip-path: var(--chamfer);
  margin-top: 24px; padding: 36px; font-size: 15px; line-height: 1.65;
}
.commerce-empty h2, .commerce-empty h3 { font-size: 24px; font-family: var(--font-display); text-transform: uppercase; }
.commerce-notice { color: #d8c5bd; }
.commerce-error { color: #ff9e8a !important; }
.commerce-availability { color: var(--mint); text-align: center; font-size: 14px; font-weight: 700; }

/* pack experience */
.pack-experience {
  --pack-primary: var(--ember); --pack-secondary: #c24a1c; --pack-accent: var(--mint);
  border: 1px solid color-mix(in srgb, var(--pack-primary) 46%, #3a3a44);
  background: radial-gradient(circle at 50% 43%, color-mix(in srgb, var(--pack-primary) 13%, transparent), transparent 34%),
    linear-gradient(150deg, var(--ink-2), #06070c 72%);
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
  grid-template-columns: 255px minmax(430px, 1fr) 270px; align-items: center;
  min-height: 690px; transition: border-color .35s; display: grid; position: relative; overflow: hidden;
  box-shadow: inset 0 0 70px #1a0d0826, 0 25px 75px #00000038;
}
.experience-aurora {
  background: var(--pack-secondary); filter: blur(140px); opacity: .1; border-radius: 50%;
  width: 830px; height: 650px; transition: background .4s; position: absolute; bottom: -370px; left: 50%;
  transform: translate(-50%);
}
.pack-information { z-index: 5; flex-direction: column; justify-content: center; align-self: stretch; padding: 40px 0 40px 38px; display: flex; position: relative; }
.commerce-room .pack-information p { font-size: 14px; line-height: 1.6; }
.commerce-room .pack-information h3 { overflow-wrap: anywhere; }
.eyebrow { color: var(--pack-accent, var(--ember)); letter-spacing: .14em; text-transform: uppercase; font-size: 9px; font-weight: 800; }
.pack-information h3, .odds-drawer h3 {
  font-family: var(--font-data); letter-spacing: -.03em; text-transform: uppercase;
  margin: 11px 0 8px; font-size: 28px; line-height: 1.05;
}
.pack-information > p { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.55; }
.pack-facts { border-top: 1px solid var(--line); margin-top: 35px; }
.pack-facts > div { border-bottom: 1px solid var(--line); padding: 15px 0; }
.pack-facts span, .checkout-total > span {
  color: var(--dim); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; font-size: 8px; font-weight: 800; display: block;
}
.pack-facts strong { text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; font-size: 11px; display: block; overflow: hidden; }
.commerce-room .pack-facts span, .commerce-room .secure-note, .commerce-room .checkout-total > small { font-size: 12px; line-height: 1.5; }

/* pack stage */
.pack-stage { z-index: 3; perspective: 1000px; place-items: center; height: 690px; display: grid; position: relative; }
.pack-spotlight {
  opacity: .3; background: linear-gradient(180deg, var(--pack-primary), transparent 80%);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); filter: blur(28px);
  width: 430px; height: 540px; position: absolute; top: -160px;
}
.particle-field { pointer-events: none; position: absolute; inset: 0; overflow: hidden; }
.particle-field span {
  left: calc((var(--i, 1) * 7%) + 4%); background: var(--pack-primary); width: 3px; height: 3px;
  box-shadow: 0 0 7px var(--pack-primary); border-radius: 50%; animation: 5s linear infinite particle-rise;
  position: absolute; bottom: 8%;
}
.particle-field span:first-child { --i: 1; animation-delay: -1.2s; }
.particle-field span:nth-child(2) { --i: 2; animation-delay: -3.7s; }
.particle-field span:nth-child(3) { --i: 3; animation-delay: -2.1s; }
.particle-field span:nth-child(4) { --i: 4; animation-delay: -.5s; }
.particle-field span:nth-child(5) { --i: 5; animation-delay: -4.1s; }
.particle-field span:nth-child(6) { --i: 6; animation-delay: -2.8s; }
.particle-field span:nth-child(7) { --i: 7; animation-delay: -.9s; }
.particle-field span:nth-child(8) { --i: 8; animation-delay: -3.2s; }
.particle-field span:nth-child(9) { --i: 9; animation-delay: -1.5s; }
.particle-field span:nth-child(10) { --i: 10; animation-delay: -4.5s; }
.particle-field span:nth-child(n+11) { display: none; }
.stage-rings {
  z-index: 1; border: 2px solid var(--pack-primary); width: 480px; height: 82px;
  box-shadow: 0 0 28px var(--pack-secondary), inset 0 0 20px var(--pack-primary);
  animation: 2.8s ease-in-out infinite ring-pulse; position: absolute; bottom: 50px;
  transform: perspective(300px) rotateX(62deg);
}
.stage-rings span:first-child { border: 1px solid var(--pack-accent); box-shadow: 0 0 18px var(--pack-primary); border-radius: 50%; position: absolute; inset: 14px 33px; }
.stage-rings span:last-child { border: 1px dashed #ffffff73; border-radius: 50%; animation: 13s linear infinite spin-flat; position: absolute; inset: 26px 75px; }
.stage-arrow {
  z-index: 8; color: #fff; border: 1px solid color-mix(in srgb, var(--pack-primary) 70%, white);
  width: 47px; height: 47px; box-shadow: 0 0 20px color-mix(in srgb, var(--pack-primary) 30%, transparent);
  cursor: pointer; background: #05050ab8; clip-path: var(--chamfer-sm);
  place-items: center; font-size: 28px; transition: transform .2s, background .2s; display: grid; position: absolute; top: 50%;
}
.stage-arrow:hover { background: var(--pack-secondary); }
.stage-arrow.prev { left: 4px; }
.stage-arrow.next { right: 4px; }
.stage-pagination { z-index: 8; gap: 8px; display: flex; position: absolute; bottom: 22px; }
.stage-pagination button {
  cursor: pointer; background: #3a3846; border: 0; width: 7px; height: 7px; padding: 0; clip-path: var(--chamfer-sm);
  transition: width .25s, background .25s, box-shadow .25s;
}
.stage-pagination button.active { background: var(--pack-accent); width: 26px; box-shadow: 0 0 10px var(--pack-accent); }

/* foil pack — restyled, own animations */
.pack-object {
  --tilt-x: 0deg; --tilt-y: 0deg; z-index: 5; width: 330px; height: 520px; transform-style: preserve-3d;
  animation: .7s cubic-bezier(.2, .9, .3, 1.25) unseal-arrive, 4.5s ease-in-out .7s infinite pack-float; position: relative;
}
@keyframes unseal-arrive {
  0% { opacity: 0; filter: blur(10px); transform: translateY(90px) scale(.7) rotate(-8deg); }
  60% { opacity: 1; filter: blur(0); transform: translateY(-10px) scale(1.04) rotate(1.5deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}
@keyframes pack-float { 0%, to { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-12px) rotate(.5deg); } }
.foil-pack {
  border: 1px solid color-mix(in srgb, var(--pack-primary) 65%, white);
  background: linear-gradient(115deg, #0c0a07, color-mix(in srgb, var(--pack-secondary) 24%, #0c0a07) 45%, #080604 78%);
  box-shadow: inset 0 0 0 2px #ffffff0d, inset 18px 0 30px #ffffff0d, inset -18px 0 30px #000000b3,
    0 35px 65px #000000bf, 0 0 35px color-mix(in srgb, var(--pack-primary) 26%, transparent);
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d;
  border-radius: 6px 6px 18px 18px; transition: transform .18s ease-out, box-shadow .25s;
  position: absolute; inset: 0; overflow: hidden;
}
.pack-object:hover .foil-pack {
  box-shadow: inset 0 0 0 2px #ffffff12, inset 18px 0 30px #ffffff10, inset -18px 0 30px #000000a6,
    0 45px 75px #000c, 0 0 48px color-mix(in srgb, var(--pack-primary) 36%, transparent);
}
.pack-shadow { filter: blur(13px); opacity: .85; background: #000; border-radius: 50%; height: 37px; position: absolute; bottom: -27px; left: 7%; right: 7%; }
.foil-sheen {
  z-index: 4; opacity: .45; pointer-events: none;
  background: linear-gradient(115deg, #0000 34%, #ffffff42 43%, #0000 51%);
  animation: 4.4s ease-in-out infinite foil-sweep; position: absolute; inset: -50%; transform: translate(-45%);
}
.foil-crimp {
  z-index: 7; background: linear-gradient(180deg, #1a1308, #050301 55%, color-mix(in srgb, var(--pack-primary) 18%, #070502));
  height: 35px; display: flex; position: absolute; left: 0; right: 0; overflow: hidden; box-shadow: 0 2px 8px #000;
}
.top-crimp { border-bottom: 1px solid #ffffff2e; top: 0; }
.bottom-crimp { border-top: 1px solid #ffffff21; bottom: 0; transform: rotate(180deg); }
.foil-crimp span { border-right: 1px solid #ffffff29; flex: 1; transform: skew(-18deg); box-shadow: inset 3px 0 #ffffff06; }
.pack-brandline { z-index: 3; justify-content: space-between; align-items: center; display: flex; position: absolute; top: 46px; left: 17px; right: 17px; }
.pack-brandline img { object-fit: contain; object-position: left center; width: 112px; height: 32px;  }
.pack-brandline small { color: #ffffff85; font-family: var(--font-data); letter-spacing: .08em; font-size: 8px; }
.pack-art {
  border: 1px solid color-mix(in srgb, var(--pack-primary) 52%, white);
  background-image: linear-gradient(180deg, #03040714, transparent 62%, #030407c7), var(--art);
  height: 304px; box-shadow: inset 0 0 18px #00000061, 0 0 21px color-mix(in srgb, var(--pack-primary) 30%, transparent);
  background-position: 50%; background-size: cover; border-radius: 0 0 14px 14px;
  position: absolute; top: 82px; left: 8px; right: 8px; overflow: hidden;
}
.pack-art:before {
  content: ""; background: linear-gradient(135deg, var(--pack-secondary), transparent 28%, transparent 70%, var(--pack-primary));
  mix-blend-mode: color; opacity: .18; position: absolute; inset: 0;
}
.pack-art:after { content: ""; mix-blend-mode: screen; background: repeating-linear-gradient(105deg, #0000 0 20px, #ffffff0b 21px 22px); position: absolute; inset: 0; }
.one-piece-art .pack-art { background-position: 50%, 50% 43%; background-size: auto, 115%; }
.art-energy {
  z-index: 2; border: 1px solid color-mix(in srgb, var(--pack-accent) 25%, transparent);
  filter: drop-shadow(0 0 8px var(--pack-primary));
  animation: 2.4s ease-in-out infinite energy-pulse; position: absolute; inset: 6%;
  -webkit-mask-image: linear-gradient(#0000 10%, #000 45%, #0000 92%); mask-image: linear-gradient(#0000 10%, #000 45%, #0000 92%);
}
.art-badge {
  z-index: 3; color: var(--pack-accent); border: 1px solid var(--pack-accent); text-transform: uppercase;
  box-shadow: 0 0 12px color-mix(in srgb, var(--pack-accent) 30%, transparent); background: #030407bd;
  border-radius: 4px; padding: 5px 7px; font-size: 8px; font-weight: 900; position: absolute; bottom: 9px; right: 9px;
}
.pack-titleplate {
  z-index: 6; border-top: 1px solid color-mix(in srgb, var(--pack-primary) 50%, white); text-align: center;
  text-transform: uppercase; background: linear-gradient(#04050a59, #04050afa 40%);
  padding: 16px 9px 11px; position: absolute; top: 358px; left: 11px; right: 11px;
}
.pack-titleplate span { color: var(--pack-primary); letter-spacing: .22em; font-size: 8px; font-weight: 900; display: block; }
.pack-titleplate strong { color: #fff; font-family: var(--font-data); letter-spacing: -.04em; text-shadow: 0 0 13px var(--pack-primary); margin-top: 5px; font-size: 22px; line-height: 1; display: block; }
.pack-titleplate small { color: #ffffff75; letter-spacing: .05em; margin-top: 7px; font-size: 7px; display: block; }
.pack-seal { z-index: 4; justify-content: space-between; align-items: center; display: flex; position: absolute; bottom: 44px; left: 13px; right: 13px; }
.pack-seal > span {
  color: #08080d; background: var(--pack-accent); width: 24px; height: 24px;
  font-family: var(--font-data); box-shadow: 0 0 12px var(--pack-accent); clip-path: var(--chamfer-sm);
  place-items: center; font-weight: 900; display: grid;
}
.pack-seal small { color: #ffffff61; letter-spacing: .12em; text-transform: uppercase; font-size: 7px; }
.pack-object.compact { width: 130px; height: 205px; animation: none; }
.pack-object.compact .foil-crimp { height: 14px; }
.pack-object.compact .pack-brandline { top: 18px; left: 7px; right: 7px; }
.pack-object.compact .pack-brandline img { width: 45px; height: 15px; }
.pack-object.compact .pack-brandline small { font-size: 4px; }
.pack-object.compact .pack-art { border-radius: 0 0 6px 6px; height: 121px; top: 33px; left: 3px; right: 3px; }
.pack-object.compact .art-badge { padding: 2px 3px; font-size: 4px; bottom: 3px; right: 3px; }
.pack-object.compact .pack-titleplate { padding: 12px 3px 6px; top: 142px; left: 4px; right: 4px; }
.pack-object.compact .pack-titleplate span, .pack-object.compact .pack-titleplate small { display: none; }
.pack-object.compact .pack-titleplate strong { margin: 0; font-size: 9px; }
.pack-object.compact .pack-seal { bottom: 17px; left: 5px; right: 5px; }
.pack-object.compact .pack-seal > span { width: 9px; height: 9px; font-size: 4px; }
.pack-object.compact .pack-seal small { font-size: 3px; }

/* purchase console */
.purchase-console { z-index: 5; flex-direction: column; justify-content: center; align-self: stretch; gap: 23px; padding: 38px 34px 38px 0; display: flex; position: relative; }
.stock-orb {
  border: 1px solid color-mix(in srgb, var(--pack-primary) 65%, white);
  background: radial-gradient(circle, color-mix(in srgb, var(--pack-primary) 12%, #0a0b13), #0a0b13 65%);
  width: 104px; height: 104px; box-shadow: 0 0 28px color-mix(in srgb, var(--pack-primary) 20%, transparent),
    inset 0 0 20px color-mix(in srgb, var(--pack-primary) 10%, transparent);
  clip-path: var(--chamfer); align-content: center; align-self: center; place-items: center; display: grid;
}
.stock-orb > span { font-family: var(--font-data); font-size: 25px; font-weight: 800; }
.stock-orb small { color: var(--dim); letter-spacing: .14em; text-transform: uppercase; font-size: 7px; font-weight: 800; }
.checkout-total { justify-content: space-between; align-items: flex-end; display: flex; }
.checkout-total > div { align-items: center; gap: 6px; display: flex; }
.checkout-total strong { font-family: var(--font-data); font-size: 29px; color: #fff; }
.checkout-total > small { color: var(--dim); }
.purchase-button { width: 100%; }
.secure-note { color: var(--dim); letter-spacing: .07em; text-align: center; text-transform: uppercase; font-size: 7px; line-height: 1.5; }

/* odds drawer */
.odds-drawer {
  z-index: 20; border-right: 1px solid color-mix(in srgb, var(--pack-primary) 50%, #22232c);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); background: #0a0b13f7;
  width: 355px; padding: 65px 35px; transition: transform .4s cubic-bezier(.2, .8, .2, 1);
  position: absolute; top: 0; bottom: 0; left: 0; transform: translate(-105%); box-shadow: 25px 0 60px #00000085;
}
.odds-drawer.open { transform: translate(0); }
.odds-drawer > button { border: 1px solid var(--line); cursor: pointer; background: var(--panel); clip-path: var(--chamfer-sm); width: 34px; height: 34px; position: absolute; top: 20px; right: 20px; }
.odds-drawer > p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.odds-list { margin: 27px 0 22px; }
.commerce-room .odds-list { text-transform: capitalize; }
.odds-list div { border-bottom: 1px solid var(--line); text-transform: uppercase; justify-content: space-between; padding: 14px 0; display: flex; }
.odds-list span { color: var(--muted); font-size: 10px; }
.odds-list small { color: var(--dim); margin-top: 6px; font-size: 12px; display: block; }
.odds-list strong { color: var(--pack-accent); font-family: var(--font-data); font-size: 12px; }
.odds-drawer > small { color: var(--dim); text-transform: uppercase; font-size: 8px; line-height: 1.6; }
.commerce-room .odds-drawer > small { font-size: 12px; line-height: 1.5; }

/* pack catalog */
.pack-catalog-header { justify-content: space-between; align-items: end; margin: 43px 0 17px; display: flex; }
.pack-catalog-header > div span, .pack-catalog-header > div strong { display: block; }
.pack-catalog-header span { color: var(--dim); letter-spacing: .12em; text-transform: uppercase; font-size: 9px; }
.pack-catalog-header strong { font-family: var(--font-data); text-transform: uppercase; margin-top: 4px; font-size: 18px; }
.pack-catalog-header > small { color: var(--dim); font-size: 10px; }
.pack-catalog { grid-template-columns: repeat(3, 1fr); gap: 13px; display: grid; }
.pack-catalog > button {
  --pack-primary: var(--ember); --pack-secondary: #c24a1c; --pack-accent: var(--mint);
  border: 1px solid var(--line); text-align: left; cursor: pointer; background: linear-gradient(150deg, var(--ink-2), #06070b);
  clip-path: var(--chamfer); grid-template-columns: 155px 1fr; align-items: center; min-height: 254px; padding: 19px;
  transition: border-color .25s, transform .25s, box-shadow .25s; display: grid; position: relative; overflow: hidden;
}
.pack-catalog > button:before {
  content: ""; opacity: .1; background: radial-gradient(circle at 23% 46%, var(--pack-primary), transparent 37%); position: absolute; inset: 0;
}
.pack-catalog > button:hover, .pack-catalog > button.selected {
  border-color: color-mix(in srgb, var(--pack-primary) 62%, white);
  box-shadow: 0 17px 45px #00000047, 0 0 23px color-mix(in srgb, var(--pack-primary) 10%, transparent);
  transform: translateY(-5px);
}
.catalog-visual { z-index: 2; place-items: center; display: grid; position: relative; }
.catalog-copy { z-index: 2; min-width: 0; position: relative; }
.catalog-copy > span { color: var(--pack-accent); letter-spacing: .13em; text-transform: uppercase; font-size: 7px; font-weight: 900; }
.catalog-copy h3 { font-family: var(--font-data); letter-spacing: -.02em; text-transform: uppercase; margin: 7px 0; font-size: 17px; line-height: 1.05; }
.catalog-copy p { color: var(--muted); min-height: 34px; margin: 0; font-size: 10px; line-height: 1.45; }
.catalog-copy > div { border-top: 1px solid var(--line); justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 13px; display: flex; }
.catalog-copy > div > small { color: var(--dim); text-transform: uppercase; font-size: 8px; font-weight: 800; }
.catalog-copy > div strong { color: #fff; font-family: var(--font-data); align-items: center; gap: 4px; font-size: 17px; display: flex; }

/* ---- flow ---- */
.flow-section { padding-top: 66px; }
.flow-grid { border: 1px solid var(--line); clip-path: var(--chamfer); grid-template-columns: repeat(4, 1fr); display: grid; overflow: hidden; background: var(--ink-2); }
.flow-grid article {
  border-right: 1px solid var(--line); background: linear-gradient(155deg, #141524d1, #06070bb3);
  min-height: 245px; padding: 28px; transition: background .25s, transform .25s; position: relative;
}
.flow-grid article:last-child { border-right: 0; }
.flow-grid article:hover { background: radial-gradient(circle at 20% 40%, #ff5c2819, #0000 50%), #0b0c13; transform: translateY(-5px); }
.flow-grid article > span { color: var(--dim); font-family: var(--font-data); font-size: 10px; }
.flow-grid i {
  color: var(--ember); background: #171021; border: 1px solid #ff5c2847; clip-path: var(--chamfer-sm);
  place-items: center; width: 46px; height: 46px; margin: 38px 0 20px; font-size: 18px; font-style: normal;
  transition: transform .25s, box-shadow .25s; display: grid; box-shadow: inset 0 0 16px #ff5c2821;
}
.flow-grid article:hover i { transform: rotate(-7deg) scale(1.1); box-shadow: 0 0 22px #ff5c284d; }
.flow-grid h3 { font-family: var(--font-data); text-transform: uppercase; margin: 0 0 8px; font-size: 15px; }
.flow-grid p { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.55; }

/* ---- games ---- */
.games-section {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 50% 10%, #ff5c280f, #0000 37%), #05060b; padding: 112px 30px 124px;
}
.games-inner { max-width: 1260px; margin: auto; }
.games-grid { grid-template-columns: 1.2fr .9fr .9fr; gap: 16px; display: grid; }
.game-card { background: #080910; border: 1px solid #ff5c2838; clip-path: var(--chamfer); min-height: 510px; position: relative; overflow: hidden; transform: translateZ(0); }
.game-card img { object-fit: cover; width: 100%; height: 100%; transition: transform .65s cubic-bezier(.2, .7, .2, 1), filter .4s; position: absolute; }
.game-card:hover img { filter: saturate(1.18) brightness(1.05); transform: scale(1.07); }
.game-shade { background: linear-gradient(#03040747 0%, #0304073b 46%, #030407f5 100%); position: absolute; inset: 0; }
.status-chip {
  color: var(--mint); letter-spacing: .12em; text-transform: uppercase; background: #0f2305c4;
  border: 1px solid #3ce6a350; clip-path: var(--chamfer-sm); align-items: center; gap: 8px; padding: 8px 11px;
  font-size: 9px; font-weight: 900; display: flex; position: absolute; top: 18px; left: 18px;
}
.status-chip.hot { color: #ff6545; background: #371007c7; border-color: #ff4a2a73; }
.status-chip.hot span { background: #ff4d2a; box-shadow: 0 0 12px #ff4d2a; }
.game-copy { position: absolute; inset: auto 24px 23px; }
.game-copy h3 { font-family: var(--font-display); letter-spacing: 0; text-transform: uppercase; margin: 0; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; }
.game-copy p { color: #ffb08f; letter-spacing: .07em; text-transform: uppercase; width: calc(100% - 66px); margin: 9px 0 0; font-size: 11px; font-weight: 800; line-height: 1.4; }
.game-copy button {
  cursor: pointer; background: #09080f; border: 1px solid #ff5c28; clip-path: var(--chamfer-sm); place-items: center;
  width: 48px; height: 48px; font-size: 30px; transition: transform .2s, background .2s; display: grid;
  position: absolute; bottom: 0; right: 0; box-shadow: 0 0 16px #ff5c2861;
}
.game-card:hover .game-copy button { background: #a33612; transform: rotate(-12deg); }

/* ---- graded slabs ---- */
.graded-slab {
  --slab-x: 0deg; --slab-y: 0deg; --shine-x: 50%; --shine-y: 25%; aspect-ratio: 467/780;
  perspective: 1100px; width: min(292px, 100%); transform-style: preserve-3d;
}
.slab-shell {
  width: 100%; height: 100%; transform: rotateX(var(--slab-x)) rotateY(var(--slab-y)); transform-style: preserve-3d;
  background: #ff5c280d; border-radius: 3.5% / 2.2%; transition: transform .14s ease-out, filter .3s, box-shadow .3s;
  position: relative; overflow: hidden; box-shadow: 0 32px 70px #000000c2, 0 0 34px #ff5c2826;
}
.graded-slab.full:hover .slab-shell { filter: saturate(1.08) contrast(1.03); box-shadow: 0 44px 90px #000000d1, 0 0 52px #ff5c2840; }
.slab-photo { object-fit: contain; width: 100%; height: 100%; filter: hue-rotate(var(--card-hue)); position: absolute; inset: 0; }
.slab-edge-light { z-index: 4; pointer-events: none; border: 1px solid #fff3e8; border-radius: 3.2% / 2%; position: absolute; inset: 1.1%; box-shadow: inset 0 0 12px #ffd9c517; }
.slab-holo-sweep {
  z-index: 5; opacity: .13; mix-blend-mode: screen; pointer-events: none;
  background: linear-gradient(115deg, #0000 34%, #ff9d5c55 43%, #3ce6a355 48%, #ffd16650 53%, #0000 63%);
  animation: 5.6s ease-in-out infinite slab-sweep; position: absolute; inset: -30%; transform: translate(-45%) rotate(4deg);
}
.slab-reflection {
  z-index: 6; opacity: .16; background: radial-gradient(circle at var(--shine-x) var(--shine-y), white 0, #ffb07d85 7%, transparent 27%);
  mix-blend-mode: screen; pointer-events: none; transition: background .1s linear; position: absolute; inset: -20%;
}
.graded-slab.featured { margin-inline: auto; animation: 5s ease-in-out infinite slab-float; }
.graded-slab.compact { width: 100%; }
.graded-slab.micro { width: 44px; }
.graded-slab.micro .slab-shell { border-radius: 3px; box-shadow: 0 5px 13px #0000008c, 0 0 9px #ff5c2826; }
.graded-slab.micro .slab-edge-light, .graded-slab.micro .slab-holo-sweep, .graded-slab.micro .slab-reflection { display: none; }

/* ---- auctions ---- */
.auction-section { grid-template-columns: 1.15fr .7fr; align-items: center; gap: 90px; display: grid; }
.auction-copy > h2, .vault-copy h2 { font-size: clamp(44px, 5vw, 68px); }
.auction-copy > p { max-width: 670px; }
.auction-tabs { border: 1px solid var(--line); clip-path: var(--chamfer-sm); grid-template-columns: repeat(3, 1fr); margin: 32px 0 12px; padding: 5px; display: grid; }
.auction-tabs button {
  color: var(--muted); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; background: 0 0;
  border: 0; padding: 11px; font-size: 9px; font-weight: 800;
}
.auction-tabs button.active { color: #fff; background: linear-gradient(90deg, #b0340f8c, #ff5c2826); clip-path: var(--chamfer-sm); box-shadow: inset 0 0 0 1px #ff5c28; }
.auction-list { min-height: 257px; }
.auction-list article {
  border-bottom: 1px solid var(--line); grid-template-columns: 28px 48px 1fr auto 74px; align-items: center;
  gap: 14px; min-height: 82px; padding: 10px 12px; transition: background .2s, transform .2s; display: grid;
}
.auction-list article:hover { background: linear-gradient(90deg, #ff5c2812, #0000); transform: translate(5px); }
.auction-rank { color: var(--dim); font-family: var(--font-data); font-size: 10px; }
.auction-list h3 { font-family: var(--font-data); text-transform: uppercase; margin: 0; font-size: 13px; }
.auction-list h3 small { color: #ffb08f; border: 1px solid #a13d16; border-radius: 5px; margin-left: 6px; padding: 3px 5px; font-size: 7px; }
.auction-list p { color: var(--muted); margin: 5px 0 0; font-size: 10px; }
.bid { text-align: right; }
.bid span { color: var(--dim); text-transform: uppercase; margin-bottom: 4px; font-size: 8px; display: block; }
.bid strong { color: var(--mint); font-family: var(--font-data); }
.auction-list time { color: #ffb08f; font-family: var(--font-data); font-size: 9px; }
.empty-auction { color: var(--dim); border-bottom: 1px solid var(--line); align-content: center; place-items: center; min-height: 230px; display: grid; }
.empty-auction span { color: var(--ember); font-size: 35px; }
.empty-auction p { margin: 10px 0; font-size: 12px; }
.market-button { margin-top: 22px; }
.auction-showcase {
  background: radial-gradient(circle at 50% 35%, #ff5c281f, #0000 48%), linear-gradient(160deg, #181320e6, #040509fa);
  border: 1px solid #ff5c2847; clip-path: var(--chamfer); justify-self: center; width: min(390px, 100%);
  padding: 58px 38px 30px; position: relative; box-shadow: 0 38px 90px #000000a6, inset 0 0 50px #ff5c280f;
}
.auction-showcase:before { content: ""; pointer-events: none; border: 1px solid #ffffff0d; clip-path: var(--chamfer); position: absolute; inset: 8px; }
.showcase-status {
  color: var(--mint); letter-spacing: .12em; text-transform: uppercase; align-items: center; gap: 8px;
  font-size: 9px; font-weight: 900; display: flex; position: absolute; top: 22px; left: 25px; right: 25px;
}
.showcase-status small { color: var(--dim); margin-left: auto; font-size: 8px; }
.showcase-bid { border-top: 1px solid var(--line); grid-template-columns: 1fr auto; align-items: end; gap: 4px 14px; margin-top: 20px; padding-top: 18px; display: grid; }
.showcase-bid span { color: var(--dim); letter-spacing: .1em; text-transform: uppercase; font-size: 8px; }
.showcase-bid strong { color: var(--mint); font-family: var(--font-data); grid-row: 2; font-size: 28px; }
.showcase-bid time { color: #ffb08f; font-family: var(--font-data); grid-area: 1/2/3; align-self: center; font-size: 10px; }

/* ---- vault ---- */
.vault-section {
  border-top: 1px solid var(--line); background: radial-gradient(circle at 76% 52%, #ff5c281a, #0000 36%),
    linear-gradient(120deg, #05060b 0%, #100a06 57%, #07080f);
  grid-template-columns: 1fr 1fr; align-items: center; min-height: 720px; padding: 100px max(30px, 50vw - 630px);
  display: grid; position: relative; overflow: hidden;
}
.vault-copy { z-index: 4; max-width: 600px; position: relative; }
.vault-copy > p { max-width: 570px; }
.vault-stats { margin: 34px 0; display: flex; }
.vault-stats div { border-left: 1px solid var(--line); min-width: 120px; padding: 0 22px; }
.vault-stats div:first-child { border: 0; padding-left: 0; }
.vault-stats strong, .vault-stats span { display: block; }
.vault-stats strong { font-family: var(--font-data); font-size: 24px; }
.vault-stats span { color: var(--dim); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; font-size: 9px; }
.slab-stack { z-index: 3; perspective: 1500px; justify-self: center; width: 510px; height: 610px; position: relative; }
.stack-slab { width: 260px; transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .4s; position: absolute; top: 30px; left: 50%; }
.stack-slab.slab-center { z-index: 3; width: 292px; transform: translate(-50%); }
.stack-slab.slab-left { z-index: 1; filter: brightness(.62) saturate(.75); transform: translate(-79%) translateY(48px) rotate(-15deg); }
.stack-slab.slab-right { z-index: 2; filter: brightness(.7) saturate(.8); transform: translate(-20%) translateY(48px) rotate(15deg); }
.slab-stack:hover .slab-left { filter: brightness(.85); transform: translate(-108%) translateY(45px) rotate(-22deg); }
.slab-stack:hover .slab-right { filter: brightness(.9); transform: translate(8%) translateY(45px) rotate(22deg); }
.vault-orbit { border: 1px solid #ff5c2824; border-radius: 50%; width: 720px; height: 720px; animation: 28s linear infinite orbit-turn; position: absolute; right: max(-140px, 50vw - 755px); }
.vault-orbit:after, .vault-orbit:before { content: ""; border: 1px solid #ff5c281d; border-radius: 50%; position: absolute; }
.vault-orbit:before { inset: 95px; }
.vault-orbit:after { inset: 205px; }
.vault-orbit span { background: var(--ember); border-radius: 50%; width: 6px; height: 6px; position: absolute; box-shadow: 0 0 12px var(--ember); }
.vault-orbit span:first-child { top: 205px; left: 89px; }
.vault-orbit span:nth-child(2) { top: 330px; right: 40px; }
.vault-orbit span:nth-child(3) { bottom: 8px; left: 302px; }

/* ---- app store ---- */
.app-store-section {
  border-top: 1px solid var(--line);
  background: radial-gradient(circle at 77% 44%, #ff5c2817, #0000 36%), radial-gradient(circle at 20% 75%, #3ce6a30a, #0000 32%), #05060b;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .85fr); align-items: center; gap: 90px; min-height: 860px;
  padding: 110px max(30px, 50vw - 630px); display: grid; position: relative; overflow: hidden;
}
.app-store-section:before {
  content: ""; opacity: .1; pointer-events: none;
  background-image: linear-gradient(#ff5c2824 1px, #0000 1px), linear-gradient(90deg, #ff5c2824 1px, #0000 1px);
  background-size: 74px 74px; position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 58%, #0000); mask-image: linear-gradient(90deg, #0000, #000 58%, #0000);
}
.app-store-copy { z-index: 4; max-width: 650px; position: relative; }
.app-status {
  width: fit-content; color: var(--mint); letter-spacing: .12em; text-transform: uppercase; background: #3ce6a312;
  border: 1px solid #3ce6a342; clip-path: var(--chamfer-sm); align-items: center; gap: 8px; margin: 27px 0 18px;
  padding: 8px 11px; font-size: 8px; font-weight: 900; display: flex;
}
.app-store-copy h2 { font-family: var(--font-display); letter-spacing: -.01em; margin: 0; font-size: clamp(42px, 5vw, 70px); line-height: 1.04; }
.app-store-copy > p { color: var(--muted); max-width: 590px; margin: 25px 0 30px; font-size: 16px; line-height: 1.65; }
.app-feature-list { border-top: 1px solid var(--line); display: grid; }
.app-feature-list > div { border-bottom: 1px solid var(--line); grid-template-columns: 38px 1fr; align-items: center; gap: 14px; padding: 16px 0; display: grid; }
.app-feature-list i { color: var(--dim); font-family: var(--font-data); font-size: 8px; font-style: normal; }
.app-feature-list span, .app-feature-list strong, .app-feature-list small { display: block; }
.app-feature-list strong { font-family: var(--font-data); text-transform: uppercase; font-size: 11px; }
.app-feature-list small { color: var(--muted); margin-top: 4px; font-size: 10px; }
.app-store-actions { align-items: stretch; gap: 12px; margin-top: 28px; display: flex; }
.app-store-badge {
  color: #050509; background: #f5f5f8; border: 1px solid #ffffff61; clip-path: var(--chamfer-sm); align-items: center;
  gap: 12px; min-width: 190px; min-height: 58px; padding: 8px 18px; display: flex; box-shadow: 0 14px 32px #00000047;
}
.app-store-badge > b { font-size: 28px; font-weight: 600; }
.app-store-badge span, .app-store-badge small, .app-store-badge strong { display: block; }
.app-store-badge small { font-size: 7px; line-height: 1; }
.app-store-badge strong { margin-top: 2px; font-size: 17px; line-height: 1; }
.app-store-disabled { cursor: default; opacity: .92; }
.launch-note { color: var(--dim); letter-spacing: .05em; margin-top: 14px; font-size: 8px; display: block; }
.app-device-showcase { z-index: 3; perspective: 1400px; justify-self: center; width: 500px; height: 690px; position: relative; }
.app-glow {
  filter: blur(14px); background: radial-gradient(circle, #ff5c2847, #3ce6a30f 43%, #0000 69%); border-radius: 50%;
  width: 480px; height: 480px; animation: 5s ease-in-out infinite app-glow-pulse; position: absolute; top: 48%; left: 50%;
  transform: translate(-50%, -50%);
}
.app-phone {
  background: #030407; border: 5px solid #292932; border-radius: 34px;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .45s; position: absolute; overflow: hidden;
  box-shadow: 0 42px 90px #000000b8, inset 0 0 0 1px #ffffff1f;
}
.app-phone img { object-fit: cover; width: 100%; height: 100%; }
.app-phone-back { filter: brightness(.52) saturate(.74); width: 275px; height: 560px; top: 80px; left: 18px; transform: rotateY(16deg) rotate(-7deg); }
.app-phone-front { z-index: 2; width: 315px; height: 642px; animation: 5.5s ease-in-out infinite phone-float; top: 24px; right: 18px; transform: rotateY(-9deg) rotate(4deg); }
.app-device-showcase:hover .app-phone-back { filter: brightness(.74) saturate(.9); transform: translate(-25px) rotateY(12deg) rotate(-10deg); }
.app-device-showcase:hover .app-phone-front { animation-play-state: paused; transform: translate(18px) rotateY(-4deg) rotate(1deg) translateY(-9px); }
.phone-island { z-index: 4; background: #020203; border-radius: 999px; width: 82px; height: 18px; position: absolute; top: 11px; left: 50%; transform: translate(-50%); box-shadow: 0 1px #ffffff14; }
.floating-launch-card {
  z-index: 5; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: #0a0a12e6;
  border: 1px solid var(--ember); clip-path: var(--chamfer-sm); align-items: center; gap: 10px; padding: 12px 17px;
  animation: 4s ease-in-out infinite launch-card-float; display: flex; position: absolute; bottom: 56px; right: -4px;
  box-shadow: 0 14px 34px #00000080, 0 0 28px #ff5c2842;
}
.floating-launch-card > span { color: #fff; font-size: 21px; }
.floating-launch-card small, .floating-launch-card strong { display: block; }
.floating-launch-card small { color: var(--mint); letter-spacing: .15em; font-size: 6px; font-weight: 900; }
.floating-launch-card strong { margin-top: 2px; font-size: 13px; }

/* ---- final cta + footer ---- */
.final-cta {
  text-align: center; background: radial-gradient(circle, #ff5c2826, #0000 38%), linear-gradient(#07080fc9, #07080fe0),
    url(final-cta-bg.png) 50% / cover;
  align-content: center; place-items: center; min-height: 570px; padding: 90px 24px; display: grid; position: relative; overflow: hidden;
}
.final-cta:after {
  content: ""; border: 1px solid #ff5c2826; clip-path: var(--chamfer); width: 360px; height: 360px;
  animation: 6s ease-in-out infinite final-rings; position: absolute;
  box-shadow: 0 0 0 90px #ff5c2808, 0 0 0 180px #ff5c2804;
}
.final-cta > * { z-index: 2; position: relative; }
.final-cta > img { object-fit: contain; width: 185px; height: 54px; margin-bottom: 30px; }
.final-cta h2 { font-size: clamp(38px, 5.2vw, 68px); }
.final-cta p { color: var(--muted); margin: 20px 0 30px; }
.site-footer {
  border-top: 1px solid var(--line); grid-template-columns: auto 1fr auto; align-items: center; gap: 24px 36px;
  max-width: 1320px; min-height: 210px; margin: auto; padding: 42px 30px; display: grid;
}
.site-footer-brand img { object-fit: contain; width: 120px; height: 42px; display: block; }
.site-footer p { color: var(--dim); letter-spacing: .12em; text-transform: uppercase; margin: 0; font-size: 9px; font-weight: 800; }
.site-footer nav { color: var(--muted); text-transform: uppercase; flex-wrap: wrap; justify-content: flex-end; gap: 13px 24px; font-size: 10px; font-weight: 700; display: flex; }
.site-footer nav a { transition: color .2s; }
.site-footer nav a:hover { color: #fff; }
.site-footer .site-footer-legal { color: var(--dim); border-top: 1px solid #ffffff12; grid-column: 1 / -1; justify-content: flex-start; padding-top: 22px; }
.site-footer small { color: #42414a; letter-spacing: .05em; text-transform: uppercase; grid-column: 1 / -1; font-size: 8px; }

/* ---- inner pages ---- */
.inner-page { background: radial-gradient(circle at 73% 7%, #ff5c2814, transparent 24%), var(--ink); min-height: 100vh; overflow-x: clip; }
.inner-nav {
  z-index: 10; border-bottom: 1px solid var(--line); justify-content: space-between; align-items: center;
  max-width: 1320px; height: 92px; margin: auto; padding: 0 30px; display: flex; position: relative;
}
.inner-nav > a img { object-fit: contain; object-position: left center; width: 148px; height: 42px; display: block; }
.inner-nav .brand-mark { font-size: 19px; }
.inner-nav > div { color: var(--muted); letter-spacing: .08em; text-transform: uppercase; align-items: center; gap: 30px; font-size: 10px; font-weight: 800; display: flex; }
.inner-nav > div a { transition: color .2s; }
.inner-nav > div a:hover { color: #fff; }
.inner-nav .inner-nav-cta { color: #fff; background: #ff5c281f; border: 1px solid #ff5c2866; clip-path: var(--chamfer-sm); padding: 12px 16px; }
.inner-hero {
  border-bottom: 1px solid var(--line); align-content: center; max-width: 1260px; min-height: 490px; margin: auto;
  padding: 86px 30px 72px; display: grid; position: relative;
}
.inner-hero:after {
  content: ""; opacity: .2;
  background-image: linear-gradient(#ff5c2833 1px, #0000 1px), linear-gradient(90deg, #ff5c2833 1px, #0000 1px);
  background-size: 42px 42px; width: 430px; height: 430px; position: absolute; top: 8%; right: -110px;
  transform: perspective(450px) rotateY(-15deg) rotate(9deg);
  -webkit-mask-image: radial-gradient(circle, #000, #0000 70%); mask-image: radial-gradient(circle, #000, #0000 70%);
}
.inner-hero-orbit {
  border: 1px solid #ff5c2826; border-radius: 50%; width: 290px; height: 290px; animation: 6s ease-in-out infinite final-rings;
  position: absolute; top: 50%; right: 5%; box-shadow: 0 0 0 55px #ff5c2808, 0 0 0 110px #ff5c2804;
}
.inner-hero > span { z-index: 2; width: fit-content; color: var(--mint); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 17px; font-size: 9px; font-weight: 900; position: relative; }
.inner-hero h1 { z-index: 2; max-width: 900px; font-family: var(--font-display); letter-spacing: -.01em; text-transform: uppercase; margin: 0; font-size: clamp(44px, 6.4vw, 84px); line-height: 1.05; position: relative; }
.inner-hero h1 em { color: transparent; -webkit-text-stroke: 1px var(--ember); filter: drop-shadow(0 0 16px #ff5c2859); font-style: normal; background: none; }
.inner-hero > p { z-index: 2; color: var(--muted); max-width: 650px; margin: 28px 0 0; font-size: 17px; line-height: 1.65; position: relative; }
.inner-content { max-width: 1260px; margin: auto; padding: 78px 30px 110px; }

.contact-grid { grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); gap: 24px; display: grid; }
.contact-form, .contact-card, .support-card, .legal-document, .page-callout, .app-launch-grid {
  border: 1px solid var(--line); background: linear-gradient(150deg, #10111cf2, #06070bfa); clip-path: var(--chamfer);
  box-shadow: 0 25px 70px #00000047, inset 0 1px #ffffff08; position: relative; overflow: hidden;
}
.contact-form { gap: 22px; padding: 38px; display: grid; }
.form-row { grid-template-columns: 1fr 1fr; gap: 18px; display: grid; }
.contact-form label { color: var(--muted); letter-spacing: .1em; text-transform: uppercase; gap: 9px; font-size: 9px; font-weight: 800; display: grid; }
.contact-form input, .contact-form select, .contact-form textarea {
  color: #f4f3f8; width: 100%; font: 500 13px/1.5 var(--font-body); text-transform: none; letter-spacing: 0;
  background: #08090e; border: 1px solid #ffffff21; border-radius: 8px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input, .contact-form select { height: 52px; padding: 0 15px; }
.contact-form textarea { resize: vertical; min-height: 160px; padding: 14px 15px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--ember); box-shadow: 0 0 0 3px #ff5c281f, 0 0 22px #ff5c2812; }
.contact-form .primary-cta { width: fit-content; min-width: 210px; }
.form-note { color: var(--dim); margin: -9px 0 0; font-size: 9px; line-height: 1.5; }
.contact-card { padding: 38px; position: relative; overflow: hidden; }
.contact-card:after {
  content: ""; border: 1px solid #ff5c2826; border-radius: 50%; width: 280px; height: 280px; position: absolute;
  bottom: -120px; right: -100px; box-shadow: 0 0 0 44px #ff5c2808, 0 0 0 88px #ff5c2804;
}
.page-index { color: var(--dim); font-family: var(--font-data); letter-spacing: .13em; font-size: 8px; }
.contact-card h2, .page-callout h2, .app-launch-copy h2 {
  font-family: var(--font-display); letter-spacing: 0; text-transform: uppercase;
  margin: 35px 0 13px; font-size: clamp(24px, 3vw, 38px); line-height: 1.1;
}
.contact-card p, .page-callout p, .app-launch-copy > p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.email-link {
  z-index: 2; color: #ffb08f; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--font-data); justify-content: space-between; align-items: center; gap: 16px;
  margin: 30px 0; padding: 16px 0; font-size: 12px; display: flex; position: relative;
}
.email-link span { color: var(--mint); }
.response-note { z-index: 2; align-items: center; gap: 12px; display: flex; position: relative; }
.response-note span, .response-note strong, .response-note small { display: block; }
.response-note strong { text-transform: uppercase; font-size: 9px; }
.response-note small { color: var(--dim); margin-top: 4px; font-size: 8px; }

.support-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; display: grid; }
.support-card { min-height: 240px; padding: 29px; transition: transform .25s, border-color .25s; }
.support-card:hover { border-color: #ff5c288c; transform: translateY(-5px); }
.support-card > span { color: var(--ember); font-family: var(--font-data); font-size: 9px; }
.support-card h2 { font-family: var(--font-data); text-transform: uppercase; margin: 34px 0 12px; font-size: 15px; line-height: 1.3; }
.support-card p { color: var(--muted); margin: 0; font-size: 11px; line-height: 1.7; }
.page-callout {
  background: radial-gradient(circle at 85%, #ff5c2821, #0000 30%), linear-gradient(150deg, #10111cf2, #06070bfa);
  justify-content: space-between; align-items: center; gap: 35px; margin-top: 24px; padding: 42px; display: flex;
}
.page-callout > div:first-child > span { color: var(--mint); letter-spacing: .13em; font-size: 8px; font-weight: 900; }
.page-callout h2 { margin: 11px 0 6px; }
.page-callout p { margin: 0; }
.page-actions { flex-shrink: 0; gap: 12px; display: flex; }
.legal-document { max-width: 920px; margin: auto; overflow: hidden; }
.policy-meta {
  color: var(--dim); border-bottom: 1px solid var(--line); letter-spacing: .1em; text-transform: uppercase;
  justify-content: space-between; gap: 20px; padding: 24px 35px; font-size: 9px; display: flex;
}
.policy-meta strong { color: #ffb08f; }
.legal-document section { border-bottom: 1px solid #ffffff13; grid-template-columns: 240px 1fr; gap: 42px; padding: 34px 35px; display: grid; }
.legal-document section:last-child { border-bottom: 0; }
.legal-document h2 { font-family: var(--font-data); text-transform: uppercase; margin: 0; font-size: 14px; line-height: 1.35; }
.legal-document p { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.8; }
.legal-document p a { color: #ffb08f; text-underline-offset: 3px; text-decoration: underline; }
.legal-document p strong { color: #fff; }

/* ---- app launch page ---- */
.app-launch-grid {
  background: radial-gradient(circle at 77% 44%, #ff5c2826, #0000 38%), linear-gradient(150deg, #10111cfa, #05060afa);
  grid-template-columns: minmax(0, .8fr) minmax(450px, 1.2fr); align-items: center; gap: 45px;
  min-height: 680px; padding: 55px; display: grid; overflow: hidden;
}
.app-launch-copy { z-index: 3; position: relative; }
.app-launch-copy .app-status { margin-top: 0; }
.app-launch-copy .app-status i { display: block; }
.app-launch-copy > p { margin-bottom: 25px; }
.app-launch-copy ul { color: var(--muted); margin: 0 0 31px; padding: 0; font-size: 11px; list-style: none; }
.app-launch-copy li { border-bottom: 1px solid var(--line); padding: 12px 0; }
.app-launch-copy li:before { content: "◈"; color: var(--ember); margin-right: 11px; }
.app-launch-phones { perspective: 1300px; height: 570px; position: relative; }
.app-launch-phones:before {
  content: ""; filter: blur(13px); background: radial-gradient(circle, #ff5c2847, #0000 67%); border-radius: 50%;
  width: 430px; height: 430px; animation: 5s ease-in-out infinite app-glow-pulse; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.app-launch-phones > div {
  background: #000; border: 5px solid #292932; border-radius: 30px; transition: transform .5s; position: absolute;
  overflow: hidden; box-shadow: 0 35px 80px #000000b3;
}
.app-launch-phones > div:first-child { filter: brightness(.58); width: 260px; height: 528px; top: 55px; left: 2%; transform: rotate(-7deg) rotateY(15deg); }
.app-launch-phones > div:last-child { z-index: 2; width: 290px; height: 591px; top: 0; right: 2%; transform: rotate(5deg) rotateY(-8deg); }
.app-launch-phones:hover > div:first-child { filter: brightness(.8); transform: translate(-15px) rotate(-10deg) rotateY(10deg); }
.app-launch-phones:hover > div:last-child { transform: translate(15px) rotate(2deg) rotateY(-3deg); }
.app-launch-phones img { object-fit: cover; width: 100%; height: 100%; }

/* ---- purchase modal ---- */
.commerce-dialog {
  color: #fff; background: 0 0; border: 0; width: min(1040px, 100vw - 24px); max-width: none;
  max-height: calc(100dvh - 24px); padding: 0; overflow-y: auto;
}
.commerce-dialog::backdrop, .wallet-panel::backdrop { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: #000000d6; }
.pack-modal {
  --pack-primary: var(--ember); --pack-secondary: #c24a1c; --pack-accent: var(--mint);
  border: 1px solid color-mix(in srgb, var(--pack-primary) 52%, white);
  background: radial-gradient(circle at 30% 45%, color-mix(in srgb, var(--pack-primary) 20%, transparent), transparent 32%), #0a0b13;
  width: min(1040px, 100%); min-height: 670px; clip-path: var(--chamfer);
  box-shadow: 0 0 80px color-mix(in srgb, var(--pack-primary) 22%, transparent), inset 0 0 70px #ff5c2810;
  position: relative; overflow: hidden;
}
.pack-modal:before {
  content: ""; opacity: .18; background-image: radial-gradient(#ff5c28 1px, #0000 1px); background-size: 32px 32px;
  position: absolute; inset: 0; -webkit-mask-image: radial-gradient(circle, #000, #0000 70%); mask-image: radial-gradient(circle, #000, #0000 70%);
}
.commerce-dialog .pack-modal { width: 100%; }
.modal-close { z-index: 30; border: 1px solid var(--line); color: var(--muted); cursor: pointer; background: var(--panel); clip-path: var(--chamfer-sm); width: 38px; height: 38px; font-size: 20px; position: absolute; top: 18px; right: 18px; }
.rip-stage { z-index: 2; grid-template-columns: 1fr 1fr; align-items: center; min-height: 670px; padding: 50px; display: grid; position: relative; }
.modal-pack-wrap { place-items: center; height: 570px; display: grid; transform: scale(.89); }
.commerce-dialog .purchased-card { object-fit: contain; width: min(300px, 100%); max-height: 520px; animation: 5s infinite card-hover; }
.rip-copy h2, .result-heading h2 { font-family: var(--font-display); letter-spacing: 0; text-transform: uppercase; margin: 15px 0 8px; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.05; }
.rip-copy p { color: var(--muted); margin: 0 0 27px; }
.commerce-dialog .rip-copy p { margin-bottom: 18px; font-size: 14px; line-height: 1.65; }
.commerce-dialog .rip-copy .text-button { margin-top: 20px; font-size: 14px; display: block; }
.rip-flash { z-index: 20; opacity: 0; pointer-events: none; background: #fff; position: absolute; inset: 0; }
.pack-modal.ripping .rip-flash { animation: 1.45s ease-in-out rip-flash; }
.pack-object.ripping { animation: .14s linear infinite rip-shake; }
/* own unseal rip: the whole top half slides up; a light blade cuts across */
.pack-object.ripping .top-crimp { animation: 1s cubic-bezier(.3, .8, .2, 1) .3s forwards unseal-tear-top; }
.pack-object.ripping .foil-pack:after {
  content: ""; z-index: 15; height: 2px; box-shadow: 0 0 26px 10px var(--pack-primary); background: #fff;
  animation: 1.2s .15s forwards tear-line; position: absolute; top: 38px; left: 0; right: 0;
}
@keyframes unseal-tear-top { to { opacity: 0; transform: translateY(-220px) rotate(-8deg); } }
.checkout-odds { flex-wrap: wrap; gap: 10px; margin: 20px 0; display: flex; }
.checkout-odds span { border: 1px solid var(--line); text-transform: capitalize; clip-path: var(--chamfer-sm); padding: 6px 9px; font-size: 12px; }
.commerce-room button:disabled, .commerce-dialog button:disabled, .wallet-panel button:disabled { opacity: .45; cursor: not-allowed; }

/* ---- wallet panel ---- */
.wallet-button {
  color: #ffe2d8; font: inherit; white-space: nowrap; cursor: pointer; background: #241008;
  border: 1px solid #ff5c288c; clip-path: var(--chamfer-sm); padding: 11px 14px; font-size: 12px; font-weight: 700;
  transition: box-shadow .2s, transform .2s;
}
.wallet-button:hover { box-shadow: 0 0 16px #ff5c2840; transform: translateY(-1px); }
.wallet-panel {
  color: #fff; background: #0b0a13; border: 1px solid var(--ember); clip-path: var(--chamfer);
  width: min(440px, 100vw - 32px); padding: 30px;
}
.wallet-panel h2 { font-size: 26px; line-height: 1.2; margin: 0; }
.wallet-panel > .text-button { margin-top: 0; }
.wallet-panel p { color: var(--muted); font-size: 16px; line-height: 1.6; }
.wallet-panel .secondary-cta { width: 100%; margin-top: 12px; }
.wallet-panel a { color: #ffb08f; text-decoration: underline; }
.wallet-panel .text-button { font-size: 14px; }

/* ---- vault + receipt pages ---- */
.receipt-panel {
  border: 1px solid var(--line); background: radial-gradient(at 100% 0, #ff5c2824, #0000 65%), #080910;
  clip-path: var(--chamfer); padding: clamp(24px, 5vw, 54px); position: relative; overflow: hidden;
}
.receipt-panel h2 { margin: 22px 0; font-size: clamp(26px, 4vw, 44px); line-height: 1.2; font-family: var(--font-display); text-transform: uppercase; }
.receipt-panel p { color: var(--muted); font-size: 16px; line-height: 1.65; }
.receipt-memo { word-break: break-all; font-family: var(--font-data); }
.receipt-panel dl { border-block: 1px solid var(--line); grid-template-columns: 140px minmax(0, 1fr); gap: 20px; padding: 24px 0; font-size: 14px; display: grid; }
.receipt-panel dt { color: var(--dim); }
.receipt-panel dd { overflow-wrap: anywhere; margin: 0; }
.receipt-links { color: #ffb08f; flex-wrap: wrap; gap: 20px; margin: 28px 0; font-size: 14px; display: flex; }
.receipt-card { place-items: center; padding: 30px 0; display: grid; }
.receipt-card img { object-fit: contain; width: min(320px, 100%); max-height: 550px; }
.receipt-card h3 { text-align: center; font-size: 22px; margin: 10px 0 0; }
.purchases-intro { justify-content: space-between; align-items: center; gap: 24px; display: flex; }
.purchases-intro p, .commerce-footnote { color: var(--muted); font-size: 16px; line-height: 1.6; }
.commerce-footnote { margin-top: 34px; }
.receipt-search { flex-wrap: wrap; align-items: center; gap: 14px; margin: 30px 0; display: flex; }
.receipt-search input {
  color: #fff; font: inherit; background: #0d0b14; border: 1px solid #474056; border-radius: 8px;
  flex: 1; min-width: 160px; padding: 14px; outline: none;
}
.receipt-search input:focus { border-color: var(--ember); box-shadow: 0 0 0 3px #ff5c281f; }
.receipt-search label { font-size: 14px; }
.purchase-list { gap: 14px; display: grid; }
.purchase-list > a {
  border: 1px solid var(--line); background: #0d0b14; clip-path: var(--chamfer); justify-content: space-between;
  align-items: center; gap: 20px; padding: 24px; display: flex; transition: border-color .2s, transform .2s;
}
.purchase-list > a:hover { border-color: #ff5c2880; transform: translateY(-2px); }
.purchase-list strong { text-transform: capitalize; font-size: 16px; display: block; }
.purchase-list small { color: var(--muted); margin-top: 8px; font-size: 13px; display: block; }
.purchase-list .purchase-state { color: var(--mint); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 800; }
.purchase-list .purchase-state.pending { color: var(--gold); }

/* ---- toast ---- */
.toast {
  z-index: 100; color: #ffe2d8; background: #14100bf5; border: 1px solid var(--ember); clip-path: var(--chamfer-sm);
  padding: 15px 19px; font-size: 11px; animation: .28s toast-in; position: fixed; bottom: 24px; right: 24px;
  box-shadow: 0 0 30px #ff5c2840;
}

/* ============================================================
   PRACTICE ROOM (demo credits · flip reveal)
   ============================================================ */

.demo-room {
  background: radial-gradient(circle at 50% 0%, #3ce6a30f, transparent 42%), #0a0c11;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.demo-room:before {
  content: ""; opacity: .3; pointer-events: none;
  background-image: linear-gradient(#3ce6a30d 1px, transparent 1px), linear-gradient(90deg, #3ce6a30d 1px, transparent 1px);
  background-size: 56px 56px; position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 72%); mask-image: radial-gradient(circle at 50% 30%, #000, transparent 72%);
}
.demo-room .section { position: relative; z-index: 2; }
.room-badge {
  width: fit-content; color: var(--mint); letter-spacing: .14em; text-transform: uppercase;
  background: #3ce6a312; border: 1px solid #3ce6a345; clip-path: var(--chamfer-sm);
  align-items: center; gap: 9px; padding: 9px 14px; font-size: 10px; font-weight: 800; display: flex;
}
.room-badge.gold { color: var(--gold); background: #ffd16614; border-color: #ffd1664d; }
.demo-room h2, .demo-room .section-heading h2 { font-family: var(--font-display); letter-spacing: -.01em; }
.demo-room .section-heading p { color: var(--muted); }
.demo-room .section-kicker { color: var(--mint); }

/* credits chip */
.credits-chip {
  color: var(--gold); border: 1px solid #ffd16659; background: #ffd16612; clip-path: var(--chamfer-sm);
  align-items: center; gap: 8px; height: 40px; padding: 0 13px; font-size: 13px; font-weight: 700; display: flex;
  font-family: var(--font-data); white-space: nowrap;
}
.credits-chip small { color: #ffe9a3; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.credits-chip button {
  color: var(--gold); cursor: pointer; background: #ffd1661f; border: 1px solid #ffd1664d; border-radius: 6px;
  padding: 4px 8px; font-size: 10px; font-weight: 800; transition: transform .15s, box-shadow .15s;
}
.credits-chip button:hover { transform: translateY(-1px); box-shadow: 0 0 12px #ffd16640; }

/* demo pack cards */
.demo-packs { grid-template-columns: repeat(3, 1fr); gap: 16px; display: grid; }
.demo-pack {
  --accent: var(--ember);
  background: linear-gradient(150deg, #181322, #0c0d17 60%), var(--panel);
  border: 1px solid #ffffff14; clip-path: var(--chamfer); padding: 28px; display: flex; flex-direction: column;
  transition: transform .25s, border-color .25s, box-shadow .25s; position: relative; overflow: hidden;
}
.demo-pack:before {
  content: ""; opacity: .5; background: radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 55%);
  position: absolute; inset: 0; pointer-events: none;
}
.demo-pack:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 60%, white); box-shadow: 0 24px 60px #00000066, 0 0 30px color-mix(in srgb, var(--accent) 14%, transparent); }
.demo-pack .edition {
  color: var(--accent); letter-spacing: .16em; text-transform: uppercase; font-size: 9px; font-weight: 900;
  display: flex; align-items: center; gap: 8px; font-family: var(--font-data);
}
.demo-pack h3 { font-family: var(--font-display); margin: 10px 0 4px; font-size: 26px; letter-spacing: 0; line-height: 1.1; }
.demo-pack .tagline { color: var(--muted); margin: 0 0 20px; font-size: 13px; }
.demo-pack .pack-cover {
  width: 100%; aspect-ratio: 12 / 5; object-fit: cover; display: block; background: #0c0d17;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 8px; margin: 0 0 16px;
}
.demo-pack .pack-preview { justify-content: center; gap: 10px; margin: -4px 0 16px; display: flex; }
.demo-pack .mini-card {
  width: 56px; aspect-ratio: 63 / 92; position: relative; overflow: hidden;
  border: 2px solid #f2c744; border-radius: 5px; background: #0c0d17; box-shadow: 0 8px 18px #00000066;
  transition: transform .2s;
}
.demo-pack .mini-card:hover { transform: translateY(-4px) scale(1.06); z-index: 2; }
.demo-pack .mini-card:nth-child(1) { transform: rotate(-5deg); }
.demo-pack .mini-card:nth-child(3) { transform: rotate(5deg); }
.demo-pack .mini-card:nth-child(1):hover { transform: rotate(-5deg) translateY(-4px) scale(1.06); }
.demo-pack .mini-card:nth-child(3):hover { transform: rotate(5deg) translateY(-4px) scale(1.06); }
.demo-pack .mini-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-pack .mini-card small {
  position: absolute; left: 0; right: 0; bottom: 2px; z-index: 1; text-align: center;
  font-family: var(--font-data); font-size: 6px; letter-spacing: .1em; color: #fff; text-shadow: 0 1px 3px #000;
}
.demo-pack .price { font-family: var(--font-data); font-size: 36px; font-weight: 800; margin-bottom: 18px; }
.demo-pack .price small { color: var(--dim); font-size: 12px; font-weight: 600; margin-left: 6px; }
.demo-stats { border-top: 1px solid #ffffff14; padding: 14px 0; display: grid; gap: 9px; }
.demo-stats > div { justify-content: space-between; align-items: center; font-size: 11px; display: flex; }
.demo-stats span { color: var(--muted); }
.demo-stats strong { color: #fff; font-family: var(--font-data); font-size: 12px; }
.demo-stats strong.up { color: var(--mint); }
.demo-stats strong.warn { color: var(--gold); }
.demo-pack .card-count { color: var(--dim); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin: 12px 0 16px; }
.demo-pack .demo-open {
  cursor: pointer; margin-top: auto; clip-path: var(--chamfer-sm); min-height: 50px; border: 1px solid color-mix(in srgb, var(--accent) 65%, white);
  background: linear-gradient(105deg, color-mix(in srgb, var(--accent) 32%, #0e0c1a), color-mix(in srgb, var(--accent) 12%, #0e0c1a));
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  transition: filter .2s, transform .2s, box-shadow .2s;
}
.demo-pack .demo-open:hover { filter: brightness(1.15); transform: translateY(-2px); box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 40%, transparent); }
.demo-pack .demo-open:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.6); }
.demo-pack.alpha { --accent: var(--gold); }
.demo-pack.growth { --accent: var(--mint); }
.demo-mini-odds { border-top: 1px solid #ffffff12; margin-top: 14px; padding-top: 12px; font-size: 9px; color: var(--dim); display: grid; gap: 4px; }
.demo-mini-odds div { justify-content: space-between; display: flex; }
.demo-mini-odds b { color: var(--muted); font-weight: 600; }
.demo-mini-odds .chase { color: var(--gold); }

/* asset cards — TCG-style layout */
.asset-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; display: grid; }
.asset-card.pk {
  --hue: 260; --type: #a8a878;
  aspect-ratio: 63 / 92;
  background: linear-gradient(165deg, hsl(var(--hue) 50% 15%), #0c0d17 68%);
  border: 4px solid #f2c744; border-radius: 10px; padding: 0;
  position: relative; overflow: hidden; flex-direction: column; display: flex;
  box-shadow: inset 0 0 0 1px #000, 0 10px 26px #00000073;
  transition: transform .2s, box-shadow .2s;
}
.asset-card.pk:hover { box-shadow: inset 0 0 0 1px #000, 0 18px 44px #0000008c, 0 0 22px hsl(var(--hue) 55% 52% / .28); }
.asset-card .pk-head { justify-content: space-between; align-items: flex-start; padding: 6px 8px 4px; display: flex; }
.asset-card .pk-name { min-width: 0; }
.asset-card .pk-name small { color: var(--dim); display: block; font-size: 6px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-card .pk-name strong { font-family: var(--font-display); display: block; font-size: 14px; letter-spacing: 0; line-height: 1.1; margin-top: 1px; }
.asset-card .pk-hp { align-items: center; gap: 4px; display: flex; }
.asset-card .pk-hp small { color: var(--dim); font-size: 7px; font-weight: 900; }
.asset-card .pk-hp strong { font-family: var(--font-data); font-size: 14px; }
.asset-card .pk-type { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #00000099; background: radial-gradient(circle at 34% 30%, #ffffffcc, var(--type) 55%, color-mix(in srgb, var(--type) 55%, #000)); box-shadow: 0 0 7px color-mix(in srgb, var(--type) 55%, transparent); display: block; }
.asset-card .pk-art {
  position: relative; flex: 1; min-height: 64px; margin: 0 9px; border: 1px solid #0000007a; border-radius: 6px;
  background: linear-gradient(160deg, hsl(var(--hue) 55% 13%), hsl(var(--hue) 45% 9%) 60%, #0a0b14);
  place-items: center; display: grid; overflow: hidden;
}
.pk-art .fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pk-art .fx i { position: absolute; display: block; }
.pk-art .pk-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
.pk-holo {
  position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, #ff5c2866 36%, #ffd16688 42%, #ffffffcc 47%, #3ce6a388 52%, #2b9fff66 58%, transparent 64%);
  background-size: 240% 100%; animation: pk-holo 4.5s ease-in-out infinite;
}
@keyframes pk-holo { 0%, 18% { background-position: 130% 0; } 58%, 100% { background-position: -130% 0; } }
.pk-art:has(.rarity-tag.mythic) .pk-holo { opacity: .75; }
.pk-art:has(.rarity-tag.epic) .pk-holo { opacity: .5; }
.pk-art:has(.rarity-tag.rare) .pk-holo { opacity: .32; }
.asset-card .pk-art .rarity-tag { position: absolute; z-index: 3; top: 5px; right: 5px; border-radius: 4px; padding: 2px 6px; font-size: 6.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.asset-card .pk-moves { flex-direction: column; gap: 3px; padding: 5px 8px 0; display: flex; }
.asset-card .pk-move {
  grid-template-columns: auto 1fr; column-gap: 6px; align-items: start; display: grid;
  background: hsl(var(--hue) 42% 12% / .55); border: 1px solid hsl(var(--hue) 45% 38% / .3); border-radius: 5px; padding: 3px 5px;
}
.asset-card .pk-cost { gap: 2px; padding-top: 1px; display: flex; }
.asset-card .pk-cost i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000000b3; background: radial-gradient(circle at 34% 30%, #fff, #cdcddd 55%, #77779a); display: block; }
.asset-card .pk-move-name { justify-content: space-between; align-items: baseline; gap: 6px; display: flex; }
.asset-card .pk-move-name span { font-size: 9px; font-weight: 900; letter-spacing: .01em; }
.asset-card .pk-move-name b { font-family: var(--font-data); font-size: 12px; color: var(--gold); }
.asset-card .pk-move p {
  grid-column: 1 / -1; color: var(--muted); font-size: 7px; line-height: 1.3; margin-top: 1px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical;
}
.asset-card .pk-flavor {
  color: var(--muted); font-style: italic; font-size: 7px; line-height: 1.4; margin: 5px 11px 5px; padding-top: 5px;
  border-top: 1px solid #ffffff14; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical;
}
.asset-card .pk-stats { grid-template-columns: 1fr 1fr 1fr; margin: 0 9px 5px; border: 1px solid #ffffff1a; border-radius: 5px; overflow: hidden; display: grid; }
.asset-card .pk-stat { flex-direction: column; gap: 2px; align-items: center; padding: 3px 2px 4px; display: flex; }
.asset-card .pk-stat + .pk-stat { border-left: 1px solid #ffffff1a; }
.asset-card .pk-stat small { color: var(--dim); font-size: 5px; font-weight: 800; letter-spacing: .1em; }
.asset-card .pk-stat span { align-items: center; gap: 2px; font-family: var(--font-data); font-size: 8px; color: var(--muted); display: flex; }
.asset-card .pk-stat i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #00000099; background: radial-gradient(circle at 34% 30%, #ffffffcc, var(--t) 55%, color-mix(in srgb, var(--t) 55%, #000)); display: block; }
.asset-card .pk-retreat i { width: 8px; height: 8px; border: 1px solid #ffffff38; background: transparent; }
.asset-card .pk-market {
  justify-content: space-between; align-items: center; gap: 8px; margin: 0 9px 5px; padding: 4px 8px; display: flex;
  background: #0000003d; border: 1px solid #ffffff14; border-radius: 5px;
}
.asset-card .pk-market span { color: var(--dim); font-size: 6.5px; font-weight: 900; letter-spacing: .16em; }
.asset-card .pk-market strong { font-family: var(--font-data); font-size: 12px; transition: color .6s; }
.asset-card .pk-market strong.tick-up { color: var(--mint); }
.asset-card .pk-market strong.tick-down { color: #ff7a6e; }
.asset-card .pk-market b { font-family: var(--font-data); font-size: 9px; font-weight: 800; }
.asset-card .pk-market b.up { color: var(--mint); }
.asset-card .pk-market b.down { color: #ff7a6e; }
.asset-card .pk-market b.static { color: var(--gold); font-size: 8px; letter-spacing: .1em; }
.asset-card .pk-foot {
  justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding: 5px 11px 7px; display: flex;
  border-top: 1px solid #ffffff14;
}
.asset-card .pk-foot span { color: var(--dim); font-family: var(--font-data); font-size: 7.5px; letter-spacing: .08em; }
.asset-card .pk-foot strong { font-family: var(--font-data); font-size: 9px; color: var(--muted); white-space: nowrap; }
.rarity-tag.common { color: #c9c4e2; background: #ffffff14; border: 1px solid #ffffff2e; }
.rarity-tag.rare { color: #7ecbff; background: #2b9fff1c; border: 1px solid #2b9fff4d; }
.rarity-tag.epic { color: #ffb08f; background: #ff5c281f; border: 1px solid #ff5c285c; }
.rarity-tag.mythic { color: var(--gold); background: #ffd1661a; border: 1px solid #ffd16659; box-shadow: 0 0 14px #ffd16633; }

/* flip reveal modal */
.flip-dialog {
  color: #fff; background: transparent; border: 0; width: min(980px, 100vw - 24px); max-width: none;
  max-height: calc(100dvh - 24px); padding: 0; overflow: hidden;
}
.flip-dialog::backdrop { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: #000000e8; }
.flip-stage {
  background: radial-gradient(circle at 50% 20%, #3ce6a312, transparent 55%), #0a0c11;
  border: 1px solid #3ce6a350; clip-path: var(--chamfer); min-height: 640px; padding: 44px 40px 34px;
  position: relative; overflow: hidden; text-align: center; box-shadow: 0 40px 110px #000000c4, 0 0 60px #3ce6a326;
}
.flip-stage .flip-eyebrow { color: var(--mint); letter-spacing: .16em; text-transform: uppercase; font-size: 9px; font-weight: 900; font-family: var(--font-data); }
.flip-stage h2 { font-family: var(--font-display); letter-spacing: 0; margin: 8px 0 6px; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; }
.flip-stage .flip-note { color: var(--muted); font-size: 13px; margin: 0 0 26px; }
.flip-fan { justify-content: center; align-items: center; min-height: 380px; display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 2; perspective: 1200px; }
.flip-card { width: 148px; height: 216px; position: relative; transform-style: preserve-3d; cursor: pointer; transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.flip-card:nth-child(odd) { transform: rotate(-3deg); }
.flip-card:nth-child(even) { transform: rotate(3deg); }
.flip-card.flipped, .flip-card.flipped:nth-child(odd), .flip-card.flipped:nth-child(even) { transform: rotate(0) rotateY(180deg); }
.flip-card .face { position: absolute; inset: 0; border-radius: 8px; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }
.flip-card .back {
  --type: #a8a878;
  background: linear-gradient(165deg, hsl(var(--hue) 50% 15%), #0c0d17 68%);
  border: 4px solid #f2c744; box-shadow: inset 0 0 0 1px #000, 0 18px 40px #0000007a;
  transform: rotateY(180deg); flex-direction: column; display: flex;
}
.flip-card .facefront {
  background: radial-gradient(circle at 50% 44%, #1a2140 0%, #0a0d1c 68%);
  border: 4px solid #2b3253; place-items: center; display: grid;
  box-shadow: 0 18px 40px #0000007a, inset 0 0 0 1px #00000066;
}
.flip-card .facefront:before {
  content: "U"; font-family: var(--font-display); color: #f2c744; font-size: 46px;
  text-shadow: 0 0 24px #f2c74466; animation: 2.6s ease-in-out infinite energy-pulse;
}
.flip-card .facefront:after {
  content: ""; position: absolute; inset: 8%; border: 2px solid #f2c74466; border-radius: 50%;
  box-shadow: inset 0 0 0 5px #0a0d1c, inset 0 0 0 7px #f2c74433, 0 0 30px #f2c7441f;
}
.flip-card .back-inner { padding: 0; height: 100%; flex-direction: column; display: flex; }
/* never squash text zones when content is tight — only the art window shrinks */
.asset-card.pk > *:not(.pk-art), .flip-card .back-inner > *:not(.pk-art) { flex-shrink: 0; }
.flip-card .back .pk-head { justify-content: space-between; align-items: flex-start; padding: 5px 7px 3px; display: flex; }
.flip-card .back .pk-name { min-width: 0; }
.flip-card .back .pk-name small { color: var(--dim); display: block; font-size: 5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flip-card .back .pk-name strong { font-family: var(--font-display); display: block; font-size: 12px; letter-spacing: 0; line-height: 1.1; margin-top: 1px; }
.flip-card .back .pk-hp { align-items: center; gap: 3px; display: flex; }
.flip-card .back .pk-hp small { color: var(--dim); font-size: 5.5px; font-weight: 900; }
.flip-card .back .pk-hp strong { font-family: var(--font-data); font-size: 12px; }
.flip-card .back .pk-type { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #00000099; background: radial-gradient(circle at 34% 30%, #ffffffcc, var(--type) 55%, color-mix(in srgb, var(--type) 55%, #000)); display: block; }
.flip-card .back .pk-art {
  position: relative; flex: 1; min-height: 48px; margin: 0 7px; border: 1px solid #0000007a; border-radius: 5px;
  background: linear-gradient(160deg, hsl(var(--hue) 55% 13%), hsl(var(--hue) 45% 9%) 60%, #0a0b14);
  place-items: center; display: grid; overflow: hidden;
}
.flip-card .back .pk-art .rarity-tag { position: absolute; z-index: 3; top: 4px; right: 4px; border-radius: 3px; padding: 2px 5px; font-size: 5.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.flip-card .back .pk-moves { flex-direction: column; gap: 2px; padding: 4px 7px 0; display: flex; }
.flip-card .back .pk-move {
  grid-template-columns: auto 1fr; column-gap: 5px; display: grid;
  background: hsl(var(--hue) 42% 12% / .55); border: 1px solid hsl(var(--hue) 45% 38% / .3); border-radius: 4px; padding: 3px 4px;
}
.flip-card .back .pk-cost { gap: 2px; padding-top: 1px; display: flex; }
.flip-card .back .pk-cost i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #000000b3; background: radial-gradient(circle at 34% 30%, #fff, #cdcddd 55%, #77779a); display: block; }
.flip-card .back .pk-move-name { justify-content: space-between; align-items: baseline; gap: 4px; display: flex; }
.flip-card .back .pk-move-name span { font-size: 7px; font-weight: 900; }
.flip-card .back .pk-move-name b { font-family: var(--font-data); font-size: 9px; color: var(--gold); }
.flip-card .back .pk-move p {
  grid-column: 1 / -1; color: var(--muted); font-size: 6px; line-height: 1.25; margin-top: 1px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.flip-card .back .pk-value {
  font-family: var(--font-data); margin-top: auto; padding: 4px 8px 6px; font-size: 13px;
  justify-content: space-between; align-items: baseline; gap: 6px; display: flex; border-top: 1px solid #ffffff14;
}
.flip-card .back .pk-value small { color: var(--dim); font-size: 5.5px; letter-spacing: .12em; text-transform: uppercase; }
.flip-card.chase .facefront { border-color: #f2c7448c; }
.flip-card.chase .facefront:before { content: "◆"; font-family: inherit; font-size: 34px; color: var(--gold); text-shadow: 0 0 18px var(--gold); }
.flip-card.chase .chase-flag {
  position: absolute; z-index: 5; top: -9px; left: 50%; transform: translateX(-50%) rotate(0);
  color: #241a00; background: var(--gold); border-radius: 4px; padding: 3px 9px; font-size: 7px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 0 16px #ffd16666;
}
.flip-foot { z-index: 3; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; display: flex; position: relative; }
.flip-total { font-family: var(--font-data); font-size: 15px; color: var(--muted); }
.flip-total strong { color: var(--gold); font-size: 22px; margin-left: 6px; }
.flip-foot .text-button { margin: 0; }
.deal-note { z-index: 5; position: absolute; inset: 0; place-items: center; display: grid; font-size: 12px; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.deal-note span { animation: 1.4s ease-in-out infinite energy-pulse; }
#confetti-canvas { z-index: 20; position: fixed; inset: 0; pointer-events: none; }

/* ---- collection page ---- */
.collection-toolbar { justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; display: flex; }
.collection-filters { align-items: center; gap: 8px; flex-wrap: wrap; display: flex; }
.collection-filters button {
  color: var(--muted); cursor: pointer; background: var(--panel); border: 1px solid var(--line); clip-path: var(--chamfer-sm);
  padding: 8px 14px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: all .2s;
}
.collection-filters button:hover { color: #fff; border-color: #ff5c288c; }
.collection-filters button.active { color: #fff; background: #ff5c2826; border-color: var(--ember); box-shadow: 0 0 16px #ff5c2833; }
.collection-filters select {
  color: #fff; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 12px; font-size: 10px; font-weight: 800; text-transform: uppercase; outline: none;
}
.collection-summary { gap: 22px; display: flex; flex-wrap: wrap; }
.collection-summary > div { border-left: 1px solid var(--line); padding-left: 20px; }
.collection-summary > div:first-child { border: 0; padding-left: 0; }
.collection-summary span { color: var(--dim); text-transform: uppercase; letter-spacing: .1em; font-size: 8px; display: block; }
.collection-summary strong { font-family: var(--font-data); font-size: 22px; }
.collection-summary .set-progress { color: var(--mint); }
.set-track { background: #ffffff12; border-radius: 4px; height: 6px; margin-top: 10px; overflow: hidden; }
.set-track i { background: linear-gradient(90deg, var(--ember), var(--mint)); height: 100%; display: block; border-radius: 4px; transition: width .4s; }

/* ---- odds page ---- */
.odds-block { margin-bottom: 56px; }
.odds-table-wrap { border: 1px solid var(--line); background: #0a0c11; clip-path: var(--chamfer); overflow: hidden; }
.odds-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.odds-table th {
  color: var(--dim); text-align: left; text-transform: uppercase; letter-spacing: .1em; font-size: 9px; font-weight: 800;
  border-bottom: 1px solid var(--line); padding: 14px 18px; background: #ffffff05;
}
.odds-table td { border-bottom: 1px solid #ffffff10; padding: 12px 18px; }
.odds-table tr:last-child td { border-bottom: 0; }
.odds-table .rarity-common { color: #c9c4e2; }
.odds-table .rarity-rare { color: #7ecbff; }
.odds-table .rarity-epic { color: #ffb08f; }
.odds-table .rarity-mythic { color: var(--gold); }
.odds-table b { font-family: var(--font-data); }
.ev-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; display: grid; }
.ev-card { background: var(--panel); border: 1px solid #ffffff14; clip-path: var(--chamfer-sm); padding: 18px; }
.ev-card span { color: var(--dim); text-transform: uppercase; letter-spacing: .1em; font-size: 8px; display: block; margin-bottom: 6px; }
.ev-card strong { font-family: var(--font-data); font-size: 20px; }
.ev-card small { color: var(--muted); font-size: 10px; display: block; margin-top: 3px; }
.honesty-note {
  border-left: 3px solid var(--gold); background: #ffd1660d; border-radius: 0 12px 12px 0;
  padding: 16px 20px; margin-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.7;
}
.honesty-note strong { color: var(--gold); }

/* ---- faq ---- */
.faq-list { display: grid; gap: 12px; }
.faq-list details { background: var(--panel); border: 1px solid #ffffff14; clip-path: var(--chamfer-sm); overflow: hidden; transition: border-color .25s; }
.faq-list details:hover { border-color: #ff5c286e; }
.faq-list summary {
  cursor: pointer; list-style: none; padding: 20px 24px; font-weight: 700; font-size: 15px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:after { content: "+"; color: var(--ember); font-family: var(--font-data); font-size: 20px; transition: transform .25s; }
.faq-list details[open] summary:after { transform: rotate(45deg); }
.faq-list details p { color: var(--muted); margin: 0; padding: 0 24px 22px; font-size: 13px; line-height: 1.8; }
.faq-list details p + p { padding-top: 0; margin-top: 10px; }

/* ---- keyframes ---- */
@keyframes pulse-dot { 0%, to { opacity: .55; transform: scale(.78); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes particle-rise { 0% { opacity: 0; transform: translateY(0) scale(.5); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-500px) scale(1.5); } }
@keyframes card-hover { 0%, to { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes slab-float { 0%, to { transform: translateY(0) rotate(-.35deg); } 50% { transform: translateY(-10px) rotate(.35deg); } }
@keyframes slab-sweep { 0%, 18% { transform: translate(-52%) rotate(4deg); } 58%, to { transform: translate(52%) rotate(4deg); } }
@keyframes phone-float { 0%, to { transform: rotateY(-9deg) rotate(4deg) translateY(0); } 50% { transform: rotateY(-7deg) rotate(3deg) translateY(-12px); } }
@keyframes launch-card-float { 0%, to { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes app-glow-pulse { 0%, to { opacity: .6; transform: translate(-50%, -50%) scale(.9); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes final-rings { 0%, to { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes rip-shake { 0%, to { transform: translate(-3px) rotate(-1deg); } 50% { transform: translate(3px) rotate(1deg); } }
@keyframes tear-line { 0% { transform: scaleX(0); } 50% { opacity: 1; transform: scaleX(1); } to { opacity: 0; transform: scaleX(1); } }
@keyframes rip-flash { 0%, 65% { opacity: 0; } 75% { opacity: .94; } to { opacity: 0; } }
@keyframes toast-in { 0% { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes foil-sweep { 0%, 18% { transform: translate(-55%); } 52%, to { transform: translate(58%); } }
@keyframes energy-pulse { 0%, to { opacity: .45; transform: scale(.97); } 50% { opacity: .9; transform: scale(1.03); } }
@keyframes ring-pulse { 0%, to { opacity: .62; transform: perspective(300px) rotateX(62deg) scale(.94); } 50% { opacity: 1; transform: perspective(300px) rotateX(62deg) scale(1.02); } }
@keyframes spin-flat { to { transform: rotate(360deg); } }

/* scroll-driven reveals — own tile-rise */
@supports (animation-timeline: view()) {
  .section-heading, .flow-grid, .games-grid, .auction-copy, .auction-showcase, .vault-copy, .slab-stack, .app-store-copy, .app-device-showcase, .demo-packs, .asset-grid, .odds-block {
    animation: linear both view-rise; animation-timeline: view(); animation-range: entry 5% cover 32%;
  }
  @keyframes view-rise { 0% { opacity: .15; transform: translateY(42px) rotate(.4deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
}
.hero-content.reveal-in { animation: .75s cubic-bezier(.2, .8, .2, 1) .1s both reveal-in; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

/* ---- responsive ---- */
@media (max-width: 1120px) {
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 8px; }
  .x-social-handle { justify-content: center; width: 40px; padding: 0; }
  .x-social-handle span { display: none; }
  .pack-experience { grid-template-columns: 210px minmax(390px, 1fr) 230px; }
  .pack-object { scale: .9; }
  .pack-catalog > button { grid-template-columns: 120px 1fr; padding: 14px; }
  .pack-object.compact { scale: .83; }
  .games-grid { grid-template-columns: 1fr 1fr; }
  .game-card:first-child { grid-column: 1 / -1; min-height: 500px; }
  .auction-section { gap: 40px; }
  .app-store-section { grid-template-columns: 1fr 430px; gap: 40px; }
  .app-device-showcase { width: 440px; }
  .auction-list article { grid-template-columns: 26px 44px 1fr auto; }
  .auction-list time { display: none; }
}

/* tablet nav: fold links into a dropdown so nothing gets clipped */
@media (max-width: 1120px) {
  .nav-shell { grid-template-columns: 1fr auto; }
  .credits-chip { display: none; }
  .nav-links {
    border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    visibility: hidden; background: #07080ff7; gap: 0; max-height: calc(100dvh - 104px); padding: 8px 18px 18px;
    transition: transform .3s; display: grid; position: absolute; top: 100%; left: 0; right: 0; overflow-y: auto; transform: translateY(-130%);
  }
  .nav-links.open { visibility: visible; transform: translateY(0); }
  .nav-links a { border-bottom: 1px solid #ffffff0f; justify-items: start; min-height: 48px; }
  .nav-links a:after { display: none; }
  .menu-button { border: 1px solid var(--line); cursor: pointer; background: var(--ink-2); clip-path: var(--chamfer-sm); align-content: center; place-items: center; gap: 6px; width: 40px; height: 40px; display: grid; }
  .menu-button span { background: #fff; width: 18px; height: 1px; }
  /* subpage nav: tighter links so all 9 fit */
  .inner-nav > div { gap: 14px; font-size: 9px; }
  .inner-nav .inner-nav-cta { padding: 10px 12px; }
}

/* subpage nav: wrap links into two rows */
@media (max-width: 880px) {
  .inner-nav { height: auto; min-height: 92px; padding: 12px 18px 10px; }
  .inner-nav > div { border-top: 1px solid #ffffff12; justify-content: flex-start; gap: 10px 18px; margin-top: 12px; padding: 12px 0 0; width: 100%; flex-wrap: wrap; }
  .inner-nav > div > a { min-height: 26px; }
  .inner-nav .inner-nav-cta { background: 0 0; border: 0; padding: 0; clip-path: none; }
}
@media (max-width: 880px) {
  .topline { display: none; }
  .nav-shell { grid-template-columns: 1fr auto; height: 68px; padding: 0 18px; inset: 0 0 auto; }
  .nav-links {
    border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    visibility: hidden; background: #07080ff7; gap: 0; max-height: calc(100dvh - 68px); padding: 8px 18px 18px;
    transition: transform .3s; display: grid; position: absolute; top: 100%; left: 0; right: 0; overflow-y: auto; transform: translateY(-130%);
  }
  .nav-links.open { visibility: visible; transform: translateY(0); }
  .nav-links a { border-bottom: 1px solid #ffffff0f; justify-items: start; min-height: 48px; }
  .nav-links a:after { display: none; }
  .menu-button { border: 1px solid var(--line); cursor: pointer; background: var(--ink-2); clip-path: var(--chamfer-sm); align-content: center; place-items: center; gap: 6px; width: 40px; height: 40px; display: grid; }
  .menu-button span { background: #fff; width: 18px; height: 1px; }
  .hero { align-items: flex-end; min-height: 780px; padding: 120px 22px 70px; }
  .hero:after { background: linear-gradient(#07080f2b 12%, #07080fe8 55%, #07080f 98%), linear-gradient(90deg, #07080f94, #0000); }
  .hero-bg { background-position: 67% 0; }
  .hero-content { width: 100%; }
  h1 { font-size: clamp(40px, 13vw, 62px); }
  .hero-content > p { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .primary-cta, .hero-actions .secondary-cta { width: 100%; }
  .trust-row { margin-top: 38px; }
  .trust-row div { flex: 1; min-width: 0; padding: 0 10px; }
  .trust-row strong { font-size: 15px; }
  .trust-row span { font-size: 7px; }
  .section { padding: 84px 20px; }
  .section-heading { flex-direction: column; align-items: flex-start; }
  .section-heading h2 { font-size: 40px; }
  .collection-tabs, .commerce-room .collection-tabs { grid-template-columns: repeat(3, 1fr); }
  .collection-intro { grid-template-columns: 1fr auto; padding: 14px; }
  .collection-intro p { grid-area: 2 / 1 / auto / -1; }
  .pack-experience { grid-template-columns: 1fr; display: grid; }
  .pack-information { padding: 32px 28px 0; }
  .pack-facts { grid-template-columns: repeat(3, 1fr); gap: 13px; display: grid; }
  .pack-facts > div { min-width: 0; }
  .pack-stage { height: 620px; }
  .pack-object { scale: 1; }
  .stage-arrow.prev { left: 18px; }
  .stage-arrow.next { right: 18px; }
  .purchase-console { grid-template-columns: 1fr 1fr; padding: 0 28px 34px; display: grid; }
  .stock-orb { display: none; }
  .purchase-button, .secure-note { grid-column: 1 / -1; }
  .odds-drawer { width: min(355px, 100%); }
  .pack-catalog { grid-template-columns: 1fr; }
  .pack-catalog > button { grid-template-columns: 155px 1fr; }
  .pack-object.compact { scale: 1; }
  .flow-grid { grid-template-columns: 1fr 1fr; }
  .flow-grid article { border-bottom: 1px solid var(--line); }
  .flow-grid article:nth-child(2) { border-right: 0; }
  .games-section { padding: 84px 20px; }
  .games-grid { grid-template-columns: 1fr; }
  .game-card, .game-card:first-child { grid-column: auto; min-height: 430px; }
  .auction-section { grid-template-columns: 1fr; }
  .auction-showcase { width: 350px; }
  .vault-section { grid-template-columns: 1fr; min-height: 1040px; padding: 84px 20px; }
  .vault-copy { align-self: end; }
  .slab-stack { transform-origin: 50%; grid-row: 1; width: 430px; max-width: 100%; height: 570px; transform: scale(.88); }
  .vault-orbit { top: -80px; right: -350px; }
  .app-store-section { grid-template-columns: 1fr; gap: 35px; min-height: 0; padding: 90px 20px 65px; }
  .app-store-copy { max-width: 680px; margin: auto; }
  .app-device-showcase { width: 450px; max-width: 100%; height: 660px; }
  .rip-stage { grid-template-columns: 1fr; padding: 30px; }
  .modal-pack-wrap { height: 440px; transform: scale(.72); }
  .rip-copy { text-align: center; padding: 0 20px 30px; }
  .rip-copy .live-pill { margin-inline: auto; }
  .demo-packs { grid-template-columns: 1fr; }
  .flip-card { width: 118px; height: 172px; }
  .flip-card .back .pk-head { padding: 4px 6px 3px; }
  .flip-card .back .pk-name small { font-size: 4.5px; }
  .flip-card .back .pk-name strong { font-size: 10px; }
  .flip-card .back .pk-hp strong { font-size: 11px; }
  .flip-card .back .pk-hp small { font-size: 5px; }
  .flip-card .back .pk-type { width: 9px; height: 9px; }
  .flip-card .back .pk-art { min-height: 44px; }
  .flip-card .back .pk-moves { gap: 2px; padding: 4px 6px 0; }
  .flip-card .back .pk-move { padding: 3px 4px; }
  .flip-card .back .pk-move p { display: none; }
  .flip-card .back .pk-move-name span { font-size: 6.5px; }
  .flip-card .back .pk-move-name b { font-size: 9px; }
  .flip-card .back .pk-cost i { width: 7px; height: 7px; }
  .flip-card .back .pk-value { font-size: 11px; padding: 3px 7px 5px; }
  .flip-card .back .pk-value small { font-size: 5px; }
  .flip-fan { gap: 4px; }
  .site-footer { text-align: center; grid-template-columns: 1fr; gap: 12px; }
  .site-footer-brand img { margin: auto; }
  .site-footer nav, .site-footer .site-footer-legal { justify-content: center; }
  .inner-hero { min-height: 430px; padding-inline: 20px; }
  .inner-hero-orbit { right: -130px; }
  .inner-content { padding: 60px 20px 85px; }
  .contact-grid { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr 1fr; }
  .legal-document section { grid-template-columns: 1fr; gap: 13px; }
  .app-launch-grid { grid-template-columns: 1fr; padding: 40px 32px; }
  .app-launch-phones { width: 520px; max-width: 100%; margin: auto; }
  .purchases-intro { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .nav-shell .profile-button { display: none; }
  .nav-shell .nav-actions { gap: 8px; }
}
@media (max-width: 520px) {
  .inner-nav { align-items: flex-start; height: auto; min-height: 118px; padding: 15px 18px 12px; }
  .inner-nav > div { scrollbar-width: none; border-top: 1px solid #ffffff12; justify-content: flex-start; gap: 10px 20px; margin-top: 14px; padding: 12px 0 0; position: static; width: 100%; overflow: visible; flex-wrap: wrap; }
  .inner-nav > div::-webkit-scrollbar { display: none; }
  .inner-nav > div > a { flex: none; align-items: center; min-height: 26px; display: flex; }
  .inner-nav .inner-nav-cta { background: 0 0; border: 0; padding: 0; clip-path: none; }
  .inner-hero { min-height: 390px; padding-top: 58px; }
  .inner-hero h1 { font-size: 38px; }
  .inner-hero > p { font-size: 14px; }
  .inner-content { padding-inline: 15px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form, .contact-card { padding: 25px; }
  .contact-form .primary-cta { width: 100%; }
  .support-grid { grid-template-columns: 1fr; }
  .page-callout { flex-direction: column; align-items: stretch; padding: 30px 24px; }
  .page-actions { flex-direction: column; }
  .page-actions .primary-cta, .page-actions .secondary-cta { width: 100%; }
  .policy-meta { flex-direction: column; align-items: flex-start; padding: 22px; }
  .legal-document section { padding: 27px 22px; }
  .app-launch-grid { padding: 32px 22px; }
  .app-launch-phones { width: 310px; height: 425px; }
  .app-launch-phones > div:first-child { border-width: 4px; border-radius: 25px; width: 176px; height: 358px; top: 47px; }
  .app-launch-phones > div:last-child { border-width: 4px; border-radius: 25px; width: 196px; height: 399px; }
  .profile-button { display: none; }
  .hero { min-height: 750px; }
  h1 { font-size: 39px; }
  .hero-content > p { line-height: 1.5; }
  .credits-chip { height: 38px; padding: 0 10px; font-size: 11px; }
  .credits-chip small { display: none; }
  .collection-tabs, .commerce-room .collection-tabs { grid-template-columns: repeat(2, 1fr); }
  .collection-tabs button { min-height: 56px; padding: 0 13px; }
  .collection-tabs span { font-size: 10px; }
  .collection-tabs small { font-size: 7px; }
  .pack-stage { height: 555px; }
  .pack-object { scale: .84; }
  .stage-rings { width: 340px; bottom: 41px; }
  .stage-arrow { width: 42px; height: 42px; }
  .stage-arrow.prev { left: 7px; }
  .stage-arrow.next { right: 7px; }
  .purchase-console { grid-template-columns: 1fr; }
  .purchase-button, .secure-note { grid-column: auto; }
  .checkout-total { border-top: 1px solid var(--line); padding-top: 15px; }
  .pack-catalog-header > small { display: none; }
  .pack-catalog > button { grid-template-columns: 115px 1fr; min-height: 220px; }
  .pack-object.compact { scale: .82; }
  .flow-grid { grid-template-columns: 1fr; }
  .flow-grid article { border-right: 0; }
  .auction-list article { grid-template-columns: 44px 1fr auto; }
  .auction-rank { display: none; }
  .bid strong { font-size: 13px; }
  .auction-showcase { width: 300px; padding-inline: 24px; }
  .vault-stats div { flex: 1; min-width: 0; padding: 0 12px; }
  .slab-stack { margin-left: -20px; transform: scale(.72); }
  .app-store-copy h2 { font-size: 38px; }
  .app-store-copy > p { font-size: 14px; }
  .app-store-actions { flex-direction: column; }
  .app-store-badge, .app-store-actions .secondary-cta { width: 100%; }
  .app-device-showcase { width: 340px; height: 535px; }
  .app-phone-back { border-width: 4px; border-radius: 30px; width: 206px; height: 420px; top: 70px; left: 4px; }
  .app-phone-front { border-width: 4px; border-radius: 31px; width: 236px; height: 481px; top: 20px; right: 3px; }
  .floating-launch-card { bottom: 26px; right: 0; }
  .pack-modal { min-height: 0; max-height: calc(100vh - 24px); overflow-y: auto; }
  .rip-stage { min-height: 680px; padding: 25px 12px; }
  .modal-pack-wrap { height: 430px; transform: scale(.69); }
  .commerce-dialog .rip-stage { padding: 25px 12px; }
  .commerce-dialog .modal-pack-wrap { height: 365px; }
  .flip-card { width: 92px; height: 136px; }
  .asset-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .asset-card .pk-head { padding: 6px 8px 4px; }
  .asset-card .pk-name small { font-size: 5.5px; }
  .asset-card .pk-name strong { font-size: 12px; }
  .asset-card .pk-hp strong { font-size: 13px; }
  .asset-card .pk-art { min-height: 40px; }
  .asset-card .pk-moves { padding: 5px 9px 0; }
  .asset-card .pk-move { padding: 2px 4px; }
  .asset-card .pk-move:nth-child(2) { display: none; }
  .asset-card .pk-move p { display: none; }
  .asset-card .pk-move-name span { font-size: 8px; }
  .asset-card .pk-move-name b { font-size: 10px; }
  .asset-card .pk-flavor { -webkit-line-clamp: 1; line-clamp: 1; margin: 4px 11px 4px; }
  .asset-card .pk-stats { margin: 0 9px 5px; }
  .asset-card .pk-stat { padding: 3px 2px 4px; }
  .asset-card .pk-stat i { width: 8px; height: 8px; }
  .asset-card .pk-retreat i { width: 7px; height: 7px; }
  .asset-card .pk-market { margin: 0 9px 5px; padding: 4px 6px; }
  .asset-card .pk-market strong { font-size: 11px; }
  .asset-card .pk-foot { padding: 4px 10px 6px; }
  .asset-card .pk-foot span { font-size: 6.5px; }
  .asset-card .pk-foot strong { font-size: 7.5px; }
  .flip-card .back .pk-head { padding: 3px 4px 2px; }
  .flip-card .back .pk-name small { font-size: 4px; }
  .flip-card .back .pk-name strong { font-size: 8px; }
  .flip-card .back .pk-hp strong { font-size: 9px; }
  .flip-card .back .pk-hp small { font-size: 4.5px; }
  .flip-card .back .pk-type { width: 8px; height: 8px; }
  .flip-card .back .pk-art { min-height: 36px; margin: 0 5px; }
  .flip-card .back .pk-moves { gap: 2px; padding: 3px 5px 0; }
  .flip-card .back .pk-move { padding: 2px 3px; }
  .flip-card .back .pk-move p { display: none; }
  .flip-card .back .pk-move:nth-child(2) { display: none; }
  .flip-card .back .pk-move-name span { font-size: 5px; }
  .flip-card .back .pk-move-name b { font-size: 7px; }
  .flip-card .back .pk-cost i { width: 5px; height: 5px; }
  .flip-card .back .pk-value { font-size: 9px; padding: 2px 5px 5px; }
  .flip-card .back .pk-value small { font-size: 4.5px; }
  .collection-summary { gap: 14px; }
  .collection-summary > div { padding-left: 14px; }
  .wallet-button { padding-inline: 9px; font-size: 11px; }
  .receipt-panel dl { grid-template-columns: 1fr; gap: 10px; }
  .receipt-panel dd { margin-bottom: 10px; }
  .purchase-list > a { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, :before, :after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .cursor-aurora { display: none; }
}

/* ============ v2 asset cards: live quotes + per-asset animation ============ */
.heading-actions { display: flex; gap: 18px; align-items: center; }
.demo-pack { position: relative; overflow: hidden; }
.demo-pack > * { position: relative; z-index: 1; }
.demo-pack::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.demo-pack.core::after { box-shadow: inset 0 0 34px color-mix(in srgb, var(--accent) 12%, transparent); animation: core-breathe 4s ease-in-out infinite; }
@keyframes core-breathe { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.demo-pack.growth::after { top: auto; height: 42%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 20%, transparent)); animation: growth-rise 3.4s ease-in-out infinite; }
@keyframes growth-rise { 0% { transform: translateY(100%); opacity: 0; } 30% { opacity: .85; } 100% { transform: translateY(-150%); opacity: 0; } }
.demo-pack.alpha::after { background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--gold) 20%, transparent) 50%, transparent 60%); background-size: 260% 100%; animation: alpha-sweep 3.8s ease-in-out infinite; }
@keyframes alpha-sweep { 0% { background-position: 130% 0; } 60%,100% { background-position: -130% 0; } }
.demo-pack .odds-line { display: block; border-top: 1px solid #ffffff12; margin-top: 14px; padding-top: 12px; color: var(--dim); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: color .2s; }
.demo-pack .odds-line:hover { color: var(--mint); }

.asset-card { --i: 0; animation: card-in .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.asset-card:hover { transform: translateY(-6px) scale(1.02); }
.asset-card > *:not(.fx) { position: relative; z-index: 1; }
.asset-card .fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.asset-card .fx i { position: absolute; display: block; }

/* -- NEB Nebula: twinkling starfield + rotating nebula wash -- */
.anim-stars .fx::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, hsl(var(--hue) 70% 55% / .13), transparent 30%, hsl(calc(var(--hue) + 40) 70% 55% / .11) 50%, transparent 70%, hsl(var(--hue) 70% 55% / .13)); animation: spin-slow 14s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.anim-stars .fx i { width: 3px; height: 3px; border-radius: 50%; background: hsl(var(--hue) 80% 75%); box-shadow: 0 0 6px hsl(var(--hue) 80% 60%); animation: twinkle 2.8s ease-in-out infinite; }
.anim-stars .fx i:nth-child(1) { top: 18%; left: 22%; }
.anim-stars .fx i:nth-child(2) { top: 30%; left: 70%; width: 2px; height: 2px; animation-delay: .9s; }
.anim-stars .fx i:nth-child(3) { top: 12%; left: 55%; width: 2px; height: 2px; animation-delay: 1.6s; }
.anim-stars .fx i:nth-child(4) { top: 42%; left: 34%; width: 4px; height: 4px; animation-delay: 2.2s; }
@keyframes twinkle { 0%,100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }

/* -- VOL Volta: lightning streaks -- */
.anim-bolt .fx i { width: 2px; height: 34px; left: 50%; top: 8%; background: linear-gradient(#fff, hsl(var(--hue) 90% 70%)); box-shadow: 0 0 10px hsl(var(--hue) 90% 65%); opacity: 0; transform: skewX(-8deg); animation: bolt-flash 5.5s linear infinite; }
.anim-bolt .fx i:nth-child(2) { left: 66%; top: 16%; height: 22px; animation-delay: 2.2s; }
.anim-bolt .fx i:nth-child(3) { left: 30%; top: 20%; height: 14px; animation-delay: 4s; }
@keyframes bolt-flash { 0%,91%,100% { opacity: 0; } 92% { opacity: 1; } 94% { opacity: .2; } 95% { opacity: 1; } 98% { opacity: 0; } }
.anim-bolt .glyph { animation: bolt-glyph 5.5s linear infinite; }
@keyframes bolt-glyph { 0%,91%,100% { box-shadow: none; } 92%,96% { box-shadow: 0 0 18px hsl(var(--hue) 80% 60%); color: #fff; } }

/* -- ORB Orbita: satellites on circular paths -- */
.anim-orbit .fx i { width: 5px; height: 5px; border-radius: 50%; background: hsl(var(--hue) 85% 65%); box-shadow: 0 0 8px hsl(var(--hue) 85% 55%); top: 10%; left: 20%; animation: orbit-a 3.6s linear infinite; }
.anim-orbit .fx i:nth-child(2) { width: 3px; height: 3px; animation: orbit-b 4.8s linear infinite; }
.anim-orbit .fx i:nth-child(3) { width: 4px; height: 4px; animation: orbit-c 6s linear infinite; }
@keyframes orbit-a { from { transform: rotate(0) translateX(30px); } to { transform: rotate(360deg) translateX(30px); } }
@keyframes orbit-b { from { transform: rotate(0) translateX(46px); } to { transform: rotate(360deg) translateX(46px); } }
@keyframes orbit-c { from { transform: rotate(0) translateX(62px); } to { transform: rotate(360deg) translateX(62px); } }

/* -- FLX Fluxa: diagonal light streaks -- */
.anim-streak .fx i { width: 130%; height: 1px; left: -15%; top: 30%; background: linear-gradient(90deg, transparent, hsl(var(--hue) 90% 65%), transparent); transform: rotate(-28deg); opacity: 0; animation: streak-sweep 3.4s ease-in-out infinite; }
.anim-streak .fx i:nth-child(2) { top: 56%; animation-delay: 1.6s; }
@keyframes streak-sweep { 0% { opacity: 0; translate: -28% 0; } 15% { opacity: .9; } 45% { opacity: 0; translate: 28% 0; } 100% { opacity: 0; translate: 28% 0; } }

/* -- AUR Aurum: golden shine sweep -- */
.anim-gold .fx i { inset: 0; background: linear-gradient(115deg, transparent 42%, hsl(45 90% 78% / .26) 50%, transparent 58%); background-size: 250% 100%; animation: gold-sweep 3.8s ease-in-out infinite; }
.anim-gold .fx i:nth-child(2) { inset: auto 0 0 0; height: 2px; background: linear-gradient(90deg, transparent, hsl(45 90% 70% / .8), transparent); background-size: auto; animation: gold-line 3.8s ease-in-out infinite; }
@keyframes gold-sweep { 0% { background-position: 120% 0; } 55%,100% { background-position: -120% 0; } }
@keyframes gold-line { 0% { transform: translateX(-100%); opacity: 0; } 30% { opacity: 1; } 60%,100% { transform: translateX(100%); opacity: 0; } }

/* -- AET Aether: expanding code rings -- */
.anim-rings .fx i { width: 10px; height: 10px; border: 1px solid hsl(var(--hue) 80% 60%); border-radius: 50%; left: 14%; top: 12%; opacity: 0; animation: ring-out 4s ease-out infinite; }
.anim-rings .fx i:nth-child(2) { animation-delay: 1.3s; }
.anim-rings .fx i:nth-child(3) { animation-delay: 2.6s; }
@keyframes ring-out { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2); } }

/* -- QNT Quanta: rising particles -- */
.anim-particles .fx i { width: 3px; height: 3px; border-radius: 50%; background: hsl(var(--hue) 85% 70%); bottom: -6px; opacity: 0; animation: rise 4.2s linear infinite; }
.anim-particles .fx i:nth-child(1) { left: 20%; }
.anim-particles .fx i:nth-child(2) { left: 45%; width: 2px; height: 2px; animation-delay: 1.4s; }
.anim-particles .fx i:nth-child(3) { left: 70%; animation-delay: 2.8s; }
.anim-particles .fx i:nth-child(4) { left: 58%; width: 2px; height: 2px; animation-delay: 3.5s; }
@keyframes rise { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 85% { opacity: .5; } 100% { opacity: 0; transform: translateY(-170px); } }

/* -- PRS Prisma: refracting rainbow bars -- */
.anim-prism .fx i { left: 6%; right: 6%; height: 9px; top: -14px; background: linear-gradient(90deg, #ff5c28, #ffd166, #3ce6a3, #2b9fff, #b36aff, #ff5c28); filter: blur(6px); opacity: .3; animation: prism-move 5s linear infinite; }
.anim-prism .fx i:nth-child(2) { top: auto; bottom: -14px; animation-delay: 2.5s; }
@keyframes prism-move { from { transform: translateY(0); } 50% { transform: translateY(120px); filter: blur(6px) hue-rotate(180deg); } to { transform: translateY(240px); filter: blur(6px) hue-rotate(360deg); } }

/* -- VRS Versa: equalizer bars -- */
.anim-eq .fx i { width: 3px; bottom: 12px; background: hsl(var(--hue) 80% 62%); transform-origin: bottom; animation: eq-bounce 1.1s ease-in-out infinite; }
.anim-eq .fx i:nth-child(1) { left: 14%; height: 26px; }
.anim-eq .fx i:nth-child(2) { left: calc(14% + 10px); height: 14px; animation-delay: .15s; }
.anim-eq .fx i:nth-child(3) { left: calc(14% + 20px); height: 34px; animation-delay: .3s; }
.anim-eq .fx i:nth-child(4) { left: calc(14% + 30px); height: 20px; animation-delay: .45s; }
@keyframes eq-bounce { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* -- PXL Pixelon: scanning pixel grid -- */
.anim-pixels .fx { background: repeating-linear-gradient(0deg, transparent 0 9px, hsl(var(--hue) 70% 60% / .1) 9px 10px), repeating-linear-gradient(90deg, transparent 0 9px, hsl(var(--hue) 70% 60% / .1) 9px 10px); }
.anim-pixels .fx i { left: 0; right: 0; height: 14px; top: -14px; background: linear-gradient(180deg, transparent, hsl(var(--hue) 80% 60% / .32), transparent); animation: scan-down 3.2s linear infinite; }
@keyframes scan-down { to { transform: translateY(280px); } }

/* -- MRC Mercury: flowing payment lanes -- */
.anim-flow .fx i { left: -30%; width: 30%; top: 20%; height: 2px; background: linear-gradient(90deg, transparent, hsl(var(--hue) 85% 65%), transparent); animation: flow-x 3s linear infinite; }
.anim-flow .fx i:nth-child(2) { top: 48%; height: 1px; width: 45%; left: -45%; animation-delay: 1.5s; }
@keyframes flow-x { to { transform: translateX(600%); } }

/* -- APX Apex 500: climbing index line -- */
.anim-spark .fx { inset: auto 12px 36px 12px; height: 30px; border-bottom: 1px dashed hsl(var(--hue) 80% 60% / .5); }
.anim-spark .fx i { width: 4px; height: 4px; border-radius: 50%; background: hsl(var(--hue) 90% 70%); box-shadow: 0 0 8px hsl(var(--hue) 90% 60%); bottom: 0; animation: climb 3.6s ease-in-out infinite; }
.anim-spark .fx i:nth-child(1) { left: 8%; }
.anim-spark .fx i:nth-child(2) { left: 32%; animation-delay: .5s; }
.anim-spark .fx i:nth-child(3) { left: 56%; animation-delay: 1s; }
.anim-spark .fx i:nth-child(4) { left: 80%; animation-delay: 1.5s; }
@keyframes climb { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-20px); opacity: 1; } }

/* ============ boot sequence (fullscreen intro) ============ */
/* trailer-style starfield */
.boot-stars { position: absolute; inset: 0; overflow: hidden; }
.boot-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0; animation: boot-star-tw 2.2s ease-in-out infinite; }
.boot-stars i:nth-child(1) { left: 12%; top: 18%; animation-delay: .1s; }
.boot-stars i:nth-child(2) { left: 26%; top: 8%; width: 2px; height: 2px; animation-delay: .9s; }
.boot-stars i:nth-child(3) { left: 40%; top: 26%; animation-delay: .4s; }
.boot-stars i:nth-child(4) { left: 55%; top: 10%; width: 2px; height: 2px; animation-delay: 1.4s; }
.boot-stars i:nth-child(5) { left: 68%; top: 20%; animation-delay: .7s; }
.boot-stars i:nth-child(6) { left: 82%; top: 6%; width: 2px; height: 2px; animation-delay: 1.8s; }
.boot-stars i:nth-child(7) { left: 92%; top: 30%; animation-delay: 1.1s; }
.boot-stars i:nth-child(8) { left: 8%; top: 48%; width: 2px; height: 2px; animation-delay: 2s; }
.boot-stars i:nth-child(9) { left: 96%; top: 56%; width: 2px; height: 2px; animation-delay: .5s; }
.boot-stars i:nth-child(10) { left: 20%; top: 62%; width: 2px; height: 2px; animation-delay: 1.6s; }
.boot-stars i:nth-child(11) { left: 48%; top: 52%; width: 2px; height: 2px; animation-delay: 2.4s; }
.boot-stars i:nth-child(12) { left: 74%; top: 64%; animation-delay: 1.2s; }
@keyframes boot-star-tw { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: .9; transform: scale(1); } }
.boot.run .boot-stars i { opacity: 1; }

/* creature cameo sweep (trailer montage beat) */

/* shooting stars */
.boot-shoot i { position: absolute; width: 120px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff 55%, #9fd8ff);
  transform: rotate(-24deg); filter: drop-shadow(0 0 6px #9fd8ff); }
.boot-shoot i:nth-child(1) { left: 14%; top: 20%; animation: shoot 3.2s ease-in 1s 2; }
.boot-shoot i:nth-child(2) { left: 56%; top: 10%; width: 82px; animation: shoot 3.2s ease-in 2.3s 2; }
@keyframes shoot { 0% { opacity: 0; transform: rotate(-24deg) translateX(0); } 8% { opacity: 1; } 26% { opacity: 0; transform: rotate(-24deg) translateX(430px); } 100% { opacity: 0; } }

/* cinematic horizon silhouette */
.boot-horizon { position: absolute; inset: auto 0 0; height: 34vh; opacity: 0; pointer-events: none; }
.boot-horizon svg { width: 100%; height: 100%; display: block; }
.boot.run .boot-horizon { animation: horizon-in 1.5s ease .25s forwards; }
@keyframes horizon-in { from { opacity: 0; transform: translateY(34px); } to { opacity: .9; transform: none; } }

/* film vignette */
.boot-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, transparent 55%, #00000059 100%); }

/* crack screen shake */
.boot.burst .boot-core { animation: core-shake .45s ease-out; }
@keyframes core-shake {
  0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-7px, 3px); }
  30% { transform: translate(6px, -4px); } 45% { transform: translate(-4px, 2px); } 60% { transform: translate(3px, -2px); }
}

/* wordmark slam finale */
.boot-logo { position: absolute; inset: 0; place-items: center; display: grid; opacity: 0; pointer-events: none; }
.boot.logo .boot-logo { animation: logo-slam 1.2s cubic-bezier(.2, .7, .2, 1) forwards; }
.boot-logo img { width: min(560px, 74vw); height: auto; filter: drop-shadow(0 0 46px #ff5c2855); }
.boot.logo .boot-energy { opacity: .16; filter: blur(9px); transition: opacity .4s, filter .4s; }
.boot.logo .boot-tag, .boot.logo .boot-bar, .boot.logo .boot-skip { opacity: 0; transition: opacity .3s; }
@keyframes logo-slam {
  0% { opacity: 0; transform: scale(3.4); filter: blur(16px); }
  55% { opacity: 1; transform: scale(.94); filter: blur(0); }
  75% { transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
/* logo ring pulse + tagline */
.boot-logo:after { content: ""; position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; border: 2px solid #f2c74488; opacity: 0; }
.boot.logo .boot-logo:after { animation: logo-ring 1.15s ease-out forwards; }
@keyframes logo-ring { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(5.4); } }
.boot-tagline { position: absolute; top: calc(50% + 58px); left: 0; right: 0; text-align: center; opacity: 0; font-family: var(--font-data); font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: var(--muted); padding-left: .42em; }
.boot.logo .boot-tagline { animation: tagline-in .9s ease .45s forwards; }
@keyframes tagline-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body:has(.boot) { overflow: hidden; }
.boot {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 42%, #0d1020 0%, #05060b 62%);
  user-select: none; -webkit-user-select: none;
}
.boot * { pointer-events: none; }
.boot-bg {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(circle at 50% 46%, #ff5c2814, transparent 42%),
    repeating-linear-gradient(0deg, transparent 0 46px, #ffffff08 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, #ffffff08 46px 47px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
}
.boot.run .boot-bg { animation: bg-in 1.1s ease-out forwards; }
@keyframes bg-in { from { opacity: 0; } to { opacity: 1; } }
.boot-rainbow {
  position: absolute; inset: -35%; z-index: 0; opacity: .15; pointer-events: none;
  background: conic-gradient(from 0deg, #ff5c28, #ffd166, #3ce6a3, #2b9fff, #b36aff, #ff5fa2, #ff5c28);
  animation: spin-slow 9s linear infinite; filter: blur(34px) saturate(1.4);
}
.boot-scan {
  position: absolute; left: 0; right: 0; top: -170px; height: 150px;
  background: linear-gradient(180deg, transparent, #ff5c2830 30%, #ffd16655 42%, #3ce6a355 50%, #2b9fff55 58%, #ff5fa230 70%, transparent);
  filter: blur(1px);
}
.boot.run .boot-scan { animation: boot-scan 1.5s cubic-bezier(.55,.05,.4,.95) forwards; }
@keyframes boot-scan { to { transform: translateY(calc(100vh + 340px)); } }
.boot-dust i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #ffd166; box-shadow: 0 0 8px #ffd16688; opacity: 0;
}
.boot-dust i:nth-child(2), .boot-dust i:nth-child(6) { background: #3ce6a3; box-shadow: 0 0 8px #3ce6a388; }
.boot-dust i:nth-child(3), .boot-dust i:nth-child(7) { background: #ff5fa2; box-shadow: 0 0 8px #ff5fa288; }
.boot-dust i:nth-child(4), .boot-dust i:nth-child(8) { background: #2b9fff; box-shadow: 0 0 8px #2b9fff88; }
.boot-dust i:nth-child(5) { background: #b36aff; box-shadow: 0 0 8px #b36aff88; }
.boot.run .boot-dust i { animation: dust-float 5s ease-in-out infinite; }
.boot-dust i:nth-child(1) { left: 14%; top: 64%; animation-delay: .2s; }
.boot-dust i:nth-child(2) { left: 28%; top: 30%; width: 2px; height: 2px; animation-delay: 1.1s; }
.boot-dust i:nth-child(3) { left: 44%; top: 74%; animation-delay: 2s; }
.boot-dust i:nth-child(4) { left: 58%; top: 22%; width: 2px; height: 2px; animation-delay: .6s; }
.boot-dust i:nth-child(5) { left: 72%; top: 60%; animation-delay: 1.6s; }
.boot-dust i:nth-child(6) { left: 84%; top: 34%; width: 2px; height: 2px; animation-delay: 2.6s; }
.boot-dust i:nth-child(7) { left: 8%; top: 18%; width: 2px; height: 2px; animation-delay: 3s; }
.boot-dust i:nth-child(8) { left: 92%; top: 78%; animation-delay: .9s; }
@keyframes dust-float {
  0%,100% { opacity: 0; transform: translateY(6px); }
  50% { opacity: .85; transform: translateY(-14px); }
}
.boot-core {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
}
.boot-word {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .06em;
  font-size: clamp(58px, 12.5vw, 150px); line-height: 1; display: flex;
}
.boot-word span {
  display: inline-block; opacity: 0; transform: translateY(50px) rotate(7deg) scale(1.5);
  filter: blur(12px);
  background: linear-gradient(90deg, #ff5c28, #ffd166, #3ce6a3, #2b9fff, #b36aff, #ff5fa2, #ff5c28);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rainbow-flow 2.6s linear infinite;
  transition: transform .65s cubic-bezier(.2,.7,.2,1), opacity .65s, filter .65s;
  transition-delay: calc(var(--d) * 70ms + 280ms);
}
@keyframes rainbow-flow { to { background-position: -300% 0; } }
.boot-word span:nth-child(1) { --d: 0; } .boot-word span:nth-child(2) { --d: 1; }
.boot-word span:nth-child(3) { --d: 2; } .boot-word span:nth-child(4) { --d: 3; }
.boot-word span:nth-child(5) { --d: 4; } .boot-word span:nth-child(6) { --d: 5; }
.boot.run .boot-word span { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 18px rgba(255,95,162,.5)) drop-shadow(0 0 34px rgba(43,159,255,.4)); }
/* ============ energy core (no mascot) ============ */
.boot-energy { position: relative; width: min(340px, 62vw); aspect-ratio: 1; margin: 4px auto 0; }
.boot-energy svg { width: 100%; height: 100%; display: block; overflow: visible; }
.e-orb, .e-orb-core, .e-halo { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.boot.run .e-orb { animation: orb-ignite .9s cubic-bezier(.3, 1.5, .5, 1) .2s both, orb-pulse 2s ease-in-out 1.4s infinite; }
.boot.run .e-orb-core { animation: orb-ignite .9s cubic-bezier(.3, 1.5, .5, 1) .3s both; }
.boot.run .e-halo { animation: halo-in 1.7s ease .4s both; }
@keyframes orb-ignite { 0% { opacity: 0; transform: scale(.1); } 70% { opacity: 1; transform: scale(1.16); } 100% { opacity: 1; transform: scale(1); } }
@keyframes orb-pulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.07); filter: brightness(1.28); } }
@keyframes halo-in { from { opacity: 0; transform: scale(.45); } to { opacity: 1; transform: scale(1); } }
.e-ring, .e-ring2 { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.boot.run .e-ring { animation: ring-in 1.2s ease .55s both; }
.boot.run .e-ring2 { animation: ring-in 1.2s ease .7s both; }
@keyframes ring-in { from { opacity: 0; transform: rotate(-120deg) scale(.6); } to { opacity: 1; transform: rotate(0) scale(1); } }
.boot.surge .e-ring { animation: ring-spin 12s linear infinite; }
.boot.surge .e-ring2 { animation: ring-spin-rev 18s linear infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes ring-spin-rev { to { transform: rotate(-360deg); } }
.e-arcs path { stroke: #ffe27a; stroke-width: 5; opacity: 0; }
.boot.surge .e-arcs path { animation: arc-zap .5s steps(1) infinite; }
.boot.surge .e-arcs path:nth-child(2) { animation-delay: .12s; }
.boot.surge .e-arcs path:nth-child(3) { animation-delay: .24s; }
.boot.surge .e-arcs path:nth-child(4) { animation-delay: .36s; }
@keyframes arc-zap { 0%, 100% { opacity: 0; } 45% { opacity: .95; filter: drop-shadow(0 0 12px #ffd166); } }
/* screen lightning branches */
.e-bolts { position: absolute; inset: 0; pointer-events: none; }
.e-bolts i { position: absolute; width: 3px; height: 0; top: 0; opacity: 0; background: linear-gradient(180deg, #fff, #9fd8ff); box-shadow: 0 0 14px #7ec8ff; }
.e-bolts i:nth-child(1) { left: 18%; transform: rotate(8deg); }
.e-bolts i:nth-child(2) { left: 38%; transform: rotate(-6deg); }
.e-bolts i:nth-child(3) { right: 16%; transform: rotate(7deg); }
.e-bolts i:nth-child(4) { right: 34%; transform: rotate(-9deg); }
.boot.surge .e-bolts i { animation: bolt-drop 2.8s ease-out infinite; }
.e-bolts i:nth-child(2) { animation-delay: .7s; }
.e-bolts i:nth-child(3) { animation-delay: 1.4s; }
.e-bolts i:nth-child(4) { animation-delay: 2.1s; }
@keyframes bolt-drop { 0% { height: 0; opacity: 0; } 6% { opacity: .9; } 30% { height: 46vh; opacity: 0; } 100% { height: 0; opacity: 0; } }
/* shard burst on detonation */
.e-shards { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; }
.e-shards i {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 16px; opacity: 0;
  background: linear-gradient(180deg, #fff3c4, #ffd166 55%, #b37800);
  clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: 0 0 10px #ffd16699;
}
.e-shards i:nth-child(4n+1) { background: linear-gradient(180deg, #ffc7e2, #ff5fa2 55%, #a02060); box-shadow: 0 0 10px #ff5fa299; }
.e-shards i:nth-child(4n+2) { background: linear-gradient(180deg, #bdfff0, #3ce6a3 55%, #0f7a52); box-shadow: 0 0 10px #3ce6a399; }
.e-shards i:nth-child(4n+3) { background: linear-gradient(180deg, #cfe6ff, #2b9fff 55%, #145a99); box-shadow: 0 0 10px #2b9fff99; }
.e-shards i:nth-child(4n) { background: linear-gradient(180deg, #e9d9ff, #b36aff 55%, #6a2bb5); box-shadow: 0 0 10px #b36aff99; }
.boot.burst .e-shards i { animation: shard-fly .75s cubic-bezier(.2, .7, .3, 1) forwards; }
.e-shards i:nth-child(1) { --sx: -120px; --sy: -60px; --sr: -200deg; }
.e-shards i:nth-child(2) { --sx: -70px; --sy: -110px; --sr: -140deg; }
.e-shards i:nth-child(3) { --sx: 0px; --sy: -130px; --sr: -90deg; }
.e-shards i:nth-child(4) { --sx: 70px; --sy: -105px; --sr: -40deg; }
.e-shards i:nth-child(5) { --sx: 122px; --sy: -55px; --sr: 10deg; }
.e-shards i:nth-child(6) { --sx: 135px; --sy: 25px; --sr: 60deg; }
.e-shards i:nth-child(7) { --sx: 100px; --sy: 95px; --sr: 120deg; }
.e-shards i:nth-child(8) { --sx: 45px; --sy: 125px; --sr: 170deg; }
.e-shards i:nth-child(9) { --sx: -35px; --sy: 122px; --sr: 220deg; }
.e-shards i:nth-child(10) { --sx: -95px; --sy: 90px; --sr: 270deg; }
.e-shards i:nth-child(11) { --sx: -135px; --sy: 30px; --sr: 320deg; }
.e-shards i:nth-child(12) { --sx: -125px; --sy: -25px; --sr: 380deg; }
@keyframes shard-fly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.4) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(var(--sr)) scale(1.05); }
}
.boot-flash {
  position: absolute; inset: 0; z-index: 6; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #ffd166 20%, #ff5fa2 42%, #2b9fff 62%, transparent 82%);
}
.boot.burst .boot-flash { animation: boot-flash .55s ease-out forwards; }
@keyframes boot-flash { 0% { opacity: 0; } 14% { opacity: .9; } 100% { opacity: 0; } }
.boot-shock {
  position: absolute; left: 50%; top: 50%; z-index: 5; width: 120px; height: 120px;
  margin: -60px 0 0 -60px; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg, #ff5c28, #ffd166, #3ce6a3, #2b9fff, #b36aff, #ff5fa2, #ff5c28);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2px));
          mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2px));
}
.boot.burst .boot-shock { animation: boot-shock .85s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes boot-shock {
  0% { opacity: .95; transform: scale(.3) rotate(0deg); }
  100% { opacity: 0; transform: scale(4.6) rotate(220deg); }
}
.boot-tag {
  margin: 30px 0 0; color: var(--muted); font-family: var(--font-data);
  font-size: 11px; letter-spacing: .55em; text-transform: uppercase; padding-left: .55em;
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s, transform .7s, letter-spacing .7s;
}
.boot.logo .boot-tag { opacity: 1; transform: none; letter-spacing: .3em; }
.boot-bar {
  width: min(340px, 72vw); height: 2px; margin-top: 26px; background: #ffffff14; overflow: hidden;
}
.boot-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #ff5c28, #ffd166, #3ce6a3, #2b9fff, #b36aff, #ff5fa2); background-size: 200% 100%; box-shadow: 0 0 12px #ff5fa266; animation: bar-fill 3.1s cubic-bezier(.4,0,.6,1) forwards, rainbow-flow 2s linear infinite; }
.boot.run .boot-bar i { animation: bar-fill 3.1s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes bar-fill { to { width: 100%; } }
.boot-skip {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  color: #ffffff3d; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  transition: opacity .4s;
}
.boot.logo .boot-skip { opacity: 0; }
.boot.exit { animation: boot-out .65s cubic-bezier(.7,.05,.3,1) forwards; }
.boot.exit .boot-core { animation: core-lift .65s forwards; }
@keyframes boot-out { to { clip-path: inset(0 0 100% 0); } }
@keyframes core-lift { to { opacity: 0; transform: translateY(-46px); } }

/* VOLT the spark: electric creature parts */

/* short screens: shrink the mascot so the whole sequence fits */
@media (max-height: 780px) {
  .boot-word { font-size: clamp(44px, 9vw, 96px); }
  .boot-energy { width: 220px; margin-top: 16px; }
  .boot-tag { margin-top: 18px; }
  .boot-bar { margin-top: 16px; }
}

/* ============ ambient particle field ============ */
.fx-canvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; }