/* BurnBuns. Flat flame tones do the colour; black is ink and silhouette; white is the line.
   Only transform and opacity ever animate. */

@font-face { font-family: "BurnBuns Hand"; src: url("../fonts/burnbuns-hand-heavy.woff") format("woff"); font-weight: 800 900; font-style: normal; font-display: swap; }
@font-face { font-family: "BurnBuns Hand"; src: url("../fonts/burnbuns-hand-bold.woff") format("woff"); font-weight: 100 700; font-style: normal; font-display: swap; }

:root {
  --nav-h: 72px;
  --gut: 32px;
  --cg: 24px;
  --maxw: 1240px;
  --lw: 3px;
  --edge-h: 170px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pop: cubic-bezier(.3, 1.45, .45, 1);
  --f: "BurnBuns Hand", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --col: calc((100% - 11 * var(--cg)) / 12);
}

/* flame families: k0 sky, k1 back tongues, k2 mid, k3 hot (the section plane), k4 glow; --on = text on k3 */
.fam-ember { --k0:#4a1b05; --k1:#732c06; --k2:#9c3c07; --k3:#f06e0e; --k4:#ffb863; --kd:#160902; --on:#000; }
.fam-ice { --k0:#093248; --k1:#0a5070; --k2:#0c6e98; --k3:#12b3e8; --k4:#86ecff; --kd:#03111a; --on:#000; }
.fam-blood { --k0:#420a0c; --k1:#660c10; --k2:#8a0f13; --k3:#d8161e; --k4:#ff6152; --kd:#150405; --on:#fff; }
.fam-toxic { --k0:#0e3816; --k1:#12581b; --k2:#177820; --k3:#35c229; --k4:#98ff66; --kd:#06130a; --on:#000; }
.fam-cobalt { --k0:#0e1850; --k1:#14267b; --k2:#1a33a6; --k3:#2e5bf0; --k4:#8dadff; --kd:#040716; --on:#fff; }
.fam-gold { --k0:#443206; --k1:#694e07; --k2:#8e6908; --k3:#dfa70f; --k4:#ffe27a; --kd:#141003; --on:#000; }
.fam-pink { --k0:#470e2e; --k1:#70124a; --k2:#9a1665; --k3:#e8269a; --k4:#ff90d3; --kd:#16040e; --on:#000; }
.fam-violet { --k0:#33125e; --k1:#431484; --k2:#5316aa; --k3:#7a1ff0; --k4:#a660ff; --kd:#140a24; --on:#fff; }
.fam-ghost { --k0:#3a3a42; --k1:#46464f; --k2:#5c5c67; --k3:#9696a2; --k4:#ececf2; --kd:#0c0c0f; --on:#000; }
.fam-white { --k0:#3b3b42; --k1:#5a5a63; --k2:#7a7a84; --k3:#c6c6cf; --k4:#f3f3f7; --kd:#111114; --on:#000; }
.fam-black { --k0:#3a3a44; --k1:#26262f; --k2:#15151c; --k3:#060609; --k4:#8d8d9c; --kd:#000; --on:#fff; }
.fam-rainbow { --k0:#2a0f3a; --k1:#3f1557; --k2:#6a1f8a; --k3:#ff4de0; --k4:#ffd21f; --kd:#120a18; --on:#000; }
.fam-sunset { --k0:#5a1250; --k1:#8d1b57; --k2:#c0245e; --k3:#ff6a1f; --k4:#ffc35c; --kd:#1a0620; --on:#000; }
.fam-aurora { --k0:#0a4a48; --k1:#0c7561; --k2:#0fa07a; --k3:#3ce8b0; --k4:#b4a0ff; --kd:#03101a; --on:#000; }
.fam-lava { --k0:#3a0606; --k1:#6f1106; --k2:#a41c06; --k3:#ff5a00; --k4:#ffd23a; --kd:#0c0202; --on:#000; }
.fam-frost { --k0:#22406a; --k1:#386391; --k2:#4d86b8; --k3:#a8dcf5; --k4:#ffffff; --kd:#0a1220; --on:#000; }
.fam-void { --k0:#1c1428; --k1:#120c1e; --k2:#08050f; --k3:#020104; --k4:#7b4fd8; --kd:#000; --on:#fff; }
.fam-acid { --k0:#2a4a06; --k1:#4a7308; --k2:#6a9c0a; --k3:#c4ff1c; --k4:#f6ffb0; --kd:#0a1204; --on:#000; }
.fam-bloodmoon { --k0:#3a0a12; --k1:#5c0c1b; --k2:#7e0f24; --k3:#c8103a; --k4:#ff7a6a; --kd:#100306; --on:#fff; }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #4a1b05; scroll-behavior: smooth; }
html.lock { overflow: hidden; }
body { margin: 0; font: 600 17px/1.45 var(--f); color: #000; background: #f06e0e; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 900; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--nav-h) + 22px); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; flex: none; }
.ico-sm { width: 15px; height: 15px; }
.probe { position: absolute; width: 0; height: 0; }
:focus-visible { outline: 3px dashed #fff; outline-offset: 4px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: #fff; color: #000; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; }

/* ------------------------------------------------------------------ type */
.d1 { font-weight: 900; font-size: clamp(36px, min(4.7vw, 7.4svh), 66px); line-height: .98; letter-spacing: -.012em; }
.d2 { font-weight: 900; font-size: clamp(34px, 4.3vw, 60px); line-height: 1; letter-spacing: -.01em; }
.outl { color: #000; -webkit-text-stroke: .12em #fff; paint-order: stroke fill; }
.lede { font-size: 19px; line-height: 1.45; max-width: 34em; margin-top: 18px; }
.fine { font-size: 13px; line-height: 1.4; opacity: .85; }
.tape {
  display: inline-block; background: #fff; color: #000; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 16px 7px; transform: rotate(-2deg);
  clip-path: polygon(0 6%, 3% 0, 97% 4%, 100% 0, 98.4% 30%, 100% 58%, 98.2% 100%, 60% 96%, 2% 100%, 0 72%, 1.6% 44%);
}
.ink { background: #000; color: #fff; padding: .14em .5em .1em; line-height: 1.9; border-radius: 7px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.wordmark { position: relative; font-weight: 900; color: #000; -webkit-text-stroke: .13em #fff; paint-order: stroke fill; text-decoration: none; white-space: nowrap; letter-spacing: -.005em; }
.wm-first { position: relative; }
.wm-first::before { content: ""; position: absolute; left: -.04em; top: -.42em; width: .6em; height: .66em; background: url("../art/ears.svg") no-repeat center / contain; transform: rotate(-7deg); transform-origin: 50% 100%; z-index: -1; }
.wordmark { isolation: isolate; }

/* ------------------------------------------------------------------ nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav-h); pointer-events: none; }
.nav::before { content: ""; position: absolute; inset: 0; background: #1b0a03; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .16), 0 10px 26px rgba(0, 0, 0, .3); opacity: 0; transition: opacity .28s var(--ease); }
.nav.solid { pointer-events: auto; }
.nav.solid::before { opacity: 1; }
.nav-in { position: relative; }
.nav-in { width: min(100% - 2 * var(--gut), var(--maxw)); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-brand { pointer-events: auto; font-size: 30px; line-height: 1; padding: 16px 4px 2px 2px; margin-top: 6px; transition: transform .3s var(--ease); }
.nav.solid .nav-brand { transform: scale(.92); transform-origin: 0 50%; }
.nav-links { pointer-events: auto; display: flex; align-items: center; gap: 4px; margin-left: auto; background: #000; border: var(--lw) solid #fff; border-radius: 999px; padding: 5px; }
.nav-links a { position: relative; isolation: isolate; color: #fff; text-decoration: none; font-size: 15px; padding: 8px 14px 7px; border-radius: 999px; }
.nav-links a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .25s var(--pop); }
.nav-links a:hover { color: #000; }
.nav-links a:hover::before { opacity: 1; transform: none; }
.nav-wallet { pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 20px 0 16px; border: var(--lw) solid #fff; border-radius: 999px; background: #fff; color: #000; font-weight: 900; font-size: 16px; cursor: pointer; transition: transform .25s var(--pop); }
.nav-wallet:hover { transform: translateY(-2px) rotate(-1deg); }
.nw-dot { width: 10px; height: 10px; border-radius: 50%; background: #000; opacity: .25; }
.nav-wallet.on .nw-dot { opacity: 1; background: #1fbf4a; }
.nav-wallet.wrong .nw-dot { opacity: 1; background: #ff2d55; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: clip; background: #4a1b05; }
.hero-field, .rv-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fbase { position: absolute; inset: 0; }
.fbase.is-off { opacity: 0; }
.fsky { position: absolute; inset: 0; background: var(--k0); }
.ffloor { position: absolute; left: 0; right: 0; top: var(--floor); bottom: 0; background: var(--k3); }
.flayer { position: absolute; inset: 0; will-change: transform; }
.tg { position: absolute; will-change: transform; }
.tsw, .tfl { width: 100%; height: 100%; }
.tfl { will-change: transform; }
.tg svg { width: 100%; height: 100%; overflow: visible; }
.tg path { fill: var(--k2); }
.tg.t1 path { fill: var(--k1); }
.tg.t3 path { fill: var(--k3); }
.tg.t4 path { fill: var(--k4); }
.tg.t4 { opacity: .4; }
.tg.fam-rainbow path { fill: var(--rb, #ff4de0); }

.hero-inner { position: relative; min-height: clamp(660px, 100svh, 1000px); padding: calc(var(--nav-h) + clamp(12px, 3.2svh, 32px)) 0 40px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); align-content: start; }
.hero-copy { grid-column: 1 / span 6; position: relative; z-index: 9; max-width: 548px; }
.hero-copy > * { position: relative; z-index: 9; }
.hero-copy > .kicker { margin-bottom: clamp(10px, 2svh, 18px); }
.hero-sub { font-size: 17px; margin: clamp(10px, 2svh, 18px) 0 clamp(14px, 2.8svh, 24px); max-width: 34em; }
.hero-embers { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }

.stage { --sw: min(66%, 94svh, 900px); position: absolute; z-index: 3; bottom: 0; width: var(--sw); aspect-ratio: 1; left: calc(var(--col) * 9 + var(--cg) * 8.5 - var(--sw) / 2); cursor: pointer; }
.bun, .bun-body, .bun-hw, .stage-front { position: absolute; inset: 0; }
.bun-body, .bun-hw { width: 100%; height: 100%; will-change: transform; }
.bun-head { width: 100%; height: 100%; animation: headfloat 3.8s ease-in-out infinite; will-change: transform; }
.stage-front { z-index: 2; pointer-events: none; }
.stage-front .tg.t4 { opacity: .34; }
@keyframes headfloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3.4%) rotate(-2.4deg); } }

.bun-tag { position: absolute; z-index: 3; left: 63%; top: 57%; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; padding: 9px 14px 8px; border: 0; background: #fff; color: #000; text-align: left; transform: rotate(3deg); cursor: pointer; border-radius: 3px;
  clip-path: polygon(0 5%, 4% 0, 96% 3%, 100% 0, 98% 50%, 100% 100%, 50% 96%, 3% 100%, 0 60%, 2% 30%); transition: transform .35s var(--pop), opacity .3s; }
.bun-tag:hover { transform: rotate(0deg) translateY(-3px); }
.bun-tag.swap { opacity: 0; transform: rotate(8deg) translateY(10px); }
.tag-no { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.tag-name { font-weight: 900; font-size: 20px; line-height: 1; }
.tag-fire { grid-column: 1 / -1; font-size: 13px; }
.tag-arrow { position: absolute; width: 58px; height: 40px; left: -54px; top: -30px; color: #fff; transform: scaleX(-1) rotate(-14deg); pointer-events: none; }

/* ------------------------------------------------------------------ mint card */
.mint-card { position: relative; background: #000; color: #fff; border: var(--lw) solid #fff; border-radius: 30px; padding: 18px 22px 20px; box-shadow: 10px 10px 0 0 var(--kd, #160902); isolation: isolate; }
.mint-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 5px 11px; border: 2px solid #fff; border-radius: 999px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.pill-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #fff; opacity: .5; }
.pill-live .pill-dot { opacity: 1; background: #3ce86a; }
.pill-live .pill-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #3ce86a; animation: ping 1.6s ease-out infinite; }
.pill-done .pill-dot { opacity: 1; background: var(--k3); }
@keyframes ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.mint-net { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; opacity: .78; }
.mint-net i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; }
.mint-body { position: relative; }
.mint-h { font-size: 30px; line-height: 1.05; display: flex; align-items: center; gap: 8px; }
.mint-p { font-size: 16px; margin-top: 8px; opacity: .92; }
.mint-fine { font-size: 13px; margin-top: 10px; opacity: .75; text-align: center; }
.mint-count { margin-top: 14px; font-size: 16px; display: flex; align-items: baseline; gap: 4px; }
.ico-in { width: 26px; height: 26px; color: #3ce86a; }
.mint-stitch { position: absolute; left: 28px; width: 120px; height: 20px; bottom: -11px; color: #fff; }
.mint-loading { display: flex; align-items: center; gap: 12px; font-size: 18px; min-height: 60px; }
.facts { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 2px; padding: 0; }
.facts li { border: 2px solid #fff; border-radius: 18px; padding: 10px 12px 9px; }
.facts b { display: block; font-weight: 900; font-size: 24px; line-height: 1.05; }
.facts span { font-size: 12px; opacity: .8; text-transform: uppercase; letter-spacing: .05em; }

.odo { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.od-d { display: inline-block; height: 1em; line-height: 1; overflow: hidden; }
.od-s { display: flex; flex-direction: column; line-height: 1; transition: transform .34s cubic-bezier(.3, .8, .3, 1); will-change: transform; }
.od-s.no-tr { transition: none; }
.od-s span { height: 1em; }
.od-sep { line-height: 1; }
.odo-big { font-weight: 900; font-size: 46px; }
.odo-mid { font-weight: 900; font-size: 28px; }
.odo-sm { font-weight: 900; }

.meter-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.meter-big { display: inline-flex; align-items: baseline; line-height: 1; }
.meter-of { font-size: 22px; opacity: .78; margin-left: 4px; font-weight: 900; }
.meter-cap { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; opacity: .75; padding-bottom: 5px; }
.meter-bar { position: relative; margin: 16px 0 12px; }
.meter-track { position: relative; height: 22px; border: var(--lw) solid #fff; border-radius: 999px; overflow: hidden; }
.meter-fill { position: absolute; inset: 0; background: var(--k3); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s var(--ease); }
.meter-tipwrap { position: absolute; inset: 0 3px; pointer-events: none; transition: transform 1.1s var(--ease); }
.meter-tip { position: absolute; left: 0; bottom: 6px; width: 22px; height: 31px; margin-left: -11px; color: #fff; }
.meter-tip .ico { width: 100%; height: 100%; transform-origin: 50% 100%; animation: flick 1.1s ease-in-out infinite; }
.meter-urg { font-size: 15px; min-height: 1.45em; }
.meter-urg.hot { color: var(--k4); }
@keyframes flick { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(.94, 1.08) rotate(-3deg); } 50% { transform: scale(1.04, .95); } 75% { transform: scale(.97, 1.1) rotate(3deg); } }

.cta { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; margin-top: 20px; padding: 12px 22px; border: 0; background: none; color: #000; font-weight: 900; font-size: 22px; line-height: 1.1; cursor: pointer; text-decoration: none; transition: transform .28s var(--pop); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 999px; background: #fff; border: var(--lw) solid #fff; }
.cta-t, .cta > .ico { position: relative; z-index: 1; }
.cta-fl { position: absolute; z-index: -1; left: 12%; right: 12%; bottom: calc(100% - 20px); height: 34px; display: flex; justify-content: space-between; pointer-events: none; transition: transform .35s var(--pop); }
.cta-fl .ico { width: 24px; height: 34px; color: #fff; transform-origin: 50% 100%; animation: flick 1.2s ease-in-out infinite; }
.cta-fl .ico:nth-child(2) { width: 30px; height: 42px; margin-top: -8px; animation-delay: -.4s; }
.cta-fl .ico:nth-child(3) { animation-delay: -.8s; }
.cta:hover { transform: translateY(-2px) rotate(-.5deg); }
.cta:hover .cta-fl { transform: translateY(-9px); }
.cta:active { transform: translateY(1px) scale(.99); }
.cta[disabled] { cursor: not-allowed; color: #fff; }
.cta[disabled]::before { background: transparent; border-style: dashed; }
.cta[disabled] .cta-fl { display: none; }
.cta-link { color: #000; }
.busy .cta { pointer-events: none; }
.busy .cta::before { background: #d9d9d9; }

.qty-box { margin-top: 2px; }
.qty-head { display: flex; justify-content: space-between; align-items: baseline; }
.lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; opacity: .75; }
.qty-num { font-weight: 900; font-size: 22px; }
.qty { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; }
.qty-step { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #fff; background: transparent; color: #fff; font-weight: 900; font-size: 24px; line-height: 1; cursor: pointer; transition: transform .2s var(--pop), opacity .2s; }
.qty-step:hover:not([disabled]) { transform: scale(1.08); }
.qty-step[disabled] { opacity: .3; cursor: default; }
.qty-flames { flex: 1; display: flex; justify-content: space-between; align-items: flex-end; height: 44px; margin-bottom: 14px; }
.qf { position: relative; flex: 1; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; }
.qf .ico { width: calc(15px + var(--n, 1) * 1.1px); height: calc(21px + var(--n, 1) * 2.2px); color: rgba(255, 255, 255, .22); transform-origin: 50% 100%; transition: transform .3s var(--pop); }
.qf.on .ico { color: var(--k3); transform: scale(1.12); animation: flick 1.1s ease-in-out infinite; }
.qf:nth-child(2n).on .ico { animation-delay: -.35s; }
.qf:nth-child(3n).on .ico { animation-delay: -.7s; }
.qf[disabled] { cursor: not-allowed; }
.qf[disabled] .ico { color: rgba(255, 255, 255, .07); }
.qf-five::after { content: "5+"; position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: .04em; opacity: .7; }
.qty-five-note { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .8; margin-top: 18px; }
.total { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 10px; padding-top: 12px; border-top: 2px dashed rgba(255, 255, 255, .35); }
.total-eth { display: block; font-weight: 900; font-size: 30px; line-height: 1.05; margin-top: 2px; }
.total-usd { font-size: 15px; opacity: .8; }
.total-left { text-align: right; }
.total-left strong { display: block; font-size: 22px; line-height: 1.1; margin-top: 4px; }
.total-of { font-size: 13px; opacity: .75; }

.mint-status { display: none; }
.mint-status.on { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; padding: 12px 14px; border: 2px solid #fff; border-radius: 18px; font-size: 15px; line-height: 1.35; animation: popin .4s var(--pop) both; }
.mint-status span { flex: 1 1 60%; }
.mint-status a { color: #fff; }
.st-ico { width: 22px; height: 22px; flex: none; }
.st-error .st-ico, .st-rejected .st-ico, .st-nowallet .st-ico, .st-walletsonly .st-ico { color: #ff6b6b; }
.st-info .st-ico { color: #ffd21f; }
.st-wrongnet .st-ico, .st-timeout .st-ico { color: #ffd21f; }
.st-link { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; text-underline-offset: 3px; }
.st-btn { flex: 1 1 100%; min-height: 46px; border: 0; border-radius: 999px; background: #fff; color: #000; font-weight: 900; font-size: 17px; cursor: pointer; }
.spin-flame { width: 22px; height: 30px; flex: none; color: var(--k3); transform-origin: 50% 90%; animation: flick .8s ease-in-out infinite; }
@keyframes popin { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

/* the free -> paid moment */
.flipping .mint-body { animation: burnout .5s ease-in both; }
.flip-swap .mint-body { animation: risein .8s var(--pop) both; }
@keyframes burnout { to { opacity: .06; transform: translateY(18px) scale(.94); } }
@keyframes risein { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
.flip-stamp { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; text-align: center; pointer-events: none; transform: rotate(-7deg); }
.flip-stamp .fs-1, .flip-stamp .fs-2 { display: block; font-weight: 900; font-size: clamp(38px, 4.2vw, 56px); line-height: 1.02; color: #000; -webkit-text-stroke: .13em #fff; paint-order: stroke fill; animation: slam .7s var(--pop) both; }
.flip-stamp .fs-2 { color: var(--k3); animation-delay: .18s; }
.fs-sp { position: absolute; width: 30px; height: 30px; color: #fff; animation: sparkle .9s var(--pop) both; }
.fs-sp.a { left: 8%; top: 18%; } .fs-sp.b { right: 10%; top: 26%; width: 22px; height: 22px; animation-delay: .15s; } .fs-sp.c { right: 22%; bottom: 14%; animation-delay: .3s; }
.flip-stamp.out { transition: opacity .45s, transform .45s var(--ease); opacity: 0; transform: rotate(-7deg) translateY(-24px) scale(.9); }
@keyframes slam { from { opacity: 0; transform: scale(2.2) rotate(8deg); } 60% { opacity: 1; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes sparkle { from { opacity: 0; transform: scale(0) rotate(-90deg); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ sections */
.sec { --panel: var(--k1); position: relative; overflow-x: clip; background: var(--k3); color: var(--on); padding: clamp(84px, 9vw, 128px) 0 calc(var(--edge-h) * .72 + 56px); --shadow: var(--kd); }
.edge { position: absolute; left: 0; right: 0; bottom: calc(100% - 2px); height: var(--edge-h); pointer-events: none; overflow: hidden; }
.edge::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--k3); }
.edge-l { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 100%; }
.edge .t1 path { fill: var(--k1); }
.edge .t2 path { fill: var(--k2); }
.edge .t3 path { fill: var(--k3); }
.edge.live .edge-l { animation: edgesway 7s ease-in-out infinite alternate; }
.edge.live .edge-l.t2 { animation-duration: 5.2s; animation-delay: -2.1s; }
.edge.live .edge-l.t3 { animation-duration: 4.1s; animation-delay: -1s; }
@keyframes edgesway { from { transform: translateX(-1.4%) scaleY(.94); } to { transform: translateX(1.4%) scaleY(1.05); } }
.sec-head .kicker { margin-bottom: 18px; }

[data-rise] { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
[data-rise].in { opacity: 1; transform: none; }

/* how it drops */
.how-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 64px; }
.how-head { grid-column: 1 / span 5; }
.fuse { grid-column: 6 / span 7; align-self: end; --split: .33; }
.fuse-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fuse-count { display: flex; align-items: baseline; gap: 6px; font-weight: 900; }
.odo-fuse { font-size: 46px; }
.fuse-of { font-size: 20px; }
.fuse-state { background: #000; color: #fff; font-size: 14px; padding: 6px 14px 5px; border-radius: 999px; }
.fuse-rope { position: relative; height: 40px; margin: 22px 0 14px; border-radius: 999px; background: #000; border: var(--lw) solid #fff; }
.fuse-fill { position: absolute; inset: 5px; border-radius: 999px; background: #fff; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--ease); }
.fuse-split { position: absolute; top: -12px; bottom: -12px; left: calc(var(--split) * 100%); width: 5px; margin-left: -2.5px; background: #000; border: 2px solid #fff; border-radius: 3px; }
.fuse-sparkwrap { position: absolute; inset: 0 8px; pointer-events: none; transition: transform 1.2s var(--ease); }
.fuse-spark { position: absolute; left: 0; bottom: 8px; width: 34px; height: 48px; margin-left: -17px; color: var(--k4); }
.fuse-spark .ico { width: 100%; height: 100%; transform-origin: 50% 100%; animation: flick 1s ease-in-out infinite; }
.fuse-legend { display: grid; grid-template-columns: calc(var(--split) * 100%) 1fr; }
.fuse-legend p { display: flex; flex-direction: column; padding: 0 10px 0 0; }
.fuse-legend .fl-paid { padding-left: 16px; border-left: 3px dashed #000; }
.fuse-legend b { font-weight: 900; font-size: 22px; }
.fuse-legend span { font-size: 14px; }
.steps { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); align-items: start; }
.step { position: relative; grid-column: span 4; background: var(--panel); color: #fff; border: var(--lw) solid #fff; border-radius: 28px; padding: 44px 24px 26px; box-shadow: 10px 10px 0 var(--shadow); }
.step.s2 { margin-top: 56px; }
.step.s3 { margin-top: 112px; }
.step-n { position: absolute; top: -40px; left: 18px; font-size: 76px; line-height: 1; }
.step h3 { font-size: 26px; line-height: 1.05; }
.step p { margin-top: 10px; font-size: 16px; opacity: .92; }
.step-doodle { position: absolute; right: 20px; top: 18px; width: 30px; height: 30px; color: #fff; transform: rotate(12deg); animation: bob 3.6s ease-in-out infinite; }
.s2 .step-doodle { animation-delay: -1.2s; }
.s3 .step-doodle { width: 36px; animation-delay: -2.4s; }
@keyframes bob { 0%, 100% { transform: rotate(12deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-6px); } }

/* the buns */
.buns-head { max-width: 760px; }
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(var(--cg) * 1.5); row-gap: 76px; margin-top: 64px; align-items: start; }
.gcard { position: relative; margin: 0; transform: translateY(var(--dy, 0px)); will-change: transform; }
.g1 { grid-column: 1 / span 5; }
.g2 { grid-column: 6 / span 4; margin-top: 84px; }
.g3 { grid-column: 10 / span 3; margin-top: 18px; }
.g4 { grid-column: 1 / span 3; margin-top: 36px; }
.g5 { grid-column: 4 / span 5; }
.g6 { grid-column: 9 / span 4; margin-top: 64px; }
.g7 { grid-column: 1 / span 4; }
.g8 { grid-column: 5 / span 3; margin-top: 58px; }
.g9 { grid-column: 8 / span 5; margin-top: 12px; }
.gc-art { position: relative; aspect-ratio: 1; border-radius: 26px; overflow: hidden; border: var(--lw) solid #fff; background: var(--k0); box-shadow: 10px 10px 0 var(--shadow); transition: transform .45s var(--pop); }
.gc-art > img, .gc-hw { position: absolute; inset: 0; width: 100%; height: 100%; }
.gc-hw { transition: transform .5s var(--pop); }
.gc-head { width: 100%; height: 100%; animation: headfloat 3.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.gc-front { transform-origin: 50% 100%; animation: frontsway 4.6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes frontsway { from { transform: skewX(-3deg) scaleY(.96); } to { transform: skewX(3deg) scaleY(1.04); } }
.gcard:hover .gc-art { transform: rotate(-1.2deg) scale(1.015); }
.gcard:hover .gc-hw { transform: translateY(-5%) rotate(-3deg); }
.gc-tag { position: absolute; left: 16px; bottom: -15px; display: flex; align-items: baseline; gap: 8px; background: #fff; color: #000; padding: 7px 13px 6px; transform: rotate(-2.5deg);
  clip-path: polygon(0 6%, 4% 0, 96% 5%, 100% 0, 98% 50%, 100% 100%, 4% 95%, 0 100%, 2% 50%); }
.gc-tag b { font-weight: 900; font-size: 17px; }
.gc-tag span { font-size: 13px; }

.fires { list-style: none; margin: 110px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 12px; }
.fire { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; background: #000; color: #fff; border: 2px solid #fff; border-radius: 999px; font-size: 15px; }
.fire-ico .ico { width: 18px; height: 25px; color: var(--k3); transform-origin: 50% 100%; animation: flick 1.3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.17s); }
.fire.fam-black .fire-ico .ico { color: #000; stroke: #fff; }
.fire.fam-black .fire-ico { filter: drop-shadow(1.4px 0 0 #fff) drop-shadow(-1.4px 0 0 #fff) drop-shadow(0 1.4px 0 #fff) drop-shadow(0 -1.4px 0 #fff); }
.fire-rare { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; background: #fff; color: #000; padding: 2px 7px 1px; border-radius: 999px; }

.tiers { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); margin-top: 96px; align-items: end; }
.tier { position: relative; background: var(--panel); color: #fff; border: var(--lw) solid #fff; border-radius: 28px; padding: 24px 24px 26px; box-shadow: 10px 10px 0 var(--shadow); }
.tier-common { grid-column: 1 / span 3; min-height: 230px; }
.tier-rare { grid-column: 4 / span 4; min-height: 280px; }
.tier-legendary { grid-column: 8 / span 5; min-height: 340px; padding-right: 44%; }
.tier-pts { font-size: 15px; }
.tier-pts b { font-weight: 900; font-size: 58px; line-height: 1; margin-right: 4px; }
.tier h3 { font-size: 30px; margin-top: 10px; }
.tier p:last-of-type { margin-top: 8px; font-size: 16px; opacity: .92; }
.tier-rare .tier-pts b { color: var(--k4); }
.tier-legendary .tier-pts b { color: #ffd21f; }
.tier-sil { position: absolute; right: 14px; bottom: 14px; width: 42%; animation: headfloat 3.6s ease-in-out infinite; }
.tier-legendary::before { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(255, 255, 255, .45); border-radius: 20px; pointer-events: none; }

/* burn pit */
.pit { --on: #fff; color: #fff; }
.pit-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 44px; }
.pit-head { grid-column: 1 / span 5; align-self: center; }
.pit-loop { grid-column: 6 / span 7; }
.board { grid-column: 1 / -1; display: grid; gap: 16px; }
.board-live { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.board-row { display: flex; flex-wrap: wrap; gap: 16px; }
.board-row .tile { flex: 1 1 200px; }
.t-live { padding: 20px 22px 18px; }
.t-live .tile-v { font-size: 46px; color: var(--k4); margin-top: 10px; }
.t-live.t-fund .tile-v { color: #ffb14a; }
.t-live.stale .tile-v { opacity: .85; }
.tile-l { display: flex; align-items: center; gap: 8px; }
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #3ce86a; flex: none; }
.live-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #3ce86a; animation: ping 1.6s ease-out infinite; }
.stale .live-dot, .stale .live-dot::after { background: #ffd21f; border-color: #ffd21f; }
.live-tag { font-style: normal; font-size: 10px; letter-spacing: .08em; background: #3ce86a; color: #000; border-radius: 999px; padding: 2px 7px 1px; }
.stale .live-tag { background: #ffd21f; }
.tile-addr { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 12px; padding: 6px 12px 5px; border: 2px solid #fff; border-radius: 999px; color: #fff; text-decoration: none; font-size: 14px; font-variant-numeric: tabular-nums; }
.tile-addr:hover { background: #fff; color: #000; }
.tile { background: var(--panel); border: var(--lw) solid #fff; border-radius: 24px; padding: 16px 18px 15px; display: flex; flex-direction: column; box-shadow: 8px 8px 0 var(--shadow); }

.tile.hide { display: none; }
.tile-l { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; opacity: .75; }
.tile-v { font-weight: 900; font-size: 30px; line-height: 1.05; margin-top: 8px; }
.t-pot .tile-v { font-size: 44px; color: var(--k4); }
.tile-s { font-size: 14px; opacity: .8; margin-top: 4px; }
.board-note { grid-column: 1 / -1; background: var(--panel); border: 2px dashed #fff; border-radius: 20px; padding: 14px 18px; }
.split { grid-column: 1 / span 6; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; align-items: end; background: var(--panel); border: var(--lw) solid #fff; border-radius: 28px; padding: 26px 22px 22px; box-shadow: 10px 10px 0 var(--shadow); }
.split-col { display: flex; flex-direction: column; align-items: flex-start; }
.split-fl { width: 100%; height: 150px; }
.split-fl .sf-line { fill: #fff; stroke: #fff; stroke-width: 18px; stroke-linejoin: round; }
.split-fl .sf-fill { fill: var(--k4); }
.s-burn .split-fl { height: 86px; } .s-burn .split-fl .sf-fill { fill: #ff5a00; }
.s-team .split-fl { height: 86px; } .s-team .split-fl .sf-fill { fill: #000; }
.split-col b { font-weight: 900; font-size: 36px; line-height: 1; margin-top: 12px; }
.split-col span { font-weight: 900; font-size: 18px; }
.split-col small { font-size: 13px; opacity: .8; line-height: 1.3; margin-top: 2px; }
.split-fl { transform-origin: 50% 100%; animation: flick 2.4s ease-in-out infinite; }
.s-burn .split-fl { animation-delay: -.8s; } .s-team .split-fl { animation-delay: -1.6s; }
.pit-side { grid-column: 7 / span 6; display: grid; gap: 16px; align-content: start; }
.you { background: var(--panel); border: var(--lw) solid #fff; border-radius: 28px; padding: 20px 22px; box-shadow: 10px 10px 0 var(--shadow); }
.you-l { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; opacity: .75; margin-bottom: 12px; }
.you-t { font-size: 17px; margin-top: 12px; }
.you-t.small { font-size: 14px; opacity: .8; }
.you-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 0; }
.you-stats div { border: 2px solid #fff; border-radius: 16px; padding: 10px 12px; }
.you-stats dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.you-stats dd { margin: 4px 0 0; font-weight: 900; font-size: 22px; line-height: 1.1; }
.slots { display: flex; gap: 10px; }
.slot { width: 52px; height: 52px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .5); }
.slot.on { border: 2px solid #fff; background: var(--k2); }
.btn-line { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 14px; padding: 0 22px; border: var(--lw) solid #fff; border-radius: 999px; background: #fff; color: #000; font-weight: 900; font-size: 17px; text-decoration: none; cursor: pointer; transition: transform .25s var(--pop); }
.btn-line:hover { transform: translateY(-2px) rotate(-1deg); }
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pt { background: var(--panel); border: var(--lw) solid #fff; border-radius: 22px; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; box-shadow: 8px 8px 0 var(--shadow); }
.pt b { font-weight: 900; font-size: 36px; line-height: 1; }
.pt span { font-size: 14px; }
.pt em { flex-basis: 100%; font-style: normal; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; opacity: .8; }
.pt-rare b { color: var(--k4); }
.pt-legendary b { color: #ffd21f; }
.pit-fine { grid-column: 1 / -1; text-align: center; margin-top: -12px; }
.pit.no-data .board { display: none; }

.headcrop { position: relative; display: block; overflow: hidden; border-radius: 50%; aspect-ratio: 1; }
.headcrop img { position: absolute; max-width: none; width: calc(var(--hk) * 100%); height: auto; left: calc(var(--hx) * -100%); top: calc(var(--hy) * -100%); }
.slot.headcrop { border-style: solid; }

.loop { --lt: 12s; position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; margin-inline: auto; }
.loop-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lr-line { fill: none; stroke: #fff; stroke-width: 5; }
.lr-stitch { fill: none; stroke: #fff; stroke-width: 20; stroke-dasharray: 3.2 28; stroke-linecap: round; }
.lr-chev { color: #fff; }
.loop-orbit { position: absolute; inset: 8%; animation: orbit var(--lt) linear infinite; pointer-events: none; }
.loop-spark { position: absolute; left: 50%; top: 0; width: 38px; height: 54px; margin: -38px 0 0 -19px; color: #ffd21f; }
.loop-spark .ico { width: 100%; height: 100%; animation: orbit var(--lt) linear infinite reverse; }
@keyframes orbit { to { transform: rotate(360deg); } }
.loop-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; align-items: center; }
.loop-center b { font-weight: 900; font-size: clamp(56px, 7vw, 96px); line-height: .95; color: #000; -webkit-text-stroke: .12em #fff; paint-order: stroke fill; }
.loop-center span { font-size: 16px; margin-top: 6px; }
.st { position: absolute; width: 150px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.st1 { left: 50%; top: 8%; } .st2 { left: 89.9%; top: 37%; } .st3 { left: 74.7%; top: 84%; } .st4 { left: 25.3%; top: 84%; } .st5 { left: 10.1%; top: 37%; }
.st-ico { position: relative; width: 88px; height: 88px; border-radius: 50%; background: #000; border: var(--lw) solid #fff; display: grid; place-items: center; animation: stpulse var(--lt) linear infinite; }
.st1 .st-ico { animation-delay: calc(var(--lt) * -1); } .st2 .st-ico { animation-delay: calc(var(--lt) * -.8); } .st3 .st-ico { animation-delay: calc(var(--lt) * -.6); } .st4 .st-ico { animation-delay: calc(var(--lt) * -.4); } .st5 .st-ico { animation-delay: calc(var(--lt) * -.2); }
@keyframes stpulse { 0% { transform: scale(1.16) rotate(-4deg); } 9% { transform: scale(1) rotate(0); } 100% { transform: scale(1); } }
.st-txt { margin-top: 8px; font-size: 13px; line-height: 1.25; }
.st-txt b { display: block; font-weight: 900; font-size: 16px; }
.st-txt span { display: block; opacity: .85; }
.st:not(.st1) .st-txt { background: #000; border-radius: 12px; padding: 5px 9px; }
.st1 .st-txt { background: #000; border-radius: 12px; padding: 5px 9px; }
.ico-stack { position: relative; width: 70px; height: 70px; display: grid; place-items: center; }
.hc-lg { width: 66px; }
.hc-sm { width: 40px; }
.ico-swap { position: absolute; width: 34px; height: 34px; right: -12px; bottom: -8px; color: #ffd21f; }
.ico-pot { width: 58px; height: 54px; margin-top: 10px; }
.pot-fire { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); display: flex; gap: 2px; }
.pot-fire .ico { width: 16px; height: 23px; color: #ffd21f; transform-origin: 50% 100%; animation: flick 1s ease-in-out infinite; }
.pot-fire .ico + .ico { animation-delay: -.5s; color: #ff5a00; }
.ico-row { display: flex; align-items: center; gap: 0; }
.ico-row .hc-sm + .hc-sm { margin-left: -10px; }
.ico-coin { width: 26px; height: 26px; color: #ffd21f; margin-left: -6px; animation: bob 2.2s ease-in-out infinite; }
.burnt img { filter: grayscale(1) brightness(.9); }
.burn-fire { position: absolute; inset: auto 0 -4px 0; display: flex; justify-content: center; gap: 0; }
.burn-fire .ico { width: 24px; height: 34px; color: #ff5a00; transform-origin: 50% 100%; animation: flick .9s ease-in-out infinite; }
.burn-fire .ico:nth-child(2) { width: 30px; height: 44px; color: #ffd21f; animation-delay: -.3s; }
.burn-fire .ico:nth-child(3) { animation-delay: -.6s; }
.ico-num { font-weight: 900; font-size: 40px; line-height: 1; color: #fff; }
.ico-down { position: absolute; width: 28px; height: 28px; right: 4px; bottom: 6px; color: #ffd21f; animation: bob 1.8s ease-in-out infinite; }

/* faq */
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 36px; }
.faq-head { grid-column: 1 / span 4; }
.qa { grid-column: 5 / span 8; }
.qa details { background: var(--panel); color: #fff; border: var(--lw) solid #fff; border-radius: 24px; margin-bottom: 14px; box-shadow: 8px 8px 0 var(--shadow); }
.qa summary { list-style: none; cursor: pointer; position: relative; padding: 19px 64px 18px 24px; font-weight: 900; font-size: 20px; line-height: 1.2; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 18px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; font-size: 22px; line-height: 1; transition: transform .35s var(--pop); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { padding: 0 24px 20px; font-size: 16px; opacity: .92; max-width: 42em; }

/* footer */
.foot { position: relative; overflow-x: clip; background: var(--k3); color: var(--on); padding: 64px 0 36px; }
.foot-grid { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 18px 32px; }
.foot-mark { font-size: 58px; line-height: 1; padding-top: .3em; }
.foot-links { justify-self: end; display: flex; flex-wrap: wrap; gap: 10px; }
.foot-links a { background: #000; color: #fff; text-decoration: none; padding: 10px 18px 9px; border: 2px solid #fff; border-radius: 999px; font-size: 15px; transition: transform .25s var(--pop); }
.foot-links a:hover { transform: translateY(-2px) rotate(-1.5deg); }
.foot-note { grid-column: 1 / -1; font-size: 14px; }

/* ------------------------------------------------------------------ reveal */
.reveal { position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .4s var(--ease); background: #000; }
.reveal.in { opacity: 1; }
.reveal:focus { outline: none; }
.reveal.out { opacity: 0; }
.reveal .rv-field { position: fixed; }
.rv-embers { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.rv-inner { position: relative; z-index: 2; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(28px, 6svh, 72px) var(--gut) clamp(24px, 5svh, 56px); text-align: center; }
.rv-title { font-size: clamp(38px, 5vw, 66px); line-height: 1; color: #000; -webkit-text-stroke: .12em #fff; paint-order: stroke fill; }
.rv-sub { margin-top: 14px; background: #000; color: #fff; padding: 6px 16px; border-radius: 999px; font-size: 16px; }
.rv-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin: clamp(18px, 3.4svh, 34px) 0 clamp(16px, 3svh, 30px); max-width: 1180px; perspective: 1600px; --w: 250px; }
.rv-grid.n1 { --w: min(330px, 80vw, 40svh); }
.rv-grid.n2, .rv-grid.n3 { --w: min(290px, 82vw, 36svh); }
.rv-grid.n4, .rv-grid.n5, .rv-grid.n6 { --w: 210px; }
.rv-grid.n7, .rv-grid.n8, .rv-grid.n9, .rv-grid.n10 { --w: 196px; }
.rc { width: var(--w); opacity: 0; transform: translateY(60px) rotate(-6deg) scale(.9); transition: opacity .5s var(--ease), transform .7s var(--pop); }
.rc:nth-child(even) { transform: translateY(60px) rotate(6deg) scale(.9); }
.rc.dealt { opacity: 1; transform: none; }
.rc-flip { position: relative; height: calc(var(--w) * 1.7); transform-style: preserve-3d; transition: transform 1s var(--pop); }
.rc.flipped .rc-flip { transform: rotateY(180deg); }
.rc-back, .rc-front { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: var(--lw) solid #fff; border-radius: 22px; background: #000; color: #fff; overflow: hidden; }
.rc-back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.rc-sil { width: 62%; animation: headfloat 2.8s ease-in-out infinite; }
.rc-no { font-weight: 900; font-size: 22px; }
.rc-wait { font-size: 13px; opacity: .7; }
.rc-front { transform: rotateY(180deg); text-align: left; display: flex; flex-direction: column; }
.rc-art { position: relative; aspect-ratio: 1; flex: none; border-bottom: var(--lw) solid #fff; background: #111; }
.rc-art img { width: 100%; height: 100%; object-fit: cover; }
.rc-art-wait { display: grid; place-items: center; } .rc-art-wait img { width: 60%; height: auto; }
.rc-tier { position: absolute; top: 10px; right: 10px; padding: 5px 11px 4px; border: 2px solid #000; border-radius: 999px; background: #fff; color: #000; font-weight: 900; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; transform: rotate(6deg); }
.flipped .rc-tier { animation: slam .6s var(--pop) .55s both; }
.rc-tier.t-rare { background: #ffd21f; }
.rc-tier.t-legendary { background: #ff4de0; color: #000; box-shadow: 3px 3px 0 #ffd21f, 6px 6px 0 #1fb8ff; }
.rc-meta { padding: 10px 12px 12px; min-height: 0; overflow: hidden; }
.rc-name { font-weight: 900; font-size: 19px; line-height: 1.1; }
.rc-sub, .rc-note { font-size: 12px; opacity: .8; margin-top: 2px; }
.rc-traits { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
.rc-traits li { display: flex; flex-direction: column; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 9px; padding: 2px 7px 2px; opacity: 0; transform: translateY(8px); min-width: 0; }
.flipped .rc-traits li { animation: popin .4s var(--pop) both; }
.flipped .rc-traits li:nth-child(1) { animation-delay: .7s; } .flipped .rc-traits li:nth-child(2) { animation-delay: .76s; } .flipped .rc-traits li:nth-child(3) { animation-delay: .82s; } .flipped .rc-traits li:nth-child(4) { animation-delay: .88s; }
.flipped .rc-traits li:nth-child(5) { animation-delay: .94s; } .flipped .rc-traits li:nth-child(6) { animation-delay: 1s; } .flipped .rc-traits li:nth-child(7) { animation-delay: 1.06s; } .flipped .rc-traits li:nth-child(8) { animation-delay: 1.12s; }
.rc-traits span { font-size: 9px; line-height: 1.2; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.rc-traits b { font-size: 12px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-grid.n4 .rc-traits li:nth-child(n+5), .rv-grid.n5 .rc-traits li:nth-child(n+5), .rv-grid.n6 .rc-traits li:nth-child(n+5),
.rv-grid.n7 .rc-traits li:nth-child(n+5), .rv-grid.n8 .rc-traits li:nth-child(n+5), .rv-grid.n9 .rc-traits li:nth-child(n+5), .rv-grid.n10 .rc-traits li:nth-child(n+5) { display: none; }
.rc.rt-legendary .rc-front { border-color: #ffd21f; box-shadow: 0 0 0 3px #ff4de0; }
.leg-charge .rc-flip { animation: charge 1.1s ease-in both; }
@keyframes charge { 0% { transform: none; } 20% { transform: rotate(-2deg) scale(1.02); } 40% { transform: rotate(2deg) scale(1.04); } 60% { transform: rotate(-3deg) scale(1.06); } 80% { transform: rotate(3deg) scale(1.08); } 100% { transform: scale(1.1); } }
.rv-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.rv-close { min-width: 180px; min-height: 56px; padding: 0 30px; border: var(--lw) solid #fff; border-radius: 999px; background: #fff; color: #000; font-weight: 900; font-size: 20px; cursor: pointer; transition: transform .25s var(--pop); }
.rv-close:hover { transform: translateY(-2px) rotate(-1deg); }
.rv-link { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 18px; border: 2px solid #fff; border-radius: 999px; background: #000; color: #fff; text-decoration: none; font-size: 15px; }
.reveal.leg-boom .rv-inner { animation: shake .7s linear both; }
.reveal.leg-boom::after { content: ""; position: fixed; inset: 0; z-index: 5; background: #fff; pointer-events: none; animation: flash .7s ease-out both; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
@keyframes shake { 0%, 100% { transform: none; } 10% { transform: translate(-8px, 4px) rotate(-.4deg); } 20% { transform: translate(9px, -6px) rotate(.5deg); } 30% { transform: translate(-7px, 7px); } 40% { transform: translate(6px, -4px) rotate(-.3deg); } 55% { transform: translate(-4px, 3px); } 70% { transform: translate(3px, -2px); } 85% { transform: translate(-1px, 1px); } }
.leg-stamp { position: fixed; inset: 0; z-index: 6; display: grid; place-content: center; text-align: center; pointer-events: none; padding: 0 var(--gut); }
.ls-1 { display: block; font-weight: 900; font-size: clamp(54px, 11vw, 150px); line-height: .95; color: #000; -webkit-text-stroke: .1em #fff; paint-order: stroke fill; text-shadow: .045em .045em 0 #ff2d55, .09em .09em 0 #ffd21f, .135em .135em 0 #1fb8ff; animation: slam .8s var(--pop) both; transform-origin: 50% 60%; }
.ls-2 { display: inline-block; justify-self: center; margin-top: 18px; background: #fff; color: #000; font-weight: 900; font-size: clamp(24px, 3vw, 40px); padding: 6px 20px 5px; transform: rotate(-2deg); animation: slam .7s var(--pop) .25s both; }
.ls-3 { display: block; margin-top: 12px; font-size: 18px; color: #fff; -webkit-text-stroke: .25em #000; paint-order: stroke fill; animation: popin .5s var(--pop) .5s both; }
.leg-stamp.out { transition: opacity .5s, transform .5s var(--ease); opacity: 0; transform: scale(.94) translateY(-30px); }

/* ------------------------------------------------------------------ wallet picker + demo bar */
.picker { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(0, 0, 0, .55); padding: var(--gut); animation: popin .3s var(--ease) both; }
.picker-card { width: min(380px, 100%); background: #000; color: #fff; border: var(--lw) solid #fff; border-radius: 28px; padding: 22px; }
.picker-title { font-weight: 900; font-size: 26px; margin-bottom: 14px; }
.picker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.picker-btn { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; border: 2px solid #fff; border-radius: 18px; background: #000; color: #fff; font-size: 17px; cursor: pointer; text-align: left; }
.picker-btn:hover { background: #fff; color: #000; }
.picker-btn img { width: 28px; height: 28px; border-radius: 6px; }
.picker-dot { width: 28px; height: 28px; border-radius: 50%; background: #fff; }
.picker-x { margin-top: 14px; width: 100%; min-height: 46px; border: 0; background: none; color: #fff; text-decoration: underline; cursor: pointer; }

.demo-bar { position: fixed; right: 12px; bottom: 12px; z-index: 90; font-size: 13px; display: flex; flex-direction: column-reverse; align-items: flex-end; }
.demo-bar summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #000; border: 2px solid #000; border-radius: 999px; padding: 6px 12px 5px; font-weight: 900; letter-spacing: .06em; }
.demo-bar summary::-webkit-details-marker { display: none; }
.demo-bar ul { list-style: none; margin: 0 0 8px; padding: 8px; display: grid; grid-template-columns: repeat(2, auto); gap: 4px; background: #000; border: 2px solid #fff; border-radius: 16px; max-height: 60vh; overflow: auto; }
.demo-bar a { display: block; color: #fff; text-decoration: none; padding: 5px 10px; border-radius: 10px; }
.demo-bar a:hover, .demo-bar a.on { background: #fff; color: #000; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .nav-links a { padding: 8px 11px 7px; font-size: 14px; }
}
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .hero-inner { display: flex; flex-direction: column; min-height: 0; padding-bottom: 56px; }
  .hero-copy { display: contents; }
  .hero-copy > .kicker { align-self: flex-start; order: 1; }
  .hero-copy > .d1 { order: 2; }
  .hero-copy > .hero-sub { order: 3; }
  .stage { order: 4; position: relative; left: auto; bottom: auto; width: min(100% + 2 * var(--gut), 660px); margin: -6% auto 0; align-self: center; }
  .mint-card { order: 5; z-index: 9; width: 100%; max-width: 560px; margin: -15% auto 0; align-self: center; }
  .hero-sub { max-width: 560px; }
  .how-head, .fuse { grid-column: 1 / -1; }
  .step, .step.s2, .step.s3 { grid-column: 1 / -1; margin-top: 44px; }
  .steps { row-gap: 0; }
  .step.s2 { margin-left: 6%; } .step.s3 { margin-left: 12%; }
  .tier-common, .tier-rare, .tier-legendary { grid-column: 1 / -1; min-height: 0; margin-top: 22px; }
  .tier-legendary { min-height: 260px; }
  .pit-head, .pit-loop, .split, .pit-side { grid-column: 1 / -1; }

  .faq-head, .qa { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  :root { --nav-h: 62px; --gut: 16px; --cg: 12px; --edge-h: 104px; }
  body { font-size: 16px; }
  .nav-brand { font-size: 25px; padding-top: 12px; }
  .nav-wallet { height: 42px; font-size: 15px; padding: 0 15px 0 12px; }
  .hero-inner { padding-top: calc(var(--nav-h) + 20px); }
  .hero-copy > .kicker { margin-bottom: 12px; }
  .d1 { font-size: 36px; }
  .d2 { font-size: 36px; }
  .hero-sub { font-size: 15px; margin: 12px 0 0; }
  .stage { width: calc(100% + 2 * var(--gut)); margin-top: -10%; }
  .mint-card { margin-top: -19%; padding: 16px 16px 18px; border-radius: 26px; box-shadow: 7px 7px 0 0 var(--kd, #160902); }
  .bun-tag { left: auto; right: 5%; top: 50%; padding: 7px 10px 6px; }
  .tag-name { font-size: 16px; }
  .tag-arrow { display: none; }
  .odo-big { font-size: 38px; }
  .meter-of { font-size: 18px; }
  .cta { font-size: 20px; min-height: 58px; }
  .mint-h { font-size: 26px; }
  .facts b { font-size: 19px; }
  .qty { gap: 6px; }
  .qty-step { width: 36px; height: 36px; font-size: 20px; }
  .total-eth { font-size: 25px; }
  .lede { font-size: 16px; }
  .odo-fuse { font-size: 36px; }
  .fuse-of { font-size: 16px; }
  .fuse-legend b { font-size: 17px; }
  .fuse-legend span { font-size: 12px; }
  .step { padding: 40px 20px 22px; }
  .step.s2 { margin-left: 0; } .step.s3 { margin-left: 0; }
  .step-n { font-size: 64px; top: -34px; }
  .gallery { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 30px; margin-top: 44px; }
  .gcard { grid-column: auto !important; margin-top: 0 !important; }
  .gcard.g1 { grid-column: 1 / -1 !important; }
  .gcard:nth-child(odd):not(.g1) { margin-top: 30px !important; }
  .gc-art { border-radius: 20px; box-shadow: 6px 6px 0 var(--shadow); }
  .gc-tag { left: 10px; bottom: -13px; padding: 5px 9px 4px; }
  .gc-tag b { font-size: 14px; }
  .gc-tag span { display: none; }
  .g1 .gc-tag span { display: inline; }
  .fires { margin-top: 84px; gap: 8px; }
  .fire { font-size: 13px; padding: 5px 11px 5px 8px; }
  .tier-pts b { font-size: 46px; }
  .tier-legendary { padding-right: 40%; }
  .board-live { grid-template-columns: 1fr; gap: 12px; }
  .board-row { gap: 12px; }
  .board-row .tile { flex: 1 1 140px; }
  .tile { padding: 14px 14px 13px; }
  .tile-v { font-size: 24px; }
  .t-live { padding: 16px 16px 14px; }
  .t-live .tile-v { font-size: 38px; }
  .board { gap: 12px; }
  .split { grid-template-columns: 1fr 1fr 1fr; padding: 20px 14px; gap: 10px; }
  .split-fl { height: 110px; } .s-burn .split-fl, .s-team .split-fl { height: 64px; }
  .split-col b { font-size: 28px; }
  .split-col span { font-size: 15px; }
  .points { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pt { padding: 12px; }
  .pt b { font-size: 28px; }
  .you-stats dd { font-size: 18px; }
  .slot { width: 44px; height: 44px; }
  .loop { max-width: 340px; }
  .st { width: 108px; }
  .st-ico { width: 60px; height: 60px; }
  .ico-stack { width: 50px; height: 50px; }
  .hc-lg { width: 46px; } .hc-sm { width: 30px; }
  .ico-pot { width: 42px; height: 40px; margin-top: 8px; }
  .pot-fire .ico { width: 11px; height: 16px; }
  .ico-swap { width: 26px; height: 26px; right: -10px; }
  .burn-fire .ico { width: 16px; height: 24px; } .burn-fire .ico:nth-child(2) { width: 20px; height: 30px; }
  .ico-num { font-size: 30px; }
  .ico-down { width: 20px; height: 20px; }
  .st-txt { font-size: 11px; } .st-txt b { font-size: 12.5px; }
  .st2 { left: 84%; } .st5 { left: 16%; }
  .st:not(.st1) .st-txt, .st1 .st-txt { padding: 4px 7px; }
  .loop-center b { font-size: 50px; } .loop-center span { font-size: 13px; }
  .loop-spark { width: 28px; height: 40px; margin: -28px 0 0 -14px; }
  .qa summary { font-size: 17px; padding: 16px 56px 15px 18px; }
  .qa details p { padding: 0 18px 18px; font-size: 15px; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-links { justify-self: start; }
  .foot-mark { font-size: 44px; }
  .rv-grid { gap: 14px; }
  .rv-grid.n4, .rv-grid.n5, .rv-grid.n6, .rv-grid.n7, .rv-grid.n8, .rv-grid.n9, .rv-grid.n10 { --w: calc(50vw - 24px); }
  .rv-grid.n2, .rv-grid.n3 { --w: min(290px, 78vw); }
}

/* reduced motion: everything still moves, just slower and smaller; the art never hides */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bun-head, .gc-head, .tier-sil, .rc-sil { animation-duration: 9s; }
  .gc-front, .split-fl { animation-duration: 10s; }
  .edge.live .edge-l, .edge.live .edge-l.t2, .edge.live .edge-l.t3 { animation-duration: 16s; }
  .qf.on .ico, .cta-fl .ico, .meter-tip .ico, .fire-ico .ico, .fuse-spark .ico, .spin-flame, .pot-fire .ico, .burn-fire .ico { animation-duration: 3.4s; }
  .loop { --lt: 30s; }
  .step-doodle, .ico-coin, .ico-down { animation-duration: 9s; }
  .reveal.leg-boom .rv-inner { animation: none; }
  [data-rise] { transition-duration: .3s; transform: none; }
}