:root {
  --ink: #07101c;
  --ink-2: #0c1a2b;
  --panel: #10233a;
  --panel-2: #172d47;
  --paper: #f7f4ea;
  --white: #ffffff;
  --red: #ef3340;
  --red-dark: #ad1828;
  --blue: #087ac1;
  --blue-bright: #39b8ff;
  --green: #65d493;
  --yellow: #ffd244;
  --gray: #94a3b8;
  --line: rgba(255,255,255,.14);
  --shadow: 0 30px 80px rgba(0,0,0,.35);
  --radius: 24px;
  --rail: 78px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--paper);
  background:
    radial-gradient(circle at 70% 5%, rgba(8,122,193,.2), transparent 32%),
    radial-gradient(circle at 10% 35%, rgba(101,212,147,.08), transparent 28%),
    var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  cursor: url("assets/cursor-default.png") 8 8, auto;
}
body.modal-open { overflow: hidden; }
a, button, [role="button"], .hero-card-wrap { cursor: url("assets/cursor-click.png") 24 8, pointer; }
button, input, a { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { color: inherit; }
::selection { color: var(--ink); background: var(--green); }

.noise {
  position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.scanlines {
  position: fixed; inset: 0; z-index: 199; pointer-events: none; opacity: .04;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, #fff 4px);
}
.cursor-aura {
  width: 34px; height: 34px; border: 1px solid rgba(101,212,147,.65); border-radius: 50%;
  position: fixed; left: 0; top: 0; z-index: 220; pointer-events: none;
  transform: translate(-50%,-50%); transition: width .18s, height .18s, background .18s, border .18s;
  mix-blend-mode: screen;
}
.cursor-aura.hot { width: 58px; height: 58px; background: rgba(101,212,147,.12); border-color: var(--green); }

.boot-screen {
  position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: var(--ink);
  transition: opacity .5s ease, visibility .5s ease;
}
.boot-screen.done { opacity: 0; visibility: hidden; }
.boot-device { width: min(560px, 84vw); border: 2px solid var(--red); background: #0c1726; box-shadow: 16px 16px 0 rgba(239,51,64,.18); }
.boot-leds { display: flex; gap: 7px; padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,.16); }
.boot-leds i { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 14px var(--red); }
.boot-leds i:nth-child(2) { background: var(--yellow); box-shadow: 0 0 14px var(--yellow); }
.boot-leds i:nth-child(3) { background: var(--green); box-shadow: 0 0 14px var(--green); }
.boot-copy { padding: 28px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.boot-copy span { color: var(--green); font-size: 12px; }
.boot-copy strong { display: block; margin: 10px 0 22px; font-size: clamp(18px,4vw,30px); letter-spacing: -.04em; }
.boot-bar { height: 10px; border: 1px solid rgba(255,255,255,.25); padding: 2px; }
.boot-bar b { display: block; height: 100%; width: 0; background: var(--red); animation: bootload 1.25s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes bootload { to { width: 100%; } }

.ambient-particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--green); opacity: .45; animation: particleFloat linear infinite; }
@keyframes particleFloat { from { transform: translateY(110vh) scale(.5); } to { transform: translateY(-10vh) scale(1.6); } }

.side-rail {
  position: fixed; z-index: 150; inset: 0 auto 0 0; width: var(--rail); border-right: 1px solid rgba(255,255,255,.13);
  background: rgba(5,13,23,.84); backdrop-filter: blur(14px); display: flex; flex-direction: column; align-items: center;
}
.rail-brand { width: 100%; height: 88px; display: grid; place-items: center; border-bottom: 1px solid var(--line); position: relative; }
.rail-brand em { position: absolute; right: 7px; bottom: 7px; font: 700 9px/1 ui-monospace, monospace; color: var(--yellow); font-style: normal; }
.mini-ball { width: 32px; height: 32px; border: 3px solid var(--paper); border-radius: 50%; display: inline-block; position: relative; background: linear-gradient(#f8f7f2 0 43%, #253243 43% 57%, var(--green) 57%); box-shadow: 0 0 22px rgba(101,212,147,.2); }
.mini-ball::after { content:""; position:absolute; width:8px; height:8px; border:3px solid #253243; border-radius:50%; background:#fff; left:50%; top:50%; transform:translate(-50%,-50%); }
.side-rail nav { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; }
.rail-link { height: 76px; display: grid; place-items: center; position: relative; color: #718096; border-left: 3px solid transparent; transition: .25s ease; }
.rail-link span { font: 800 12px/1 ui-monospace, monospace; }
.rail-link b { position: absolute; left: 62px; padding: 8px 12px; background: var(--paper); color: var(--ink); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: 0; transform: translateX(-8px); pointer-events: none; transition: .2s; white-space: nowrap; }
.rail-link:hover b { opacity: 1; transform: none; }
.rail-link:hover, .rail-link.active { color: var(--green); border-color: var(--green); background: rgba(101,212,147,.07); }
.rail-signal { height: 76px; display: grid; place-items: center; gap: 5px; font: 700 9px/1 ui-monospace,monospace; color: var(--green); }
.rail-signal i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(101,212,147,.5); animation: pulseSignal 1.5s infinite; }
@keyframes pulseSignal { 70% { box-shadow: 0 0 0 10px rgba(101,212,147,0); } }


main, footer { margin-left: var(--rail); }
.section-shell { padding: 110px clamp(24px,5vw,84px); position: relative; }
.section-heading { max-width: 780px; margin-bottom: 46px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-index { color: var(--green); font: 800 12px/1 ui-monospace,monospace; letter-spacing: .14em; }
.section-heading h2 { margin: 12px 0 14px; font: 900 clamp(46px,7vw,94px)/.88 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; text-transform: uppercase; letter-spacing: -.035em; }
.section-heading h2 em { color: var(--red); font-style: normal; -webkit-text-stroke: 1px rgba(255,255,255,.3); text-shadow: 5px 5px 0 rgba(8,122,193,.55); }
.section-heading p { margin: 0; color: #aeb9c8; font-size: clamp(15px,1.5vw,19px); max-width: 650px; }
.section-heading.centered p { margin-inline: auto; }

.hero { min-height: 1100px; padding: 72px clamp(20px,5vw,84px) 90px; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content:""; position:absolute; width: min(1100px,90vw); aspect-ratio: 1; border-radius:50%; background: radial-gradient(circle, rgba(57,184,255,.19), rgba(12,26,43,.08) 43%, transparent 66%); top: 92px; left:50%; transform:translateX(-50%); filter: blur(2px); z-index:-3; }
.hero-grid { position:absolute; inset:34px 0 0; z-index:-5; opacity:.23; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(circle at 50% 33%, black, transparent 72%); }
.hero-grid::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 65%,var(--ink)); }
.hero-orbit { position:absolute; border:1px dashed rgba(101,212,147,.28); border-radius:50%; left:50%; top:390px; transform:translate(-50%,-50%); z-index:-2; }
.orbit-one { width:min(760px,80vw); aspect-ratio:1; animation:spin 28s linear infinite; }
.orbit-two { width:min(980px,94vw); aspect-ratio:1; animation:spinReverse 43s linear infinite; border-color:rgba(239,51,64,.24); }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes spinReverse { to { transform:translate(-50%,-50%) rotate(-360deg); } }
.hero-flash { position:absolute; top:390px; left:50%; width:2px; height:2px; box-shadow:0 0 180px 80px rgba(57,184,255,.25),0 0 340px 180px rgba(101,212,147,.08); }
.hero-topline { width:100%; display:flex; justify-content:space-between; align-items:center; margin-top:20px; }
.status-pill,.chain-pill { border:1px solid var(--line); background:rgba(8,19,32,.62); backdrop-filter:blur(12px); min-height:42px; padding:10px 14px; display:flex; align-items:center; gap:10px; font:700 10px/1 ui-monospace,monospace; letter-spacing:.1em; }
.status-pill i { width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green); }
.chain-pill { flex-direction:column;align-items:flex-end;gap:2px; }
.chain-pill span { color:var(--blue-bright); } .chain-pill b{font-size:8px;color:#728197;}
.hero-title { text-align:center; margin-top:35px; position:relative; z-index:3; }
.eyebrow { display:block; color:var(--yellow); font:900 12px/1 ui-monospace,monospace; letter-spacing:.22em; margin-bottom:8px; }
.title-lockup { display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap; }
.title-kicker { font:900 clamp(38px,6vw,80px)/1 Impact,sans-serif;color:var(--paper);transform:rotate(-4deg); }
.name-logo { width:min(610px,62vw); filter:drop-shadow(7px 9px 0 rgba(3,8,14,.7)); }
.token-stamp { border:3px solid var(--red);color:var(--red);padding:7px 10px;font:900 clamp(19px,2.4vw,32px)/1 ui-monospace,monospace;transform:rotate(7deg);box-shadow:4px 4px 0 rgba(239,51,64,.25); }
.hero-stage { position:relative; width:min(1000px,100%); min-height:590px; display:grid;place-items:center; margin-top:-4px; perspective:1200px; }
.card-halo { position:absolute;width:460px;height:460px;border-radius:50%;background:conic-gradient(from 0deg,transparent,var(--blue-bright),transparent,var(--green),transparent,var(--red),transparent);filter:blur(28px);opacity:.18;animation:spin 10s linear infinite; }
.hero-card-wrap { width:min(430px,66vw); aspect-ratio:1; position:relative; z-index:5; transform-style:preserve-3d; transition:transform .18s ease-out; outline:none; }
.hero-card-clip { position:absolute; inset:0; z-index:1; border-radius:22px; overflow:hidden; isolation:isolate; transform:translateZ(0); }
.hero-card { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:22px;box-shadow:0 35px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.35);transition:opacity .35s ease,transform .6s cubic-bezier(.2,.8,.2,1),filter .35s; }
.hero-card-hover { opacity:0;transform:scale(.96) rotateY(-7deg);filter:saturate(1.14); }
.hero-card-wrap:hover .hero-card-idle,.hero-card-wrap:focus .hero-card-idle,.hero-card-wrap.revealed .hero-card-idle { opacity:0;transform:scale(1.04) rotateY(7deg); }
.hero-card-wrap:hover .hero-card-hover,.hero-card-wrap:focus .hero-card-hover,.hero-card-wrap.revealed .hero-card-hover { opacity:1;transform:scale(1) rotateY(0); }
.card-glare { position:absolute;inset:0;border-radius:22px;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.18) 42%,transparent 60%);transform:translateX(-120%);mix-blend-mode:screen; }
.hero-card-wrap:hover .card-glare,.hero-card-wrap.revealed .card-glare { animation:glare .9s ease; }
@keyframes glare { to { transform:translateX(120%); } }
.hover-instruction { position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);white-space:nowrap;font:800 10px/1 ui-monospace,monospace;letter-spacing:.16em;color:var(--green); }
.card-corner { position:absolute;width:26px;height:26px;z-index:6;border-color:var(--green);border-style:solid;pointer-events:none; }
.c1{left:-12px;top:-12px;border-width:2px 0 0 2px}.c2{right:-12px;top:-12px;border-width:2px 2px 0 0}.c3{left:-12px;bottom:-12px;border-width:0 0 2px 2px}.c4{right:-12px;bottom:-12px;border-width:0 2px 2px 0}
.orbit-label { position:absolute;font:800 9px/1 ui-monospace,monospace;letter-spacing:.11em;color:#8da0b5;background:rgba(7,16,28,.78);border:1px solid var(--line);padding:9px 11px;z-index:2; }
.label-a{left:10%;top:14%;}.label-b{right:3%;top:27%;}.label-c{left:4%;bottom:24%;}.label-d{right:8%;bottom:13%;}
.hero-runner { position:absolute;width:160px;filter:drop-shadow(0 15px 12px rgba(0,0,0,.3));z-index:2; }
.runner-one { left:-1%;top:17%;animation:floaty 5s ease-in-out infinite; }
.runner-two { right:0;bottom:5%;animation:floaty 6s ease-in-out -2s infinite; }
@keyframes floaty { 50% { transform:translateY(-18px) rotate(3deg); } }
.hero-actions { width:min(1060px,100%);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;position:relative;z-index:8;margin-top:8px; }
.ca-module { min-height:64px;border:1px solid var(--line);background:rgba(14,31,51,.82);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:9px 10px 9px 16px;box-shadow:8px 8px 0 rgba(8,122,193,.12); }
.ca-module>span { color:var(--green);font:800 9px/1 ui-monospace,monospace;letter-spacing:.12em; }
.ca-module code { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dce7f2;font:700 12px/1 ui-monospace,monospace; }
.copy-button { border:0;background:var(--green);color:var(--ink);height:44px;padding:0 15px;display:flex;align-items:center;gap:8px;font-weight:900;font-size:11px; }
.copy-icon{font-size:18px}.social-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.action-button { min-height:64px;border:1px solid var(--line);background:var(--panel-2);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 14px;position:relative;overflow:hidden;transition:transform .25s,background .25s,border-color .25s; }
.action-button::before { content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-120%);transition:.5s; }
.action-button:hover::before{transform:translateX(120%)}.action-button:hover{transform:translateY(-4px);border-color:var(--green);}
.action-button span{font-size:20px}.action-button b{font-size:10px;letter-spacing:.06em}.action-button i{font-style:normal;color:var(--green)}
.action-primary{background:var(--red);border-color:rgba(255,255,255,.25);box-shadow:6px 6px 0 var(--red-dark)}.action-primary i{color:var(--yellow)}
.scroll-hint { margin-top:54px;display:flex;flex-direction:column;align-items:center;gap:10px;color:#7f91a7;font:700 9px/1 ui-monospace,monospace;letter-spacing:.15em; }
.scroll-hint i { width:1px;height:48px;background:linear-gradient(var(--green),transparent);position:relative; }.scroll-hint i::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--green);left:-2px;top:0;animation:scrollDot 1.8s infinite;}@keyframes scrollDot{to{transform:translateY(43px);opacity:0}}

.signal-strip { margin-left:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0b192a; }
.signal-strip article{min-height:145px;padding:25px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}.signal-strip article:last-child{border-right:0}.signal-strip article::after{content:"";position:absolute;width:80px;height:80px;border:1px solid rgba(101,212,147,.12);border-radius:50%;right:-30px;bottom:-35px}.signal-strip span{font:800 9px/1 ui-monospace,monospace;color:var(--green);letter-spacing:.13em}.signal-strip strong{font:900 clamp(20px,2vw,31px)/1 Impact,sans-serif;margin:9px 0 4px;letter-spacing:.02em}.signal-strip small{color:#718096;font:700 10px/1 ui-monospace,monospace}

.terminal-section{background:linear-gradient(180deg,#0a1626,#07101c);}
.terminal-device { border:2px solid #293d56;background:#0b1829;box-shadow:var(--shadow),12px 12px 0 rgba(239,51,64,.14);position:relative; }
.terminal-device::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.06);pointer-events:none}
.terminal-topbar{height:54px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:0 18px;border-bottom:1px solid #2a3d54;background:#142a44;font:800 10px/1 ui-monospace,monospace;letter-spacing:.09em}.device-lights{display:flex;gap:7px}.device-lights i{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 12px rgba(239,51,64,.5)}.device-lights i:nth-child(2){background:var(--yellow)}.device-lights i:nth-child(3){background:var(--green)}.terminal-id{color:#8fa5bb}.terminal-clock{color:var(--green)}
.stage-selector{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #2a3d54}.stage-tab{border:0;border-right:1px solid #2a3d54;background:#0d1c2f;padding:18px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;text-align:left;transition:.25s}.stage-tab:last-child{border-right:0}.stage-tab span{width:34px;height:34px;border:1px solid #3a5069;display:grid;place-items:center;font:900 11px/1 ui-monospace,monospace}.stage-tab b{font:900 clamp(14px,1.5vw,20px)/1 Impact,sans-serif;letter-spacing:.04em}.stage-tab small{font:800 8px/1 ui-monospace,monospace;color:#64748b}.stage-tab:hover,.stage-tab.active{background:var(--red);color:white}.stage-tab.active span{border-color:#fff}.stage-tab.active small{color:var(--yellow)}
.terminal-main{display:grid;grid-template-columns:minmax(380px,.9fr) minmax(0,1.35fr);min-height:690px}.specimen-screen{position:relative;overflow:hidden;border-right:1px solid #2a3d54;background:radial-gradient(circle at 50% 42%,rgba(57,184,255,.25),transparent 42%),#081524;display:grid;place-items:center;padding:72px 45px 100px}.screen-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(57,184,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(57,184,255,.09) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle,black,transparent 78%)}.screen-scan{position:absolute;left:0;right:0;height:2px;background:var(--green);box-shadow:0 0 18px var(--green);animation:screenScan 4s linear infinite;opacity:.7}@keyframes screenScan{from{top:12%}to{top:86%}}
.specimen-screen>img{width:min(430px,92%);position:relative;z-index:3;border-radius:18px;box-shadow:0 25px 65px rgba(0,0,0,.45);transition:.35s cubic-bezier(.2,.8,.2,1)}.terminal-device.switching .specimen-screen>img{transform:scale(.88) rotateY(12deg);opacity:.2;filter:blur(5px)}
.screen-readout{position:absolute;top:20px;z-index:4;display:flex;flex-direction:column;gap:5px;font:800 9px/1 ui-monospace,monospace;color:#70859d}.screen-readout b{color:var(--green);font-size:13px}.screen-readout.left{left:22px}.screen-readout.right{right:22px;text-align:right}.scan-brackets i{position:absolute;width:34px;height:34px;border-style:solid;border-color:var(--green);z-index:4}.scan-brackets i:nth-child(1){left:25px;top:72px;border-width:2px 0 0 2px}.scan-brackets i:nth-child(2){right:25px;top:72px;border-width:2px 2px 0 0}.scan-brackets i:nth-child(3){left:25px;bottom:110px;border-width:0 0 2px 2px}.scan-brackets i:nth-child(4){right:25px;bottom:110px;border-width:0 2px 2px 0}.specimen-caption{position:absolute;left:25px;right:25px;bottom:24px;z-index:4;border-top:1px solid var(--line);padding-top:16px}.specimen-caption img{max-width:250px;max-height:58px;object-fit:contain;object-position:left}.specimen-caption span{display:block;margin-top:6px;color:#7e91a8;font:800 9px/1 ui-monospace,monospace;letter-spacing:.1em}
.data-screen{padding:28px;background:linear-gradient(145deg,#10233a,#0a1727);}.data-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:20px}.data-tabs span{font:800 9px/1 ui-monospace,monospace;color:#64748b;letter-spacing:.12em}.data-tabs .active{color:var(--green)}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.profile-grid>div{border:1px solid var(--line);padding:13px 14px;background:rgba(255,255,255,.025);min-height:63px}.profile-grid span,.terminal-entry>span,.move-card>span,.ability-card>span,.terminal-log>span{font:800 8px/1 ui-monospace,monospace;color:var(--green);letter-spacing:.13em}.profile-grid b{display:block;margin-top:7px;font-size:12px;color:#d8e4ee}.terminal-entry{border-left:3px solid var(--red);background:rgba(239,51,64,.07);padding:16px 17px;margin-bottom:20px}.terminal-entry p{margin:9px 0 0;color:#aebdca;font-size:13px;line-height:1.6}.stats-console{display:grid;gap:10px}.stat-row{display:grid;grid-template-columns:92px 1fr 34px;gap:11px;align-items:center}.stat-row span{font:800 9px/1 ui-monospace,monospace;color:#8fa1b4}.stat-track{height:13px;background:#06111e;border:1px solid rgba(255,255,255,.11);padding:2px;position:relative;overflow:hidden}.stat-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--green));box-shadow:0 0 13px rgba(101,212,147,.45);transition:width .8s cubic-bezier(.2,.8,.2,1)}.stat-row b{font:800 9px/1 ui-monospace,monospace;color:var(--yellow);text-align:right}
.terminal-bottom{display:grid;grid-template-columns:1fr 1fr 1.15fr;border-top:1px solid #2a3d54}.move-card,.ability-card,.terminal-log{padding:20px;border-right:1px solid #2a3d54;min-height:168px}.terminal-log{border-right:0}.move-card strong,.ability-card strong{display:block;margin:10px 0 7px;font:900 20px/1.05 Impact,sans-serif;letter-spacing:.035em}.move-card p,.ability-card p{margin:0;color:#8fa1b4;font-size:12px;line-height:1.5}.log-lines{margin-top:9px;font:700 10px/1.6 ui-monospace,monospace;color:#7f92a7}.log-line{opacity:0;animation:logIn .35s forwards}.log-line b{color:var(--green)}@keyframes logIn{to{opacity:1}}

.lore-section{background:radial-gradient(circle at 50% 42%,rgba(8,122,193,.14),transparent 38%),#0b192a;overflow:hidden}.evolution-path{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:22px;max-width:1400px;margin:auto}.evolution-node{min-height:490px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));padding:22px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;transition:.35s}.evolution-node::before{content:"";position:absolute;inset:auto -30% 55%;height:1px;background:var(--green);box-shadow:0 0 30px 12px rgba(101,212,147,.12)}.evolution-node:hover{transform:translateY(-10px);border-color:var(--green);box-shadow:0 25px 60px rgba(0,0,0,.3)}.evolution-node img{height:230px;width:100%;object-fit:contain;filter:drop-shadow(0 20px 18px rgba(0,0,0,.38));position:relative;z-index:2;animation:floaty 5s ease-in-out infinite}.evolution-node:nth-of-type(3) img{animation-delay:-1.5s}.moon-node img{animation-delay:-3s}.node-number{position:absolute;top:15px;right:17px;font:900 44px/1 Impact,sans-serif;color:rgba(255,255,255,.08)}.evolution-node h3{font:900 38px/1 Impact,sans-serif;margin:10px 0 12px;letter-spacing:.02em}.evolution-node p{color:#93a4b7;font-size:13px;line-height:1.65;margin:0}.evolution-node>span{margin-top:auto;padding-top:24px;color:var(--green);font:800 9px/1 ui-monospace,monospace;letter-spacing:.14em}.evo-arrow{width:68px;text-align:center;font:800 8px/1 ui-monospace,monospace;color:var(--yellow);letter-spacing:.08em}.evo-arrow i{display:block;height:1px;background:var(--red);position:relative;margin-bottom:14px}.evo-arrow i::after{content:"";position:absolute;right:0;top:-4px;border-left:8px solid var(--red);border-top:4px solid transparent;border-bottom:4px solid transparent}
.lore-quote{max-width:1100px;margin:80px auto 0;border:1px solid var(--line);background:#07111e;padding:38px;display:grid;grid-template-columns:200px 1fr auto;align-items:center;gap:35px;position:relative}.lore-quote::before{content:"DEV 0069";position:absolute;top:-10px;left:28px;background:var(--red);padding:5px 9px;font:800 8px/1 ui-monospace,monospace;letter-spacing:.1em}.lore-quote img{width:180px}.lore-quote blockquote{margin:0;font:800 clamp(20px,2.4vw,32px)/1.25 Georgia,serif;color:#e5edf4}.quote-signal{display:flex;align-items:end;gap:4px;height:55px}.quote-signal span{width:6px;background:var(--green);animation:signalBars 1s ease-in-out infinite}.quote-signal span:nth-child(1){height:20%}.quote-signal span:nth-child(2){height:70%;animation-delay:-.2s}.quote-signal span:nth-child(3){height:45%;animation-delay:-.4s}.quote-signal span:nth-child(4){height:100%;animation-delay:-.6s}.quote-signal span:nth-child(5){height:35%;animation-delay:-.8s}@keyframes signalBars{50%{height:15%}}

.chart-section{background:#07101c}.chart-terminal{border:2px solid #263b54;background:#0c1a2b;box-shadow:var(--shadow),12px 12px 0 rgba(8,122,193,.16)}.chart-header{height:62px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font:800 10px/1 ui-monospace,monospace;letter-spacing:.1em}.chart-header>div{display:flex;align-items:center;gap:10px}.chart-header i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 13px var(--green)}.chart-actions a{padding:9px 12px;background:var(--red);color:#fff}.live-dot{color:var(--green)}.chart-body{height:min(600px,62vw);min-height:380px;position:relative;overflow:hidden;background:linear-gradient(rgba(57,184,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(57,184,255,.035) 1px,transparent 1px),#07131f;background-size:42px 42px}.chart-body iframe,.chart-body canvas{position:absolute;inset:0;width:100%;height:100%;border:0}.chart-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;background:rgba(5,13,23,.82);border:1px solid var(--line);backdrop-filter:blur(10px);padding:22px 28px;pointer-events:none}.chart-overlay span{color:var(--green);font:800 9px/1 ui-monospace,monospace;letter-spacing:.13em}.chart-overlay strong{display:block;margin:8px 0;font:900 28px/1 Impact,sans-serif}.chart-overlay p{margin:0;color:#8596a9;font:700 11px/1.4 ui-monospace,monospace}.chart-overlay code{color:var(--yellow)}.chart-y-axis{position:absolute;top:18px;bottom:18px;right:12px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;color:#52677e;font:700 8px/1 ui-monospace,monospace;pointer-events:none}.chart-footer{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.chart-footer span{padding:15px;border-right:1px solid var(--line);font:700 9px/1 ui-monospace,monospace;color:#8294a8;text-align:center}.chart-footer span:last-child{border-right:0}

.game-section{background:linear-gradient(180deg,#0b192a,#07101c)}.game-console{max-width:1250px;margin:auto;border:2px solid #29415d;background:#0b1828;box-shadow:var(--shadow),12px 12px 0 rgba(101,212,147,.12)}.game-hud{min-height:70px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:12px 18px}.game-hud>div:first-child{display:flex;align-items:baseline;gap:12px}.game-hud span{color:var(--green);font:800 9px/1 ui-monospace,monospace;letter-spacing:.13em}.game-hud strong{font:900 23px/1 Impact,sans-serif}.catch-meter{height:16px;background:#06101d;border:1px solid var(--line);padding:3px}.catch-meter i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--green) 0 25px,#45a872 25px 29px);box-shadow:0 0 16px rgba(101,212,147,.35);transition:width .35s}.game-hud button{border:1px solid var(--line);background:transparent;padding:11px 13px;font:800 9px/1 ui-monospace,monospace;letter-spacing:.1em}.game-hud button:hover{background:var(--red);border-color:var(--red)}
.game-arena{height:min(610px,62vw);min-height:430px;position:relative;overflow:hidden;background:radial-gradient(circle at 74% 20%,rgba(255,210,68,.12),transparent 13%),linear-gradient(#0d2946,#102c3d 58%,#13271f 59%,#07120e);touch-action:manipulation}.arena-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(101,212,147,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(101,212,147,.06) 1px,transparent 1px);background-size:50px 50px;mask-image:linear-gradient(black,transparent 72%)}.arena-moon{position:absolute;width:180px;height:180px;border-radius:50%;right:8%;top:10%;background:var(--paper);box-shadow:0 0 80px rgba(255,255,255,.22)}.arena-moon::before{content:"";position:absolute;width:45px;height:45px;border-radius:50%;left:28px;top:30px;background:#d7d5cd;box-shadow:73px 45px 0 8px #dedbd1,28px 95px 0 -4px #d4d1c9}.arena-hills i{position:absolute;bottom:54px;width:60%;height:35%;background:#0b2019;clip-path:polygon(0 100%,13% 55%,25% 80%,42% 26%,58% 77%,75% 38%,100% 100%)}.arena-hills i:nth-child(1){left:-7%;opacity:.55}.arena-hills i:nth-child(2){right:-10%;transform:scale(.8);opacity:.75}.arena-hills i:nth-child(3){left:24%;transform:scale(.55);opacity:.5}.arena-ground{position:absolute;left:0;right:0;bottom:0;height:58px;background:#07110d;border-top:1px solid rgba(101,212,147,.24)}.arena-ground span{position:absolute;left:50%;bottom:10px;width:180px;height:24px;border-radius:50%;background:rgba(0,0,0,.45);transform:translateX(-50%);filter:blur(5px)}.game-message{position:absolute;left:18px;top:18px;background:rgba(7,16,28,.77);border-left:3px solid var(--red);padding:11px 13px;z-index:8;font:800 10px/1 ui-monospace,monospace;letter-spacing:.1em}.game-target{position:absolute;width:clamp(105px,14vw,185px);z-index:6;user-select:none;filter:drop-shadow(0 16px 8px rgba(0,0,0,.38));transition:left .3s cubic-bezier(.2,.8,.2,1),top .3s cubic-bezier(.2,.8,.2,1),transform .2s,opacity .2s}.game-target:hover{transform:scale(1.08)}.game-target.caught{transform:scale(.15) rotate(360deg);opacity:0;filter:brightness(4)}.thrown-ball{position:absolute;width:72px;z-index:9;left:50%;bottom:15px;transform:translate(-50%,0) scale(.7);opacity:0;pointer-events:none}.thrown-ball.throwing{opacity:1;transition:left .38s cubic-bezier(.1,.8,.3,1),top .38s cubic-bezier(.1,.8,.3,1),transform .38s;transform:translate(-50%,-50%) scale(.35) rotate(540deg)}.game-reticle{position:absolute;width:54px;height:54px;border:2px solid rgba(255,255,255,.65);border-radius:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;opacity:0}.game-arena:hover .game-reticle{opacity:1}.game-reticle::before,.game-reticle::after{content:"";position:absolute;background:rgba(255,255,255,.65)}.game-reticle::before{width:72px;height:1px;left:-11px;top:25px}.game-reticle::after{height:72px;width:1px;left:25px;top:-11px}.game-reticle i{position:absolute;width:9px;height:9px;border-radius:50%;border:1px solid var(--red);left:50%;top:50%;transform:translate(-50%,-50%)}.game-instructions{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.game-instructions span{padding:16px;border-right:1px solid var(--line);text-align:center;color:#7d90a5;font:800 9px/1 ui-monospace,monospace;letter-spacing:.1em}.game-instructions span:last-child{border-right:0}

.final-section{padding-top:40px;background:#07101c}.final-card{min-height:460px;max-width:1300px;margin:auto;border:1px solid var(--line);background:radial-gradient(circle at 22% 50%,rgba(101,212,147,.15),transparent 28%),linear-gradient(120deg,#10243a,#0b1725);display:grid;grid-template-columns:.8fr 1.25fr;align-items:center;overflow:hidden;position:relative}.final-card::after{content:"$RMON";position:absolute;right:-20px;bottom:-42px;font:900 150px/1 Impact,sans-serif;color:rgba(255,255,255,.025)}.final-card>img{width:100%;height:430px;object-fit:contain;filter:drop-shadow(0 25px 15px rgba(0,0,0,.45));animation:floaty 6s ease-in-out infinite}.final-card>div{padding:45px;position:relative;z-index:2}.final-card>div>span{color:var(--green);font:800 10px/1 ui-monospace,monospace;letter-spacing:.14em}.final-card h2{margin:12px 0 16px;font:900 clamp(48px,6vw,86px)/.9 Impact,sans-serif;text-transform:uppercase}.final-card h2 em{color:var(--red);font-style:normal;text-shadow:5px 5px 0 rgba(8,122,193,.55)}.final-card p{color:#9cadbe;max-width:630px;font-size:16px;line-height:1.6}.final-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}.final-actions .action-button{min-width:220px}
footer{min-height:110px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:25px;padding:28px clamp(24px,5vw,84px);background:#050d17;color:#6f8298}footer>div{display:flex;align-items:center;gap:11px}footer .mini-ball{width:25px;height:25px;border-width:2px}footer .mini-ball::after{width:6px;height:6px;border-width:2px}footer b{color:#dce6ef;font-size:12px}footer p{font:700 9px/1.5 ui-monospace,monospace;letter-spacing:.1em;text-align:center}footer a{font:800 10px/1 ui-monospace,monospace;padding:8px}footer a:hover{color:var(--green)}

.unlocked-ball{position:fixed;right:24px;bottom:24px;z-index:180;border:1px solid rgba(255,255,255,.22);background:rgba(7,16,28,.88);backdrop-filter:blur(12px);padding:8px 10px 9px;box-shadow:0 15px 55px rgba(0,0,0,.45);animation:unlockIn .7s cubic-bezier(.2,1.4,.4,1) both}.unlocked-ball span{display:block;color:var(--yellow);font:800 8px/1 ui-monospace,monospace;letter-spacing:.11em}.unlocked-ball img{width:82px;animation:ballBounce 1.1s ease-in-out infinite}@keyframes unlockIn{from{transform:translateY(120px) rotate(20deg);opacity:0}}@keyframes ballBounce{50%{transform:translateY(-8px) rotate(10deg)}}
.encounter-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px}.encounter-backdrop{position:absolute;inset:0;background:rgba(2,7,12,.88);backdrop-filter:blur(10px)}.encounter-content{width:min(720px,94vw);min-height:650px;background:radial-gradient(circle at 50% 37%,rgba(57,184,255,.38),transparent 34%),#0c1b2d;border:2px solid var(--green);box-shadow:0 0 100px rgba(101,212,147,.22);position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:35px;overflow:hidden}.modal-close{position:absolute;right:15px;top:15px;width:42px;height:42px;border:1px solid var(--line);background:#07101c;font-size:24px;z-index:5}.encounter-rays{position:absolute;width:680px;height:680px;top:-150px;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.1) 0 7deg,transparent 7deg 19deg);border-radius:50%;animation:spin 18s linear infinite}.open-ball{position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);width:220px;animation:ballOpen 1.1s .3s forwards}.open-ball img{width:100%}.open-ball i{position:absolute;width:4px;height:4px;left:50%;top:50%;box-shadow:0 0 90px 70px white;opacity:0;animation:flashOpen .5s .85s forwards}@keyframes ballOpen{0%,35%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-50%,-50%) rotate(-12deg)}65%{transform:translate(-50%,-50%) rotate(12deg)}100%{transform:translate(-50%,-50%) scale(.4);opacity:0}}@keyframes flashOpen{50%{opacity:1}to{opacity:0}}
.encounter-character{position:absolute;width:340px;top:65px;filter:drop-shadow(0 28px 18px rgba(0,0,0,.5));opacity:0;transform:scale(.2);animation:characterPop .7s 1.1s cubic-bezier(.2,1.5,.5,1) forwards}@keyframes characterPop{to{opacity:1;transform:scale(1)}}.encounter-content>span{position:relative;color:var(--green);font:800 9px/1 ui-monospace,monospace;letter-spacing:.15em}.encounter-content h2{position:relative;margin:10px 0 8px;font:900 clamp(38px,6vw,64px)/.92 Impact,sans-serif;text-transform:uppercase}.encounter-content p{position:relative;color:#9cadbd;margin:0 0 24px}.encounter-content .action-button{position:relative;min-width:280px}.encounter-modal[hidden],.unlocked-ball[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:28px;z-index:400;transform:translate(-50%,100px);opacity:0;background:var(--green);color:var(--ink);padding:13px 19px;font:900 10px/1 ui-monospace,monospace;letter-spacing:.12em;box-shadow:7px 7px 0 rgba(101,212,147,.22);transition:.3s}.toast.show{transform:translate(-50%,0);opacity:1}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:none}.reveal:nth-child(2){transition-delay:.08s}.reveal:nth-child(3){transition-delay:.14s}
.glitch{animation:glitch .28s steps(2,end)}@keyframes glitch{0%{filter:hue-rotate(0);transform:translateX(0)}30%{filter:hue-rotate(120deg);transform:translateX(-5px)}60%{filter:hue-rotate(-90deg);transform:translateX(5px)}100%{filter:none;transform:none}}

@media (max-width: 1100px){
  .hero-actions{grid-template-columns:1fr}.terminal-main{grid-template-columns:1fr}.specimen-screen{border-right:0;border-bottom:1px solid #2a3d54;min-height:650px}.terminal-bottom{grid-template-columns:1fr 1fr}.terminal-log{grid-column:1/-1;border-top:1px solid #2a3d54}.evolution-path{grid-template-columns:1fr;max-width:620px}.evo-arrow{height:75px;width:1px;margin:auto}.evo-arrow i{width:1px;height:55px;margin:0 auto 8px}.evo-arrow i::after{right:-4px;top:auto;bottom:0;border-top:8px solid var(--red);border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:0}.evolution-node{width:100%}.lore-quote{grid-template-columns:160px 1fr}.quote-signal{display:none}.final-card{grid-template-columns:1fr}.final-card>img{height:320px;margin-top:25px}.final-card>div{padding-top:0}.signal-strip{grid-template-columns:repeat(3,1fr)}.signal-strip article:nth-child(3){border-right:0}.signal-strip article:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width: 760px){
  :root{--rail:0px}.side-rail{left:10px;right:10px;top:auto;bottom:10px;width:auto;height:60px;flex-direction:row;border:1px solid var(--line);background:rgba(5,13,23,.93);border-radius:16px;padding:0 8px}.rail-brand,.rail-signal{display:none}.side-rail nav{flex-direction:row}.rail-link{height:58px;flex:1;border-left:0;border-bottom:3px solid transparent}.rail-link b{display:none}.section-shell{padding:82px 18px}.hero{padding:64px 16px 85px;min-height:980px}.hero-topline{gap:8px}.status-pill{max-width:68%;font-size:8px}.chain-pill{font-size:8px}.hero-title{margin-top:28px}.title-lockup{gap:8px}.title-kicker{font-size:40px}.name-logo{width:77vw}.token-stamp{font-size:18px}.hero-stage{min-height:470px}.hero-card-wrap{width:min(360px,75vw)}.orbit-label{display:none}.hero-runner{width:105px}.runner-one{top:15%;left:-5%}.runner-two{bottom:7%;right:-6%}.hero-actions{margin-top:0}.ca-module{grid-template-columns:1fr auto}.ca-module>span{grid-column:1/-1}.social-actions{grid-template-columns:1fr}.social-actions .action-button{min-height:56px}.scroll-hint{margin-top:35px}.signal-strip{grid-template-columns:1fr 1fr}.signal-strip article{min-height:110px;padding:19px}.signal-strip article:nth-child(2n){border-right:0}.signal-strip article:nth-child(3){border-right:1px solid var(--line)}.signal-strip article:nth-child(n+3){border-top:1px solid var(--line)}.stage-selector{grid-template-columns:1fr}.stage-tab{border-right:0;border-bottom:1px solid #2a3d54;padding:12px}.terminal-main{min-height:0}.specimen-screen{min-height:520px;padding:65px 20px 95px}.data-screen{padding:20px}.profile-grid{grid-template-columns:1fr}.terminal-bottom{grid-template-columns:1fr}.move-card,.ability-card,.terminal-log{border-right:0;border-bottom:1px solid #2a3d54;grid-column:auto}.stat-row{grid-template-columns:75px 1fr 30px}.lore-quote{grid-template-columns:1fr;text-align:center;padding:28px}.lore-quote img{margin:auto}.chart-header{height:auto;min-height:72px;align-items:flex-start;flex-direction:column;padding:15px}.chart-actions{width:100%;justify-content:space-between}.chart-body{height:470px}.chart-footer{grid-template-columns:1fr 1fr}.chart-footer span:nth-child(2){border-right:0}.chart-footer span:nth-child(n+3){border-top:1px solid var(--line)}.game-hud{grid-template-columns:1fr auto}.catch-meter{grid-column:1/-1;grid-row:2}.game-arena{height:530px}.game-reticle{display:none}.game-instructions{grid-template-columns:1fr 1fr}.game-instructions span:nth-child(2){border-right:0}.game-instructions span:nth-child(n+3){border-top:1px solid var(--line)}.final-card>div{padding:30px 22px 45px}.final-card h2{font-size:54px}.final-actions{flex-direction:column}.final-actions .action-button{width:100%}footer{margin-bottom:72px;flex-direction:column;text-align:center;padding:28px 20px}.unlocked-ball{right:14px;bottom:82px}.cursor-aura{display:none}.encounter-content{min-height:600px;padding:25px}.encounter-character{width:290px;top:80px}.encounter-content h2{font-size:43px}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.cursor-aura{display:none}}
.profile-grid .profile-wide{grid-column:1/-1}

/* =========================================================
   RED / WHITE POKEMEME REDESIGN
   ========================================================= */
:root {
  --ink: #22131a;
  --ink-2: #32171f;
  --panel: #fffaf6;
  --panel-2: #fff3ef;
  --paper: #fffdf9;
  --white: #ffffff;
  --red: #d61d38;
  --red-dark: #991124;
  --blue: #0a58a2;
  --blue-bright: #3ea9ee;
  --green: #53c98a;
  --yellow: #ffd43b;
  --gray: #786d72;
  --line: rgba(117, 12, 32, .18);
  --shadow: 0 28px 70px rgba(107, 13, 31, .18);
  --rail: 142px;
}

html { background: #fff8f4; }
body {
  color: #2b1720;
  background:
    radial-gradient(circle at 12% 14%, rgba(214,29,56,.13), transparent 26%),
    radial-gradient(circle at 88% 38%, rgba(214,29,56,.10), transparent 24%),
    linear-gradient(135deg, #fffdf9 0 48%, #fff2ed 48% 52%, #fffdf9 52% 100%);
  background-size: auto, auto, 56px 56px;
  font-family: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  font-weight: 500;
}
button, input, a { font-family: inherit; }
::selection { color: #fff; background: var(--red); }
.noise { opacity: .028; mix-blend-mode: multiply; }
.scanlines { opacity: .018; background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(160,20,44,.42) 5px); }
.particle { background: var(--red); }
.cursor-aura { border-color: rgba(214,29,56,.68); mix-blend-mode: multiply; }
.cursor-aura.hot { background: rgba(214,29,56,.10); border-color: var(--red); }

.boot-screen { background: #d61d38; }
.boot-device { border: 4px solid #fff; background: #fffaf6; color: #28131a; box-shadow: 16px 16px 0 #991124; border-radius: 22px; overflow: hidden; }
.boot-leds { border-bottom-color: rgba(153,17,36,.18); background: #f6e5df; }
.boot-copy { font-family: "Fredoka", "Trebuchet MS", sans-serif; }
.boot-copy span { color: var(--red); font-weight: 700; }
.boot-copy strong { color: #0a58a2; font-weight: 700; text-shadow: 2px 2px 0 rgba(255,212,59,.75); }
.boot-bar { border-color: rgba(153,17,36,.28); }

.side-rail {
  width: var(--rail);
  border-right: 4px solid #fff;
  background:
    linear-gradient(180deg, rgba(153,17,36,.15), transparent 22%),
    var(--red);
  box-shadow: 9px 0 0 rgba(153,17,36,.15);
  backdrop-filter: blur(14px);
}
.rail-brand { height: 102px; border-bottom: 1px solid rgba(255,255,255,.28); }
.rail-brand em { color: var(--yellow); font-family: inherit; font-weight: 700; }
.mini-ball { border-color: #fff; background: linear-gradient(#fff 0 43%, #25141b 43% 57%, var(--red) 57%); box-shadow: 0 0 0 5px rgba(255,255,255,.12), 0 10px 25px rgba(70,0,12,.28); }
.side-rail nav { padding: 14px 0; gap: 5px; }
.rail-link {
  min-height: 76px;
  height: auto;
  padding: 13px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  color: rgba(255,255,255,.72);
  border-left: 5px solid transparent;
  border-radius: 0 18px 18px 0;
}
.rail-link span {
  font: 700 12px/1.05 "Fredoka", "Trebuchet MS", sans-serif;
  text-align: center;
  letter-spacing: .035em;
  overflow-wrap: anywhere;
}
.rail-link b {
  position: static;
  padding: 0;
  background: transparent;
  color: rgba(255,255,255,.56);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
  opacity: 1;
  transform: none;
  pointer-events: none;
  white-space: normal;
  text-align: center;
}
.rail-link:hover b, .rail-link.active b { color: #0b4f91; }
.rail-link:hover, .rail-link.active {
  color: #0b4f91;
  border-color: var(--yellow);
  background: #fff;
  box-shadow: inset -8px 0 0 rgba(255,212,59,.8), 0 10px 28px rgba(97,7,24,.16);
}
.rail-signal { color: #fff; font-family: inherit; border-top: 1px solid rgba(255,255,255,.22); width: 100%; }
.rail-signal i { background: var(--yellow); box-shadow: 0 0 0 0 rgba(255,212,59,.55); }

main, footer { margin-left: var(--rail); }
.section-shell { isolation: isolate; }
.section-heading { position: relative; z-index: 2; }
.section-index {
  color: var(--red);
  font: 700 12px/1 "Fredoka", "Trebuchet MS", sans-serif;
  letter-spacing: .11em;
}
.section-heading h2,
.final-card h2,
.encounter-content h2 {
  font-family: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--yellow);
  -webkit-text-stroke: 2px #0a4f93;
  paint-order: stroke fill;
  text-shadow: 4px 5px 0 var(--red-dark), 0 10px 22px rgba(117,12,32,.16);
}
.section-heading h2 em,
.final-card h2 em {
  color: #fff;
  -webkit-text-stroke: 2px var(--red);
  text-shadow: 4px 5px 0 #0a4f93;
}
.section-heading p { color: #5e424b; font-weight: 500; line-height: 1.55; }

.hero {
  min-height: 1060px;
  padding-top: 38px;
  color: #2b1720;
  background:
    linear-gradient(150deg, rgba(214,29,56,.96) 0 15%, transparent 15% 80%, rgba(214,29,56,.92) 80% 100%),
    radial-gradient(circle at 50% 36%, #fff 0 25%, rgba(255,255,255,.82) 25% 48%, transparent 70%),
    linear-gradient(135deg, #fffaf6, #ffece6);
}
.hero::before {
  width: min(1080px,92vw);
  background: repeating-conic-gradient(from -6deg, rgba(214,29,56,.14) 0 5deg, transparent 5deg 12deg);
  opacity: .78;
  top: 46px;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background-image: radial-gradient(circle, rgba(10,79,147,.18) 1.3px, transparent 1.3px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 76%);
}
.hero-grid { inset: 0; opacity: .34; background-image: linear-gradient(rgba(214,29,56,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(214,29,56,.12) 1px,transparent 1px); }
.hero-grid::after { background: linear-gradient(180deg, transparent 55%, #fff8f4); }
.hero-orbit { border-color: rgba(214,29,56,.30); }
.orbit-two { border-color: rgba(10,79,147,.30); }
.hero-flash { box-shadow: 0 0 190px 90px rgba(255,255,255,.9), 0 0 320px 165px rgba(214,29,56,.12); }
.status-pill, .chain-pill {
  border: 2px solid rgba(153,17,36,.22);
  background: rgba(255,255,255,.88);
  color: #481f2a;
  box-shadow: 5px 5px 0 rgba(214,29,56,.12);
  font-family: inherit;
  font-weight: 600;
}
.status-pill i { background: var(--red); box-shadow: 0 0 12px rgba(214,29,56,.55); }
.chain-pill span { color: #0a4f93; }
.chain-pill b { color: #875563; }
.eyebrow {
  color: #fff;
  font: 700 13px/1 "Fredoka", "Trebuchet MS", sans-serif;
  letter-spacing: .13em;
  text-shadow: 2px 2px 0 var(--red-dark);
}
.title-kicker {
  font-family: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-weight: 700;
  color: var(--yellow);
  -webkit-text-stroke: 2px #0a4f93;
  paint-order: stroke fill;
  text-shadow: 4px 5px 0 var(--red-dark);
}
.name-logo { filter: drop-shadow(6px 7px 0 rgba(10,79,147,.52)) drop-shadow(0 16px 28px rgba(126,10,31,.15)); }
.token-stamp {
  border: 4px solid #fff;
  color: #fff;
  background: var(--red);
  font: 700 clamp(19px,2.4vw,32px)/1 "Fredoka", "Trebuchet MS", sans-serif;
  box-shadow: 5px 6px 0 #0a4f93;
}
.card-halo { background: conic-gradient(from 0deg,transparent,var(--red),transparent,var(--yellow),transparent,var(--blue),transparent); opacity: .23; }
.hero-card { box-shadow: 0 35px 60px rgba(117,12,32,.25), 0 0 0 5px #fff, 0 0 0 8px var(--red); }
.card-corner { border-color: var(--red); }
.hover-instruction { color: var(--red); font-family: inherit; font-weight: 700; }
.orbit-label { color: #6e3443; background: rgba(255,255,255,.92); border: 1px solid rgba(153,17,36,.22); font-family: inherit; font-weight: 700; box-shadow: 4px 4px 0 rgba(214,29,56,.10); }
.ca-module { border: 2px solid rgba(153,17,36,.22); background: rgba(255,255,255,.94); box-shadow: 8px 8px 0 rgba(214,29,56,.14); }
.ca-module>span { color: var(--red); font-family: inherit; font-weight: 700; }
.ca-module code { color: #4b2530; font-family: "Trebuchet MS", monospace; }
.copy-button { background: var(--red); color: #fff; box-shadow: 4px 4px 0 var(--red-dark); }
.action-button { border: 2px solid rgba(153,17,36,.20); background: rgba(255,255,255,.94); color: #3c1a23; box-shadow: 5px 5px 0 rgba(214,29,56,.10); }
.action-button:hover { border-color: var(--red); background: #fff0eb; }
.action-button i { color: var(--red); }
.action-primary { background: var(--red); color: #fff; border-color: #fff; box-shadow: 6px 6px 0 var(--red-dark); }
.scroll-hint { color: #762d3e; font-family: inherit; font-weight: 700; }
.scroll-hint i { background: linear-gradient(var(--red), transparent); }
.scroll-hint i::after { background: var(--red); }

.signal-strip { background: var(--red); border-color: rgba(255,255,255,.32); }
.signal-strip article { border-color: rgba(255,255,255,.28); }
.signal-strip article::after { border-color: rgba(255,255,255,.20); }
.signal-strip span { color: var(--yellow); font-family: inherit; font-weight: 700; }
.signal-strip strong { color: #fff; font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif; font-weight: 700; text-shadow: 2px 3px 0 #0a4f93; }
.signal-strip small { color: rgba(255,255,255,.72); font-family: inherit; }

.terminal-section {
  color: #2b1720;
  background:
    linear-gradient(90deg, var(--red) 0 12px, transparent 12px calc(100% - 12px), var(--red) calc(100% - 12px)),
    radial-gradient(circle at 15% 20%, rgba(214,29,56,.12), transparent 26%),
    #fffaf6;
}
.terminal-device { border: 5px solid var(--red); background: #fff; box-shadow: var(--shadow), 13px 13px 0 var(--red-dark); border-radius: 24px; overflow: hidden; }
.terminal-device::before { inset: 10px; border-color: rgba(214,29,56,.16); border-radius: 12px; }
.terminal-topbar { background: var(--red); border-bottom-color: #991124; font-family: inherit; color: #fff; }
.terminal-id { color: #fff; }
.terminal-clock { color: var(--yellow); }
.stage-selector { border-bottom-color: rgba(153,17,36,.22); }
.stage-tab { border-right-color: rgba(153,17,36,.18); background: #fff7f3; color: #4a202a; }
.stage-tab span { border-color: rgba(153,17,36,.28); font-family: inherit; }
.stage-tab b { font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif; font-weight: 700; }
.stage-tab small { color: #91606c; font-family: inherit; }
.stage-tab:hover, .stage-tab.active { background: var(--red); color: #fff; }
.specimen-screen { border-right-color: #8f152a; background: radial-gradient(circle at 50% 42%,rgba(255,255,255,.18),transparent 42%), linear-gradient(150deg,#8f1329,#250e17); }
.screen-grid { background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); }
.screen-scan { background: #fff; box-shadow: 0 0 18px #fff; }
.screen-readout { font-family: inherit; color: rgba(255,255,255,.58); }
.screen-readout b { color: var(--yellow); }
.scan-brackets i { border-color: #fff; }
.specimen-caption span { color: rgba(255,255,255,.68); font-family: inherit; }
.data-screen { background: linear-gradient(145deg,#fffaf6,#f8e5df); color: #351821; }
.data-tabs { border-bottom-color: rgba(153,17,36,.20); }
.data-tabs span { color: #9d6b77; font-family: inherit; }
.data-tabs .active { color: var(--red); }
.profile-grid>div { border-color: rgba(153,17,36,.18); background: rgba(255,255,255,.72); }
.profile-grid span,.terminal-entry>span,.move-card>span,.ability-card>span,.terminal-log>span { color: var(--red); font-family: inherit; }
.profile-grid b { color: #3f2028; }
.terminal-entry { background: rgba(214,29,56,.07); }
.terminal-entry p { color: #624650; }
.stat-row span { color: #694853; font-family: inherit; }
.stat-track { background: #edd7d0; border-color: rgba(153,17,36,.18); }
.stat-track i { background: linear-gradient(90deg,var(--red),var(--yellow)); box-shadow: 0 0 13px rgba(214,29,56,.28); }
.stat-row b { color: #0a4f93; font-family: inherit; }
.terminal-bottom { border-top-color: rgba(153,17,36,.22); background: #fff7f3; }
.move-card,.ability-card,.terminal-log { border-right-color: rgba(153,17,36,.18); }
.move-card strong,.ability-card strong { color: #0a4f93; font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif; font-weight: 700; }
.move-card p,.ability-card p,.log-lines { color: #6e4c56; font-family: inherit; }
.log-line b { color: var(--red); }

.lore-section {
  color: #2b1720;
  background:
    radial-gradient(circle at 50% 42%,rgba(214,29,56,.11),transparent 38%),
    linear-gradient(135deg,#fff,#fff0eb);
}
.evolution-node { border: 3px solid rgba(214,29,56,.26); background: rgba(255,255,255,.90); box-shadow: 8px 8px 0 rgba(214,29,56,.10); border-radius: 22px; }
.evolution-node::before { background: var(--red); box-shadow: 0 0 30px 12px rgba(214,29,56,.12); }
.evolution-node:hover { border-color: var(--red); box-shadow: 0 25px 60px rgba(117,12,32,.18); }
.node-number { color: rgba(214,29,56,.12); font-family: "Fredoka", sans-serif; font-weight: 700; }
.evolution-node h3 { color: var(--yellow); font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif; font-weight: 700; -webkit-text-stroke: 1.5px #0a4f93; paint-order: stroke fill; text-shadow: 2px 3px 0 var(--red-dark); }
.evolution-node p { color: #634650; }
.evolution-node>span { color: var(--red); font-family: inherit; }
.evo-arrow { color: #0a4f93; font-family: inherit; }
.lore-quote { border: 4px solid var(--red); background: #fff; box-shadow: 10px 10px 0 var(--red-dark); border-radius: 20px; }
.lore-quote blockquote { color: #3a1b24; font-family: "Fredoka", "Trebuchet MS", sans-serif; font-weight: 600; }
.quote-signal span { background: var(--red); }

.chart-section { color: #fff; background: linear-gradient(150deg,#d61d38,#9b1025); }
.chart-section .section-index { color: var(--yellow); }
.chart-section .section-heading p { color: rgba(255,255,255,.82); }
.chart-terminal { border: 5px solid #fff; background: #fff; box-shadow: var(--shadow), 13px 13px 0 #760a1c; border-radius: 22px; overflow: hidden; }
.chart-header { color: #3a1720; border-bottom-color: rgba(153,17,36,.18); background: #fff7f3; font-family: inherit; }
.chart-header i { background: var(--red); box-shadow: 0 0 13px rgba(214,29,56,.48); }
.chart-body { background-color: #241018; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); }
.chart-overlay { background: rgba(255,250,246,.91); border: 2px solid rgba(214,29,56,.28); color: #3a1821; }
.chart-overlay span { color: var(--red); font-family: inherit; }
.chart-overlay strong { color: #0a4f93; font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif; font-weight: 700; }
.chart-overlay p { color: #6f4b56; font-family: inherit; }
.chart-overlay code { color: var(--red); }
.chart-footer { border-top-color: rgba(153,17,36,.18); background: #fff7f3; }
.chart-footer span { color: #704b56; border-right-color: rgba(153,17,36,.18); font-family: inherit; }

.game-section { color: #2b1720; background: linear-gradient(180deg,#fff7f3,#fff); }
.game-console { border: 5px solid var(--red); background: #fff; box-shadow: var(--shadow), 13px 13px 0 var(--red-dark); border-radius: 22px; overflow: hidden; }
.game-hud { border-bottom-color: rgba(153,17,36,.20); background: #fff7f3; }
.game-hud span { color: var(--red); font-family: inherit; }
.game-hud strong { color: #0a4f93; font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif; font-weight: 700; }
.catch-meter { background: #ead2cc; border-color: rgba(153,17,36,.18); }
.catch-meter i { background: repeating-linear-gradient(90deg,var(--red) 0 25px,#a8142b 25px 29px); box-shadow: 0 0 16px rgba(214,29,56,.30); }
.game-hud button { border-color: rgba(153,17,36,.25); color: #5b303a; font-family: inherit; }
.game-instructions { border-top-color: rgba(153,17,36,.18); background: #fff7f3; }
.game-instructions span { color: #74525b; border-right-color: rgba(153,17,36,.18); font-family: inherit; }
.game-message { background: rgba(255,255,255,.88); color: #4a1f2a; font-family: inherit; box-shadow: 5px 5px 0 rgba(214,29,56,.13); }

.final-section { color: #2b1720; background: var(--red); }
.final-card { border: 5px solid #fff; background: radial-gradient(circle at 22% 50%,rgba(214,29,56,.10),transparent 28%), linear-gradient(120deg,#fff,#ffece6); box-shadow: 13px 13px 0 var(--red-dark); border-radius: 25px; }
.final-card::after { color: rgba(214,29,56,.07); font-family: "Fredoka", sans-serif; font-weight: 700; }
.final-card>div>span { color: var(--red); font-family: inherit; }
.final-card p { color: #654852; }

footer { border-top: 5px solid var(--red); background: #fff; color: #79545e; }
footer b { color: #3d1d26; }
footer p, footer a { font-family: inherit; }
footer a:hover { color: var(--red); }

.unlocked-ball { border: 4px solid var(--red); background: rgba(255,255,255,.94); box-shadow: 8px 8px 0 var(--red-dark); border-radius: 18px; }
.unlocked-ball span { color: var(--red); font-family: inherit; }
.encounter-content { background: radial-gradient(circle at 50% 37%,rgba(255,255,255,.52),transparent 34%),linear-gradient(160deg,#d61d38,#8d1023); border: 5px solid #fff; box-shadow: 13px 13px 0 #760a1c; border-radius: 26px; }
.modal-close { border: 2px solid #fff; background: var(--red-dark); }
.encounter-content>span { color: var(--yellow); font-family: inherit; }
.encounter-content p { color: rgba(255,255,255,.82); }
.toast { background: var(--red); color: #fff; font-family: inherit; box-shadow: 7px 7px 0 var(--red-dark); border: 2px solid #fff; }

@media (max-width: 760px) {
  :root { --rail: 0px; }
  .side-rail {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    height: 66px;
    padding: 0 5px;
    border: 3px solid #fff;
    border-radius: 20px;
    background: var(--red);
    box-shadow: 0 9px 28px rgba(117,12,32,.32);
  }
  .side-rail nav { padding: 0; gap: 2px; }
  .rail-link { min-height: 56px; height: 56px; padding: 8px 3px; border-left: 0; border-bottom: 4px solid transparent; border-radius: 14px; }
  .rail-link span { font-size: 9px; line-height: 1; letter-spacing: -.015em; overflow-wrap: normal; }
  .rail-link b { display: none; }
  .rail-link:hover, .rail-link.active { border-color: var(--yellow); box-shadow: none; }
  .hero { padding-top: 28px; }
  .eyebrow { color: var(--red); text-shadow: none; }
  .title-kicker { font-size: 40px; }
  .section-heading h2, .final-card h2, .encounter-content h2 { -webkit-text-stroke-width: 1.4px; text-shadow: 3px 3px 0 var(--red-dark); }
  .chart-section .section-heading h2 { text-shadow: 3px 3px 0 #650619; }
}


/* =========================================================
   V4 — PREMIUM POKEDEX / COLLECTIBLE MEME SYSTEM
   ========================================================= */

:root {
  --red: #d91f36;
  --red-dark: #8d1021;
  --red-hot: #f14657;
  --blue: #0b5ca8;
  --blue-bright: #3caef1;
  --yellow: #ffd33e;
  --green: #5acb88;
  --paper: #fffaf5;
  --ink: #25141b;
  --rail: 138px;
  --shadow: 0 34px 90px rgba(94, 11, 29, .22);
}

html { background: #f8eee9; }
body {
  color: #2b1720;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  background:
    radial-gradient(circle at 9% 12%, rgba(217,31,54,.24), transparent 24%),
    radial-gradient(circle at 92% 30%, rgba(11,92,168,.14), transparent 22%),
    radial-gradient(circle at 74% 78%, rgba(255,211,62,.13), transparent 20%),
    linear-gradient(135deg, #fffdf9 0 46%, #f6e7e2 46% 51%, #fffaf5 51% 100%);
  background-size: auto, auto, auto, 74px 74px;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body::before {
  opacity: .22;
  background-image:
    radial-gradient(circle, rgba(141,16,33,.22) 1.2px, transparent 1.3px),
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,.34) 50%, transparent 51%);
  background-size: 20px 20px, 160px 160px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), transparent 86%);
}
body::after {
  background: radial-gradient(circle at center, transparent 50%, rgba(83, 14, 26, .06) 100%);
}
main, footer, .side-rail { position: relative; z-index: 2; }
.noise { opacity: .058; }
.scanlines { opacity: .026; }
.particle { width: 4px; height: 4px; background: var(--yellow); box-shadow: 0 0 10px rgba(255,211,62,.5); }

/* premium heading treatment: custom font only on large display text */
.section-heading h2,
.final-card h2,
.encounter-copy h2,
.title-kicker {
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .025em;
  color: var(--yellow);
  -webkit-text-stroke: 2.5px #073f7d;
  paint-order: stroke fill;
  text-shadow:
    1px 1px 0 #073f7d,
    3px 3px 0 #073f7d,
    6px 6px 0 var(--red-dark),
    0 13px 24px rgba(92, 8, 24, .22);
}
.section-heading h2 em,
.final-card h2 em {
  color: #fff;
  -webkit-text-stroke-color: var(--red);
  text-shadow:
    1px 1px 0 var(--red),
    3px 3px 0 var(--red),
    6px 6px 0 #073f7d,
    0 13px 24px rgba(92, 8, 24, .2);
}
.section-heading h2 { font-size: clamp(52px, 7vw, 96px); line-height: .94; }
.section-heading p { font-size: clamp(17px, 1.45vw, 21px); color: #543842; max-width: 720px; }
.section-index { font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--red); }

/* controller-like left navigation */
.side-rail {
  width: var(--rail);
  inset: 14px auto 14px 14px;
  height: auto;
  border: 5px solid #fff;
  border-radius: 32px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.17), transparent 18% 80%, rgba(91,3,18,.18)),
    linear-gradient(180deg, #ef3b50, #c7132c 42%, #9d1024 100%);
  box-shadow:
    10px 14px 0 rgba(111,7,25,.24),
    0 28px 70px rgba(90,6,22,.28),
    inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -10px 24px rgba(73,0,13,.19);
}
.side-rail::before,
.side-rail::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #a7a7a7 38%, #444 70%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.28);
  z-index: 3;
}
.side-rail::before { left: 10px; top: 10px; }
.side-rail::after { right: 10px; bottom: 10px; }
.rail-brand {
  height: 118px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(80,0,12,.08));
  border-bottom: 2px solid rgba(255,255,255,.25);
}
.rail-brand em {
  right: 10px;
  bottom: 10px;
  padding: 4px 7px;
  border-radius: 7px;
  background: #fff;
  color: var(--red-dark);
  font: 900 10px/1 ui-monospace, monospace;
  box-shadow: 2px 3px 0 rgba(74,0,12,.22);
}
.mini-ball {
  width: 50px;
  height: 50px;
  border: 4px solid #292026;
  background: linear-gradient(#fff 0 44%, #393238 44% 56%, var(--green) 56% 100%);
  box-shadow:
    0 0 0 5px rgba(255,255,255,.16),
    0 10px 20px rgba(65,0,12,.26),
    inset -7px -8px 10px rgba(0,0,0,.12),
    inset 7px 6px 9px rgba(255,255,255,.25);
}
.mini-ball::after { width: 12px; height: 12px; border: 4px solid #393238; }
.side-rail nav { gap: 9px; padding: 14px 10px; }
.rail-link {
  min-height: 76px;
  border: 2px solid rgba(255,255,255,.16);
  border-left-width: 2px;
  border-radius: 18px;
  color: rgba(255,255,255,.82);
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(65,0,12,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 0 rgba(79,0,13,.2);
  transform: translateY(0);
}
.rail-link span { font: 900 12px/1.05 "Trebuchet MS", sans-serif; letter-spacing: .055em; }
.rail-link b { font: 800 8px/1 ui-monospace, monospace; letter-spacing: .11em; }
.rail-link:hover,
.rail-link.active {
  color: #08457f;
  border-color: #fff;
  background: linear-gradient(180deg, #fff, #f4ece7);
  box-shadow: inset 0 1px 0 #fff, 0 6px 0 #8a0e22, 0 12px 24px rgba(85,0,15,.2);
  transform: translateY(-2px);
}
.rail-link:hover b,
.rail-link.active b { color: var(--red); }
.rail-signal {
  height: 82px;
  border-top: 2px solid rgba(255,255,255,.22);
  color: #fff;
  font-family: ui-monospace, monospace;
}
.rail-signal i { background: var(--yellow); box-shadow: 0 0 17px var(--yellow); }
main, footer { margin-left: calc(var(--rail) + 14px); }

/* every major block reads as a Pokedex module/page */
.section-shell {
  margin: 22px clamp(18px, 2.6vw, 42px);
  padding: 108px clamp(24px, 5vw, 78px);
  border: 5px solid rgba(255,255,255,.92);
  border-radius: 38px;
  overflow: hidden;
  box-shadow:
    14px 16px 0 rgba(126,12,31,.14),
    0 34px 90px rgba(92,8,24,.14),
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -20px 40px rgba(105,11,29,.05);
}
.section-shell::before,
.section-shell::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #b9b9b9 38%, #555 70%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.28), 0 2px 5px rgba(0,0,0,.15);
  z-index: 4;
}
.section-shell::before { left: 18px; top: 18px; }
.section-shell::after { right: 18px; bottom: 18px; }

/* hero stays centered, but the card gets more presence */
.hero {
  min-height: 1120px;
  padding-top: 38px;
  background:
    linear-gradient(145deg, rgba(217,31,54,.98) 0 14%, transparent 14% 81%, rgba(217,31,54,.94) 81% 100%),
    radial-gradient(circle at 50% 37%, #fff 0 24%, rgba(255,255,255,.88) 24% 48%, transparent 70%),
    linear-gradient(135deg, #fffaf6, #ffe8e3);
}
.hero::before { opacity: .92; }
.title-kicker { font-size: clamp(48px, 7vw, 88px); transform: rotate(-3deg); }
.name-logo { width: min(710px, 67vw); filter: drop-shadow(5px 7px 0 rgba(7,63,125,.68)) drop-shadow(0 18px 26px rgba(115,10,29,.18)); }
.token-stamp {
  font: 900 clamp(20px, 2.6vw, 34px)/1 "Trebuchet MS", sans-serif;
  border: 4px solid #fff;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(180deg, #ef4052, #bd1028);
  box-shadow: 5px 6px 0 #073f7d, inset 0 2px 0 rgba(255,255,255,.3);
}
.hero-stage { min-height: 650px; }
.hero-card-wrap { width: min(500px, 78vw); }
.hero-card {
  border-radius: 24px;
  box-shadow:
    0 38px 70px rgba(95,8,24,.28),
    0 0 0 6px #fff,
    0 0 0 10px var(--red),
    13px 14px 0 rgba(7,63,125,.18);
}
.card-halo { width: min(720px, 82vw); height: min(720px, 82vw); opacity: .31; }
.hero-actions { max-width: 1320px; }
.ca-module,
.action-button {
  border-radius: 20px;
  box-shadow: 7px 8px 0 rgba(135,11,31,.13), 0 18px 38px rgba(92,7,24,.1), inset 0 1px 0 #fff;
}
.action-button b,
.copy-button b { font-size: 15px; }

/* V2 terminal intentionally preserved; only the surrounding Pokedex page gets extra depth */
.terminal-section {
  background:
    linear-gradient(90deg, var(--red) 0 15px, transparent 15px calc(100% - 15px), var(--red) calc(100% - 15px)),
    radial-gradient(circle at 15% 20%, rgba(217,31,54,.14), transparent 28%),
    linear-gradient(135deg, #fffdf9, #f4e6e0);
}
.terminal-device {
  box-shadow:
    14px 15px 0 var(--red-dark),
    0 35px 90px rgba(91,7,24,.23),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* lore archive = three genuine collectible cards */
.lore-section {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,211,62,.13), transparent 28%),
    radial-gradient(circle at 10% 78%, rgba(11,92,168,.12), transparent 23%),
    linear-gradient(145deg, #fffdf9, #f7e9e4);
}
.evolution-path { gap: 26px; max-width: 1500px; }
.evolution-node {
  min-height: 620px;
  padding: 20px 20px 24px;
  border: 5px solid #fff;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(244,231,225,.93));
  box-shadow:
    0 0 0 3px var(--red),
    11px 12px 0 rgba(141,16,33,.17),
    0 30px 70px rgba(92,8,24,.16),
    inset 0 2px 0 #fff;
  transform-style: preserve-3d;
}
.evolution-node::before {
  inset: 12px;
  height: auto;
  border-radius: 20px;
  background:
    linear-gradient(115deg, transparent 22%, rgba(255,255,255,.7) 38%, transparent 53%),
    repeating-linear-gradient(135deg, rgba(11,92,168,.04) 0 8px, transparent 8px 16px);
  background-size: 250% 100%, auto;
  box-shadow: none;
  opacity: .82;
  animation: foilSweep 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes foilSweep { 50% { background-position: -120% 0, 0 0; } }
.evolution-node:hover {
  transform: translateY(-14px) rotateX(2deg) rotateY(-2deg);
  border-color: #fff;
  box-shadow:
    0 0 0 3px var(--blue),
    15px 17px 0 rgba(141,16,33,.17),
    0 38px 80px rgba(92,8,24,.22);
}
.evolution-node img {
  width: 100%;
  height: auto;
  max-height: 430px;
  object-fit: contain;
  border-radius: 19px;
  margin-top: 25px;
  position: relative;
  z-index: 2;
  animation: none;
  filter: drop-shadow(0 18px 20px rgba(65,8,19,.22));
}
.node-number {
  z-index: 4;
  top: 14px;
  right: 16px;
  color: rgba(217,31,54,.2);
  font: 900 43px/1 "Trebuchet MS", sans-serif;
}
.evolution-node h3 {
  margin: 20px 0 10px;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 32px;
  color: var(--blue);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.evolution-node p { font-size: 16px; line-height: 1.58; color: #563a43; }
.evolution-node > span {
  margin-top: auto;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ed3850, #b40f27);
  color: #fff;
  box-shadow: 0 5px 0 var(--red-dark);
  font: 900 10px/1 ui-monospace, monospace;
  letter-spacing: .12em;
}
.evo-arrow { color: var(--blue); }
.evo-arrow i { height: 4px; border-radius: 99px; box-shadow: 0 0 14px rgba(217,31,54,.2); }
.lore-quote {
  margin-top: 50px;
  border-radius: 28px;
  box-shadow: 11px 12px 0 var(--red-dark), 0 26px 60px rgba(91,7,24,.16);
}

/* Dex chart as a premium terminal monitor */
.chart-section {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 38%),
    linear-gradient(155deg, #df2d45, #9a0e24 72%);
}
.chart-terminal {
  position: relative;
  border: 8px solid #fff;
  border-radius: 30px;
  background: linear-gradient(145deg, #fdf6f1, #d9c8c1);
  box-shadow:
    15px 16px 0 #6e0719,
    0 36px 90px rgba(65,0,13,.35),
    inset 0 2px 0 #fff;
}
.chart-terminal::before,
.chart-terminal::after {
  content: "";
  position: absolute;
  z-index: 5;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #9b9b9b 38%, #3c3c3c 72%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.28);
}
.chart-terminal::before { left: 12px; top: 12px; }
.chart-terminal::after { right: 12px; bottom: 12px; }
.chart-header {
  min-height: 72px;
  padding-inline: 24px;
  background: linear-gradient(180deg, #fff, #ede0da);
  border-bottom: 3px solid #281219;
}
.chart-body {
  margin: 16px;
  border: 9px solid #2a161d;
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 0 0 60px rgba(0,0,0,.55),
    0 10px 20px rgba(79,6,20,.18);
  background-color: #190b11;
}
.chart-overlay {
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.chart-footer { margin: 0 16px 16px; border-radius: 14px; overflow: hidden; }

/* keep V3 mini-game feel */
.game-section {
  background:
    radial-gradient(circle at 88% 12%, rgba(11,92,168,.12), transparent 22%),
    linear-gradient(180deg, #fff8f4, #f5e4df);
}
.game-console {
  border-radius: 30px;
  border: 6px solid var(--red);
  box-shadow: 14px 15px 0 var(--red-dark), 0 32px 80px rgba(92,8,24,.2);
}
.game-hud { min-height: 78px; padding: 16px 20px; }
.game-hud strong { font-size: 27px; }
.catch-meter { height: 20px; border-radius: 999px; padding: 4px; }
.catch-meter i {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--yellow), var(--red));
}
.game-arena {
  height: min(620px,64vw);
  min-height: 440px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.38), transparent 20%),
    radial-gradient(circle at 74% 18%, rgba(255,255,255,.3), transparent 18%),
    linear-gradient(180deg, #ffd5d9 0%, #f9a0a9 28%, #df5362 60%, #941d2d 100%);
}
.arena-grid { background-image: linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); }
.arena-hills i { background: rgba(58,12,24,.56); }
.arena-ground { background: linear-gradient(180deg,#641222,#370710); }
.game-message {
  border-left: 0;
  border: 2px solid rgba(217,31,54,.16);
  border-radius: 14px;
  color: var(--red);
}
.thrown-ball { filter: drop-shadow(0 10px 8px rgba(81,4,18,.3)); }

/* true white/green pumpball everywhere */
.unlocked-ball {
  border: 5px solid #fff;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #f4e6e0);
  box-shadow: 9px 10px 0 var(--red-dark), 0 20px 50px rgba(74,4,17,.28);
}
.unlocked-ball img { border-radius: 50%; filter: drop-shadow(0 12px 12px rgba(31,10,16,.22)); }
.unlocked-ball span { color: var(--red); font: 900 9px/1 ui-monospace, monospace; }

/* V3 encounter, upgraded: shake first, open second, copy panel appears last */
.encounter-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.encounter-backdrop { position: absolute; inset: 0; background: rgba(39,3,11,.78); backdrop-filter: blur(14px); }
.encounter-content {
  width: min(860px,95vw);
  min-height: 760px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(430px,1fr) auto;
  gap: 4px;
  padding: 24px 28px 28px;
  overflow: hidden;
  border: 7px solid #fff;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.72), transparent 22%),
    radial-gradient(circle at 50% 0%, rgba(255,211,62,.18), transparent 34%),
    linear-gradient(160deg, #e5364c, #9c1025 72%);
  box-shadow: 15px 17px 0 #630617, 0 40px 120px rgba(30,0,8,.48), inset 0 2px 0 rgba(255,255,255,.4);
}
.encounter-content::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 25px;
  pointer-events: none;
}
.modal-close {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 48px;
  height: 48px;
  z-index: 8;
  border: 3px solid #fff;
  border-radius: 15px;
  background: #72101f;
  color: #fff;
  font-size: 26px;
  box-shadow: 4px 5px 0 rgba(72,0,12,.35);
}
.encounter-rays {
  position: absolute;
  width: 920px;
  height: 920px;
  left: 50%;
  top: -350px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.14) 0 7deg, transparent 7deg 18deg);
  opacity: .52;
}
.encounter-stage { position: relative; min-height: 430px; display: grid; place-items: end center; }
.encounter-platform {
  position: absolute;
  left: 50%;
  bottom: 38px;
  width: min(460px,74%);
  height: 76px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,255,255,.5), rgba(11,92,168,.2) 50%, transparent 74%);
  filter: blur(9px);
}
.opening-pumpball {
  position: absolute;
  left: 50%;
  bottom: 70px;
  width: 270px;
  height: 270px;
  transform: translateX(-50%);
  z-index: 3;
}
.pumpball-ring,
.pumpball-burst,
.pumpball-half,
.pumpball-core { position: absolute; inset: 0; }
.pumpball-half img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 20px rgba(63,0,12,.28)); }
.pumpball-top img { clip-path: inset(0 0 50% 0); }
.pumpball-bottom img { clip-path: inset(50% 0 0 0); }
.pumpball-core {
  inset: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: #fff;
  border: 6px solid #373037;
  box-shadow: 0 0 0 8px rgba(255,255,255,.36), 0 0 24px #fff;
}
.pumpball-ring {
  border-radius: 50%;
  border: 3px dashed rgba(255,255,255,.8);
  transform: scale(.7);
  opacity: 0;
}
.pumpball-burst {
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255,255,255,.1) 42%, transparent 68%);
  transform: scale(.1);
  opacity: 0;
  filter: blur(2px);
}
.encounter-character {
  position: relative;
  z-index: 4;
  width: min(360px,54vw);
  opacity: 0;
  transform: translateY(125px) scale(.62);
  filter: drop-shadow(0 27px 18px rgba(45,0,9,.34));
}
.encounter-copy {
  position: relative;
  z-index: 6;
  width: min(720px,94%);
  margin: 0 auto;
  padding: 22px 24px 24px;
  border-radius: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,237,232,.96));
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 12px 0 rgba(91,6,22,.28), 0 24px 60px rgba(53,0,10,.24);
  opacity: 0;
  transform: translateY(36px);
}
.encounter-copy > span {
  display: inline-block;
  color: var(--red);
  font: 900 10px/1 ui-monospace, monospace;
  letter-spacing: .16em;
}
.encounter-copy h2 {
  margin: 12px 0 8px;
  font-size: clamp(36px,5vw,62px);
  line-height: .95;
}
.encounter-copy p { margin: 0; color: #5d4049; font-size: 17px; }
.encounter-copy .action-button { min-width: min(330px,100%); margin-top: 20px; }
.encounter-content.play { animation: encounterFrameShake .75s cubic-bezier(.36,.07,.19,.97) .18s both; }
.encounter-content.play .opening-pumpball { animation: pumpballShake .75s cubic-bezier(.36,.07,.19,.97) .18s both; }
.encounter-content.play .encounter-rays { animation: encounterRays 15s linear infinite; }
.encounter-content.play .pumpball-ring { animation: ringPulse .65s ease-out .72s forwards, ringSpin 5s linear 1.25s infinite; }
.encounter-content.play .pumpball-top { animation: ballTopOpen 1.08s cubic-bezier(.2,.82,.15,1) .92s forwards; }
.encounter-content.play .pumpball-bottom { animation: ballBottomOpen 1.08s cubic-bezier(.2,.82,.15,1) .92s forwards; }
.encounter-content.play .pumpball-burst { animation: pumpballFlash .9s ease-out 1.23s forwards; }
.encounter-content.play .encounter-character { animation: raccoonSummon .92s cubic-bezier(.18,.9,.18,1.15) 1.48s forwards; }
.encounter-content.play .encounter-copy { animation: revealEncounterCopy .62s cubic-bezier(.2,.8,.2,1) 2.35s forwards; }
@keyframes encounterFrameShake {
  0%,100% { transform: translate(0,0) rotate(0); }
  15% { transform: translate(-5px,2px) rotate(-.35deg); }
  30% { transform: translate(6px,-2px) rotate(.4deg); }
  45% { transform: translate(-7px,1px) rotate(-.3deg); }
  60% { transform: translate(5px,2px) rotate(.25deg); }
  75% { transform: translate(-3px,-1px) rotate(-.15deg); }
}
@keyframes pumpballShake {
  0%,100% { transform: translateX(-50%) rotate(0) scale(1); }
  15% { transform: translateX(calc(-50% - 9px)) rotate(-8deg) scale(1.02); }
  30% { transform: translateX(calc(-50% + 11px)) rotate(9deg) scale(1.04); }
  45% { transform: translateX(calc(-50% - 10px)) rotate(-10deg) scale(1.03); }
  60% { transform: translateX(calc(-50% + 7px)) rotate(7deg) scale(1.05); }
  75% { transform: translateX(calc(-50% - 4px)) rotate(-4deg) scale(1.03); }
}
@keyframes encounterRays { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes ringPulse { from { opacity: 0; transform: scale(.45); } to { opacity: 1; transform: scale(1.18); } }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes ballTopOpen {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  55% { transform: translateY(-26px) rotate(-11deg); opacity: 1; }
  100% { transform: translateY(-124px) rotate(-24deg); opacity: 0; }
}
@keyframes ballBottomOpen {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  55% { transform: translateY(25px) rotate(9deg); opacity: 1; }
  100% { transform: translateY(128px) rotate(18deg); opacity: 0; }
}
@keyframes pumpballFlash {
  0% { opacity: 0; transform: scale(.1); }
  42% { opacity: 1; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes raccoonSummon {
  0% { opacity: 0; transform: translateY(125px) scale(.62); }
  62% { opacity: 1; transform: translateY(-20px) scale(1.07); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes revealEncounterCopy { to { opacity: 1; transform: translateY(0); } }
.encounter-modal[hidden], .unlocked-ball[hidden] { display: none; }

@media (max-width: 1100px) {
  .evolution-node { min-height: 0; }
  .evolution-node img { max-height: none; }
}
@media (max-width: 760px) {
  :root { --rail: 0px; }
  main, footer { margin-left: 0; }
  .side-rail {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 8px;
    width: auto;
    height: 72px;
    border-width: 4px;
    border-radius: 23px;
    flex-direction: row;
    padding: 0 7px;
  }
  .side-rail::before, .side-rail::after, .rail-brand, .rail-signal { display: none; }
  .side-rail nav { flex-direction: row; gap: 5px; padding: 0; }
  .rail-link { min-height: 56px; height: 56px; padding: 7px 4px; border-radius: 14px; box-shadow: 0 4px 0 rgba(79,0,13,.2); }
  .rail-link span { font-size: 9px; }
  .rail-link b { display: none; }
  .section-shell { margin: 12px 8px; padding: 84px 18px; border-radius: 28px; }
  .hero { min-height: 1020px; padding-inline: 16px; }
  .hero-card-wrap { width: min(410px, 84vw); }
  .title-kicker { font-size: 44px; }
  .section-heading h2 { font-size: clamp(42px,12vw,60px); -webkit-text-stroke-width: 1.7px; text-shadow: 1px 1px 0 #073f7d, 2px 2px 0 #073f7d, 4px 4px 0 var(--red-dark); }
  .encounter-content { min-height: 690px; padding: 18px 16px 20px; grid-template-rows: minmax(340px,1fr) auto; }
  .encounter-stage { min-height: 340px; }
  .opening-pumpball { width: 220px; height: 220px; bottom: 58px; }
  .encounter-character { width: min(285px,70vw); }
  .encounter-copy { padding: 18px 16px 20px; }
}

/* keep the Pokedex controller out of document flow */
.side-rail { position: fixed; }

/* give the custom display font enough vertical room */
.section-heading { max-width: 940px; margin-bottom: 68px; }
.section-heading h2 {
  font-size: clamp(46px, 5.6vw, 82px);
  line-height: 1.12;
  margin: 18px 0 24px;
  padding-bottom: 12px;
}
.final-card h2 { line-height: 1.1; }

/* the supplied display font has a deep visual descender; reserve real space for it */
.section-heading h2 { padding-bottom: 92px; margin-bottom: 0; }
.section-heading p { margin-top: 0; }
@media (max-width: 760px) {
  .section-heading h2 { padding-bottom: 64px; }
}
.section-heading h2 { padding-bottom: 116px; }
@media (max-width:760px){.section-heading h2{padding-bottom:80px}}
.evolution-node::before { opacity: .28; }

/* the encounter result panel uses a compact rounded face so nothing overlaps */
.encounter-character { width: min(310px, 48vw); max-height: 390px; object-fit: contain; }
.encounter-copy h2 {
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--blue);
  -webkit-text-stroke: 0;
  text-shadow: 3px 4px 0 rgba(217,31,54,.16);
  margin: 13px 0 12px;
  padding: 0;
}

/* final CTA prioritizes legibility over the decorative display face */
.final-card h2 {
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 6.4vw, 86px);
  line-height: .94;
  letter-spacing: -.055em;
  color: var(--blue);
  -webkit-text-stroke: 0;
  text-shadow: 4px 5px 0 rgba(217,31,54,.15);
  margin: 16px 0 20px;
  padding: 0;
}
.final-card h2 em {
  color: var(--red);
  -webkit-text-stroke: 0;
  text-shadow: 4px 5px 0 rgba(11,92,168,.13);
}

/* Supplied display font is baked into transparent heading artwork. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.title-kicker-art {
  width: clamp(126px, 13vw, 210px);
  height: auto;
  transform: rotate(-3deg);
  filter: drop-shadow(0 12px 14px rgba(96,8,24,.16));
}
.section-heading .art-heading {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 18px 0 28px !important;
  padding: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
.section-heading .art-heading img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 14px 18px rgba(92,8,24,.14));
}
.terminal-heading img { width: min(100%, 980px) !important; }
.lore-heading img { width: min(100%, 770px) !important; margin-inline: auto; }
.dex-heading img { width: min(100%, 650px) !important; }
.game-heading img { width: min(100%, 900px) !important; margin-inline: auto; }
.section-heading p { margin-top: 0 !important; }
@media (max-width:760px){
  .title-kicker-art { width: 118px; }
  .section-heading .art-heading { margin-bottom: 22px !important; }
  .terminal-heading img,.dex-heading img { margin-inline:auto; }
}
/* Расстояние между заголовком и карточкой */
.hero-stage {
  margin-top: -10px !important;
}
/* ============================================================
   HERO QUICK SETTINGS — безопасно меняй значения в этом блоке.
   Эти настройки отвечают ТОЛЬКО за первый экран сайта.
   ============================================================ */
:root {
  /* Ширина большой надписи над карточкой. Увеличь 830px, чтобы сделать её крупнее. */
  --hero-logo-width: min(830px, 58vw);

  /* Размер карточки на компьютере. */
  --hero-card-size: min(420px, 26vw);

  /* Высота зоны карточки. Чем меньше число, тем выше поднимаются карточка и кнопки. */
  --hero-card-zone-height: 420px;

  /* Отступ между большой надписью и зоной карточки. Отрицательное число поднимает карточку. */
  --hero-card-top-gap: -10px;
}

@media (min-width: 761px) {
  /* Первый экран занимает высоту окна, без искусственных 1100+ пикселей. */
  .hero {
    min-height: 100svh !important;
    padding-top: 18px !important;
    padding-bottom: 24px !important;
  }

  /* Верхние служебные плашки чуть компактнее, чтобы освободить место. */
  .hero-topline { margin-top: 0 !important; }

  /* Положение блока с большой надписью. */
  .hero-title { margin-top: 8px !important; }

  /* Размер новой картинки-заголовка. Файл уже обрезан от пустых прозрачных полей. */
  .name-logo {
    width: var(--hero-logo-width) !important;
    max-height: 330px;
    object-fit: contain;
  }

  /* Карточка больше не сидит внутри слишком высокой пустой зоны. */
  .hero-stage {
    min-height: var(--hero-card-zone-height) !important;
    margin-top: var(--hero-card-top-gap) !important;
  }

  /* Размер самой hero-карточки. */
  .hero-card-wrap { width: var(--hero-card-size) !important; }

  /* Кнопки поднимаются сразу под карточку. */
  .hero-actions { margin-top: -6px !important; }

  /* Подсказка прокрутки больше не выталкивает кнопки за первый экран. */
  .scroll-hint { margin-top: 12px !important; }
}

/* Новые иконки кнопок X, Telegram и Pump.fun. */
.social-icon {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 38px;
  border-radius: 8px;
}
.social-button[data-link="pumpfun"] .social-icon { width: 44px; height: 38px; }
.social-button { grid-template-columns: auto minmax(0, 1fr) auto !important; }

/* На невысоких ноутбуках скрываем только подсказку SCROLL, чтобы карточка и кнопки точно помещались. */
@media (min-width: 761px) and (max-height: 920px) {
  .scroll-hint { display: none !important; }
  .hero-card-wrap { width: min(400px, 24vw) !important; }
  .hero-stage { min-height: 400px !important; }
  .name-logo { width: min(790px, 56vw) !important; max-height: 300px; }
}

/* Мобильные размеры — меняй отдельно, если понадобится. */
@media (max-width: 760px) {
  .name-logo { width: min(92vw, 620px) !important; max-height: 230px; object-fit: contain; }
  .hero-stage { margin-top: -22px !important; min-height: 455px !important; }
  .social-icon { width: 34px; height: 34px; }
}
.hero-actions {
  transform: translateY(60px) !important;
}
.hero-title .title-lockup .token-stamp-anchor {
  display: inline-flex;
  transform: translate(-220px, 140px) rotate(7deg) !important;
  transform-origin: 50% 50%;
}
:root {
  --hero-title-x: 60px;    /* плюс — вправо, минус — влево */
  --hero-title-y: -35px;  /* плюс — вниз, минус — вверх */
  --hero-title-width: min(1050px, 72vw); /* размер */
}

#top .hero-title .title-lockup > .name-logo {
  width: var(--hero-title-width) !important;

  position: relative !important;
  top: auto !important;
  left: auto !important;

  transform:
    translate3d(
      var(--hero-title-x),
      var(--hero-title-y),
      0
    ) !important;
}
#stage-card,
#lore .evolution-node > img {
  --parallax-rotate-x: 0deg;
  --parallax-rotate-y: 0deg;
  --parallax-scale: 1;

  transform:
    perspective(1100px)
    rotateX(var(--parallax-rotate-x))
    rotateY(var(--parallax-rotate-y))
    scale(var(--parallax-scale)) !important;

  transform-origin: center;
  transform-style: preserve-3d;

  transition:
    transform 140ms ease-out,
    filter 140ms ease-out;

  will-change: transform;
}

/* Небольшое увеличение при наведении */
#stage-card:hover,
#lore .evolution-node > img:hover {
  --parallax-scale: 1.035;
}

/* Сохраняет анимацию переключения стадий в Pokédex */
.terminal-device.switching #stage-card {
  --parallax-scale: 0.88;

  opacity: 0.2;
  filter: blur(5px);
}

/* На телефонах обычное статичное положение */
@media (pointer: coarse) {
  #stage-card,
  #lore .evolution-node > img {
    transform: none !important;
  }
}
/* ==========================================================
   ПОЛОЖЕНИЕ RACCOOMON, КОТОРЫЙ ВЫЛЕТАЕТ ИЗ PUMPBALL
   ========================================================== */

#encounter-modal .encounter-character {
  position: relative !important;

  left: 0px;    /* плюс — вправо, минус — влево */
  top: -70px;   /* плюс — вниз, минус — вверх */
}
/* ==========================================================
   CONTRACT ADDRESS + СОЦСЕТИ: СОБРАТЬ ВМЕСТЕ
   ========================================================== */

.hero-actions {
  display: grid !important;

  /* Левая колонка — Contract Address, правая — соцсети */
  grid-template-columns: minmax(500px, 540px) max-content !important;

  /* Расстояние между Contract Address и кнопкой X */
  column-gap: 8px !important;
  gap: 8px !important;

  justify-content: center !important;

  /* Не растягиваем панель на всю ширину экрана */
  width: max-content !important;
  max-width: calc(100% - 30px) !important;

  margin-left: auto !important;
  margin-right: auto !important;
}

/* Расстояние между X, Telegram и Pump.fun */
.hero-actions .social-actions {
  display: grid !important;
  grid-template-columns: repeat(3, 105px) !important;
  gap: 6px !important;
  width: max-content !important;
}

/* Фиксируем ширину социальных кнопок */
.hero-actions .social-actions .action-button {
  width: 100px !important;
  margin: 0 !important;
}

/* ============================================================
   V4.6 — HERO INTRO, SECTION HEADINGS AND SFX CONTROL
   Все значения ниже можно безопасно менять вручную.
   ============================================================ */

/* ----------------------------
   Кнопка включения/выключения звуков
   ---------------------------- */
.sound-toggle {
  position: fixed;
  right: 24px;
  bottom: 132px;
  z-index: 190;
  width: 64px;
  min-height: 58px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 7px 6px;
  border: 3px solid #fff;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(180deg, #e52a42, #b90e27);
  box-shadow: 7px 8px 0 rgba(117, 8, 27, .35), 0 18px 34px rgba(80, 5, 20, .18);
  cursor: pointer;
}
.sound-toggle span { font-size: 22px; line-height: 1; }
.sound-toggle b { font: 900 8px/1 "Trebuchet MS", sans-serif; letter-spacing: .08em; }
.sound-toggle.muted {
  color: #6d434d;
  background: rgba(255,255,255,.96);
  border-color: rgba(217,31,54,.35);
}
.sound-toggle:active { translate: 0 4px; box-shadow: 3px 3px 0 rgba(117,8,27,.28); }

/* ----------------------------
   Появление WHO THAT POKEMEME
   translate/scale/rotate не ломают заданный transform позиции.
   ---------------------------- */
html.motion-ready #top:not(.hero-intro-play) .name-logo {
  opacity: 0;
  translate: 0 -54px;
  scale: .72;
  rotate: -7deg;
}
#top.hero-intro-play .name-logo {
  animation:
    heroLogoReveal 1.08s cubic-bezier(.16, .9, .22, 1.18) .08s both,
    heroLogoIdle 5.2s ease-in-out 1.35s infinite;
  will-change: translate, scale, rotate, opacity, filter;
}
@keyframes heroLogoReveal {
  0% {
    opacity: 0;
    translate: 0 -64px;
    scale: .68;
    rotate: -8deg;
    filter: blur(9px) brightness(1.45)
      drop-shadow(5px 7px 0 rgba(7,63,125,.68));
  }
  64% {
    opacity: 1;
    translate: 0 9px;
    scale: 1.055;
    rotate: 1.6deg;
    filter: blur(0) brightness(1.08)
      drop-shadow(5px 7px 0 rgba(7,63,125,.68))
      drop-shadow(0 18px 26px rgba(115,10,29,.18));
  }
  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
    filter: blur(0) brightness(1)
      drop-shadow(5px 7px 0 rgba(7,63,125,.68))
      drop-shadow(0 18px 26px rgba(115,10,29,.18));
  }
}
@keyframes heroLogoIdle {
  0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  35% { translate: 0 -5px; rotate: -.55deg; scale: 1.008; }
  70% { translate: 0 3px; rotate: .45deg; scale: .997; }
}

/* ----------------------------
   Появление hero-карточки, затем обычный параллакс
   ---------------------------- */
html.motion-ready #top:not(.hero-intro-play) .hero-card-wrap {
  opacity: 0;
  translate: 0 150px;
  scale: .52;
  rotate: -10deg;
}
#top.hero-intro-play .hero-card-wrap {
  animation: heroCardArrival 1.12s cubic-bezier(.12,.86,.18,1.16) .48s both;
  will-change: transform, translate, scale, rotate, opacity;
}
@keyframes heroCardArrival {
  0% {
    opacity: 0;
    translate: 0 170px;
    scale: .48;
    rotate: -11deg;
    filter: blur(10px) brightness(1.45);
  }
  54% {
    opacity: 1;
    translate: 0 -24px;
    scale: 1.075;
    rotate: 4deg;
    filter: blur(0) brightness(1.12);
  }
  76% {
    translate: 0 10px;
    scale: .985;
    rotate: -1.8deg;
  }
  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
    filter: none;
  }
}

/* Постоянное деликатное голографическое переливание */
.hero-card-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-145%) skewX(-14deg);
  background:
    linear-gradient(108deg,
      transparent 19%,
      rgba(255,255,255,.08) 31%,
      rgba(75,194,255,.24) 40%,
      rgba(255,220,74,.20) 48%,
      rgba(255,255,255,.34) 53%,
      rgba(255,92,125,.16) 61%,
      transparent 74%);
  mix-blend-mode: screen;
}
#top.hero-intro-play .hero-card-clip::after {
  animation: heroFoilLoop 6.4s ease-in-out 2s infinite;
}
@keyframes heroFoilLoop {
  0%, 62%, 100% { opacity: 0; transform: translateX(-145%) skewX(-14deg); }
  68% { opacity: .72; }
  84% { opacity: .5; transform: translateX(145%) skewX(-14deg); }
  88% { opacity: 0; transform: translateX(145%) skewX(-14deg); }
}

/* Блик продолжает следовать за мышью после появления */
.card-glare {
  background:
    radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255,255,255,.30), transparent 30%),
    linear-gradient(115deg, transparent 20%, rgba(255,255,255,.20) 42%, transparent 60%);
}

/* ----------------------------
   Анимации картинок-заголовков секций
   ---------------------------- */
html.motion-ready .section-heading .art-heading img {
  opacity: 0;
  will-change: transform, opacity, filter, clip-path;
}
.section-heading .art-heading {
  isolation: isolate;
  overflow: visible;
}
.section-heading .art-heading::after {
  content: "";
  position: absolute;
  inset: -10% -5%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.72) 49%, transparent 63%);
  mix-blend-mode: screen;
}
.section-heading .art-heading.heading-animated::after,
.section-heading.visible .art-heading::after {
  animation: headingLightSweep .78s ease-out .62s both;
}
@keyframes headingLightSweep {
  0% { opacity: 0; transform: translateX(-120%) skewX(-18deg); }
  30% { opacity: .72; }
  100% { opacity: 0; transform: translateX(120%) skewX(-18deg); }
}

/* Evolution Terminal: сканирование слева направо */
.terminal-heading.heading-animated img,
.section-heading.visible .terminal-heading img {
  animation: headingTerminalIn 1.02s cubic-bezier(.16,.84,.2,1) both;
}
@keyframes headingTerminalIn {
  0% { opacity: 0; transform: translateX(-90px) skewX(-8deg) scale(.92); clip-path: inset(0 100% 0 0); filter: blur(7px) brightness(1.5); }
  58% { opacity: 1; transform: translateX(10px) skewX(2deg) scale(1.025); clip-path: inset(0 0 0 0); filter: blur(0) brightness(1.12); }
  100% { opacity: 1; transform: none; clip-path: inset(0); filter: none; }
}

/* From Trash to Treasure: подпрыгивает как редкая карта */
.lore-heading.heading-animated img,
.section-heading.visible .lore-heading img {
  animation: headingLoreIn 1.08s cubic-bezier(.15,.9,.18,1.2) both;
}
@keyframes headingLoreIn {
  0% { opacity: 0; transform: translateY(90px) rotate(-7deg) scale(.7); filter: blur(8px); }
  58% { opacity: 1; transform: translateY(-15px) rotate(2.2deg) scale(1.06); filter: blur(0); }
  78% { transform: translateY(7px) rotate(-1deg) scale(.985); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 14px 18px rgba(92,8,24,.14)); }
}

/* Dex Signal: цифровой импульс / короткий glitch */
.dex-heading.heading-animated img,
.section-heading.visible .dex-heading img {
  animation: headingDexIn .92s cubic-bezier(.2,.82,.2,1) both;
}
@keyframes headingDexIn {
  0% { opacity: 0; transform: scaleX(.35) scaleY(1.28); filter: blur(10px) hue-rotate(70deg); }
  36% { opacity: 1; transform: translateX(-9px) scaleX(1.08); filter: blur(0) hue-rotate(-18deg); }
  48% { transform: translateX(8px) scaleX(.97); }
  62% { transform: translateX(-4px) scaleX(1.02); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 14px 18px rgba(92,8,24,.14)); }
}

/* Catch the Bandit: удар сверху с мягким отскоком */
.game-heading.heading-animated img,
.section-heading.visible .game-heading img {
  animation: headingGameIn 1.04s cubic-bezier(.12,.82,.15,1.18) both;
  transform-origin: 50% 72%;
}
@keyframes headingGameIn {
  0% { opacity: 0; transform: translateY(-110px) rotate(5deg) scale(1.18); filter: blur(7px); }
  58% { opacity: 1; transform: translateY(15px) rotate(-2deg) scale(.97); filter: blur(0); }
  76% { transform: translateY(-7px) rotate(.7deg) scale(1.02); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 14px 18px rgba(92,8,24,.14)); }
}

.art-heading.heading-animated img:hover {
  transform: translateY(-4px) scale(1.015);
  transition: transform .24s ease, filter .24s ease;
  filter: drop-shadow(0 19px 24px rgba(92,8,24,.2));
}

@media (max-width: 760px) {
  .sound-toggle { right: 12px; bottom: 82px; width: 54px; min-height: 50px; border-radius: 15px; }
  .sound-toggle b { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready #top .name-logo,
  html.motion-ready #top .hero-card-wrap,
  html.motion-ready .section-heading .art-heading img {
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    transform: none !important;
    clip-path: none !important;
  }
  .hero-card-clip::after,
  .section-heading .art-heading::after { display: none !important; }
}


/* ============================================================
   V4.7 HOTFIX — повторные броски, положение SFX и idle заголовков
   ============================================================ */

/* Кнопка SFX немного выше.
   Увеличивай bottom, чтобы поднять её ещё выше. */
.sound-toggle {
  bottom: 170px !important;
}

/* После индивидуальной анимации появления каждый графический
   заголовок начинает очень мягко покачиваться. */
.terminal-heading.heading-animated img,
.section-heading.visible .terminal-heading img {
  animation:
    headingTerminalIn 1.02s cubic-bezier(.16,.84,.2,1) both,
    headingGentleSway 5.8s ease-in-out 1.08s infinite !important;
}

.lore-heading.heading-animated img,
.section-heading.visible .lore-heading img {
  animation:
    headingLoreIn 1.08s cubic-bezier(.15,.9,.18,1.2) both,
    headingGentleSwayReverse 6.2s ease-in-out 1.14s infinite !important;
}

.dex-heading.heading-animated img,
.section-heading.visible .dex-heading img {
  animation:
    headingDexIn .92s cubic-bezier(.2,.82,.2,1) both,
    headingGentleSway 5.5s ease-in-out 1s infinite !important;
}

.game-heading.heading-animated img,
.section-heading.visible .game-heading img {
  animation:
    headingGameIn 1.04s cubic-bezier(.12,.82,.15,1.18) both,
    headingGentleSwayReverse 5.9s ease-in-out 1.12s infinite !important;
}

@keyframes headingGentleSway {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  32% { transform: translate3d(0,-4px,0) rotate(-.55deg) scale(1.006); }
  68% { transform: translate3d(0,3px,0) rotate(.48deg) scale(.998); }
}

@keyframes headingGentleSwayReverse {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  34% { transform: translate3d(0,3px,0) rotate(.48deg) scale(.998); }
  70% { transform: translate3d(0,-4px,0) rotate(-.55deg) scale(1.006); }
}

@media (max-width: 760px) {
  /* На телефоне кнопка тоже чуть выше нижней навигации. */
  .sound-toggle { bottom: 104px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .section-heading .art-heading img { animation: none !important; }
}


/* ============================================================
   V4.8 — Pumpball open SFX + clean Evolution Terminal heading
   ============================================================ */

/* У Evolution Terminal полностью убран размытый тёмный drop-shadow.
   Остальные заголовки сохраняют свои тени и анимации. */
.terminal-heading img,
.terminal-heading.heading-animated img:hover,
.section-heading.visible .terminal-heading img:hover {
  filter: none !important;
}


/* ============================================================
   V5.1 — hero shine clipped strictly to the card
   ============================================================ */

/* The outer wrapper still handles tilt, arrival animation, corners and
   perspective. Only the visible card surface clips glare/foil layers. */
.hero-card-clip {
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 38px 70px rgba(95,8,24,.28),
    0 0 0 6px #fff,
    0 0 0 10px var(--red),
    13px 14px 0 rgba(7,63,125,.18);
}

/* The frame now belongs to the clip container, so the image itself does
   not create a second oversized shadow rectangle. */
.hero-card {
  box-shadow: none !important;
  border-radius: 24px;
}

.card-glare,
.hero-card-clip::after {
  border-radius: inherit;
  overflow: hidden;
}

.card-glare {
  z-index: 3;
  pointer-events: none;
}

.hero-card-clip::after {
  z-index: 4;
}

@media (max-width: 760px) {
  .hero-card-clip,
  .hero-card {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card-clip::after { display: none !important; }
}


/* ==========================================================
   V4.10 — STYLED POKÉDEX ABILITY / WEAKNESS ICONS
   ========================================================== */
#stage-abilities,#stage-weaknesses,#stage-types{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}.pokedex-icon-item{display:inline-flex;align-items:center;gap:7px;min-width:0;padding:3px 9px 3px 3px;border:1px solid rgba(153,17,36,.16);border-radius:14px;background:rgba(255,255,255,.66);box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 3px 9px rgba(91,18,32,.055)}.pokedex-icon-item img{display:block;width:38px;height:38px;flex:0 0 38px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(11,29,51,.16))}.profile-grid .pokedex-icon-item>span{margin:0;color:#3f2028;font:700 11px/1.1 "Fredoka","Arial Rounded MT Bold",sans-serif;letter-spacing:0;text-transform:none}.pokedex-icon-item--weakness{background:rgba(255,248,248,.76)}.pokedex-type-tag{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border:1px solid rgba(17,74,132,.18);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(232,242,252,.78));color:#0a4f93!important;font:800 10px/1 "Fredoka","Arial Rounded MT Bold",sans-serif!important;letter-spacing:.04em!important;text-transform:uppercase}.pokedex-hidden-label{display:inline-flex;align-items:center;gap:11px}.pokedex-hidden-label img{display:block;width:54px;height:54px;flex:0 0 54px;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(11,29,51,.2))}.move-card strong .pokedex-hidden-label,.ability-card strong .pokedex-hidden-label{margin:0}.move-card strong .pokedex-hidden-label>span,.ability-card strong .pokedex-hidden-label>span{color:inherit;font:inherit;letter-spacing:inherit}.profile-grid b#stage-abilities,.profile-grid b#stage-weaknesses,.profile-grid b#stage-types{margin-top:8px}.ability-card{overflow:hidden}
@media (max-width:760px){.pokedex-icon-item{gap:6px;padding:3px 8px 3px 3px}.pokedex-icon-item img{width:34px;height:34px;flex-basis:34px}.profile-grid .pokedex-icon-item>span{font-size:10px}.pokedex-hidden-label img{width:48px;height:48px;flex-basis:48px}.pokedex-hidden-label{gap:9px}}


/* ==========================================================
   FINAL RELEASE — ANIMATED HERO TICKER BADGE
   The anchor keeps the manual position; the complete badge animates.
   ========================================================== */
.hero-title .token-stamp-anchor {
  display: inline-flex;
  position: relative;
  overflow: visible;
}

.hero-title .token-stamp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  transform-origin: 50% 55%;
  will-change: transform, filter, box-shadow;
  animation:
    heroTickerBadgeReveal .88s cubic-bezier(.16,.92,.22,1.18) .42s both,
    heroTickerBadgeIdle 3.6s ease-in-out 1.42s infinite,
    heroTickerGlow 3.4s ease-in-out 1.05s infinite;
}

.hero-title .token-stamp > span {
  position: relative;
  z-index: 2;
  display: block;
  transform: none;
  animation: none;
}

.hero-title .token-stamp::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -45%;
  bottom: -45%;
  left: -55%;
  width: 32%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,.06) 24%,
    rgba(255,255,255,.92) 50%,
    rgba(255,235,145,.32) 68%,
    transparent 100%
  );
  transform: skewX(-18deg);
  mix-blend-mode: screen;
  animation: heroTickerShine 4.2s ease-in-out 1.65s infinite;
}

.hero-title .token-stamp::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 3px;
  border-radius: 8px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

@keyframes heroTickerBadgeReveal {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.72) rotate(-10deg);
    filter: blur(4px) saturate(.85);
  }
  58% {
    opacity: 1;
    transform: translateY(-5px) scale(1.1) rotate(2.4deg);
    filter: blur(0) saturate(1.12);
  }
  78% {
    transform: translateY(2px) scale(.97) rotate(-1.1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0) saturate(1);
  }
}

@keyframes heroTickerBadgeIdle {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  25% { transform: translateY(-3px) scale(1.02) rotate(-1.1deg); }
  52% { transform: translateY(1px) scale(.992) rotate(.75deg); }
  76% { transform: translateY(-1px) scale(1.01) rotate(-.35deg); }
}

@keyframes heroTickerShine {
  0%, 58% { left: -55%; opacity: 0; }
  63% { opacity: .9; }
  78% { left: 128%; opacity: 0; }
  100% { left: 128%; opacity: 0; }
}

@keyframes heroTickerGlow {
  0%, 100% {
    box-shadow: 5px 6px 0 #073f7d, inset 0 2px 0 rgba(255,255,255,.3);
  }
  50% {
    box-shadow: 5px 6px 0 #073f7d, 0 0 18px rgba(239,64,82,.24), inset 0 2px 0 rgba(255,255,255,.42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .token-stamp,
  .hero-title .token-stamp::before {
    animation: none !important;
  }
}