/* DexDB: a Pokédex-inspired, modern, mobile-first stylesheet. */

:root {
  --font: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pixel: "Silkscreen", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius: 20px;
  --wrap: 1120px;
  --header-h: 60px;
  --lip: 0px;
  --nav-h: 48px;
  --sprite-bg: var(--bg);

  --bg: #f3efe9;
  --bg-dots: rgba(120, 90, 60, .07);
  --surface: #fffdfa;
  --surface-2: #f5f0e9;
  --line: #e7dfd4;
  --text: #201a15;
  --muted: #74695f;
  --red: #dc1e26;
  --red-2: #b3141b;
  --red-3: #8a0e14;
  --bezel: #efebe5;
  --lcd: #dde9e1;
  --lcd-ink: #21382c;
  --lcd-grid: rgba(33, 56, 44, .055);
  --chip: #eee7de;
  --chip-on: #201a15;
  --chip-on-ink: #fff;
  --shadow: 0 1px 1px rgba(40, 25, 10, .04), 0 6px 20px rgba(40, 25, 10, .07);
  --focus: #2563eb;
  --link: #b8121a;
  --phys-bg: #fde3cf; --phys-ink: #9a3f06;
  --spec-bg: #dbe6ff; --spec-ink: #2643a0;
  --s1: #e4553f; --s2: #ef8a25; --s3: #e9b913; --s4: #8fc43a; --s5: #36b06a; --s6: #1ea0a6;
  /* Charts: one series hue, plus text for good/bad changes (always with an arrow) */
  --series-1: #2a78d6; --good-ink: #006300; --bad-ink: #d03b3b;
  /* Muted rings on the matchup circles: the type brings a weakness / a resistance */
  --mu-weak: #c8695e; --mu-strong: #5c9b6f;
  /* Glossary tones (content/glossary.json): stat changes and status conditions, 4.5:1 on white */
  --tone-up: #2f7d4f; --tone-down: #b3473f; --tone-par: #8a6d00; --tone-brn: #b5531f; --tone-psn: #8a3f96; --tone-slp: #6b6f7a;
  --tone-frz: #276f87; --tone-cnf: #a8487a;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111214; --bg-dots: rgba(255, 255, 255, .035); --surface: #1a1b1f; --surface-2: #22242a;
    --line: #2d3037; --text: #efece8; --muted: #a59d94; --red: #e2333a; --red-2: #b0161d; --red-3: #6e0b10;
    --bezel: #2a2c32; --lcd: #0e1b16; --lcd-ink: #b5efcd; --lcd-grid: rgba(181, 239, 205, .045);
    --chip: #282a30; --chip-on: #efece8; --chip-on-ink: #111214;
    --shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); --link: #ff7b80;
    --phys-bg: #4a2a12; --phys-ink: #ffb27a; --spec-bg: #1d2c55; --spec-ink: #a9c1ff;
    --series-1: #3987e5; --good-ink: #0ca30c; --bad-ink: #e66767; --mu-weak: #cf776d; --mu-strong: #6cae80;
    --tone-up: #7fd1a0; --tone-down: #f08a80; --tone-par: #e6cc5c; --tone-brn: #f2a065; --tone-psn: #cf9ad8; --tone-slp: #b7bcc8;
    --tone-frz: #8fd3e8; --tone-cnf: #e7a1c6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111214; --bg-dots: rgba(255, 255, 255, .035); --surface: #1a1b1f; --surface-2: #22242a;
  --line: #2d3037; --text: #efece8; --muted: #a59d94; --red: #e2333a; --red-2: #b0161d; --red-3: #6e0b10;
  --bezel: #2a2c32; --lcd: #0e1b16; --lcd-ink: #b5efcd; --lcd-grid: rgba(181, 239, 205, .045);
  --chip: #282a30; --chip-on: #efece8; --chip-on-ink: #111214;
  --shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); --link: #ff7b80;
  --phys-bg: #4a2a12; --phys-ink: #ffb27a; --spec-bg: #1d2c55; --spec-ink: #a9c1ff;
  --series-1: #3987e5; --good-ink: #0ca30c; --bad-ink: #e66767; --mu-weak: #cf776d; --mu-strong: #6cae80;
  --tone-up: #7fd1a0; --tone-down: #f08a80; --tone-par: #e6cc5c; --tone-brn: #f2a065; --tone-psn: #cf9ad8; --tone-slp: #b7bcc8;
  --tone-frz: #8fd3e8; --tone-cnf: #e7a1c6;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--nav-h) + 8px); }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text);
  background: var(--bg); background-image: radial-gradient(var(--bg-dots) 1px, transparent 1px); background-size: 18px 18px;
  overflow-x: hidden;
  overflow-x: clip; /* hides the same overflow without making the body a scroll box (which can upset sticky bars) */
}
img { max-width: 100%; }
a { color: var(--link); }
button, input, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 640px; padding-top: 40px; padding-bottom: 40px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 16px; }
.muted { color: var(--muted); }
.fine { color: var(--muted); font-size: .8rem; margin: 12px 0 0; }
.empty { color: var(--muted); margin: 4px 0; }

/* ---------- header: the Pokédex lid, flattened ---------- */
.dex-top {
  position: sticky; top: 0; z-index: 50; height: var(--header-h); color: #fff;
  background: linear-gradient(180deg, var(--red) 0%, var(--red-2) 100%);
  border-bottom: 1px solid var(--red-3); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .5);
}
.dex-top__inner { height: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex: none; }
/* The Pokédex's blue lens and three lights, kept small and flat */
.lens {
  width: 30px; height: 30px; flex: none; border-radius: 50%; border: 2.5px solid #fff;
  background: radial-gradient(circle at 34% 32%, #dff5ff 0 14%, #5cc1ff 32%, #1688e0 64%, #0d5aa8 100%);
  box-shadow: 0 0 0 1.5px var(--red-3), 0 0 12px rgba(92, 193, 255, .4);
}
.leds { display: flex; gap: 4px; align-self: flex-start; margin: 15px 0 0 -4px; }
.leds i { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .25); }
.leds i:nth-child(1) { background: #ff6b6b; }
.leds i:nth-child(2) { background: #ffd23f; }
.leds i:nth-child(3) { background: #45d483; }
.brand__name { font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em; }
.brand__name b { font-weight: 800; color: rgba(255, 255, 255, .7); }
.tabs { display: flex; gap: 2px; }
.tabs a { padding: 7px 13px; border-radius: 999px; color: var(--muted); font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tabs a:hover, .tabs a[aria-current="page"] { color: var(--text); background: var(--chip); }
.tabs--head > a { color: rgba(255, 255, 255, .82); }
.tabs--head > a:hover, .tabs--head > a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .16); }
.tabs--page { display: none; }
/* "Browse": the reference hubs (types, abilities...) in a small menu */
.tabs__more { position: relative; }
.tabs__more summary {
  display: flex; align-items: center; justify-content: center; gap: 3px; padding: 7px 9px 7px 13px; border-radius: 999px;
  list-style: none; cursor: pointer; color: var(--muted); font-size: .92rem; font-weight: 600; white-space: nowrap;
}
.tabs__more summary::-webkit-details-marker { display: none; }
.tabs__more summary .i { width: 16px; height: 16px; transition: transform .15s; }
.tabs__more[open] summary .i { transform: rotate(180deg); }
.tabs__more summary:hover, .tabs__more[open] summary, .tabs__more.is-current summary { color: var(--text); background: var(--chip); }
.tabs--head .tabs__more summary { color: rgba(255, 255, 255, .82); }
.tabs--head .tabs__more summary:hover, .tabs--head .tabs__more[open] summary, .tabs--head .tabs__more.is-current summary { color: #fff; background: rgba(255, 255, 255, .16); }
.tabs__menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; display: grid; gap: 2px; min-width: 240px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}
.tabs .tabs__menu a { display: grid; gap: 1px; padding: 8px 12px; border-radius: 10px; color: var(--text); text-align: left; white-space: normal; }
.tabs .tabs__menu a:hover, .tabs .tabs__menu a[aria-current="page"] { background: var(--surface-2); }
.tabs__menu b { font-weight: 700; }
.tabs__menu small { color: var(--muted); font-size: .78rem; font-weight: 500; }
.search { position: relative; flex: 1; min-width: 0; max-width: 400px; margin-left: auto; display: flex; align-items: center; }
.search > .i { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--lcd-ink); opacity: .7; pointer-events: none; }
/* The search box is the Pokédex's little screen */
.search input {
  width: 100%; height: 38px; padding: 0 14px 0 38px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .28);
  background: var(--lcd); color: var(--lcd-ink); font-weight: 500; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18);
  -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--lcd-ink); opacity: .6; }
.search input:focus { outline: none; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18), 0 0 0 3px rgba(255, 255, 255, .4); }
.search__results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow: auto;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}
/* Beside the tabs the box is narrow, so the list opens to the left at the box's widest (form names run long) */
@media (min-width: 561px) { .dex-top .search__results { left: auto; width: 400px; } }
.search__results a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: inherit; text-decoration: none; font-weight: 600; }
.search__results a > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A Pokémon's name wraps rather than being cut off: Paldean Tauros (Combat Breed) and (Blaze Breed) differ at the end */
.search__results a > span.sr-name { white-space: normal; }
.search__results small { font-family: var(--pixel); font-size: .62rem; color: var(--muted); font-weight: 400; }
.search__results li[aria-selected="true"] a, .search__results a:hover { background: var(--surface-2); }
.search__results img { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
/* A form with no pixel sprite shows its official art (app.js), which looks better smooth */
.search__results img[src*="/official-artwork/"] { image-rendering: auto; }
.search__none { padding: 10px; color: var(--muted); }
.icon-btn {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--text);
}
.icon-btn:hover { background: var(--chip); }
.dex-top .icon-btn { border: 0; background: rgba(255, 255, 255, .16); color: #fff; }
.dex-top .icon-btn:hover { background: rgba(255, 255, 255, .26); }
/* On phones the section tabs leave the header for a bar along the bottom of every page (render.py: bottom_nav). */
.bnav { display: none; }
@media (max-width: 760px) {
  .tabs--head { display: none; }
  .bnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .bnav__item {
    display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 50px; padding: 4px 2px; border-radius: 12px;
    color: var(--muted); font-size: .7rem; font-weight: 700; text-decoration: none; list-style: none; cursor: pointer;
  }
  .bnav__item::-webkit-details-marker { display: none; }
  .bnav__item .i { width: 22px; height: 22px; }
  .bnav__item[aria-current="page"], .bnav__more[open] > .bnav__item { color: var(--red); }
  .bnav__item[aria-current="page"] .i { stroke-width: 2.4; }
  .bnav__sheet {
    position: fixed; left: 8px; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom)); display: grid; gap: 2px; padding: 8px;
    border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
  }
  .bnav__sheet a { display: grid; gap: 1px; padding: 10px 12px; border-radius: 12px; color: var(--text); text-decoration: none; }
  .bnav__sheet a small { color: var(--muted); font-size: .8rem; }
  .bnav__sheet a[aria-current="page"] { background: var(--chip); }
  /* Out of the way while typing (the keyboard is up) */
  body:has(input:focus, textarea:focus, select:focus) .bnav { display: none; }
  body .to-top { bottom: calc(74px + env(safe-area-inset-bottom)); }
}
/* Short tab names where room is tight: "Team builder" → "Team", "Damage calc" → "Calc" (tabs__alt is the short form);
   in the header that's narrow desktops, where the search box would otherwise be squeezed out */
.tabs__alt { display: none; }
@media (max-width: 400px) {
  .tabs__opt { display: none; }
  .tabs__alt { display: inline; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .tabs--head .tabs__opt { display: none; }
  .tabs--head .tabs__alt { display: inline; }
}
@media (max-width: 560px) {
  .dex-top__inner { gap: 10px; }
  .leds { display: none; }
  .search__results { position: fixed; top: calc(var(--header-h) + 4px); left: 10px; right: 10px; }
}

/* ---------- prev / next ---------- */
.pager { display: flex; justify-content: space-between; gap: 8px; margin: 18px 0 10px; }
.pager__btn {
  display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 48%; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.pager__btn--next { padding: 6px 6px 6px 12px; text-align: right; }
.pager__btn span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pager__btn span, .pager__btn span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pager__btn small { font-family: var(--pixel); font-size: .6rem; color: var(--muted); font-weight: 400; }

/* ---------- hero ---------- */
.hero { display: grid; gap: 16px 28px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "device" "facts" "entry"; }
.hero__body { display: contents; }
.hero__head { grid-area: head; min-width: 0; }
.device { grid-area: device; }
.hero__facts { grid-area: facts; min-width: 0; }
.hero__entry { grid-area: entry; min-width: 0; }
@media (min-width: 860px) {
  .hero { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); grid-template-areas: "device head" "device facts" "device entry"; grid-template-rows: auto auto 1fr; align-items: start; }
  .hero__head { align-self: end; }
}
.dex-entry {
  margin: 0; padding: 14px 16px 12px; border-radius: 16px; color: var(--lcd-ink); background-color: var(--lcd);
  background-image: linear-gradient(var(--lcd-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lcd-grid) 1px, transparent 1px);
  background-size: 14px 14px; border: 2px solid color-mix(in srgb, var(--lcd-ink) 20%, transparent); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .12);
}
.dex-entry__label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; font-family: var(--pixel); font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.dex-entry__text { margin: 8px 0 6px; font-size: 1.02rem; font-weight: 500; line-height: 1.55; }
.dex-entry__more { color: inherit; font-size: .8rem; font-weight: 700; opacity: .85; }
/* The Pokédex voice: "Read it" on the entry, and how to say the name beside it */
.dex-entry__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dex-entry__read {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; cursor: pointer; font: inherit;
  font-family: var(--pixel); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lcd-ink);
  background: color-mix(in srgb, var(--lcd-ink) 12%, transparent); border: 1px solid color-mix(in srgb, var(--lcd-ink) 30%, transparent);
}
.dex-entry__read:hover { background: color-mix(in srgb, var(--lcd-ink) 20%, transparent); }
.dex-entry__read .i, .say-btn .i { width: 16px; height: 16px; }
.dex-entry__read.is-playing, .say-btn.is-playing { background: var(--lcd-ink); color: var(--lcd); }
.hero__title { display: flex; align-items: center; gap: 10px; }
.say-btn {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--chip); color: var(--muted);
}
.say-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.say-btn.is-playing { background: var(--red); border-color: var(--red); color: #fff; }
.say-btn--sm { width: 28px; height: 28px; }
.say-btn--sm .i { width: 14px; height: 14px; }
/* Playing: a stop square in place of the speaker, since pressing it again stops */
:is(.say-btn, .dex-entry__read).is-playing > .i { display: none; }
:is(.say-btn, .dex-entry__read).is-playing::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.hero__num { margin: 0; font-family: var(--pixel); color: var(--red); font-size: .95rem; letter-spacing: .04em; }
.hero__name { margin: 2px 0 4px; font-size: clamp(2.1rem, 8vw, 3.4rem); line-height: 1.02; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.hero__genus { margin: 0; color: var(--muted); font-weight: 500; }
.form-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 2px; }
.form-chips a.chip { text-decoration: none; }
.form-chips a.chip:not([aria-selected="true"]) { color: var(--text); }
.form-chips::-webkit-scrollbar { display: none; }

.device {
  position: relative; padding: 16px 16px 14px; border-radius: 26px;
  background: linear-gradient(155deg, var(--red) 0%, var(--red-2) 72%, var(--red-3) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -4px 0 rgba(0, 0, 0, .25), var(--shadow);
}
.bezel {
  background: var(--bezel); border-radius: 14px; padding: 10px 14px 12px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 44px 100%, 0 calc(100% - 44px));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08);
}
.bezel__leds { display: flex; justify-content: center; gap: 10px; margin-bottom: 8px; }
.bezel__leds i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .3); }
.lcd {
  position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border-radius: 10px;
  background-color: var(--lcd);
  background-image: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .22), transparent 65%);
  border: 2px solid rgba(0, 0, 0, .18); box-shadow: inset 0 3px 10px rgba(0, 0, 0, .18);
}
/* The screen grid stays near the edges and fades out behind the Pokémon. */
.lcd::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--lcd-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lcd-grid) 1px, transparent 1px);
  background-size: 24px 24px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, transparent 25%, #000 90%);
  mask-image: radial-gradient(ellipse at 50% 45%, transparent 25%, #000 90%);
}
/* Plain sprite background (the default): the screen takes the page's own colour. Grid brings back the Pokédex screen. */
html:not([data-listbg="grid"]) .lcd { --lcd-ink: var(--text); background: var(--sprite-bg); border-color: var(--line); box-shadow: none; }
html:not([data-listbg="grid"]) .lcd::before { display: none; }
.lcd.is-loading::after {
  content: "Loading…"; position: absolute; top: 8px; right: 10px; font-family: var(--pixel); font-size: .62rem;
  color: var(--lcd-ink); animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }
.lcd__no { position: absolute; top: 8px; left: 10px; font-family: var(--pixel); font-size: .72rem; color: var(--lcd-ink); opacity: .75; }
/* The picture's track is pinned to the screen above the bar: a tall image (Dream World SVGs are drawn bigger than the
   screen) would otherwise stretch it and spill over the bar */
.lcd { grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding-bottom: 52px; perspective: 900px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lcd.can-turn { cursor: grab; }
.lcd.is-dragging { cursor: grabbing; }
.sprite-main {
  position: relative; z-index: 1; width: 84%; height: 84%; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .22)); -webkit-user-drag: none; user-select: none;
}

/* 360° tab: the rotatable model replaces the sprite while it's up. */
.lcd model-viewer {
  position: absolute; inset: 0 0 52px 0; z-index: 1; width: 100%; height: calc(100% - 52px);
  background: transparent; --poster-color: transparent; --progress-bar-color: var(--red); --progress-bar-height: 3px;
}
.device:not(.is-model) .lcd model-viewer { display: none; }
/* While the 3D model loads (or if it can't), the last picture stays up instead of an empty screen. */
.device.is-model .lcd:not(.model-loading):not(.model-failed) .sprite-main { display: none; }
.device.is-model .lcd.model-loading model-viewer, .device.is-model .lcd.model-failed model-viewer { opacity: 0; }
.model-note { margin: 10px 2px 0; font-size: .74rem; line-height: 1.4; color: rgba(255, 255, 255, .82); }
.select--dark { margin-top: 10px; background: rgba(0, 0, 0, .26); border-color: rgba(0, 0, 0, .2); color: #fff; }
.select--dark span { color: rgba(255, 255, 255, .75); }
.select.select--dark select { background-color: transparent; color: #fff; }
.select.select--dark select::picker-icon { color: rgba(255, 255, 255, .75); }
.model-note a { color: #fff; }

/* Turn arrows either side of the Pokémon: tap to turn a step (or round, for sprites), hold to keep turning. */
.turn-arrows { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 48px; display: flex; justify-content: space-between; pointer-events: none; }
.turn-btn {
  pointer-events: auto; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--lcd-ink); background: color-mix(in srgb, var(--lcd-ink) 14%, transparent);
  touch-action: none; -webkit-touch-callout: none; user-select: none; transition: background .15s, transform .15s;
}
.turn-btn:hover { background: color-mix(in srgb, var(--lcd-ink) 24%, transparent); }
.turn-btn.is-held { background: color-mix(in srgb, var(--lcd-ink) 32%, transparent); transform: scale(.94); }

/* Turntable ring (used by the 3D lab page). */
.turn-ring {
  position: absolute; z-index: 2; left: 50%; bottom: 42px; width: 62%; aspect-ratio: 4 / 1; padding: 0; transform: translateX(-50%);
  border: 0; border-radius: 50%; background: none; color: var(--lcd-ink); cursor: pointer; opacity: .7;
  touch-action: none; -webkit-touch-callout: none; transition: opacity .2s, filter .2s;
}
.turn-ring:hover, .turn-ring:focus-visible, .turn-ring.is-held { opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lcd-ink) 45%, transparent)); }
.turn-ring__svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; }
.turn-ring__back { stroke-width: 1.6; stroke-dasharray: 3 6; opacity: .5; }
.turn-ring__front { stroke-width: 2.6; }
.turn-ring__head { fill: currentColor; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
.sprite-main.is-pixel { width: 72%; height: 72%; image-rendering: pixelated; }
.sprite-main.is-opaque { width: 62%; height: 62%; padding: 4px; border-radius: 6px; background: #fff; filter: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, .15); }
.lcd__bar {
  position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 3px; border-radius: 10px;
  background: color-mix(in srgb, var(--lcd-ink) 9%, transparent);
}
.lcd__btn {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--lcd-ink); background: color-mix(in srgb, var(--lcd-ink) 14%, transparent);
}
.lcd__btn:hover { background: color-mix(in srgb, var(--lcd-ink) 24%, transparent); }
.lcd__btn .i { width: 18px; height: 18px; }
.lcd__label {
  flex: 1; min-width: 0; text-align: center; font-family: var(--pixel); font-size: .62rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--lcd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bezel__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-left: 26px; }
.big-led { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9e9e, var(--red) 60%, var(--red-3)); box-shadow: 0 0 0 2px rgba(0, 0, 0, .2); }
.grille { display: flex; flex-direction: column; gap: 4px; }
.grille b { display: block; width: 34px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .22); }
.src-picker { display: grid; gap: 8px; margin-top: 14px; }
.src-groups, .src-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.src-chips { padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, .3); }
.src-break { flex-basis: 100%; height: 0; }
.src-gen { margin-right: 2px; font-family: var(--pixel); font-size: .56rem; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.src-btn, .src-chip {
  border: 0; border-radius: 999px; cursor: pointer; font-weight: 700; color: #fff;
  background: rgba(0, 0, 0, .26); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
}
.src-btn { min-width: 26px; padding: 6px 7px; font-size: .76rem; }
.src-chip { padding: 5px 11px; font-size: .78rem; }
.src-chip.has-anim::after { content: "▶"; margin-left: 5px; font-size: .5rem; vertical-align: 1px; opacity: .75; }
.src-btn[aria-pressed="true"], .src-chip[aria-pressed="true"] { background: #fff; color: #1f1b17; box-shadow: none; }
.device__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.i--fill { fill: currentColor; stroke: none; }
.round-btn .i--pause, .round-btn[aria-pressed="true"] .i--play { display: none; }
.round-btn[aria-pressed="true"] .i--pause { display: block; }
.round-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: #23252b; color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .45), 0 2px 0 rgba(0, 0, 0, .25);
}
.round-btn[aria-pressed="true"] { background: #ffd23f; color: #3b2a00; }
.round-btn.is-playing { background: #45d483; color: #062b16; }
.round-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Shiny is on but the picture on screen has no shiny version */
.round-btn.is-unavailable { position: relative; }
.round-btn.is-unavailable::after { content: ""; position: absolute; left: 10px; right: 10px; top: calc(50% - 1px); height: 2.5px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); }
.round-btn--text { font-family: var(--pixel); font-size: .6rem; }
.round-btn--sm { width: 36px; height: 36px; flex: none; }
.round-btn--sm .i { width: 18px; height: 18px; }

.types { display: flex; flex-wrap: wrap; gap: 6px; }
.type {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; line-height: 1.3; white-space: nowrap;
  background: var(--tc); color: var(--tt, #fff); font-weight: 700; font-size: .85rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .28); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.type--sm { padding: 1px 8px; font-size: .72rem; }
/* The type's symbol before its name */
.type .ti { width: 1.1em; height: 1.1em; margin: 0 .3em 0 -.15em; flex: none; fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.types--lg .type { padding: 6px 18px; font-size: 1rem; }
.t-normal { --tc: #9fa19f; } .t-fire { --tc: #e62829; } .t-water { --tc: #2980ef; }
.t-electric { --tc: #f5bc00; --tt: #3a2c00; } .t-grass { --tc: #3fa129; } .t-ice { --tc: #3dcef3; --tt: #063845; }
.t-fighting { --tc: #ff8000; } .t-poison { --tc: #9141cb; } .t-ground { --tc: #915121; } .t-flying { --tc: #6fa9e6; }
.t-psychic { --tc: #ef4179; } .t-bug { --tc: #91a119; } .t-rock { --tc: #a49c74; } .t-ghost { --tc: #704170; }
.t-dragon { --tc: #5060e1; } .t-dark { --tc: #624d4e; } .t-steel { --tc: #5a9ab0; } .t-fairy { --tc: #e862e8; }
.t-stellar { --tc: #40b5a5; } .t-unknown { --tc: #68a090; }
.t-electric.type, .t-ice.type { text-shadow: none; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.facts > div { min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.facts dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.facts dd { margin: 2px 0 0; font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.facts dd small { display: block; font-weight: 500; font-size: .78rem; color: var(--muted); }
@media (min-width: 600px) { .hero .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts--compact { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); margin: 0; }
.facts--compact > div { background: var(--surface-2); border-color: transparent; }
.facts--compact dd { font-size: .98rem; }
.facts--stack { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.abil-row { margin-top: 14px; }
/* The hero's Champions summary (in-game ladder): ranks, the usual set, and a way down to the full set */
.champ-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; padding: 10px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--red) 8%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--red) 22%, var(--line));
  color: var(--text); text-decoration: none; font-size: .9rem;
}
.champ-line:hover { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.champ-line__k { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--red); }
.champ-line__ranks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.champ-line__ranks b { font-size: 1.05rem; }
.champ-line__set { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.champ-line__set .item-ico { width: 24px; height: 24px; margin: -4px -2px -4px 0; vertical-align: middle; }
.champ-line__more { margin-left: auto; color: var(--link); font-weight: 700; white-space: nowrap; }
.abil-row__label { display: block; margin-bottom: 6px; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.abil-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* An ability, wherever it's named (render.py: ability_chip). It sets its own type, so it reads the same in muted or
   bold lines of text. */
.abil-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); color: var(--text); font-weight: 600; white-space: nowrap; cursor: help;
}
.abil-chip small { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.abil-chip .i { width: 16px; height: 16px; color: var(--muted); }
.abil-chip.is-hidden { border-style: dashed; }
.abil-chip:hover, .abil-chip[aria-describedby] { border-color: color-mix(in srgb, var(--text) 35%, var(--line)); }
.abil-chip:hover .i, .abil-chip[aria-describedby] .i { color: var(--text); }
/* Compact, for abilities named in lists, tables and sentences: on the chip colour, so it stands out on either card colour */
.abil-chip--sm {
  gap: 4px; margin: 1px 0; padding: 1px 5px 1px 8px; border-radius: 8px; background: var(--chip);
  border-color: color-mix(in srgb, var(--text) 14%, var(--chip)); font-size: .8rem; line-height: 1.45;
}
.abil-chip--sm small { font-size: .64rem; }
.abil-chip--sm .i { width: 14px; height: 14px; }

/* Descriptions shown on hover or tap (abilities, a body shape) */
.tip-term { padding: 0; border: 0; background: none; text-align: left; cursor: help; text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.tip-term:hover, .tip-term[aria-describedby] { color: var(--link); }
.tip {
  position: fixed; z-index: 80; left: 0; top: 0; width: max-content; max-width: min(320px, calc(100vw - 16px));
  padding: 10px 12px; border-radius: 12px; background: var(--text); color: var(--surface);
  font-size: .86rem; line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .12s, transform .12s, visibility 0s .12s;
}
.tip.is-below { transform: translateY(-4px); }
.tip.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .12s, transform .12s; }
.tip::after { content: ""; position: absolute; top: 100%; left: var(--arrow-x, 50%); margin-left: -7px; border: 7px solid transparent; border-top-color: var(--text); }
.tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--text); }
@media (prefers-reduced-motion: reduce) { .tip, .tip.is-open { transition: none; } }
/* Hover cards on links to Pokémon pages (app.js): sprite, types, base stats, abilities, ladder rank */
.hcard {
  position: fixed; z-index: 70; left: 0; top: 0; width: 252px; padding: 12px 14px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow), 0 14px 32px -14px rgba(0, 0, 0, .45); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .12s, transform .12s, visibility 0s .12s;
}
.hcard.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .12s, transform .12s; }
.hcard__top { display: flex; align-items: center; gap: 10px; }
.hcard__top img { width: 64px; height: 64px; flex: none; image-rendering: pixelated; }
.hcard__top small { display: block; font-family: var(--pixel); font-size: .6rem; color: var(--muted); }
.hcard__top b { display: block; font-size: 1rem; line-height: 1.2; }
.hcard__top .types { margin-top: 4px; gap: 4px; }
.hcard__stats { list-style: none; display: grid; gap: 3px; margin: 10px 0 0; padding: 0; font-size: .74rem; }
.hcard__stats li { display: grid; grid-template-columns: 2.1rem 1.9rem minmax(0, 1fr); align-items: center; gap: 6px; }
.hcard__stats span { color: var(--muted); font-weight: 700; }
.hcard__stats b { text-align: right; font-variant-numeric: tabular-nums; }
.hcard__stats i { height: 5px; border-radius: 3px; background: linear-gradient(var(--c), var(--c)) 0 0 / var(--w) 100% no-repeat, var(--chip); }
.hcard__bst { padding-top: 3px; border-top: 1px solid var(--line); }
.hcard__abil { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 0; font-size: .72rem; line-height: 1.3; }
.hcard__abil span { padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line); font-weight: 600; white-space: nowrap; }
.hcard__abil .is-hidden { border-style: dashed; }
.hcard__abil small { font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hcard__rank { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--line); font-size: .74rem; }
.hcard__rank span { color: var(--muted); font-weight: 700; }
.hcard__rank b { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .hcard, .hcard.is-open { transition: none; } }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.badge--gold { background: #f6d77a; color: #4d3800; }
.badge--violet { background: #dccaff; color: #3b1d73; }

/* ---------- chips & segmented controls ---------- */
.chip {
  flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--chip);
  font-weight: 600; font-size: .88rem; white-space: nowrap; cursor: pointer;
}
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--chip-on); color: var(--chip-on-ink); border-color: transparent; }
.chip--static { cursor: default; background: var(--surface); }
/* Rows of chips and tabs wrap instead of scrolling sideways (only the section nav scrolls). */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px; margin: 0 -2px; min-width: 0; }
.chip small { font-size: .78em; font-weight: 600; opacity: .65; margin-left: 2px; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row--wrap { flex-wrap: wrap; overflow: visible; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--chip); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: .85rem; color: var(--muted); white-space: nowrap; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.seg--sm button { padding: 4px 9px; font-size: .76rem; }
.seg--dark { background: rgba(0, 0, 0, .28); border-color: rgba(0, 0, 0, .2); }
.seg--dark button { color: rgba(255, 255, 255, .85); }
.seg--dark button[aria-pressed="true"] { background: #fff; color: #1f1b17; }

/* ---------- section nav ---------- */
.section-nav {
  position: sticky; top: calc(var(--header-h) - var(--lip)); z-index: 40; margin: 14px -16px 0; padding: calc(var(--lip) + 2px) 16px 8px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.section-nav__inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.section-nav__inner::-webkit-scrollbar { display: none; }
.section-nav a { flex: none; padding: 6px 12px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.section-nav a:hover { color: var(--text); }
.section-nav a.is-active { background: var(--chip-on); color: var(--chip-on-ink); }
/* Arrows at the ends of the bar while more sections are off to that side */
.scroll-hint {
  position: absolute; top: calc(var(--lip) + 3px); z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: var(--shadow); cursor: pointer;
}
.scroll-hint--left { left: 6px; }
.scroll-hint--right { right: 6px; }
.scroll-hint .i { width: 16px; height: 16px; }
/* Wide screens: the menu becomes a column beside the sections, marking the one in view */
.toc { display: none; }
@media (min-width: 1280px) {
  .wrap.detail { max-width: 1340px; }
  .detail__body { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 24px; align-items: start; }
  .section-nav { display: none; }
  .toc {
    display: block; position: sticky; top: calc(var(--header-h) + 16px); margin-top: 14px; padding: 4px 0;
    max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; scrollbar-width: thin;
  }
  .toc__title { margin: 0 0 6px 14px; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
  .toc__links a {
    display: block; padding: 5px 12px; border-left: 2px solid var(--line); color: var(--muted);
    font-size: .88rem; font-weight: 600; text-decoration: none;
  }
  .toc__links a:hover { color: var(--text); }
  .toc__links a.is-active { border-left-color: var(--red); color: var(--text); }
  .toc__top { display: inline-block; margin: 12px 0 0 14px; color: var(--muted); font-size: .8rem; font-weight: 700; text-decoration: none; }
  .toc__top:hover { color: var(--text); }
}

/* ---------- cards ---------- */
.sections { display: grid; gap: 16px; padding: 14px 0 36px; }
@media (min-width: 960px) {
  .sections { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; align-items: start; }
  .card[data-section="competitive"], .card[data-section="moves"], .card[data-section="evolution"],
  .card[data-section="sprites"], .card[data-section="lore"] { grid-column: 1 / -1; }
}
.card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
/* Sections below the screen aren't laid out until scrolled near, so pages show up sooner */
.sections > .card { content-visibility: auto; contain-intrinsic-size: auto 480px; }
.card__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; padding: 14px 16px 0; cursor: pointer; }
.card__head:hover .collapse-btn { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.card__head h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; }
.card__head h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }
.card__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.collapse-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); cursor: pointer; }
.collapse-btn .i { width: 18px; height: 18px; transition: transform .2s; }
.card.is-collapsed .collapse-btn .i { transform: rotate(-90deg); }
.card.is-collapsed .card__body, .card.is-collapsed .card__tools > :not(.collapse-btn) { display: none; }
.card.is-collapsed .card__head { padding-bottom: 14px; }
.card__body { padding: 14px 16px 16px; min-width: 0; }
.card h1 { margin-top: 0; }

/* ---------- stats ---------- */
.stats-bars { display: grid; gap: 8px; }
.stat { display: grid; grid-template-columns: 2.6rem 2.4rem minmax(0, 1fr) 3.4rem 5.6rem; align-items: center; gap: 10px; }
.stat__rank { justify-self: end; }
.stat--head .stat__rank { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rank-chip {
  padding: 2px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  font-size: .76rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; cursor: help;
}
.rank-chip.is-top { color: var(--text); border-color: color-mix(in srgb, var(--series-1) 45%, var(--line)); }
.rank-chip:hover, .rank-chip[aria-describedby] { color: var(--text); border-color: var(--series-1); }
.stat__label { font-weight: 700; color: var(--muted); font-size: .85rem; }
.stat__val { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.bar { height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); }
.bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--s3); }
.bar__fill.s1, .mon__stats > .s1 { --c: var(--s1); } .bar__fill.s2, .mon__stats > .s2 { --c: var(--s2); } .bar__fill.s3, .mon__stats > .s3 { --c: var(--s3); }
.bar__fill.s4, .mon__stats > .s4 { --c: var(--s4); } .bar__fill.s5, .mon__stats > .s5 { --c: var(--s5); } .bar__fill.s6, .mon__stats > .s6 { --c: var(--s6); }
.bar__fill { background: var(--c); }
.stat__range { text-align: right; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.stat--head .stat__range { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.stat--total { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 2px; }
.stat__note { grid-column: 3; font-size: .8rem; color: var(--muted); }
html[data-statlevel="off"] .stat__range, html[data-statlevel="off"] .stat--head, html[data-statlevel="off"] .range-note { display: none; }
html[data-statlevel="off"] .stat { grid-template-columns: 2.6rem 2.4rem minmax(0, 1fr) 3.4rem; }
@media (max-width: 420px) {
  .stat { gap: 8px; grid-template-columns: 2.3rem 2.2rem minmax(0, 1fr) 3.1rem 4.9rem; }
  html[data-statlevel="off"] .stat { grid-template-columns: 2.3rem 2.2rem minmax(0, 1fr) 3.1rem; }
}
/* Lv 50 is Pokémon Champions', and what shows without a saved choice or scripts; Lv 100 is the main games' */
html[data-statlevel="50"] .lv100, html[data-statlevel="100"] .lv50, html:not([data-statlevel]) .lv100 { display: none; }
.hex-wrap { display: none; }
html[data-statstyle="hex"] .hex-wrap { display: block; }
html[data-statstyle="hex"] .stats-bars .stat:not(.stat--total) { display: none; }
html[data-statstyle="hex"] .stat--total { border-top: 0; }
.hex { display: block; width: 100%; max-width: 360px; margin: 0 auto; }
.hex__ring { fill: none; stroke: var(--line); }
.hex__axis { stroke: var(--line); }
.hex__shape { fill: color-mix(in srgb, var(--red) 26%, transparent); stroke: var(--red); stroke-width: 2.5; stroke-linejoin: round; }
.hex__k { font-size: 11px; font-weight: 700; fill: var(--muted); text-anchor: middle; }
.hex__v { font-size: 13px; font-weight: 800; fill: var(--text); text-anchor: middle; }

/* ---------- speed tiers ---------- */
.spd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.spd-chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 4.4rem; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.spd-chip small { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.spd-summary { margin: 0 0 10px; }
.spd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 470px; overflow-y: auto; scrollbar-width: thin; }
.spd-row { display: grid; grid-template-columns: 2.6rem minmax(56px, 1fr) minmax(0, 1.7fr); align-items: center; gap: 10px; min-height: 34px; padding: 2px 6px; border-radius: 10px; }
.spd-row__val { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.spd-row__bar i { display: block; height: 10px; width: var(--w); border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--muted) 40%, transparent); }
.spd-row__who { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; min-width: 0; color: inherit; text-decoration: none; }
.spd-row__who img { width: 32px; height: 32px; margin: -8px 0 -10px; align-self: center; image-rendering: pixelated; flex: none; }
.spd-row__who b { min-width: 0; font-size: .88rem; overflow-wrap: anywhere; }
.spd-row__who small { min-width: 0; font-size: .76rem; color: var(--muted); }
@media (max-width: 520px) {
  .spd-row { grid-template-columns: 2.3rem minmax(40px, .7fr) minmax(0, 2fr); gap: 8px; }
  .spd-row__who img { display: none; }
  .spd-row__who small { flex-basis: 100%; }
}
a.spd-row__who:hover b { color: var(--link); }
.spd-row.is-mine { background: color-mix(in srgb, var(--series-1) 12%, transparent); }
.spd-row.is-mine .spd-row__bar i { background: var(--series-1); }

/* ---------- matchups & abilities ---------- */
.mu-group { margin-bottom: 14px; }
.mu-group:last-child { margin-bottom: 0; }
.mu-group h3, .comp-box h3, .mv-group h3, .gen-block h3, .sheet__body h3 {
  margin: 0 0 8px; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.mu-list { display: flex; flex-wrap: wrap; gap: 8px; }
/* A row per multiplier: the multiplier once, then the types (each with the badges of what causes it) */
.mu-row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: start; gap: 8px; margin-top: 6px; }
.mu-x { padding-top: 3px; font-size: .95rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.mu-row--4 .mu-x { color: #d9342b; font-size: 1.12rem; padding-top: 1px; }
.mu-row--2 .mu-x { color: #e2702f; }
.mu-row--05 .mu-x { color: #3c9a5c; }
.mu-row--025 .mu-x { color: #1f7f45; }
.mu-row--0 .mu-x { color: var(--text); }
/* 4×: the types ringed in red */
.mu-row--4 .type { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), 0 0 0 2px var(--surface), 0 0 0 4px #d9342b; }
/* Two-type Pokémon ("Show causes", on unless switched off): a badge of the type that causes it sits on each type's
   top-right edge, mostly above it so the name stays clear, ringed muted red for a weakness or green for a resistance
   or immunity (4× keeps its stronger red). Both of its types (4×, ¼×): one rounded rectangle split by a slanted cut */
.mu { position: relative; display: inline-flex; }
.mu--weak { --mu-tone: var(--mu-weak); }
.mu--strong { --mu-tone: var(--mu-strong); }
.mu-row--4 .mu--weak { --mu-tone: #d9342b; }
.mu__why { position: absolute; top: -17px; right: -7px; display: flex; pointer-events: none; }
.mu__dot, .mu__pair { display: flex; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--mu-tone), 0 4px 10px -3px rgba(0, 0, 0, .45); }
.mu__dot { border-radius: 50%; }
.mu__pair { border-radius: 8px; background: var(--surface); }
.mu__why i {
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: inherit;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, #fff 30%, var(--tc)), var(--tc) 62%);
}
/* The symbol fills most of its badge */
.mu__why .ti { width: 17px; height: 17px; fill: var(--tt, #fff); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
/* The two halves of the rectangle, cut on a slant with a sliver of the card between them */
.mu__pair i { width: 24px; }
.mu__pair i:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%); border-radius: 8px 0 0 8px; }
.mu__pair i:last-child { margin-left: -3px; clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%); border-radius: 0 8px 8px 0; }
/* Room above each row for the badges; the multiplier stays level with the types */
.mu-row--why { padding-top: 18px; }
.mu-row--why .mu-list { gap: 24px 16px; }
/* The key: which badge is which of its types, and what the two rings mean */
.mu-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 0 0 10px; color: var(--muted); font-size: .82rem; }
.mu-legend__part { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.mu-key { display: inline-flex; align-items: center; gap: 6px; }
.mu-glyph {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, #fff 32%, var(--tc)), var(--tc) 60%);
}
.mu-glyph .ti { width: 14px; height: 14px; fill: var(--tt, #fff); }
.mu-swatch { width: 13px; height: 13px; margin: 0 3px; border-radius: 50%; background: var(--chip); box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--mu-weak); }
.mu-swatch--strong { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--mu-strong); }
/* The card's "Show causes" switch off: plain types */
[data-muwhy="off"] :is(.mu__why, .mu__said, .mu-legend) { display: none; }
[data-muwhy="off"] .mu-row--why { padding-top: 0; }
[data-muwhy="off"] .mu-row--why .mu-list { gap: 8px; }
/* A small on/off switch in a section's header */
.cswitch {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 5px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--chip); color: var(--muted); font: inherit; font-size: .76rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.cswitch:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.cswitch__track {
  position: relative; flex: none; width: 26px; height: 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 22%, transparent); transition: background .15s;
}
.cswitch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s;
}
.cswitch[aria-pressed="true"] { color: var(--text); }
.cswitch[aria-pressed="true"] .cswitch__track { background: var(--red); }
.cswitch[aria-pressed="true"] .cswitch__track::after { transform: translateX(10px); }
.mu-group--neutral summary { cursor: pointer; color: var(--muted); font-size: .85rem; font-weight: 600; }
.mu-group--neutral .mu-list { margin-top: 8px; }
/* "With Levitate: Ground becomes 0×": a line of text, so the colon stays with the ability's chip */
.mu-note { margin: 8px 0 0; font-size: .88rem; line-height: 1.9; }
.abil-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.abil-list li { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.abil-list p { margin: 8px 0 0; color: var(--muted); font-size: .92rem; }
.abil-others { margin-top: 8px; }
.abil-others summary { cursor: pointer; color: var(--link); font-size: .85rem; font-weight: 700; }
.abil-others summary small { margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: .72rem; }
.mon-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mon-chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px 10px 2px 2px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: .82rem; font-weight: 600; text-decoration: none;
}
.mon-chip:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.mon-chip img { width: 34px; height: 34px; }
/* Biology (Wikipedia excerpt) and the speed tiers explainer */
.wiki p { max-width: 75ch; margin: 0 0 10px; line-height: 1.65; }
.spd-intro { max-width: 75ch; margin: 0 0 12px; color: var(--muted); font-size: .92rem; }

/* ---------- competitive ---------- */
.tiers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tier { display: inline-flex; flex-direction: column; padding: 6px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-family: var(--pixel); font-size: .9rem; }
.tier small { font-family: var(--font); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fmt-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 2px 4px; margin: 0 -2px; }
@media (max-width: 520px) {
  .fmt-tabs { gap: 6px; }
  .fmt-tabs .fmt-tab { padding: 6px 10px; font-size: .82rem; }
}
.fmt-tabs::-webkit-scrollbar { display: none; }
.fmt-tab { flex: none; display: flex; flex-direction: column; align-items: flex-start; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); text-align: left; cursor: pointer; }
.fmt-tab span { font-weight: 700; font-size: .9rem; }
.fmt-tab small { color: var(--muted); font-weight: 600; }
.fmt-tab[aria-selected="true"] { background: var(--chip-on); color: var(--chip-on-ink); border-color: transparent; }
.fmt-tab[aria-selected="true"] small { color: inherit; opacity: .75; }
.fmt-head { margin: 12px 0; font-size: .92rem; }
.comp-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .comp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.comp-box { min-width: 0; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.comp-grid--top { margin-bottom: 12px; }

/* Small one-series line charts: hover, tap or focus a point for its value */
.spark { display: block; width: 100%; height: auto; margin: 4px 0 2px; overflow: visible; }
.spark__line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark__base { stroke: var(--line); stroke-width: 1; }
.spark__end, .spark__dot { fill: var(--series-1); stroke: var(--surface-2); stroke-width: 2; }
.spark__dot { opacity: 0; pointer-events: none; }
.spark__hit { fill: transparent; cursor: help; outline: none; }
.spark__hit:hover + .spark__dot, .spark__hit:focus-visible + .spark__dot, .spark__hit[aria-describedby] + .spark__dot { opacity: 1; }
.spark__axis { display: flex; justify-content: space-between; gap: 8px; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Most common build */
.build { min-width: 0; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.build__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.build__head h3 { margin: 0; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.build__facts { display: grid; gap: 4px; margin: 0; }
.build__facts div { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; }
.build__facts dt { color: var(--muted); }
.build__facts dd { margin: 0; font-weight: 700; text-align: right; }
.build__moves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.build__moves li { padding: 6px 8px; border-radius: 10px; background: var(--surface); font-size: .86rem; font-weight: 600; }
.build .fine { margin-top: 8px; }

/* In-game ladder */
/* After the in-game ladder: Smogon's stats on Showdown, its Champions formats first, the rest folded away */
.sd-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin: 18px 0 8px; }
.sd-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; font-weight: 800; }
.sd-head .muted { font-size: .82rem; }
.sd-mega { margin: 0 0 10px; font-size: .9rem; font-weight: 700; }
.sd-mega a { display: inline-flex; align-items: center; gap: 6px; }
.sd-other { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.sd-other > summary { cursor: pointer; color: var(--muted); font-size: .88rem; font-weight: 700; margin-bottom: 10px; }
.sd-other > summary small { margin-left: 4px; font-weight: 600; }
.ladder { margin: 4px 0 16px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); }
.ladder__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ladder__head h3 { margin: 0; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ladder__grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ladder__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ladder__card { min-width: 0; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.ladder__card h4 { margin: 0; font-size: .82rem; font-weight: 700; color: var(--muted); }
.ladder__rank { margin: 2px 0 4px; }
.ladder__rank b { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.ladder__picks { margin: 6px 0 0; font-size: .84rem; }
.ladder[data-show="week"] [data-win="month"], .ladder[data-show="month"] [data-win="week"] { display: none; }
.delta { font-size: .8rem; font-weight: 700; color: var(--muted); }
.delta--up { color: var(--good-ink); }
.delta--down { color: var(--bad-ink); }
/* Smogon tables: the month's change is only known at the page's own rating, so other ratings don't show it */
.is-other-cut .delta { visibility: hidden; }

/* Replica Team codes */
.replica { margin-top: 16px; }
.replica h3 { margin: 0 0 8px; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.replica__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .replica__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.replica__team { min-width: 0; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.replica__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.replica__top .muted { font-size: .8rem; }
.replica__mons { display: flex; flex-wrap: wrap; gap: 2px; margin: 8px 0; }
.replica__mon img { display: block; width: 44px; height: 44px; image-rendering: pixelated; }
.replica__code { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: .86rem; }
.replica__code code { padding: 4px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-family: var(--pixel); font-size: .8rem; letter-spacing: .08em; }
.pl { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 8px; font-size: .9rem; }
.pl__label { min-width: 0; display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.pl__label b { flex: none; }
.pl__label .muted { min-width: 0; }
.pl__label a { display: inline-flex; align-items: center; gap: 4px; color: inherit; font-weight: 600; text-decoration: none; }
.pl__label a:hover { color: var(--link); }
.pl__label img { width: 32px; height: 32px; margin: -6px 0; image-rendering: pixelated; flex: none; }
.pl__val { font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.pl__bar { grid-column: 1 / -1; position: relative; height: 4px; border-radius: 4px; overflow: hidden; background: var(--line); }
.pl__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--red); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tc); flex: none; }

/* ---------- evolution ---------- */
/* Each stage is a card like the Pokédex list's, and the arrow into it says how it evolves, with the icon of any item it
   needs. Branches split off their parent on a line of their own, so they never read as a chain. Megas and Primal forms,
   a change in battle rather than an evolution, come in on a dashed arrow. Narrow cards run down the page, branches
   indented under their parent; wide ones run across (sized by the number of stages, --n), and three or more last
   stages (Eevee's eight) hang side by side from a bar under their parent. */
.evo { container: evo / inline-size; --evo-ink: color-mix(in srgb, var(--text) 26%, var(--line)); }
.evo-tree, .evo-next { list-style: none; margin: 0; padding: 0; }
.evo-node { position: relative; }
.evo-node--mega, .evo-node--primal, .evo-next--battle { --evo-dash: dashed; }
.evo-note { margin: 0 0 12px; color: var(--muted); font-size: .9rem; }
.evo-mon {
  position: relative; display: grid; grid-template: "img num" 1fr "img name" auto "img types" 1fr / 64px minmax(0, 1fr);
  column-gap: 12px; max-width: 360px; padding: 6px 12px 6px 6px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow); color: var(--text); text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.evo-mon__img { grid-area: img; position: relative; display: grid; place-items: center; height: 64px; border-radius: 12px; background: var(--sprite-bg); }
.evo-mon__img img { position: relative; width: 64px; height: 64px; }
.evo-mon__num { grid-area: num; align-self: end; font-family: var(--pixel); font-size: .6rem; color: var(--muted); }
.evo-mon__name { grid-area: name; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; text-wrap: balance; }
.evo-mon .types { grid-area: types; align-self: start; gap: 4px; margin-top: 3px; }
.evo-mon .type--sm { padding: 0 5px; font-size: .66rem; }
/* With the Grid sprite background, the Pokédex screen behind each sprite, as in the list */
html[data-listbg="grid"] .evo-mon__img {
  background-color: var(--lcd); background-image: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .22), transparent 65%);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .14);
}
html[data-listbg="grid"] .evo-mon__img::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(var(--lcd-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lcd-grid) 1px, transparent 1px);
  background-size: 14px 14px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, transparent 25%, #000 90%); mask-image: radial-gradient(ellipse at 50% 45%, transparent 25%, #000 90%);
}
.evo-mon.mega-ring { margin: -1px 0; } /* the ring's wider border stays inside the card's column */
.evo-mon--primal { border-style: dashed; border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
/* Pointed at with a mouse, or focused, a card lifts and its Pokémon grows and plays its animation (app.js), as in the
   Pokédex list; a Mega's ring glows */
@media (hover: hover) {
  .evo-mon:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -6px rgba(40, 25, 10, .3); }
  .evo-mon:not(.mega-ring):hover { border-color: color-mix(in srgb, var(--text) 18%, var(--line)); }
  .evo-mon.mega-ring:hover { box-shadow: 0 10px 28px -6px color-mix(in srgb, #6c74cc 45%, transparent); }
  .evo-mon:hover .msprite { transform: scale(1.18); }
}
.evo-mon:focus-visible { transform: translateY(-2px); }
.evo-mon.is-current { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent), var(--shadow); }
.evo-mon.mega-ring.is-current { border-color: transparent; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--red); }
@media (prefers-reduced-motion: reduce) { .evo-mon { transition: none; } }
/* How it evolves: a chip on the arrow, each way on a line of its own, an item's icon before it (over it on a narrow
   arrow: the eight under Eevee, a long line on a smaller screen) */
.evo-step { container: evo-step / inline-size; position: relative; display: flex; align-items: center; }
@container evo-step (width < 150px) {
  .evo-how { flex-direction: column; gap: 2px; text-align: center; }
  .evo-step__kind { flex-wrap: wrap; justify-content: center; text-align: center; }
}
.evo-step__how {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 100%;
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  font-size: .75rem; font-weight: 600; line-height: 1.3;
}
.evo-step--battle .evo-step__how { border-style: dashed; border-color: color-mix(in srgb, var(--text) 28%, var(--line)); }
.evo-how { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 20px; }
.evo-how > span:last-child { min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.evo-how__ico { display: grid; place-items: center; flex: none; width: 20px; height: 20px; }
.evo-how__ico .item-ico { width: 30px; height: 30px; margin: -5px; }
.evo-how__ico .i-mega { width: 18px; height: 18px; }
/* An item's name wraps to a line of its own before it breaks ("Use / Thunder Stone") */
.evo-how__item { display: inline-block; max-width: 100%; }
.evo-how a { color: inherit; text-decoration: underline color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
.evo-how a:hover { color: var(--link); text-decoration-color: currentColor; }
.evo-how--from { color: var(--muted); font-weight: 500; }
.evo-or { font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.evo-step__kind {
  display: flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 800; letter-spacing: .04em; line-height: 1.2;
  text-transform: uppercase; color: var(--muted);
}
.evo-step__kind .i-mega { width: 14px; height: 14px; }
/* The lines: drawn by the arrows (::before, the head ::after), the branches' spine (::before) and the stub from a parent
   to its branches (wide: .evo-next::before); dashed into Megas and Primal forms */
.evo-step::before, .evo-next--split > .evo-node::before {
  content: ""; position: absolute; border: 0 var(--evo-dash, solid) var(--evo-ink);
}
.evo-step::after { content: ""; position: absolute; background: var(--evo-ink); }
@container evo (width < 900px) {
  /* Down the page: an arrow from each Pokémon's sprite (--x, its middle) to the next card, the way beside it;
     branches indented (--indent), each on its own arm of a line down from their parent */
  .evo-tree { --x: 38px; --indent: 24px; width: fit-content; max-width: 100%; margin: 0 auto; }
  .evo-mon { width: 360px; max-width: 100%; }
  .evo-step { min-height: 46px; margin-left: var(--x); padding: 8px 0 14px 18px; }
  .evo-step::before { left: -1px; top: 0; bottom: 7px; border-left-width: 2px; }
  .evo-step::after { left: -5px; bottom: 0; width: 10px; height: 8px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .evo-next--split { margin-left: var(--x); }
  .evo-next--split > .evo-node { padding-left: var(--indent); }
  .evo-next--split > .evo-node::before { left: -1px; top: 0; bottom: 0; border-left-width: 2px; }
  .evo-next--split > .evo-node:last-child::before { bottom: auto; height: 25px; }
  .evo-next--split > .evo-node > .evo-step { min-height: 0; margin-left: 0; padding: 8px 0 6px; }
  .evo-next--split > .evo-node > .evo-step::before {
    left: calc(-1 * var(--indent)); right: auto; top: 23px; bottom: auto; width: calc(var(--indent) - 8px); border-left-width: 0; border-top-width: 2px;
  }
  .evo-next--split > .evo-node > .evo-step::after { left: -9px; top: 19px; bottom: auto; width: 8px; height: 10px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
}
/* The smallest phones: branches of branches (Raichu's Megas) step in less, so their cards keep room for a name */
@container evo (width < 300px) {
  .evo-tree { --x: 24px; --indent: 18px; }
}
@container evo (width >= 900px) {
  /* Across: the stages in columns, every card and arrow the same width so the columns line up; the arrows share
     what's left of the card's width (between 120 and 200 px) */
  .evo-tree {
    --card: 124px; --stub: 10px; /* (2 px spare for a Mega ring's wider border at the end of the line) */
    --step: clamp(120px, (100cqi - 2px - var(--n) * var(--card) - (var(--n) - 1) * var(--stub)) / (var(--n) - 1), 200px);
    display: flex; justify-content: safe center;
  }
  .evo-node { display: flex; align-items: center; }
  .evo-next { position: relative; display: flex; flex-direction: column; margin-left: var(--stub); }
  .evo-next::before {
    content: ""; position: absolute; top: 50%; left: calc(-1 * var(--stub)); width: var(--stub); margin-top: -1px;
    border: 0 var(--evo-dash, solid) var(--evo-ink); border-top-width: 2px;
  }
  .evo-next > .evo-node { padding: 6px 0; }
  .evo-next--split > .evo-node::before { left: -1px; top: 0; bottom: 0; border-left-width: 2px; }
  .evo-next--split > .evo-node:first-child::before { top: 50%; }
  .evo-next--split > .evo-node:last-child::before { bottom: 50%; }
  .evo-step { flex: none; justify-content: center; width: var(--step); padding: 0 12px 0 4px; }
  .evo-step::before { left: 0; right: 6px; top: 50%; margin-top: -1px; border-top-width: 2px; }
  .evo-step::after { right: 0; top: 50%; width: 8px; height: 10px; margin-top: -5px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .evo-step__how { align-items: center; text-align: center; }
  .evo-mon { display: flex; flex-direction: column; align-items: center; flex: none; width: var(--card); max-width: none; padding: 8px 6px 10px; text-align: center; }
  .evo-mon__img { align-self: stretch; height: 88px; margin-bottom: 4px; }
  .evo-mon__img img { width: 96px; height: 96px; }
  .evo-mon.mega-ring { width: calc(var(--card) + 2px); margin: -1px; }
  .evo-mon__num, .evo-mon .types { align-self: center; }
  .evo-mon__name { font-size: .92rem; }
  .evo-mon .types { justify-content: center; gap: 3px; margin-top: 4px; }
  /* Three or more last stages: side by side under their parent, each dropping from a bar with its own arrow */
  .evo-node--fan { flex-direction: column; }
  .evo-node--fan > .evo-next {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, var(--card)); justify-content: center; column-gap: 10px;
    width: 100cqi; margin: 22px 0 0;
  }
  .evo-node--fan > .evo-next::before { top: -22px; left: 50%; width: 0; height: 22px; margin: 0 0 0 -1px; border-top-width: 0; border-left-width: 2px; }
  .evo-node--fan > .evo-next > .evo-node { flex-direction: column; align-items: stretch; padding: 0; }
  .evo-node--fan > .evo-next > .evo-node::before { left: -5px; right: -5px; top: 0; bottom: auto; border-left-width: 0; border-top-width: 2px; }
  .evo-node--fan > .evo-next > .evo-node:first-child::before { left: 50%; }
  .evo-node--fan > .evo-next > .evo-node:last-child::before { right: 50%; }
  .evo-node--fan .evo-step { flex: 1 0 auto; flex-direction: column; justify-content: flex-start; width: auto; padding: 14px 0 18px; }
  .evo-node--fan .evo-step::before { left: 50%; right: auto; top: 0; bottom: 8px; margin: 0 0 0 -1px; border-top-width: 0; border-left-width: 2px; }
  .evo-node--fan .evo-step::after { left: 50%; right: auto; top: auto; bottom: 0; width: 10px; height: 8px; margin: 0 0 0 -5px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .evo-node--fan .evo-next .evo-mon { width: auto; }
}
/* Into Megas and Primal forms the dashes carry a soft light toward the form every few seconds, then rest. A mask
   draws the dashes, so the light shows only on them; each line says which way it runs (--evo-dir, across by default)
   and starts a little after the one before it, so the light seems to travel from the Pokémon to its Mega. */
:is(.evo-next--battle, .evo-next--split > :is(.evo-node--mega, .evo-node--primal), :is(.evo-node--mega, .evo-node--primal) > .evo-step)::before {
  --evo-glow: color-mix(in srgb, #7b83ff 80%, var(--text));
  border-color: transparent;
  background: linear-gradient(var(--evo-dir, 90deg), transparent 42%, var(--evo-glow) 50%, transparent 58%) var(--evo-ink);
  background-origin: border-box; background-repeat: no-repeat; background-size: var(--evo-size, 300% 100%);
  -webkit-mask: repeating-linear-gradient(var(--evo-dir, 90deg), #000 0 5px, transparent 5px 9px) border-box;
  mask: repeating-linear-gradient(var(--evo-dir, 90deg), #000 0 5px, transparent 5px 9px) border-box;
  animation: var(--evo-anim, evo-flow-x) 3.2s ease-in-out var(--evo-delay, 0s) infinite;
}
@keyframes evo-flow-x { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes evo-flow-y { from { background-position: 0 100%; } to { background-position: 0 0; } }
@container evo (width < 900px) {
  /* Down the page: the lines run down, and a branch's arm runs across to its card */
  :is(.evo-node--mega, .evo-node--primal) > .evo-step::before, .evo-next--split > :is(.evo-node--mega, .evo-node--primal)::before {
    --evo-dir: 180deg; --evo-size: 100% 300%; --evo-anim: evo-flow-y;
  }
  .evo-next--split > :is(.evo-node--mega, .evo-node--primal) > .evo-step::before {
    --evo-dir: 90deg; --evo-size: 300% 100%; --evo-anim: evo-flow-x; --evo-delay: .4s;
  }
}
@container evo (width >= 900px) {
  /* Across: the stub, then the spine out from the middle (up to the first branch, down to the last), then the arrow */
  .evo-next--split > :is(.evo-node--mega, .evo-node--primal)::before { --evo-dir: 180deg; --evo-size: 100% 300%; --evo-anim: evo-flow-y; --evo-delay: .25s; }
  .evo-next--split > :is(.evo-node--mega, .evo-node--primal):first-child::before { animation-direction: reverse; }
  :is(.evo-node--mega, .evo-node--primal) > .evo-step::before { --evo-delay: .5s; }
  .evo-node--fan > .evo-next > :is(.evo-node--mega, .evo-node--primal)::before { --evo-dir: 90deg; --evo-size: 300% 100%; --evo-anim: evo-flow-x; }
  .evo-node--fan :is(.evo-node--mega, .evo-node--primal) > .evo-step::before { --evo-dir: 180deg; --evo-size: 100% 300%; --evo-anim: evo-flow-y; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.evo-next--battle, .evo-next--split > :is(.evo-node--mega, .evo-node--primal), :is(.evo-node--mega, .evo-node--primal) > .evo-step)::before { animation: none; }
}

/* ---------- moves ---------- */
.moves__controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.moves__controls .seg { align-self: center; }
@media (max-width: 420px) { .moves__controls .seg button { padding: 6px 9px; } }
.select { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding-left: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.select:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.select:focus-within { border-color: var(--focus); }
.select span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
/* Dropdowns. Browsers that can style the whole list (Chrome, Edge) get a themed panel; the rest get
   their own list in the page's colours instead of a plain white one. */
.select select {
  min-width: 0; max-width: 100%; padding: 9px 10px 9px 2px; border: 0; font-weight: 600; cursor: pointer;
  background-color: var(--surface-2); color: var(--text);
}
.select select:focus-visible { outline: none; }
.select option { background-color: var(--surface); color: var(--text); }
/* Type pickers: each type in its own colour, and the picker itself while it filters by one. */
.select option.opt-type { background-color: var(--tc); color: var(--tt, #fff); }
.select.is-typed { background: var(--tc); border-color: transparent; }
.select.is-typed span, .select.is-typed select, .select.is-typed select::picker-icon { color: var(--tt, #fff); }
.select.is-typed select { background-color: transparent; }
@supports (appearance: base-select) {
  .select select, .select select::picker(select) { appearance: base-select; }
  .select select { display: flex; align-items: center; gap: 8px; padding: 9px 12px 9px 2px; background: transparent; }
  .select select::picker-icon {
    content: ""; width: 14px; height: 14px; background: currentColor; color: var(--muted); transition: rotate .2s;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .select select:open::picker-icon { rotate: 180deg; }
  .select select::picker(select) {
    margin-top: 6px; padding: 6px; max-height: min(60vh, 420px); overflow-y: auto; scrollbar-width: thin;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text);
    box-shadow: var(--shadow), 0 16px 40px rgba(0, 0, 0, .18);
    opacity: 0; translate: 0 -4px; transition: opacity .15s, translate .15s, overlay .15s allow-discrete, display .15s allow-discrete;
  }
  .select select:open::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style { .select select:open::picker(select) { opacity: 0; translate: 0 -4px; } }
  .select option { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: transparent; font-weight: 600; cursor: pointer; }
  .select option:hover, .select option:focus-visible { background: var(--surface-2); outline: none; }
  .select option:checked { background: var(--chip-on); color: var(--chip-on-ink); }
  .select option::checkmark { order: 1; margin-left: auto; content: "✓"; }
  .select optgroup { font-weight: 800; color: var(--muted); }
  .select option.opt-type { margin: 4px 0; border-radius: 999px; background: var(--tc); color: var(--tt, #fff); text-shadow: 0 1px 1px rgba(0, 0, 0, .28); }
  .select option.opt-type:hover, .select option.opt-type:focus-visible { background: color-mix(in srgb, var(--tc) 82%, #fff); }
  .select option.opt-type:checked { background: var(--tc); color: var(--tt, #fff); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
}
@media (prefers-reduced-motion: reduce) {
  .select select::picker(select), .select select::picker-icon { transition: none; }
}
.input { flex: 1; min-width: 150px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
/* The move list scrolls inside a fixed height; shadows at its top and bottom edges show there's more */
.moves__list {
  max-height: min(72vh, 760px); margin-top: 6px; padding-right: 4px; overflow-y: auto; scrollbar-width: thin; transition: opacity .2s;
  background:
    linear-gradient(var(--surface) 30%, transparent) top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--surface) 70%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .25), transparent) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .25), transparent) bottom / 100% 10px no-repeat scroll;
}
.moves__list.is-loading { opacity: .45; }
.mv-group { margin-top: 14px; }
.mv-group h3 { display: flex; align-items: center; gap: 8px; }
.mv-group__count { padding: 0 8px; border-radius: 999px; background: var(--chip); font-size: .7rem; }
.mv-head { display: none; }
.mv {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "lv main type" "lv nums cls";
  align-items: center; gap: 4px 10px; padding: 9px 2px; border-top: 1px solid var(--line);
}
.mv__lv { grid-area: lv; align-self: start; padding: 6px 2px; border-radius: 8px; background: var(--surface-2); text-align: center; font-family: var(--pixel); font-size: .7rem; color: var(--muted); }
.mv__main { grid-area: main; min-width: 0; }
.mv__name { display: block; font-weight: 700; }
a.mv__name { color: var(--text); text-decoration: none; }
a.mv__name:hover { color: var(--link); text-decoration: underline; }
.mv__fx { display: block; margin-top: 1px; color: var(--muted); font-size: .8rem; line-height: 1.35; }
html[data-fx="off"] .mv__fx { display: none; }
.mv__type { grid-area: type; justify-self: end; }
.cls { grid-area: cls; justify-self: end; padding: 2px 7px; border-radius: 6px; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.cls--physical { background: var(--phys-bg); color: var(--phys-ink); }
.cls--special { background: var(--spec-bg); color: var(--spec-ink); }
.cls--status { background: var(--chip); color: var(--muted); }
.mv__nums { grid-area: nums; display: flex; gap: 12px; font-size: .82rem; font-variant-numeric: tabular-nums; }
.mv__nums span::before { content: attr(data-label) " "; font-size: .7rem; font-weight: 600; color: var(--muted); }
@media (min-width: 760px) {
  .mv, .mv-head { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 6.2rem 4.4rem 10rem; grid-template-areas: "lv main type cls nums"; gap: 12px; }
  .mv-head {
    position: sticky; top: 0; z-index: 1; padding: 6px 2px; background: var(--surface);
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  }
  /* Column headers sort the list */
  .mv-head button {
    padding: 2px 0; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit;
    letter-spacing: inherit; text-align: inherit; cursor: pointer;
  }
  .mv-head button:hover, .mv-head button.is-active { color: var(--text); }
  .mv-head button.is-active::after { content: " ▾"; }
  .mv__type, .cls { justify-self: start; }
  .mv__nums { display: grid; grid-template-columns: repeat(3, 1fr); text-align: right; }
  .mv__nums span::before { content: none; }
}

/* ---------- lore ---------- */
.dexnums { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.form-note { margin: 12px 0 0; font-size: .9rem; color: var(--muted); }
.form-note b { color: var(--text); }
.lore-sub { margin: 18px 0 8px; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.world-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.world-names div { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.world-names dt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.world-names dd { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.world-names dd .say-btn { margin: -4px -4px -4px 0; }
.dexnum { display: inline-flex; flex-direction: column; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); font-family: var(--pixel); font-size: .85rem; }
.dexnum small { font-family: var(--font); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.entries { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.entries li { padding: 12px 14px; border-radius: 14px; background: var(--lcd); color: var(--lcd-ink); border: 1px solid rgba(0, 0, 0, .08); }
.entries p { margin: 0; }
.entry__games { display: block; margin-top: 6px; font-family: var(--pixel); font-size: .64rem; opacity: .75; }
.entry__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.entry__foot .entry__games { margin-top: 0; }
.entry__foot .dex-entry__read { flex: none; padding: 3px 10px 3px 7px; }
.entries li.is-extra { display: none; }
.entries.is-expanded li.is-extra { display: block; }
.more-btn { margin-top: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-weight: 700; cursor: pointer; }

/* ---------- sprites ---------- */
.sprite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.sprite-grid--sm { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.sprite-fig { margin: 0; text-align: center; }
.sprite-fig__btn { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: center; cursor: pointer; }
.sprite-fig__box { position: relative; aspect-ratio: 1; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.sprite-fig__btn:hover .sprite-fig__box { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); }
.sprite-fig img { width: 86%; height: 86%; object-fit: contain; }
.sprite-fig img.is-pixel { width: 80%; height: 80%; image-rendering: pixelated; }
.sprite-fig__box.is-opaque img { width: 70%; height: 70%; border-radius: 4px; background: #fff; }
.anim-badge { position: absolute; top: 6px; right: 7px; font-size: .55rem; color: var(--red); }
.sprite-fig img.is-icon { width: 64%; height: 64%; }
.model-tile { font-family: var(--pixel); font-size: .6rem; color: var(--muted); text-transform: uppercase; }

/* ---------- stat calculator ---------- */
.calc { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.calc > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; list-style: none; cursor: pointer; font-weight: 800; }
.calc > summary::-webkit-details-marker { display: none; }
.calc > summary::before { content: "▸"; color: var(--red); transition: transform .2s; }
.calc[open] > summary::before { transform: rotate(90deg); }
.calc > summary small { flex-basis: 100%; padding-left: 16px; font-size: .78rem; font-weight: 500; color: var(--muted); }
.calc__body { display: grid; gap: 12px; margin-top: 12px; }
.calc__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.calc__note { font-size: .78rem; color: var(--muted); }
.select--num input { width: 4.2em; padding: 9px 10px 9px 2px; border: 0; background: transparent; font-weight: 600; }
.calc__presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.calc__presets > span { margin-right: 2px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.chip--preset { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 100%; text-align: left; white-space: normal; line-height: 1.25; border-radius: 12px; }
.chip--preset small { font-size: .68rem; font-weight: 500; color: var(--muted); }
.calc__rows { display: grid; gap: 8px; }
.calc-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 3.4rem 3rem; align-items: center; gap: 8px; }
.calc-row__label { display: flex; flex-direction: column; font-weight: 700; line-height: 1.1; }
.calc-row__label small { font-size: .68rem; font-weight: 500; color: var(--muted); }
.calc-range { width: 100%; min-width: 0; accent-color: var(--red); }
.calc-num { width: 100%; min-width: 0; padding: 6px 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); text-align: center; font-variant-numeric: tabular-nums; }
.calc-row__out { text-align: right; font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.calc-row__out.is-up { color: var(--red); }
.calc-row__out.is-up::after { content: "▲"; margin-left: 2px; font-size: .55rem; vertical-align: 3px; }
.calc-row__out.is-down { color: #3b7be0; }
.calc-row__out.is-down::after { content: "▼"; margin-left: 2px; font-size: .55rem; vertical-align: 3px; }
.calc__cols { display: none; }
.calc__body[data-mode="main"] .calc-row { grid-template-columns: 3.2rem minmax(0, 1fr) 3.4rem 2.8rem 3rem; }
.calc__foot { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; font-weight: 700; }
/* To the damage calculator with this Pokémon attacking */
.calc-go { display: inline-block; margin-top: 12px; font-size: .9rem; font-weight: 700; text-decoration: none; }
.calc-go:hover { text-decoration: underline; }
@media (max-width: 480px) {
  /* Too narrow for a slider plus EV and IV boxes: type the numbers instead. */
  .calc__body[data-mode="main"] .calc-range { display: none; }
  .calc__body[data-mode="main"] .calc-row { grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1fr) 3rem; }
  .calc__body[data-mode="main"] .calc__cols { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1fr) 3rem; gap: 8px; margin: 0 0 -6px; font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--muted); text-align: center; }
  .calc__body[data-mode="main"] .calc__cols span:first-child { grid-column: 2; }
}
.sprite-fig__cap { display: block; margin-top: 4px; font-size: .74rem; font-weight: 600; color: var(--muted); }
.fine--top { margin: 0 0 6px; }
.sub { margin: 20px 0 4px; font-size: .95rem; }
.gen-block h3 { margin: 12px 0 6px; }
/* Sprites on wide screens: each row is its label beside its tiles, and after four rows the rest wait behind
   "Show all" (app.js, remembered). Phones keep the stacked blocks. */
.sprites-more { display: none; }
@media (min-width: 760px) {
  .gen-block { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: start; column-gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
  .gen-block:first-child { padding-top: 2px; border-top: 0; }
  .gen-block h3 { margin: 8px 0 0; }
  .sprite-grid, .sprite-grid--sm { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  #sprites:not(.is-all) .gen-block--more { display: none; }
  .sprites-more { display: block; margin-top: 6px; }
}

/* ---------- breeding & locations ---------- */
.gender { min-width: 0; }
.gender__bar { display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #4c8df6 calc(100% - var(--f)), #f472b6 0); }
.gender__labels { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; font-size: .82rem; font-weight: 700; }
.gender-view {
  margin-top: 14px; padding: 12px; border-radius: 16px; color: var(--lcd-ink); background-color: var(--lcd);
  border: 2px solid color-mix(in srgb, var(--lcd-ink) 18%, transparent); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .1);
}
.gender-view__title { margin: 0 0 8px; font-family: var(--pixel); font-size: .6rem; text-transform: uppercase; letter-spacing: .03em; opacity: .8; }
.gender-view__pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gv { margin: 0; text-align: center; }
.gv__box { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; aspect-ratio: 1; border-radius: 12px; background: color-mix(in srgb, var(--lcd-ink) 6%, transparent); }
.gv__box img { width: 82%; height: 82%; object-fit: contain; }
.gv__box img.is-pixel { width: 70%; height: 70%; image-rendering: pixelated; }
.gv__box.is-loading::after { content: "Loading…"; position: absolute; top: 6px; right: 8px; font-family: var(--pixel); font-size: .55rem; animation: blink 1s steps(2, start) infinite; }
.gv figcaption { margin-top: 4px; font-size: .85rem; font-weight: 800; }
.gender-view__controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.gender-view__bar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--lcd-ink) 9%, transparent); }
.male { color: #3b7be0; } .female { color: #d6458f; }
.loc { padding: 10px 0; border-top: 1px solid var(--line); }
.loc:first-child { border-top: 0; padding-top: 0; }
.loc summary { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; cursor: pointer; }
.loc ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.loc li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; font-size: .9rem; }

/* ---------- customize sheet ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 8, 6, .45); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s;
}
.sheet.is-open { opacity: 1; visibility: visible; transition: opacity .2s; }
.sheet__panel {
  width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .3); transform: translateY(24px); transition: transform .25s;
}
.sheet.is-open .sheet__panel { transform: none; }
@media (min-width: 760px) { .sheet { align-items: center; } .sheet__panel { border-radius: 22px; } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; color: #fff; background: linear-gradient(180deg, var(--red), var(--red-2)); }
.sheet__head h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.sheet__head h2::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: radial-gradient(circle at 32% 30%, #e6f8ff 0 14%, #74cbff 26%, #1d8fe6 60%, #0b4f93); }
.sheet__body { overflow: auto; padding: 4px 18px 24px; overscroll-behavior: contain; }
.sheet__body section { padding: 14px 0; border-bottom: 1px solid var(--line); }
.sheet__body section:last-child { border-bottom: 0; }
.hint { margin: -4px 0 10px; font-size: .85rem; color: var(--muted); }
.opt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 6px 0; }
.opt > span { font-weight: 600; }
.layout-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.layout-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 12px; background: var(--surface-2); }
.layout-list label { flex: 1; display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.layout-list input { width: 20px; height: 20px; accent-color: var(--red); }
.row-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; }
.row-btn:disabled { opacity: .35; cursor: default; }
.text-btn, .link-btn { padding: 8px 0; border: 0; background: none; color: var(--link); font-weight: 700; cursor: pointer; }
body.sheet-open { overflow: hidden; }

/* ---------- index page ---------- */
.intro { padding: 24px 0 4px; }
.intro h1 { margin: 0; font-size: clamp(1.9rem, 6vw, 2.7rem); font-weight: 800; letter-spacing: -.02em; }
.intro p { max-width: 62ch; margin: 6px 0 0; color: var(--muted); }
.top { margin: 20px 0 4px; }
.top__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.top__head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.top__head .muted { font-size: .85rem; }
.top__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin: 10px 0 0; padding: 4px 0 10px; }
.top__list a { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 12px 6px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); text-decoration: none; }
@media (max-width: 520px) {
  /* Phones: one row that scrolls sideways (the Pokédex itself starts on the first screen), names kept whole */
  .top__list {
    display: flex; gap: 6px; margin-inline: -16px; padding: 4px 16px 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .top__list::-webkit-scrollbar { display: none; }
  .top__list > li { flex: 0 0 88px; scroll-snap-align: start; }
  .top__list a { padding: 10px 2px 8px; border-radius: 12px; }
  .top__list img { width: 48px; height: 48px; }
  .top__name { font-size: .72rem; overflow-wrap: normal; }
  .top__pct { font-size: .7rem; }
  .top__rank { top: 4px; left: 6px; font-size: .58rem; }
}
.top__rank { position: absolute; top: 6px; left: 9px; z-index: 1; font-family: var(--pixel); font-size: .7rem; color: var(--red); }
.top__img { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 4; margin-bottom: 6px; border-radius: 10px; }
.top__list img { width: 64px; height: 64px; }
.top__name { font-weight: 700; font-size: .84rem; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.top__pct { font-size: .78rem; font-weight: 600; color: var(--muted); }

.list-tools { display: grid; gap: 10px; margin: 18px 0 10px; min-width: 0; scroll-margin-top: calc(var(--header-h) + 12px); }
/* A list's search (and sort) stays under the header while the list scrolls */
.sticky-tools {
  position: sticky; top: var(--header-h); z-index: 30; margin: 14px -16px 0; padding: 8px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.sticky-tools + .list-tools { margin-top: 8px; }
.mon-list, .rank-list, .ab-list { scroll-margin-top: calc(var(--header-h) + var(--tools-h, 0px) + 8px); }
.list-tools__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.list-tools__row--split { justify-content: space-between; flex-wrap: wrap; }
.list-tools__selects { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
/* The list's search: names as you type, plus type / ability / move / egg group filters it suggests */
.smart { display: grid; gap: 8px; min-width: 0; }
.smart__box { position: relative; display: flex; align-items: center; }
.smart__box > .i { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.smart__box input {
  width: 100%; height: 46px; padding: 0 14px 0 42px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 1rem; box-shadow: var(--shadow); -webkit-appearance: none; appearance: none;
}
.smart__box input::placeholder { color: var(--muted); }
.smart__box input:focus { outline: none; border-color: var(--focus); }
.smart__box .search__results { z-index: 20; }
.smart__active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.smart__active[hidden] { display: none; }
.smart__chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* The Pokédex: search and a Filters button on one bar; the rest of the filters wait in the panel it opens */
.smart__bar { display: flex; gap: 8px; min-width: 0; }
.smart__bar .smart__box { flex: 1; min-width: 0; }
.filters-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none; height: 46px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-weight: 700;
  box-shadow: var(--shadow); cursor: pointer;
}
.filters-btn:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.filters-btn[aria-expanded="true"] { background: var(--chip-on); color: var(--chip-on-ink); border-color: transparent; }
.filters-btn .i { width: 18px; height: 18px; }
.filters-btn__n {
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: .72rem; font-weight: 800;
}
.filters-btn__n[hidden] { display: none; }
@media (max-width: 520px) {
  .filters-btn { padding: 0 12px; }
  .filters-btn > span { display: none; } /* the icon and its count say it on a phone */
}
.fpanel {
  display: grid; gap: 16px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow); max-height: calc(100dvh - var(--header-h) - 96px); overflow: auto; overscroll-behavior: contain;
}
.fpanel[hidden] { display: none; }
.fpanel__sec h3 { margin: 0 0 8px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fpanel__sec h3 small { margin-left: 4px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.ftoggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
/* A filter that's on or off: a switch with its name and, right under it, what it does */
.ftoggle {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.ftoggle:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.ftoggle__switch {
  position: relative; flex: none; width: 36px; height: 20px; margin-top: 1px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 22%, transparent); transition: background .15s;
}
.ftoggle__switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s;
}
.ftoggle[aria-pressed="true"] { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); }
.ftoggle[aria-pressed="true"] .ftoggle__switch { background: var(--red); }
.ftoggle[aria-pressed="true"] .ftoggle__switch::after { transform: translateX(16px); }
.ftoggle__text { display: grid; gap: 2px; min-width: 0; }
.ftoggle__text b { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ftoggle__text b small { color: var(--muted); font-weight: 600; }
.ftoggle__text > small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .ftoggle__switch, .ftoggle__switch::after { transition: none; } }
.fpanel__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.fpanel__done {
  margin-top: 10px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--red); color: #fff;
  font: inherit; font-weight: 700; cursor: pointer;
}
.fpanel__foot .link-btn { margin-top: 10px; }
/* The lists' filter bar (rankings, abilities, moves, items): the line under it with the ladder or skill level and Sort */
.fbar-row { margin: 10px 0 2px; }
.fbar-row:empty { display: none; }
/* Under the bar: how many, how they're sorted, and how they're shown */
.list-meta--tools { flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.list-meta__end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* "Also matching: + 12 Megas · + 5 regional forms": forms a filter matches whose switch is off, on a line of its own */
.list-also { order: 3; flex-basis: 100%; font-size: .84rem; font-weight: 600; }
.list-also .link-btn { font-size: inherit; }
.select--sm select { padding-top: 6px; padding-bottom: 6px; font-size: .88rem; }
/* An active filter: its name (tap to flip it to "not") and × (remove) */
.fchip {
  display: inline-flex; align-items: center; border-radius: 999px;
  background: var(--chip-on); color: var(--chip-on-ink); font-weight: 700; font-size: .86rem;
}
.fchip[class*=" t-"] { background: var(--tc); color: var(--tt, #fff); text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.fchip small { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .72; }
.fchip__main {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 4px 5px 12px; border: 0; border-radius: 999px 0 0 999px;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.fchip__x {
  display: grid; place-items: center; width: 20px; height: 20px; margin: 0 6px 0 2px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .16); color: inherit; font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
}
.fchip__x:hover { background: rgba(0, 0, 0, .3); }
/* The whole filter in words over the chips, and the chips grouped by kind (the kind named once) */
.fsummary { flex-basis: 100%; margin: 2px 0 0; font-size: .92rem; line-height: 1.45; color: var(--muted); }
.fsummary b { color: var(--text); font-weight: 700; }
.fgroup {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 16px;
  background: color-mix(in srgb, var(--chip) 65%, transparent);
}
.fgroup__label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fchip__name { padding: 5px 4px 5px 12px; }
.fchip__mode + .fchip__name { padding-left: 4px; }
/* ✓ wanted / ⊘ left out: tap to switch */
.fchip__mode {
  display: grid; place-items: center; width: 22px; height: 22px; margin-left: 5px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .16); color: inherit; font: inherit; font-size: .78rem; line-height: 1; cursor: pointer;
}
.fchip__mode:hover { background: rgba(0, 0, 0, .3); }
.fchip--not .fchip__mode { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
/* Left out: hollow with a red edge and a red "Not" / "Doesn't learn" */
.fchip--not, .fchip--not[class*=" t-"] { background: var(--surface); color: var(--text); text-shadow: none; box-shadow: inset 0 0 0 1.5px var(--red); }
.fchip--not small { color: var(--red); opacity: 1; }
.fchip--not .fchip__x { background: var(--chip); }
/* "or" / "and" between two filters of a kind: tap to switch */
.fconn {
  padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.fconn:hover { background: var(--chip); color: var(--text); }
/* A type's symbol on a dot of its colour (search suggestions) */
.sr-icon .dot--type { display: grid; place-items: center; width: 24px; height: 24px; background: var(--tc); }
.dot--type .ti { width: 15px; height: 15px; fill: var(--tt, #fff); }
.search__results .is-not > span { color: var(--red); }
.sr-tip { padding: 8px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; color: var(--muted); font-size: .78rem; }
.sr-tip kbd, .fpanel__hint kbd {
  padding: 0 5px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface-2); font: inherit; font-weight: 700; font-size: .74rem;
}
.fpanel__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; }
/* OR / AND: the word bold, what it means small after it */
.seg--logic button { font-weight: 800; letter-spacing: .03em; }
.seg--logic small { margin-left: 3px; font-weight: 500; letter-spacing: 0; opacity: .75; }
.fpanel__head h3 { margin: 0; }
.fpanel__hint { margin: 8px 0 0; color: var(--muted); font-size: .82rem; }
.fpanel__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.fpanel__label { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.seg--sm button { padding: 5px 11px; font-size: .8rem; }
/* Suggestions that aren't Pokémon: a colored dot where the sprite would be */
.search__results button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px;
  background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.search__results li[aria-selected="true"] button, .search__results button:hover { background: var(--surface-2); }
.search__results button > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-icon { display: grid; place-items: center; width: 40px; height: 32px; flex: none; }
.sr-icon .dot { width: 14px; height: 14px; }
.dot--abil { background: linear-gradient(135deg, #f5b301, #f97316); }
.dot--egg { background: #f2e3c6; box-shadow: inset 0 0 0 2px #c9a86a; }
.dot--item { background: linear-gradient(135deg, #a78bfa, #6d28d9); border-radius: 4px; }
.search__results .sr-kind { flex: none; font-family: inherit; font-size: .72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
/* A heading over each generation while the Pokédex is in National Dex order */
.gen-head { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin: 22px 0 2px; padding: 0 2px 8px; border-bottom: 2px solid var(--line); }
.gen-head:first-child { margin-top: 4px; }
.gen-head[hidden] { display: none; }
.gen-head h2 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.gen-head span { color: var(--muted); font-size: .86rem; font-weight: 600; }
.gen-head b { color: var(--text); }

/* Ad units (only present once AdSense is set up in render.py); the space is kept so nothing jumps */
.ad { margin: 16px 0; min-height: 132px; padding: 8px; border-radius: 14px; border: 1px dashed var(--line); text-align: center; }
.ad__label { display: block; margin-bottom: 4px; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
@media (max-width: 520px) {
  .chip-row--types { gap: 6px; }
  .chip-row--types .type-chip { padding: 4px 9px; font-size: .76rem; }
  .list-tools .chip { padding: 5px 10px; font-size: .8rem; }
}
/* Type filters wear their type's colour; a picked one fills in solid with a ring. */
.type-chip {
  flex: none; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .82rem; cursor: pointer; color: var(--text);
  background: color-mix(in srgb, var(--tc) 34%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--tc) 90%, transparent);
  transition: background .15s;
}
.type-chip:hover { background: color-mix(in srgb, var(--tc) 50%, var(--surface)); }
.type-chip[aria-pressed="true"] {
  background: var(--tc); color: var(--tt, #fff); border-color: transparent; text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--tc);
}
/* Left out ("not"): hollow, crossed through, with a dashed edge */
.type-chip.is-not {
  background: transparent; color: var(--muted); border-style: dashed; text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--red) 80%, transparent); text-decoration-thickness: 2px;
}
/* The type's symbol before its name: in its colour on a light chip, white on a picked (solid) one */
.type-chip { display: inline-flex; align-items: center; gap: 5px; }
.type-chip .ti { width: 15px; height: 15px; flex: none; fill: color-mix(in srgb, var(--tc) 80%, var(--text)); }
.type-chip[aria-pressed="true"] .ti { fill: currentColor; }
.type-chip.is-not .ti { opacity: .6; }
/* A small type pill inside other text (search suggestions) */
.type--xs { padding: 0 6px; font-size: .62rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .03em; vertical-align: 1px; box-shadow: none; }
.list-meta { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; color: var(--muted); font-size: .9rem; font-weight: 600; }

.mon-list { list-style: none; margin: 0 0 40px; padding: 0; }
.mon a { color: var(--text); text-decoration: none; }
.mon__num { font-family: var(--pixel); font-size: .66rem; color: var(--muted); }
.mon__name { font-weight: 700; overflow-wrap: anywhere; }
.mon__img { display: grid; place-items: center; }
/* Sprite size on the list (Sprites › S · M · L · XL): the sprite and, in the grid, the card around it */
html { --ls: 96px; --ls-col: 150px; --ls-row: 56px; --ls-phone: 72px; --ls-phone-cols: 3; }
html[data-listsize="s"] { --ls: 68px; --ls-col: 120px; --ls-row: 44px; --ls-phone: 54px; --ls-phone-cols: 4; }
html[data-listsize="l"] { --ls: 128px; --ls-col: 190px; --ls-row: 72px; --ls-phone: 108px; --ls-phone-cols: 2; }
html[data-listsize="xl"] { --ls: 168px; --ls-col: 236px; --ls-row: 88px; --ls-phone: 136px; --ls-phone-cols: 2; }
.mon__img img { width: var(--ls); height: var(--ls); }
/* Sprites in lists and rankings: pixel sprites stay crisp, big renders scale smoothly */
.msprite { object-fit: contain; image-rendering: pixelated; }
html[data-listsprite="home"] .msprite, html[data-listsprite="home-anim"] .msprite, html[data-listsprite="art"] .msprite { image-rendering: auto; }
.mon__stats { display: none; }
.mon-list[data-view="grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ls-col), 1fr)); gap: 12px; }
@media (max-width: 440px) {
  .mon-list[data-view="grid"] { grid-template-columns: repeat(var(--ls-phone-cols), minmax(0, 1fr)); gap: 8px; }
  .mon-list[data-view="grid"] a { padding: 6px 6px 8px; border-radius: 14px; }
  .mon-list[data-view="grid"] .mon__img { aspect-ratio: 1; margin-bottom: 4px; border-radius: 10px; }
  .mon-list[data-view="grid"] .mon__img img { width: var(--ls-phone); height: var(--ls-phone); }
  .mon-list[data-view="grid"] .mon__name { font-size: .8rem; line-height: 1.2; }
  .mon-list[data-view="grid"] .mon__num { font-size: .56rem; }
  .mon-list[data-view="grid"] .types { gap: 3px; }
  .mon-list[data-view="grid"] .type--sm { padding: 0 5px; font-size: .6rem; }
}
.mon-list[data-view="grid"] a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; padding: 10px 10px 12px; text-align: center;
  border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s;
}
/* The glow stays within the 14 px of room each card's row leaves it (below) */
.mon-list[data-view="grid"] a:hover, .mon-list[data-view="grid"] a:focus-visible {
  transform: translateY(-2px); border-color: color-mix(in srgb, var(--text) 18%, var(--line)); box-shadow: 0 6px 16px -6px rgba(40, 25, 10, .3);
}
.mon-list[data-view="grid"] .mon__img { position: relative; width: 100%; aspect-ratio: 5 / 4; margin-bottom: 6px; border-radius: 12px; background: var(--sprite-bg); }
/* Sprite backdrop: plain (white or black with the theme) or, with Grid, the Pokédex screen from the Pokémon pages */
html[data-listbg="grid"] .mon-list[data-view="grid"] .mon__img, html[data-listbg="grid"] .top__img {
  background-color: var(--lcd); background-image: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .22), transparent 65%);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .14);
}
html[data-listbg="grid"] .mon-list[data-view="grid"] .mon__img::before, html[data-listbg="grid"] .top__img::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(var(--lcd-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lcd-grid) 1px, transparent 1px);
  background-size: 14px 14px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, transparent 25%, #000 90%); mask-image: radial-gradient(ellipse at 50% 45%, transparent 25%, #000 90%);
}
.mon__img img, .top__img img { position: relative; }
.mon-list[data-view="grid"] .types { justify-content: center; margin-top: 4px; }
.mon-list[data-view="list"], .mon-list[data-view="stats"] { display: grid; gap: 6px; }
.mon-list[data-view="list"] a {
  display: grid; grid-template-columns: var(--ls-row) minmax(0, 1fr) auto; grid-template-areas: "img num meta" "img name name" "img abil abil";
  align-items: center; gap: 2px 12px; padding: 6px 12px 6px 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
/* The name with its types right beside it (in the grid they stack, centred) */
.mon__title { display: contents; }
.mon-list[data-view="list"] .mon__title, .mon-list[data-view="stats"] .mon__title {
  grid-area: name; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0;
}
.mon__meta, .mon__abil { display: none; }
.mon-list[data-view="list"] .mon__meta { grid-area: meta; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mon-list[data-view="list"] .mon__abil { grid-area: abil; display: block; color: var(--muted); font-size: .78rem; line-height: 1.3; }
/* Wide list rows also show the base stats at a glance */
@media (min-width: 900px) {
  .mon-list[data-view="list"] a {
    grid-template-columns: var(--ls-row) minmax(150px, 1fr) minmax(280px, 1.3fr) 214px; /* fixed last column keeps rows aligned */
    grid-template-areas: "img num stats meta" "img name stats meta" "img abil stats meta";
  }
  .mon-list[data-view="list"] .mon__meta { flex-direction: column; align-items: flex-end; gap: 4px; }
  .mon-list[data-view="list"] .mon__stats { grid-area: stats; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .mon-list[data-view="list"] .mon__stats > i { display: grid; padding: 3px 0; font-size: .82rem; line-height: 1.15; }
  .mon-list[data-view="list"] .mon__stats > i::before { color: var(--muted); font-size: .6rem; font-weight: 700; text-transform: uppercase; }
  .mon-list[data-view="list"] .mon__stats > i:last-child { display: none; }
  .mon-list[data-view="list"] .mon__stats > i:nth-child(1)::before { content: "HP"; }
  .mon-list[data-view="list"] .mon__stats > i:nth-child(2)::before { content: "Atk"; }
  .mon-list[data-view="list"] .mon__stats > i:nth-child(3)::before { content: "Def"; }
  .mon-list[data-view="list"] .mon__stats > i:nth-child(4)::before { content: "SpA"; }
  .mon-list[data-view="list"] .mon__stats > i:nth-child(5)::before { content: "SpD"; }
  .mon-list[data-view="list"] .mon__stats > i:nth-child(6)::before { content: "Spe"; }
}
.tier-badge { padding: 1px 7px; border-radius: 6px; background: var(--chip); font-size: .7rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
/* Smogon tiers on list cards only when switched on (Customize › Pokédex list), so they're not read as the ladder's */
html:not([data-listtiers="on"]) .mon__meta .tier-badge { display: none; }
.champ-badge {
  padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--text);
  font-size: .7rem; font-weight: 800; white-space: nowrap;
}
/* The Mega Stone mark: on the Show Megas switch and beside every Pokémon that can Mega Evolve */
.i-mega { width: 16px; height: 16px; flex: none; vertical-align: -2px; }
.mega-mark { display: inline-flex; margin-left: 5px; vertical-align: middle; }
.chip--mega { display: inline-flex; align-items: center; gap: 6px; }
.info-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: help;
}
.info-btn:hover { color: var(--text); background: var(--chip); }
.info-btn .i { width: 18px; height: 18px; }
/* The small (i) beside a label or heading */
.info-btn--sm { width: 22px; height: 22px; margin: -4px 0 -4px 1px; vertical-align: middle; }
.info-btn--sm .i { width: 15px; height: 15px; }
@media (pointer: coarse) {
  /* Touch screens: the small controls keep their look but get a tap area of at least 24px */
  .info-btn--sm, .abil-chip--sm, button.badge { position: relative; }
  .info-btn--sm::after, .abil-chip--sm::after, button.badge::after { content: ""; position: absolute; inset: -3px; }
  .abil-others summary, .mu-group--neutral summary { padding-block: 5px; }
}
.facts dt { display: flex; align-items: center; }
/* Long text made easy to read: short paragraphs at a comfortable width, the first a little larger, the rest of a
   long one behind "Read more" */
.wiki p, .bio-form__text p { max-width: 68ch; margin: 0 0 .75em; line-height: 1.6; }
.wiki p.lead { font-size: 1.05rem; }
.readmore > summary {
  display: inline-flex; margin-bottom: .75em; color: var(--link); font-weight: 700; cursor: pointer; list-style: none;
}
.readmore > summary::-webkit-details-marker { display: none; }
.readmore > summary::after { content: " ▾"; }
.readmore[open] > summary { display: none; }
/* Lore for each form: a card each, Megas in their turning colours, the form you're on marked */
.bio-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.bio-form { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.bio-form h4 { margin: 0 0 6px; font-size: .98rem; }
.bio-form h4 a { color: var(--text); }
.bio-form.is-current { box-shadow: 0 0 0 2px var(--red); }
.bio-form__text p:last-child { margin-bottom: 0; }
/* Mega Evolution's colours (the symbol's) turning around a border: always on a Mega's card, and on the card of a
   Pokémon that can Mega Evolve while it's pointed at or focused. Still for anyone who prefers less motion. */
@property --mega-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes mega-turn { to { --mega-turn: 360deg; } }
.mega-ring, .mon[data-mega] a, .mon a:has(.mega-mark):hover, .mon a:has(.mega-mark):focus-visible {
  border: 2px solid transparent; margin: -1px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              conic-gradient(from var(--mega-turn), #c79bd8, #6c74cc, #3e5ec0, #1db6e3, #2fb29b, #78c142, #e8ea5e, #c79bd8) border-box;
  animation: mega-turn 4s linear infinite;
}
.mon a:has(.mega-mark):hover, .mon[data-mega] a:hover { box-shadow: 0 10px 28px -6px color-mix(in srgb, #6c74cc 45%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .mega-ring, .mon[data-mega] a, .mon a:has(.mega-mark):hover, .mon a:has(.mega-mark):focus-visible { animation: none; --mega-turn: 135deg; }
}
/* Pointing at a sprite plays its animation and lifts it a little, growing upward so the name stays clear */
.msprite { transform-origin: 50% 85%; transition: transform .18s ease; }
@media (hover: hover) {
  .mon a:hover .msprite, .top__list a:hover .msprite, .rk__mon:hover .msprite, .mon-chip:hover .msprite { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) { .msprite { transition: none; } }
.mon__bst { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.mon__bst b { color: var(--text); font-variant-numeric: tabular-nums; }
/* Only rows near the screen are laid out, so the long list opens quickly. That clips each card to its row, so
   every row gets room around its card (the same padding taken back by a negative margin): for the border, which
   zooms such as 133% and 150% would otherwise shave on one side, and for the hover lift and glow. Taps in that room
   reach the card underneath. */
.mon-list > li.mon { content-visibility: auto; contain-intrinsic-size: auto 78px; padding: 4px; margin: -4px; pointer-events: none; }
.mon-list > li.mon > a { pointer-events: auto; }
.mon-list[data-view="grid"] > li.mon { contain-intrinsic-size: auto 238px; padding: 14px; margin: -14px; }
/* Pointed at or focused: list rows tint and pick up a stronger border (the grid's cards lift, above) */
.mon-list[data-view="list"] a, .mon-list[data-view="stats"] a { transition: background .12s, border-color .12s; }
.mon-list[data-view="list"] a:hover, .mon-list[data-view="list"] a:focus-visible,
.mon-list[data-view="stats"] a:hover, .mon-list[data-view="stats"] a:focus-visible {
  background: color-mix(in srgb, var(--chip) 55%, var(--surface)); border-color: color-mix(in srgb, var(--text) 24%, var(--line));
}
@media (prefers-reduced-motion: reduce) { .mon-list a { transition: none; } }
.mon-list[data-view="list"] .mon__img { grid-area: img; }
.mon-list[data-view="list"] .mon__img img { width: var(--ls-row); height: var(--ls-row); }
.mon-list[data-view="list"] .mon__num { grid-area: num; align-self: end; }
.mon-list[data-view="stats"] a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "img name" "img stats"; align-items: center; column-gap: 10px;
  padding: 6px 10px 8px 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.mon-list[data-view="stats"] .mon__img { grid-area: img; }
.mon-list[data-view="stats"] .mon__img img { width: 44px; height: 44px; }
.mon-list[data-view="stats"] .mon__num { display: none; }
.mon-list[data-view="stats"] .mon__name { font-size: .92rem; }
.mon-list[data-view="stats"] .mon__stats { grid-area: stats; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mon__stats > i {
  padding: 1px 0; border-radius: 6px; text-align: center; font-style: normal; font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--c, var(--s3)) 24%, transparent);
}
.mon__stats > i:last-child { background: var(--chip); } /* base stat total */
.list-head { display: none; }
.list-page:has(.mon-list[data-view="stats"]) .list-head {
  position: sticky; top: calc(var(--header-h) + var(--tools-h, 0px) - var(--lip)); z-index: 29; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px;
  padding: calc(var(--lip) + 6px) 10px 6px 4px; margin: 0 -2px 6px; background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.list-head > span:first-child { overflow: hidden; color: transparent; }
.list-head__stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.list-head__stats button { padding: 2px 0; border: 0; border-radius: 6px; background: none; font-size: .7rem; font-weight: 800; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.list-head__stats button.is-active { background: var(--chip-on); color: var(--chip-on-ink); }
@media (min-width: 760px) {
  .mon-list[data-view="stats"] a { grid-template-columns: 44px 220px minmax(0, 1fr); grid-template-areas: "img name stats"; }
  .list-page:has(.mon-list[data-view="stats"]) .list-head { grid-template-columns: 44px 220px minmax(0, 1fr); }
  .list-head > span:first-child { grid-column: span 2; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
}

/* ---------- rankings (Champions, Smogon) ---------- */
.rk-filter {
  width: 100%; max-width: 360px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); -webkit-appearance: none; appearance: none;
}
.rank-list { list-style: none; display: grid; gap: 6px; margin: 0 0 24px; padding: 0; }
.rank-list[data-mode="d"] [data-m="s"], .rank-list[data-mode="s"] [data-m="d"],
.hub[data-mode="d"] [data-m="s"], .hub[data-mode="s"] [data-m="d"] { display: none; }
/* Filters fold away on phones */
.rk-filters { display: grid; gap: 10px; }
.rk-filters summary { justify-self: start; padding: 6px 14px; border-radius: 999px; background: var(--chip); font-size: .85rem; font-weight: 700; cursor: pointer; }
.rk-filters[open] summary { margin-bottom: 2px; }
@media (min-width: 760px) { .rk-filters summary { display: none; } }
/* Season bar: the regulation and countdowns to the next dates */
.season { margin: 16px 0 4px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.season__reg { margin: 0; }
.season__events { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 0; padding: 0; }
.season__events li { padding: 5px 12px; border-radius: 999px; background: var(--surface-2); font-size: .85rem; }
.season .fine { margin-top: 8px; }
/* This week's movers */
.movers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
.movers__col { padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.movers__col h2 { margin: 0 0 6px; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.movers__col ol { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.movers__col a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-size: .85rem; }
.movers__col img { width: 36px; height: 36px; }
.movers__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.movers__col small { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .movers__col small { display: none; } }
/* Phones: the season on one line (the regulation and the next date) and the movers behind one button, so the
   ranking starts near the top */
.movers-box__btn { display: none; }
@media (max-width: 600px) {
  .season { display: flex; align-items: center; gap: 8px; padding: 8px 12px; overflow: hidden; white-space: nowrap; }
  .season__reg { flex: none; }
  .season__events { flex-wrap: nowrap; min-width: 0; margin: 0; }
  .season__events li { overflow: hidden; text-overflow: ellipsis; }
  .season__events li ~ li, .season .fine { display: none; }
  .movers-box__btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 10px 0 0; padding: 10px 14px;
    border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; cursor: pointer;
  }
  .movers-box__btn .i { width: 18px; height: 18px; flex: none; transition: rotate .2s; }
  .movers-box.is-open .movers-box__btn .i { rotate: 180deg; }
  .movers-box:not(.is-open) .movers-box__body { display: none; }
}
/* Rows that open into a set card */
.rk.rk--more { cursor: pointer; grid-template-columns: 30px minmax(0, 1fr) auto 28px; grid-template-areas: "rank mon nums open" "rank picks picks picks"; }
.rk__open {
  grid-area: open; align-self: start; width: 28px; height: 28px; margin-top: 10px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--chip); color: var(--muted); cursor: pointer;
}
.rk__open .i { width: 16px; height: 16px; transition: rotate .2s; }
.rk__open[aria-expanded="true"] .i { rotate: 180deg; }
.rk__more { grid-column: 1 / -1; min-width: 0; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); cursor: auto; }
/* The set card (app.js: setCard): the set players give it most, from the in-game ladder or Smogon on one switch, in the
   same fields for both; the usual item and the moves as tiles, the rank by day, and Add to team */
.setcard { display: grid; gap: 12px; min-width: 0; }
.setcard__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.setcard__src button { display: inline-flex; align-items: center; gap: 6px; }
.setcard__src button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); } /* as on the source labels */
.setcard__src [data-setcard-src="sd"]::before { background: #4c6ef5; }
.setcard__add { /* red like the Pokédex lid above */
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 7px 15px 7px 11px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, var(--red), var(--red-2)); color: #fff; font-size: .85rem; font-weight: 700; cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .15);
}
.setcard__add:hover { background: var(--red-2); }
.setcard__add:disabled { opacity: .4; cursor: not-allowed; }
.setcard__add .i { width: 16px; height: 16px; stroke-width: 2.6; }
.setcard__add.is-done { background: var(--chip); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.setcard__add.is-done .i { color: var(--good-ink); }
.setcard__open { font-size: .85rem; font-weight: 700; white-space: nowrap; }
.setcard__from { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 12px; color: var(--muted); font-size: .86rem; }
.setcard__from b { color: var(--text); }
.setcard__none { margin: 0; color: var(--muted); }
.setcard__grid { display: grid; gap: 16px 28px; }
.setcard__fields { display: grid; gap: 14px; align-content: start; min-width: 0; margin: 0; }
.setcard__field { min-width: 0; }
.setcard__field dt { margin: 0 0 5px; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.setcard__field dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; margin: 0; font-size: .9rem; }
.setcard__pct { color: var(--muted); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The usual item: its icon in a slot, 30px pixel art at twice its size (crisp) or an HD picture (smooth) */
.setcard__item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 14px 8px 8px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text); text-decoration: none;
}
a.setcard__item:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.setcard__slot { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.setcard__slot .item-ico { width: 60px; height: 60px; }
.setcard__slot .item-ico--none { width: 36px; height: 36px; }
.setcard .item-ico.is-hd { image-rendering: auto; }
.setcard__slot .item-ico.is-hd { width: 48px; height: 48px; }
.setcard__item-txt { display: grid; gap: 1px; flex: 1; min-width: 0; }
.setcard__item-txt b { font-size: 1.02rem; line-height: 1.25; overflow-wrap: anywhere; }
.setcard__item-txt small { color: var(--muted); font-size: .78rem; font-weight: 600; }
.setcard__item .setcard__pct { font-size: .86rem; }
/* The picks after the usual one */
.setcard__also { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; width: 100%; margin: 0; }
.setcard__also > span:first-child { margin-right: 2px; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.setcard__alt {
  display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 10px; border-radius: 999px; background: var(--chip);
  color: var(--text); font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
a.setcard__alt:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent); }
.setcard__alt .item-ico { width: 30px; height: 30px; margin: -6px -3px -6px -8px; }
.setcard__alt .item-ico.is-hd { width: 22px; height: 22px; margin: -2px 1px -2px -4px; }
.setcard__alt .item-ico--none { display: none; }
.setcard__alt .dot { width: 9px; height: 9px; }
.setcard__abil, .setcard__align { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.setcard__align b { font-size: .98rem; }
.setcard__eff { color: var(--muted); font-size: .8rem; font-weight: 700; }
.setcard .is-up { color: var(--tone-up); }
.setcard .is-down { color: var(--tone-down); }
/* Stat Points: each stat's points out of 32, with the alignment's + and − */
.setcard__sp { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 380px; margin: 0; padding: 0; }
.setcard__sp li { display: grid; justify-items: center; gap: 2px; padding: 5px 2px 7px; border-radius: 10px; background: var(--surface-2); }
.setcard__sp li > span { color: var(--muted); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.setcard__sp b { font-size: .98rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.setcard__sp li.is-zero b { color: var(--muted); font-weight: 500; }
.setcard__sp i { width: 70%; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.setcard__sp i::after { content: ""; display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--red); }
/* Moves as tiles in their type's colour */
.setcard__moves { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; margin: 0; padding: 0; }
.setcard__move {
  display: flex; align-items: center; gap: 8px; height: 100%; min-height: 44px; padding: 6px 10px 6px 7px; border-radius: 12px;
  background: color-mix(in srgb, var(--tc) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tc) 38%, var(--line));
  color: var(--text); font-size: .86rem; font-weight: 700; line-height: 1.2; text-decoration: none;
}
a.setcard__move:hover { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 20%, var(--surface)); }
.setcard__mtype { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--tc); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.setcard__mtype .ti { width: 17px; height: 17px; fill: var(--tt, #fff); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.setcard__mname { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.setcard__mates { margin: 0; }
.setcard .mon-chip--plain { padding: 6px 12px; }
/* The rank by day (#1 at the top): a column per day to point at, tap or step through with the arrow keys. The first and
   last columns are half as wide, so each column's middle sits on its day. */
.rkc { width: 100%; }
.rkc__sum { margin: 0 0 8px; color: var(--muted); font-size: .84rem; }
.rkc__sum b { color: var(--text); }
.rkc__plot { position: relative; height: 76px; margin: 0 8px 0 40px; } /* room for "#143" beside it */
.rkc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rkc__grid { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rkc__area { fill: var(--series-1); fill-opacity: .1; }
.rkc__line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rkc__y { position: absolute; right: calc(100% + 6px); transform: translateY(-50%); color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rkc__end, .rkc__day::after { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--series-1); box-shadow: 0 0 0 2px var(--surface); }
.rkc__end { left: 100%; }
.rkc__days { position: absolute; inset: 0; display: flex; }
.rkc__day { position: relative; flex: 1; border-radius: 6px; cursor: help; }
.rkc__day:first-child { flex: .5; --x: 0%; }
.rkc__day:last-child { flex: .5; --x: 100%; }
.rkc__day::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 1px; background: color-mix(in srgb, var(--muted) 60%, transparent); opacity: 0; }
.rkc__day::after { content: ""; left: var(--x, 50%); top: var(--y); opacity: 0; }
.rkc__day:not([style])::after { display: none; } /* a day it wasn't ranked */
.rkc__day:hover::before, .rkc__day:hover::after, .rkc__day:focus-visible::before, .rkc__day:focus-visible::after,
.rkc__day[aria-describedby]::before, .rkc__day[aria-describedby]::after { opacity: 1; }
.rkc__day:focus-visible { outline-offset: -2px; }
.rkc__x { display: flex; justify-content: space-between; margin: 6px 8px 0 40px; color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.setcard__note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 16px 0 0; color: var(--muted); font-size: .8rem; }
.setcard__note .link-btn { padding: 4px 0; font-size: .85rem; }
.setcard__page { justify-self: start; font-size: .88rem; font-weight: 700; }
/* What Add to team says (app.js: toast), at the foot of the screen, clear of the "Top" button */
.toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 80; display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 8px; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 11px 16px; border-radius: 14px;
  background: var(--text); color: var(--bg); font-size: .9rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.toast.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .15s, transform .15s; }
.toast a { color: inherit; font-weight: 800; white-space: nowrap; }
@media (max-width: 480px) { /* the link on a line of its own */
  .toast > [aria-hidden] { display: none; }
  .toast a { flex-basis: 100%; }
}
@media (max-width: 860px) { .toast { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 56px); } }
@media (max-width: 760px) { .toast { bottom: calc(124px + env(safe-area-inset-bottom)); } } /* and the bar of tabs */
@media (prefers-reduced-motion: reduce) { .toast, .toast.is-open { transition: none; } }
@media (min-width: 760px) {
  .setcard__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .rk.rk--more, .rank-head.rank-head--more { grid-template-columns: 44px minmax(200px, 1.1fr) 114px minmax(0, 2fr) 32px; }
  .rk.rk--more { grid-template-areas: "rank mon nums picks open"; }
  .rk__open { align-self: center; margin-top: 0; }
}
/* How Champions battles work */
.rules { margin: 20px 0 28px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 12px); }
.rules h2 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 800; }
.rules__list { display: grid; gap: 10px; margin: 0; }
.rules__list dt { font-weight: 800; }
.rules__list dd { margin: 2px 0 0; color: var(--muted); }
@media (min-width: 760px) { .rules__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; } }
.rk {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "rank mon nums" "rank picks picks";
  align-items: center; gap: 2px 10px; padding: 8px 12px 8px 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  content-visibility: auto; contain-intrinsic-size: auto 96px;
}
.rk__rank { grid-area: rank; align-self: start; padding-top: 14px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.rk__mon { grid-area: mon; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); text-decoration: none; }
.rk__mon img { width: 48px; height: 48px; flex: none; }
.rk__mon:hover .rk__name { color: var(--link); }
.rk__id { display: grid; gap: 3px; min-width: 0; }
.rk__name { font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.rk__nums { grid-area: nums; display: grid; justify-items: end; gap: 1px; font-variant-numeric: tabular-nums; font-size: .85rem; font-weight: 700; }
.rk__use { font-size: .95rem; }
/* /champions/: the ladder's weekly move and Showdown's share side by side, each in its own column; the Showdown
   share is tinted blue like its source label, with the Mega it's counted as under it */
.rk--more .rk__nums { grid-template-columns: 40px 66px; align-items: center; column-gap: 8px; }
.rk--more .rk__use {
  display: grid; justify-items: end; padding: 2px 7px; border-radius: 8px; line-height: 1.15;
  background: color-mix(in srgb, #4c6ef5 13%, transparent);
}
.rk--more .rk__use small { color: var(--muted); font-size: .66rem; font-weight: 700; white-space: nowrap; }
.rank-head__nums { display: grid; grid-template-columns: 40px 66px; justify-content: end; column-gap: 8px; text-align: right; }
@media (max-width: 759px) {
  /* Phones: the week's move above the Showdown share, and the rank as a badge on the sprite's corner instead of a
     column, so the names have room instead of breaking mid-word */
  .rk--more .rk__nums { grid-template-columns: auto; row-gap: 3px; }
  .rk.rk--more { grid-template-columns: minmax(0, 1fr) auto 28px; grid-template-areas: "mon nums open" "picks picks picks"; padding-left: 10px; }
  .rk--more .rk__rank {
    grid-area: mon; z-index: 1; align-self: start; justify-self: start; min-width: 22px; margin: -3px 0 0 -4px; padding: 1px 5px;
    border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: .7rem; line-height: 1.35;
  }
}
@media (max-width: 340px) {
  .rk { column-gap: 6px; }
  .rk__mon { gap: 6px; }
  .rk__mon img { width: 40px; height: 40px; }
  .rk__name { font-size: .9rem; }
}
.rk__bar { width: 64px; height: 4px; margin-top: 2px; border-radius: 2px; background: var(--chip); }
.rk__bar::after { content: ""; display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--series-1); }
.rk__picks { grid-area: picks; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.rk__picks > small { display: block; font-size: .78rem; }
.rank-head { display: none; }
@media (min-width: 760px) {
  .rk, .rank-head { grid-template-columns: 44px minmax(200px, 1.1fr) 104px minmax(0, 2fr); }
  .rk { grid-template-areas: "rank mon nums picks"; gap: 2px 14px; padding: 6px 14px 6px 8px; }
  .rk__rank { align-self: center; padding-top: 0; }
  .rank-head {
    display: grid; gap: 14px; padding: 0 14px 6px 8px; color: var(--muted);
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  }
  .rank-head span:nth-child(3) { text-align: right; }
}
.fmt-nav { margin: 6px 0 0; }
.fmt-nav .chip { color: var(--text); text-decoration: none; }
.chip[aria-current="page"] { background: var(--chip-on); color: var(--chip-on-ink); }
.fmt-group { margin: 18px 0 0; }
.fmt-group__title { margin: 0 0 10px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fmt-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; margin: 0 0 8px; padding: 0; }
.fmt-card {
  display: flex; flex-direction: column; padding: 14px 16px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.fmt-card h2 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.fmt-card h2 a { color: var(--text); text-decoration: none; }
.fmt-card h2 a:hover { color: var(--link); }
.fmt-card p { margin: 2px 0 0; font-size: .85rem; }
/* The format's top six: rank, sprite, name and share, each linking to the Pokémon */
.fmt-card__top { list-style: none; display: grid; gap: 2px; margin: 10px 0 8px; padding: 0; }
.fmt-card__top a {
  display: grid; grid-template-columns: 16px 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 2px 6px 2px 2px;
  border-radius: 10px; color: var(--text); text-decoration: none; font-size: .9rem;
}
.fmt-card__top a:hover { background: var(--surface-2); }
.fmt-card__top b { color: var(--muted); font-size: .75rem; text-align: right; font-variant-numeric: tabular-nums; }
.fmt-card__top img { width: 40px; height: 40px; }
.fmt-card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fmt-card__pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.fmt-card__more { margin-top: auto; font-size: .85rem; font-weight: 700; text-decoration: none; }
/* The competitive area's two kinds of data */
.subtabs { display: flex; gap: 8px; margin: 16px 0 0; overflow-x: auto; scrollbar-width: none; }
.subtabs a {
  flex: 1 1 0; display: grid; gap: 1px; min-width: 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); text-decoration: none;
}
.subtabs a:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.subtabs a[aria-current="page"] { border-color: var(--red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 25%, transparent); }
.subtabs b { font-weight: 800; }
.subtabs small { color: var(--muted); font-size: .78rem; }
/* Where the numbers come from */
.sources { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -4px 0 10px; color: var(--muted); font-size: .84rem; }
.src { padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.src--game { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--text); }
.src--sd { background: color-mix(in srgb, #4c6ef5 18%, transparent); color: var(--text); }
/* The labels link to /sources/, where each source is explained */
a.src { text-decoration: none; }
a.src:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 30%, transparent); }
.src-sec h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.src-sec h2 .src { font-size: .78rem; }
.src-sec { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---------- type pages ---------- */
a.type { text-decoration: none; }
a.type:hover { filter: brightness(1.08); }
.types--title { vertical-align: .18em; padding: 4px 16px; font-size: .62em; }
.type-facts { margin-top: 14px; }
.type-facts small { color: var(--muted); font-weight: 600; }
/* A type's two sides, side by side: what its moves do to each type, and what each type's do to it (the Pokémon pages'
   multiplier rows, so .mu-row / .mu-x / .mu-group are styled with those) */
.type-matchups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 4px; }
.type-mu { min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.type-mu h2, .type-others h2 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 800; }
@media (max-width: 760px) { .type-matchups { grid-template-columns: minmax(0, 1fr); } }
.type-others { margin: 8px 0 40px; }

/* /types/: a section's title and a line saying how to read it */
.type-sec { margin: 26px 0 0; }
.type-sec h2 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.type-sec__lead { max-width: 62ch; margin: 2px 0 10px; color: var(--muted); }
/* The chart's key; its swatches are made like the squares, so they share their colours */
.type-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; padding: 0; list-style: none; color: var(--muted); font-size: .84rem; }
.type-key li { display: inline-flex; align-items: center; gap: 7px; }
.tkey { display: inline-grid; place-items: center; min-width: 2.2rem; height: 1.45rem; padding: 0 6px; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: .78rem; font-weight: 800; }
/* Attackers down the side, defenders across. Each square is a tile with a gap (a border in the box's colour), so the
   sticky headers have nothing to show through. A phone scrolls it sideways inside its box, the attackers staying put;
   from tablet width it fits whole, its header row staying under the site's while the page scrolls. 2× is the warm
   colour and ½× the green of the Pokémon pages' multipliers; 0× is the one dark square; a plain one is 1× */
.type-chart { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.type-chart:focus-visible { border-radius: 16px; }
.tchart { --head: 46px; width: 100%; min-width: calc(var(--head) + 18 * 32px); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tchart th, .tchart td { padding: 0; border: 2px solid var(--surface); background-clip: padding-box; }
.tchart thead :is(th, td) { position: sticky; top: 0; z-index: 2; height: 2.9rem; background-color: var(--surface); text-align: center; }
.tchart tbody th { position: sticky; left: 0; z-index: 1; background-color: var(--surface); }
.tchart td { height: 2.15rem; border-radius: 9px; background-color: var(--surface-2); font-size: .8rem; font-weight: 800; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.tchart__who { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* A type's symbol on a dot of its colour */
.tdot { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--tc); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.tdot .ti { width: 15px; height: 15px; fill: var(--tt, #fff); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.tchart__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; font-size: .86rem; font-weight: 700; text-overflow: ellipsis; }
/* The corner says which way is which */
.tchart thead .tchart__corner { left: 0; z-index: 3; width: var(--head); background-image: linear-gradient(to top right, transparent calc(50% - .5px), var(--line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.tchart__def, .tchart__atk { position: absolute; color: var(--muted); font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tchart__def { top: 4px; right: 4px; }
.tchart__atk { bottom: 4px; left: 4px; }
:is(.tchart td, .tkey)[data-m="2"] { background-color: color-mix(in srgb, #e2702f 30%, var(--surface)); color: color-mix(in srgb, #e2702f 50%, var(--text)); }
:is(.tchart td, .tkey)[data-m="0.5"] { background-color: color-mix(in srgb, #3c9a5c 26%, var(--surface)); color: color-mix(in srgb, #3c9a5c 60%, var(--text)); }
:is(.tchart td, .tkey)[data-m="0"] { background-color: color-mix(in srgb, var(--text) 68%, var(--surface)); color: var(--surface); }
/* The row and column of the square pointed at, and the square itself */
.tchart td.is-hot { box-shadow: inset 0 0 0 99px color-mix(in srgb, var(--text) 8%, transparent); }
.tchart td.is-aim { box-shadow: inset 0 0 0 99px color-mix(in srgb, var(--text) 8%, transparent), inset 0 0 0 2px var(--text); }
.tchart th.is-hot .tdot { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), 0 0 0 2px var(--surface), 0 0 0 4px var(--tc); }
.type-chart__aim { min-height: 1.5em; margin: 8px 2px 0; color: var(--muted); font-size: .9rem; font-weight: 600; }
@media (min-width: 761px) {
  .type-chart { overflow: visible; }
  .tchart { --head: 112px; }
  .tchart thead :is(th, td) { top: var(--header-h); }
  .tchart__who { justify-content: flex-start; padding-left: 6px; }
  .tchart__name { position: static; width: auto; height: auto; overflow: hidden; clip: auto; }
}

/* The weakness calculator: the picked types' own page-style rows, in three columns when there is room */
.type-calc__box { padding: 14px 16px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.type-calc .type-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--tc); }
.type-calc__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; gap: 16px 28px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.type-calc__out > * { margin: 0; }
.type-calc__who { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.type-calc__who .link-btn { margin-left: 4px; padding: 0; font-size: .86rem; }
.type-calc__out .mu-group--neutral { grid-column: 1 / -1; }
/* /types/ dual types: the most common pairs (each opens the Pokédex on exactly that pair) and the unused ones */
.combos { display: grid; gap: 12px; padding: 14px 16px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.combos h3 { margin: 0 0 8px; color: var(--muted); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.combos h3 small { margin-left: 4px; font-weight: 700; }
.combos__list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.combos__list a, .combos__list--plain li {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text); text-decoration: none;
}
.combos__list a:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.combos__list b { font-size: .82rem; font-variant-numeric: tabular-nums; }
.combos__list--plain li { padding-right: 5px; opacity: .8; }
.combos .types { gap: 3px; }
@media (min-width: 760px) { .combos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; } }
.type-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 18px 0 40px; padding: 0; }
.type-sec .type-grid { margin-top: 10px; }
.type-card {
  display: grid; gap: 4px; height: 100%; padding: 14px; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--tc) 70%, transparent);
  background: color-mix(in srgb, var(--tc) 14%, var(--surface)); color: var(--text); text-decoration: none; transition: transform .15s;
}
.type-card:hover { transform: translateY(-2px); }
.type-card .type { justify-self: start; }
.type-card small { color: var(--muted); line-height: 1.4; }

/* Smogon pages: how usage shifts between all players and top players */
.skill { margin: 18px 0 6px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.skill h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.skill > p { margin: 2px 0 10px; font-size: .86rem; }
.skill__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 20px; }
.skill h3 { margin: 0 0 6px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.skill__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.skill__list a { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 10px; color: var(--text); text-decoration: none; }
.skill__list a:hover { background: var(--surface-2); }
.skill__list img { width: 40px; height: 40px; }
.skill__name { flex: 1; min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.skill__nums { display: grid; justify-items: end; line-height: 1.15; }
.skill__nums small { color: var(--muted); font-size: .74rem; }

/* ---------- abilities ---------- */
.crumbs { margin: 18px 0 0; color: var(--muted); font-size: .85rem; font-weight: 600; }
.crumbs a { text-decoration: none; }
.crumbs + .intro { padding-top: 8px; }
/* Showdown's rating as five pips */
.meter { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: help; }
.meter i { width: 9px; height: 9px; border-radius: 3px; background: var(--chip); }
.meter i.on { background: #f5b301; }
.meter b { margin-left: 5px; color: var(--text); font-variant-numeric: tabular-nums; }
.badge--tip { border: 0; cursor: help; font-family: inherit; }
.ab-top-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; }
.ab-top {
  display: grid; gap: 2px; height: 100%; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform .15s;
}
.ab-top:hover { transform: translateY(-2px); }
.ab-top .muted { font-size: .82rem; font-weight: 600; }
.ab-top__mons { display: flex; margin-top: 4px; }
.ab-top__mons img { width: 36px; height: 36px; }
.ab-list { list-style: none; display: grid; gap: 8px; margin: 0 0 12px; padding: 0; }
.ab {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main mons" "stats stats"; align-items: center; gap: 6px 10px;
  padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.ab[hidden] { display: none; }
.ab__main { grid-area: main; min-width: 0; color: var(--text); text-decoration: none; }
.ab__name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: 800; }
.ab__main:hover .ab__name { color: var(--link); }
.ab__effect { display: block; margin-top: 2px; color: var(--muted); font-size: .88rem; line-height: 1.4; }
.ab__mons { grid-area: mons; display: flex; }
.ab__mons img { width: 36px; height: 36px; margin-left: -8px; }
.ab__stats { grid-area: stats; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: var(--muted); font-size: .82rem; }
/* A number Pokémon Champions changed (the move list shows Champions' value; Scarlet & Violet's is in the tip) */
.mv-changed { color: var(--text); font-weight: 700; text-decoration: underline dotted #d9a520; text-underline-offset: 3px; cursor: help; }
.ab__stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.ab-head { display: none; }
@media (min-width: 900px) {
  .ab, .ab-head { grid-template-columns: minmax(0, 1fr) 150px 84px 64px 118px 168px; gap: 14px; }
  .ab { grid-template-areas: none; padding: 10px 14px; }
  .ab__main, .ab__mons, .ab__stats { grid-area: auto; }
  .ab__stats { display: contents; }
  .ab__lbl { display: none; }
  .ab__use b { font-size: .95rem; }
  .ab-head { display: grid; padding: 0 14px 6px; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
  .ab-head > span { display: flex; align-items: center; }
  .ab-head [data-ref-sort-by] { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .ab-head [data-ref-sort-by]:hover, .ab-head [data-ref-sort-by].is-active { color: var(--text); }
}
/* The numbers above a reference list: bigger tiles for the more telling ones; folds away */
.ab-stats { margin: 16px 0 4px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.ab-stats[hidden] { display: none; }
.ab-stats summary { display: flex; align-items: baseline; gap: 8px; list-style: none; cursor: pointer; }
.ab-stats summary::-webkit-details-marker { display: none; }
.ab-stats summary b { font-size: 1.02rem; font-weight: 800; }
.ab-stats__hint { margin-left: auto; color: var(--link); font-size: .82rem; font-weight: 700; }
.ab-stats[open] .ab-stats__hint span:last-child, .ab-stats:not([open]) .ab-stats__hint span:first-child { display: none; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: dense; gap: 8px; margin-top: 12px; }
.tile { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.tile--l { grid-column: span 2; }
.tile--w { grid-column: 1 / -1; }
.tile__k { display: flex; align-items: center; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tile__v { font-size: 1.15rem; font-weight: 800; overflow-wrap: anywhere; }
.tile--l .tile__v { font-size: 1.45rem; }
.tile__v a { color: var(--text); text-decoration: none; }
.tile__v a:hover { color: var(--link); }
.tile small { color: var(--muted); font-size: .78rem; }
.gen-bars { display: flex; align-items: flex-end; gap: 6px; height: 74px; margin-top: 6px; }
.gen-bar { flex: 1; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; min-width: 0; }
.gen-bar b { font-size: .72rem; font-variant-numeric: tabular-nums; }
.gen-bar i { align-self: end; width: 100%; max-width: 34px; height: var(--h); min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--series-1); }
.gen-bar small { font-size: .66rem; font-weight: 700; }
@media (max-width: 420px) { .tile--l { grid-column: 1 / -1; } }
/* Physical / special / status: one bar split by their share */
.cls-bar { display: flex; gap: 3px; margin-top: 6px; min-height: 30px; border-radius: 10px; overflow: hidden; }
.cls-bar__part {
  display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0 8px; overflow: hidden;
  font-size: .76rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; border-radius: 0;
}
/* "+N": everyone with the ability, opened in the row */
.ab__mons { align-items: center; }
.ab__more {
  display: grid; place-items: center; min-width: 32px; height: 32px; margin-left: 2px; padding: 0 6px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer;
}
.ab__more[aria-expanded="true"] { background: var(--chip-on); color: var(--chip-on-ink); border-color: transparent; }
.ab__all { grid-column: 1 / -1; }
.ab__all[hidden] { display: none; }
.ab__all .mon-chips { margin-top: 4px; }
.ab__all .mon-chip small { margin-left: 4px; color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.ab-short { font-size: 1.08rem; color: var(--text) !important; }
.ab-sec { margin: 16px 0; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ab-sec h2 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 800; }
/* Glossary terms in text: a dotted underline, the meaning on hover, tap or keyboard (content/glossary.json); the games'
   stat-change and status words in their muted tones */
.gloss {
  display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit; text-align: inherit;
  text-decoration: underline dotted color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: 3px; cursor: help;
}
.gloss:hover { text-decoration-style: solid; }
.gloss--up { color: var(--tone-up); } .gloss--down { color: var(--tone-down); } .gloss--par { color: var(--tone-par); }
.gloss--brn { color: var(--tone-brn); } .gloss--psn { color: var(--tone-psn); } .gloss--slp { color: var(--tone-slp); }
.gloss--frz { color: var(--tone-frz); } .gloss--cnf { color: var(--tone-cnf); }
/* "Good to know" on move and item pages, and the move group pages */
.gtk { display: grid; gap: 8px; margin: 0; padding-left: 1.1rem; line-height: 1.5; }
.gtk li::marker { color: var(--red); }
.gtk__group { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--chip); color: var(--text);
  font-size: .76rem; font-weight: 700; text-decoration: none; vertical-align: 1px; }
.gtk__group:hover { background: color-mix(in srgb, var(--red) 14%, var(--chip)); }
.gtk-count { margin-top: 4px; font-size: .8rem; font-weight: 700; }
.gtk-who + .gtk-who { margin-top: 12px; }
.gtk-who h3 { margin: 0 0 6px; color: var(--muted); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.gtk-who .chip { color: var(--text); text-decoration: none; }
/* /categories/<category>/: its groups, each a grid of Pokédex cards */
.cat-group { margin: 18px 0; }
.cat-group h2 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; }
.cat-group > p { margin: 0 0 10px; }
.cat-group .mon-list { margin-bottom: 0; }
/* /glossary/ */
.gl-jump { margin-top: 12px; }
.gl-jump .chip { color: var(--text); text-decoration: none; }
.gl-group { scroll-margin-top: calc(var(--header-h) + 12px); }
.gl-list { display: grid; gap: 12px; margin: 0; }
.gl-term { scroll-margin-top: calc(var(--header-h) + 12px); }
.gl-term dt { font-weight: 800; }
.gl-term dd { margin: 2px 0 0; color: var(--muted); line-height: 1.5; }
.gl-term:target { padding: 8px 10px; margin: -8px -10px; border-radius: 12px; background: color-mix(in srgb, var(--red) 10%, transparent); }
.gl-see { margin-left: 4px; font-weight: 700; white-space: nowrap; }
.gl-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.gl-table :is(th, td) { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.gl-table th { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.gl-table td:nth-child(2) { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 760px) { .gl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; } }
/* /gimmicks/: a colour per gimmick (Mega Evolution's is its symbol's), on the cards up top and each section's edge */
.gm--mega { --gm: #6c74cc; --gm-bar: linear-gradient(90deg, #c79bd8, #6c74cc, #3e5ec0, #1db6e3, #2fb29b, #78c142, #e8ea5e); }
.gm--z-moves { --gm: #d39a12; } .gm--dynamax { --gm: #e0306a; } .gm--tera { --gm: #24a9c2; }
.gm-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; }
.gm-card {
  position: relative; display: grid; align-content: start; gap: 2px; height: 100%; padding: 16px 14px 12px; overflow: hidden;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s;
}
.gm-card::before, .gm-sec::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gm-bar, var(--gm)); }
.gm-card:hover { border-color: color-mix(in srgb, var(--gm) 55%, var(--line)); transform: translateY(-2px); }
.gm-card .gm-glyph { position: absolute; top: 14px; right: 12px; }
.gm-card__gen { font-family: var(--pixel); font-size: .64rem; color: var(--muted); }
.gm-card b { padding-right: 40px; font-size: 1.08rem; line-height: 1.25; }
.gm-card dl { display: grid; gap: 2px; margin: 6px 0 8px; font-size: .8rem; }
.gm-card dl div { display: flex; gap: 6px; }
.gm-card dt { color: var(--muted); font-weight: 700; }
.gm-card dd { margin: 0; }
.gm-card .badge { justify-self: start; }
.gm-glyph { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; color: var(--gm); background: color-mix(in srgb, var(--gm) 15%, transparent); }
.gm-glyph .i { width: 20px; height: 20px; }
.gm-glyph .i-mega { width: 26px; height: 26px; }
.gm-sec { position: relative; overflow: hidden; padding-top: 20px; scroll-margin-top: calc(var(--header-h) + 12px); }
.gm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gm-head > div { flex: 1; min-width: 0; }
.gm-head h2 { margin: 0; font-size: 1.3rem; }
.ab-sec .gm-games { margin: 2px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.4; }
.gm-rules { display: grid; gap: 8px; max-width: 80ch; margin: 0 0 14px; padding-left: 20px; line-height: 1.55; }
.gm-rules li::marker { color: var(--gm); }
.gm-sec h3 { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 8px; font-size: 1rem; font-weight: 800; }
.gm-sec h3 small { color: var(--muted); font-size: .8rem; font-weight: 700; }
.gm-sec .abil-others { margin-top: 12px; }
.gm-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; margin: 0; padding: 0; }
.gm-cell {
  display: grid; align-content: start; justify-items: start; gap: 3px; height: 100%; min-width: 0; padding: 10px 12px;
  border-radius: 12px; border-left: 4px solid var(--tc); background: var(--surface-2); color: var(--text); text-decoration: none;
}
.gm-cell b { font-size: .93rem; line-height: 1.3; }
.gm-cell b a { color: var(--text); }
.gm-cell__sub { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.gm-cell__who { font-size: .76rem; font-weight: 700; color: var(--muted); }
.gm-cell__move { font-size: .82rem; font-weight: 700; color: color-mix(in srgb, var(--tc) 70%, var(--text)); }
.gm-cell--own, .gm-cell--mon { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }
.gm-cell__text { display: grid; gap: 2px; min-width: 0; }
.gm-cell--mon img { width: 48px; height: 48px; }
a.gm-cell:hover { background: color-mix(in srgb, var(--tc) 12%, var(--surface-2)); }
.gm-mons { display: flex; flex-wrap: wrap; max-width: 84px; }
.gm-mons img { width: 40px; height: 40px; }
.gm-item { display: inline-flex; align-items: center; gap: 2px; }
.gm-item .item-ico { width: 24px; height: 24px; margin: -4px 0; }
.mon-chip .gm-stone { width: 22px; height: 22px; margin-left: 4px; image-rendering: pixelated; }
.gm-guard { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: .88rem; }
.gm-tera { gap: 8px; }
@media (max-width: 520px) {
  /* Phones: the four cards as a compact 2×2 of jump links (each section repeats what they say), and each section's
     badge under its name */
  .gm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gm-card { padding: 14px 10px 10px; gap: 4px; }
  .gm-card .gm-glyph { position: static; width: 30px; height: 30px; border-radius: 9px; }
  .gm-card b { padding-right: 0; font-size: .95rem; hyphens: auto; }
  .gm-card dl { display: none; }
  .gm-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; }
  .gm-head .badge { grid-column: 2; justify-self: start; }
  .gm-head h2 { font-size: 1.15rem; }
  /* Two to a row: the Megas as compact chips, and the short type-by-type lists */
  .gm-sec .mon-chips, .gm-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-sec .mon-chips { display: grid; }
  .gm-sec .mon-chip { min-width: 0; padding-right: 6px; font-size: .76rem; line-height: 1.2; }
  .gm-sec .mon-chip .msprite { width: 30px; height: 30px; }
  .gm-sec .mon-chip .gm-stone { width: 18px; height: 18px; margin-left: auto; }
  .gm-grid--pair .gm-cell { padding: 8px 10px; }
  .gm-grid--pair .gm-cell b { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) { .gm-card { transition: none; } .gm-card:hover { transform: none; } }
.ab-sec p { max-width: 75ch; margin: 0 0 10px; line-height: 1.6; }
.ab-flavor { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--red); border-radius: 0 10px 10px 0; background: var(--surface-2); }
.ab-flavor p { margin: 0; font-style: italic; }
.ab-flavor cite { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; font-style: normal; }
.champ-use { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin: 0; padding: 0; }
.champ-use a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "img name" "img meta"; column-gap: 8px; align-items: center;
  padding: 6px 10px 6px 6px; border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none;
}
.champ-use img { grid-area: img; width: 40px; height: 40px; }
.champ-use__name { grid-area: name; font-weight: 700; }
.champ-use .muted { grid-area: meta; font-size: .78rem; }
.champ-use a:hover .champ-use__name { color: var(--link); }
/* ---------- moves and items ---------- */
.badge--ok { background: #c9f0d6; color: #0d4a26; }
.badge--off { background: var(--chip); color: var(--muted); }
.item-ico { width: 32px; height: 32px; flex: none; object-fit: contain; image-rendering: pixelated; }
/* An item's icon in front of its name in running text and lists (the Competitive card's builds and ladder picks) */
.item-ico--inline { width: 24px; height: 24px; margin: -4px 4px -4px 0; vertical-align: middle; }
.item-ico--none { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background: var(--chip); }
.ab__main--icon { display: flex; align-items: center; gap: 10px; }
.ab-top__title { display: flex; align-items: center; gap: 8px; }
.ab-top__title .item-ico { width: 28px; height: 28px; }
.item-title { display: flex; align-items: center; gap: 12px; }
.item-title .item-ico { width: 48px; height: 48px; }
.mon-chip small { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.mv-cls { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.mv-cls--physical { background: #f6d2c4; color: #6e2508; }
.mv-cls--special { background: #cfdcf8; color: #1d3a7a; }
.mv-cls--status { background: var(--chip); color: var(--muted); }
.move-kind { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.move-flags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; }
.move-flags li { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: .82rem; font-weight: 600; }
.move-flags li:has(.abil-chip) { padding: 1px 3px 1px 10px; } /* the ability's chip tucked into the end of the pill */
.ab-note { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, #2ecc71 12%, var(--surface-2)); }
.ab-sec .links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-weight: 700; }
.ab-sec .links a { text-decoration: none; }
.change-list { margin: 0; padding-left: 18px; line-height: 1.8; }
.changes { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; margin: 0; padding: 0; }
.changes a { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none; }
.changes a:hover b { color: var(--link); }
.changes a > span:last-child { flex-basis: 100%; color: var(--muted); font-size: .84rem; font-weight: 600; }
.ab--move { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "stats"; }
@media (min-width: 900px) {
  .ab--item, .ab-head--item { grid-template-columns: minmax(0, 1fr) 150px 150px 64px 168px; }
  .ab--move, .ab-head--move { grid-template-columns: minmax(0, 1fr) 92px 92px 58px 58px 44px 158px; grid-template-areas: none; }
}
.abil-more { display: inline-block; margin-top: 6px; font-size: .85rem; font-weight: 700; text-decoration: none; }
/* The game picker on move and ability pages (render.py: game_picker): one row of radio chips that scrolls sideways
   on phones; the games it isn't in greyed out, struck through where it was left out; the games named under it */
.game-pick { margin-top: 14px; min-width: 0; }
.game-pick__k { display: block; margin-bottom: 6px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.game-pick__row { display: flex; width: max-content; }
.game-pick__row button { flex: none; }
.game-pick__row button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.game-pick__row button:not(:disabled):not([aria-checked="true"]):hover { color: var(--text); }
.game-pick__row button:disabled { opacity: .45; cursor: not-allowed; }
.game-pick__row button.is-gone { text-decoration: line-through; }
.game-pick__row button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.game-pick__games { margin: 6px 0 0; color: var(--muted); font-size: .82rem; }
.ab-sec h2 small { margin-left: 4px; color: var(--muted); font-size: .8rem; font-weight: 600; }
/* "Changes over time": each generation's changes beside it, newest first; a description's added words marked, its
   dropped words struck through */
.history { list-style: none; display: grid; gap: 12px; padding: 0; line-height: 1.55; }
.history li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.history__when { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--chip); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.history__when--champions { background: #f6d77a; color: #4d3800; }
.history__what { display: grid; gap: 4px; min-width: 0; }
.history__what p { margin: 0; max-width: 75ch; }
.history .type { padding: 1px 9px; font-size: .78rem; }
.history ins { text-decoration: underline 2px color-mix(in srgb, var(--tone-up) 75%, transparent); text-underline-offset: 3px;
  background: color-mix(in srgb, var(--tone-up) 12%, transparent); border-radius: 3px; }
.history del { color: var(--muted); text-decoration-color: color-mix(in srgb, var(--tone-down) 80%, transparent); }
@media (max-width: 560px) { .history li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- move animation clips: YouTube's minimum player size is 200px tall ---------- */
/* The width is set so the min-height on phones adds height instead of widening it (aspect-ratio would) */
.clip { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; max-width: 720px; border-radius: 14px; overflow: hidden; background: #111; }
.clip iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clip__play {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; width: 100%; border: 0;
  background: radial-gradient(circle at 50% 42%, #2c2f38, #101114 70%); color: #fff; font: inherit; cursor: pointer;
}
.clip__icon { display: grid; place-items: center; width: 68px; height: 48px; border-radius: 14px; background: #e62117; transition: transform .15s; }
.clip__icon svg { width: 26px; height: 26px; fill: #fff; }
.clip__play:hover .clip__icon { transform: scale(1.08); }
.clip__play small { color: rgba(255, 255, 255, .7); }
.clip__games { margin-top: 10px; }

/* ---------- animated move previews (static/moveanim.js) ---------- */
/* Move pages with footage too: the games' own animation or the fan-made preview */
.anim-src { display: flex; width: 100%; max-width: 640px; margin: 0 0 14px; border-radius: 14px; }
.anim-src button { flex: 1 1 0; display: grid; gap: 1px; padding: 8px 12px; border-radius: 11px; text-align: center; color: var(--text); font-weight: 700; white-space: normal; }
.anim-src small { font-size: .72rem; font-weight: 500; color: var(--muted); }
[data-anim-panel] .clip, [data-anim-panel] .clip__games { max-width: 640px; }
/* Which games' sprites (or 3D): a segmented row over the screen, in two lines when it doesn't fit in one */
.anim-gens { display: flex; flex-wrap: wrap; width: 100%; max-width: 640px; margin: 0 0 10px; border-radius: 14px; }
.anim-gens .anim-gen { flex: 1 0 auto; min-width: 38px; padding: 7px 10px; border-radius: 11px; }
.anim-gen.is-missing:not([aria-pressed="true"]) { opacity: .45; }
/* The screen: the field and effects behind the Pokémon, the Pokémon's sprites, effects in front */
.anim { position: relative; max-width: 640px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.anim canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.anim__front { cursor: pointer; }
.anim__mons { position: absolute; inset: 0; pointer-events: none; }
.anim__mon { position: absolute; max-width: none; transform-origin: 50% 50%; }
.anim__mon.is-pixel { image-rendering: pixelated; }
.anim__mon[hidden] { display: none; }
.anim__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.anim-note { max-width: 640px; margin: 10px 0 0; color: var(--muted); font-size: .86rem; }
.anim-note[hidden] { display: none; }
.anim-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 640px; margin-top: 10px; }
.anim-play {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 14px; border: 0; border-radius: 999px;
  background: var(--red); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: var(--shadow);
}
.anim-play svg { width: 18px; height: 18px; fill: currentColor; }
.anim-play:hover:not(:disabled) { filter: brightness(1.08); }
.anim-play:disabled { opacity: .7; cursor: default; }
.anim-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; width: 100%; }
.anim-pick select { width: 100%; }

/* ---------- team builder ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tb { margin: 16px 0; }
.tb-loading { color: var(--muted); }
/* The team's name, Doubles or Singles, New, Import and My teams. On phones the teams list spans the whole bar, so it
   never runs off the screen. */
.tb-top { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tb-name {
  flex: 1 1 220px; min-width: 0; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font: inherit; font-size: 1rem; font-weight: 700;
}
.tb-name:focus { outline: none; border-color: var(--focus); }
.tb-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.tb-menu { position: relative; }
.tb-menu summary { list-style: none; }
.tb-menu summary::-webkit-details-marker { display: none; }
.tb-menu__list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: grid; gap: 2px; width: 300px; max-width: calc(100vw - 32px);
  max-height: 60vh; overflow: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}
@media (max-width: 560px) {
  .tb-menu { position: static; }
  .tb-menu__list { left: 0; right: 0; width: auto; max-width: none; }
}
.tb-saved { display: flex; align-items: center; gap: 4px; }
.tb-saved > button:first-child {
  flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0; padding: 8px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.tb-saved > button:first-child b { flex-basis: 100%; overflow-wrap: anywhere; }
.tb-saved > button:first-child b small { margin-left: 6px; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.tb-saved > button:first-child:hover { background: var(--surface-2); }
.tb-saved img { image-rendering: pixelated; }
.tb-saved__del { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.tb-saved__del:hover { background: var(--chip); color: var(--text); }
/* The six slots: sprite, held item and a dot for a rule broken (red) or something to look at (amber) */
.tb-slots { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 14px 0 10px; padding: 0; }
.tb-slot {
  position: relative; display: grid; justify-items: center; gap: 2px; width: 100%; height: 100%; padding: 8px 4px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.tb-slot__pic { position: relative; width: 56px; height: 56px; }
.tb-slot__pic > img:first-child { width: 56px; height: 56px; image-rendering: pixelated; }
.tb-slot__item { position: absolute; right: -10px; bottom: -2px; width: 24px; height: 24px; image-rendering: pixelated; }
.tb-slot > span:last-of-type { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-slot[aria-pressed="true"] { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }
.tb-slot.is-empty { color: var(--muted); border-style: dashed; }
.tb-slot__add { display: grid; place-items: center; width: 56px; height: 56px; font-size: 1.8rem; font-weight: 400; }
.tb-slot__flag { position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--surface); }
.tb-slot__flag.is-warn { background: #f59f00; }
@media (max-width: 560px) { .tb-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The export bar: Showdown, PokePaste, a link, Discord, the team sheet and a picture, a tap each */
.tb-export { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.tb-export__label { margin-right: 2px; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.tb-export button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 7px 13px 7px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer;
}
.tb-export button:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.tb-export .i { width: 17px; height: 17px; color: var(--red); }
@media (max-width: 560px) {
  .tb-export { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tb-export__label { display: none; }
  .tb-export button { padding: 9px 4px; border-radius: 12px; font-size: .82rem; }
}
.tb-editor { padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.tb-field { display: grid; gap: 4px; min-width: 0; }
.tb-field label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tb-field__head { display: flex; align-items: center; }
.tb-combo { position: relative; }
.tb-combo input, .tb-select {
  width: 100%; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600;
}
.tb-combo input:focus, .tb-select:focus { outline: none; border-color: var(--focus); }
.tb-combo .search__results { z-index: 25; max-height: 320px; }
/* A move picker shows its move's type as the symbol on a dot of its colour */
.tb-combo--move input { padding-left: 42px; }
.tb-combo__type { position: absolute; left: 9px; top: 9px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tc); pointer-events: none; }
.tb-combo__type.is-empty { background: var(--chip); }
.tb-combo__type .ti { width: 15px; height: 15px; fill: var(--tt, #fff); }
/* An item in the picker: its name, and what it does on a line below */
.tb-opt { display: grid; min-width: 0; }
.tb-opt > span, .tb-opt > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-opt > small { color: var(--muted); font-size: .74rem; font-weight: 500; }
.tb-every { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--muted); font-size: .88rem; }
.tb-sub { margin: 16px 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tb-quicks { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tb-quick {
  display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.tb-quick:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.tb-quick img { image-rendering: pixelated; }
.tb-mon__head { display: flex; align-items: center; gap: 14px; }
.tb-mon__img { width: 96px; height: 96px; flex: none; image-rendering: pixelated; border-radius: 14px; background: var(--sprite-bg); }
.tb-mon__id { display: grid; gap: 8px; flex: 1; min-width: 0; }
.tb-mon__id .types { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tb-dexlink { font-size: .85rem; font-weight: 700; text-decoration: none; }
.tb-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.tb-mega { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--muted); font-size: .86rem; }
/* A slot's problems (red), what to look at (amber) and what an import changed (grey), in the editor and in Checks */
.tb-issues { list-style: none; display: grid; gap: 4px; margin: 12px 0 0; padding: 0; font-size: .88rem; }
.tb-issues li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); }
.tb-issues li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .5em; border-radius: 50%; background: var(--muted); }
.tb-issues .is-bad::before { background: var(--red); }
.tb-issues .is-warn::before { background: #f59f00; }
.tb-issues .is-note { color: var(--muted); }
.tb-issues .is-note::before { background: none; box-shadow: inset 0 0 0 1.5px var(--muted); }
.tb-mon__body { display: grid; gap: 18px; margin-top: 14px; }
@media (min-width: 900px) { .tb-mon__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px; } }
.tb-mon__set { display: grid; gap: 10px; min-width: 0; }
.tb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
/* Stat Points: −, the slider, + and the number, then the level 50 stat; the slider's lighter part is how far the 66
   points still reach. Phones give the controls a line of their own under the stat. */
.tb-sp { min-width: 0; }
.tb-sp__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 4px; }
.tb-sp__head h3 { display: flex; align-items: center; margin: 0; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.tb-sp__left { font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-sp__head .link-btn { margin-left: auto; padding: 4px 0; font-size: .86rem; }
.tb-sp__row {
  display: grid; grid-template-columns: 48px 30px 34px minmax(0, 1fr) 34px 46px 40px; grid-template-areas: "stat base minus range plus num final";
  align-items: center; column-gap: 6px; padding: 5px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.tb-sp__row--head { padding: 0 0 2px; border-top: 0; color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.tb-sp__stat { grid-area: stat; font-weight: 700; white-space: nowrap; }
.tb-sp__base { grid-area: base; color: var(--muted); text-align: right; }
.tb-sp__pts { grid-column: minus-start / num-end; }
.tb-sp__final { grid-area: final; font-weight: 800; text-align: right; }
.tb-step {
  grid-area: minus; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.tb-step[data-by="1"] { grid-area: plus; }
.tb-step:hover, .tb-step:active { background: var(--chip); }
.tb-step[aria-disabled="true"] { opacity: .35; cursor: default; }
.tb-range {
  --a: calc(11px + (100% - 22px) * var(--p, 0)); --b: calc(11px + (100% - 22px) * var(--c, 1));
  --track: linear-gradient(to right, var(--red) var(--a), color-mix(in srgb, var(--red) 24%, var(--chip)) var(--a) var(--b), var(--chip) var(--b));
  grid-area: range; width: 100%; min-width: 0; height: 32px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.tb-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--track); }
.tb-range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--track); }
.tb-range::-webkit-slider-thumb {
  width: 22px; height: 22px; margin-top: -7px; border: 2px solid var(--red); border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3); -webkit-appearance: none; appearance: none;
}
.tb-range::-moz-range-thumb { box-sizing: border-box; width: 22px; height: 22px; border: 2px solid var(--red); border-radius: 50%; background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.tb-range:focus-visible { outline: none; }
.tb-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus); }
.tb-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--focus); }
.tb-sp__num {
  grid-area: num; width: 100%; height: 34px; padding: 0 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  color: var(--text); font: inherit; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.tb-sp__num::-webkit-outer-spin-button, .tb-sp__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tb-sp__num:focus { outline: none; border-color: var(--focus); }
@media (max-width: 480px) {
  .tb-editor { padding: 12px; }
  .tb-mon__head { gap: 10px; }
  .tb-mon__img { width: 72px; height: 72px; }
  .tb-sp__row { grid-template-columns: 34px minmax(0, 1fr) 34px 46px; grid-template-areas: "stat stat stat final" "minus range plus num"; row-gap: 2px; }
  .tb-sp__base, .tb-sp__pts { display: none; }
}
.tb-up { color: #e8590c; font-weight: 800; }
.tb-down { color: #1c7ed6; font-weight: 800; }
.tb-over { color: var(--red); font-weight: 800; }
.tb-mon__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.tb-panels { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; margin-top: 12px; }
@media (min-width: 760px) { .tb-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tb-panel { min-width: 0; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.tb-panel h2 { display: flex; align-items: center; margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; }
.tb-panel--wide { grid-column: 1 / -1; }
@media (max-width: 480px) { .tb-panel { padding: 12px; } }
.tb-status { margin: 0; font-weight: 800; }
.tb-status.is-ok { color: var(--good-ink); }
.tb-status.is-bad { color: var(--bad-ink); }
.tb-count { margin: 2px 0 10px; color: var(--muted); font-size: .86rem; }
.tb-checks { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.tb-checks .tb-issues { margin: 0; }
.tb-who { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: .9rem; font-weight: 700; }
button.tb-who { cursor: pointer; }
button.tb-who:hover { color: var(--link); }
.tb-who img { width: 32px; height: 32px; margin: -6px -2px -6px -4px; image-rendering: pixelated; }
/* Weaknesses: each attacking type against each Pokémon in the type chart's colours (2× warm, ½× green, 0× dark), and
   how many of the team are weak to it or resist it. Phones keep just the type's symbol. */
.tb-worry { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--muted); font-size: .9rem; }
.tb-worry b { color: var(--text); }
.tb-scroll { overflow-x: auto; }
.tb-wk { border-collapse: separate; border-spacing: 2px; font-size: .8rem; font-variant-numeric: tabular-nums; }
.tb-wk th, .tb-wk td { padding: 0; text-align: center; }
.tb-wk td, .tb-wk thead th + th { width: 52px; }
.tb-wk thead th { padding-bottom: 2px; color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.tb-wk thead img { display: block; width: 40px; height: 40px; margin: 0 auto; image-rendering: pixelated; }
.tb-wk tbody th { padding-right: 4px; text-align: left; white-space: nowrap; }
.tb-wk td { height: 28px; border-radius: 7px; background: var(--surface-2); font-weight: 800; }
.tb-wk td[data-x="4"] { background: color-mix(in srgb, #e2702f 55%, var(--surface)); color: color-mix(in srgb, #e2702f 25%, var(--text)); }
.tb-wk td[data-x="2"] { background: color-mix(in srgb, #e2702f 30%, var(--surface)); color: color-mix(in srgb, #e2702f 50%, var(--text)); }
.tb-wk td[data-x="0.5"] { background: color-mix(in srgb, #3c9a5c 26%, var(--surface)); color: color-mix(in srgb, #3c9a5c 60%, var(--text)); }
.tb-wk td[data-x="0.25"] { background: color-mix(in srgb, #3c9a5c 46%, var(--surface)); color: color-mix(in srgb, #3c9a5c 35%, var(--text)); }
.tb-wk td[data-x="0"] { background: color-mix(in srgb, var(--text) 68%, var(--surface)); color: var(--surface); }
.tb-wk .tb-tot { padding: 0 3px; background: none; }
.tb-wk td.tb-tot--weak { color: var(--bad-ink); }
.tb-wk td.tb-tot--res { color: var(--good-ink); }
.tb-wk tr.is-hole th .type { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--red); }
@media (max-width: 560px) {
  .tb-wk .type { padding: 3px; }
  .tb-wk .type .ti { width: 15px; height: 15px; margin: 0; }
  .tb-wk .type > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tb-wk { width: 100%; }
  .tb-wk td, .tb-wk thead th + th { width: auto; }
  .tb-wk thead img { width: 32px; height: 32px; }
}
/* Coverage: each type with how many of the team hit it super effectively (the moves in its tip) */
.tb-cov__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; color: var(--muted); font-size: .9rem; }
.tb-cov__sum > b { color: var(--text); }
.tb-cov__walls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; }
.tb-cov { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin: 10px 0 0; padding: 0; }
.tb-cov__t {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 4px 4px 8px; border: 0; border-radius: 999px; background: var(--tc);
  color: var(--tt, #fff); font: inherit; font-size: .8rem; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); cursor: help;
}
.tb-cov__t .ti { width: 15px; height: 15px; flex: none; fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.tb-cov__t > span { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.tb-cov__t > b { flex: none; min-width: 24px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #201a15; font-size: .78rem; text-align: center; text-shadow: none; }
.tb-cov__t.t-electric, .tb-cov__t.t-ice { text-shadow: none; }
.tb-cov__t.is-none { background: var(--surface-2); color: var(--muted); text-shadow: none; box-shadow: inset 0 0 0 1px var(--line); }
.tb-cov__t.is-none .ti { fill: color-mix(in srgb, var(--tc) 75%, var(--text)); filter: none; }
.tb-cov__t.is-none > b { background: none; color: var(--muted); }
.tb-speed { list-style: none; display: grid; gap: 2px; max-height: 420px; overflow: auto; margin: 0; padding: 0; }
.tb-speed li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; padding: 4px 8px; border-radius: 8px; font-size: .88rem; }
.tb-speed li b { grid-row: span 2; align-self: center; font-variant-numeric: tabular-nums; }
.tb-speed li small { color: var(--muted); font-size: .76rem; }
.tb-speed li a { color: var(--text); text-decoration: none; }
.tb-speed li.is-mine { background: color-mix(in srgb, var(--red) 14%, var(--surface-2)); font-weight: 700; }
.tb-dialog { width: min(560px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); }
.tb-dialog--wide { width: min(1000px, calc(100vw - 24px)); }
.tb-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.tb-dialog h2 { margin: 0; font-size: 1.15rem; }
.tb-dialog__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.tb-dialog__hint { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }
.tb-dialog__msg { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--red) 12%, var(--surface-2)); font-size: .9rem; font-weight: 600; }
.tb-dialog textarea {
  width: 100%; margin: 10px 0; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); font: .88rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical;
}
.tb-dialog__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.tb-go { background: var(--red); border-color: transparent; color: #fff; }
.tb-go:hover:not(:disabled) { filter: brightness(1.08); }
.tb-go:disabled { opacity: .5; cursor: default; }
/* The team sheet: a card per Pokémon, printed on its own (html.tb-printing, below) */
.tb-sheet { margin-top: 12px; }
.tb-sheet__head h3 { margin: 0; font-size: 1.2rem; font-weight: 800; overflow-wrap: anywhere; }
.tb-sheet__head p { margin: 2px 0 12px; color: var(--muted); font-size: .86rem; }
.tb-sheet__mons { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; margin: 0; padding: 0; }
.tb-card { min-width: 0; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); break-inside: avoid; }
.tb-card__head { display: flex; align-items: center; gap: 10px; }
.tb-card__img { width: 72px; height: 72px; flex: none; border-radius: 12px; background: var(--sprite-bg); image-rendering: pixelated; }
.tb-card h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; }
.tb-card .types { gap: 4px; }
.tb-card__item { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-weight: 700; }
.tb-card__item .item-ico, .tb-card__item .item-ico--none { width: 24px; height: 24px; }
.tb-card__facts { display: grid; gap: 2px; margin: 6px 0 0; font-size: .86rem; }
.tb-card__facts div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.tb-card__facts dt { color: var(--muted); }
.tb-card__facts dd { margin: 0; font-weight: 600; }
.tb-card__stats { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: .78rem; font-variant-numeric: tabular-nums; text-align: center; }
.tb-card__stats th, .tb-card__stats td { padding: 2px 3px; }
.tb-card__stats th { color: var(--muted); font-size: .66rem; font-weight: 800; white-space: nowrap; }
.tb-card__stats tbody th { text-align: left; }
.tb-card__stats tbody tr + tr td { font-weight: 800; }
.tb-card__moves { list-style: none; display: grid; gap: 4px; margin: 10px 0 0; padding: 0; font-size: .86rem; }
.tb-card__moves li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--surface-2); }
.tb-card__moves li > span:not(.tdot) { flex: 1; min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.tb-card__moves small { flex: none; color: var(--muted); font-size: .72rem; }
.tb-card__moves .tdot { width: 22px; height: 22px; }
.tb-card__moves .tdot .ti { width: 13px; height: 13px; }
.tb-card__moves .is-empty { padding-left: 12px; color: var(--muted); }
/* The team as a picture */
.tb-shot { margin-top: 12px; }
.tb-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.tb-shot__wait { display: grid; place-items: center; min-height: 200px; margin: 0; border-radius: 12px; background: var(--surface-2); color: var(--muted); }
/* A popover where the browser has them, so it shows above an open dialog too */
.tb-toast {
  position: fixed; inset: auto auto 20px 50%; z-index: 80; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 10px 16px;
  border: 0; border-radius: 12px; background: var(--text); color: var(--bg); font-weight: 600; transform: translateX(-50%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3); overflow: visible;
}
@media (max-width: 760px) { .tb-toast { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.tb-help summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.tb-help summary::-webkit-details-marker { display: none; }
.tb-help summary h2 { margin: 0; }
.tb-help summary::after {
  content: ""; width: 8px; height: 8px; margin: -4px 4px 0 auto; border: solid var(--muted); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform .15s;
}
.tb-help[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.tb-help ul { margin: 10px 0 0; padding-left: 18px; line-height: 1.6; }
/* Printing the team sheet: just it, in light colours */
.tb-print { display: none; }
@media print {
  html.tb-printing body { padding: 0; background: #fff; }
  html.tb-printing body > :not(.tb-print), html.tb-printing dialog { display: none !important; }
  html.tb-printing .tb-print {
    display: block; color: #111; --surface: #fff; --surface-2: #f4f1ec; --line: #d9d2c7; --text: #111; --muted: #555; --sprite-bg: #f4f1ec;
  }
  html.tb-printing .tb-sheet { margin: 0; }
  html.tb-printing .tb-sheet__mons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.tb-printing .tb-print * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- damage calculator (static/calc.js) ---------- */
.dc { margin: 16px 0; }
/* Room kept while Smogon's calc and the data load, so what's below doesn't jump when it draws */
.dc.is-loading { min-height: 70vh; }
.dc-loading { margin: 0; padding: 16px 18px; border-radius: var(--radius); border: 1px dashed var(--line); background: var(--surface); color: var(--muted); font-weight: 600; }
.dc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.dc-share { margin-left: auto; }
/* The two Pokémon side by side, the swap button between them; stacked on narrower screens */
.dc-sides { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.dc-swap {
  justify-self: center; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); box-shadow: var(--shadow); cursor: pointer;
}
.dc-swap:hover { background: var(--chip); }
.dc-swap .i { transform: rotate(90deg); }
@media (min-width: 900px) {
  .dc-sides { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: start; }
  .dc-swap { margin-top: 30px; }
  .dc-swap .i { transform: none; }
}
.dc-side { padding: 14px; }
.dc-head { display: flex; align-items: center; gap: 12px; }
.dc-sprite { width: 88px; height: 88px; flex: none; border-radius: 16px; border: 1px solid var(--line); background: var(--sprite-bg); image-rendering: pixelated; }
.dc-sprite[src*="/official-artwork/"] { image-rendering: auto; padding: 6px; }
.dc-id { display: grid; gap: 6px; flex: 1; min-width: 0; }
.dc-eyebrow { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dc-id .types { align-items: center; }
.dc-tera { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
/* Pickers: the site's search list under each; the Pokémon's is the search box's little screen */
.dc-combo { position: relative; min-width: 0; }
.dc-combo .search__results { z-index: 25; max-height: min(50vh, 340px); }
@media (max-width: 560px) { .dc-combo .search__results, .dc-pick .search__results, .dc-move__pick .search__results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; } }
.dc-combo--mon > .i { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--lcd-ink); opacity: .7; pointer-events: none; }
.dc-combo--mon input {
  width: 100%; height: 44px; padding: 0 14px 0 38px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--lcd-ink) 25%, transparent);
  background: var(--lcd); color: var(--lcd-ink); font: inherit; font-size: 1.1rem; font-weight: 800; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .16);
  -webkit-appearance: none; appearance: none;
}
.dc-combo--mon input:focus { outline: none; border-color: var(--focus); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .16), 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.dc-head__more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; }
.dc-megas { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-note { color: var(--muted); font-size: .8rem; }
.dc-dex { margin-left: auto; font-size: .85rem; font-weight: 700; text-decoration: none; }
.dc-dex:hover { text-decoration: underline; }
.dc-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.dc-sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 0 0 8px; color: var(--muted); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dc-sub small { font-size: .82rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
/* Moves: the pick on top, its result under it (a bar of the HP left after the hit), the open one's details below */
.dc-moves { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.dc-move { border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.dc-move.is-open { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 14%, transparent); }
.dc-move__pick { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px 0 6px; }
.dc-combo--move { position: static; flex: 1; }
.dc-combo--move input {
  width: 100%; height: 36px; padding: 0 8px; border: 1px solid transparent; border-radius: 10px; background: transparent;
  color: var(--text); font: inherit; font-weight: 700;
}
.dc-combo--move input::placeholder { color: var(--muted); font-weight: 600; }
.dc-combo--move input:hover { border-color: var(--line); background: var(--surface); }
.dc-combo--move input:focus { outline: none; border-color: var(--focus); background: var(--surface); }
.dc-move__meta { display: flex; align-items: center; gap: 6px; flex: none; }
.dc-bp { min-width: 2.2ch; font-size: .88rem; text-align: right; font-variant-numeric: tabular-nums; }
.dc-res {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar bar" "pct ko"; align-items: center; gap: 5px 10px;
  width: 100%; padding: 6px 14px 10px; border: 0; border-radius: 0 0 14px 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.dc-res .dc-hp { grid-area: bar; }
.dc-res__pct { grid-area: pct; font-weight: 800; font-variant-numeric: tabular-nums; }
.dc-res .dc-ko { grid-area: ko; justify-self: end; }
.dc-res__note { grid-column: 1 / -1; color: var(--muted); font-size: .86rem; }
.dc-hp { display: flex; height: 8px; overflow: hidden; border-radius: 999px; background: var(--chip); }
.dc-hp i { display: block; height: 100%; background: var(--hp); transition: width .2s; }
.dc-hp .dc-hp__roll { background: repeating-linear-gradient(-45deg, var(--hp) 0 3px, color-mix(in srgb, var(--hp) 40%, transparent) 3px 6px); }
.dc-hp--hi { --hp: var(--s5); }
.dc-hp--mid { --hp: var(--s3); }
.dc-hp--lo { --hp: var(--s1); }
/* Sure KOs stand out most, then chances to KO, then 2HKOs */
.dc-ko { padding: 1px 8px; border-radius: 999px; color: var(--muted); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.dc-ko.is-ko { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--bad-ink); }
.dc-ko.is-maybe { background: color-mix(in srgb, #f76707 16%, transparent); color: var(--text); }
.dc-ko.is-2 { background: color-mix(in srgb, #fab005 20%, transparent); color: var(--text); }
.dc-more { padding: 0 8px 8px; }
/* The open move on the Pokédex's screen: the numbers, the line to copy and every roll */
.dc-lcd {
  padding: 12px 14px; border-radius: 12px; color: var(--lcd-ink); background-color: var(--lcd);
  background-image: linear-gradient(var(--lcd-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lcd-grid) 1px, transparent 1px);
  background-size: 14px 14px; border: 2px solid color-mix(in srgb, var(--lcd-ink) 20%, transparent); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .12);
}
.dc-lcd p, p.dc-lcd__line { margin: 0; }
p.dc-lcd__line { padding: 4px 6px; color: var(--muted); font-size: .88rem; }
.dc-lcd__head { font-family: var(--pixel); font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.dc-lcd .dc-lcd__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 4px 0 8px; font-weight: 700; }
.dc-lcd__big b { font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dc-lcd .dc-hp { height: 12px; background: color-mix(in srgb, var(--lcd-ink) 14%, transparent); }
.dc-lcd .dc-lcd__hp { margin-top: 6px; font-size: .8rem; opacity: .85; }
.dc-lcd .dc-lcd__desc {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--lcd-ink) 30%, transparent); font-size: .86rem; font-weight: 600; line-height: 1.45;
}
.dc-lcd__desc span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dc-copy {
  flex: none; padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--lcd-ink) 35%, transparent);
  background: color-mix(in srgb, var(--lcd-ink) 10%, transparent); color: var(--lcd-ink); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer;
}
.dc-copy:hover { background: color-mix(in srgb, var(--lcd-ink) 18%, transparent); }
.dc-lcd .dc-lcd__rolls { margin-top: 6px; font-size: .74rem; opacity: .82; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Ability, item, alignment (with level and Tera in Scarlet & Violet) */
.dc-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.dc-sel { display: flex; width: 100%; }
.dc-sel select, .dc-sel input { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ab { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dc-ab > .select { flex: 1; min-width: 0; }
.dc-nat { grid-column: 1 / -1; }
.dc-pick { position: relative; gap: 6px; }
.dc-pick > label { flex: none; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dc-pick__ico:empty { display: none; }
.dc-pick__ico img { display: block; width: 28px; height: 28px; }
.dc-combo--item { position: static; flex: 1; }
.dc-combo--item input { width: 100%; height: 40px; padding: 0 10px 0 2px; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600; }
.dc-combo--item input:focus { outline: none; }
.dc-combo--item input[readonly] { color: var(--text); }
.dc-pick .sr-icon img { width: 30px; height: 30px; image-rendering: pixelated; }
/* The list sits inside the select pill: its names aren't the pill's small label, and what each item does goes on a
   line of its own under the name */
.dc-pick .search__results span { color: inherit; font-size: inherit; font-weight: inherit; text-transform: none; letter-spacing: normal; }
.dc-pick .search__results button { flex-wrap: wrap; row-gap: 0; }
.dc-pick .search__results .sr-kind { flex: 1 0 100%; min-width: 0; padding-left: 50px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.dc-lv { padding: 9px 10px 9px 2px; border: 0; background: transparent; font-weight: 600; }
.dc-lv:focus { outline: none; }
.dc-switch:empty { display: none; }
.dc-check { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: .88rem; font-weight: 600; }
.dc-check input { width: 18px; height: 18px; accent-color: var(--red); }
.dc-warn { grid-column: 1 / -1; margin: 0; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, #fab005 20%, transparent); font-size: .84rem; }
/* Stats: base, the points put in, the battle boost and what it comes to */
.dc-stats { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dc-stats th, .dc-stats td { padding: 4px 3px; text-align: left; }
.dc-stats thead th { color: var(--muted); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dc-stats thead th:last-child { text-align: right; }
.dc-stats tbody th { font-weight: 700; white-space: nowrap; }
.dc-stats tbody tr + tr { border-top: 1px solid var(--line); }
.dc-stats tfoot td { padding-top: 8px; color: var(--muted); font-size: .8rem; }
.dc-base { color: var(--muted); }
.dc-stats .dc-final { text-align: right; font-size: 1.02rem; font-weight: 800; }
.dc-mark { margin-left: 2px; font-weight: 800; }
.dc-mark.is-up { color: #e8590c; }
.dc-mark.is-down { color: #1c7ed6; }
.dc-step { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.dc-step button { width: 30px; height: 32px; padding: 0; border: 0; background: var(--surface-2); color: var(--text); font-size: 1rem; font-weight: 700; cursor: pointer; }
.dc-step button:hover { background: var(--chip); }
.dc-step input, .dc-num {
  height: 32px; border: 0; background: var(--surface); color: var(--text); font: inherit; font-weight: 700; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.dc-step input { width: 40px; }
.dc-num { width: 52px; padding: 0 2px; border: 1px solid var(--line); border-radius: 8px; }
.dc-step input::-webkit-outer-spin-button, .dc-step input::-webkit-inner-spin-button,
.dc-num::-webkit-outer-spin-button, .dc-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dc-boost { height: 32px; padding: 0 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.dc-boost.is-up { color: var(--tone-up); border-color: currentColor; }
.dc-boost.is-down { color: var(--tone-down); border-color: currentColor; }
.dc-over { color: var(--red); font-weight: 800; }
/* Status and the HP it has left */
.dc-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dc-cond > .select { width: auto; }
.dc-hpctl { display: flex; align-items: center; gap: 8px; flex: 1 1 230px; min-width: 0; }
.dc-hpctl label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dc-hpctl input[type="range"] { flex: 1; min-width: 60px; accent-color: var(--red); }
.dc-hpctl .dc-num { width: 48px; }
.dc-hpctl__pct { margin-left: -4px; color: var(--muted); font-weight: 700; }
.dc-hpctl__out { color: var(--muted); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Field: the weather and terrain, crits and spread moves, and what's up on each side */
.dc-field { margin-top: 12px; padding: 14px 16px 16px; }
.dc-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; }
.dc-title::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }
.dc-fgrid { display: grid; gap: 12px 28px; }
@media (min-width: 900px) { .dc-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-fcol { display: grid; align-content: start; gap: 12px; }
.dc-frow { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.dc-frow .chip-row { margin: 0; }
.dc-flabel { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
/* While the open move's row is scrolled away, its numbers float under the header; a tap goes back to it */
.dc-float {
  position: fixed; top: calc(var(--header-h) + 10px); left: 50%; z-index: 45; display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 24px); padding: 7px 8px 7px 14px; translate: -50% 0; border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--lcd-ink) 22%, transparent); background: var(--lcd); color: var(--lcd-ink);
  font: inherit; font-size: .86rem; white-space: nowrap; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); cursor: pointer;
}
.dc-float__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.dc-float b { font-variant-numeric: tabular-nums; }
.dc-float .dc-ko { color: inherit; }
@media (max-width: 760px) { body:has(input:focus, select:focus) .dc-float { display: none; } }
.dc-toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 80; max-width: calc(100vw - 32px); margin: 0; padding: 10px 16px; border-radius: 12px;
  background: var(--text); color: var(--bg); font-weight: 600; transform: translateX(-50%); box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
@media (max-width: 760px) { .dc-toast { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.dc-help ul { padding-left: 18px; line-height: 1.6; }

/* ---------- getting back: to the page you came from, to the top, and down again ---------- */
.back-pill {
  display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); font-size: .88rem; font-weight: 700;
  text-decoration: none;
}
.back-pill:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.back-pill .i { width: 18px; height: 18px; }
.to-top {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 45;
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 0; border-radius: 999px;
  background: var(--text); color: var(--bg); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}
.to-top[hidden] { display: none; }
.to-top .i { width: 18px; height: 18px; }

/* ---------- footer ---------- */
.site-foot { padding: 24px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.site-foot p { max-width: 80ch; margin: 0 0 8px; }

/* ---------- compact density ---------- */
html[data-density="compact"] body { font-size: 15px; }
html[data-density="compact"] .sections { gap: 10px; }
html[data-density="compact"] .card__head { padding: 10px 12px 0; }
html[data-density="compact"] .card__body { padding: 10px 12px 12px; }
html[data-density="compact"] .card.is-collapsed .card__head { padding-bottom: 10px; }
html[data-density="compact"] .stats-bars { gap: 4px; }
html[data-density="compact"] .mv { padding: 6px 2px; }
html[data-density="compact"] .facts > div { padding: 8px 10px; }
html[data-density="compact"] .entries li, html[data-density="compact"] .abil-list li { padding: 9px 12px; }
html[data-density="compact"] .mon-list[data-view="grid"] { gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}