/* ═══════════════════════════════════════════════════════════
   POKÉHOOD — a Pokédex device rendered in CSS.
   Palette sampled directly from the banner video: the dominant
   ~30% of frame pixels are #001111–#002211 (deep teal-black),
   mid-greens run #113322→#226633, and the mascot acc is #ddbb44.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ground */
  --bg:      #041210;
  --bg-2:    #030d0b;
  --sur:     #0b2018;
  --sur-2:   #0f2a1e;
  --sur-3:   #143324;
  --screen:  #061a13;

  /* ink */
  --ink:     #eafbf0;
  --ink-2:   #9dbfad;
  --ink-3:   #6c8c7b;

  /* accents */
  --acc:     #22c22b;  /* logo green — the brand accent */
  --acc-2:   #55e35e;
  --acc-d:   #10761a;
  --neon:    #4dff92;
  --gr:      #00c805;
  --red:     #ee4b3c;
  --brown:   #6d4a2c;  /* the hood */

  --line:    rgba(120,220,160,.15);
  --line-2:  rgba(120,220,160,.28);
  --glow:    rgba(77,255,146,.30);
  --accglow:rgba(34,194,43,.34);

  --r:   18px;
  --r-s: 12px;
  --r-l: 26px;

  --shad: 0 18px 44px rgba(0,0,0,.55);
  --bev:  inset 0 1px 0 rgba(255,255,255,.07), inset 0 -2px 0 rgba(0,0,0,.35);

  --d-fig: 'Baloo 2', system-ui, sans-serif;
  --d-ui:  'Outfit', system-ui, -apple-system, Segoe UI, sans-serif;
  --d-num: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pop: cubic-bezier(.34,1.4,.64,1);
  --wrap: 1180px;
}

*,*::before,*::after{ box-sizing:border-box }

/* An author `display` beats the UA stylesheet's [hidden] rule, so any
   component with its own display (.soundbtn is inline-flex) would stay
   visible after el.hidden = true. Make hiding win, once, globally. */
[hidden]{ display:none !important }

html{
  overflow-x:clip;           /* clip, not hidden — no scroll container side effects */
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  overflow-x:clip;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.65 var(--d-ui);
  -webkit-font-smoothing:antialiased;
  /* faint arena floor glow, fixed so it never adds layout width */
  background-image:
    radial-gradient(58rem 40rem at 50% -8%, rgba(0,200,5,.10), transparent 70%),
    radial-gradient(46rem 34rem at 100% 30%, rgba(77,255,146,.05), transparent 70%);
  background-repeat:no-repeat;
}

img,video,svg,iframe{ max-width:100%; display:block }
a{ color:inherit }
button{ font:inherit; color:inherit }

::selection{ background:var(--acc); color:#10240c }

:focus-visible{
  outline:3px solid var(--acc);
  outline-offset:3px;
  border-radius:6px;
}

.skip{
  position:fixed; top:-100px; left:14px; z-index:200;
  background:var(--acc); color:#10240c; font-weight:700;
  padding:12px 18px; border-radius:0 0 12px 12px; text-decoration:none;
}
.skip:focus{ top:0 }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px }

.acc{ color:var(--acc) }

/* ───────────── shared: buttons ───────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--d-fig); font-weight:700; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  border:2px solid transparent; border-radius:999px;
  padding:.72em 1.35em; font-size:1.02rem; line-height:1;
  transition:transform .2s var(--pop), box-shadow .2s, background .2s, border-color .2s;
}
.btn--sm{ padding:.6em 1.05em; font-size:.92rem }
.btn--lg{ padding:.85em 1.7em; font-size:1.12rem }

.btn--acc{
  background:linear-gradient(180deg,var(--acc-2),var(--acc));
  color:#04240a; border-color:#b9ffc0;
  box-shadow:0 8px 0 var(--acc-d), 0 14px 30px var(--accglow);
}
.btn--acc:hover{ transform:translateY(-3px); box-shadow:0 11px 0 var(--acc-d), 0 20px 40px var(--accglow) }
.btn--acc:active{ transform:translateY(2px); box-shadow:0 4px 0 var(--acc-d) }

.btn--glass{
  background:rgba(11,32,24,.72); color:var(--ink);
  border-color:var(--line-2); backdrop-filter:blur(8px);
  box-shadow:0 8px 0 rgba(0,0,0,.4);
}
.btn--glass:hover{ transform:translateY(-3px); border-color:var(--neon); color:var(--neon) }
.btn--glass:active{ transform:translateY(2px); box-shadow:0 3px 0 rgba(0,0,0,.4) }

@media (prefers-reduced-motion:reduce){
  .btn:hover,.btn:active{ transform:none }
}

/* ═══════════════ NAV ═══════════════ */
.bar{
  position:sticky; top:0; z-index:100;
  background:rgba(4,18,16,.72);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, box-shadow .3s;
}
.bar.is-stuck{
  background:rgba(3,13,11,.93);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.bar__in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:12px 22px;
  display:flex; align-items:center; gap:18px;
}

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto }
.brand__orb{
  width:38px; height:38px; flex:0 0 auto; border-radius:50%;
  padding:2px; background:linear-gradient(150deg,var(--acc-2),var(--acc-d));
  box-shadow:0 0 0 2px rgba(4,18,16,.9), 0 4px 14px var(--accglow);
  overflow:hidden;
}
.brand__orb img{ width:100%; height:100%; border-radius:50%; object-fit:cover }
.brand__txt{
  font-family:var(--d-fig); font-weight:800; font-size:1.24rem; letter-spacing:.01em;
  color:var(--acc); line-height:1;
}
.brand__txt em{ font-style:normal; color:var(--ink) }

.bar__nav{ display:flex; gap:4px; margin-inline:auto; min-width:0 }
.bar__nav a{
  position:relative; text-decoration:none; color:var(--ink-2);
  font-size:.95rem; font-weight:500; padding:9px 13px; border-radius:999px;
  transition:color .2s, background .2s;
}
.bar__nav a:hover{ color:var(--ink); background:rgba(120,220,160,.08) }
.bar__nav a.is-here{ color:var(--acc); background:rgba(34,194,43,.11) }

.bar__end{ display:flex; align-items:center; gap:10px; flex:0 0 auto }

.tickchip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px;
  background:var(--screen); border:1px solid var(--line);
  font-family:var(--d-num); font-size:.88rem; line-height:1;
}
.tickchip__dot{
  width:7px; height:7px; border-radius:50%; background:var(--ink-3); flex:0 0 auto;
  transition:background .3s, box-shadow .3s;
}
.tickchip__dot.is-live{ background:var(--neon); box-shadow:0 0 0 4px rgba(77,255,146,.16) }
.tickchip__dot.is-dead{ background:var(--red) }
.tickchip__px{ color:var(--ink) }
.tickchip__ch{ font-size:.82rem }
.tickchip__ch.up{ color:var(--neon) } .tickchip__ch.dn{ color:var(--red) }

.burger{
  display:none; width:42px; height:42px; flex:0 0 auto;
  background:var(--sur); border:1px solid var(--line); border-radius:12px;
  cursor:pointer; padding:0; place-items:center; gap:5px;
}
.burger span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .2s }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

@media (max-width:1040px){
  .bar__nav{
    position:fixed; inset:66px 12px auto 12px; margin:0;
    flex-direction:column; gap:2px; padding:12px;
    background:rgba(3,13,11,.97); backdrop-filter:blur(16px);
    border:1px solid var(--line); border-radius:var(--r);
    box-shadow:var(--shad);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .22s, transform .22s, visibility .22s;
  }
  .bar__nav.is-open{ opacity:1; visibility:visible; transform:none }
  .bar__nav a{ padding:13px 14px; font-size:1.05rem }
  .burger{ display:grid }
  .bar__end{ margin-inline-start:auto }
}
@media (max-width:640px){
  .tickchip__ch{ display:none }
  .brand__txt{ font-size:1.08rem }
}
@media (max-width:460px){
  .bar__end .btn{ display:none }
}

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative; isolation:isolate;
  min-height:min(94svh,860px);
  display:grid; place-items:center;
  padding:96px 0 116px;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:-2 }
.hero__vid{
  width:100%; height:100%; object-fit:cover;
  /* the source frames are already dark; a touch more contrast keeps type legible */
  filter:saturate(1.12) contrast(1.06);
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,18,16,.82) 0%, rgba(4,18,16,.5) 26%, rgba(4,18,16,.74) 62%, var(--bg) 100%),
    radial-gradient(70% 60% at 50% 42%, transparent 30%, rgba(3,13,11,.72) 100%);
}
/* arena rings echoing the lit floor in the video */
.hero__rings{ position:absolute; left:50%; bottom:-14%; translate:-50% 0; width:min(1100px,150%); aspect-ratio:2/1; pointer-events:none }
.hero__rings i{
  position:absolute; inset:0; margin:auto;
  border:1px solid rgba(77,255,146,.22); border-radius:50%;
  animation:ring 5.5s ease-out infinite;
}
.hero__rings i:nth-child(2){ animation-delay:1.8s } .hero__rings i:nth-child(3){ animation-delay:3.6s }
@keyframes ring{ from{ transform:scale(.34); opacity:0 } 22%{ opacity:.85 } to{ transform:scale(1); opacity:0 } }

.hero__in{ position:relative; text-align:center; width:100%; max-width:900px; padding-inline:22px }

.dexno{
  display:inline-flex; align-items:center; gap:.55em; flex-wrap:wrap; justify-content:center;
  margin:0 0 20px; padding:8px 16px; border-radius:999px;
  background:rgba(6,26,19,.78); border:1px solid var(--line-2);
  backdrop-filter:blur(8px);
  font-family:var(--d-num); font-size:.86rem; letter-spacing:.1em; color:var(--acc);
}
.dexno span{ color:var(--neon) }
.dexno em{ font-style:normal; color:var(--ink-2); letter-spacing:.04em }

/* the "first Pokémon narrative" claim — hero ribbon */
.first{
  display:inline-flex; align-items:center; gap:.6em; flex-wrap:wrap; justify-content:center;
  margin:0 auto 22px; padding:9px 18px; border-radius:999px;
  background:linear-gradient(100deg, rgba(34,194,43,.2), rgba(34,194,43,.06));
  border:1px solid rgba(34,194,43,.5);
  box-shadow:0 0 28px var(--accglow), var(--bev);
  backdrop-filter:blur(8px);
  font-size:.94rem; color:var(--ink-2); font-weight:500;
}
.first b{ color:var(--acc); font-weight:700 }
.first__ico{ color:var(--acc); font-size:.9em; animation:twinkle 2.6s ease-in-out infinite }
@keyframes twinkle{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.5; transform:scale(.82) } }
@media (max-width:520px){ .first{ font-size:.86rem; padding:8px 14px } }

.wm{
  margin:0; line-height:.86;
  font-family:var(--d-fig); font-weight:800;
  font-size:clamp(3.4rem,13vw,8.6rem); letter-spacing:-.02em;
  text-transform:uppercase;
}
.wm__a,.wm__b{ display:inline-block }
.wm__a{
  /* the ball's white lower half, so the wordmark mirrors the logo */
  color:#f4f8f5;
  text-shadow:0 0 30px rgba(255,255,255,.2), 0 5px 0 #22402b, 0 7px 24px rgba(0,0,0,.7);
}
.wm__b{
  background:linear-gradient(180deg,#a7ffc9,var(--neon) 55%,var(--gr));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 30px var(--glow)) drop-shadow(0 5px 0 #0a3d1c);
}

.hero__sub{
  margin:20px auto 0; max-width:34ch;
  font-size:clamp(1.1rem,2.9vw,1.5rem); color:var(--ink-2); font-weight:500;
}
.hero__sub b{ color:var(--ink); font-weight:700 }

.hero__row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px }

.soundbtn{
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; border:1px solid var(--line-2); border-radius:999px;
  padding:.78em 1.2em; cursor:pointer; color:var(--ink-2);
  font-size:.94rem; transition:color .2s, border-color .2s;
}
.soundbtn:hover{ color:var(--neon); border-color:var(--neon) }
.soundbtn__ico{
  width:9px; height:11px; flex:0 0 auto; background:currentColor;
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.soundbtn[aria-pressed="true"] .soundbtn__ico{ clip-path:none; width:9px; height:11px;
  background:linear-gradient(90deg,currentColor 0 34%,transparent 34% 66%,currentColor 66%) }

/* contract chip */
.ca{
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
  width:max-content; max-width:100%; margin:34px auto 0;
  padding:9px 9px 9px 15px; border-radius:999px;
  background:rgba(6,26,19,.85); border:1px solid var(--line-2);
  backdrop-filter:blur(8px);
}
.ca__k{ font-family:var(--d-num); font-size:.72rem; letter-spacing:.14em; color:var(--ink-3); flex:0 0 auto }
.ca__v{
  font-family:var(--d-num); font-size:.9rem; color:var(--ink);
  flex:1 1 auto; min-width:0;                 /* lets the code shrink instead of blowing the row */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ca__btn{
  flex:0 0 auto; cursor:pointer; border:0; border-radius:999px;
  background:var(--acc); color:#04240a;
  font-family:var(--d-fig); font-weight:700; font-size:.82rem; letter-spacing:.05em;
  padding:.5em 1em; transition:background .2s, transform .2s var(--pop);
}
.ca__btn:hover{ background:var(--acc-2); transform:translateY(-2px) }
.ca__btn.is-done{ background:var(--neon) }
@media (max-width:600px){
  .ca{ flex-wrap:wrap; border-radius:var(--r); padding:12px }
  .ca__v{ flex-basis:100%; font-size:.78rem; white-space:normal; overflow-wrap:anywhere; text-overflow:clip }
}

.hero__down{
  position:absolute; left:50%; bottom:26px; translate:-50% 0;
  width:30px; height:48px; border:2px solid var(--line-2); border-radius:999px;
  display:grid; place-items:start center; padding-top:8px;
}
.hero__down span{ width:5px; height:5px; border-radius:50%; background:var(--neon); animation:mouse 1.7s ease-in-out infinite }
@keyframes mouse{ 0%,100%{ transform:translateY(0); opacity:1 } 60%{ transform:translateY(20px); opacity:0 } }
@media (max-width:820px){ .hero__down{ display:none } }

/* ═══════════════ BELT / TICKER ═══════════════ */
.belt{
  overflow:hidden; border-block:1px solid var(--line);
  background:linear-gradient(90deg,var(--sur),var(--sur-2),var(--sur));
  padding:11px 0;
}
.belt__track{
  display:flex; gap:0; width:max-content;
  animation:belt 44s linear infinite;
  font-family:var(--d-num); font-size:.88rem; letter-spacing:.06em; color:var(--ink-2);
}
.belt__track b{ color:var(--acc); font-weight:400 }
.belt__track i{ color:var(--ink-3); font-style:normal; padding-inline:20px }
.belt__track span{ padding-inline:4px; white-space:nowrap }
@keyframes belt{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .belt__track{ animation:none } }

/* ═══════════════ SECTION SHELL ═══════════════ */
.sec{ padding:96px 0; position:relative }
.sec--dark{ background:var(--bg-2); border-block:1px solid var(--line) }
.sec--join{ padding-bottom:110px }

.dexhead{ max-width:60ch; margin:0 0 44px }
.h2{
  margin:0; font-family:var(--d-fig); font-weight:800;
  font-size:clamp(2.1rem,5.6vw,3.5rem); line-height:1; letter-spacing:-.015em;
  text-transform:uppercase;
}
.h2--c{ text-align:center }
.h2sub{ margin:16px 0 0; color:var(--ink-2); font-size:1.06rem; max-width:56ch }
.h2sub b{ color:var(--ink) }

/* ═══════════════ THE DEVICE ═══════════════ */
.dev{
  position:relative;
  background:linear-gradient(168deg,var(--sur-3),var(--sur) 45%,var(--bg-2));
  border:1px solid var(--line-2); border-radius:var(--r-l);
  padding:20px; box-shadow:var(--shad), var(--bev);
}
/* acc rivets in the corners */
.dev::before,.dev::after{
  content:''; position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,var(--acc-2),var(--acc-d));
  box-shadow:0 0 10px var(--accglow);
}
.dev::before{ top:14px; right:14px } .dev::after{ bottom:14px; left:14px }

.dev__lamps{ display:flex; align-items:center; gap:9px; padding:2px 4px 16px }
.lamp{ width:11px; height:11px; border-radius:50%; box-shadow:var(--bev) }
.lamp--big{
  width:30px; height:30px; margin-right:6px;
  background:radial-gradient(circle at 32% 28%,#bff0ff,#2ba7e8 44%,#0b4f7a);
  box-shadow:0 0 18px rgba(43,167,232,.5), inset 0 -3px 6px rgba(0,0,0,.4);
  animation:lamp 3.4s ease-in-out infinite;
}
.lamp--r{ background:radial-gradient(circle at 34% 30%,#ff9d94,var(--red)) }
.lamp--y{ background:radial-gradient(circle at 34% 30%,#ffffff,#c9d2cc) }
.lamp--g{ background:radial-gradient(circle at 34% 30%,#a7ffc9,var(--gr)) }
@keyframes lamp{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.4) } }
@media (prefers-reduced-motion:reduce){ .lamp--big{ animation:none } }

.dev__body{
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:22px;
}
@media (max-width:900px){ .dev__body{ grid-template-columns:minmax(0,1fr) } }
.dev__col{ min-width:0 }

/* screens */
.screen{
  position:relative; overflow:hidden;
  background:var(--screen);
  border:1px solid var(--line-2); border-radius:var(--r);
  box-shadow:inset 0 2px 16px rgba(0,0,0,.7), 0 0 0 4px rgba(0,0,0,.25);
}
.screen__scan{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
}
.screen--art{ margin:0; aspect-ratio:1/1 }
.screen--art img{ width:100%; height:100%; object-fit:cover }
.screen__cap{
  position:absolute; inset:auto 0 0 0; z-index:3;
  padding:9px 13px;
  background:linear-gradient(0deg,rgba(3,13,11,.94),transparent);
  font-family:var(--d-num); font-size:.78rem; letter-spacing:.12em; color:var(--acc);
}

.types{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.type{
  font-family:var(--d-fig); font-weight:700; font-size:.85rem; letter-spacing:.06em;
  padding:.42em 1em; border-radius:999px; border:1px solid;
}
.type--elec{ color:var(--acc); border-color:rgba(34,194,43,.5); background:rgba(34,194,43,.1) }
.type--meme{ color:#eafbf0; border-color:rgba(234,251,240,.32); background:rgba(234,251,240,.07) }

.cry{
  margin:14px 0 0; display:flex; align-items:baseline; gap:10px;
  font-family:var(--d-num); font-size:.86rem; color:var(--ink-2);
}
.cry__k{ color:var(--ink-3); letter-spacing:.12em; flex:0 0 auto }
.cry__v{ color:var(--neon); min-width:0 }

/* data screen */
.screen--data{ padding:22px }
.bigpx{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 14px; padding-bottom:18px; border-bottom:1px dashed var(--line-2) }
.bigpx__k{ font-family:var(--d-num); font-size:.74rem; letter-spacing:.14em; color:var(--ink-3); flex:1 0 100% }
.bigpx__v{
  font-family:var(--d-num); font-size:clamp(1.8rem,5.2vw,2.9rem); line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.bigpx__d{
  font-family:var(--d-fig); font-weight:700; font-size:1rem; line-height:1;
  padding:.36em .8em; border-radius:999px; background:rgba(120,220,160,.1); color:var(--ink-2);
}
.bigpx__d.up{ background:rgba(77,255,146,.14); color:var(--neon) }
.bigpx__d.dn{ background:rgba(238,75,60,.14); color:var(--red) }

.rows{ margin:6px 0 0; padding:0; display:grid; gap:0 }
.row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid rgba(120,220,160,.08);
}
.row:last-child{ border-bottom:0 }
.row dt{ color:var(--ink-3); font-size:.93rem; flex:0 1 auto; min-width:0 }
.row dd{
  margin:0; text-align:right; min-width:0;
  font-family:var(--d-num); font-size:1.02rem; color:var(--ink);
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.row dd.ok{ color:var(--neon) }

.feed{
  margin:16px 0 0; display:flex; align-items:center; gap:9px;
  font-family:var(--d-num); font-size:.78rem; letter-spacing:.06em; color:var(--ink-3);
}
.pulse{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); flex:0 0 auto; transition:background .3s, box-shadow .3s }
.pulse.is-live{ background:var(--neon); box-shadow:0 0 0 4px rgba(77,255,146,.15) }
.pulse.is-dead{ background:var(--red) }

.flavour{
  margin:18px 0 0; padding:18px 20px;
  background:rgba(124,85,40,.13); border-left:3px solid var(--brown);
  border-radius:0 var(--r-s) var(--r-s) 0;
  color:var(--ink-2); font-size:1.01rem;
}
.flavour b{ color:var(--acc); font-family:var(--d-num); font-size:.8rem; letter-spacing:.14em }

.dev__foot{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
}
.pilllink{
  text-decoration:none; font-size:.9rem; font-weight:600;
  padding:.5em 1.05em; border-radius:999px;
  background:rgba(120,220,160,.07); border:1px solid var(--line-2); color:var(--ink-2);
  transition:color .2s, border-color .2s, transform .2s var(--pop);
}
.pilllink:hover{ color:var(--neon); border-color:var(--neon); transform:translateY(-2px) }
.dev__sig{ margin-inline-start:auto; font-family:var(--d-num); font-size:.74rem; letter-spacing:.1em; color:var(--ink-3) }

/* ═══════════════ BATTLE STATS ═══════════════ */
.battle{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:22px; align-items:start }
@media (max-width:900px){ .battle{ grid-template-columns:minmax(0,1fr) } }

.battle__side{ display:grid; gap:14px; min-width:0 }
.gauge{
  min-width:0; padding:16px 18px;
  background:var(--sur); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--bev);
  transition:border-color .25s, transform .25s var(--pop);
}
.gauge:hover{ border-color:var(--line-2); transform:translateY(-2px) }
.gauge__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.gauge__k{ font-family:var(--d-num); font-size:.74rem; letter-spacing:.11em; color:var(--ink-3) }
.gauge__v{ font-family:var(--d-num); font-size:1.14rem; color:var(--ink); font-variant-numeric:tabular-nums }
.gauge__tgt{ display:block; margin-top:7px; font-size:.76rem; color:var(--ink-3) }

.meter{
  height:11px; margin-top:11px; border-radius:999px; overflow:hidden;
  background:rgba(0,0,0,.5); box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
}
.meter--tall{ height:16px }
.meter__fill{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--gr),var(--neon));
  box-shadow:0 0 14px var(--glow);
  transition:width .9s cubic-bezier(.22,1,.36,1);
}
.meter__fill--bs{ background:linear-gradient(90deg,var(--acc-d),var(--acc)); box-shadow:0 0 14px var(--accglow) }
.meter--split{ background:rgba(238,75,60,.28) }
@media (prefers-reduced-motion:reduce){ .meter__fill{ transition:none } }

.battle__main{ display:grid; gap:22px; min-width:0 }

.screen--trend{ padding:18px 18px 14px }
.trend__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px }
.trend__k{ font-family:var(--d-num); font-size:.76rem; letter-spacing:.14em; color:var(--ink-3) }
.tfs{ display:flex; gap:5px }
.tf{
  cursor:pointer; background:transparent; border:1px solid var(--line);
  color:var(--ink-3); border-radius:999px; padding:.36em .8em;
  font-family:var(--d-num); font-size:.78rem; letter-spacing:.06em;
  transition:color .2s, border-color .2s, background .2s;
}
.tf:hover{ color:var(--ink) }
.tf.is-on{ color:#04240a; background:var(--acc); border-color:var(--acc) }

.spark{ width:100%; height:190px; margin-top:6px; overflow:visible }
.spark__note{ margin:8px 0 0; font-family:var(--d-num); font-size:.76rem; color:var(--ink-3) }

.frame{
  background:var(--sur); border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--bev);
}
.frame__lip{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--sur-3),transparent);
  font-family:var(--d-num); font-size:.76rem; letter-spacing:.12em; color:var(--ink-3);
}
.frame__lip a{ color:var(--neon); text-decoration:none }
.frame__lip a:hover{ text-decoration:underline }
.frame__box{ position:relative; height:min(64svh,520px); background:#0a0f0c }
.frame__box iframe{ width:100%; height:100%; border:0; display:block }

/* ═══════════════ EVOLUTION ═══════════════ */
.evo{
  list-style:none; margin:0 0 34px; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
}
@media (max-width:880px){ .evo{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:460px){ .evo{ grid-template-columns:minmax(0,1fr) } }

.stage{
  position:relative; min-width:0; padding:22px 18px 20px;
  background:var(--sur); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--bev);
  transition:border-color .3s, transform .3s var(--pop), box-shadow .3s;
}
.stage:hover{ transform:translateY(-4px) }
.stage__n{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,.4); border:1px solid var(--line-2);
  font-family:var(--d-num); font-size:.86rem; color:var(--ink-3);
}
.stage__nm{
  display:block; margin:13px 0 5px;
  font-family:var(--d-fig); font-weight:800; font-size:1.24rem; line-height:1.1;
  text-transform:uppercase; color:var(--ink-2);
}
.stage__at{ display:block; font-family:var(--d-num); font-size:.82rem; color:var(--ink-3) }
.stage__d{ margin:11px 0 0; font-size:.93rem; color:var(--ink-3) }
.stage__tick{
  position:absolute; top:18px; right:18px;
  font-family:var(--d-num); font-size:.68rem; letter-spacing:.1em;
  padding:.32em .7em; border-radius:999px; opacity:0; transition:opacity .3s;
}

/* reached */
.stage.is-done{ border-color:rgba(77,255,146,.36) }
.stage.is-done .stage__n{ background:var(--gr); color:#04120c; border-color:var(--neon) }
.stage.is-done .stage__nm{ color:var(--ink) }
.stage.is-done .stage__tick{ opacity:1; background:rgba(77,255,146,.16); color:var(--neon) }

/* current */
.stage.is-now{
  border-color:var(--acc);
  box-shadow:0 0 0 1px var(--acc), 0 14px 40px var(--accglow), var(--bev);
  background:linear-gradient(168deg,rgba(34,194,43,.11),var(--sur) 60%);
}
.stage.is-now .stage__n{ background:linear-gradient(180deg,var(--acc-2),var(--acc)); color:#04240a; border-color:#b9ffc0 }
.stage.is-now .stage__nm{ color:var(--acc) }
.stage.is-now .stage__tick{ opacity:1; background:var(--acc); color:#04240a }

.evometer{
  padding:20px 22px; border-radius:var(--r);
  background:var(--sur); border:1px solid var(--line); box-shadow:var(--bev);
}
.evometer__top{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--d-num); font-size:.84rem; color:var(--ink-3);
}
.evometer__mid{ color:var(--acc); text-align:center; flex:1 1 auto; min-width:0 }

/* ═══════════════ HOW TO CATCH ═══════════════ */
.throws{
  list-style:none; margin:0 0 30px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;
}
.throw{
  min-width:0; padding:24px 22px;
  background:var(--sur); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--bev);
  transition:border-color .25s, transform .25s var(--pop);
}
.throw:hover{ border-color:var(--line-2); transform:translateY(-4px) }
/* a poké ball, drawn in CSS: red top, white bottom, banded middle */
.throw__ball{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:
    linear-gradient(180deg,var(--acc) 0 46%, #141a16 46% 54%, #f0f5f1 54% 100%);
  box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 -3px 8px rgba(0,0,0,.3);
  border:2px solid #141a16;
}
.throw__ball i{
  display:grid; place-items:center; width:19px; height:19px; border-radius:50%;
  background:#f7faf8; border:2px solid #141a16;
  font-family:var(--d-fig); font-weight:800; font-size:.76rem; font-style:normal; color:#141a16;
  line-height:1;
}
.throw h3{
  margin:16px 0 8px; font-family:var(--d-fig); font-weight:700;
  font-size:1.26rem; line-height:1.15;
}
.throw p{ margin:0; color:var(--ink-2); font-size:.97rem }
.mini{
  display:inline-block; margin-top:14px; cursor:pointer;
  background:transparent; border:1px solid var(--line-2); border-radius:999px;
  color:var(--neon); text-decoration:none; font-size:.86rem; font-weight:600;
  padding:.46em 1em; transition:background .2s, border-color .2s;
}
.mini:hover{ background:rgba(77,255,146,.1); border-color:var(--neon) }
.mini--copy.is-done{ color:#04240a; background:var(--acc); border-color:var(--acc) }

.warn{
  margin:0; padding:18px 22px; border-radius:var(--r);
  background:rgba(238,75,60,.1); border:1px solid rgba(238,75,60,.32);
  color:var(--ink-2); font-size:.98rem;
}
.warn b{ color:#ff9d94 }

/* ═══════════════ TRAINER GUIDE ═══════════════ */
.qas{ display:grid; gap:11px; max-width:840px }
.qa{
  background:var(--sur); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--bev);
  transition:border-color .25s;
}
.qa[open]{ border-color:rgba(34,194,43,.34) }
.qa summary{
  cursor:pointer; list-style:none; padding:19px 56px 19px 22px; position:relative;
  font-family:var(--d-fig); font-weight:700; font-size:1.1rem; line-height:1.3;
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary::after{
  content:''; position:absolute; right:22px; top:calc(50% - 5px);
  width:10px; height:10px; border-right:2px solid var(--acc); border-bottom:2px solid var(--acc);
  transform:rotate(45deg); transition:transform .25s;
}
.qa[open] summary::after{ transform:rotate(-135deg) }
.qa summary:hover{ color:var(--acc) }
.qa__b{ padding:0 22px 20px }
.qa__b p{ margin:0; color:var(--ink-2) }
.qa__b code{
  font-family:var(--d-num); font-size:.9em; color:var(--neon);
  background:rgba(0,0,0,.4); padding:.14em .45em; border-radius:5px;
}

/* ═══════════════ JOIN ═══════════════ */
.join{ text-align:center; max-width:660px; margin-inline:auto }
.join__sub{ margin:16px auto 30px; color:var(--ink-2); font-size:1.08rem; max-width:44ch }
.join__links{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center }
.join__note{ margin:22px 0 0; font-size:.88rem; color:var(--ink-3) }

/* ═══════════════ FOOTER ═══════════════ */
.foot{ background:var(--bg-2); border-top:1px solid var(--line); padding:52px 0 40px }
.foot__in{ display:grid; gap:22px }
.foot__top{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap }
.foot__brand{ display:flex; align-items:center; gap:13px }
.foot__social{ display:flex; gap:9px; flex-wrap:wrap }
.foot__brand strong{ display:block; font-family:var(--d-fig); font-weight:800; font-size:1.16rem; color:var(--acc) }
.foot__brand span{ font-family:var(--d-num); font-size:.78rem; letter-spacing:.06em; color:var(--ink-3) }
.foot__legal{
  margin:0; max-width:78ch; font-size:.88rem; line-height:1.7; color:var(--ink-3);
  padding-left:15px; border-left:2px solid var(--line);
}
.foot__legal b{ color:var(--ink-2) }
.foot__legal--ip{ border-left-color:rgba(34,194,43,.3) }
.foot__c{ margin:0; font-family:var(--d-num); font-size:.76rem; letter-spacing:.06em; color:var(--ink-3) }

/* ═══════════════ TOAST ═══════════════ */
.toast{
  position:fixed; left:50%; bottom:28px; translate:-50% 0; z-index:300;
  padding:13px 22px; border-radius:999px;
  background:var(--acc); color:#04240a;
  font-family:var(--d-fig); font-weight:700; font-size:.96rem;
  box-shadow:0 14px 36px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .25s, transform .25s var(--pop), visibility .25s;
}
.toast.is-up{ opacity:1; visibility:visible; transform:none }

/* ═══════════════ reveal on scroll ═══════════════ */
.rise{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1) }
.rise.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1; transform:none; transition:none }
  .hero__rings i,.hero__down span{ animation:none }
}

@media (max-width:700px){
  .sec{ padding:70px 0 }
  .dev{ padding:14px; border-radius:var(--r) }
  .screen--data{ padding:18px }
  body{ font-size:16px }
}


/* ═══════════════ THE GENERATOR ═══════════════ */
.lab{ display:grid; gap:20px }

.lab__ctrl{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:18px 20px; border-radius:var(--r);
  background:var(--sur); border:1px solid var(--line); box-shadow:var(--bev);
}

/* segmented MEME / ART switch */
.modes{
  display:flex; gap:4px; padding:4px; flex:0 0 auto;
  background:rgba(0,0,0,.45); border-radius:999px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
}
.mode{
  display:flex; align-items:center; gap:.55em; cursor:pointer;
  background:transparent; border:0; border-radius:999px;
  padding:.6em 1.15em; color:var(--ink-3);
  font-family:var(--d-fig); font-weight:700; font-size:.95rem; letter-spacing:.04em;
  transition:color .22s, background .22s;
}
.mode:hover{ color:var(--ink) }
.mode.is-on{ color:#04240a; background:linear-gradient(180deg,var(--acc-2),var(--acc));
  box-shadow:0 3px 12px var(--accglow) }
.mode__n{
  font-family:var(--d-num); font-size:.76rem; font-weight:400;
  padding:.15em .5em; border-radius:999px;
  background:rgba(0,0,0,.22);
}
.mode.is-on .mode__n{ background:rgba(4,36,10,.18) }

/* the throw button, with a little ball on it */
.genbtn{ position:relative }
.genbtn__ball{
  width:20px; height:20px; flex:0 0 auto; border-radius:50%;
  border:2px solid #14181a;
  background:linear-gradient(180deg,#f2f7f3 0 44%, #14181a 44% 56%, #f2f7f3 56% 100%);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.25);
}
.genbtn.is-busy{ pointer-events:none; opacity:.72 }
.genbtn.is-busy .genbtn__ball{ animation:spin .5s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

.lab__hint{
  margin:0; margin-inline-start:auto; min-width:0;
  font-family:var(--d-num); font-size:.78rem; color:var(--ink-3);
}

/* ── the stage ── */
.pod{
  position:relative; overflow:hidden;
  min-height:min(62svh,540px);
  display:grid; place-items:center; padding:22px;
}

.pod__idle{ text-align:center; color:var(--ink-3) }
.pod__idle img{ margin:0 auto 14px; opacity:.5; filter:grayscale(.35) }
.pod__idle p{ margin:0; font-family:var(--d-num); font-size:.86rem; letter-spacing:.06em }

/* ── the throw ── */
.pod__throw{ display:grid; place-items:center }
.tball{
  display:block; width:74px; height:74px; border-radius:50%;
  border:3px solid #14181a;
  background:linear-gradient(180deg,var(--acc) 0 45%, #14181a 45% 55%, #f2f7f3 55% 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.55), inset 0 -5px 10px rgba(0,0,0,.3), 0 0 34px var(--accglow);
  position:relative;
}
.tball::after{                       /* the centre button */
  content:''; position:absolute; inset:0; margin:auto;
  width:24px; height:24px; border-radius:50%;
  background:#f7faf8; border:3px solid #14181a;
}
.pod__throw.is-live .tball{ animation:drop .42s cubic-bezier(.3,1.5,.6,1), wob .3s 3 .42s ease-in-out }
@keyframes drop{
  0%   { transform:translateY(-190px) rotate(-540deg) scale(.5); opacity:0 }
  60%  { opacity:1 }
  100% { transform:none; opacity:1 }
}
@keyframes wob{
  0%,100%{ transform:rotate(0) }
  25%    { transform:rotate(-19deg) translateX(-7px) }
  75%    { transform:rotate(19deg) translateX(7px) }
}

/* ── the flash ── */
.flash{
  position:absolute; inset:0; margin:auto; z-index:4;
  width:60px; height:60px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, #ffffff 0 34%, var(--acc-2) 48%, rgba(85,227,94,0) 72%);
  opacity:0;
}
.flash.is-pop{ animation:pop .42s ease-out }
@keyframes pop{
  0%  { opacity:0; transform:scale(.3) }
  22% { opacity:1; transform:scale(3.4) }
  100%{ opacity:0; transform:scale(11) }
}

/* ── the result ── */
.pod__out{ margin:0; width:100%; display:grid; place-items:center; gap:14px }
.shot{
  position:relative; overflow:hidden; border-radius:var(--r-s);
  border:1px solid var(--line-2);
  box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 0 4px rgba(0,0,0,.3);
  max-width:100%; line-height:0;
}
.shot img{ max-width:100%; max-height:min(52svh,460px); width:auto; height:auto }
.pod__out figcaption{
  font-family:var(--d-num); font-size:.84rem; letter-spacing:.06em;
  color:var(--acc); text-align:center;
}

.pod__out.is-in .shot{ animation:materialise .66s cubic-bezier(.2,1.3,.4,1) both }
.pod__out.is-in figcaption{ animation:capup .5s .22s ease both }
@keyframes materialise{
  0%  { opacity:0; transform:scale(.84); filter:blur(11px) brightness(2.4) }
  55% { opacity:1 }
  100%{ opacity:1; transform:none; filter:none }
}
@keyframes capup{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }

/* a single sweep of light across the new image */
.shine{
  position:absolute; inset:0 auto 0 -60%; width:55%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  opacity:0;
}
.pod__out.is-in .shine{ animation:sweep .85s .3s ease-out }
@keyframes sweep{ 0%{ left:-60%; opacity:1 } 100%{ left:115%; opacity:0 } }

/* ── actions ── */
.lab__acts{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
.lab__acts .pilllink{ cursor:pointer; border-width:1px; font-family:inherit }

@media (max-width:640px){
  .lab__ctrl{ justify-content:center }
  .lab__hint{ margin-inline-start:0; flex-basis:100%; text-align:center }
  .genbtn{ flex:1 1 100% }
  .pod{ padding:16px; min-height:auto }
}

/* motion is decoration here — the reveal still has to happen without it */
@media (prefers-reduced-motion:reduce){
  .pod__throw.is-live .tball,
  .flash.is-pop,
  .pod__out.is-in .shot,
  .pod__out.is-in figcaption,
  .pod__out.is-in .shine,
  .genbtn.is-busy .genbtn__ball,
  .first__ico{ animation:none }
  .pod__out.is-in .shot{ opacity:1 }
}