/* Ponsemons site: tokens, reset, typography and the shared pixel components.
   One art pixel = --px CSS px (3 on phones, 4 from 720px). Pixel images are always scaled by whole
   numbers with image-rendering: pixelated. */

:root {
  --ink: #1d1733; --ink-2: #2e2550; --paper: #fff8e7; --paper-2: #f1e3c4; --shadow: #c9b48a;
  --sky-top: #7cc8ff; --sky-bottom: #d6f1ff;
  --grass-light: #9be88e; --grass: #5fcf6b; --grass-mid: #3fa34d; --grass-dark: #2c7a3a;
  --pink: #ff6fb5; --pink-light: #ffa6d2; --pink-dark: #e0509a; --peach: #ffb38a; --butter: #ffe07a;
  --mint: #7fe3c1; --mint-dark: #3fbf95; --lilac: #b79cff; --lilac-dark: #8a6ee8; --blue: #6ab8ff;
  --gold: #ffcf3f; --gold-dark: #e89b1c; --logo-depth: #5b3fb0;
  --hp-green: #3ddc84; --hp-yellow: #ffc93c; --hp-red: #ff4d4d;
  --t-flame: #ff7a1a; --t-aqua: #3aa0ff; --t-leaf: #5cc93a; --t-spark: #ffc400;
  --t-frost: #7fe6ff; --t-void: #8a3ae0; --t-love: #ff4f9a;

  --px: 3px;            /* one art pixel of the UI */
  --lp: 2;              /* header logo scale */
  --gut: 16px;          /* page side gutter */
  --maxw: 1240px;
  --font-px: "Press Start 2P", ui-monospace, monospace;
  --font-body: "Pixelify Sans", ui-rounded, system-ui, sans-serif;
  /* Press Start 2P sizes stay on a 4/8px grid so glyphs land on whole (device) pixels */
  --fs-xs: 8px; --fs-s: 12px; --fs-m: 12px; --fs-l: 16px; --fs-xl: 24px; --fs-h1: 24px;
  --fs-body: 17px;
  --topbar-h: 64px;
}
@media (min-width: 480px) { :root { --lp: 3; --topbar-h: 76px; } }
@media (min-width: 720px) {
  :root { --px: 4px; --gut: 24px; --fs-m: 16px; --fs-l: 16px; --fs-xl: 32px; --fs-h1: 32px; --fs-body: 19px; --topbar-h: 84px; }
}
@media (min-width: 1180px) { :root { --gut: 32px; --fs-l: 24px; --fs-h1: 40px; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 12px); }
body {
  margin: 0; min-width: 320px; overflow-x: hidden;
  background: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, canvas { display: block; max-width: 100%; }
img, canvas, .px, .px-img { image-rendering: pixelated; image-rendering: crisp-edges; }
img { image-rendering: pixelated; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: normal; }
code { font-family: var(--font-px); }
[hidden] { display: none !important; }
html.is-locked { overflow: hidden; }
html.is-locked body { overflow: hidden; }

.inf {
  display: inline-block; width: 18px; height: 10px; vertical-align: 0; margin: 0 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 5' shape-rendering='crispEdges'%3E%3Cpath fill='%231d1733' d='M1 0h2v1H1zM6 0h2v1H6zM0 1h1v3H0zM3 1h1v1H3zM5 1h1v1H5zM8 1h1v3H8zM4 2h1v1H4zM3 3h1v1H3zM5 3h1v1H5zM1 4h2v1H1zM6 4h2v1H6z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
@media (max-width: 479px) { .hide-sm { display: none; } }
@media (max-width: 359px) { .hide-xs { display: none; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; left: 12px; top: -100px; z-index: 200; background: var(--ink); color: var(--paper);
  font: var(--fs-s)/1 var(--font-px); padding: 14px 16px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: var(--px) dashed var(--ink); outline-offset: var(--px); }
.section--night :focus-visible, .footer :focus-visible { outline-color: var(--butter); }

.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.flip { transform: scaleX(-1); }

/* ---------- icons: single-colour glyphs recoloured with a mask ---------- */
.px-icon {
  display: inline-block; flex: none; width: calc(9 * var(--ic, 2px)); height: calc(9 * var(--ic, 2px));
  background: currentColor; -webkit-mask: var(--icon) center / 100% 100% no-repeat; mask: var(--icon) center / 100% 100% no-repeat;
}
@media (min-width: 720px) { .px-icon { --ic: 2px; } }
.i-sound-on { --icon: url(../assets/ui/icon-sound-on.svg); }
.i-sound-off { --icon: url(../assets/ui/icon-sound-off.svg); }
.i-close { --icon: url(../assets/ui/icon-close.svg); }
.i-dice { --icon: url(../assets/ui/icon-dice.svg); }
.i-copy { --icon: url(../assets/ui/icon-copy.svg); }
.i-check { --icon: url(../assets/ui/icon-check.svg); }
.i-external { --icon: url(../assets/ui/icon-external.svg); }
.i-search { --icon: url(../assets/ui/icon-search.svg); }
.i-menu { --icon: url(../assets/ui/icon-menu.svg); }
.i-bag { --icon: url(../assets/ui/icon-bag.svg); }
.i-dex { --icon: url(../assets/ui/icon-dex.svg); }
.i-x { --icon: url(../assets/ui/icon-x.svg); }
.i-discord { --icon: url(../assets/ui/icon-discord.svg); }
.i-telegram { --icon: url(../assets/ui/icon-telegram.svg); }

/* ---------- pixel dialog box: double ink line, notched corners (pure box-shadow) ---------- */
.px-box {
  --b: var(--px); --bg: var(--paper);
  position: relative; background: var(--bg); color: var(--ink);
  padding: calc(var(--b) * 4) calc(var(--b) * 5);
  margin: calc(var(--b) * 3);
  box-shadow:
    0 calc(var(--b) * -1) 0 0 var(--ink), 0 var(--b) 0 0 var(--ink),
    calc(var(--b) * -1) 0 0 0 var(--ink), var(--b) 0 0 0 var(--ink),
    0 0 0 calc(var(--b) * 2) var(--bg),
    0 calc(var(--b) * -1) 0 calc(var(--b) * 2) var(--ink), 0 var(--b) 0 calc(var(--b) * 2) var(--ink),
    calc(var(--b) * -1) 0 0 calc(var(--b) * 2) var(--ink), var(--b) 0 0 calc(var(--b) * 2) var(--ink),
    0 calc(var(--b) * 5) 0 calc(var(--b) * 2) rgb(29 23 51 / .22);
}
/* single ink line with a hard offset shadow, for cards */
.px-card {
  --b: var(--px);
  position: relative; background: var(--paper);
  box-shadow:
    0 calc(var(--b) * -1) 0 0 var(--ink), 0 var(--b) 0 0 var(--ink),
    calc(var(--b) * -1) 0 0 0 var(--ink), var(--b) 0 0 0 var(--ink),
    var(--b) calc(var(--b) * 2) 0 0 var(--ink), calc(var(--b) * 2) var(--b) 0 0 var(--ink);
}

/* ---------- pixel button ---------- */
.px-btn {
  --b: var(--px); --bg: var(--butter); --shade: var(--gold-dark); --fg: var(--ink);
  appearance: none; border: 0; border-radius: 0; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  font: 400 var(--fs-m)/1.25 var(--font-px); color: var(--fg); text-decoration: none; text-transform: uppercase; letter-spacing: .02em;
  background: var(--bg);
  min-height: 44px;
  padding: calc(var(--b) * 3) calc(var(--b) * 4) calc(var(--b) * 3);
  margin: var(--b) var(--b) calc(var(--b) * 3);
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--b) * 2);
  position: relative; white-space: nowrap;
  box-shadow:
    inset 0 calc(var(--b) * -1) 0 0 var(--shade),
    inset var(--b) var(--b) 0 0 rgb(255 255 255 / .55),
    0 calc(var(--b) * -1) 0 0 var(--ink), 0 var(--b) 0 0 var(--ink),
    calc(var(--b) * -1) 0 0 0 var(--ink), var(--b) 0 0 0 var(--ink),
    0 calc(var(--b) * 2) 0 0 var(--ink);
}
.px-btn:hover { filter: brightness(1.06); }
.px-btn:active, .px-btn.is-pressed {
  transform: translateY(calc(var(--b) * 2));
  box-shadow:
    inset 0 var(--b) 0 0 var(--shade),
    0 calc(var(--b) * -1) 0 0 var(--ink), 0 var(--b) 0 0 var(--ink),
    calc(var(--b) * -1) 0 0 0 var(--ink), var(--b) 0 0 0 var(--ink);
}
.px-btn:focus-visible { outline: var(--b) dashed var(--ink); outline-offset: calc(var(--b) * 3); }
.px-btn--pink { --bg: var(--pink); --shade: var(--pink-dark); }
.px-btn--mint { --bg: var(--mint); --shade: var(--mint-dark); }
.px-btn--lilac { --bg: var(--lilac); --shade: var(--lilac-dark); }
.px-btn--ghost { --bg: var(--paper); --shade: var(--paper-2); }
.px-btn--ghost-light { --bg: var(--ink-2); --shade: var(--ink); --fg: var(--paper); }
.px-btn--lg { font-size: var(--fs-m); padding: calc(var(--b) * 4) calc(var(--b) * 5); min-height: 56px; }
.px-btn--sm { font-size: var(--fs-s); }
.px-btn--xs { font-size: var(--fs-xs); min-height: 32px; padding: calc(var(--b) * 2) calc(var(--b) * 3); gap: var(--b); }
.px-btn--xs .px-icon { --ic: 1px; }
.px-btn .px-icon { margin-left: calc(var(--b) * -1); }


/* disabled "SOON" state for config-driven links: keeps its colour, striped like a closed gate */
.is-soon, .px-btn[aria-disabled="true"] {
  cursor: not-allowed; filter: saturate(.5) !important; --fg: rgb(29 23 51 / .72);
  background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .38) 0 6px, transparent 6px 12px);
}
.is-soon:active { transform: none; }
.soon-tag {
  font: var(--fs-xs)/1 var(--font-px); background: var(--ink); color: var(--butter);
  padding: 4px 5px 3px; margin-left: 2px; letter-spacing: 0; text-transform: uppercase;
}

/* round-ish square icon button (sound, close) */
.icon-btn {
  --b: var(--px);
  appearance: none; border: 0; background: var(--paper); color: var(--ink); cursor: pointer;
  width: 44px; height: 44px; display: inline-grid; place-items: center; flex: none;
  margin: var(--b);
  box-shadow:
    0 calc(var(--b) * -1) 0 0 var(--ink), 0 var(--b) 0 0 var(--ink),
    calc(var(--b) * -1) 0 0 0 var(--ink), var(--b) 0 0 0 var(--ink),
    0 calc(var(--b) * 2) 0 0 var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:active { transform: translateY(var(--b)); box-shadow: 0 calc(var(--b) * -1) 0 0 var(--ink), 0 var(--b) 0 0 var(--ink), calc(var(--b) * -1) 0 0 0 var(--ink), var(--b) 0 0 0 var(--ink); }
.icon-btn[aria-pressed="true"] { background: var(--butter); }
.icon-btn--sm { width: 40px; height: 40px; }
.icon-btn--light { background: var(--paper); }

/* ---------- menu choices with the ▶ cursor ---------- */
.choice {
  appearance: none; border: 0; background: none; padding: 10px 8px 10px calc(4px * 3 + 12px);
  font: var(--fs-m)/1.3 var(--font-px); text-transform: uppercase; text-decoration: none; color: var(--ink);
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; position: relative; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.choice::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 12px; height: 21px; margin-top: -11px;
  background: url(../assets/ui/cursor.svg) center / 12px 21px no-repeat; image-rendering: pixelated;
  opacity: 0;
}
.choice:hover::before, .choice:focus-visible::before, .choice.is-cur::before { opacity: 1; animation: nudge .8s steps(1) infinite; }
.choice:focus-visible { outline: none; background: rgb(29 23 51 / .06); }
@keyframes nudge { 50% { transform: translateX(3px); } }
.choice[aria-disabled="true"] { color: #8a8398; cursor: not-allowed; }
.choice--inline { display: inline-flex; width: auto; min-height: 40px; padding: 8px 8px 8px 22px; font-size: var(--fs-s); }
.choice--inline::before { left: 4px; width: 8px; height: 14px; margin-top: -7px; background-size: 8px 14px; }

/* ---------- chips & badges ---------- */
.eyebrow, .sec-head__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: var(--fs-xs)/1.6 var(--font-px); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2);
}
.eyebrow img, .sec-head__eyebrow img { width: 14px; height: 14px; }
@media (min-width: 720px) { .eyebrow, .sec-head__eyebrow { font-size: var(--fs-s); } }

.type-badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: var(--fs-xs)/1 var(--font-px); text-transform: uppercase; color: var(--tfg, var(--ink)); background: var(--tc, var(--paper-2));
  padding: 4px 6px 3px 4px;
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
  margin: 2px;
}
/* ink outline so an emblem stays visible on its own colour (the yellow bolt on the spark badge) */
.type-badge img {
  width: auto; height: 14px;
  filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink));
}
.type-badge:empty { display: none; }
[data-type="flame"] { --tc: var(--t-flame); }
[data-type="aqua"] { --tc: var(--t-aqua); }
[data-type="leaf"] { --tc: var(--t-leaf); }
[data-type="spark"] { --tc: var(--t-spark); }
[data-type="frost"] { --tc: var(--t-frost); }
[data-type="void"] { --tc: var(--t-void); --tfg: #fff; }
[data-type="love"] { --tc: var(--t-love); }

/* ---------- section scaffolding ---------- */
.section { position: relative; padding: 64px 0 72px; }
@media (min-width: 720px) { .section { padding: 96px 0 104px; } }
.sec-head { max-width: 760px; margin-bottom: 32px; }
@media (min-width: 720px) { .sec-head { margin-bottom: 44px; } }
.sec-head__title {
  font: var(--fs-xl)/1.3 var(--font-px); text-transform: uppercase; letter-spacing: .01em; margin: 12px 0 14px;
  text-wrap: balance;
}
.sec-head__lead { font-size: calc(var(--fs-body) + 1px); max-width: 60ch; }
.sec-head--light { color: var(--paper); }
.sec-head--light .sec-head__eyebrow { color: var(--butter); }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* key/value rows (contract, chain) */
.kv { display: grid; gap: 10px; margin: 16px 0; }
.kv__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.kv dt { font: var(--fs-xs)/1.4 var(--font-px); text-transform: uppercase; color: var(--ink-2); min-width: 80px; }
.kv dd { font: var(--fs-s)/1.5 var(--font-px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.addr { font-size: var(--fs-xs); word-break: break-all; background: var(--paper-2); padding: 6px 8px; line-height: 1.6; }

/* reveal on scroll, stepped like an old handheld */
.js [data-reveal] { opacity: 0; transform: translateY(16px); }
.js [data-reveal].is-in { opacity: 1; transform: none; animation: reveal .36s steps(4) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; background: var(--paper);
  box-shadow: 0 var(--px) 0 0 var(--ink), 0 calc(var(--px) * 2) 0 0 rgb(29 23 51 / .18);
}
.topbar__in { display: flex; align-items: center; gap: 12px; min-height: var(--topbar-h); }
.brand { display: block; flex: none; margin-right: auto; -webkit-tap-highlight-color: transparent; }
.brand img { width: calc(81px * var(--lp)); height: calc(18px * var(--lp)); }
.brand:focus-visible { outline-offset: 6px; }
.nav { display: none; }
.nav__list { display: flex; gap: 4px; }
.nav__list a {
  display: block; padding: 12px 12px 10px; font: var(--fs-s)/1 var(--font-px); text-transform: uppercase; text-decoration: none; position: relative;
}
.nav__list a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: var(--px); background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .2s steps(4); }
.nav__list a:hover::after, .nav__list a:focus-visible::after, .nav__list a.is-active::after { transform: none; }
.topbar__actions { display: flex; align-items: center; gap: 6px; }
.topbar__cta { display: none; }
.start-btn { padding-left: 14px; padding-right: 14px; }
@media (min-width: 1180px) {
  .nav { display: block; margin-right: 8px; }
  .brand { margin-right: 24px; }
  .nav { margin-left: auto; }
  .topbar__cta { display: inline-flex; font-size: var(--fs-s); }
  .start-btn { display: none; }
}
@media (min-width: 1360px) { .nav__list a { font-size: var(--fs-m); padding-left: 14px; padding-right: 14px; } }

/* start menu overlay */
.start-menu { position: fixed; inset: 0; z-index: 120; background: rgb(29 23 51 / .35); }
.start-menu__box {
  position: absolute; right: calc(var(--gut) - 4px); top: calc(var(--topbar-h) + 8px);
  width: min(300px, calc(100vw - 2 * var(--gut))); padding: 10px 8px;
  animation: pop-down .18s steps(3) both;
}
@keyframes pop-down { from { clip-path: inset(-20px -20px 100% -20px); } to { clip-path: inset(-20px -20px -40px -20px); } }
.start-menu .choice { font-size: var(--fs-l); padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 479px) { .start-menu .choice { font-size: 16px; } }

/* ---------- toasts ---------- */
.toasts {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 150;
  display: grid; gap: 12px; justify-items: center; pointer-events: none; width: calc(100% - 32px); max-width: 420px;
}
.toast {
  --b: 3px; margin: 0; padding: 10px 14px; display: flex; align-items: center; gap: 10px;
  font: var(--fs-s)/1.5 var(--font-px); text-align: left;
  animation: toast-in .24s steps(3) both;
}
.toast img { width: 21px; height: 21px; flex: none; }
.toast.is-out { animation: toast-out .24s steps(3) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(12px); } }

/* ---------- floating party button & panel ---------- */
.party-btn {
  --b: var(--px);
  position: fixed; right: calc(12px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 90;
  appearance: none; border: 0; cursor: pointer; background: var(--paper); color: var(--ink);
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 12px 6px 10px;
  font: var(--fs-s)/1 var(--font-px); text-transform: uppercase;
  box-shadow:
    0 calc(var(--b) * -1) 0 0 var(--ink), 0 var(--b) 0 0 var(--ink),
    calc(var(--b) * -1) 0 0 0 var(--ink), var(--b) 0 0 0 var(--ink),
    0 calc(var(--b) * 2) 0 0 var(--ink), 0 calc(var(--b) * 4) 0 0 rgb(29 23 51 / .2);
  -webkit-tap-highlight-color: transparent;
}
.party-btn img { width: 27px; height: 30px; }
@media (max-width: 479px) { .party-btn { min-height: 44px; padding: 4px 10px 4px 8px; } .party-btn img { width: 18px; height: 20px; } }
.party-btn b { font-weight: 400; color: var(--pink-dark); }
.party-btn:active { transform: translateY(var(--b)); }
.party-btn.is-bump { animation: bump .5s steps(4); }
@keyframes bump { 25% { transform: translateY(-10px); } 50% { transform: translateY(0); } 75% { transform: translateY(-4px); } }
.party-panel {
  position: fixed; z-index: 95; right: calc(12px + env(safe-area-inset-right)); bottom: calc(80px + env(safe-area-inset-bottom));
  width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; margin: 0;
  padding: 14px 14px 12px;
  animation: pop-up .18s steps(3) both;
}
@keyframes pop-up { from { clip-path: inset(100% -20px -20px -20px); } to { clip-path: inset(-40px -20px -20px -20px); } }
.party-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.party-panel__head h2 { font: var(--fs-m)/1 var(--font-px); text-transform: uppercase; }
.party-list { display: grid; gap: 6px; }
.party-slot {
  appearance: none; border: 0; width: 100%; background: var(--paper-2); display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px;
  font: var(--fs-xs)/1.5 var(--font-px); text-align: left; cursor: pointer; text-transform: uppercase;
}
.party-slot:hover { background: var(--butter); }
.party-slot img { width: 64px; height: 64px; flex: none; }
.party-slot b { display: block; font-weight: 400; font-size: var(--fs-s); }
.party-empty { font-size: 16px; padding: 8px 0; }
.party-pc { margin-top: 12px; border-top: var(--px) dashed var(--shadow); padding-top: 10px; }
.party-pc__title { font: var(--fs-xs)/1.4 var(--font-px); text-transform: uppercase; margin-bottom: 6px; }
.party-pc__list { display: flex; flex-wrap: wrap; gap: 4px; }
.party-pc__list button {
  appearance: none; border: 0; background: var(--paper-2); padding: 6px 7px 5px; font: var(--fs-xs)/1 var(--font-px); cursor: pointer; min-height: 32px;
}
.party-pc__list button:hover { background: var(--butter); }
.party-panel__foot { display: flex; justify-content: flex-end; margin-top: 10px; }

/* ---------- shiny mode easter egg ---------- */
.shiny-mode .px-creature, .shiny-mode .dex-card img, .shiny-mode .entry__img, .shiny-mode .foe img, .shiny-mode .ally,
.shiny-mode .species-card__img, .shiny-mode .parade__mon img, .shiny-mode .legend-card.is-revealed img, .shiny-mode .px {
  animation: shimmer 2.4s steps(12) infinite;
}
@keyframes shimmer {
  0% { filter: hue-rotate(0deg) saturate(1.3) brightness(1.05); }
  50% { filter: hue-rotate(180deg) saturate(1.5) brightness(1.12); }
  100% { filter: hue-rotate(360deg) saturate(1.3) brightness(1.05); }
}
.shiny-mode body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    url(../assets/ui/sparkle.svg) 8% 22% / 21px 21px no-repeat,
    url(../assets/ui/sparkle.svg) 88% 14% / 28px 28px no-repeat,
    url(../assets/ui/sparkle.svg) 72% 78% / 21px 21px no-repeat,
    url(../assets/ui/sparkle.svg) 18% 84% / 28px 28px no-repeat,
    url(../assets/ui/sparkle.svg) 48% 50% / 14px 14px no-repeat;
  image-rendering: pixelated; animation: twinkle 1.2s steps(2) infinite;
}
@keyframes twinkle { 50% { opacity: .2; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .shiny-mode .px-creature, .shiny-mode .dex-card img, .shiny-mode .px { animation: none; filter: hue-rotate(140deg) saturate(1.4); }
}
@media (max-width: 379px) { .px-btn { white-space: normal; text-align: center; } }
@media (max-width: 379px) {
  #sound-toggle { display: none; }
  .topbar__in { gap: 8px; }
  .start-btn { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 419px) { .dex-controls__btns .hide-xs { display: none; } }
/* party: compact 3-up grid so 6 members + the PC box fit without scrolling */
.party-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.party-slot { flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 4px 4px 6px; height: 100%; font-size: var(--fs-xs); line-height: 1.4; }
.party-slot b { font-size: var(--fs-xs); line-height: 1.5; margin-bottom: 2px; overflow-wrap: anywhere; }
.party-slot img { width: 64px; height: 64px; }