/* Yumi — one stylesheet for every page.
   Daylight route: a bright cartoon world in the colours of the games. Sky,
   grass, water and sunset bands with thick ink edges; white "sticker" panels
   with an ink outline and a hard shadow; Luckiest Guy headings stroked like
   the logo; Game Boy dialogs and HP plates; trading cards with real foil.
   Type colours come from a coin's Pokémon (--type); band colours set the
   mood of each section. The footer is the same world at night. */

@font-face { font-family: "Luckiest Guy"; src: url(/fonts/luckiest-guy.woff2) format("woff2"); font-display: block; }
@font-face { font-family: "Press Start 2P"; src: url(/fonts/press-start-2p.woff2) format("woff2"); font-display: swap; }

:root {
  --pc-ink: #1b1f3b;
  --pc-red: #e3350d;
  --pc-red-2: #ff5a36;
  --pc-yellow: #ffcb05;
  --pc-gold: #f2a900;
  --pc-blue: #2a75bb;
  --pc-sky: #5ec8ff;
  --pc-navy: #1d3f8a;
  --pc-grass: #7ed957;
  --pc-grass-2: #4fb33a;
  --pc-pink: #ff8ac0;
  --pc-orange: #ff8a3d;
  --pc-teal: #14c9b7;
  --pc-teal-2: #0e9e91;
  --pc-cream: #fff8e6;
  --f-fun: "Luckiest Guy", "M PLUS Rounded 1c", system-ui, sans-serif;
  --f-gb: "Press Start 2P", ui-monospace, monospace;
  --f-display: "Luckiest Guy", "M PLUS Rounded 1c", system-ui, sans-serif;
  --f-body: "M PLUS Rounded 1c", system-ui, -apple-system, sans-serif;
  --f-pixel: "DotGothic16", ui-monospace, monospace;
  --bg: #fff8e6;
  --bg-raise: #ffffff;
  --panel: #ffffff;
  --panel-2: #f7f3e8;
  --panel-3: #eee9da;
  --line: rgba(27, 31, 59, 0.13);
  --line-2: rgba(27, 31, 59, 0.24);
  --ink: #1b1f3b;
  --ink-2: #363c66;
  --muted: #565d86;
  --dim: #868bab;
  --accent: #ffcb05;
  --accent-2: #ffe27a;
  --accent-ink: #1b1f3b;
  --accent-text: #d2400a;
  --candy: #2a75bb;
  --good: #139a52;
  --warn: #c97c00;
  --bad: #e3350d;
  --gb-paper: #fbfbf3;
  --gb-ink: #252b3d;
  --gb-frame: #33406e;
  --gb-frame-2: #9db0e8;
  --type: #ffcb05;
  --edge: 3px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --pop: 0 6px 0 var(--pc-ink);
  --pop-sm: 0 4px 0 var(--pc-ink);
  --shadow: 0 6px 0 var(--pc-ink);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --boing: cubic-bezier(0.3, 1.8, 0.5, 1);
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(rgba(27, 31, 59, 0.055) 1.3px, transparent 1.8px) 0 0 / 22px 22px,
    var(--bg);
  color: var(--ink);
  font: 500 16px/1.6 var(--f-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--pc-yellow); color: var(--pc-ink); }
:focus-visible { outline: 3px solid var(--pc-blue); outline-offset: 3px; border-radius: 8px; }

.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
main { overflow-x: clip; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pixel { font-family: var(--f-pixel); letter-spacing: 0.02em; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ------------------------------------------------------------ type */

h1, h2, h3 { margin: 0; font-weight: 400; }
/* logo-style headings: a fill colour inside a thick ink outline, dropped onto the page */
.h-display, .h-section, .h-sticker {
  font-family: var(--f-display);
  color: var(--h-fill, #fff);
  -webkit-text-stroke: var(--h-stroke, 0.13em) var(--pc-ink);
  paint-order: stroke fill;
  text-shadow: 0 var(--h-drop, 0.075em) 0 var(--pc-ink);
  letter-spacing: 0.015em;
}
.h-display {
  font-size: clamp(44px, 5.1vw, 76px);
  line-height: 0.98;
}
.h-section {
  --h-fill: var(--pc-yellow);
  font-size: clamp(38px, 4.8vw, 66px);
  line-height: 1;
}
.h-card { font-family: var(--f-display); font-size: 24px; line-height: 1.1; letter-spacing: 0.02em; }
.lede { color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; line-height: 1.6; max-width: 58ch; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 7px 10px;
  border: 2.5px solid var(--pc-ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 0 var(--pc-ink);
  font: 400 10px/1 var(--f-gb);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pc-ink);
}
.eyebrow::before {
  /* a tiny Pokéball */
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--pc-ink);
  background: linear-gradient(var(--pc-red) 0 42%, var(--pc-ink) 42% 58%, #fff 58%);
}
.kicker {
  display: inline-block;
  padding: 7px 12px 6px;
  border: 2.5px solid var(--pc-ink);
  border-radius: 10px;
  background: var(--kicker, #fff);
  box-shadow: 0 3px 0 var(--pc-ink);
  font: 400 10px/1.2 var(--f-gb);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pc-ink);
  transform: rotate(-1.5deg);
}

/* ---------------------------------------------------------- buttons */

.btn {
  --b: #fff;
  --b-ink: var(--pc-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px 10px;
  border: 3px solid var(--pc-ink);
  border-radius: 999px;
  background: var(--b);
  color: var(--b-ink);
  font: 400 17px/1 var(--f-fun);
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--pc-ink);
  transition: transform 0.15s var(--boing), box-shadow 0.15s;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}
.btn:hover { transform: translateY(-3px) scale(1.04) rotate(-1deg); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pc-ink); }
.btn[disabled], .btn.is-busy, .btn[aria-disabled="true"] { opacity: 0.65; filter: saturate(0.6); }
.btn[disabled], .btn.is-busy { pointer-events: none; }
.btn--accent, .btn--y { --b: var(--pc-yellow); }
.btn--r { --b: var(--pc-red); --b-ink: #fff; }
.btn--b { --b: var(--pc-blue); --b-ink: #fff; }
.btn--teal { --b: var(--pc-teal); --b-ink: var(--pc-ink); }
.btn--ghost, .btn--w { --b: #fff; }
.btn--sm { min-height: 38px; padding: 8px 15px 6px; font-size: 14px; box-shadow: 0 4px 0 var(--pc-ink); }
.btn--sm:active { box-shadow: 0 1px 0 var(--pc-ink); }
.btn--lg { min-height: 58px; padding: 14px 30px 12px; font-size: 21px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--lg svg { width: 20px; height: 20px; }
.btn.is-busy::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.sticker {
  display: inline-block;
  padding: 9px 13px 7px;
  border: 3px solid var(--pc-ink);
  border-radius: 12px;
  background: var(--pc-red);
  color: #fff;
  font: 400 13px/1 var(--f-gb);
  box-shadow: 0 4px 0 var(--pc-ink);
  transform: rotate(-4deg);
}
.sticker--teal { background: var(--pc-teal); color: var(--pc-ink); }
.sticker--y { background: var(--pc-yellow); color: var(--pc-ink); }
.sticker--b { background: var(--pc-blue); }
.pokeball {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 4px solid var(--pc-ink);
  border-radius: 50%;
  background: var(--pc-ink);
  cursor: pointer;
  overflow: visible;
}
.pokeball .pb-top, .pokeball .pb-bot { position: absolute; left: -1px; right: -1px; height: 50%; transition: transform 0.35s var(--boing); }
.pokeball .pb-top { top: -1px; border-radius: 40px 40px 0 0; border-bottom: 3px solid var(--pc-ink); background: var(--pc-red) radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6) 0 12%, transparent 13%); transform-origin: 10% 100%; }
.pokeball .pb-bot { bottom: -1px; border-radius: 0 0 40px 40px; border-top: 3px solid var(--pc-ink); background: #fff; }
.pokeball .pb-btn { position: absolute; left: 50%; top: 50%; z-index: 2; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 4px solid var(--pc-ink); border-radius: 50%; background: #fff; transition: transform 0.3s; }
.pokeball.is-open .pb-top { transform: rotate(-55deg) translateY(-6px); }
.pokeball.is-open .pb-btn { transform: translateY(-20px) scale(0.6); }
.pokeball.is-open { box-shadow: 0 0 0 6px rgba(255, 203, 5, 0.55), 0 0 30px 10px rgba(255, 203, 5, 0.6); }
.pokeball.is-wobble, .pokeball:hover { animation: pb-wobble 0.7s ease-in-out; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.topbar__x svg { width: 15px; height: 15px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border: 2px solid var(--pc-ink);
  border-radius: 999px;
  background: #fff;
  font: 400 12px/1 var(--f-pixel);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.type-chip { background: color-mix(in srgb, var(--type) 55%, white); color: var(--pc-ink); }
.chip--live { color: var(--good); }
.chip--live::before, .dot-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2bd46f;
  box-shadow: 0 0 0 0 rgba(43, 212, 111, 0.6);
  animation: ping 1.8s var(--ease) infinite;
}
.chip--warn { color: var(--warn); }
.chip--teal { background: color-mix(in srgb, var(--pc-teal) 30%, white); }

/* ----------------------------------------------------------- header */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
    var(--pc-red);
  border-bottom: 4px solid var(--pc-ink);
}
.topbar__in { display: flex; align-items: center; gap: 22px; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand__mark { width: 46px; height: 46px; border: 3px solid var(--pc-ink); border-radius: 13px; box-shadow: 0 3px 0 var(--pc-ink); transition: transform 0.4s var(--spring); }
.brand:hover .brand__mark { transform: rotate(-14deg) scale(1.1); }
/* the logo: YUMI with Pikachu, cut out of its sky */
.brand__logo { display: block; height: 70px; width: auto; filter: drop-shadow(0 3px 0 rgba(27, 31, 59, 0.35)); transform-origin: 50% 80%; transition: transform 0.4s var(--spring); }
.brand:hover .brand__logo { transform: rotate(-4deg) scale(1.06); }
.brand__logo--lg { height: 128px; }
.brand__word {
  font: 400 31px/1 var(--f-fun);
  letter-spacing: 0.04em;
  color: var(--pc-yellow);
  -webkit-text-stroke: 5px var(--pc-ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--pc-ink);
  transform: translateY(2px);
}
.nav { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.nav a {
  position: relative;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 14.5px;
  text-shadow: 0 2px 0 rgba(27, 31, 59, 0.35);
  transition: color 0.2s, background 0.2s, transform 0.2s var(--spring);
}
.nav a:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-1px); }
.nav a[aria-current="page"] { color: var(--pc-ink); background: var(--pc-yellow); box-shadow: inset 0 0 0 2.5px var(--pc-ink), 0 3px 0 var(--pc-ink); text-shadow: none; }
.nav a .tag {
  position: absolute;
  top: -8px;
  right: -6px;
  padding: 3px 5px 2px;
  border: 2px solid var(--pc-ink);
  border-radius: 6px;
  background: var(--pc-teal);
  color: var(--pc-ink);
  font: 400 7px/1 var(--f-gb);
  letter-spacing: 0.04em;
  text-shadow: none;
  transform: rotate(8deg);
  animation: tag-bob 2.4s ease-in-out infinite;
}
.topbar__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ca-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 5px 0 12px;
  border: 3px solid var(--pc-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--pc-ink);
  font: 400 10px/1 var(--f-gb);
  box-shadow: 0 4px 0 var(--pc-ink);
  cursor: pointer;
  transition: transform 0.15s var(--boing);
}
.ca-pill:hover { transform: translateY(-2px); }
.ca-pill b { color: var(--pc-red); font-weight: 400; }
.ca-pill .ca-pill__copy {
  display: inline-grid;
  place-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--pc-yellow);
  border: 2px solid var(--pc-ink);
  font: 400 12px/1 var(--f-fun);
  letter-spacing: 0.04em;
  color: var(--pc-ink);
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 3px solid var(--pc-ink);
  background: #fff;
  box-shadow: 0 3px 0 var(--pc-ink);
  color: var(--pc-ink);
  cursor: pointer;
  transition: transform 0.15s var(--boing);
}
.icon-btn:hover { transform: translateY(-2px); }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pc-ink); }
.icon-btn svg { width: 18px; height: 18px; }
.burger { display: none; }
.nav .nav__sound { display: none; border: 0; background: none; text-align: left; font: 800 16px/1 var(--f-body); color: #fff; padding: 14px 12px; cursor: pointer; }

.ticker {
  position: relative;
  height: 44px;
  border-bottom: 4px solid var(--pc-ink);
  background: var(--pc-yellow);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ticker__label {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 16px 0 20px;
  background: var(--pc-ink);
  color: #fff;
  font: 400 10px/1 var(--f-gb);
  letter-spacing: 0.08em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  padding-right: 26px;
}
.ticker__track { display: flex; gap: 34px; padding-left: 20px; white-space: nowrap; animation: marquee 60s linear infinite; will-change: transform; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--pc-ink); }
.ticker__item img { width: 28px; height: 28px; object-fit: contain; }
.ticker__item b { color: var(--pc-ink); font-weight: 800; }
.ticker__item .t-evo { color: var(--pc-red); }
.ticker__item .t-jar { color: var(--good); }
.ticker__item .t-ai { color: var(--pc-teal-2); }
.ticker__item time { color: rgba(27, 31, 59, 0.6); font-size: 12px; font-weight: 700; }
.ticker__item svg { color: var(--pc-red); }

/* ----------------------------------------------------------- footer */

/* the same world at night */
.footer {
  position: relative;
  margin-top: 0;
  border-top: 4px solid var(--pc-ink);
  background:
    radial-gradient(circle at 12% 24%, #fff 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 36% 12%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 58% 30%, #fff8c4 0 1.3px, transparent 2px),
    radial-gradient(circle at 76% 10%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 90% 34%, #d6f2ff 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 24% 46%, #fff 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 66% 52%, #fff 0 0.9px, transparent 1.6px),
    linear-gradient(180deg, #1b2a6b 0%, #16204a 60%, #121a3a 100%);
  color: #e8ecff;
}
.footer::before {
  /* the moon */
  content: "";
  position: absolute;
  right: 7%;
  top: 34px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe0, #ffe98a 60%, #f2c94c);
  box-shadow: 0 0 40px 10px rgba(255, 233, 138, 0.35);
}
.footer__in { position: relative; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding: 64px 0 36px; }
.footer h4 { margin: 0 0 16px; font: 400 10px/1 var(--f-gb); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pc-yellow); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer ul a { color: #dfe4ff; font-weight: 700; }
.footer ul a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.footer__note { color: #b5bde6; font-size: 14px; line-height: 1.6; max-width: 46ch; margin-top: 14px; }
.footer .ca-row { background: #fff; }
.footer__base { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0 34px; border-top: 2px dashed rgba(232, 236, 255, 0.2); color: #9aa3d0; font-size: 12px; }

/* ------------------------------------------------ GBA dialog and HP plate */

.dialog {
  position: relative;
  padding: 16px 44px 16px 20px;
  min-height: 82px;
  border-radius: 14px;
  background: var(--gb-paper);
  color: var(--gb-ink);
  box-shadow: inset 0 0 0 3px var(--gb-frame), inset 0 0 0 6px var(--gb-frame-2), inset 0 0 0 8px var(--gb-frame), 0 6px 0 var(--pc-ink);
  font: 400 clamp(15px, 1.5vw, 18px)/1.5 var(--f-pixel);
  letter-spacing: 0.03em;
}
.dialog p { margin: 0; min-height: 1.5em; }
.dialog__more {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #e0413b;
  animation: bob 0.8s steps(2) infinite;
}
.dialog--dark {
  background: #1c2242;
  color: #f4f5ff;
  box-shadow: inset 0 0 0 3px #0b0f22, inset 0 0 0 6px #6b7fd6, inset 0 0 0 8px #0b0f22, 0 6px 0 var(--pc-ink);
}

.hpbox {
  position: relative;
  padding: 10px 14px 12px;
  min-width: 230px;
  border-radius: 12px 12px 12px 4px;
  background: #f6f6e6;
  color: #2a2f40;
  box-shadow: inset 0 0 0 3px #3b4466, 0 4px 0 rgba(27, 31, 59, 0.55);
  font-family: var(--f-pixel);
}
.hpbox__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.hpbox__top small { font-size: 12px; color: #6a6f85; }
.hpbar { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.hpbar__label {
  padding: 1px 4px;
  border-radius: 3px;
  background: #f0a51c;
  color: #fff8de;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.hpbar__track { flex: 1; height: 9px; padding: 2px; border-radius: 5px; background: #445071; }
.hpbar__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(#78f2a0, #2bc46a);
  transition: width 0.7s var(--ease), background 0.3s;
}
.hpbar__fill.is-mid { background: linear-gradient(#ffe17a, #f2b51c); }
.hpbar__fill.is-low { background: linear-gradient(#ff8a8a, #e23d3d); }
.hpbox__num { margin-top: 4px; text-align: right; font-size: 13px; color: #4a4f66; }

/* ------------------------------------------------------------- cards */

.card {
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  --o: 0;
  --bgx: 50%;
  --bgy: 50%;
  --w: 260px;
  position: relative;
  width: var(--w);
  aspect-ratio: 63 / 88;
  container-type: inline-size;
  perspective: 900px;
  font-family: var(--f-body);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.card__inner {
  position: absolute;
  inset: 0;
  border-radius: calc(100cqw * 0.055);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease), box-shadow 0.4s;
  box-shadow: 0 0 0 calc(100cqw * 0.012) var(--pc-ink), 0 calc(100cqw * 0.045) 0 calc(100cqw * 0.004) rgba(27, 31, 59, 0.85), 0 calc(100cqw * 0.12) calc(100cqw * 0.16) -12px rgba(27, 31, 59, 0.45);
  will-change: transform;
}
.card.is-active .card__inner { transition: transform 0.08s linear, box-shadow 0.4s; box-shadow: 0 0 0 calc(100cqw * 0.012) var(--pc-ink), 0 calc(100cqw * 0.06) 0 calc(100cqw * 0.004) rgba(27, 31, 59, 0.85), 0 calc(100cqw * 0.16) calc(100cqw * 0.22) -14px color-mix(in srgb, var(--type) 70%, transparent); }
.card__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  padding: calc(100cqw * 0.035);
  background: linear-gradient(145deg, #ffe873, #f2b81c 40%, #ffe066 60%, #d99a0f);
}
.card--holo .card__frame { background: linear-gradient(145deg, #f6f1ff, #b7c3ff 30%, #ffe3f6 52%, #b0f3ff 74%, #d9dcf0); }
.card--fullart .card__frame { background: linear-gradient(145deg, #ffeeb0, #d5a53b 35%, #fff1c4 55%, #b9862b 80%, #f3d989); }
.card--agent .card__frame {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.25) 1px, transparent 1px) 0 0 / 9px 9px,
    linear-gradient(rgba(255, 255, 255, 0.25) 1px, transparent 1px) 0 0 / 9px 9px,
    linear-gradient(145deg, #7ff5e8, #14c9b7 38%, #b6fff6 58%, #0e9e91);
}
.card--mega .card__frame { background: conic-gradient(from var(--spin, 0deg), #ff6b6b, #ffd93d, #6bff95, #6bd5ff, #9b6bff, #ff6bd5, #ff6b6b); animation: spin-var 6s linear infinite; }
.card__face {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(100cqw * 0.03);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--type) 55%, white) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--type) 70%, #ffffff) 0%, var(--type) 45%, color-mix(in srgb, var(--type) 60%, #0b0d1a) 100%);
  color: #14182a;
}
.card--mega .card__face {
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--type) 40%, #ffffff) 0%, transparent 70%),
    linear-gradient(180deg, #2b2257, color-mix(in srgb, var(--type) 45%, #120d2e) 55%, #08061a);
  color: #f4f1ff;
}
.card__head {
  display: flex;
  align-items: center;
  gap: calc(100cqw * 0.025);
  padding: calc(100cqw * 0.03) calc(100cqw * 0.035) calc(100cqw * 0.02);
}
.card__stage {
  flex: none;
  padding: calc(100cqw * 0.008) calc(100cqw * 0.022);
  border-radius: 999px;
  background: rgba(20, 24, 42, 0.85);
  color: #fff;
  font: 400 calc(100cqw * 0.033)/1.2 var(--f-pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card--mega .card__stage { background: linear-gradient(90deg, #ff6bd5, #9b6bff); }
.card--agent .card__stage { background: #0b3b37; color: #7ff5e8; }
.card__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 800 calc(100cqw * 0.06)/1.1 var(--f-body);
  letter-spacing: -0.01em;
}
.card__mc { flex: none; display: flex; align-items: baseline; gap: 3px; font: 800 calc(100cqw * 0.058)/1 var(--f-body); }
.card__mc small { font: 400 calc(100cqw * 0.032)/1 var(--f-pixel); opacity: 0.75; }
.card__art {
  position: relative;
  margin: 0 calc(100cqw * 0.035);
  aspect-ratio: 1.42;
  border-radius: calc(100cqw * 0.018);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.18) 34%, transparent 62%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, color-mix(in srgb, var(--type) 35%, #ffffff), color-mix(in srgb, var(--type) 85%, #ffffff));
  box-shadow: inset 0 0 0 calc(100cqw * 0.012) rgba(255, 255, 255, 0.55), inset 0 6px 18px rgba(0, 0, 0, 0.18);
}
.card--mega .card__art {
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 0.5) 0%, rgba(155, 107, 255, 0.25) 36%, transparent 64%),
    radial-gradient(circle at 20% 20%, rgba(255, 107, 213, 0.35), transparent 40%),
    linear-gradient(180deg, #1c1640, #362a7a);
  box-shadow: inset 0 0 0 calc(100cqw * 0.012) rgba(196, 170, 255, 0.55), inset 0 6px 18px rgba(0, 0, 0, 0.35);
}
.card__art img {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 82%;
  height: 92%;
  object-fit: contain;
  transform: translateX(-50%) translateZ(30px);
  filter: drop-shadow(0 calc(100cqw * 0.02) calc(100cqw * 0.02) rgba(0, 0, 0, 0.35));
  transition: transform 0.6s var(--ease);
}
.card.is-active .card__art img { transform: translateX(calc(-50% + (var(--ry) * -0.6px))) translateY(calc(var(--rx) * 0.6px)) translateZ(30px) scale(1.04); }
/* the project's own token */
.card--official .card__frame { background: linear-gradient(145deg, #fff6b8, #ffcb05 28%, #fffbe6 50%, #e3a400 72%, #ffe066); }
.card--official .card__face {
  background:
    radial-gradient(120% 70% at 50% 0%, #d4f3ff 0%, transparent 70%),
    linear-gradient(180deg, #8ed9fc 0%, #60c7f6 52%, #2f86cf 100%);
}
.card--official .card__stage { background: #e3350d; }
.card--official .card__art { background: repeating-conic-gradient(from -4deg at 50% 62%, #8ed9fc 0deg 8deg, #60c7f6 8deg 20deg); }
.card--official .card__art img { width: 94%; height: 96%; bottom: 2%; filter: drop-shadow(0 calc(100cqw * 0.014) 0 rgba(27, 31, 59, 0.35)); }
.card--official .card__foil { opacity: calc(0.12 + var(--o) * 0.45); }
.card__ribbon {
  position: absolute;
  z-index: 3;
  top: calc(100cqw * 0.055);
  right: calc(100cqw * -0.13);
  width: calc(100cqw * 0.5);
  transform: rotate(35deg);
  padding: calc(100cqw * 0.012) 0;
  background: #e3350d;
  color: #fff;
  text-align: center;
  font: 400 calc(100cqw * 0.03)/1.2 var(--f-pixel);
  letter-spacing: 0.08em;
  box-shadow: 0 calc(100cqw * 0.006) 0 rgba(27, 31, 59, 0.55);
}
.coin-tile--official .coin-tile__meta b { color: #e3350d; font-weight: 800; }
.chip--official { background: #e3350d; color: #fff; }
.topbar__buy { white-space: nowrap; }
.nav .nav__buy { display: none; }
.card__art .card__own {
  position: absolute;
  right: calc(100cqw * 0.025);
  top: calc(100cqw * 0.025);
  width: calc(100cqw * 0.16);
  height: calc(100cqw * 0.16);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 calc(100cqw * 0.008) #fff, 0 4px 10px rgba(0, 0, 0, 0.35);
}
/* the Gym Badges a coin's brain earned */
.card__ai {
  position: absolute;
  left: calc(100cqw * 0.025);
  top: calc(100cqw * 0.025);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: calc(100cqw * 0.012);
  padding: calc(100cqw * 0.012) calc(100cqw * 0.022) calc(100cqw * 0.01) calc(100cqw * 0.014);
  border-radius: 999px;
  background: var(--pc-yellow);
  color: var(--pc-ink);
  font: 400 calc(100cqw * 0.03)/1 var(--f-gb);
  box-shadow: 0 0 0 calc(100cqw * 0.007) var(--pc-ink);
}
.card__ai::before { content: ""; width: calc(100cqw * 0.04); height: calc(100cqw * 0.04); background: var(--pc-ink); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.card__strip {
  margin: calc(100cqw * 0.018) calc(100cqw * 0.035) 0;
  padding: calc(100cqw * 0.01) calc(100cqw * 0.025);
  border-radius: calc(100cqw * 0.012);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.28));
  font: 400 calc(100cqw * 0.034)/1.3 var(--f-pixel);
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card--mega .card__strip { background: linear-gradient(90deg, rgba(155, 107, 255, 0.45), rgba(255, 107, 213, 0.3)); }
.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(100cqw * 0.022);
  padding: calc(100cqw * 0.025) calc(100cqw * 0.045) 0;
}
.card__ticker { display: flex; justify-content: space-between; align-items: baseline; font: 800 calc(100cqw * 0.06)/1 var(--f-body); }
.card__ticker small { font: 400 calc(100cqw * 0.034)/1 var(--f-pixel); opacity: 0.7; letter-spacing: 0.04em; }
.card__bar { height: calc(100cqw * 0.03); padding: calc(100cqw * 0.006); border-radius: 999px; background: rgba(15, 18, 35, 0.55); }
.card__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #fff6c7, #ffd23f); box-shadow: 0 0 10px rgba(255, 210, 63, 0.8); transition: width 1s var(--ease); }
.card__next { font: 400 calc(100cqw * 0.035)/1.25 var(--f-pixel); letter-spacing: 0.02em; opacity: 0.85; }
.card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(100cqw * 0.02) calc(100cqw * 0.045) calc(100cqw * 0.03);
  font: 400 calc(100cqw * 0.03)/1 var(--f-pixel);
  letter-spacing: 0.06em;
  opacity: 0.8;
}
.card__rarity { display: inline-flex; gap: 4px; align-items: center; }
.card__rarity svg { width: calc(100cqw * 0.04); height: calc(100cqw * 0.04); }

.card--fullart .card__art { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.card--fullart .card__art img { width: 120%; height: 78%; bottom: 20%; }
.card--fullart .card__head, .card--fullart .card__body, .card--fullart .card__foot, .card--fullart .card__strip { position: relative; z-index: 2; }
.card--fullart .card__head { background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent); }
.card--fullart .card__strip { margin-top: auto; }
.card--fullart .card__face { justify-content: flex-start; }
.card--fullart .card__body { flex: none; margin: calc(100cqw * 0.02) calc(100cqw * 0.035) 0; padding: calc(100cqw * 0.03); border-radius: calc(100cqw * 0.02); background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(6px); }
.card--fullart .card__art::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 9px); mix-blend-mode: soft-light; }

.card__foil, .card__glare, .card__sparkle { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.card__foil {
  z-index: 3;
  opacity: 0;
  mix-blend-mode: color-dodge;
  background:
    repeating-linear-gradient(115deg, #ff7773 0%, #ffed5f 6%, #a8ff5f 12%, #83fff7 18%, #7894ff 24%, #d875ff 30%, #ff7773 36%) var(--bgx) var(--bgy) / 300% 300%,
    repeating-linear-gradient(55deg, rgba(0, 0, 0, 0.5) 0 2px, transparent 2px 6px);
  filter: brightness(0.75) contrast(1.4) saturate(1.1);
  transition: opacity 0.4s;
}
.card--holo .card__foil {
  opacity: calc(0.22 + var(--o) * 0.55);
  clip-path: inset(10% 3.5% 46% 3.5% round 4%);
}
.card--fullart .card__foil { opacity: calc(0.18 + var(--o) * 0.5); }
.card--agent .card__foil { opacity: calc(0.12 + var(--o) * 0.45); }
.card--mega .card__foil { opacity: calc(0.25 + var(--o) * 0.55); mix-blend-mode: screen; filter: brightness(0.7) saturate(1.4); }
.card__glare {
  z-index: 4;
  opacity: var(--o);
  mix-blend-mode: overlay;
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 25%, rgba(0, 0, 0, 0.35) 90%);
  transition: opacity 0.4s;
}
.card--shiny .card__sparkle {
  z-index: 5;
  opacity: calc(0.55 + var(--o) * 0.45);
  mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at 18% 22%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 72% 14%, #fff8c4 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 46%, #fff 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 30% 64%, #d6f2ff 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 78%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 12% 88%, #ffe0f6 0 1px, transparent 1.8px);
  background-size: 64px 64px, 80px 80px, 72px 72px, 56px 56px, 90px 90px, 70px 70px;
  background-position: var(--bgx) var(--bgy);
  animation: twinkle 2.4s ease-in-out infinite;
}
.shiny-star { color: #ffd23f; filter: drop-shadow(0 0 4px rgba(255, 210, 63, 0.9)); }
.card.is-idle .card__inner { animation: card-idle 6s ease-in-out infinite; }
.card.is-idle .card__foil { animation: foil-idle 6s ease-in-out infinite; }
.card--sm { --w: 200px; }
.card--xs { --w: 150px; }
.card--lg { --w: 320px; }
.card--xl { --w: min(360px, 82vw); }

.skel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 3px rgba(27, 31, 59, 0.12);
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  animation: shimmer 1.4s infinite;
}
.skel-card { width: var(--w, 220px); aspect-ratio: 63 / 88; border-radius: 14px; }

/* ------------------------------------------------------- sticker panels */

.panel, .sticker-panel {
  border-radius: var(--r-lg);
  background: #fff;
  border: var(--edge) solid var(--pc-ink);
  box-shadow: var(--pop);
}

/* ----------------------------------------------------------- bands */

.section { padding: 110px 0 0; }
.section__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 38px; }
.section__head .lede { margin-top: 16px; }
.section__head .h-section { margin-top: 18px; }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 8px;
  border: 3px solid var(--pc-ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 0 var(--pc-ink);
  color: var(--pc-ink);
  font: 400 15px/1 var(--f-fun);
  letter-spacing: 0.04em;
  transition: transform 0.15s var(--boing);
  white-space: nowrap;
}
.link-arrow::after { content: ""; width: 7px; height: 7px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: rotate(45deg); transition: transform 0.25s var(--ease); }
.link-arrow:hover { transform: translateY(-2px) rotate(-1deg); }
.link-arrow:hover::after { transform: translateX(3px) rotate(45deg); }

.band { position: relative; padding: clamp(80px, 9vw, 124px) 0; border-top: 4px solid var(--pc-ink); background: var(--band, var(--bg)); }
.band--tight { padding: clamp(48px, 6vw, 72px) 0; }
.band--grass {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0 22px, transparent 22px 44px),
    linear-gradient(180deg, #74d14d, #5cbf3d);
}
.band--sky {
  background:
    radial-gradient(140px 44px at 12% 18%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(190px 50px at 82% 12%, rgba(255, 255, 255, 0.75), transparent 70%),
    radial-gradient(160px 40px at 60% 88%, rgba(255, 255, 255, 0.6), transparent 70%),
    linear-gradient(180deg, #7fd0ff, #c6ecff);
}
.band--yellow {
  background:
    radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.35) 0 7px, transparent 7.5px) 0 0 / 40px 40px,
    linear-gradient(180deg, #ffd84a, #ffc41f);
}
.band--water {
  background:
    radial-gradient(120% 24px at 50% 0, rgba(255, 255, 255, 0.16) 0 50%, transparent 52%) 0 0 / 80px 40px,
    linear-gradient(180deg, #4aa8ff, #2f86e8);
}
.band--sunset {
  background:
    radial-gradient(600px 260px at 85% 0%, rgba(255, 236, 140, 0.55), transparent 70%),
    linear-gradient(180deg, #ffb35c, #ff8f73 60%, #ff7d95);
}
.band--pink { background: linear-gradient(180deg, #ffb3d6, #ff94c2); }
.band--red {
  background:
    radial-gradient(circle at 30px 30px, rgba(255, 255, 255, 0.12) 0 10px, transparent 11px) 0 0 / 60px 60px,
    var(--pc-red);
  color: #fff;
}
.band--red .lede { color: #fff; }
.band--cream { background: transparent; }
.band--agents {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1.5px, transparent 1.5px) 0 0 / 34px 34px,
    linear-gradient(rgba(255, 255, 255, 0.13) 1.5px, transparent 1.5px) 0 0 / 34px 34px,
    radial-gradient(700px 360px at 85% 20%, rgba(255, 255, 255, 0.3), transparent 70%),
    linear-gradient(180deg, #2ee0cd, #12b8a8);
}
.band--water .lede, .band--grass .lede, .band--agents .lede, .band--sunset .lede { color: var(--pc-ink); }
.band--water .h-section, .band--sunset .h-section, .band--agents .h-section, .band--grass .h-section, .band--red .h-section { --h-fill: #fff; }
.band--yellow .h-section { --h-fill: #fff; }

/* -------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px 0 210px;
  background: linear-gradient(180deg, #3fb0f5 0%, #7ccdff 42%, #c3ecff 82%, #dff6ff 100%);
}
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sky__rays {
  position: absolute;
  left: 72%;
  top: 34%;
  width: 170vmax;
  height: 170vmax;
  margin: -85vmax 0 0 -85vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.2) 0 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 62%);
  mask-image: radial-gradient(closest-side, #000 10%, transparent 62%);
  animation: rays 80s linear infinite;
}
.sky__sun { position: absolute; right: 3%; top: 5%; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, #fff7c2 0 40%, #ffe066 41% 62%, rgba(255, 224, 102, 0) 63%); box-shadow: 0 0 80px 30px rgba(255, 236, 140, 0.5); animation: sun 4s ease-in-out infinite; }
.sky .cloud { opacity: 0.95; }
.sky .cloud.c1 { top: 10%; }
.sky .cloud.c2 { top: 30%; }
.sky .cloud.c3 { top: 4%; }
.sky .cloud.c4 { top: 52%; }
.flyer { position: absolute; top: 3%; left: 0; width: 64px; animation: fly 32s linear infinite; animation-delay: -6s; }
.flyer img { width: 100%; transform: scaleX(-1); animation: bob-fly 1.6s ease-in-out infinite; }
.meadow { position: absolute; left: 0; right: 0; bottom: 0; height: 210px; z-index: -1; pointer-events: none; }
.meadow__hills {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 70px;
  height: 150px;
  background:
    radial-gradient(52% 100% at 14% 100%, #8ad45c 0 64%, var(--pc-ink) 64.3% 65.6%, transparent 66%),
    radial-gradient(48% 92% at 86% 100%, #79c64c 0 64%, var(--pc-ink) 64.3% 65.6%, transparent 66%),
    radial-gradient(42% 74% at 50% 100%, #9ade6c 0 64%, var(--pc-ink) 64.3% 65.8%, transparent 66.2%);
}
.meadow__grass {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 76px;
  border-top: 4px solid var(--pc-ink);
  background: repeating-linear-gradient(90deg, #6cc84a 0 28px, #5fbd40 28px 56px);
}
.meadow__grass::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 24px;
  background: radial-gradient(circle at 14px 24px, #6cc84a 13px, var(--pc-ink) 13.5px 16.5px, transparent 17px) 0 0 / 28px 24px repeat-x;
}
.walkers { position: absolute; left: 0; right: 0; bottom: 30px; height: 120px; }
.walker {
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--h, 64px);
  animation: walk var(--dur, 26s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.walker img { height: 100%; width: auto; max-width: none; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(27, 31, 59, 0.25)); }
.walker--hop img { animation: hop 0.62s ease-in-out infinite; }
.walker--r { animation-name: walk-r; }
.walker--r img { transform: scaleX(-1); }
.walker--r.walker--hop img { animation-name: hop-r; }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: center; }
.hero h1 { margin-top: 24px; }
.hero h1 .y, .h-display .y { --h-fill: var(--pc-yellow); color: var(--pc-yellow); display: block; }
.hero .lede { margin-top: 24px; color: var(--pc-ink); font-weight: 700; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ca-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  max-width: 560px;
  padding: 8px 8px 8px 12px;
  border: 3px solid var(--pc-ink);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 0 var(--pc-ink);
  color: var(--pc-ink);
}
.ca-row__label { font: 400 10px/1 var(--f-gb); letter-spacing: 0.06em; color: var(--pc-red); }
.ca-row__addr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 15px/1 var(--f-pixel); color: var(--pc-ink); }
.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; max-width: 600px; }
.levels > div { padding: 12px 14px 11px; border: 3px solid var(--pc-ink); border-radius: 16px; background: var(--c, #fff); box-shadow: 0 4px 0 var(--pc-ink); transform: rotate(var(--t, 0deg)); transition: transform 0.25s var(--spring); }
.levels > div:hover { transform: rotate(0deg) translateY(-3px); }
.levels > div:nth-child(1) { --c: var(--pc-yellow); --t: -1.5deg; }
.levels > div:nth-child(2) { --c: #ffb36b; --t: 1deg; }
.levels > div:nth-child(3) { --c: var(--pc-pink); --t: -1deg; }
.levels > div:nth-child(4) { --c: #8ff0a6; --t: 1.5deg; }
.levels b { display: block; font: 400 24px/1 var(--f-display); color: var(--pc-ink); letter-spacing: 0.02em; }
.levels span { display: block; margin-top: 5px; font-size: 12px; font-weight: 800; color: var(--pc-ink); line-height: 1.25; }

.stage-wrap { position: relative; display: grid; justify-items: center; gap: 18px; }
.stage-glow {
  position: absolute;
  inset: -12% -18% 10%;
  z-index: -1;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--type) 55%, transparent), transparent 75%),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, #fff 55%, transparent) 0 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
  border-radius: 50%;
  animation: rays 40s linear infinite;
  transition: background 0.8s;
}
.stage-wrap .dialog { width: min(440px, 100%); }
.evo-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.evo-tab {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 92px;
  padding: 8px 6px 7px;
  border: 3px solid var(--pc-ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 0 var(--pc-ink);
  color: var(--ink-2);
  font: 400 11px/1.2 var(--f-pixel);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s var(--spring);
}
.evo-tab img { width: 46px; height: 46px; object-fit: contain; }
.evo-tab small { color: var(--muted); }
.evo-tab:hover { transform: translateY(-2px); }
.evo-tab.is-on { color: var(--pc-ink); background: var(--pc-yellow); transform: translateY(-3px) rotate(-2deg); }
.evo-tab.is-locked img { filter: brightness(0) invert(0.35); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.stats > div { padding: 22px 20px 18px; border: 3px solid var(--pc-ink); border-radius: 20px; background: #fff; box-shadow: var(--pop); text-align: center; transition: transform 0.25s var(--spring); }
.stats > div:hover { transform: translateY(-4px) rotate(-1deg); }
.stats b { display: block; font: 400 clamp(32px, 3.4vw, 46px)/1 var(--f-display); color: var(--c, var(--pc-ink)); -webkit-text-stroke: 0.1em var(--pc-ink); paint-order: stroke fill; letter-spacing: 0.02em; }
.stats > div:nth-child(1) { --c: var(--pc-yellow); }
.stats > div:nth-child(2) { --c: var(--pc-orange); }
.stats > div:nth-child(3) { --c: var(--pc-red-2); }
.stats > div:nth-child(4) { --c: var(--pc-pink); }
.stats > div:nth-child(5) { --c: #5ec8ff; }
.stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats span { display: block; margin-top: 10px; color: var(--ink-2); font-size: 13px; font-weight: 800; }

/* life of a coin */
.life { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.life::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 90px;
  height: 0;
  border-top: 5px dashed var(--pc-ink);
  opacity: 0.55;
}
.life__step { position: relative; display: grid; justify-items: center; text-align: center; padding: 0 12px; }
.life__orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 184px;
  height: 184px;
  border-radius: 50%;
  border: 4px solid var(--pc-ink);
  background:
    radial-gradient(circle at 50% 40%, #fff 0 22%, transparent 60%),
    radial-gradient(circle, color-mix(in srgb, var(--type) 40%, white), color-mix(in srgb, var(--type) 80%, white));
  box-shadow: 0 7px 0 var(--pc-ink);
  transition: transform 0.4s var(--spring);
}
.life__orb img { width: 140px; height: 140px; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(27, 31, 59, 0.2)); transition: transform 0.5s var(--spring); }
.life__step:hover .life__orb { transform: rotate(-4deg); }
.life__step:hover .life__orb img { transform: translateY(-8px) scale(1.08); }
.life__step.is-mega .life__orb { background: conic-gradient(from 0deg, #ff6b6b, #ffd93d, #6bff95, #6bd5ff, #9b6bff, #ff6bd5, #ff6b6b); }
.life__lvl { margin-top: 24px; font: 400 32px/1 var(--f-display); color: var(--pc-yellow); -webkit-text-stroke: 0.14em var(--pc-ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--pc-ink); letter-spacing: 0.02em; }
.life__name { margin-top: 10px; font: 400 10px/1 var(--f-gb); letter-spacing: 0.04em; color: var(--pc-red); text-transform: uppercase; }
.life__text { margin-top: 12px; color: var(--ink-2); font-size: 14.5px; font-weight: 600; line-height: 1.55; max-width: 26ch; }
.life__buy { margin-top: 12px; }

/* coin grids */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 34px 22px; justify-items: center; }
.grid-cards .card { --w: min(250px, 100%); }
.coin-tile { display: grid; gap: 14px; justify-items: center; width: 100%; }
.coin-tile__meta { display: flex; justify-content: space-between; width: min(250px, 100%); font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.coin-tile__meta a:hover { color: var(--pc-red); }
.empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 52px 24px;
  border: 3px dashed var(--pc-ink);
  border-radius: var(--r-lg);
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--pop);
}
.empty img { width: 124px; height: 124px; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(27, 31, 59, 0.2)); animation: float 3s ease-in-out infinite; }
.empty h3 { font: 400 30px/1.1 var(--f-display); color: var(--pc-yellow); -webkit-text-stroke: 0.14em var(--pc-ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--pc-ink); letter-spacing: 0.02em; }
.empty p { margin: 0; color: var(--ink-2); font-weight: 600; max-width: 46ch; }

/* jar */
.jar-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.jar-art { position: relative; display: grid; place-items: center; }
.jar-art svg { width: min(360px, 80vw); height: auto; overflow: visible; filter: drop-shadow(0 8px 0 rgba(27, 31, 59, 0.3)); }
.jar-art .jar-bal { position: absolute; bottom: 12%; left: 0; right: 0; text-align: center; font: 400 32px/1 var(--f-display); color: #fff; -webkit-text-stroke: 0.14em var(--pc-ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--pc-ink); letter-spacing: 0.02em; }
.jar-art .jar-bal small { display: table; margin: 10px auto 0; padding: 5px 8px 4px; border: 2px solid var(--pc-ink); border-radius: 8px; background: #fff; font: 400 9px/1 var(--f-gb); letter-spacing: 0.04em; color: var(--pc-ink); -webkit-text-stroke: 0; text-shadow: none; }
.jar-list { display: grid; gap: 10px; margin-top: 22px; }
.jar-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 3px solid var(--pc-ink); border-radius: 14px; background: #fff; box-shadow: var(--pop-sm); font-size: 14px; }
.jar-row img { width: 38px; height: 38px; object-fit: contain; }
.jar-row b { font-weight: 800; }
.jar-row .grow { flex: 1; min-width: 0; }
.jar-row time { color: var(--muted); font-size: 12px; font-weight: 700; }
.flow { display: grid; grid-template-columns: repeat(5, auto); align-items: center; gap: 10px; margin-top: 26px; }
.flow span { padding: 10px 12px; border: 2.5px solid var(--pc-ink); border-radius: 12px; background: #fff; box-shadow: 0 3px 0 var(--pc-ink); font: 400 12px/1.2 var(--f-pixel); text-align: center; color: var(--pc-ink); }
.flow i { width: 16px; height: 3px; background: var(--pc-ink); position: relative; }
.flow i::after { content: ""; position: absolute; right: -2px; top: -4px; border-left: 7px solid var(--pc-ink); border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }

/* battle stage */
.arena {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #8fd3ff 0%, #c9ecff 46%, #9fdc7a 46.2%, #6fbf55 100%);
  border: 4px solid var(--pc-ink);
  box-shadow: var(--pop);
  font-family: var(--f-pixel);
  user-select: none;
}
.arena::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120px 40px at 22% 20%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(160px 46px at 70% 12%, rgba(255, 255, 255, 0.8), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0 2px, transparent 2px 24px) 0 46% / 100% 54% no-repeat;
}
.arena.is-night { background: linear-gradient(180deg, #1b2457 0%, #3b3f8f 46%, #2f5b3b 46.2%, #1e3d29 100%); }
.arena__pad { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, #c8ef9a, #8fcf62 60%, rgba(0, 0, 0, 0) 72%); }
.arena.is-night .arena__pad { background: radial-gradient(closest-side, #6aa86b, #3f7a46 60%, rgba(0, 0, 0, 0) 72%); }
.arena__pad--foe { right: 8%; top: 36%; width: 34%; height: 13%; }
.arena__pad--me { left: 4%; bottom: 23%; width: 40%; height: 15%; }
.arena__mon { position: absolute; display: grid; place-items: end center; transition: transform 0.25s var(--ease), opacity 0.4s; }
.arena__mon img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; image-rendering: auto; }
.arena__mon--foe { right: 13%; top: 8%; width: 24%; height: 34%; }
.arena__mon--me { left: 10%; bottom: 25%; width: 28%; height: 40%; }
.arena__mon.is-lunge-me { transform: translate(14%, -8%); }
.arena__mon.is-lunge-foe { transform: translate(-14%, 8%); }
.arena__mon.is-hit { animation: hitblink 0.5s steps(2) 1; }
.arena__mon.is-out { transform: translateY(30%); opacity: 0; }
.arena__mon .arena__fallback { transform: scaleX(-1); }
.arena .hpbox { position: absolute; min-width: 0; width: 38%; }
.arena .hpbox--foe { left: 4%; top: 6%; }
.arena .hpbox--me { right: 4%; bottom: 25%; }
.arena .dialog { position: absolute; left: 2%; right: 2%; bottom: 3%; min-height: 0; height: 20%; padding: 2.2% 3%; display: flex; align-items: center; font-size: clamp(12px, 1.9vw, 19px); box-shadow: inset 0 0 0 3px var(--gb-frame), inset 0 0 0 6px var(--gb-frame-2), inset 0 0 0 8px var(--gb-frame); }
.arena__badge { position: absolute; top: 4%; right: 4%; }
.arena__fx { position: absolute; inset: 0; pointer-events: none; }
.arena__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

/* evolution scene */
.evo-scene { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; }
.evo-scene__dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(10, 13, 26, 0.35), rgba(10, 13, 26, 0.92)); opacity: 0; transition: opacity 0.5s; }
.evo-scene.is-on .evo-scene__dim { opacity: 1; }
.evo-scene__rays { position: absolute; width: 170%; aspect-ratio: 1; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.16) 0 6deg, transparent 6deg 18deg); border-radius: 50%; opacity: 0; animation: rays 6s linear infinite; mask-image: radial-gradient(closest-side, #000, transparent); transition: opacity 0.6s; }
.evo-scene.is-on .evo-scene__rays { opacity: 1; }
.evo-scene.is-mega .evo-scene__rays { background: repeating-conic-gradient(from 0deg, rgba(255, 107, 213, 0.3) 0 6deg, rgba(107, 213, 255, 0.25) 6deg 12deg, transparent 12deg 18deg); }
.evo-scene__mons { position: relative; width: 62%; aspect-ratio: 1; }
.evo-scene__mons img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)); opacity: 0; }
.evo-scene__mons img.is-show { opacity: 1; }
.evo-scene__mons img.is-color { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5)); }
.evo-scene__flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.evo-scene.is-mega .evo-scene__flash { background: radial-gradient(circle, #fff 30%, #ffd9f6 55%, #c6b5ff 80%); }
.burst { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; pointer-events: none; }
.burst i { position: absolute; width: 10px; height: 10px; background: var(--c, #ffd23f); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: burst 0.9s var(--ease) forwards; }

/* toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: grid; gap: 10px; width: min(380px, calc(100vw - 36px)); }
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 3px solid var(--pc-ink);
  border-radius: 16px;
  background: #fff;
  color: var(--pc-ink);
  box-shadow: var(--pop);
  font: 400 14px/1.4 var(--f-pixel);
  animation: toast-in 0.45s var(--spring);
}
.toast img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.toast b { font-weight: 400; color: var(--pc-red); }
.toast.is-out { animation: toast-out 0.3s var(--ease) forwards; }
.toast--err { background: #ffe9e4; border-color: var(--pc-red); box-shadow: 0 6px 0 var(--pc-red); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 18px; }
.modal__bd { position: absolute; inset: 0; background: rgba(27, 31, 59, 0.6); backdrop-filter: blur(6px); animation: fade-in 0.3s; }
.modal__box { position: relative; width: min(520px, 100%); max-height: 92dvh; overflow: auto; padding: 28px 26px 26px; border: 4px solid var(--pc-ink); border-radius: var(--r-lg); background: radial-gradient(500px 240px at 50% 0, color-mix(in srgb, var(--pc-sky) 30%, transparent), transparent 70%), #fff; box-shadow: 0 8px 0 var(--pc-ink); animation: pop-in 0.45s var(--spring); }
.modal__x { position: absolute; right: 14px; top: 14px; }
.modal__box .eyebrow { margin-top: 4px; }

/* forms */
.field { display: grid; gap: 8px; }
.field > label, .label { font: 400 10px/1.2 var(--f-gb); letter-spacing: 0.05em; text-transform: uppercase; color: var(--pc-ink); }
.input, .textarea, .select {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 3px solid var(--pc-ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 3px 0 rgba(27, 31, 59, 0.08);
  color: var(--pc-ink);
  font: 700 15px/1.2 var(--f-body);
  transition: box-shadow 0.2s, background 0.2s;
}
.textarea { height: auto; min-height: 98px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus { outline: none; box-shadow: 0 0 0 4px var(--pc-yellow); background: #fffef6; }
.input::placeholder, .textarea::placeholder { color: #9aa0bf; font-weight: 600; }
.field .hint, .hint { font-size: 13px; font-weight: 600; color: var(--muted); }
.field .err { font-size: 13px; color: var(--bad); }
.input-group { position: relative; }
.input-group .input { padding-left: 34px; }
.input-group > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pc-red); font: 400 15px/1 var(--f-pixel); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; border: 3px solid var(--pc-ink); border-radius: 16px; background: #fff; box-shadow: var(--pop-sm); }
.seg button { height: 38px; padding: 0 14px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-2); font: 800 14px/1 var(--f-body); cursor: pointer; transition: background 0.2s, color 0.2s; }
.seg button:hover { background: var(--panel-2); }
.seg button.is-on { background: var(--pc-yellow); color: var(--pc-ink); box-shadow: inset 0 0 0 2.5px var(--pc-ink); }

/* page header */
.page-head { position: relative; padding: 56px 0 10px; }
.page-head .lede { margin-top: 18px; }
.page-head .h-section { margin-top: 20px; }

/* launch */
.mode-switch { display: inline-flex; gap: 8px; margin-top: 26px; padding: 6px; border: 3px solid var(--pc-ink); border-radius: 22px; background: #fff; box-shadow: var(--pop); }
.mode-switch a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 9px 10px; border-radius: 16px; font: 400 18px/1 var(--f-fun); letter-spacing: 0.03em; color: var(--ink-2); transition: background 0.2s, transform 0.2s var(--spring); }
.mode-switch a img { width: 38px; height: 38px; object-fit: contain; }
.mode-switch a:hover { background: var(--panel-2); }
.mode-switch a[aria-current="page"] { background: var(--pc-yellow); color: var(--pc-ink); box-shadow: inset 0 0 0 3px var(--pc-ink); }
.mode-switch a[data-mode="agent"][aria-current="page"] { background: var(--pc-teal); }
.launch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px; align-items: start; margin-top: 34px; }
.launch__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.step { padding: 26px; border: var(--edge) solid var(--pc-ink); border-radius: var(--r-lg); background: #fff; box-shadow: var(--pop); }
.step__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.step__no { display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid var(--pc-ink); border-radius: 12px; background: var(--pc-yellow); color: var(--pc-ink); font: 400 13px/1 var(--f-gb); box-shadow: 0 3px 0 var(--pc-ink); transform: rotate(-4deg); }
.step--brain .step__no { background: var(--pc-teal); }
.step__head h2 { font: 400 26px/1.05 var(--f-display); letter-spacing: 0.02em; }
.variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.variant {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 3px solid var(--pc-ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--pop-sm);
  color: var(--pc-ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s var(--spring), background 0.2s;
}
.variant b { font: 400 20px/1.05 var(--f-display); letter-spacing: 0.02em; }
.variant span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); line-height: 1.35; }
.variant:hover { transform: translateY(-2px); }
.variant.is-on { background: var(--pc-yellow); transform: translateY(-3px) rotate(-1deg); }
.variant--holo::before, .variant--fullart::before { content: ""; position: absolute; inset: 0; opacity: 0.22; pointer-events: none; }
.variant--holo::before { background: linear-gradient(115deg, #ff7773, #ffed5f, #a8ff5f, #83fff7, #7894ff, #d875ff); }
.variant--fullart::before { background: linear-gradient(135deg, #ffeeb0, #d5a53b, #fff1c4, #b9862b); }
.picker-tools { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 14px; }
.picker-tools .input { flex: 1; min-width: 180px; height: 44px; }
.types { display: flex; gap: 6px; flex-wrap: wrap; }
.types button { height: 32px; padding: 0 11px; border: 2.5px solid var(--pc-ink); border-radius: 999px; background: color-mix(in srgb, var(--type) 35%, white); color: var(--pc-ink); font: 400 12px/1 var(--f-pixel); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: transform 0.2s var(--spring); }
.types button:hover { transform: translateY(-2px); }
.types button.is-on { background: var(--type); box-shadow: 0 3px 0 var(--pc-ink); transform: translateY(-2px); }
.mons { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; max-height: 440px; overflow: auto; padding: 6px 6px 10px; scrollbar-width: thin; }
.mon {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 4px 9px;
  border: 3px solid var(--pc-ink);
  border-radius: 16px;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--type) 45%, white) 0 30%, transparent 62%), #fff;
  box-shadow: var(--pop-sm);
  color: var(--pc-ink);
  cursor: pointer;
  transition: transform 0.25s var(--spring), background 0.2s;
}
.mon img { width: 64px; height: 64px; object-fit: contain; transition: transform 0.3s var(--spring); }
.mon:hover { transform: translateY(-3px); }
.mon:hover img { transform: translateY(-3px) scale(1.1) rotate(-4deg); }
.mon span { font: 800 12.5px/1.2 var(--f-body); }
.mon small { font: 400 10px/1 var(--f-pixel); color: var(--muted); }
.mon.is-on { background: radial-gradient(circle at 50% 36%, #fff 0 26%, transparent 62%), var(--pc-yellow); transform: translateY(-3px) rotate(-2deg); }
.mon .flag { position: absolute; top: -8px; right: -6px; padding: 3px 5px 2px; border: 2px solid var(--pc-ink); border-radius: 6px; font: 400 7px/1 var(--f-gb); letter-spacing: 0.02em; background: var(--pc-yellow); color: var(--pc-ink); transform: rotate(6deg); }
.mon .flag--rnd { background: #c9b3ff; }
.mon .flag--joke { background: #8fdcff; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.drop {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 3px dashed var(--pc-ink);
  border-radius: 16px;
  background: #fffdf4;
  width: 100%;
  text-align: left;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.2s;
}
.drop:hover { background: #fff6d6; }
.drop.is-drag { background: #fff0b3; border-style: solid; }
.drop__thumb { width: 66px; height: 66px; flex: none; border: 3px solid var(--pc-ink); border-radius: 12px; object-fit: cover; background: var(--panel-2); }
.drop b { display: block; color: var(--pc-ink); font-weight: 800; }
.drop span { font-size: 13px; font-weight: 600; color: var(--muted); }
.summary { position: sticky; top: 100px; display: grid; gap: 18px; }
.summary__card { display: grid; justify-items: center; padding: 28px 18px 22px; border: var(--edge) solid var(--pc-ink); border-radius: var(--r-lg); background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--type) 45%, transparent), transparent 68%), linear-gradient(180deg, #e9f8ff, #fff); box-shadow: var(--pop); }
.summary__line { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
.summary__line div { display: grid; justify-items: center; gap: 2px; width: 74px; font: 400 10px/1.2 var(--f-pixel); color: var(--muted); text-align: center; }
.summary__line img { width: 46px; height: 46px; object-fit: contain; }
.summary__line b { color: var(--pc-ink); font-weight: 400; }
.kv { display: grid; gap: 0; margin: 0; border: var(--edge) solid var(--pc-ink); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--pop-sm); }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 16px; border-bottom: 2px dashed var(--line-2); font-size: 14px; }
.kv > div:last-child { border-bottom: 0; background: #fff6d1; }
.kv dt, .kv .k { color: var(--muted); font-weight: 700; }
.kv dd, .kv .v { margin: 0; font-weight: 800; text-align: right; color: var(--pc-ink); }
.kv .v.y { color: var(--accent-text); }
.status-list { display: grid; gap: 8px; font: 400 14px/1.4 var(--f-pixel); }
.status-list li { display: flex; gap: 10px; align-items: center; color: var(--dim); }
.status-list li.is-on { color: var(--pc-ink); }
.status-list li.is-done { color: var(--good); }
.status-list li::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 4px; background: currentColor; flex: none; }
.status-list li.is-on::before { animation: ping-sq 1s infinite; }

/* coins page */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 26px 0 32px; }
.toolbar .input { width: min(320px, 100%); height: 46px; }

/* coin page */
.coin-hero { display: grid; grid-template-columns: 400px 1fr; gap: 48px; align-items: start; margin-top: 30px; }
.coin-hero__card { position: relative; display: grid; justify-items: center; gap: 20px; }
.coin-hero__title { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.coin-hero__title h1 { font: 400 clamp(36px, 4.4vw, 58px)/1 var(--f-display); color: #fff; -webkit-text-stroke: 0.13em var(--pc-ink); paint-order: stroke fill; text-shadow: 0 0.075em 0 var(--pc-ink); letter-spacing: 0.02em; }
.coin-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.big-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.big-numbers > div { padding: 16px 18px; border: var(--edge) solid var(--pc-ink); border-radius: 18px; background: #fff; box-shadow: var(--pop-sm); }
.big-numbers b { display: block; font: 400 30px/1 var(--f-display); letter-spacing: 0.02em; color: var(--pc-ink); }
.big-numbers span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted); font-weight: 800; }
.evo-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
.evo-node { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 8px 12px; border: var(--edge) solid var(--pc-ink); border-radius: 18px; background: #fff; box-shadow: var(--pop-sm); text-align: center; }
.evo-node img { width: 74px; height: 74px; object-fit: contain; }
.evo-node b { font: 800 13px/1.2 var(--f-body); }
.evo-node span { font: 400 11px/1.2 var(--f-pixel); color: var(--muted); }
.evo-node.is-locked img { filter: brightness(0) invert(0.75); }
.evo-node.is-done { background: radial-gradient(circle at 50% 30%, #fff 0 30%, transparent 70%), #fff3b8; }
.evo-node.is-now { background: var(--pc-yellow); transform: rotate(-2deg); }
.trade { padding: 22px; border: var(--edge) solid var(--pc-ink); border-radius: var(--r-lg); background: #fff; box-shadow: var(--pop); }
.trade__amounts { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.trade__amounts button { flex: 1; min-width: 60px; height: 40px; border: 2.5px solid var(--pc-ink); border-radius: 12px; background: #fff; box-shadow: 0 3px 0 var(--pc-ink); color: var(--pc-ink); font: 800 13px/1 var(--f-body); cursor: pointer; transition: transform 0.15s var(--boing); }
.trade__amounts button:hover { transform: translateY(-2px); background: #fff6d1; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { padding: 10px 12px; text-align: left; font: 400 9px/1 var(--f-gb); letter-spacing: 0.05em; text-transform: uppercase; color: var(--pc-ink); border-bottom: 3px solid var(--pc-ink); }
.table td { padding: 12px; border-bottom: 2px dashed var(--line-2); vertical-align: middle; font-weight: 600; }
.table tr:last-child td { border-bottom: 0; }
.table .mon-cell { display: flex; align-items: center; gap: 10px; }
.table .mon-cell img { width: 38px; height: 38px; object-fit: contain; }
.table a.tx { color: var(--pc-blue); font-family: var(--f-pixel); font-size: 13px; }
.table a.tx:hover { color: var(--pc-red); }
.badge-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 4px; border: 2px solid var(--pc-ink); border-radius: 8px; font: 400 11px/1 var(--f-pixel); letter-spacing: 0.05em; text-transform: uppercase; background: #fff; color: var(--pc-ink); }
.badge-status.is-locked { background: #b9f5cf; }
.badge-status.is-queued { background: #ffe6a6; }
.badge-status.is-failed { background: #ffc4b8; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* dex */
.dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.dex-entry { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 16px; border: var(--edge) solid var(--pc-ink); border-radius: 20px; background: radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--type) 40%, white) 0 18%, transparent 52%), #fff; box-shadow: var(--pop-sm); transition: transform 0.25s var(--spring); }
.dex-entry:hover { transform: translateY(-4px) rotate(-0.6deg); }
.dex-entry__img { width: 86px; height: 86px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(27, 31, 59, 0.18)); }
.dex-entry h3 { font: 800 17px/1.2 var(--f-body); }
.dex-entry .chain { display: flex; gap: 2px; margin-top: 6px; }
.dex-entry .chain img { width: 36px; height: 36px; object-fit: contain; }
.dex-entry .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }

/* trainer card */
.tcard {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 26px;
  border: 4px solid var(--pc-ink);
  border-radius: 24px;
  background: linear-gradient(135deg, #e9edf8, #c9d2ec);
  color: #1d2340;
  box-shadow: inset 0 0 0 4px #3a4a86, var(--pop);
  font-family: var(--f-pixel);
}
.tcard h2 { font: 400 16px/1 var(--f-pixel); letter-spacing: 0.16em; color: #3a4a86; }
.tcard dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 18px 0 0; font-size: 16px; }
.tcard dt { color: #5a6488; }
.tcard dd { margin: 0; word-break: break-all; }
.tcard__badges { display: grid; grid-template-columns: repeat(4, 54px); gap: 10px; align-content: start; }
.badge { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: rgba(29, 35, 64, 0.08); box-shadow: inset 0 0 0 2px rgba(29, 35, 64, 0.12); }
.badge svg { width: 34px; height: 34px; opacity: 0.18; filter: grayscale(1); }
.badge.is-on svg { opacity: 1; filter: none; }

/* faq */
.faq { display: grid; gap: 12px; }
.faq details { border: var(--edge) solid var(--pc-ink); border-radius: 18px; background: #fff; box-shadow: var(--pop-sm); transition: transform 0.2s var(--spring); }
.faq details:hover { transform: translateY(-2px); }
.faq details[open] { background: #fffdf2; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; font-weight: 800; font-size: 16.5px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; display: grid; place-items: center; width: 32px; height: 32px; padding-top: 4px; flex: none; border: 2.5px solid var(--pc-ink); border-radius: 50%; background: var(--pc-yellow); font: 400 26px/1 var(--f-fun); transition: transform 0.3s var(--spring); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--pc-pink); }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--ink-2); font-weight: 600; max-width: 72ch; }

/* tech */
.tech { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tech > div { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 22px 24px; border: var(--edge) solid var(--pc-ink); border-radius: 22px; background: #fff; box-shadow: var(--pop); transition: transform 0.25s var(--spring); }
.tech > div:hover { transform: translateY(-3px) rotate(-0.5deg); }
.tech__ico { display: grid; place-items: center; width: 54px; height: 54px; border: 3px solid var(--pc-ink); border-radius: 16px; background: var(--c, var(--pc-yellow)); color: var(--pc-ink); box-shadow: 0 3px 0 var(--pc-ink); }
.tech > div:nth-child(6n + 2) .tech__ico { --c: var(--pc-pink); }
.tech > div:nth-child(6n + 3) .tech__ico { --c: #8ff0a6; }
.tech > div:nth-child(6n + 4) .tech__ico { --c: #8fdcff; }
.tech > div:nth-child(6n + 5) .tech__ico { --c: #ffb36b; }
.tech > div:nth-child(6n + 6) .tech__ico { --c: #c9b3ff; }
.tech__ico svg { width: 26px; height: 26px; }
.tech h3 { font: 800 17px/1.3 var(--f-body); }
.tech p { margin: 6px 0 0; color: var(--ink-2); font-weight: 600; font-size: 14.5px; }

/* starter strip */
.starters { display: grid; grid-auto-flow: column; grid-auto-columns: 136px; gap: 14px; overflow-x: auto; padding: 8px 4px 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.starter { scroll-snap-align: start; display: grid; justify-items: center; gap: 4px; padding: 14px 8px 12px; border: var(--edge) solid var(--pc-ink); border-radius: 20px; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--type) 55%, white) 0 28%, transparent 60%), #fff; box-shadow: var(--pop-sm); text-align: center; transition: transform 0.3s var(--spring); }
.starter:hover { transform: translateY(-6px) rotate(-2deg); }
.starter img { width: 86px; height: 86px; object-fit: contain; transition: transform 0.3s var(--spring); }
.starter:hover img { transform: scale(1.1); }
.starter b { font: 800 14px/1.2 var(--f-body); }
.starter span { font: 400 10px/1 var(--f-pixel); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* bento for battles teaser + jar on home */
.duo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px; align-items: stretch; }
.duo > .panel { padding: 28px; }
.duo--battle { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
.duo .h-section { font-size: clamp(30px, 3.2vw, 42px); letter-spacing: 0.03em; }
.panel .h-section, .step .h-section { --h-fill: var(--pc-yellow); --h-stroke: 0.12em; }
.countdown { font: 400 clamp(44px, 6vw, 68px)/1 var(--f-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--pc-red); -webkit-text-stroke: 0.12em var(--pc-ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--pc-ink); }

/* misc */
.addr { font-family: var(--f-pixel); font-size: 13px; color: var(--ink-2); word-break: break-all; }
.note { padding: 14px 16px; border: 2.5px solid var(--pc-ink); border-radius: 14px; background: #fff3c4; color: var(--pc-ink); font-weight: 600; font-size: 14px; }
.note--good { background: #c8f7d8; }
.reveal { opacity: 0; transform: translateY(26px) scale(0.98); transition: opacity 0.7s var(--ease), transform 0.8s var(--spring); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.is-in { opacity: 1; transform: none; }
.cta-band { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.cta-band__mons { display: flex; gap: 6px; margin-top: 22px; }
.cta-band__mons img { width: 66px; height: 66px; object-fit: contain; animation: hop 0.9s ease-in-out infinite; filter: drop-shadow(0 4px 0 rgba(27, 31, 59, 0.3)); }
.cta-band__mons img:nth-child(2) { animation-delay: -0.2s; }
.cta-band__mons img:nth-child(3) { animation-delay: -0.4s; }
.cta-band__mons img:nth-child(4) { animation-delay: -0.6s; }

/* ------------------------------------------------------------ AI agents */

.agents-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.brain-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.brain-steps li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border: 3px solid var(--pc-ink); border-radius: 18px; background: #fff; box-shadow: var(--pop-sm); font-weight: 700; color: var(--pc-ink); }
.brain-steps li b { display: block; font: 400 18px/1.1 var(--f-display); letter-spacing: 0.02em; }
.brain-steps li span { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.brain-steps .n { display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid var(--pc-ink); border-radius: 50%; background: var(--c, var(--pc-yellow)); font: 400 13px/1 var(--f-gb); box-shadow: 0 3px 0 var(--pc-ink); }
.brain-steps li:nth-child(2) .n { --c: var(--pc-pink); }
.brain-steps li:nth-child(3) .n { --c: #8fdcff; }
.brain-steps li:nth-child(4) .n { --c: #8ff0a6; }

/* the lab: a red Pokédex with a live screen */
.dexbox {
  position: relative;
  padding: 18px 18px 22px;
  border: 4px solid var(--pc-ink);
  border-radius: 28px 28px 28px 54px;
  background: linear-gradient(160deg, #ff5a3c, #e3350d 55%, #c22c0a);
  box-shadow: 0 8px 0 var(--pc-ink), inset 0 4px 0 rgba(255, 255, 255, 0.25);
}
.dexbox__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dexbox__lens { width: 54px; height: 54px; flex: none; border: 4px solid var(--pc-ink); border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 12%, #8fe1ff 14%, #2a9df4 55%, #1559a8); box-shadow: 0 0 0 4px #fff; animation: lens 2.4s ease-in-out infinite; }
.dexbox__dots { display: flex; gap: 7px; }
.dexbox__dots i { width: 14px; height: 14px; border: 2.5px solid var(--pc-ink); border-radius: 50%; background: var(--c); }
.dexbox__dots i:nth-child(1) { --c: #ff8a8a; }
.dexbox__dots i:nth-child(2) { --c: #ffe066; }
.dexbox__dots i:nth-child(3) { --c: #8ff0a6; animation: blink 1.2s steps(2) infinite; }
.dexbox__title { margin-left: auto; padding: 7px 10px 6px; border: 2.5px solid var(--pc-ink); border-radius: 10px; background: var(--pc-yellow); font: 400 9px/1.2 var(--f-gb); color: var(--pc-ink); letter-spacing: 0.04em; }
.dexbox__screen {
  position: relative;
  height: var(--screen-h, 430px);
  overflow: hidden;
  border: 4px solid var(--pc-ink);
  border-radius: 16px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 4px),
    radial-gradient(120% 80% at 50% 0%, #17394a, #0c1a24 70%);
  box-shadow: inset 0 0 0 4px #9fb7c4, inset 0 0 30px rgba(0, 0, 0, 0.6);
  color: #d9fff9;
}
.dexbox--fit .dexbox__screen { height: auto; min-height: 420px; max-height: var(--screen-h); overflow: auto; scrollbar-width: thin; }
.dexbox__screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, #0c1a24); pointer-events: none; }
.dexbox__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.dexbox__pad { display: grid; grid-template-columns: repeat(3, 16px); grid-template-rows: repeat(3, 16px); }
.dexbox__pad i { background: var(--pc-ink); border-radius: 3px; }
.dexbox__pad i:nth-child(odd) { visibility: hidden; }
.dexbox__pad i:nth-child(5) { visibility: visible; }
.feed { list-style: none; margin: 0; padding: 14px; display: grid; gap: 10px; }
.feed__item { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; animation: feed-in 0.5s var(--spring) backwards; }
.feed__item img { width: 40px; height: 40px; object-fit: contain; image-rendering: auto; }
.feed__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font: 400 12px/1.2 var(--f-pixel); color: #7ff5e8; }
.feed__head b { color: #fff; font-weight: 400; }
.feed__head time { color: #6f8f9b; }
.feed__text { margin-top: 3px; font: 600 13.5px/1.5 var(--f-body); color: #e7fffb; overflow-wrap: anywhere; }
.feed__tool { margin-top: 4px; padding: 6px 9px; border-radius: 8px; background: rgba(127, 245, 232, 0.08); box-shadow: inset 0 0 0 1px rgba(127, 245, 232, 0.25); font: 400 12.5px/1.45 var(--f-pixel); color: #a9fff5; overflow-wrap: anywhere; }
.feed__tool i { font-style: normal; color: #ffe066; }
.feed__tool em { display: block; margin-top: 3px; font-style: normal; color: #b9d6dc; white-space: pre-wrap; }
.feed__item--pad .feed__text { color: #ffe9a8; }
.feed__item--badge .feed__text, .feed__item--evolve .feed__text { color: #ffe066; font-weight: 800; }
.feed__empty { display: grid; justify-items: center; gap: 10px; padding: 40px 18px; text-align: center; font: 400 13px/1.6 var(--f-pixel); color: #a9c9cf; }
.feed__empty img { width: 92px; animation: float 3s ease-in-out infinite; }
.feed__label { position: absolute; top: 10px; right: 12px; z-index: 2; padding: 4px 7px 3px; border-radius: 6px; background: #ffe066; color: var(--pc-ink); font: 400 8px/1 var(--f-gb); }

.agents-hero { position: relative; overflow: hidden; padding: 64px 0 80px; }
.agents-hero__grid { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.agents-hero__art { position: relative; display: grid; place-items: center; min-height: 360px; }
.agents-hero__art img.big { width: min(360px, 80%); filter: drop-shadow(0 10px 0 rgba(27, 31, 59, 0.3)); animation: float 4s ease-in-out infinite; }
.agents-hero__art img.big--badge { width: min(330px, 74%); border: 5px solid var(--pc-ink); border-radius: 44px; filter: none; box-shadow: 0 10px 0 var(--pc-ink); }
.agents-hero__art img.sat { position: absolute; width: 120px; filter: drop-shadow(0 6px 0 rgba(27, 31, 59, 0.3)); }
.agents-hero__art img.s1 { left: 2%; top: 6%; animation: float 3.2s ease-in-out infinite -1s; }
.agents-hero__art img.s2 { right: 0; bottom: 4%; animation: float 3.6s ease-in-out infinite -2s; }
.agents-hero__art::before { content: ""; position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%; border: 4px dashed rgba(27, 31, 59, 0.35); animation: rays 30s linear infinite; }
.agent-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.agent-stats > div { padding: 14px 14px 12px; border: 3px solid var(--pc-ink); border-radius: 16px; background: #fff; box-shadow: var(--pop-sm); }
.agent-stats b { display: block; font: 400 28px/1 var(--f-display); letter-spacing: 0.02em; }
.agent-stats span { display: block; margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--ink-2); }
.power-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.power { position: relative; display: grid; justify-items: center; gap: 6px; padding: 18px 12px 16px; border: 3px solid var(--pc-ink); border-radius: 22px; background: #fff; box-shadow: var(--pop); text-align: center; }
.power img { width: 92px; height: 92px; object-fit: contain; }
.power h3 { font: 400 22px/1 var(--f-display); letter-spacing: 0.02em; }
.power ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.power ul b { color: var(--pc-ink); }
.power__meter { display: flex; gap: 4px; margin-top: 4px; }
.power__meter i { width: 14px; height: 14px; border: 2px solid var(--pc-ink); border-radius: 4px; background: #e9e4d6; }
.power__meter i.on { background: var(--pc-teal); }
.models { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.model {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 3px solid var(--pc-ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--pop-sm);
  color: var(--pc-ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s var(--spring), background 0.2s;
}
.model b { font: 800 15.5px/1.2 var(--f-body); }
.model span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.model small { font: 400 12px/1.2 var(--f-pixel); color: var(--muted); }
.model:hover { transform: translateY(-2px); }
.model.is-on { background: var(--pc-teal); transform: translateY(-3px) rotate(-1deg); }
.model.is-on small { color: var(--pc-ink); }
div.model { cursor: default; }
.missions { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mission { display: grid; gap: 4px; padding: 12px 14px; border: 2.5px solid var(--pc-ink); border-radius: 14px; background: #f3fffd; color: var(--pc-ink); text-align: left; cursor: pointer; transition: transform 0.2s var(--spring), background 0.2s; }
.mission b { font: 800 14px/1.25 var(--f-body); }
.mission span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.mission:hover { transform: translateY(-2px); background: #dcfffa; }
.mission.is-on { background: var(--pc-teal); }
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.agent-card { position: relative; display: grid; gap: 12px; padding: 18px; border: 3px solid var(--pc-ink); border-radius: 22px; background: radial-gradient(260px 140px at 20% 0%, color-mix(in srgb, var(--type) 35%, transparent), transparent 70%), #fff; box-shadow: var(--pop); transition: transform 0.25s var(--spring); }
.agent-card:hover { transform: translateY(-4px) rotate(-0.6deg); }
.agent-card__top { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; }
.agent-card__top img { width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(27, 31, 59, 0.2)); }
.agent-card h3 { font: 400 22px/1.05 var(--f-display); letter-spacing: 0.02em; }
.agent-card__sub { margin-top: 4px; font: 400 12px/1.3 var(--f-pixel); color: var(--muted); }
.agent-card__task { font-weight: 800; font-size: 15px; line-height: 1.35; }
.agent-card__last { padding: 10px 12px; border-radius: 12px; background: #0f2230; color: #d9fff9; font: 600 13px/1.45 var(--f-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.agent-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.budget { display: grid; gap: 6px; }
.budget__bar { height: 14px; padding: 2px; border: 2.5px solid var(--pc-ink); border-radius: 999px; background: #fff; }
.budget__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #7ff5e8, var(--pc-teal)); transition: width 0.8s var(--ease); }
.budget__row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 2px solid var(--pc-ink); border-radius: 999px; font: 400 12px/1 var(--f-pixel); letter-spacing: 0.05em; text-transform: uppercase; background: #fff; color: var(--pc-ink); }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill.is-working { background: #b9f5cf; }
.status-pill.is-working::before { background: #13a34f; animation: ping 1.8s var(--ease) infinite; }
.status-pill.is-review { background: #ffe6a6; }
.status-pill.is-waiting, .status-pill.is-resting { background: #e3e7f5; }
.status-pill.is-solved { background: var(--pc-yellow); }
.gym-badge { display: inline-grid; place-items: center; width: 34px; height: 34px; }
.gym-badge svg { width: 100%; height: 100%; }
.brain { display: grid; gap: 18px; }
.brain__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.brain__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.brain__box { padding: 18px; border: 3px solid var(--pc-ink); border-radius: 20px; background: #fff; box-shadow: var(--pop-sm); }
.brain__box h3 { font: 400 20px/1.1 var(--f-display); letter-spacing: 0.02em; margin-bottom: 10px; }
.brain__box p { margin: 0; color: var(--ink-2); font-weight: 600; font-size: 14.5px; white-space: pre-wrap; }
.brain__notes { max-height: 260px; overflow: auto; padding: 12px; border-radius: 12px; background: #fffbea; box-shadow: inset 0 0 0 2px var(--line-2); font: 400 13px/1.55 var(--f-pixel); white-space: pre-wrap; color: var(--pc-ink); }
.files { display: grid; gap: 8px; }
.files details { border: 2.5px solid var(--pc-ink); border-radius: 12px; background: #fff; }
.files summary { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; cursor: pointer; font: 400 13px/1.2 var(--f-pixel); list-style: none; }
.files summary::-webkit-details-marker { display: none; }
.files pre { margin: 0; max-height: 320px; overflow: auto; padding: 12px; border-top: 2px dashed var(--line-2); font: 400 12.5px/1.5 var(--f-pixel); white-space: pre-wrap; overflow-wrap: anywhere; }
.verdicts { display: grid; gap: 8px; }
.verdict { padding: 10px 12px; border: 2.5px solid var(--pc-ink); border-radius: 12px; background: #fff; font-size: 13.5px; font-weight: 600; }
.verdict.is-solved { background: #fff3b8; }
.verdict b { font-weight: 800; }

/* -------------------------------------------------------------- loader */

html.booting, html.booting body { overflow: hidden; }
.boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #4aa9f5 0%, #8fd3ff 40%, #dff3ff 66%, #c4ecff 100%);
  color: var(--pc-ink);
  font-family: var(--f-gb);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.boot.is-done { animation: boot-out 0.75s cubic-bezier(0.7, 0, 0.3, 1) forwards; pointer-events: none; }
.boot__rays {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 170vmax;
  height: 170vmax;
  margin: -85vmax 0 0 -85vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.28) 0 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 68%);
  mask-image: radial-gradient(closest-side, #000 15%, transparent 68%);
  animation: rays 60s linear infinite;
}
.boot__sun { position: absolute; right: 9%; top: 9%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #fff7c2 0 40%, #ffe066 41% 62%, rgba(255, 224, 102, 0) 63%); box-shadow: 0 0 80px 30px rgba(255, 236, 140, 0.55); animation: sun 4s ease-in-out infinite; }
.cloud { position: absolute; width: 170px; height: 54px; border-radius: 60px; background: #fff; box-shadow: 0 6px 0 rgba(27, 31, 59, 0.08); animation: drift linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: #fff; }
.cloud::before { width: 74px; height: 74px; left: 24px; top: -38px; }
.cloud::after { width: 96px; height: 96px; left: 62px; top: -52px; }
.cloud.c1 { top: 13%; left: -230px; animation-duration: 34s; animation-delay: -6s; }
.cloud.c2 { top: 28%; left: -230px; animation-duration: 46s; animation-delay: -30s; transform: scale(0.7); }
.cloud.c3 { top: 7%; left: -230px; animation-duration: 58s; animation-delay: -20s; }
.cloud.c4 { top: 36%; left: -230px; animation-duration: 40s; animation-delay: -12s; opacity: 0.85; }
.boot__hills {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 9%;
  height: 34%;
  background:
    radial-gradient(52% 100% at 18% 100%, #8ad45c 0 64%, var(--pc-ink) 64.3% 65.2%, transparent 65.6%),
    radial-gradient(48% 92% at 82% 100%, #79c64c 0 64%, var(--pc-ink) 64.3% 65.2%, transparent 65.6%),
    radial-gradient(40% 70% at 52% 100%, #9ade6c 0 64%, var(--pc-ink) 64.3% 65.6%, transparent 66%);
}
.boot__grass {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 14%;
  border-top: 4px solid var(--pc-ink);
  background: repeating-linear-gradient(90deg, #5cb33f 0 26px, #52a838 26px 52px);
}
.boot__grass::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  height: 22px;
  background: radial-gradient(circle at 13px 22px, #5cb33f 12px, var(--pc-ink) 12.5px 15px, transparent 15.5px) 0 0 / 26px 22px repeat-x;
}
.boot__mon {
  position: absolute;
  bottom: 11.5%;
  z-index: 1;
  width: clamp(76px, 10vw, 136px);
  filter: drop-shadow(0 5px 0 rgba(27, 31, 59, 0.28));
  animation: peek 2.6s ease-in-out infinite;
}
.boot__mon.m1 { left: 7%; animation-delay: 0s; }
.boot__mon.m2 { left: 21%; animation-delay: -0.6s; bottom: 10.5%; }
.boot__mon.m3 { right: 21%; animation-delay: -1.2s; bottom: 10.5%; }
.boot__mon.m4 { right: 7%; animation-delay: -1.8s; }
.boot__mon.m5 { left: calc(50% - 40px); animation-delay: -0.9s; bottom: 11%; width: clamp(60px, 6.5vw, 88px); }
.boot__center { position: relative; z-index: 3; display: grid; justify-items: center; gap: 20px; width: min(560px, 92vw); padding-bottom: 7vh; }
.boot__title {
  font: 400 clamp(84px, 19vw, 176px)/0.9 var(--f-fun);
  letter-spacing: 0.03em;
  color: var(--pc-yellow);
  -webkit-text-stroke: 5px var(--pc-navy);
  paint-order: stroke fill;
  text-shadow: 0 7px 0 var(--pc-navy), 0 16px 26px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  text-align: center;
}
.boot__title span { display: inline-block; animation: letter-in 0.75s cubic-bezier(0.3, 1.7, 0.5, 1) backwards, letter-wave 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms + 150ms), calc(var(--i) * 90ms + 1.4s); }
.boot__title .gap { width: 0.32em; }
.boot__title small { display: block; margin-top: 12px; font: 400 clamp(10px, 1.6vw, 14px)/1.4 var(--f-gb); letter-spacing: 0.06em; color: var(--pc-ink); -webkit-text-stroke: 0; text-shadow: none; animation: fade-up 0.6s ease-out 1s backwards; }
.boot__ball { position: relative; width: 112px; height: 112px; border: 6px solid var(--pc-ink); border-radius: 50%; background: var(--pc-ink); box-shadow: 0 10px 0 rgba(27, 31, 59, 0.22); animation: catch 2.4s ease-in-out 0.9s infinite; }
.boot__ball .pb-top, .boot__ball .pb-bot { position: absolute; left: -1px; right: -1px; height: 50%; transition: transform 0.45s var(--boing); }
.boot__ball .pb-top { top: -1px; border-radius: 80px 80px 0 0; border-bottom: 5px solid var(--pc-ink); background: var(--pc-red) radial-gradient(circle at 30% 32%, rgba(255, 255, 255, 0.65) 0 11%, transparent 12%); transform-origin: 8% 100%; }
.boot__ball .pb-bot { bottom: -1px; border-radius: 0 0 80px 80px; border-top: 5px solid var(--pc-ink); background: #fff; }
.boot__ball .pb-btn { position: absolute; left: 50%; top: 50%; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 6px solid var(--pc-ink); border-radius: 50%; background: #fff; animation: pb-blink 1.2s steps(2) infinite; }
.boot__ball.is-caught { animation: caught 0.5s var(--boing); }
.boot__ball.is-caught .pb-btn { animation: none; background: #ffe066; box-shadow: 0 0 22px 8px rgba(255, 224, 102, 0.95); }
.boot__ball.is-open .pb-top { transform: rotate(-62deg) translate(-8px, -18px); }
.boot__ball.is-open::after { content: ""; position: absolute; left: 50%; top: 45%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 0 40px 30px #fff; animation: glow-up 0.6s ease-out forwards; }
.boot__dialog {
  position: relative;
  width: 100%;
  min-height: 74px;
  padding: 16px 40px 16px 18px;
  border: 4px solid var(--pc-ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 0 var(--pc-ink);
  font: 400 clamp(10px, 1.5vw, 13px)/1.8 var(--f-gb);
  text-align: left;
}
.boot__dialog p { margin: 0; }
.boot__dialog p.typing { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: top; animation: typing 1s steps(21) 0.6s backwards; }
.boot__dialog .arrow { position: absolute; right: 16px; bottom: 12px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--pc-red); animation: bob 0.8s steps(2) infinite; }
.boot__bar { display: flex; align-items: center; gap: 10px; width: min(400px, 90%); padding: 8px 12px; border: 4px solid var(--pc-ink); border-radius: 999px; background: #fff; box-shadow: 0 5px 0 var(--pc-ink); }
.boot__lbl { padding: 3px 5px 2px; border-radius: 4px; background: #f0a51c; color: #fff8de; font-size: 9px; }
.boot__track { flex: 1; height: 13px; padding: 2px; border-radius: 7px; background: #445071; }
.boot__track i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(#78f2a0, #2bc46a); animation: fill-fake 2.4s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.boot__track i.is-real { animation: none; transition: width 0.35s ease-out; }
.boot__pct { min-width: 4ch; font-size: 10px; text-align: right; }
.boot__skip { font-size: 9px; letter-spacing: 0.12em; color: rgba(27, 31, 59, 0.6); animation: blink 1.3s steps(2) infinite; }
.boot__flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 46%, #fff 0 32%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 80%); }
.boot.is-done .boot__flash { animation: flash-out 0.75s ease-out forwards; }
.boot .burst i { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .boot__mon.m2, .boot__mon.m3 { display: none; }
  .boot__sun { width: 80px; height: 80px; }
  .boot__title { -webkit-text-stroke-width: 4px; text-shadow: 0 5px 0 var(--pc-navy), 0 12px 20px rgba(0, 0, 0, 0.25); }
  .boot__ball { width: 92px; height: 92px; }
}

/* ------------------------------------------------------------ keyframes */

@keyframes spin { to { transform: rotate(360deg); } }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin-var { to { --spin: 360deg; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(43, 212, 111, 0.6); } 80%, 100% { box-shadow: 0 0 0 7px rgba(43, 212, 111, 0); } }
@keyframes ping-sq { 50% { opacity: 0.3; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes bob { 50% { transform: translateY(3px); } }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-12px); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes twinkle { 50% { opacity: 0.35; } }
@keyframes card-idle { 0%, 100% { transform: rotateX(4deg) rotateY(-8deg); } 50% { transform: rotateX(-3deg) rotateY(9deg); } }
@keyframes foil-idle { 0%, 100% { background-position: 20% 30%, 0 0; } 50% { background-position: 80% 70%, 0 0; } }
@keyframes hitblink { 0%, 100% { opacity: 1; } 25%, 75% { opacity: 0.1; } }
@keyframes burst { to { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(0.2); opacity: 0; } }
@keyframes toast-in { from { transform: translateY(20px) scale(0.96); opacity: 0; } }
@keyframes toast-out { to { transform: translateX(30px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { transform: translateY(16px) scale(0.97); opacity: 0; } }
@keyframes pb-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-18deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
@keyframes boot-out { to { opacity: 0; transform: scale(1.06); visibility: hidden; } }
@keyframes drift { to { transform: translateX(calc(100vw + 480px)); } }
@keyframes sun { 50% { transform: scale(1.06); } }
@keyframes peek { 0%, 100% { transform: translateY(34%); } 45%, 60% { transform: translateY(0); } }
@keyframes letter-in { from { transform: translateY(-140px) scale(0.4) rotate(-18deg); opacity: 0; } }
@keyframes letter-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes catch { 0%, 52%, 100% { transform: rotate(0); } 60% { transform: rotate(-24deg); } 68% { transform: rotate(19deg); } 76% { transform: rotate(-10deg); } 84% { transform: rotate(5deg); } 92% { transform: rotate(0); } }
@keyframes caught { 40% { transform: scale(1.14); } }
@keyframes pb-blink { 50% { background: #ff8a8a; } }
@keyframes glow-up { to { transform: translateY(-30px) scale(2.4); opacity: 0; } }
@keyframes typing { from { max-width: 0; } to { max-width: 100%; } }
@keyframes fill-fake { from { width: 2%; } to { width: 78%; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes flash-out { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes walk { from { transform: translateX(calc(100vw + 40px)); } to { transform: translateX(-180px); } }
@keyframes walk-r { from { transform: translateX(-180px); } to { transform: translateX(calc(100vw + 40px)); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes hop-r { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-14px); } }
@keyframes fly { from { transform: translate(-120px, 0); } 50% { transform: translate(50vw, 40px); } to { transform: translate(calc(100vw + 120px), -10px); } }
@keyframes bob-fly { 50% { margin-top: 10px; } }
@keyframes tag-bob { 50% { transform: rotate(8deg) translateY(-2px); } }
@keyframes lens { 50% { box-shadow: 0 0 0 4px #fff, 0 0 18px 6px rgba(143, 225, 255, 0.9); } }
@keyframes feed-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1360px) {
  .topbar__buy { display: none !important; }
  .topbar__in { gap: 14px; }
  .nav a { padding: 8px 9px; font-size: 13.5px; }
  .ca-pill { display: none; }
}
@media (max-width: 1180px) {
  .topbar__x span { display: none; }
  .topbar__x { padding-inline: 11px; }
  .nav a { padding: 7px 8px; font-size: 13px; }
}
@media (max-width: 1080px) {
  .launch { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .coin-hero { grid-template-columns: minmax(0, 1fr); }
  .agents-teaser, .agents-hero__grid, .brain__grid { grid-template-columns: minmax(0, 1fr); }
  .brain .dexbox { position: static !important; --screen-h: 620px !important; }
  .power-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .nav { display: none; }
  .burger { display: inline-grid; }
  .topbar.is-open .nav {
    display: grid;
    position: absolute;
    left: 0;
    right: 0;
    top: 74px;
    gap: 6px;
    padding: 14px 20px 22px;
    background: var(--pc-red);
    border-bottom: 4px solid var(--pc-ink);
  }
  .topbar.is-open .nav a { padding: 14px 16px; font-size: 17px; }
  .topbar.is-open .nav .nav__buy { display: block; color: var(--pc-yellow); }
  .topbar.is-open .nav a .tag { position: static; display: inline-block; margin-left: 8px; vertical-align: 2px; }
}
@media (max-width: 920px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .life { grid-template-columns: 1fr 1fr; gap: 40px 10px; }
  .life::before { display: none; }
  .jar-split, .duo, .duo--battle, .cols-2 { grid-template-columns: minmax(0, 1fr); }
  .tech { grid-template-columns: minmax(0, 1fr); }
  .footer__in { grid-template-columns: 1fr 1fr; }
  .footer__in > div:first-child { grid-column: 1 / -1; }
  .tcard { grid-template-columns: minmax(0, 1fr); }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .topbar__in { gap: 8px; height: 66px; }
  .brand { gap: 6px; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__word { font-size: 26px; -webkit-text-stroke-width: 4px; }
  .brand__logo { height: 60px; }
  .brand__logo--lg { height: 112px; }
  .topbar__end { gap: 8px; }
  .topbar__end .btn { padding: 0 12px; }
  .topbar__end [data-sound] { display: none; }
  .topbar__end .topbar__x { display: none; }
  .topbar.is-open .nav { top: 66px; }
  .nav .nav__sound { display: block; }
  .ticker { height: 40px; }
  .section { padding-top: 80px; }
  .section__head { flex-direction: column; align-items: start; }
  .hero { padding: 40px 0 190px; }
  .meadow { height: 190px; }
  .walker { --h: 52px !important; }
  .flyer { display: none; }
  .levels { grid-template-columns: 1fr 1fr; }
  .evo-tabs { flex-wrap: nowrap; gap: 6px; }
  .evo-tab { width: auto; flex: 1; min-width: 0; padding: 7px 2px 6px; font-size: 10px; }
  .evo-tab img { width: 40px; height: 40px; }
  .evo-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .life__orb { width: 140px; height: 140px; }
  .life__orb img { width: 104px; height: 104px; }
  .variants { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .big-numbers { grid-template-columns: 1fr 1fr; }
  .big-numbers > div:last-child { grid-column: 1 / -1; }
  .evo-line { grid-template-columns: repeat(2, 1fr); }
  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .grid-cards .card { --w: min(250px, 100%); }
  .flow { grid-template-columns: 1fr; }
  .flow i { display: none; }
  .arena .hpbox { width: 44%; padding: 6px 8px 8px; }
  .arena .hpbox__top { font-size: 11px; }
  .footer__in { grid-template-columns: minmax(0, 1fr); }
  .footer::before { width: 46px; height: 46px; top: 26px; }
  .footer__base { flex-direction: column; }
  .toasts { left: 16px; right: 16px; width: auto; }
  .mode-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .mode-switch a { justify-content: center; padding: 8px 10px; font-size: 16px; }
  .mode-switch a img { width: 30px; height: 30px; }
  .power-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .power { padding: 14px 8px 12px; }
  .power img { width: 70px; height: 70px; }
  .agent-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-stats > div:last-child { grid-column: 1 / -1; }
  .dexbox { border-radius: 24px 24px 24px 36px; padding: 14px 12px 16px; }
  .dexbox__screen { --screen-h: 400px; }
  .agents-hero__art { min-height: 260px; }
  .agents-hero__art img.sat { width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .walker, .flyer { display: none; }
}