/* $PUMPACHU site (2026-10-20): the pump.fun pill as a pocket monster. Dark like pump.fun, mint glow, HUD labels, toy-gloss capsule buttons.
   Type: Luckiest Guy (display), Fredoka (UI), the system mono (HUD). assets/ holds stand-ins; the final renders land under the same names. */
@font-face{font-family:"Luckiest Guy";font-weight:400;font-display:swap;src:url(assets/fonts/LuckiestGuy-Regular.ttf) format("truetype")}
@font-face{font-family:"Fredoka";font-weight:300 700;font-stretch:75% 125%;font-display:swap;src:url(assets/fonts/Fredoka-VF.ttf) format("truetype")}

:root{
  --bg:#0B1714;--panel:#10221D;--mint:#5FCB88;--forest:#1D3934;--spark:#9CF5BF;--gold:#FFCB05;--low:#FF6B5E;
  --dim:rgba(255,255,255,.74);--faint:rgba(255,255,255,.5);--line:rgba(156,245,191,.14);--line2:rgba(156,245,191,.3);
  --display:"Luckiest Guy","Arial Black",Impact,sans-serif;
  --ui:"Fredoka",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --gut:16px;
  --vh:1vh;              /* app.js pins it in px at load, so the hero keeps its height when innerHeight changes */
  --hero-pos:72% 50%;    /* where the character sits in hero.jpg (the final render puts it in the right half) */
  --wm-x:.12;--wm-t:.085;--wm-b:.09; /* transparent padding baked into wordmark.png, as fractions of its width; set 0 if the final file is tight-cropped */
  color-scheme:dark;
}
@supports (height:1svh){:root{--vh:1svh}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:#fff;font:400 17px/1.5 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
svg{display:block}
:focus-visible{outline:2px solid var(--spark);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;padding:10px 14px;border-radius:999px;background:#fff;color:var(--bg);font-weight:600}
.skip:focus{left:8px}
[hidden]{display:none!important}
/* print grain over everything */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sparks{position:fixed;inset:0;z-index:50;width:100%;height:100%;pointer-events:none}

/* ---- type ---- */
.kicker{margin:0;display:inline-flex;align-items:center;gap:14px;font:600 12px/1.3 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--spark)}
.kicker::before,.kicker--c::after{content:"";width:28px;height:1px;background:currentColor;opacity:.55}
.kicker--c{display:flex;justify-content:center}
.h2{margin:0;text-align:center;font:400 clamp(52px,13vw,108px)/.9 var(--display);letter-spacing:.02em;color:#fff;text-shadow:0 .06em 0 var(--forest),0 0 .7em rgba(95,203,136,.35)}

/* ---- buttons ---- */
/* the Buy button is the pill itself: a pearl cap with a bolt, a forest seam, a glossy mint body */
.buy{position:relative;display:inline-flex;align-items:stretch;height:58px;border-radius:999px;text-decoration:none;color:var(--bg);
  box-shadow:0 0 0 2px var(--forest),0 18px 40px -14px rgba(95,203,136,.85),0 0 70px -20px rgba(156,245,191,.9);transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s}
.buy__cap{display:grid;place-items:center;width:58px;border-radius:999px 0 0 999px;border-right:3px solid var(--forest);background:radial-gradient(120% 100% at 32% 22%,#fff 0%,#EEF5F1 46%,#C3D3CB 100%)}
.buy__cap svg{width:24px;height:24px;fill:var(--gold);stroke:var(--forest);stroke-width:1.6;stroke-linejoin:round}
.buy__body{display:flex;align-items:center;padding:0 28px 0 18px;border-radius:0 999px 999px 0;background:linear-gradient(180deg,#A4EDBF 0%,var(--mint) 50%,#45AD6E 100%);font:700 16px/1 var(--ui);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.buy::after{content:"";position:absolute;left:10px;right:14px;top:4px;height:40%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0));pointer-events:none}
.buy:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 0 2px var(--forest),0 22px 46px -14px rgba(95,203,136,1),0 0 90px -16px rgba(156,245,191,1)}
.buy:hover .buy__cap svg{animation:zap .45s steps(2) 2}
.buy--sm{height:48px}
.buy--sm .buy__cap{width:48px}
.buy--sm .buy__cap svg{width:20px;height:20px}
.buy--sm .buy__body{font-size:14px;padding:0 22px 0 14px}
.ca-pill{display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 22px;border-radius:999px;border:1px solid var(--line2);background:rgba(16,34,29,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:600 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--spark);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.ca-pill__v{color:#fff;letter-spacing:.06em}
.ca-pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ca-pill.has-ca .ca-pill__v{text-transform:none}
.ca-pill:hover{border-color:var(--mint);box-shadow:0 0 26px -6px rgba(95,203,136,.75)}
.has-ca{cursor:copy}
.socials{display:flex;gap:10px}
.socials a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:rgba(16,34,29,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.socials a:hover{transform:translateY(-2px);border-color:var(--mint);box-shadow:0 0 22px -4px rgba(95,203,136,.8)}
.socials svg{width:18px;height:18px;fill:currentColor}
.socials svg.stroke{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 30px;border-radius:999px;border:1px solid var(--line2);background:rgba(16,34,29,.6);color:var(--spark);font:600 12px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;transition:border-color .2s,box-shadow .2s,color .2s}
.btn:hover{border-color:var(--mint);color:#fff;box-shadow:0 0 34px -8px rgba(95,203,136,.85)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:95;margin:0;padding:13px 22px;border-radius:999px;background:var(--mint);color:var(--bg);font:700 15px/1 var(--ui);box-shadow:0 0 0 2px var(--forest),0 14px 40px -10px rgba(95,203,136,.9);opacity:0;transform:translate(-50%,16px);transition:opacity .25s,transform .25s;pointer-events:none}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---- hero: phones stack the square art above the copy; desktop runs hero.jpg full-bleed with the copy on the left ---- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:calc(var(--vh) * 100);display:flex;flex-direction:column;padding:0 0 34px}
.hero__art{position:relative;z-index:-1;flex:none;height:clamp(300px,min(106vw,calc(var(--vh) * 54)),640px);-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);mask-image:linear-gradient(180deg,#000 58%,transparent)}
.hero__float{position:absolute;inset:0;animation:float 7s ease-in-out infinite}
.hero__char{position:absolute;top:-3%;left:-3%;width:106%;height:106%;max-width:none;object-fit:cover;object-position:50% 40%;transform:translate3d(calc(var(--px,0) * -22px),calc(var(--py,0) * -14px),0)}
.hud{position:absolute;inset:0;z-index:3;pointer-events:none;font:600 10px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--spark)}
/* four corner brackets */
.hud__frame{--c:rgba(156,245,191,.5);position:absolute;inset:12px;background:
  linear-gradient(var(--c),var(--c)) 0 0/18px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 18px,
  linear-gradient(var(--c),var(--c)) 100% 0/18px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 18px,
  linear-gradient(var(--c),var(--c)) 0 100%/18px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 18px,
  linear-gradient(var(--c),var(--c)) 100% 100%/18px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 18px;background-repeat:no-repeat}
.hud__brand{position:absolute;left:26px;top:25px;font:400 17px/1 var(--display);letter-spacing:.04em;text-transform:none;color:#fff;text-shadow:0 2px 0 var(--forest)}
.hud__net{position:absolute;right:26px;top:29px;display:flex;align-items:center;gap:8px}
.hud__net i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);animation:blink 2.4s ease-in-out infinite}
.hud__no{display:none}
.hero__copy{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:-76px;padding:0 var(--gut);text-align:center}
.hero__h{margin:10px 0 0;line-height:0}
.wm{--wm:min(540px,96vw);width:var(--wm);max-width:none;margin:calc(var(--wm) * var(--wm-t) * -1) 0 calc(var(--wm) * var(--wm-b) * -1);filter:drop-shadow(0 12px 30px rgba(0,0,0,.55))}
.hero__line{margin:16px 0 0;max-width:22em;font:500 clamp(18px,4.9vw,22px)/1.38 var(--ui);color:var(--dim);text-wrap:balance}
.hero__line b{display:block;font-weight:600;color:#fff;text-shadow:0 0 18px rgba(156,245,191,.45)}
.hero__cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:26px}
.hero .socials{margin-top:16px}
.cue{display:none}
@media (min-width:900px){
  :root{--gut:48px}
  .hero{justify-content:center;padding:110px 0 120px}
  .hero__art{position:absolute;inset:0;height:auto;-webkit-mask-image:none;mask-image:none}
  .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
    linear-gradient(90deg,rgba(11,23,20,.94) 0%,rgba(11,23,20,.7) 30%,rgba(11,23,20,0) 58%),
    linear-gradient(180deg,rgba(11,23,20,.6) 0%,rgba(11,23,20,0) 20%,rgba(11,23,20,0) 72%,var(--bg) 100%),
    radial-gradient(42% 55% at 20% 58%,rgba(95,203,136,.16),transparent 70%)}
  .hud__frame{inset:20px}
  .hud__brand{left:40px;top:38px;font-size:20px}
  .hud__net{right:40px;top:43px}
  .hud__no{display:block;position:absolute;right:40px;bottom:42px;color:var(--faint)}
  .hero__copy{flex:none;margin:0 0 0 clamp(48px,7vw,124px);padding:0;max-width:700px;align-items:flex-start;text-align:left}
  .kicker:not(.kicker--c){margin-left:2px}
  .wm{--wm:min(680px,46vw);margin-left:calc(var(--wm) * var(--wm-x) * -1)}
  .hero__line{max-width:none;font-size:22px}
  .hero__cta{flex-direction:row;align-items:center;margin-top:30px}
  .hero .socials{margin-top:18px}
  .cue{position:absolute;left:50%;bottom:30px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateX(-50%);font:600 10px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--faint);text-decoration:none;transition:color .2s}
  .cue:hover{color:var(--spark)}
  .cue i{width:1px;height:38px;background:linear-gradient(var(--spark),transparent);transform-origin:top;animation:cue 2.4s cubic-bezier(.6,0,.3,1) infinite}
}

/* ---- encounter: an RPG battle screen built over encounter.jpg ---- */
.encounter{position:relative;padding:92px var(--gut) 104px;background:radial-gradient(60% 34% at 50% 0%,rgba(95,203,136,.13),transparent 72%)}
.battle{position:relative;isolation:isolate;max-width:1180px;margin:30px auto 0;border-radius:24px;overflow:hidden;background:var(--panel);box-shadow:0 0 0 1px var(--line2),0 50px 90px -40px rgba(0,0,0,.9),0 0 110px -40px rgba(95,203,136,.6)}
/* the encounter wipe: two bars part when the screen scrolls in (app.js adds .is-on) */
.js .battle::before,.js .battle::after{content:"";position:absolute;left:0;right:0;z-index:6;height:50.5%;background:#050B09;transition:transform .75s cubic-bezier(.75,0,.2,1)}
.js .battle::before{top:0}
.js .battle::after{bottom:0}
.js .battle.is-on::before{transform:translateY(-101%)}
.js .battle.is-on::after{transform:translateY(101%)}
.battle__scene{position:relative;aspect-ratio:1/1;overflow:hidden}
.battle__scene>img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.battle__fx{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
.battle.is-hit .battle__fx{background:#fff;animation:flash .5s ease-out}
.battle.is-hit .battle__scene>img{animation:shake .45s}
.battle.is-pump .battle__fx{background:radial-gradient(60% 60% at 50% 55%,rgba(156,245,191,.75),rgba(95,203,136,.25) 55%,transparent 80%);animation:glow 1s ease-out}
.foe{position:absolute;left:12px;top:12px;z-index:2;min-width:208px;padding:10px 14px 9px;border-radius:14px;background:rgba(255,255,255,.95);color:var(--bg);border:3px solid var(--bg);box-shadow:0 5px 0 rgba(5,11,9,.35)}
.js .foe{transform:translateX(calc(-100% - 20px));transition:transform .6s .55s cubic-bezier(.2,.9,.25,1.15)}
.js .battle.is-on .foe{transform:none}
.foe__name{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:18px;font:700 15px/1 var(--ui);letter-spacing:.05em}
.foe__name span{font:600 12px/1 var(--mono);letter-spacing:.04em}
.hp{display:flex;align-items:center;gap:6px;margin-top:8px}
.hp__tag{padding:3px 5px;border-radius:4px;background:var(--gold);font:700 9px/1 var(--mono);letter-spacing:.06em;color:var(--bg)}
.hp__bar{flex:1;height:11px;padding:1px;border-radius:999px;background:#21302B;border:2px solid var(--bg)}
.hp__bar i{display:block;width:var(--hp,100%);height:100%;border-radius:999px;background:var(--mint);box-shadow:inset 0 2px 0 rgba(255,255,255,.4);transition:width .9s cubic-bezier(.3,.7,.3,1),background-color .3s}
.hp__bar i[data-lvl="mid"]{background:var(--gold)}
.hp__bar i[data-lvl="low"]{background:var(--low)}
.hp__num{margin:5px 0 0;text-align:right;font:600 11px/1 var(--mono);letter-spacing:.06em}
.battle__ui{display:grid;gap:10px;padding:10px}
.tb{position:relative;min-height:108px;padding:16px 20px 24px;border-radius:16px;background:#fff;color:var(--bg);border:4px solid #050B09;outline:2px solid var(--mint);outline-offset:-9px;cursor:pointer}
.tb__text{margin:0;font:600 clamp(19px,5vw,26px)/1.32 var(--ui)}
.tb__buy{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:9px 16px;border-radius:999px;background:var(--mint);color:var(--bg);border:2px solid var(--forest);font:700 14px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;box-shadow:0 3px 0 var(--forest)}
.tb__buy:hover{background:var(--spark)}
.tb__more{position:absolute;right:20px;bottom:12px;font-size:13px;line-height:1;color:var(--forest);animation:blink 1s steps(2,jump-none) infinite}
.menu{display:grid;grid-template-columns:1fr 1fr;padding:8px;border-radius:16px;background:#fff;border:4px solid #050B09;outline:2px solid var(--mint);outline-offset:-9px}
.menu button{position:relative;min-height:54px;padding:0 10px 0 34px;border:0;border-radius:10px;background:transparent;color:var(--bg);font:700 21px/1 var(--ui);letter-spacing:.06em;text-align:left;cursor:pointer;transition:background-color .15s,opacity .3s}
.menu button::before{content:"▶";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--forest);opacity:0}
.menu button:hover:not(:disabled),.menu button:focus-visible{background:#E4F6EB;outline:none}
.menu button:hover:not(:disabled)::before,.menu button:focus-visible::before{opacity:1}
.menu button:disabled{opacity:.35;cursor:default}
@media (min-width:760px){
  .battle{aspect-ratio:16/9}
  .battle__scene{position:absolute;inset:0;aspect-ratio:auto}
  .foe{left:24px;top:24px;min-width:300px;padding:12px 18px 11px}
  .foe__name{font-size:19px}
  .foe__name span{font-size:14px}
  .hp__bar{height:13px}
  .battle__ui{position:absolute;left:20px;right:20px;bottom:20px;z-index:4;grid-template-columns:minmax(0,1fr) minmax(300px,34%);gap:14px;padding:0}
  .tb{min-height:134px;padding:24px 30px 28px}
  .tb__text{font-size:clamp(22px,2.2vw,28px)}
}

/* ---- dex entry: our own handheld, forest body, mint LCD ---- */
.dex{padding:92px var(--gut) 108px;background:radial-gradient(52% 40% at 50% 52%,rgba(95,203,136,.12),transparent 72%)}
.device{position:relative;max-width:1060px;margin:30px auto 0;padding:16px 14px 18px;border-radius:34px;background:linear-gradient(158deg,#2C5249 0%,var(--forest) 36%,#142A25 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.13),inset 0 -6px 0 rgba(0,0,0,.28),0 0 0 1px rgba(156,245,191,.12),0 60px 100px -45px rgba(0,0,0,.95),0 0 130px -40px rgba(95,203,136,.5)}
.device__top{display:flex;align-items:center;gap:10px;padding:2px 8px 14px}
.led{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#fff,var(--mint) 42%,#2B7A4E);box-shadow:0 0 10px rgba(95,203,136,.9)}
.led--power{width:22px;height:22px;box-shadow:0 0 0 3px #10241F,0 0 16px rgba(95,203,136,.95);animation:pulse 2.6s ease-in-out infinite}
.led--gold{background:radial-gradient(circle at 35% 32%,#fff,var(--gold) 45%,#B08B00);box-shadow:0 0 10px rgba(255,203,5,.6)}
.led--pearl{background:radial-gradient(circle at 35% 32%,#fff,#E3ECE7 50%,#9DB0A7);box-shadow:none}
.device__label{margin-left:8px;font:600 10px/1 var(--mono);letter-spacing:.34em;text-transform:uppercase;color:rgba(156,245,191,.55)}
.grille{margin-left:auto;width:60px;height:16px;background:radial-gradient(circle,rgba(0,0,0,.5) 1.6px,transparent 2.1px) 0 0/8px 8px}
.device__body{display:grid;gap:14px}
.device__screen{padding:12px;border-radius:22px;background:#0B1C18;box-shadow:inset 0 3px 10px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.08)}
/* light LCD: multiply melts any light backdrop baked into dex.png into the screen */
.lcd{position:relative;isolation:isolate;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:radial-gradient(75% 75% at 50% 42%,#F4FCF7 0%,#DAF4E5 58%,#B2E3C6 100%);box-shadow:0 0 0 1px rgba(156,245,191,.55),0 0 46px -6px rgba(95,203,136,.8)}
.lcd img{position:absolute;inset:5%;width:90%;height:90%;object-fit:contain;mix-blend-mode:multiply;animation:bob 4.5s ease-in-out infinite}
.lcd::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(29,57,52,.07) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(29,57,52,.28))}
.lcd__scan{position:absolute;left:0;right:0;top:0;height:28%;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(95,203,136,.28) 70%,rgba(156,245,191,.55) 100%);transform:translateY(-100%);animation:scan 4s cubic-bezier(.5,0,.5,1) infinite}
.lcd__tag{position:absolute;left:14px;bottom:12px;z-index:2;font:600 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--forest)}
.device__data{padding:22px 20px 24px;border-radius:22px;background:linear-gradient(180deg,#0D1F1A,#091612);box-shadow:inset 0 3px 10px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.08)}
.dd__no{margin:0;font:600 12px/1 var(--mono);letter-spacing:.3em;color:var(--spark)}
.dd__name{margin:12px 0 0;font:400 clamp(44px,12.5vw,72px)/.9 var(--display);letter-spacing:.02em;text-shadow:0 .06em 0 var(--forest),0 0 .6em rgba(95,203,136,.3)}
.dd__cat{margin:8px 0 0;font:500 18px/1.2 var(--ui);color:var(--dim)}
.dd__types{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.type{padding:7px 13px;border-radius:999px;font:700 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--bg);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 0 0 2px var(--forest)}
.type--electric{background:var(--gold)}
.type--degen{background:var(--mint)}
.dd__stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:20px 0 0;border-radius:14px;overflow:hidden;background:var(--line)}
.dd__stats div{padding:13px 15px 14px;background:#0E211C}
.dd__stats .dd__ability{grid-column:1/-1}
.dd__stats dt{font:600 10px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.dd__stats dd{margin:7px 0 0;font:600 21px/1.1 var(--ui);color:#fff}
.dd__ability dd{font:400 24px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--spark)}
.dd__flavour{margin:18px 0 0;padding-left:14px;border-left:2px solid var(--mint);font:500 16px/1.5 var(--ui);color:var(--dim);text-wrap:pretty}
.device__controls{display:flex;align-items:center;gap:12px;padding:16px 10px 2px}
.knob{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7FD9A0,var(--mint) 45%,#2F7D52);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 3px 0 #0E211C}
.knob--gold{width:22px;height:22px;background:radial-gradient(circle at 35% 30%,#FFE680,var(--gold) 50%,#A88400)}
/* tiny two-tone capsule keys */
.pillbtn{width:38px;height:14px;border-radius:999px;background:linear-gradient(90deg,#EEF5F1 0 50%,var(--mint) 50%);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 2px 0 #0E211C;transform:rotate(-24deg)}
.pillbtn:first-of-type{margin-left:auto}
/* held upright it stays handheld-sized; it turns sideways once there is room for both panels */
@media (max-width:859px){.device{max-width:520px}}
@media (min-width:860px){
  .device{padding:24px 26px 24px}
  .device__body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
  .device__screen{display:flex}
  .lcd{flex:1;aspect-ratio:auto;min-height:440px}
  .device__data{display:flex;flex-direction:column;justify-content:center;padding:32px 34px}
  .dd__name{font-size:clamp(44px,5.2vw,72px)}
}

/* ---- evolution ---- */
.evo{padding:92px var(--gut) 108px;text-align:center;background:radial-gradient(50% 36% at 50% 62%,rgba(95,203,136,.1),transparent 72%)}
.evo__row{display:grid;justify-items:center;gap:6px;max-width:1120px;margin:46px auto 0}
.evo__slot{margin:0;display:flex;flex-direction:column;align-items:center}
.evo__art{position:relative;width:min(230px,60vw);aspect-ratio:1/1}
/* the stage under each form: a soft glow and a lit floor */
.evo__art::before{content:"";position:absolute;inset:10% 8% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(95,203,136,.42),transparent);filter:blur(12px)}
.evo__art::after{content:"";position:absolute;left:14%;right:14%;bottom:-6px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(156,245,191,.55),transparent)}
.evo__art img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;border-radius:22px}
.evo__slot--baby .evo__art{width:min(160px,42vw)}
.evo__slot--baby .evo__art::before{opacity:.35}
.evo__slot--baby img{filter:saturate(.35) brightness(.5)}
.evo__slot--lit img{filter:drop-shadow(0 0 26px rgba(95,203,136,.6))}
.evo__slot--lit .evo__art{animation:bob 4.5s ease-in-out infinite}
.evo__slot--mystery .evo__art::before{inset:0;background:radial-gradient(closest-side,rgba(156,245,191,.75),rgba(95,203,136,.3) 55%,transparent);animation:pulse-o 3s ease-in-out infinite}
.evo__slot--mystery img{filter:brightness(0) drop-shadow(0 0 2px rgba(156,245,191,.9)) drop-shadow(0 0 20px rgba(95,203,136,.7))}
.evo__q{position:absolute;inset:0;z-index:2;display:grid;place-items:center;font:400 clamp(84px,22vw,120px)/1 var(--display);color:var(--gold);-webkit-text-stroke:7px var(--forest);paint-order:stroke fill;text-shadow:0 7px 0 var(--forest),0 0 40px rgba(255,203,5,.35)}
.evo__slot figcaption{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:20px}
.evo__name{font:400 clamp(28px,7vw,36px)/1 var(--display);letter-spacing:.03em;text-shadow:0 .07em 0 var(--forest)}
.evo__slot--baby .evo__name{color:var(--faint)}
.evo__tag{font:600 11px/1.3 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--spark)}
.evo__arrow{display:grid;place-items:center;height:56px;color:var(--mint)}
.evo__arrow svg{width:44px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);filter:drop-shadow(0 0 6px rgba(95,203,136,.8))}
.evo__arrow path:first-child{stroke-dasharray:4 6;animation:flow 1s linear infinite}
@media (min-width:640px){
  .evo__row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:10px}
  .evo__art{width:min(270px,22vw)}
  .evo__slot--baby .evo__art{width:min(180px,15vw)}
  .evo__name{font-size:clamp(20px,3vw,36px)}
  .evo__tag{letter-spacing:clamp(.12em,.6vw,.26em)}
  .evo__arrow{height:auto;align-self:center;margin-top:-60px}
  .evo__arrow svg{width:clamp(36px,4vw,56px);height:28px;transform:none}
}

/* ---- stickers ---- */
.stickers{padding:92px var(--gut) 116px;text-align:center}
.st-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px;max-width:1080px;margin:44px auto 48px;padding:0}
.st img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:20px;transform:rotate(var(--r,0deg));filter:drop-shadow(0 16px 22px rgba(0,0,0,.5));cursor:grab;-webkit-tap-highlight-color:transparent}
.st:nth-child(8n+1){--r:-5deg}.st:nth-child(8n+2){--r:4deg}.st:nth-child(8n+3){--r:-2deg}.st:nth-child(8n+4){--r:6deg}
.st:nth-child(8n+5){--r:3deg}.st:nth-child(8n+6){--r:-6deg}.st:nth-child(8n+7){--r:5deg}.st:nth-child(8n+8){--r:-3deg}
.st.is-wiggle img{animation:wiggle .62s cubic-bezier(.3,1.4,.5,1)}
@media (hover:hover){.st:hover img{animation:wiggle .62s cubic-bezier(.3,1.4,.5,1)}}
@media (min-width:560px){.st-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:900px){.st-grid{gap:34px 30px}}

/* ---- footer ---- */
.foot{position:relative;padding:84px var(--gut) calc(52px + env(safe-area-inset-bottom));text-align:center;background:linear-gradient(180deg,var(--bg),#060F0C);border-top:1px solid var(--line)}
.foot::before{content:"";position:absolute;left:50%;top:-1px;width:min(420px,70%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--mint),transparent);box-shadow:0 0 18px var(--mint)}
.foot__wm{--wm:min(300px,72vw);width:var(--wm);margin:calc(var(--wm) * var(--wm-t) * -1) auto calc(var(--wm) * var(--wm-b) * -1)}
.ca-box{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;max-width:min(640px,100%);margin:26px auto 0;padding:16px 22px;border-radius:18px;border:1px solid var(--line2);background:var(--panel);font:600 13px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--spark);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.ca-box:hover{border-color:var(--mint);box-shadow:0 0 30px -8px rgba(95,203,136,.75)}
.ca-box__v{font:600 14px/1.4 var(--mono);letter-spacing:.04em;color:#fff;overflow-wrap:anywhere}
.ca-box.has-ca .ca-box__v{text-transform:none}
.ca-box__copy{padding:6px 12px;border-radius:999px;background:var(--mint);color:var(--bg);font:700 11px/1 var(--ui);letter-spacing:.14em}
.foot__links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:24px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);font:600 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.chip:hover{border-color:var(--mint);box-shadow:0 0 22px -6px rgba(95,203,136,.8)}
.foot__legal{max-width:520px;margin:34px auto 0;font:500 13px/1.6 var(--ui);color:var(--dim)}
.foot__micro,.foot__copy{margin:10px 0 0;font:600 10px/1.5 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

/* ---- reveal on scroll (only while app.js runs) ---- */
.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.hero__copy .reveal:nth-child(2){transition-delay:.08s}.hero__copy .reveal:nth-child(3){transition-delay:.16s}
.hero__copy .reveal:nth-child(4){transition-delay:.24s}.hero__copy .reveal:nth-child(5){transition-delay:.3s}
.st.reveal:nth-child(4n+2){transition-delay:.07s}.st.reveal:nth-child(4n+3){transition-delay:.14s}.st.reveal:nth-child(4n+4){transition-delay:.21s}
.evo__slot--lit.reveal{transition-delay:.12s}.evo__slot--mystery.reveal{transition-delay:.24s}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes blink{50%{opacity:.15}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px #10241F,0 0 10px rgba(95,203,136,.7)}50%{box-shadow:0 0 0 3px #10241F,0 0 26px 4px rgba(95,203,136,1)}}
@keyframes pulse-o{0%,100%{opacity:.75;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
@keyframes scan{0%{transform:translateY(-100%)}70%,100%{transform:translateY(360%)}}
@keyframes cue{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes zap{50%{transform:rotate(-14deg) scale(1.15)}}
@keyframes flash{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
@keyframes glow{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-9px,3px)}40%{transform:translate(8px,-3px)}60%{transform:translate(-5px,2px)}80%{transform:translate(3px,-1px)}}
@keyframes flow{to{stroke-dashoffset:-10}}
@keyframes wiggle{0%{transform:rotate(var(--r,0deg)) scale(1)}25%{transform:rotate(calc(var(--r,0deg) - 9deg)) scale(1.1)}50%{transform:rotate(calc(var(--r,0deg) + 8deg)) scale(1.12)}75%{transform:rotate(calc(var(--r,0deg) - 3deg)) scale(1.06)}100%{transform:rotate(var(--r,0deg)) scale(1)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sparks{display:none}
  .js .reveal{opacity:1;transform:none}
  .js .battle::before,.js .battle::after{display:none}
  .js .foe{transform:none}
}

/* ---- moves gallery (two identical sets; -50% loops exactly one set) ---- */
.gallery{padding:92px 0 24px;text-align:center;overflow:hidden}
.marquee{margin-top:44px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__track{list-style:none;display:flex;width:max-content;margin:0;padding:0 0 18px;animation:marquee 80s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee__track li{flex:0 0 auto;width:min(560px,80vw);margin-right:22px}
.marquee__track img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--line2);box-shadow:0 24px 50px -22px rgba(0,0,0,.75),0 0 44px -20px rgba(95,203,136,.65)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (min-width:1100px){.st-grid{grid-template-columns:repeat(7,minmax(0,1fr));max-width:1280px}}
@media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto}}

/* ---- hero v3 (Kris 2026-10-20 "boring and stale"): a living battle stage. Back to front: stadium photo with a slow camera
   drift + storm flashes, rotating light rays, drifting capture capsules, the battle platform with pulsing rings, the character. ---- */
.hero__art{-webkit-mask-image:none;mask-image:none;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 45%;transform-origin:62% 52%;animation:kb 28s ease-in-out infinite alternate}
.hero__bg::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60% 50% at 70% 20%,rgba(156,245,191,.55),transparent 70%);opacity:0;mix-blend-mode:screen;animation:storm 9s steps(1,end) infinite}
.hero__bg::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(11,23,20,.2) 0%,rgba(11,23,20,0) 35%,rgba(11,23,20,.35) 75%,var(--bg) 100%)}
.hero__rays{position:absolute;left:50%;top:56%;z-index:-1;width:min(170vw,1700px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(156,245,191,.13) 0deg 5deg,transparent 5deg 14deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.55) 38%,transparent 72%);mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.55) 38%,transparent 72%);
  mix-blend-mode:screen;animation:spin 80s linear infinite}
.hero__stage{position:absolute;left:0;right:0;top:58px;bottom:0}
.hero__float{position:absolute;inset:0 0 8% 0}
.hero__char{inset:0;top:0;left:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 0 30px rgba(95,203,136,.55)) drop-shadow(0 26px 30px rgba(0,0,0,.6))}
.platform{position:absolute;left:50%;bottom:3%;width:min(78vw,420px);aspect-ratio:3.4;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(156,245,191,.75),rgba(95,203,136,.38) 45%,rgba(29,57,52,.4) 70%,transparent 72%);
  box-shadow:0 0 70px 10px rgba(95,203,136,.28),inset 0 0 0 2px rgba(156,245,191,.55)}
.platform::before,.platform::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(156,245,191,.8);animation:ring 3.4s cubic-bezier(.2,.6,.3,1) infinite}
.platform::after{animation-delay:1.7s}
.cap{position:absolute;z-index:0;width:var(--s,80px);height:auto;max-width:none;rotate:var(--r,0deg);opacity:var(--o,1);filter:var(--f,drop-shadow(0 0 16px rgba(95,203,136,.5)));animation:drift var(--d,10s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.cap--a{left:5%;top:16%;--s:54px;--r:-28deg;--d:11s;--o:.75;--f:blur(1.5px) drop-shadow(0 0 12px rgba(95,203,136,.4))}
.cap--b{right:6%;top:9%;--s:68px;--r:22deg;--d:9s;--dl:-3s}
.cap--c{left:62%;top:30%;--s:40px;--r:60deg;--d:13s;--o:.6;--f:blur(2.5px)}
.cap--d{right:-3%;bottom:6%;--s:130px;--r:-35deg;--d:12s;--dl:-5s;--o:.9;--f:blur(4px) drop-shadow(0 0 20px rgba(95,203,136,.45))}
.cap--e{left:-4%;bottom:18%;--s:96px;--r:38deg;--d:14s;--dl:-7s;--o:.85;--f:blur(3px)}
.hud__brand{display:flex;align-items:center;gap:9px}
.hud__icon{width:30px;height:auto;filter:drop-shadow(0 0 8px rgba(95,203,136,.6))}
.foot__head{display:block;width:min(150px,38vw);height:auto;margin:0 auto 6px;filter:drop-shadow(0 0 26px rgba(95,203,136,.5));animation:bob 5s ease-in-out infinite}
@media (min-width:900px){
  .hero__stage{left:auto;right:clamp(24px,6vw,120px);top:7%;bottom:5%;width:min(46vw,720px)}
  .hero__rays{left:auto;right:calc(clamp(24px,6vw,120px) + min(23vw,360px));top:50%;translate:50% -50%}
  .platform{width:min(40vw,560px)}
  .hero__bg img{object-position:60% 50%}
  .hud__icon{width:36px}
  .cap--a{left:4%;top:12%;--s:62px}
  .cap--c{left:44%;top:16%;--s:46px}
  .cap--d{right:2%;bottom:4%;--s:180px}
  .cap--e{left:34%;bottom:6%;--s:110px}
}
@media (max-width:899px){.cap--c,.cap--e{display:none}}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.14) translate3d(-1.6%,-1.2%,0)}}
@keyframes storm{0%,100%{opacity:0}61%{opacity:.85}62%{opacity:0}64%{opacity:.5}65%{opacity:0}}
@keyframes spin{to{rotate:360deg}}
@keyframes ring{0%{transform:scale(.55);opacity:.95}100%{transform:scale(1.3);opacity:0}}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -22px}}
/* phones: the stadium fills the whole first screen; the character keeps its old box at the top (same height as before) */
@media (max-width:899px){
  .hero{--art-h:clamp(300px,min(106vw,calc(var(--vh) * 54)),640px);padding-top:var(--art-h)}
  .hero__art{position:absolute;inset:0;height:auto}
  .hero__bg img{object-position:50% 30%}
  .hero__bg::after{background:linear-gradient(180deg,rgba(11,23,20,.15) 0%,rgba(11,23,20,0) 28%,rgba(11,23,20,.55) 52%,rgba(11,23,20,.8) 78%,var(--bg) 100%)}
  .hero__stage{top:58px;bottom:auto;height:calc(var(--art-h) - 58px)}
  .hero__rays{top:calc(var(--art-h) * .56)}
}

/* ---- origin (Kris 2026-10-20): pack → green ball → PUMPACHU, a real sequence, so the steps are numbered ---- */
.origin{padding:96px var(--gut) 40px;text-align:center}
.origin__row{list-style:none;counter-reset:step;display:grid;gap:22px;max-width:1180px;margin:44px auto 0;padding:0}
.origin__step{counter-increment:step;position:relative;display:grid;gap:14px;text-align:left}
.origin__step img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:22px;border:1px solid var(--line2);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.8),0 0 50px -24px rgba(95,203,136,.7)}
.origin__step::before{content:counter(step);position:absolute;left:14px;top:14px;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--mint);color:var(--bg);font:400 20px/1 var(--display);box-shadow:0 0 0 4px rgba(11,23,20,.7)}
.origin__step p{margin:0;font:500 17px/1.4 var(--ui);color:var(--dim)}
.origin__step p b{display:block;font:400 26px/1.1 var(--display);letter-spacing:.02em;color:#fff;margin-bottom:4px}
@media (min-width:760px){.origin__row{grid-template-columns:repeat(3,minmax(0,1fr))}.origin__step:nth-child(2){margin-top:46px}.origin__step:nth-child(3){margin-top:92px}}
/* the opened green ball the character just came out of, behind it on the platform */
.hero__ball{position:absolute;left:50%;bottom:-2%;z-index:0;width:min(74vw,400px);height:auto;max-width:none;translate:-50% 0;
  filter:drop-shadow(0 0 36px rgba(95,203,136,.55));animation:bob 6s ease-in-out infinite}
.hero__float{z-index:1}
@media (min-width:900px){.hero__ball{width:min(36vw,520px);bottom:-1%}}
/* the open ball sits beside the character (he just hopped out), mostly visible, low on the platform */
.hero__ball{left:-6%;bottom:1%;width:min(46vw,250px);translate:0 0}
@media (min-width:900px){.hero__ball{left:-12%;bottom:2%;width:min(24vw,360px)}}
.origin .h2{margin-top:22px}