/* ───────── fonts ───────── */
@font-face { font-family: "Pixel"; src: url(../assets/fonts/press-start-2p-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "PixelCN"; src: url(../assets/fonts/fusion-pixel-12px-zh_hans.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; src: url(../assets/fonts/barlow-condensed-500.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; src: url(../assets/fonts/barlow-condensed-700.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 900; font-style: italic; src: url(../assets/fonts/barlow-condensed-900i.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Playfair Display"; font-weight: 800; src: url(../assets/fonts/playfair-display-latin-800-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Playfair Display"; font-weight: 800; font-style: italic; src: url(../assets/fonts/playfair-display-latin-800-italic.woff2) format("woff2"); font-display: swap; }

:root {
  --lime: #d2ff00;
  --lime-off: #b2c73a;
  --dark-green: #282c20;
  --black: #070806;
  --white: #f4f4ed;
  --dim: rgba(244, 244, 237, .62);
  --line: rgba(244, 244, 237, .12);
  --f-pixel: "Pixel", "PixelCN", ui-monospace, monospace;
  --f-pixel-cn: "PixelCN", "Pixel", ui-monospace, monospace;
  --f-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  --f-race: "Barlow Condensed", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-serif: "Playfair Display", "Songti SC", "Noto Serif SC", "STSong", serif;
  --cubic-default: cubic-bezier(.65, .05, 0, 1);   /* landonorris */
  --ease-out: cubic-bezier(.16, 1, .3, 1);          /* garuda2026 */
  --glow: 0 0 .22em rgba(210, 255, 0, .8), 0 0 .8em rgba(190, 255, 0, .45), 0 0 2.2em rgba(150, 255, 0, .25);
  --pad: clamp(18px, 3.2vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); }
body {
  margin: 0; color: var(--white); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 5px),
    radial-gradient(120% 80% at 50% 0%, #10130a 0%, var(--black) 60%);
  background-attachment: fixed; overflow-x: hidden;
}
body.is-loading, body.detail-on { overflow: hidden; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h2, h3, p { margin: 0; }
.lime { color: var(--lime); text-shadow: var(--glow); }
::selection { background: var(--lime); color: #000; }
.line { position: relative; }
.high-line-reveal { position: absolute; inset: 0; transform-origin: 100% 50%; pointer-events: none; }
.oval-outer-wrapper { overflow: clip; }

/* ───────── captions (the video's typed subtitles) ───────── */
.caption {
  font: 400 clamp(11px, 1.25vw, 20px)/1.5 var(--f-pixel); letter-spacing: .06em; color: #e9e9e2; text-align: center;
  min-height: 1.5em; text-shadow: 0 0 .5em rgba(255, 255, 255, .25);
}
.caption .hl { color: var(--lime); text-shadow: var(--glow); }
.caption [data-tr-char] { opacity: 0; }
.caption .caret { display: inline-block; width: .9em; height: 1.1em; margin-left: .25em; vertical-align: -.15em; background: var(--lime); box-shadow: 0 0 .8em rgba(210, 255, 0, .7); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ───────── loader (forge cinematic words) ───────── */
#loader { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; gap: 28px; background: var(--black); text-align: center; }
.loader-words { font: 400 clamp(14px, 2.2vw, 34px)/1.5 var(--f-pixel); letter-spacing: .08em; }
.loader-words span { display: inline-block; opacity: 0; filter: blur(.8rem); margin: 0 .2em; }
.loader-bar { width: min(320px, 60vw); height: 6px; margin: 0 auto; background: rgba(255, 255, 255, .08); }
.loader-bar i { display: block; height: 100%; width: 100%; background: var(--lime); box-shadow: 0 0 14px rgba(210, 255, 0, .7); transform: scaleX(0); transform-origin: 0 50%; }
.loader-num { font: 400 12px/1 var(--f-pixel); color: var(--dim); }

/* ───────── cursor (forge quickTo cursor) ───────── */
#cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: none; opacity: 0; transition: opacity .3s; }
#cursor.is-live { opacity: 1; }
@media (hover: hover) and (pointer: fine) { #cursor { display: block; } }
#cursor i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--lime); box-shadow: 0 0 12px rgba(210, 255, 0, .9); transition: transform .3s var(--ease-out), opacity .3s; }
#cursor span {
  position: absolute; left: 0; top: 0; padding: 9px 12px 8px; font: 400 9px/1 var(--f-pixel); letter-spacing: .08em; white-space: nowrap; color: #000; background: var(--lime);
  transform: translate(-50%, -50%) scale(.15); opacity: 0; transition: transform .35s var(--ease-out), opacity .25s; box-shadow: 0 0 24px rgba(210, 255, 0, .55);
}
#cursor.has-label span { transform: translate(-50%, -50%) scale(1); opacity: 1; }
#cursor.has-label i { transform: scale(0); opacity: 0; }

.scroll-progress { position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; background: var(--lime); box-shadow: 0 0 10px rgba(210, 255, 0, .8); transform: scaleX(0); transform-origin: 0 50%; }

/* ───────── nav ───────── */
.nav { position: fixed; z-index: 50; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--pad); mix-blend-mode: normal; transition: opacity .35s var(--ease-out); }
body.detail-on .nav, body.detail-on .scroll-progress { opacity: 0; pointer-events: none; }
.view > section:first-child:not(#hero) { padding-top: clamp(110px, 17vh, 190px); }
.nav-brand, .nav-links a, .nav-sound span { font: 400 11px/1 var(--f-pixel); letter-spacing: .08em; }
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-logo { display: block; width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; }
/* tabs */
.tabs { display: flex; gap: 4px; padding: 4px; background: rgba(7, 8, 6, .72); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.tab { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 14px 8px; font: 400 15px/1 var(--f-pixel-cn); color: var(--dim); transition: color .25s, background .25s; }
.tab svg { width: 12px; height: 12px; fill: currentColor; }
.tab:hover { color: var(--white); }
.tab.is-on { color: #000; background: var(--lime); box-shadow: 0 0 18px rgba(210, 255, 0, .45); }
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .8; }
main, .foot { position: relative; z-index: 1; }
.view[hidden] { display: none; }
/* view wipe */
#wipe { position: fixed; inset: 0; z-index: 80; visibility: hidden; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
#wipe i { position: absolute; left: -15%; right: -15%; height: 25.2%; transform: scaleX(0); transform-origin: 0 50%; background: var(--lime); }
#wipe i:nth-child(1) { top: 0; } #wipe i:nth-child(2) { top: 25%; background: #0b0d08; } #wipe i:nth-child(3) { top: 50%; background: var(--white); } #wipe i:nth-child(4) { top: 75%; }
#wipe b { position: relative; padding: 14px 20px 12px; font: 400 clamp(16px, 2.4vw, 34px)/1 var(--f-pixel-cn); color: var(--lime); background: #000; box-shadow: 0 0 0 4px var(--lime); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px 13px; font: 400 15px/1 var(--f-pixel-cn); color: #000; background: var(--lime); box-shadow: 0 0 22px rgba(210, 255, 0, .35); transition: transform .35s var(--ease-out), box-shadow .3s; white-space: nowrap; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 34px rgba(210, 255, 0, .5); }
.page-head { padding: clamp(110px, 17vh, 190px) var(--pad) clamp(30px, 6vh, 70px); }
.page-head .caption { margin-bottom: 24px; }
[data-anim="text-hover"] > span { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; white-space: pre; vertical-align: top; }
[data-anim="text-hover"] .char { display: inline-block; text-shadow: 0 1.3em 0 var(--lime); white-space: pre; }
.nav-sound { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.nav-sound i { width: 3px; height: 4px; background: var(--dim); }
.nav-sound span { margin-left: 8px; color: var(--dim); align-self: center; font-size: 9px; }
.nav-sound[aria-pressed="true"] i { background: var(--lime); animation: eq .7s steps(4) infinite alternate; }
.nav-sound[aria-pressed="true"] i:nth-child(2) { animation-delay: -.3s; }
.nav-sound[aria-pressed="true"] i:nth-child(3) { animation-delay: -.5s; }
.nav-sound[aria-pressed="true"] span { color: var(--lime); }
@keyframes eq { to { height: 14px; } }

/* ───────── hero (landonorris sticky hero) ───────── */
#hero { position: relative; height: 200vh; }
.hero-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero-media { position: absolute; inset: 0; will-change: transform, filter; }
.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 8, 6, .55) 0%, transparent 16%, transparent 46%, rgba(7, 8, 6, .55) 56%, rgba(7, 8, 6, .94) 65%, var(--black) 73%); }
.hero-copy { position: absolute; left: 0; right: 0; bottom: clamp(56px, 9vh, 110px); padding: 0 var(--pad); display: grid; gap: clamp(20px, 3.4vh, 40px); justify-items: center; }
.hero-caption { font-family: var(--f-pixel-cn); font-size: clamp(18px, 2.6vw, 44px); letter-spacing: .04em; }
.hero-stats { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(14px, 3vw, 56px); }
.hero-stats li { display: grid; gap: 8px; padding: 0 0 0 14px; border-left: 2px solid var(--lime); visibility: hidden; }
.hero-stats b { font: 400 clamp(11px, 1.15vw, 18px)/1 var(--f-pixel); color: var(--lime); text-shadow: var(--glow); white-space: nowrap; }
.hero-stats span { font-size: clamp(11px, .9vw, 14px); line-height: 1.2; color: var(--dim); white-space: nowrap; }
.hero-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18em; font: 400 clamp(34px, 8.4vw, 150px)/1.05 var(--f-pixel); pointer-events: none; }
.hero-msg > span { display: block; overflow: hidden; padding: .06em 0; }
.hero-msg .char { display: inline-block; }
.hero-msg .lime { text-shadow: none; }
.hero-scroll { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font: 400 8px/1 var(--f-pixel); color: var(--dim); letter-spacing: .2em; }
.hero-scroll i { width: 2px; height: 22px; background: linear-gradient(var(--lime), transparent); animation: drip 1.4s var(--cubic-default) infinite; transform-origin: 50% 0; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.hero-eyebrow-tracker { position: absolute; left: 0; top: 100vh; height: 100vh; width: 1px; }

/* ───────── section type ───────── */
section { position: relative; }
.display { font: 400 clamp(34px, 7vw, 124px)/1.08 var(--f-pixel-cn); text-align: center; letter-spacing: .02em; -webkit-text-stroke: .02em currentColor; }
.display em { display: block; -webkit-text-stroke: 0; font: 400 .34em/1.6 var(--f-pixel); font-style: normal; color: var(--lime); text-shadow: var(--glow); letter-spacing: .12em; }
.display.sm { font-size: clamp(28px, 4.6vw, 80px); }
.display .char { display: inline-block; }
.lede { max-width: 34em; margin: 26px auto 0; text-align: center; color: var(--dim); font-size: clamp(15px, 1.2vw, 19px); }
.lede span { color: var(--lime); font-family: var(--f-pixel); font-size: .8em; }

/* ───────── mechanism ───────── */
#mech { height: 700vh; }
.mech-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(280px, 30vw) 1fr; grid-template-rows: auto 1fr auto; column-gap: clamp(20px, 4vw, 80px); padding: clamp(74px, 10vh, 110px) var(--pad) 26px; }
.mech-caption { grid-column: 1 / -1; margin-bottom: clamp(10px, 2.4vh, 30px); }
.mech-copy { position: relative; align-self: center; height: min(430px, 56vh); }
.mech-step { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; visibility: hidden; }
.kicker { display: flex; align-items: center; gap: 14px; font: 400 10px/1 var(--f-pixel); letter-spacing: .1em; color: var(--dim); }
.kicker b { font-weight: 400; color: #000; background: var(--lime); padding: 7px 9px 6px; box-shadow: 0 0 18px rgba(210, 255, 0, .45); }
.kicker span { font-family: var(--f-pixel-cn); font-size: 15px; }
.mech-step h2 { font: 400 clamp(26px, 3.3vw, 58px)/1.15 var(--f-pixel-cn); color: var(--lime); text-shadow: var(--glow); -webkit-text-stroke: .025em currentColor; }
.mech-step p:not(.kicker) { font-size: clamp(15px, 1.15vw, 19px); line-height: 1.75; color: rgba(244, 244, 237, .84); max-width: 26em; }
.mech-step li { position: relative; padding-left: 20px; font-size: clamp(13px, .95vw, 15px); color: var(--dim); line-height: 1.7; }
.mech-step li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; background: var(--lime); }
.mech-toggle { display: flex; flex-wrap: wrap; gap: 10px; }
.mech-toggle button { font: 400 14px/1 var(--f-pixel-cn); padding: 12px 14px 11px; border: 1px solid var(--line); color: var(--dim); transition: all .3s var(--ease-out); }
.mech-toggle button.is-on { color: #000; background: var(--lime); border-color: var(--lime); box-shadow: 0 0 22px rgba(210, 255, 0, .45); }

.mech-stage { position: relative; align-self: center; justify-self: center; width: min(100%, calc((100vh - 250px) * 10 / 7)); aspect-ratio: 10 / 7; container-type: size; }
.scene { position: absolute; inset: 0; visibility: hidden; }
.scene > * { position: absolute; }
.chip { font: 400 1.5cqw/1 var(--f-pixel-cn); padding: .9cqw 1.1cqw .8cqw; color: var(--white); border: 1px solid rgba(210, 255, 0, .4); background: rgba(210, 255, 0, .06); white-space: nowrap; }
.chip::before { content: ""; display: inline-block; width: .7cqw; height: .7cqw; margin-right: .8cqw; background: var(--lime); }

/* pixel coin */
.coin { width: 11cqw; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f4ff8a 0 18%, #d2ff00 19% 55%, #86a800 56% 100%); box-shadow: inset 0 0 0 .7cqw #a8cc00, inset 0 0 0 1.1cqw #5a7200, 0 0 3cqw rgba(210, 255, 0, .55), 0 .8cqw 0 #4a5e00; }
.coin b { font: 400 4.4cqw/1 var(--f-pixel-cn); color: #2c3800; }
.coin-plat { background: radial-gradient(circle at 35% 30%, #fff 0 18%, #e9e9e2 19% 55%, #9a9a90 56% 100%); box-shadow: inset 0 0 0 .7cqw #c9c9c0, inset 0 0 0 1.1cqw #6d6d66, 0 0 3cqw rgba(255, 255, 255, .35), 0 .8cqw 0 #55554f; }
.coin-plat b { color: #333; }
.bits i { position: absolute; left: 0; top: 0; width: 1.5cqw; height: 1.5cqw; background: #ffd23a; box-shadow: 0 0 1.4cqw rgba(255, 210, 58, .9), inset -.35cqw -.35cqw 0 #b98500; opacity: 0; }

/* chrome vault */
.vault { width: 22cqw; height: 22cqw; display: grid; place-items: center; align-content: center; gap: 1.2cqw; background: url(../assets/tex/forged-carbon.jpg) center / 26cqw; border: .7cqw solid transparent; border-radius: 1.4cqw;
  border-image: linear-gradient(135deg, #fff, #6b6f6a 22%, #e9ece6 40%, #3c3f3b 58%, #f6f7f2 76%, #777b75) 1; box-shadow: 0 0 5cqw rgba(210, 255, 0, .18), inset 0 0 6cqw rgba(0, 0, 0, .7); }
.vault span { font: 400 1.9cqw/1 var(--f-pixel); color: var(--lime); text-shadow: var(--glow); letter-spacing: .1em; }
.vault i { width: 9cqw; height: 1.2cqw; background: #000; box-shadow: inset 0 0 0 .25cqw #777, 0 0 1.6cqw rgba(210, 255, 0, .5); }
.vault output { font: 400 1.35cqw/1 var(--f-pixel); color: var(--white); }
.vault-s { width: 14cqw; height: 12cqw; }
.vault-s i { width: 6cqw; }

.scene-mint .m-card { width: 25cqw; left: 37.5cqw; top: 5cqw; filter: drop-shadow(0 0 2.4cqw rgba(190, 255, 0, .5)); }
.scene-mint .m-card-l { left: 9cqw; top: 12cqw; width: 19cqw; filter: blur(.25cqw) brightness(.55); }
.scene-mint .m-card-r { left: 72cqw; top: 12cqw; width: 19cqw; filter: blur(.25cqw) brightness(.55) hue-rotate(-140deg); }
.scene-mint .coin-clan { left: 61cqw; top: 40cqw; }
.scene-mint .coin-plat { left: 27cqw; top: 42cqw; width: 9cqw; }
.scene-mint .chip-a { left: 62cqw; top: 54cqw; }
.scene-mint .chip-b { left: 14cqw; top: 54cqw; }
.scene-mint .chip-c { left: 50cqw; top: 63cqw; transform: translateX(-50%); }

.scene-tax .coin-trade { left: 14cqw; top: 27cqw; width: 15cqw; }
.scene-tax .coin-trade b { font-size: 6cqw; }
.scene-tax .tag { font: 400 1.6cqw/1 var(--f-pixel); padding: 1cqw 1.2cqw; left: 15.5cqw; }
.scene-tax .tag-buy { top: 17cqw; color: #000; background: var(--lime); box-shadow: 0 0 2cqw rgba(210, 255, 0, .6); }
.scene-tax .tag-sell { top: 47cqw; color: var(--white); border: 1px solid var(--white); }
.scene-tax .pct { left: 44cqw; top: 14cqw; font: 400 9cqw/1 var(--f-pixel); color: var(--lime); text-shadow: var(--glow); }
.scene-tax .pct small { font-size: .45em; }
.scene-tax .bits { left: 27cqw; top: 33.5cqw; }
.scene-tax .vault { left: 66cqw; top: 23.5cqw; }
.scene-tax .chip-eg { left: 50cqw; top: 60cqw; transform: translateX(-50%); border-color: var(--line); background: none; color: var(--dim); }

.scene-split .vault-s { left: 43cqw; top: 3cqw; }
.scene-split .pipes { inset: 0; width: 100%; height: 100%; }
.pipe { fill: none; stroke: #3a3d38; stroke-width: 14; stroke-linejoin: round; }
.pipe-flow { fill: none; stroke: var(--lime); stroke-width: 6; stroke-dasharray: 14 18; filter: drop-shadow(0 0 6px rgba(210, 255, 0, .9)); animation: flow .7s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.tank { width: 26cqw; height: 31cqw; top: 33cqw; border: .5cqw solid #d9dcd6; border-top: 0; border-radius: 0 0 1.4cqw 1.4cqw; background: rgba(255, 255, 255, .03); overflow: hidden; display: grid; place-items: center; align-content: center; gap: 1.4cqw; box-shadow: 0 0 4cqw rgba(210, 255, 0, .12); }
.tank i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fill, 0) * 1%); background: linear-gradient(180deg, #e6ff5c, #9cc400); box-shadow: 0 -1cqw 3cqw rgba(210, 255, 0, .6); transition: height .9s var(--cubic-default); }
.tank i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .6cqw; background: #fbffd6; }
.tank b, .tank span { position: relative; background: #070806; padding: .9cqw 1.2cqw .8cqw; }
.tank b { font: 400 4.2cqw/1 var(--f-pixel); color: var(--lime); }
.tank span { font: 400 1.9cqw/1 var(--f-pixel-cn); }
.tank-pool { left: 15cqw; --fill: 80; }
.tank-plat { left: 59cqw; --fill: 20; }
.scene-split[data-kind="platform"] .tank-pool, .scene-split[data-kind="platform"] .tank-plat { --fill: 50; }

.scene-rank .phone { left: 35.5cqw; top: 3cqw; width: 29cqw; filter: drop-shadow(0 0 3cqw rgba(190, 255, 0, .35)); }
.scene-rank .phone img { width: 100%; }
.scene-rank .row { position: absolute; left: 5%; right: 5%; height: 7.2%; border: .25cqw solid var(--lime); border-radius: 1cqw; box-shadow: 0 0 2cqw rgba(210, 255, 0, .7), inset 0 0 2cqw rgba(210, 255, 0, .25); opacity: 0; }
.scene-rank .row em { position: absolute; right: -4.6cqw; top: 50%; transform: translateY(-50%); font: 400 1.5cqw/1 var(--f-pixel); font-style: normal; color: #000; background: var(--lime); padding: .8cqw .9cqw; }
.scene-rank .row-1 { top: 26.5%; } .scene-rank .row-2 { top: 34.2%; } .scene-rank .row-3 { top: 41.9%; }
.scene-rank .ring { left: 7cqw; top: 20cqw; width: 20cqw; height: 20cqw; display: grid; place-items: center; align-content: center; gap: 1cqw; }
.scene-rank .ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: #2b2e28; stroke-width: 8; }
.ring-fg { fill: none; stroke: var(--lime); stroke-width: 8; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; filter: drop-shadow(0 0 6px rgba(210, 255, 0, .8)); }
.scene-rank .ring b { font: 400 3.4cqw/1 var(--f-pixel); color: var(--lime); text-shadow: var(--glow); }
.scene-rank .ring span { font: 400 1.7cqw/1 var(--f-pixel-cn); color: var(--dim); }
.scene-rank .chip-r1 { left: 73cqw; top: 20cqw; } .scene-rank .chip-r2 { left: 73cqw; top: 27cqw; } .scene-rank .chip-r3 { left: 73cqw; top: 34cqw; }

.scene-podium .pool-label { left: 50cqw; top: 2cqw; transform: translateX(-50%); font: 400 2.2cqw/1 var(--f-pixel-cn); padding: 1.2cqw 2cqw; color: #000; background: var(--lime); box-shadow: 0 0 3cqw rgba(210, 255, 0, .6); }
.scene-podium .bits { left: 50cqw; top: 8cqw; }
.pillar { bottom: 5cqw; width: 20cqw; display: grid; justify-items: center; gap: 1cqw; }
.pillar img { width: 9cqw; filter: drop-shadow(0 0 1.6cqw rgba(190, 255, 0, .5)); }
.pillar .bar { width: 100%; height: calc(var(--h) * 1cqw); display: grid; place-items: center; background: linear-gradient(180deg, rgba(210, 255, 0, .95), rgba(120, 150, 0, .5)); box-shadow: 0 0 3cqw rgba(210, 255, 0, .4), inset 0 .6cqw 0 #fbffd6; transform-origin: 50% 100%; }
.pillar .bar b { font: 400 2.6cqw/1 var(--f-pixel); color: #1c2400; }
.pillar span { font: 400 1.7cqw/1 var(--f-pixel-cn); color: var(--dim); }
.pillar.p1 { left: 40cqw; --h: 33; } .pillar.p2 { left: 16cqw; --h: 16.5; } .pillar.p3 { left: 64cqw; --h: 5.5; }
.pillar.p3 .bar b { font-size: 2.1cqw; }

.scene-burn .burn-row { left: 0; right: 0; top: 4cqw; display: flex; justify-content: center; gap: 9cqw; }
.scene-burn .burn-row .coin { position: relative; width: 9cqw; }
.scene-burn .burn-row .coin b { font-size: 3.6cqw; }
.scene-burn .burn-label { left: 50cqw; top: 21cqw; transform: translateX(-50%); font: 400 3cqw/1 var(--f-pixel); color: var(--lime); text-shadow: var(--glow); white-space: nowrap; }
.scene-burn .bits { left: 50cqw; top: 15cqw; }
.scene-burn .bits i { background: var(--lime); box-shadow: 0 0 1.4cqw rgba(210, 255, 0, .9), inset -.35cqw -.35cqw 0 #6f8a00; }
.pit { left: 30cqw; top: 36cqw; width: 40cqw; height: 20cqw; display: grid; place-items: end center; }
.pit span { position: relative; font: 400 2cqw/1 var(--f-pixel); padding: 1.2cqw 2cqw; color: var(--white); background: #000; border: .3cqw solid #555; }
.fire { position: absolute; left: 6cqw; right: 6cqw; bottom: 4cqw; height: 15cqw; background:
  linear-gradient(0deg, #ff4b1f, #ff9a1f 45%, #ffe14a 75%, transparent) 0 100% / 12.5% 60% repeat-x;
  -webkit-mask: linear-gradient(#000, #000); filter: drop-shadow(0 0 3cqw rgba(255, 120, 20, .8)); image-rendering: pixelated; }
.fire::before, .fire::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #ffb01f 0 6.25%, transparent 6.25% 12.5%, #ff5a1f 12.5% 18.75%, transparent 18.75% 25%); animation: flame .5s steps(4) infinite; transform-origin: 50% 100%; }
.fire::after { background: repeating-linear-gradient(90deg, transparent 0 6.25%, #ffe14a 6.25% 12.5%, transparent 12.5% 18.75%, #ff8a1f 18.75% 25%); animation-duration: .37s; animation-direction: reverse; }
@keyframes flame { 0% { clip-path: polygon(0 100%, 0 40%, 12% 55%, 25% 20%, 37% 60%, 50% 10%, 62% 50%, 75% 25%, 87% 60%, 100% 35%, 100% 100%); } 50% { clip-path: polygon(0 100%, 0 60%, 12% 25%, 25% 55%, 37% 15%, 50% 50%, 62% 20%, 75% 60%, 87% 30%, 100% 55%, 100% 100%); } 100% { clip-path: polygon(0 100%, 0 30%, 12% 60%, 25% 30%, 37% 55%, 50% 25%, 62% 60%, 75% 15%, 87% 50%, 100% 25%, 100% 100%); } }
.scene-burn .chip-roll { left: 50cqw; top: 62cqw; transform: translateX(-50%); border-color: var(--line); background: none; color: var(--dim); }

/* rail (garuda dt-rail) */
.mech-rail, .dt-rail { --n: 6; --k: 0; --g: 4px; position: relative; height: 22px; }
.mech-rail { grid-column: 1 / -1; width: min(520px, 70vw); justify-self: center; margin-top: 12px; }
.dt-ticks { display: flex; gap: var(--g); height: 100%; }
.dt-tick { all: unset; position: relative; flex: 1; height: 100%; cursor: pointer; }
.dt-tick::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(244, 244, 237, .2); transition: background .2s, transform .3s var(--ease-out); }
.dt-tick:hover::after, .dt-tick:focus-visible::after { background: rgba(244, 244, 237, .7); transform: scaleY(2.5); }
.dt-cur { position: absolute; top: 50%; height: 4px; margin-top: -2px; pointer-events: none; background: var(--accent, var(--lime)); box-shadow: 0 0 12px var(--accent, rgba(210, 255, 0, .7));
  width: calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); left: calc(var(--k) * ((100% - (var(--n) - 1) * var(--g)) / var(--n) + var(--g))); transition: left .7s var(--ease-out); }

/* ───────── card (frame cut from the video) ───────── */
.card { position: relative; aspect-ratio: 800 / 1111; container-type: inline-size; perspective: 1500px; flex: none; }
.card-3d { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); transition: transform .2s cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 calc(6px + 22px * var(--hover, 0)) calc(12px + 30px * var(--hover, 0)) rgba(0, 0, 0, calc(.35 + .3 * var(--hover, 0)))) drop-shadow(0 0 calc(10px * var(--glowk, .5) + 22px * var(--hover, 0)) color-mix(in srgb, var(--accent, #d2ff00) 55%, transparent)); }
.card-pic { position: absolute; left: 8.6%; top: 13.4%; width: 81.7%; height: 52.4%; object-fit: cover; object-position: 50% 28%; background: #0b0c0a; }
.card-pic.is-mosaic { display: grid; grid-template-columns: 1fr 1fr; }
.card-pic.is-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.card-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.card-badge { position: absolute; left: 80.8%; top: 62.5%; width: 26.4%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; background: #0b0c0a;
  box-shadow: 0 0 0 .7cqw #dfe3dc, 0 0 0 1.1cqw rgba(0, 0, 0, .6), 0 0 3cqw color-mix(in srgb, var(--accent, #d2ff00) 70%, transparent); }
.card-badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 210deg, #ff5ad1, #6ad8ff, #c8ff5a, #ffd15a, #ff5ad1); mix-blend-mode: overlay; opacity: .55; }
.card-badge img { width: 112%; height: 112%; margin: -6%; max-width: none; object-fit: cover; }
.card-badge b { display: grid; place-items: center; width: 100%; height: 100%; font: 800 9cqw/1 var(--f-serif); color: var(--accent); }
.card-plate { position: absolute; left: 14%; right: 14%; top: 66.2%; height: 13%; display: grid; place-content: center; justify-items: center; gap: .9cqw; text-align: center; }
.card-name { display: flex; align-items: center; gap: 1.6cqw; font: 800 calc(var(--fs, 6.6) * 1cqw)/1.05 var(--f-serif); color: #efe6cf; text-shadow: 0 .3cqw .6cqw #000; white-space: nowrap; }
.card-name::before, .card-name::after { content: ""; width: 5.6cqw; height: 8.4cqw; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30' fill='%23cdbf95'%3E%3Cpath d='M15 29C7 25 3 18 4 8l1.4.2C4.7 17 8.300 23 15.600 27.600z'/%3E%3Cellipse cx='3.200' cy='6' rx='1.800' ry='3.600' transform='rotate(-14 3.200 6)'/%3E%3Cellipse cx='7.600' cy='9.500' rx='1.700' ry='3.400' transform='rotate(38 7.600 9.500)'/%3E%3Cellipse cx='2.600' cy='13.500' rx='1.700' ry='3.400' transform='rotate(-34 2.600 13.500)'/%3E%3Cellipse cx='8.400' cy='16' rx='1.700' ry='3.400' transform='rotate(50 8.400 16)'/%3E%3Cellipse cx='4.600' cy='20' rx='1.700' ry='3.400' transform='rotate(-52 4.600 20)'/%3E%3Cellipse cx='11.400' cy='21.600' rx='1.600' ry='3.200' transform='rotate(62 11.400 21.600)'/%3E%3Cellipse cx='8.600' cy='25.400' rx='1.600' ry='3.200' transform='rotate(-70 8.600 25.400)'/%3E%3C/svg%3E") center / contain no-repeat; }
.card-name::after { transform: scaleX(-1); }
.card-handle { font: 500 3cqw/1 var(--f-race); letter-spacing: .06em; color: #9b9685; white-space: nowrap; }
.card-ribbon { position: absolute; left: 24%; width: 51.4%; top: 81%; height: 5.8%; display: grid; place-items: center; font: italic 800 calc(var(--rs, 4.4) * 1cqw)/1 var(--f-serif); color: #17150f; text-shadow: 0 .15cqw 0 rgba(255, 255, 255, .5); white-space: nowrap; }
.card-sheen, .card-foil { position: absolute; inset: 0; border-radius: 5.4% / 3.9%; pointer-events: none; }
.card-sheen { background: linear-gradient(102deg, transparent 36%, rgba(255, 255, 255, .28) 46%, rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, .28) 54%, transparent 64%); background-size: 260% 100%; background-position-x: calc(var(--mxf, .5) * 100%); mix-blend-mode: screen; opacity: calc(.85 * var(--hover, 0)); transition: opacity .25s ease; }
.card-foil { background: linear-gradient(115deg, rgba(120, 90, 255, .16) 0%, rgba(255, 120, 200, 0) 38%, rgba(255, 180, 90, 0) 62%, rgba(90, 200, 255, .16) 100%); mix-blend-mode: color-dodge; opacity: calc(.7 * var(--hover, 0)); transition: opacity .3s ease; }
button.card { display: block; padding: 0; text-align: inherit; }

/* ───────── live on-chain state ───────── */
#live { padding: clamp(100px, 16vh, 180px) var(--pad) clamp(40px, 6vh, 80px); }
#live .caption { margin-bottom: 24px; }
.live-mode { width: fit-content; margin: 22px auto 0; padding: 9px 12px 8px; font: 400 14px/1 var(--f-pixel-cn); color: #000; background: var(--lime); box-shadow: 0 0 20px rgba(210, 255, 0, .4); }
.live-mode:empty { visibility: hidden; }
.live-mode.is-test { color: var(--lime); background: none; border: 1px dashed rgba(210, 255, 0, .6); box-shadow: none; }
.live-grid { max-width: 1500px; margin: clamp(30px, 5vh, 60px) auto 0; display: grid; grid-template-columns: minmax(240px, .8fr) 1.5fr 1.2fr; align-items: stretch; gap: clamp(10px, 1.1vw, 18px); opacity: .35; transition: opacity .6s var(--ease-out); }
#live.is-live .live-grid { opacity: 1; }
.live-panel { position: relative; padding: clamp(16px, 1.6vw, 26px); background: linear-gradient(rgba(7, 8, 6, .86), rgba(7, 8, 6, .86)), url(../assets/tex/forged-carbon.jpg) center / 320px; border: 1px solid var(--line); }
.live-panel::before, .live-panel::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--lime); }
.live-panel::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.live-panel::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.live-panel h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; font: 400 16px/1.2 var(--f-pixel-cn); color: var(--lime); }
.live-panel h3 span { font-size: 13px; color: var(--dim); }
.live-timer { display: grid; place-content: center; justify-items: center; gap: 16px; }
.live-ring { position: relative; width: clamp(190px, 17vw, 280px); aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 10px; }
.live-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.live-ring-fg { fill: none; stroke: var(--lime); stroke-width: 6; filter: drop-shadow(0 0 5px rgba(210, 255, 0, .8)); transition: stroke-dashoffset .3s linear; }
.live-ring .ring-bg { stroke-width: 6; }
.live-round { font: 400 10px/1 var(--f-pixel); letter-spacing: .12em; color: var(--dim); }
.live-clock { font: 400 clamp(22px, 2.5vw, 40px)/1 var(--f-pixel); color: var(--lime); text-shadow: var(--glow); font-variant-numeric: tabular-nums; }
.live-ring span:last-child { font: 400 14px/1 var(--f-pixel-cn); color: var(--dim); }
.live-behind { font: 400 13px/1 var(--f-pixel-cn); color: var(--dim); }
.live-stats dl { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px clamp(14px, 1.6vw, 28px); }
.live-stats dl > div { display: grid; gap: 8px; align-content: start; }
.live-stats .is-main { grid-column: 1 / -1; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.live-stats dt { font: 400 14px/1.2 var(--f-pixel-cn); color: var(--dim); }
.live-stats dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.live-stats dd b { font: 400 clamp(11px, 1vw, 16px)/1.1 var(--f-pixel); color: var(--white); white-space: nowrap; }
.live-stats .is-main dd b { font-size: clamp(22px, 2.8vw, 46px); color: var(--lime); text-shadow: var(--glow); }
.live-stats dd small { font: 400 9px/1 var(--f-pixel); color: var(--dim); }
.live-stats p { font-size: 12.5px; line-height: 1.5; color: rgba(244, 244, 237, .45); }
.live-tokens { grid-column: 1 / -1; margin-top: clamp(14px, 2vh, 28px); }
.live-tokens > h3 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; font: 400 clamp(18px, 1.6vw, 26px)/1.2 var(--f-pixel-cn); color: var(--lime); text-shadow: var(--glow); }
.live-tokens > h3 span { font-size: 14px; color: var(--dim); text-shadow: none; }
.token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(10px, 1.1vw, 18px); }
.token { position: relative; display: grid; gap: 16px; padding: clamp(16px, 1.5vw, 24px); background: linear-gradient(rgba(7, 8, 6, .84), rgba(7, 8, 6, .84)), url(../assets/tex/forged-carbon.jpg) center / 320px; /* hover lift uses `translate`, not `transform`: a CSS transition on transform corrupts the values GSAP reads for the entrance */
  border: 1px solid var(--line); transition: border-color .3s, translate .4s var(--ease-out), box-shadow .3s; }
.token:hover { border-color: rgba(210, 255, 0, .55); translate: 0 -4px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(210, 255, 0, .12); }
.token.is-platform { border-color: rgba(244, 244, 237, .35); }
.token-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.token-logo { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #f4ff8a 0 18%, #d2ff00 19% 55%, #86a800 56% 100%); box-shadow: inset 0 0 0 4px #a8cc00, inset 0 0 0 6px #5a7200, 0 0 18px rgba(210, 255, 0, .45); }
.is-platform .token-logo { background: radial-gradient(circle at 35% 30%, #fff 0 18%, #e9e9e2 19% 55%, #9a9a90 56% 100%); box-shadow: inset 0 0 0 4px #c9c9c0, inset 0 0 0 6px #6d6d66, 0 0 18px rgba(255, 255, 255, .3); }
.token-logo b { font: 400 20px/1 var(--f-pixel); color: #2c3800; }
.token-logo img { width: 100%; height: 100%; object-fit: cover; }
.token-id { display: grid; gap: 7px; min-width: 0; }
.token-id b { font: 400 clamp(15px, 1.3vw, 20px)/1.15 var(--f-pixel); color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token-id span { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token-role { align-self: start; font: 400 12px/1 var(--f-pixel-cn); padding: 6px 8px 5px; color: #000; background: var(--lime); white-space: nowrap; }
.is-platform .token-role { background: var(--white); }
.token-place { position: absolute; right: -1px; top: -1px; font: 400 10px/1 var(--f-pixel); padding: 7px 8px 6px; color: #000; background: var(--lime); box-shadow: 0 0 16px rgba(210, 255, 0, .5); }
.token-place + .token-head .token-role { visibility: hidden; }
.token-desc { font-size: 13.5px; line-height: 1.55; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.token-desc:empty { display: none; }
.token-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.token-facts div { display: grid; gap: 6px; align-content: start; min-width: 0; }
.token-facts dt { font: 400 13px/1 var(--f-pixel-cn); color: var(--dim); }
.token-facts dd { margin: 0; font: 400 11px/1.3 var(--f-pixel); color: var(--white); overflow-wrap: anywhere; }
.token-facts dd small { font: 500 13px/1 var(--f-race); letter-spacing: .04em; color: var(--dim); margin-left: 6px; }
.token-burn { display: grid; gap: 8px; }
.token-burn p { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 400 13px/1 var(--f-pixel-cn); color: var(--dim); }
.token-burn p b { font: 400 11px/1 var(--f-pixel); color: #ff9a3a; }
.token-burn i { display: block; height: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.token-burn i::before { content: ""; display: block; height: 100%; width: calc(var(--burn, 0) * 1%); min-width: 2px; background: linear-gradient(90deg, #ff4b1f, #ffb01f); box-shadow: 0 0 10px rgba(255, 120, 20, .8); transition: width 1s var(--cubic-default); }
.token-ca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.token-ca button, .token-ca a { font: 500 14px/1 var(--f-race); letter-spacing: .08em; text-transform: uppercase; padding: 9px 11px 8px; border: 1px solid var(--line); color: var(--white); transition: all .25s var(--ease-out); }
.token-ca button { flex: 1; min-width: 0; text-align: left; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
.token-ca button:hover, .token-ca a:hover { color: #000; background: var(--lime); border-color: var(--lime); }
.token-ca button.is-copied { color: #000; background: var(--lime); border-color: var(--lime); }
.token[style*="--tk"] { border-color: color-mix(in srgb, var(--tk) 55%, transparent); }
.token-clan { font: 400 14px/1 var(--f-pixel-cn); padding: 11px 12px 10px; text-align: center; color: #000; background: var(--tk, var(--lime)); transition: filter .25s; }
.token-clan:hover { filter: brightness(1.15); }
.live-panel ul, .live-panel ol { display: grid; gap: 2px; }
.live-panel li { display: grid; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.live-panel li.is-empty { display: block; color: var(--dim); font: 400 14px/1.5 var(--f-pixel-cn); }
.live-panel li a { font: 500 15px/1 var(--f-race); letter-spacing: .06em; color: var(--dim); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.live-panel li a:hover { color: var(--lime); border-color: var(--lime); }
.live-need { margin-top: 12px; font-size: 13px; color: var(--dim); }
.live-last li { grid-template-columns: 26px minmax(60px, auto) auto 1fr; }
.live-last li i { display: grid; place-items: center; width: 24px; height: 24px; font: 400 10px/1 var(--f-pixel); font-style: normal; color: #000; background: var(--lime); }
.live-last li b { font: 400 13px/1.2 var(--f-pixel); }
.live-last li span { font: 400 11px/1 var(--f-pixel); color: var(--lime); }
.live-last li em { justify-self: end; font: 400 13px/1 var(--f-pixel-cn); font-style: normal; color: var(--white); }
.live-last li em.is-done { color: var(--dim); }
.live-feed { grid-column: 1 / -1; }
.live-rounds { grid-column: 1 / 3; }
.rounds { display: flex; flex-wrap: wrap; gap: 8px; }
.rounds .is-empty { color: var(--dim); font: 400 14px/1.5 var(--f-pixel-cn); }
.rounds span { display: grid; gap: 7px; justify-items: center; min-width: 46px; padding: 9px 6px 8px; border: 1px solid var(--line); }
.rounds span b { font: 400 10px/1 var(--f-pixel); color: var(--dim); }
.rounds span i, .rounds-key i { display: block; width: 100%; height: 6px; background: #3a3d35; }
.rounds .k-settle i, .rounds-key .k-settle { background: var(--lime); box-shadow: 0 0 8px rgba(210, 255, 0, .7); }
.rounds .k-roll i, .rounds-key .k-roll { background: #8a8d84; }
.rounds .k-wait i { background: #ffd23a; }
.rounds .k-now { border-color: var(--lime); }
.rounds .k-now b { color: var(--lime); }
.rounds .k-now i, .rounds-key .k-now { background: var(--white); animation: blink 1s steps(1) infinite; }
.rounds-key { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--dim); }
.rounds-key i { display: inline-block; width: 14px; margin-left: 10px; }
.rounds-key i:first-child { margin-left: 0; }
.live-addr li { grid-template-columns: auto 1fr auto; }
.live-addr li b { font: 400 14px/1.2 var(--f-pixel-cn); font-weight: 400; }
.live-addr li span { font-size: 12.5px; color: rgba(244, 244, 237, .45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-feed li { grid-template-columns: 10px minmax(120px, auto) 1fr auto; }
.live-feed li i { width: 8px; height: 8px; background: var(--dim); }
.live-feed li.k-burn i { background: #ff7a1f; box-shadow: 0 0 10px #ff7a1f; }
.live-feed li.k-settle i { background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.live-feed li.k-tax i { background: #ffd23a; }
.live-feed li b { font: 400 14px/1.2 var(--f-pixel-cn); font-weight: 400; }
.live-feed li span { color: var(--dim); font-size: 13.5px; overflow-wrap: anywhere; }
.live-foot { margin-top: 18px; text-align: center; font-size: 13px; color: rgba(244, 244, 237, .45); }
.live-foot a { color: var(--dim); border-bottom: 1px solid var(--line); }
#live.is-error .live-foot { color: #ff7a1f; }
@media (max-width: 900px) {
  .live-grid { grid-template-columns: 1fr; }
  .live-tokens, .live-feed { grid-column: auto; }
  .live-stats dl { grid-template-columns: 1fr 1fr; }
  .live-feed li { grid-template-columns: 10px 1fr auto; }
  .live-feed li span { grid-column: 2 / -1; }
}

/* ───────── clans fan (landonorris social callout) ───────── */
#clans { padding: clamp(110px, 18vh, 200px) var(--pad) clamp(80px, 12vh, 150px); overflow: hidden; }
#clans .caption { margin-bottom: 30px; }
.fan { position: relative; height: clamp(300px, 31vw, 560px); margin-top: clamp(50px, 8vh, 100px); font-size: clamp(8px, 1.12vw, 19px); }
.fan .callout-socials-card-w { position: absolute; left: 50%; top: 0; width: 13.6em; margin-left: -6.8em; }
.fan .card { width: 100%; }
.fan-info { display: grid; justify-items: center; gap: 10px; min-height: 96px; margin-top: 12px; text-align: center; }
.fan-info b { font: 900 italic clamp(34px, 4.4vw, 76px)/1 var(--f-race); letter-spacing: .01em; color: var(--accent, var(--lime)); text-transform: uppercase; text-shadow: 0 0 .5em color-mix(in srgb, var(--accent, #d2ff00) 60%, transparent); }
.fan-info span { font: 400 16px/1.3 var(--f-pixel-cn); color: var(--white); }
.fan-info em { font: 500 15px/1.3 var(--f-race); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.fan-info i { font: 400 13px/1 var(--f-pixel-cn); font-style: normal; padding: 7px 10px 6px; color: var(--dim); border: 1px dashed var(--line); }
.fan-info i:empty { visibility: hidden; }
.fan-info i.is-live { color: #000; background: var(--accent, var(--lime)); border: 1px solid var(--accent, var(--lime)); }

/* ───────── wall (landonorris marquee) ───────── */
#wall { padding: clamp(60px, 10vh, 120px) 0 clamp(80px, 14vh, 160px); overflow: hidden; }
#wall .caption { margin-bottom: 24px; }
.wall-rows { margin-top: clamp(40px, 7vh, 80px); display: grid; gap: clamp(14px, 1.6vw, 26px); perspective: 1400px; -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.wall-row { overflow: visible; }
.wall-scroll { display: flex; will-change: transform; }
.wall-set { display: flex; flex: none; gap: clamp(10px, 1.1vw, 18px); padding-right: clamp(10px, 1.1vw, 18px); will-change: transform; }
.wall-set .card { width: clamp(124px, 11.4vw, 200px); cursor: pointer; }
/* 178 moving cards: keep the glow filter for the one under the cursor */
.wall-set .card:not(:hover) .card-3d { filter: none; }

/* ───────── home ───────── */
.band { padding: clamp(30px, 6vh, 70px) 0; overflow: hidden; display: grid; gap: 14px; border-block: 1px solid var(--line); background: rgba(7, 8, 6, .55); }
.band-scroll { display: flex; will-change: transform; }
.band-set { display: flex; flex: none; align-items: center; gap: clamp(20px, 3vw, 50px); padding-right: clamp(20px, 3vw, 50px); font: 400 clamp(30px, 6vw, 96px)/1.1 var(--f-pixel), var(--f-pixel-cn); white-space: nowrap; }
.band-set.sm { font-size: clamp(12px, 1.4vw, 22px); color: var(--dim); letter-spacing: .1em; }
.band-set .o { color: transparent; -webkit-text-stroke: 2px var(--white); }
.band-set i { flex: none; width: .28em; height: .28em; background: var(--lime); box-shadow: 0 0 14px rgba(210, 255, 0, .8); }
.band-set.sm i { width: 8px; height: 8px; }
/* minmax(0, 1fr): without it the single auto column grows to the longest unwrapped line and overflows on phones */
.home-sec { padding: clamp(80px, 13vh, 150px) var(--pad) 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.home-sec .caption { margin-bottom: 22px; }
.home-sec > .btn { margin-top: clamp(26px, 4vh, 44px); }
.trio { width: 100%; max-width: 1400px; margin-top: clamp(36px, 6vh, 70px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 22px); }
.trio-card { position: relative; display: grid; gap: 14px; align-content: start; padding: clamp(18px, 2vw, 32px); border: 1px solid var(--line); background: linear-gradient(rgba(7, 8, 6, .82), rgba(7, 8, 6, .82)), url(../assets/tex/forged-carbon.jpg) center / 320px; overflow: hidden; transition: border-color .3s, translate .45s var(--ease-out), box-shadow .3s; }
.trio-card:hover { border-color: rgba(210, 255, 0, .6); translate: 0 -6px; box-shadow: 0 22px 50px rgba(0, 0, 0, .55), 0 0 34px rgba(210, 255, 0, .14); }
.trio-no { position: absolute; right: 14px; top: 6px; font: 900 italic clamp(60px, 7vw, 120px)/1 var(--f-race); color: transparent; -webkit-text-stroke: 1px rgba(210, 255, 0, .35); pointer-events: none; }
.trio-art { height: clamp(120px, 12vw, 190px); display: flex; align-items: center; gap: 18px; container-type: size; }
.trio-art .coin { width: 78px; box-shadow: inset 0 0 0 5px #a8cc00, inset 0 0 0 8px #5a7200, 0 0 22px rgba(210, 255, 0, .5), 0 6px 0 #4a5e00; animation: bob 3.2s ease-in-out infinite; }
.trio-art .coin b { font-size: 30px; }
@keyframes bob { 50% { translate: 0 -8px; } }
.trio-art em { font: 400 clamp(16px, 1.9vw, 30px)/1 var(--f-pixel); font-style: normal; color: var(--lime); text-shadow: var(--glow); }
.trio-rank { display: flex; align-items: flex-end; gap: 6px; height: 84px; }
.trio-rank i { width: 26px; background: linear-gradient(var(--lime), #7c9900); box-shadow: 0 0 14px rgba(210, 255, 0, .5); transform-origin: 50% 100%; animation: rise 2.6s var(--cubic-default) infinite alternate; }
.trio-rank i:nth-child(1) { height: 55%; } .trio-rank i:nth-child(2) { height: 100%; animation-delay: -.6s; } .trio-rank i:nth-child(3) { height: 30%; animation-delay: -1.2s; }
@keyframes rise { from { scale: 1 .7; } to { scale: 1 1; } }
.trio-fire { position: relative; width: 110px; height: 84px; }
.trio-fire .fire { left: 0; right: 0; bottom: 0; height: 100%; }
.trio-card h3 { font: 400 clamp(20px, 1.9vw, 30px)/1.25 var(--f-pixel-cn); color: var(--white); -webkit-text-stroke: .02em currentColor; }
.trio-card p { font-size: clamp(14px, 1.05vw, 17px); line-height: 1.7; color: var(--dim); }
.teaser { width: 100%; max-width: 1400px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 3vw, 56px); padding: clamp(20px, 2.4vw, 38px); border: 1px solid rgba(210, 255, 0, .35); background: linear-gradient(rgba(7, 8, 6, .84), rgba(7, 8, 6, .84)), url(../assets/tex/forged-carbon.jpg) center / 320px; box-shadow: 0 0 60px rgba(210, 255, 0, .06); }
.teaser-clock { display: grid; gap: 10px; justify-items: start; min-width: 190px; }
.teaser-clock span { font: 400 13px/1 var(--f-pixel-cn); color: var(--dim); }
.teaser-clock .t-round { font: 400 10px/1 var(--f-pixel); letter-spacing: .12em; }
.t-clock { font: 400 clamp(26px, 3.2vw, 52px)/1 var(--f-pixel); color: var(--lime); text-shadow: var(--glow); font-variant-numeric: tabular-nums; }
.t-bar { display: block; width: 100%; height: 6px; background: rgba(255, 255, 255, .1); }
.t-bar i { display: block; height: 100%; background: var(--lime); box-shadow: 0 0 10px rgba(210, 255, 0, .8); transform: scaleX(0); transform-origin: 0 50%; }
.teaser-stats { margin: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 16px 24px; }
.teaser-stats div { display: grid; gap: 9px; }
.teaser-stats dt { font: 400 14px/1 var(--f-pixel-cn); color: var(--dim); }
.teaser-stats dd { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.teaser-stats dd b { font: 400 clamp(12px, 1.2vw, 19px)/1 var(--f-pixel); white-space: nowrap; }
.teaser-stats dd small { font: 400 9px/1 var(--f-pixel), var(--f-pixel-cn); color: var(--dim); }
.entry { width: 100%; max-width: 1400px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 22px); }
.entry-card { display: grid; gap: 20px; align-content: start; padding: clamp(20px, 2.4vw, 38px); border: 1px solid var(--line); background: rgba(7, 8, 6, .7); transition: border-color .3s, translate .45s var(--ease-out); }
.entry-card:hover { border-color: rgba(210, 255, 0, .6); translate: 0 -6px; }
.entry-card h3 { font: 400 clamp(24px, 2.8vw, 46px)/1.2 var(--f-pixel-cn); -webkit-text-stroke: .02em currentColor; }
.entry-card h3 span { font: 400 .8em/1 var(--f-pixel); color: var(--lime); text-shadow: var(--glow); -webkit-text-stroke: 0; }
.entry-emblems, .entry-faces { display: flex; flex-wrap: wrap; }
.entry-emblems span, .entry-faces span { width: clamp(46px, 5vw, 78px); aspect-ratio: 1; margin-right: -10px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #0d0f0a; box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px #070806; transition: translate .35s var(--ease-out); }
.entry-faces span { width: clamp(34px, 3.4vw, 54px); }
.entry-card:hover .entry-emblems span:nth-child(odd), .entry-card:hover .entry-faces span:nth-child(odd) { translate: 0 -6px; }
.entry-emblems img, .entry-faces img { width: 112%; height: 112%; max-width: none; object-fit: cover; }
.entry-emblems b { font: 800 16px/1 var(--f-serif); color: var(--accent); }
.entry-go { font: 400 15px/1 var(--f-pixel-cn); color: var(--lime); }

/* ───────── outro + footer ───────── */
#outro { margin-top: clamp(40px, 8vh, 100px); }
.outro-video { width: 100%; max-height: 100vh; object-fit: cover; mix-blend-mode: lighten; }
.foot { max-width: 60em; margin: clamp(50px, 9vh, 110px) auto 0; padding: 0 var(--pad) 70px; display: grid; gap: 8px; text-align: center; font-size: 13px; color: rgba(244, 244, 237, .45); }

/* ───────── mechanism extras ───────── */
.mech-more { padding: clamp(90px, 14vh, 160px) var(--pad) 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.mech-more .caption { margin-bottom: 22px; }
.calc { width: 100%; max-width: 1200px; margin-top: clamp(34px, 6vh, 64px); display: grid; grid-template-columns: minmax(260px, .8fr) 1.4fr; gap: clamp(12px, 1.4vw, 22px); }
.calc-in, .calc-out { padding: clamp(18px, 2vw, 32px); border: 1px solid var(--line); background: linear-gradient(rgba(7, 8, 6, .84), rgba(7, 8, 6, .84)), url(../assets/tex/forged-carbon.jpg) center / 320px; }
.calc-in { display: grid; gap: 18px; align-content: start; min-width: 0; }
.calc-in label { font: 400 15px/1 var(--f-pixel-cn); color: var(--dim); }
.calc-amt { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--lime); padding-bottom: 8px; }
/* width: 0 so the number field cannot push the panel wider than a phone screen */
.calc-amt input { flex: 1 1 0; width: 0; min-width: 0; font: 400 clamp(24px, 2.8vw, 44px)/1.1 var(--f-pixel); color: var(--lime); text-shadow: var(--glow); background: none; border: 0; outline: 0; -moz-appearance: textfield; }
.calc-amt input::-webkit-outer-spin-button, .calc-amt input::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc-amt span { font: 400 12px/1 var(--f-pixel); color: var(--dim); }
#calcRange { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: rgba(255, 255, 255, .12); outline: 0; }
#calcRange::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--lime); box-shadow: 0 0 14px rgba(210, 255, 0, .8); cursor: pointer; }
#calcRange::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 0; background: var(--lime); cursor: pointer; }
.calc-note { font-size: 13px; line-height: 1.6; color: rgba(244, 244, 237, .45); }
.calc-out { display: grid; gap: 22px; }
.calc-bar { height: 14px; background: var(--white); overflow: hidden; }
.calc-bar i { display: block; height: 100%; width: 80%; background: var(--lime); box-shadow: 0 0 14px rgba(210, 255, 0, .8); transition: width .6s var(--cubic-default); }
.calc-split dl { margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc-split dl div:last-child { text-align: right; }
.calc-split dl div:last-child dd { justify-content: flex-end; }
.calc dt { font: 400 14px/1 var(--f-pixel-cn); color: var(--dim); }
.calc dt em { font: 400 11px/1 var(--f-pixel); font-style: normal; color: var(--lime); margin-left: 6px; }
.calc dd { margin: 10px 0 0; display: flex; align-items: baseline; gap: 8px; }
.calc dd b, .calc-podium b { font: 400 clamp(15px, 1.7vw, 26px)/1 var(--f-pixel); }
.calc small { font: 400 9px/1 var(--f-pixel); color: var(--dim); }
.calc-then { font-size: 14px; color: var(--dim); padding-top: 18px; border-top: 1px solid var(--line); }
.calc-podium { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.calc-podium li { display: grid; grid-template-columns: 26px 44px 1fr minmax(90px, auto) auto; align-items: center; gap: 12px; }
.calc-podium i { display: grid; place-items: center; width: 24px; height: 24px; font: 400 10px/1 var(--f-pixel); font-style: normal; color: #000; background: var(--lime); }
.calc-podium span { font: 400 11px/1 var(--f-pixel); color: var(--lime); }
.calc-podium div { height: 10px; background: rgba(255, 255, 255, .08); }
.calc-podium u { display: block; height: 100%; background: linear-gradient(90deg, #7c9900, var(--lime)); box-shadow: 0 0 10px rgba(210, 255, 0, .6); }
.calc-podium b { text-align: right; }
.cheat { width: 100%; max-width: 1200px; margin-top: clamp(34px, 6vh, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.1vw, 18px); }
.cheat li { display: grid; gap: 12px; padding: clamp(16px, 1.8vw, 28px); border: 1px solid var(--line); background: rgba(7, 8, 6, .7); visibility: hidden; }
.cheat b { font: 400 clamp(14px, 1.5vw, 24px)/1.3 var(--f-pixel); color: var(--lime); text-shadow: var(--glow); }
.cheat span { font-size: 14px; color: var(--dim); }
.faq { width: 100%; max-width: 1200px; margin-top: clamp(26px, 4vh, 44px); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 4px; font: 400 clamp(16px, 1.35vw, 21px)/1.4 var(--f-pixel-cn); cursor: pointer; list-style: none; transition: color .25s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; font: 400 14px/1 var(--f-pixel); color: #000; background: var(--lime); transition: rotate .4s var(--ease-out); }
.faq details[open] summary { color: var(--lime); }
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:hover { color: var(--lime); }
.faq p { padding: 0 60px 22px 4px; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.8; color: rgba(244, 244, 237, .78); max-width: 60em; }

/* ───────── clan directory ───────── */
.dir-sec { padding: clamp(70px, 11vh, 130px) var(--pad) 0; }
.dir-sec .caption { margin-bottom: clamp(26px, 4vh, 44px); }
.dir { max-width: 1500px; margin: 0 auto; display: grid; gap: clamp(10px, 1.1vw, 16px); }
.dir-row { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2vw, 34px); padding: clamp(14px, 1.6vw, 24px) clamp(16px, 2vw, 30px); border: 1px solid var(--line); background: rgba(7, 8, 6, .72); overflow: hidden; transition: border-color .3s; }
.dir-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); box-shadow: 0 0 18px var(--accent); transition: width .5s var(--ease-out); opacity: .9; }
.dir-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.dir-row:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.dir-row:hover::before { width: 12px; }
.dir-row:hover::after { opacity: 1; }
.dir-row > * { position: relative; z-index: 1; }
.dir-no { font: 900 italic clamp(28px, 3vw, 52px)/1 var(--f-race); color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 70%, transparent); }
.dir-emblem { width: clamp(64px, 6.4vw, 104px); aspect-ratio: 1; border-radius: 22%; overflow: hidden; display: grid; place-items: center; background: #0d0f0a; box-shadow: 0 0 0 2px var(--accent), 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent); transition: scale .45s var(--ease-out), rotate .45s var(--ease-out); }
.dir-row:hover .dir-emblem { scale: 1.06; rotate: -3deg; }
.dir-emblem img { width: 108%; height: 108%; max-width: none; object-fit: cover; }
.dir-emblem b { font: 800 clamp(18px, 2vw, 30px)/1 var(--f-serif); color: var(--accent); }
.dir-main { display: grid; gap: 8px; min-width: 0; }
.dir-main h3 { font: 900 italic clamp(28px, 3.4vw, 60px)/.95 var(--f-race); text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .1em; }
.dir-cn { font: 400 15px/1.3 var(--f-pixel-cn); color: var(--white); }
.dir-tag { font: 500 14px/1.4 var(--f-race); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.dir-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dir-meta a, .dir-meta span { font: 500 13px/1 var(--f-race); letter-spacing: .06em; padding: 7px 9px 6px; border: 1px solid var(--line); color: var(--dim); transition: all .25s; }
.dir-meta a:hover { color: #000; background: var(--accent); border-color: var(--accent); }
.dir-meta .dir-token { font-family: var(--f-pixel-cn); letter-spacing: 0; border-style: dashed; }
.dir-meta .dir-token.is-live { color: #000; background: var(--accent); border: 1px solid var(--accent); }
.dir-faces { display: flex; align-items: center; justify-content: flex-end; }
.dir-faces button { width: clamp(34px, 3.2vw, 50px); aspect-ratio: 1; margin-left: -9px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #070806; transition: translate .3s var(--ease-out), box-shadow .3s; }
.dir-faces button:hover { translate: 0 -6px; box-shadow: 0 0 0 2px var(--accent); z-index: 2; }
.dir-faces img { width: 100%; height: 100%; object-fit: cover; }
.dir-faces span { margin-left: 10px; font: 700 15px/1 var(--f-race); color: var(--dim); }
.dir-go { background: var(--accent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent); }
.dir-go:hover { box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ───────── roster ───────── */
.roster-sec { padding: clamp(60px, 10vh, 120px) var(--pad) 0; }
.roster-sec .caption { margin-bottom: clamp(24px, 4vh, 40px); }
.roster-bar { max-width: 1500px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.roster-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.roster-chips button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px 9px; font: 400 14px/1 var(--f-pixel-cn); color: var(--dim); border: 1px solid var(--line); transition: all .25s var(--ease-out); }
.roster-chips button i { width: 8px; height: 8px; background: var(--accent, var(--lime)); }
.roster-chips button em { font: 400 9px/1 var(--f-pixel); font-style: normal; opacity: .7; }
.roster-chips button:hover { color: var(--white); border-color: var(--accent, var(--lime)); }
.roster-chips button.is-on { color: #000; background: var(--accent, var(--lime)); border-color: var(--accent, var(--lime)); box-shadow: 0 0 20px color-mix(in srgb, var(--accent, #d2ff00) 45%, transparent); }
.roster-chips button.is-on i { background: #000; }
.roster-search { display: flex; align-items: center; gap: 12px; padding: 0 12px; border: 1px solid var(--line); transition: border-color .25s; }
.roster-search:focus-within { border-color: var(--lime); }
.roster-search span { font: 400 14px/1 var(--f-pixel-cn); color: var(--dim); }
.roster-search input { width: min(220px, 40vw); padding: 11px 0 10px; font: 400 15px/1 var(--f-body); color: var(--white); background: none; border: 0; outline: 0; }
.roster-count { max-width: 1500px; margin: 16px auto 0; font: 400 13px/1 var(--f-pixel-cn); color: var(--dim); }
.roster-grid { max-width: 1500px; margin: 18px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 12vw, 190px), 1fr)); gap: clamp(10px, 1.1vw, 18px); }
.roster-grid .card { width: 100%; cursor: pointer; }
.roster-grid .card[hidden] { display: none; }
.roster-grid .card:not(:hover) .card-3d { filter: none; }
.roster-empty { margin: 60px 0; text-align: center; font: 400 16px/1 var(--f-pixel-cn); color: var(--dim); }

/* ───────── grid intro / member detail (garuda detail + F1 line-up) ───────── */
.detail { --accent: var(--lime); position: fixed; inset: 0; z-index: 70; visibility: hidden; background: rgba(7, 8, 6, 0); overflow: hidden; }
.detail.open { visibility: visible; }
.detail > * { position: absolute; }
.dt-amb { inset: -12%; opacity: 0; pointer-events: none; }
.dt-amb img { width: 100%; height: 100%; object-fit: cover; filter: blur(90px) saturate(1.35) brightness(.42); transform: scale(1.1); }
.dt-amb::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 5px), radial-gradient(70% 60% at 62% 45%, rgba(7, 8, 6, 0), rgba(7, 8, 6, .86)); }
.dt-speed { inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; mix-blend-mode: screen; }
.dt-stripes { inset: 0; pointer-events: none; z-index: 5; transform: skewX(-18deg) scaleX(1.4); }
.dt-stripes i { position: absolute; left: 0; right: 0; height: 20.2%; transform: scaleX(0); transform-origin: 0 50%; background: var(--accent); }
.dt-stripes i:nth-child(1) { top: 0; } .dt-stripes i:nth-child(2) { top: 20%; background: var(--white); } .dt-stripes i:nth-child(3) { top: 40%; } .dt-stripes i:nth-child(4) { top: 60%; background: #000; } .dt-stripes i:nth-child(5) { top: 80%; }
.dt-title { inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 2.4vh; visibility: hidden; pointer-events: none; text-align: center; }
.dt-lights { display: flex; gap: 14px; }
.dt-lights i { width: 22px; height: 22px; background: #23261f; box-shadow: inset 0 0 0 3px #000; }
.dt-lights i.on { background: #ff2b2b; box-shadow: inset 0 0 0 3px #000, 0 0 22px rgba(255, 43, 43, .9); }
.dt-title-k { font: 400 12px/1 var(--f-pixel); letter-spacing: .5em; color: var(--dim); }
.dt-title-h { font: 900 italic clamp(60px, 13vw, 240px)/.9 var(--f-race); text-transform: uppercase; color: var(--accent); overflow: hidden; padding: .06em .1em; white-space: nowrap; }
.dt-title { filter: drop-shadow(0 0 40px color-mix(in srgb, var(--accent) 45%, transparent)); }
.dt-title-h .char { display: inline-block; white-space: pre; }
.dt-title-s { font: 400 clamp(13px, 1.3vw, 20px)/1.5 var(--f-pixel-cn); color: var(--white); max-width: 40em; padding: 0 20px; }

.dt-no { left: -1vw; bottom: -5vh; font: 900 italic clamp(180px, 34vw, 620px)/.8 var(--f-race); color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--accent) 70%, transparent); letter-spacing: -.02em; pointer-events: none; opacity: .5; }
.dt-head { left: var(--pad); top: clamp(84px, 13vh, 150px); width: min(46vw, 760px); display: grid; gap: clamp(10px, 1.6vh, 18px); justify-items: start; z-index: 2; }
.dt-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; font: 700 clamp(13px, 1.05vw, 18px)/1 var(--f-race); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.dt-kick b { color: var(--accent); }
.dt-kick span::before { content: "·"; margin-right: 14px; }
.dt-name { font: 900 italic var(--nfs, clamp(44px, 6.6vw, 128px))/.98 var(--f-race); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; overflow-wrap: break-word; padding-right: .12em; max-width: 100%; }
.dt-name .char { display: inline-block; }
.dt-handle { font: 400 clamp(11px, 1vw, 16px)/1 var(--f-pixel); color: var(--accent); text-shadow: 0 0 .8em color-mix(in srgb, var(--accent) 60%, transparent); }
.dt-bar-color { width: min(340px, 60%); height: 6px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent) 60%, transparent); transform-origin: 0 50%; }
.dt-story { font-size: clamp(15px, 1.15vw, 19px); line-height: 1.7; color: rgba(244, 244, 237, .86); max-width: 34em; white-space: pre-line; overflow-wrap: anywhere; max-height: 24vh; overflow: hidden; }
.dt-story.is-empty { color: var(--dim); font-family: var(--f-pixel-cn); }
.dt-links { display: flex; flex-wrap: wrap; gap: 8px; }
.dt-links a, .dt-links span { font: 700 14px/1 var(--f-race); letter-spacing: .12em; text-transform: uppercase; padding: 10px 14px 9px; border: 1px solid var(--line); color: var(--white); transition: all .3s var(--ease-out); }
.dt-links a:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.dt-links span { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.dt-frame { inset: 0; pointer-events: none; }
.dt-big { position: absolute; right: clamp(24px, 9vw, 200px); top: 50%; height: min(78vh, 62vw); aspect-ratio: 800 / 1111; margin-top: calc(min(78vh, 62vw) / -2 - 14px); pointer-events: auto; }
.dt-big .card { width: 100%; --glowk: 1.4; }
/* the clan's token, or the slot waiting for it */
.dt-token { left: var(--pad); bottom: 112px; width: min(440px, 38vw); z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 14px; padding: 14px 16px; background: rgba(7, 8, 6, .72); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); backdrop-filter: blur(6px); }
.dt-token.is-empty { border-style: dashed; border-color: var(--line); }
.dt-token:empty { display: none; }
.tk-logo { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #f4ff8a 0 18%, #d2ff00 19% 55%, #86a800 56% 100%); box-shadow: inset 0 0 0 3px #a8cc00, inset 0 0 0 5px #5a7200; }
.is-empty .tk-logo { background: #171913; box-shadow: inset 0 0 0 2px #3a3d35; }
.tk-logo b { font: 400 16px/1 var(--f-pixel); color: #2c3800; }
.is-empty .tk-logo b { color: #5c6054; }
.tk-logo img { width: 100%; height: 100%; object-fit: cover; }
.tk-main { display: grid; gap: 7px; min-width: 0; }
.tk-main span { font: 400 13px/1 var(--f-pixel-cn); color: var(--dim); }
.tk-main b { font: 400 15px/1.1 var(--f-pixel), var(--f-pixel-cn); color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-empty .tk-main b { font-family: var(--f-pixel-cn); font-size: 17px; color: var(--dim); }
.tk-rank { font: 400 12px/1 var(--f-pixel-cn); padding: 6px 8px 5px; color: #000; background: var(--accent); white-space: nowrap; }
.tk-note { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: rgba(244, 244, 237, .5); }
.tk-facts { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.tk-facts div { display: grid; gap: 6px; }
.tk-facts dt { font: 400 12px/1 var(--f-pixel-cn); color: var(--dim); }
.tk-facts dd { margin: 0; font: 400 10px/1.2 var(--f-pixel); color: var(--white); white-space: nowrap; }
.tk-facts dd small { font: 500 12px/1 var(--f-race); color: var(--dim); margin-left: 5px; }
.tk-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.tk-actions a { flex: 1; text-align: center; font: 700 13px/1 var(--f-race); letter-spacing: .12em; padding: 9px 10px 8px; border: 1px solid var(--line); color: var(--white); transition: all .25s var(--ease-out); }
.tk-actions a:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.dt-links .tk-chip { display: none; }
.dt-rail { left: 50%; bottom: 76px; width: min(620px, 70vw); margin-left: calc(min(620px, 70vw) / -2); z-index: 3; }
.dt-peek { --x: 0px; position: absolute; left: 0; bottom: calc(100% + 10px); display: grid; justify-items: center; gap: 8px; pointer-events: none; opacity: 0; transform: translate(calc(var(--x) - 50%), 8px) scale(.94); transform-origin: 50% 100%; transition: opacity .2s, transform .35s var(--ease-out); }
.dt-peek.on { opacity: 1; transform: translate(calc(var(--x) - 50%)) scale(1); }
.dt-peek img { width: 76px; height: 76px; object-fit: cover; box-shadow: 0 18px 36px rgba(0, 0, 0, .55), 0 0 0 2px var(--accent); }
.dt-peek span { padding: 7px 10px 6px; font: 700 14px/1 var(--f-race); letter-spacing: .06em; white-space: nowrap; color: #000; background: var(--accent); }
.dt-ctl { left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; z-index: 3; }
.dt-ctl button, .dt-close { white-space: nowrap; height: 40px; min-width: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 400 14px/1 var(--f-pixel-cn); color: var(--white); border: 1px solid var(--line); background: rgba(7, 8, 6, .5); transition: all .3s var(--ease-out); }
.dt-ctl button:hover, .dt-close:hover { border-color: var(--accent); color: var(--accent); }
.dt-auto i { width: 8px; height: 8px; background: var(--dim); }
.dt-auto[aria-pressed="true"] { color: #000; background: var(--accent); border-color: var(--accent); }
.dt-auto[aria-pressed="true"] i { background: #000; animation: blink .8s steps(1) infinite; }
.dt-close { right: var(--pad); top: 22px; font-size: 22px; z-index: 6; }

/* ───────── small screens ───────── */
@media (max-width: 900px) {
  /* tabs move to a bottom bar, like the app in the video */
  .tabs { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 55; justify-content: space-between; border-radius: 0; }
  .tab { flex: 1; flex-direction: column; gap: 6px; padding: 9px 2px 8px; font-size: 12px; }
  body.detail-on .tabs { opacity: 0; pointer-events: none; }
  .foot { padding-bottom: 110px; }
  .trio, .entry, .calc, .cheat { grid-template-columns: minmax(0, 1fr); }
  .cheat { grid-template-columns: 1fr 1fr; }
  .teaser { grid-template-columns: 1fr; }
  .teaser-stats { grid-template-columns: 1fr 1fr; }
  .calc-podium li { grid-template-columns: 26px 40px 1fr auto auto; }
  .dir-row { grid-template-columns: auto 1fr; }
  .dir-no { display: none; }
  .dir-faces { grid-column: 1 / -1; justify-content: flex-start; padding-left: 9px; }
  .dir-go { grid-column: 1 / -1; }
  .live-rounds { grid-column: auto; }
  .faq p { padding-right: 10px; }
  .hero-stats { grid-template-columns: repeat(2, auto); }
  .mech-pin { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; row-gap: 10px; padding-top: 70px; }
  .mech-copy { height: 210px; }
  .mech-step { gap: 10px; }
  .mech-step ul { display: none; }
  .mech-stage { width: min(100%, calc((100vh - 420px) * 10 / 7)); }
  .fan { font-size: 7px; height: 260px; }
  .dt-head { width: auto; right: var(--pad); top: 70px; }
  .dt-name { font-size: 40px; }
  .dt-big { right: auto; left: 50%; margin-left: calc(38vh * .72 / -2); top: auto; bottom: 120px; height: 38vh; margin-top: 0; }
  .dt-story { max-height: 16vh; font-size: 14px; }
  .dt-token { display: none; }
  .dt-links .tk-chip { display: inline-block; }
  .dt-no { font-size: 46vw; opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .pipe-flow, .fire::before, .fire::after, .hero-scroll i { animation: none; }
}