/* 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;
  /* The floating header: the gap above it, the capsule, its lens; --header-h is the room it takes at the top, which
     sticky bars, jump targets and app.js sit under. All three slim once the page scrolls (html.is-scrolled). */
  --header-gap: 8px; --capsule-h: 56px; --lens: 30px;
  --header-h: calc(var(--header-gap) + var(--capsule-h));
  --lip: 0px;
  --sprite-bg: var(--bg);

  --bg: #f3efe9;
  --bg-dots: rgba(120, 90, 60, .07);
  --surface: #fffdfa;
  --surface-2: #f5f0e9;
  --line: #e7dfd4;
  --text: #201a15;
  --muted: #6d6258; /* 4.5:1 or more on every light surface, chips (the Status pill, badges) included */
  --red: #dc1e26;
  --red-2: #b3141b;
  --red-3: #8a0e14;
  --bezel: #efebe5;
  /* The Pokédex screen: a quiet grey-green, its grid barely there */
  --lcd: #e3eae5;
  --lcd-ink: #26382e;
  --lcd-grid: rgba(38, 56, 46, .035);
  --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). Charts with several lines take
     the next ones in this order (a validated categorical palette, each step chosen for its theme) */
  --series-1: #2a78d6; --good-ink: #006300; --bad-ink: #d03b3b;
  --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4;
  /* 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: #131a17; --lcd-ink: #bfdfcc; --lcd-grid: rgba(191, 223, 204, .03);
    --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;
    --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181;
    --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: #131a17; --lcd-ink: #bfdfcc; --lcd-grid: rgba(191, 223, 204, .03);
  --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;
  --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181;
  --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; }
/* Jumps to a part of the page land just under the sticky header (and on a Pokémon page, under its section bar too) */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text);
  background: var(--bg);
  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; }
/* Customize › Brief text: the explanations go (how-to lines, method notes, long hints); the data, the controls and
   their (i) tips stay */
html[data-brief="on"] .explain { display: none; }

/* ---------- header: the Pokédex lid, floating ---------- */
/* The red lid floats over the page as a rounded capsule lined up with the content, and slims a little once the page
   scrolls (app.js sets html.is-scrolled), frosting what passes beneath it. The gap around it lets clicks through. */
html.is-scrolled { --header-gap: 6px; --capsule-h: 50px; --lens: 26px; }
.dex-top {
  position: sticky; top: 0; z-index: 50; height: var(--header-h); padding: var(--header-gap) 16px 0; color: #fff;
  pointer-events: none;
}
.dex-top__inner {
  position: relative; isolation: isolate; height: var(--capsule-h); max-width: calc(var(--wrap) - 32px); margin: 0 auto;
  padding: 0 9px 0 13px; display: flex; align-items: center; gap: 14px; border-radius: 18px; pointer-events: auto;
  transition: height .2s ease;
}
/* The capsule's red, its frost and its shadow sit on a layer behind the contents rather than on the bar itself, so the
   bar never becomes the box the search's fixed list on phones is placed in */
.dex-top__inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--red);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 6px -2px rgba(0, 0, 0, .25), 0 14px 30px -16px rgba(0, 0, 0, .6);
  transition: background-color .2s ease;
}
html.is-scrolled .dex-top__inner::before {
  background: color-mix(in srgb, var(--red) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.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; the lens glows a little more when pointed at */
.lens {
  width: var(--lens); height: var(--lens); 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); transition: box-shadow .2s, width .2s ease, height .2s ease;
}
.brand:hover .lens { box-shadow: 0 0 0 1.5px var(--red-3), 0 0 18px rgba(92, 193, 255, .7); }
/* The lights line up with the lens's top edge */
.leds { display: flex; gap: 4px; align-self: flex-start; margin: calc((var(--capsule-h) - var(--lens)) / 2) 0 0 -4px; transition: margin .2s ease; }
.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); }
.brand__name small { margin-left: 1px; font-size: .58em; font-weight: 700; letter-spacing: 0; color: rgba(255, 255, 255, .6); }
.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); }
/* In the header: white tabs on the red, the page you're on pressed into a deeper red pill */
.tabs--head { align-items: center; }
.tabs--head > a, .tabs--head .tabs__more summary { color: rgba(255, 255, 255, .85); transition: background-color .15s, color .15s; }
.tabs--head > a:hover, .tabs--head .tabs__more summary:hover, .tabs--head .tabs__more[open] summary { color: #fff; background: rgba(255, 255, 255, .14); }
.tabs--head > a[aria-current="page"], .tabs--head .tabs__more.is-current summary {
  color: #fff; background: var(--red-2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); font-weight: 700;
}
.tabs--page { display: none; }
/* "Browse": the reference hubs (types, abilities...) in a menu, each with its icon */
.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__menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  width: min(480px, calc(100vw - 32px)); padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 24px 48px -16px rgba(0, 0, 0, .45);
}
/* A notch pointing up at "Browse" */
.tabs__menu::before {
  content: ""; position: absolute; top: -7px; right: 30px; width: 12px; height: 12px; border-radius: 3px 0 0 0;
  background: var(--surface); border: solid var(--line); border-width: 1px 0 0 1px; transform: rotate(45deg);
}
.tabs .tabs__menu a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "ico name" "ico blurb"; align-items: center; gap: 0 10px;
  padding: 8px 10px; border-radius: 12px; color: var(--text); text-align: left; white-space: normal;
}
.tabs .tabs__menu a:hover { background: var(--surface-2); }
.tabs .tabs__menu a[aria-current="page"] { background: color-mix(in srgb, var(--red) 8%, var(--surface-2)); }
.tabs__menu b { grid-area: name; align-self: end; font-weight: 700; }
.tabs__menu small { grid-area: blurb; align-self: start; color: var(--muted); font-size: .78rem; font-weight: 500; line-height: 1.35; }
/* A reference section's icon in a menu (render.py: browse_links), in red on a tile; the page you're on fills it in */
.menu-ico {
  grid-area: ico; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: color-mix(in srgb, var(--red) 10%, var(--surface-2)); color: var(--red);
}
.menu-ico .i { width: 20px; height: 20px; }
a[aria-current="page"] > .menu-ico { background: var(--red); color: #fff; }
.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; z-index: 1; width: 18px; height: 18px; color: rgba(255, 255, 255, .85); pointer-events: none; }
/* The search box: a light, see-through field on the red that turns into a white (or dark) field to type in */
.search input {
  width: 100%; height: 38px; padding: 0 14px 0 38px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .14); color: #fff; font-weight: 500;
  -webkit-appearance: none; appearance: none; transition: background-color .15s, box-shadow .15s, border-color .15s;
}
.search input::placeholder { color: rgba(255, 255, 255, .85); opacity: 1; }
.search input:hover { background: rgba(255, 255, 255, .2); }
.search input:focus {
  outline: none; border-color: transparent; background: var(--surface); color: var(--text);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .4), 0 8px 20px -8px rgba(0, 0, 0, .45);
}
.search input:focus::placeholder { color: var(--muted); }
.search:focus-within > .i { color: var(--muted); }
/* "/" goes to the search from any page (app.js): shown on wide screens with a keyboard, until you type */
.search__key {
  position: absolute; right: 10px; display: none; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .35); border-bottom-width: 2px; color: rgba(255, 255, 255, .9); font: 700 .72rem/1 var(--font);
  pointer-events: none;
}
@media (min-width: 1024px) and (hover: hover) {
  .search__key { display: grid; }
  .search input { padding-right: 40px; }
  .search:focus-within .search__key, .search input:not(:placeholder-shown) ~ .search__key { display: none; }
}
.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; }
/* Dex numbers ("#0445") in Rubik's even-width digits: the pixel font squeezes them at this size */
.search__results small { font-size: .74rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
/* A Pokémon's types stay together at the end of its row */
.sr-types { display: flex; gap: 4px; flex: none; }
.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); }
/* DexPicker (app.js): the one picker for game data. Under its field, a list with a row per choice: its picture, its name
   over what it does (two lines at most), its numbers in a right-hand column (how much players use it, then a move's
   category and power); most used first or A–Z, narrowed by quick-filter chips. On a phone, a sheet at the foot of the
   screen. The field gets an × to clear it while there's text. */
.dexpick {
  position: fixed; z-index: 90; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}
.dexpick__head { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px 4px 12px; }
.dexpick__title { flex: 1; min-width: 0; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dexpick__close { display: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--chip); color: var(--text); font: inherit; font-size: 1.2rem; cursor: pointer; }
/* The quick filters: one row that scrolls sideways, kept whole when the list below is long (only the list shrinks) */
.dexpick__chips { flex: none; display: flex; gap: 4px; padding: 2px 8px 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.dexpick__chips::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .dexpick__chips { flex-wrap: wrap; overflow-x: visible; } } /* a mouse can't swipe: all of them, in rows */
.dexpick__chip {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit; font-size: .78rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.dexpick__chip:has(> .tdot:only-child) { padding: 2px; } /* a type's chip is its dot */
.dexpick__chip .tdot { width: 22px; height: 22px; }
.dexpick__chip .tdot .ti { width: 13px; height: 13px; }
.dexpick__chip[aria-pressed="true"] { border-color: var(--text); background: var(--chip-on); color: var(--chip-on-ink); }
.dexpick__chip:has(> .tdot:only-child)[aria-pressed="true"] { background: var(--surface); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.dexpick__chips[hidden] + .dexpick__list { border-top: 1px solid var(--line); }
.dexpick__list { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 4px; list-style: none; overscroll-behavior: contain; }
/* A row: the picture on the left, centred on the name and the line under it; the numbers on the right */
.dexpick__opt {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ico main num" "ico sub num";
  align-items: center; column-gap: 10px; padding: 6px 10px; border-radius: 10px; cursor: pointer;
}
.dexpick__opt.no-sub { grid-template-areas: "ico main num" "ico main num"; }
.dexpick.no-ico .dexpick__opt { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main num" "sub num"; }
.dexpick.no-ico .dexpick__opt.no-sub { grid-template-areas: "main num" "main num"; }
.dexpick.no-ico .dexpick__ico { display: none; }
.dexpick__opt[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--red); }
.dexpick__opt:hover { background: var(--surface-2); }
.dexpick__opt.is-off { opacity: .6; }
.dexpick__ico { grid-area: ico; display: grid; place-items: center; width: 36px; height: 36px; }
.dexpick__ico img { width: 40px; height: 40px; max-width: none; image-rendering: pixelated; }
.dexpick__ico .item-ico { width: 30px; height: 30px; }
.dexpick__ico .item-ico--none { width: 22px; height: 22px; }
.dexpick__ico .tdot { flex: none; width: 28px; height: 28px; }
.dexpick__ico .tdot .ti { width: 16px; height: 16px; }
.dexpick__main { grid-area: main; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .92rem; font-weight: 700; }
.dexpick__main > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dexpick__main > :not(:first-child) { flex: none; }
.dexpick__main .tdot { width: 18px; height: 18px; }
.dexpick__main .tdot .ti { width: 11px; height: 11px; }
.dexpick__main small { color: var(--muted); font-size: .74rem; font-weight: 700; }
.dexpick__sub {
  grid-area: sub; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  color: var(--muted); font-size: .78rem; font-weight: 500; line-height: 1.35;
}
.dexpick__num { grid-area: num; display: grid; justify-items: end; gap: 1px; min-width: 2.6em; font-variant-numeric: tabular-nums; text-align: right; }
.dexpick__num b { font-size: .84rem; font-weight: 800; }
.dexpick__num > :not(b) { color: var(--muted); font-size: .76rem; font-weight: 700; }
.dexpick__more, .dexpick__none { padding: 10px; color: var(--muted); font-size: .86rem; }
.dexpick__note { flex: none; margin: 0; padding: 6px 12px 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
.dexpick__note .src { font-size: .66rem; }
.dexpick.is-sheet { left: 0; right: 0; border-radius: 18px 18px 0 0; border-bottom: 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .3); }
.dexpick.is-sheet .dexpick__head { padding: 8px 8px 6px 16px; }
.dexpick.is-sheet .dexpick__close { display: grid; place-items: center; }
.dexpick.is-sheet .dexpick__opt { padding: 9px 12px; }
/* The × in a field: clears what's typed and lists everything again */
.dexpick-host { position: relative; }
.dexpick__x {
  position: absolute; z-index: 2; top: 50%; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
}
.dexpick__x:hover, .dexpick__x:focus-visible { background: var(--chip); color: var(--text); }
.dexpick__x .i { width: 16px; height: 16px; }
.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; transition: background-color .15s; }
.dex-top .icon-btn:hover { background: rgba(255, 255, 255, .24); }
/* 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;
    max-height: calc(100dvh - var(--header-h) - 84px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    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; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "ico name" "ico blurb"; align-items: center; gap: 0 12px;
    padding: 8px 10px; border-radius: 12px; color: var(--text); text-decoration: none;
  }
  .bnav__sheet a b { grid-area: name; align-self: end; }
  .bnav__sheet a small { grid-area: blurb; align-self: start; color: var(--muted); font-size: .8rem; }
  .bnav__sheet .menu-ico { width: 34px; height: 34px; }
  .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) :is(.bnav, .dock) { display: none; }
}
/* 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. Narrower still (tablets),
   the lights go and the tabs close up, so the box keeps room to type in. */
.tabs__alt { display: none; }
@media (max-width: 400px) {
  .tabs__opt { display: none; }
  .tabs__alt { display: inline; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .tabs--head .tabs__opt { display: none; }
  .tabs--head .tabs__alt { display: inline; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .dex-top__inner { gap: 10px; }
  .leds { display: none; }
  .tabs--head > a, .tabs--head .tabs__more summary { padding-left: 10px; padding-right: 10px; font-size: .88rem; }
  .tabs--head .tabs__more summary { padding-right: 7px; }
}
@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; }
}
/* On phones the capsule hugs the edges a little closer and stays shorter */
@media (max-width: 760px) {
  :root { --header-gap: 6px; --capsule-h: 52px; --lens: 28px; }
  html.is-scrolled { --header-gap: 4px; --capsule-h: 46px; --lens: 24px; }
  .dex-top { padding: var(--header-gap) 8px 0; }
  .dex-top__inner { padding: 0 7px 0 11px; border-radius: 16px; }
}
/* What sticks under the header follows it as it slims */
:is(.sticky-tools, .list-head, .toc) { transition: top .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .dex-top__inner, .dex-top__inner::before, .lens, .leds, :is(.sticky-tools, .list-head, .toc) { transition: none; }
}

/* ---------- 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-size: .72rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- 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; }
}
/* The entry as a quiet card, the game it's from above the words. The Pokédex's retro screen stays with the device beside
   it (.bezel, .lcd), the one place the site keeps it. */
.dex-entry { margin: 0; padding: 14px 16px 12px; border-radius: 16px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); }
.dex-entry__label {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; color: var(--muted);
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.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-size: .78rem; font-weight: 700; color: var(--text); background: var(--chip); border: 1px solid var(--line);
}
.dex-entry__read:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.dex-entry__read .i, .say-btn .i { width: 16px; height: 16px; }
.dex-entry__read.is-playing, .say-btn.is-playing { background: var(--text); color: var(--surface); }
.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; }
/* "Add to team" beside the name, red like the set cards' (app.js: addToTeam); it wraps under a long name */
.hero__title { flex-wrap: wrap; row-gap: 6px; }
.add-team {
  flex: none; display: inline-flex; align-items: center; gap: 6px; 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);
}
.add-team:hover { background: var(--red-2); }
.add-team .i { width: 16px; height: 16px; stroke-width: 2.6; }
.add-team[aria-busy="true"] { opacity: .7; cursor: progress; }
/* On the team: "Remove from team", plain, its + turned into an × (here, in the hover and form cards) */
.add-team.is-on, .add-team.is-on:hover { background: var(--chip); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.add-team.is-on:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, var(--line)); }
:is(.add-team, .bio-mon__add).is-on .i { transform: rotate(45deg); }
/* 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; }
/* 16px: the pixel font's own grid, two screen pixels to each of its pixels, so it stays crisp */
.hero__num { margin: 0; font-family: var(--pixel); color: var(--red); font-size: 1rem; letter-spacing: .06em; }
.hero__name { margin: 2px 0 4px; font-size: clamp(2.1rem, 8vw, 3.4rem); line-height: 1.02; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.hero__genus { margin: 0; color: var(--muted); font-weight: 500; }
/* The fact lead: what it is in a sentence or two, above its types (under the picture on phones) */
.hero__lead { max-width: 62ch; margin: 0 0 14px; font-size: .98rem; line-height: 1.55; }
.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); }
/* The model's animations: a pick menu on the screen's dark rim (menu_pick dark) */
.model-clips { margin-top: 10px; }
.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: .75rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.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: .7rem; }
.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; }
/* A type's pill (render.py: type_pill, app.js: typePill): its symbol, then its name in a span of its own. Another look,
   like the games' (the symbol in a circle of the type's colour, the name on a dark pill), is a change here alone. */
.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: var(--tt-shadow); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.type--sm { padding: 1px 8px; font-size: .72rem; }
/* The symbol reaches a little into the padding, so without it (the minimal look, below) a pill is as it was */
.type .ti { width: 1.1em; height: 1.1em; margin: 0 .3em 0 -.15em; flex: none; fill: #fff; filter: var(--ti-glow); }
/* Customize › Icons › Minimal: small pills keep just the name */
html[data-icons="minimal"] :is(.type--sm, .type--xs) .ti { display: none; }
.types--lg .type { padding: 6px 18px; font-size: 1rem; }
/* Each type keeps the games' colour (--tc), and its name and symbol are white on every colour, as in the games (the
   owner: "can the actual type icons stay white", "also the type name should be white too"). Everything that writes on a
   type's colour takes its ink from --tt (white) and its halo from --tt-shadow; symbols take --ti-glow. On the lighter
   colours, where white alone is faint, a soft dark halo outlines the name and a fine dark edge the symbol. */
:root { --tt: #fff; --tt-shadow: 0 1px 1px rgba(0, 0, 0, .28); --tt-glow: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); --ti-glow: var(--tt-glow); }
.t-normal { --tc: #9fa19f; } .t-fire { --tc: #e62829; } .t-water { --tc: #2980ef; } .t-electric { --tc: #f5bc00; } .t-grass { --tc: #3fa129; }
.t-ice { --tc: #3dcef3; } .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; }
:is(.t-normal, .t-fire, .t-water, .t-electric, .t-grass, .t-ice, .t-fighting, .t-flying, .t-psychic, .t-bug, .t-rock, .t-steel, .t-fairy,
  .t-stellar, .t-unknown) {
  --tt-shadow: 0 0 1px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .45);
  --ti-glow: drop-shadow(0 0 .6px rgba(0, 0, 0, .55)) drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}

.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 { min-width: 0; margin: 2px 0 0; font-weight: 700; font-size: 1.05rem; text-wrap: pretty; }
.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], .abil-chip[aria-expanded="true"] { border-color: color-mix(in srgb, var(--text) 35%, var(--line)); }
.abil-chip:hover .i, .abil-chip[aria-describedby] .i, .abil-chip[aria-expanded="true"] .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; }
/* An item wherever it's named, boxed like an ability (render.py: item_chip): its icon, then its name */
.item-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); color: var(--text); font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap; vertical-align: middle;
}
.item-chip .item-ico { width: 26px; height: 26px; margin: -4px -1px; }
.item-chip .item-ico.is-hd { image-rendering: auto; }
.item-chip--sm {
  gap: 3px; margin: 1px 0; padding: 1px 8px 1px 3px; border-radius: 8px; background: var(--chip);
  border-color: color-mix(in srgb, var(--text) 14%, var(--chip)); font-size: .8rem; line-height: 1.45;
}
.item-chip--sm .item-ico { width: 22px; height: 22px; margin: -3px 0; }
a.item-chip:hover, .item-chip[aria-expanded="true"] { border-color: color-mix(in srgb, var(--text) 35%, var(--line)); }
/* A move wherever it's named (render.py: move_chip): its type's symbol in a circle of the type's colour, then its name
   on a neutral pill, the way the games label a type */
.move-chip {
  display: inline-flex; align-items: center; gap: 5px; margin: 1px 0; padding: 1px 9px 1px 1px; border-radius: 999px; background: var(--chip);
  border: 1px solid color-mix(in srgb, var(--text) 14%, var(--chip)); color: var(--text); font-size: .8rem; font-weight: 600; line-height: 1.45;
  text-decoration: none; white-space: nowrap; vertical-align: middle;
}
.move-chip__t { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--tc); }
.move-chip__t .ti { width: 12px; height: 12px; fill: #fff; filter: var(--ti-glow); }
a.move-chip:hover, .move-chip[aria-expanded="true"] { border-color: color-mix(in srgb, var(--tc) 65%, var(--line)); }

/* 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 (app.js): Pokémon, moves, abilities, items, types and glossary words show what they are at a glance on
   hover, focus or a tap, with a link to the page. Names inside open cards of their own on top (z-index by level). */
.hcard {
  position: fixed; z-index: 70; left: 0; top: 0; width: 268px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto;
  padding: 12px 14px; border-radius: 16px; background: var(--surface); color: var(--text); font-size: .9rem; line-height: 1.45; text-align: left;
  border: 1px solid var(--line); box-shadow: var(--shadow), 0 14px 32px -14px rgba(0, 0, 0, .45); overscroll-behavior: contain;
  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__x { position: absolute; top: 6px; right: 6px; display: none; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: var(--chip); color: var(--muted); cursor: pointer; }
.hcard__x .i, .hcard__back .i { width: 16px; height: 16px; }
.hcard__x:hover, .hcard__back:hover { color: var(--text); }
.hcard.is-pinned > .hcard__x { display: grid; }
.hcard.is-pinned .hcard__title, .hcard.is-pinned .hcard__top > div { padding-right: 26px; }
/* The small line on top ("Hidden ability", "Its moves hit") */
.hcard__label { margin: 0 0 4px; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.hcard__label:not(:first-child) { margin-top: 10px; }
.hcard__title { display: block; font-size: 1rem; line-height: 1.25; }
.hcard__title--type { display: flex; align-items: center; gap: 7px; }
.hcard__title--type .move-chip__t { width: 24px; height: 24px; }
.hcard__title--type .move-chip__t .ti { width: 15px; height: 15px; }
.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-size: .72rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.hcard__top b { display: block; font-size: 1rem; line-height: 1.2; }
.hcard__top .types { margin-top: 4px; gap: 4px; }
.hcard__top--item .item-ico { width: 40px; height: 40px; }
.hcard__top--item .item-ico.is-hd, .hcard__top .item-ico.is-hd { image-rendering: auto; }
.hcard__type { display: inline-flex; border-radius: 999px; text-decoration: none; }
.hcard__type:hover .type, .hcard__type[aria-expanded="true"] .type { filter: brightness(1.08); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 35%, transparent); }
.hcard__kind { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hcard__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 8px 0 0; }
.hcard__nums div { padding: 3px 6px; border-radius: 8px; background: var(--surface-2); text-align: center; }
.hcard__nums dt { font-size: .6rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hcard__nums dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.hcard__text { margin: 8px 0 0; font-size: .86rem; }
.hcard__note { margin: 6px 0 0; color: var(--muted); font-size: .76rem; }
.hcard__groups { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.hcard__group { padding: 2px 10px; border-radius: 999px; background: var(--chip); color: var(--text); font-size: .76rem; font-weight: 700; text-decoration: none; }
.hcard__group:hover { background: color-mix(in srgb, var(--red) 14%, var(--chip)); }
.hcard__mu { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 6px; margin-top: 4px; }
.hcard__mu > b { padding-top: 1px; font-size: .78rem; font-variant-numeric: tabular-nums; }
.hcard__mu .types { flex-wrap: wrap; gap: 3px; }
.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; }
.hcard .abil-chip.is-static { cursor: default; }
.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); }
.hcard__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.hcard__more { margin-left: auto; color: var(--link); font-size: .84rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hcard__more:hover { text-decoration: underline; }
/* Add to team (the team builder's script takes data-add-team), in Pokémon cards and the forms' mini cards */
.hcard__add, .bio-mon__add {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font-size: .78rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.hcard__add:hover, .bio-mon__add:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.bio-mon__add .i { width: 14px; height: 14px; margin-left: -3px; }
/* Phones: the card is a sheet along the bottom, with ← back through the cards opened from it and × */
.hcard--sheet {
  left: 0; right: 0; top: auto; bottom: 0; z-index: 75; width: auto; max-width: 560px; max-height: min(78vh, 600px); margin: 0 auto;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; font-size: .95rem; transform: translateY(24px);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .3);
}
.hcard__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 0 -8px 2px; padding: 8px 0 4px; background: var(--surface); }
.hcard__bar::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line); }
.hcard__back, .hcard--sheet .hcard__x { position: static; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--chip); color: var(--text); cursor: pointer; }
.hcard--sheet .hcard__x { margin-left: auto; }
.hcard--sheet .hcard__more { padding: 8px 14px; border-radius: 999px; background: var(--chip-on); color: var(--chip-on-ink); }
@media (prefers-reduced-motion: reduce) { .hcard, .hcard.is-open { transition: none; } }
/* A name in running text (biology, Pokédex entries, descriptions, Good to know): a dotted underline that firms up on
   hover, and its card. Names in tiles, rows and lists are chips instead. */
.ref { color: inherit; text-decoration: underline dotted color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: 3px; }
.ref:hover, .ref[aria-expanded="true"] { text-decoration-style: solid; text-decoration-color: currentColor; }
.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; }

/* "On this page": on wide screens a column on the left, marking the part in view (app.js). A Pokémon page's sits beside
   its sections; another long page's (render.py: with_toc) runs beside the whole page, and on narrower screens it opens
   as a sheet from "Jump to" in the dock (app.js: initToc). */
.toc { display: none; }
.toc__title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px 12px; color: var(--muted);
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.toc__title::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 22%, transparent); }
.toc__links a {
  display: block; padding: 6px 12px; border-left: 2px solid var(--line); color: var(--muted);
  font-size: .88rem; font-weight: 600; line-height: 1.3; text-decoration: none;
}
.toc__links a:hover { color: var(--text); border-left-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.toc__links a.is-active {
  border-left-color: var(--red); color: var(--text); background: linear-gradient(90deg, color-mix(in srgb, var(--red) 10%, transparent), transparent 85%);
}
.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); }
.toc-mark { display: block; } /* where a list's entry lands: just above its filter bar, which can't be scrolled to while it sticks */
@media (min-width: 1280px) {
  .wrap.detail, .wrap.has-toc { max-width: 1340px; }
  .detail__body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
  .detail__body > .toc { grid-area: 1 / 1; }
  .detail__body > .sections { grid-area: 1 / 2; }
  .wrap.has-toc { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0 32px; align-items: start; }
  /* It stops short of the foot of the screen, where the dock is */
  .toc {
    display: block; position: sticky; top: calc(var(--header-h) + 16px); margin-top: 14px; padding: 4px 0;
    max-height: calc(100vh - var(--header-h) - 96px); overflow-y: auto; scrollbar-width: thin;
  }
  .wrap.has-toc > .toc { margin-top: 26px; }
}
@media (max-width: 1279px) {
  .toc--page.is-open {
    display: block; position: fixed; z-index: 55; left: 50%; bottom: calc(var(--dock-bottom) + 50px); width: min(380px, calc(100vw - 32px));
    max-height: min(65vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 10px 12px; translate: -50% 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 -12px 40px -12px rgba(0, 0, 0, .4);
  }
  .toc--page .toc__links a { padding: 9px 12px; border-radius: 0 10px 10px 0; font-size: .95rem; }
}
@media (max-width: 760px) {
  .toc--page.is-open { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); width: auto; translate: none; }
}

/* ---------- 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: 999px; 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; }
/* The list is a table (Speed, bar, Pokémon) scrolling in its box, its header row staying on top */
.spd-list { max-height: 470px; overflow-y: auto; scrollbar-width: thin; }
.spd-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 2px; }
.spd-table thead :is(th, td) { position: sticky; top: 0; z-index: 1; padding: 2px 6px 4px; background: var(--surface); color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; text-align: left; }
.spd-row > * { height: 34px; padding: 2px 6px; vertical-align: middle; text-align: left; font-weight: inherit; }
.spd-table .spd-row__val { width: 3.8rem; padding-right: 4px; text-align: right; }
.spd-row .spd-row__val { font-weight: 800; font-variant-numeric: tabular-nums; }
.spd-table .spd-row__bar { width: 34%; }
.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; text-wrap: balance; }
.spd-row__who small { min-width: 0; font-size: .76rem; color: var(--muted); }
@media (max-width: 520px) {
  .spd-table .spd-row__val { width: 3.3rem; }
  .spd-table .spd-row__bar { width: 24%; }
  .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 > :first-child { border-radius: 10px 0 0 10px; }
.spd-row.is-mine > :last-child { border-radius: 0 10px 10px 0; }
.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: #fff; filter: var(--ti-glow); }
/* 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: #fff; filter: var(--ti-glow); }
.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; }
/* A Pokémon, move or item as a value in a tile, card or summary (render.py: mini_mon, mini_move, mini_item; app.js:
   DexDB.miniMon, miniMove, miniItem): the small chip look, its picture first, no underline. Running text keeps links. */
.mini {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 28px; padding: 1px 10px 1px 2px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 14%, var(--chip)); background: var(--chip);
  color: var(--text); font-size: .88rem; font-weight: 700; line-height: 1.25; text-decoration: none; vertical-align: middle;
}
.mini--plain { padding-left: 10px; }
a.mini:hover { border-color: color-mix(in srgb, var(--text) 35%, var(--line)); }
a.mini:hover > span { color: var(--link); }
.mini > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .msprite { width: 28px; height: 28px; margin: -2px 0; }
.mini .item-ico { width: 24px; height: 24px; margin-left: 2px; }
.mini .tdot { margin-left: 3px; }
.mini .ci { margin-left: -1px; }
/* 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-size: .95rem; font-weight: 800; }
.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; }

/* Showdown's rating levels (scripts/ranks.py): one switch, each level a word ("Top players") with its weighting beside
   it where there's room (render.py: level_buttons), the picked level's (i), and what a number rests on (few players at
   that level, or few teams behind it), in the caution tone */
.lv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.lv-pick, .lv-tools { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.lv-pick__k { flex: none; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lv-seg { min-width: 0; }
.lv-seg button { display: inline-flex; align-items: baseline; gap: 4px; }
.lv-w { color: var(--muted); font-size: .86em; font-weight: 600; font-variant-numeric: tabular-nums; }
.lv-seg button[aria-pressed="true"] .lv-w { color: inherit; opacity: .7; }
/* Phones: the words alone ("All", "Top"), so the four fit; their full names stay for screen readers */
@media (max-width: 560px) { .lv-x, .lv-w { display: none; } .lv-pick__k { display: none; } }
.lv-tip { display: inline-flex; }
.lv-note { display: block; margin-top: 4px; color: var(--tone-par); font-size: .8rem; font-weight: 600; }
.lv-thin { color: var(--tone-par); font-weight: 700; }
.lv-shift { margin: 10px 0 0; font-size: .84rem; }
.lv-shift .delta { margin-right: 4px; }

/* Usage over time (app.js: drawTrend): its choices as small switches, the chart, a note on where it's from, and the
   values as a table */
.trend { margin: 4px 0 16px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); }
.trend__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
.trend__head h3 { display: flex; align-items: center; gap: 4px; margin: 0; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.trend__ctl { display: grid; justify-items: start; gap: 8px; min-width: 0; margin-bottom: 4px; }
.trend__ctl:empty { display: none; }
.trend__row { display: flex; flex-wrap: wrap; gap: 6px 8px; max-width: 100%; }
.trend__ctl .select { max-width: 100%; }
.trend__cmp { display: flex; flex-wrap: wrap; gap: 6px; }
.trend__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; font-size: .8rem; }
.trend__key { width: 14px; height: 3px; flex: none; border-radius: 2px; background: var(--c); } /* a short stroke of its line */
.trend__key--all { height: 0; border-top: 2px dashed currentColor; background: none; }
.trend.is-loading .trend__plot { opacity: .5; }
.trend__empty { margin: 0; padding: 24px 0; color: var(--muted); font-size: .88rem; text-align: center; }
.trend__note { margin: 6px 0 0; }
.trend__values { margin-top: 6px; font-size: .84rem; }
.trend__values > summary { cursor: pointer; color: var(--link); font-weight: 700; }
.trend__values [data-trend-table] { overflow-x: auto; }
.trend__table { width: 100%; margin-top: 6px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.trend__table caption { padding-bottom: 4px; color: var(--muted); font-size: .8rem; text-align: left; }
.trend__table th, .trend__table td { padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line); font-weight: 500; text-align: left; }
.trend__table thead th { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
/* The chart: a line per form (all of them combined dashed, in the text colour), #1 at the top for ranks, a dashed rule
   where the regulation changes, hollow points where few teams are behind a share. A column per month or day to point
   at, tap or step through, as on the set cards' rank chart. */
.trc__plot { position: relative; height: 150px; margin: 20px 8px 0 46px; } /* room for "31.5%" beside it and "Reg M-B" above */
.trc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trc__grid { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trc__reg { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: .7; }
.trc__line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trc__line--all { stroke-dasharray: 5 4; }
.trc__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; white-space: nowrap; }
.trc__regname { position: absolute; bottom: calc(100% + 3px); transform: translateX(-50%); color: var(--muted); font-size: .66rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.trc__pt { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.trc__pt--thin { background: var(--surface); box-shadow: inset 0 0 0 2px var(--c), 0 0 0 2px var(--surface); }
.trc__days { position: absolute; inset: 0; display: flex; }
.trc__day { position: relative; flex: 1; border-radius: 6px; cursor: help; }
.trc__day:first-child { flex: .5; --x: 0%; }
.trc__day:last-child { flex: .5; --x: 100%; }
.trc--one .trc__day { flex: 1; --x: 50%; }
.trc__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; }
.trc__dot { position: absolute; left: var(--x, 50%); top: var(--y); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--surface); opacity: 0; }
.trc__day:hover::before, .trc__day:hover .trc__dot, .trc__day:focus-visible::before, .trc__day:focus-visible .trc__dot,
.trc__day[aria-describedby]::before, .trc__day[aria-describedby] .trc__dot { opacity: 1; }
.trc__day:focus-visible { outline-offset: -2px; }
.trc__x { display: flex; justify-content: space-between; margin: 6px 8px 0 46px; color: var(--muted); font-size: .74rem; 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; }
/* The moves as chips: a row of them, wrapping */
.build__moves--chips { display: flex; flex-wrap: wrap; gap: 4px; }
.build__moves--chips li { padding: 0; background: none; }
.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; text-decoration: none; }
.sd-mega a:hover { text-decoration: underline; }
.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__moves { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ladder__moves > .muted { margin-right: 2px; }
.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 a { font-weight: 700; text-decoration: none; }
.replica__code a:hover { text-decoration: underline; }
.replica__code code { padding: 4px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .86rem; font-weight: 600; 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; text-wrap: pretty; }
.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); }
/* Smogon's numbers on Showdown: the Showdown blue of the source chip and the /smogon/ bars (red is the in-game ladder) */
.pl__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--series-1); }
.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-size: .72rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.evo-mon__name { grid-area: name; min-width: 0; font-weight: 700; line-height: 1.2; 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: .68rem; }
/* 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; 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: var(--tt-shadow); }
  .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; }
/* A table per way of learning (render.py: moves_html, app.js: movesHTML): a column each for the level or TM, the move,
   type, category, power, accuracy and PP. Phones put each move on two lines, the numbers under its name. */
.mv-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mv-table th, .mv-table td { padding: 9px 6px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; font-weight: inherit; }
.mv-table thead :is(th, td) {
  position: sticky; top: 0; z-index: 1; padding: 6px; border-top: 0; background: var(--surface);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.mv-table thead .mv__lv { width: 3.6rem; }
.mv-table thead .mv__type { width: 6.8rem; }
.mv-table thead .mv__cls { width: 5.6rem; }
.mv-table thead .mv__n { width: 3.5rem; }
/* Column headers sort the list (app.js marks the sorted one) */
.mv-table thead button {
  padding: 2px 0; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit;
  letter-spacing: inherit; text-align: inherit; cursor: pointer;
}
.mv-table thead button:hover, .mv-table thead button.is-active { color: var(--text); }
.mv-table thead button.is-active::after { content: " ▾"; }
.mv-table .mv__lv { padding-inline: 2px; text-align: center; }
.mv-table td.mv__lv { font-size: .78rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.mv__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; font-weight: 400; line-height: 1.35; }
html[data-fx="off"] .mv__fx { display: none; }
.mv__n { text-align: right; font-size: .86rem; font-variant-numeric: tabular-nums; }
.mv-table thead .mv__n { text-align: right; }
@media (max-width: 759px) {
  .mv-table, .mv-table tbody { display: block; }
  .mv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mv {
    display: grid; grid-template-columns: 3rem auto auto minmax(0, 1fr) auto;
    grid-template-areas: "lv main main main type" "lv pow acc pp cls"; align-items: center; gap: 4px 12px; padding: 9px 2px;
    border-top: 1px solid var(--line);
  }
  .mv-table .mv > * { display: block; padding: 0; border: 0; }
  .mv-table td.mv__lv { grid-area: lv; align-self: start; padding: 6px 2px; border-radius: 8px; background: var(--surface-2); }
  .mv__main { grid-area: main; }
  .mv__type { grid-area: type; justify-self: end; }
  .mv__cls { grid-area: cls; justify-self: end; }
  .mv__n { text-align: left; font-size: .82rem; }
  .mv__n::before { content: attr(data-label) " "; font-size: .7rem; font-weight: 600; color: var(--muted); }
  .mv__n[data-label="Pow"] { grid-area: pow; }
  .mv__n[data-label="Acc"] { grid-area: acc; }
  .mv__n[data-label="PP"] { grid-area: pp; }
}
/* A move's category (render.py: cat_pill, app.js: catPill; the /moves/ list's .mv-cls is drawn the same): a pill in its
   colour with its symbol, an impact burst, rings or a half-filled circle like the games' icons, masked so it takes the
   pill's ink. The minimal look leaves the symbol off. */
.cls, .mv-cls {
  display: inline-flex; align-items: center; gap: .3em; padding: 1px 8px; border-radius: 999px; line-height: 1.3; white-space: nowrap;
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.cls::before, .mv-cls::before {
  content: ""; flex: none; width: 1.15em; height: 1.15em; margin-left: -.15em; background: currentColor;
  -webkit-mask: var(--ci) center / contain no-repeat; mask: var(--ci) center / contain no-repeat;
}
html[data-icons="minimal"] :is(.cls, .mv-cls)::before { display: none; }
:root {
  --ci-physical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5l2.1 6.5 6-3.1-3.1 6 6.5 2.1-6.5 2.1 3.1 6-6-3.1-2.1 6.5-2.1-6.5-6 3.1 3.1-6L.5 12 7 9.9 3.9 3.9l6 3.1z'/%3E%3C/svg%3E");
  --ci-special: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22zm0 2.8a8.2 8.2 0 1 0 0 16.4 8.2 8.2 0 0 0 0-16.4zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10z'/%3E%3C/svg%3E");
  --ci-status: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22zm0 2.8a8.2 8.2 0 1 0 0 16.4 8.2 8.2 0 0 0 0-16.4zM12 6.2v11.6a5.8 5.8 0 0 1 0-11.6z'/%3E%3C/svg%3E");
}
.cls--physical, .mv-cls--physical { --ci: var(--ci-physical); background: var(--phys-bg); color: var(--phys-ink); }
.cls--special, .mv-cls--special { --ci: var(--ci-special); background: var(--spec-bg); color: var(--spec-ink); }
.cls--status, .mv-cls--status { --ci: var(--ci-status); background: var(--chip); color: var(--muted); }
/* The symbol alone, in the category's ink, beside a move's name (render.py: cat_icon, app.js: catIcon) */
.ci {
  display: inline-block; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--ci) center / contain no-repeat; mask: var(--ci) center / contain no-repeat;
}
.ci--physical { --ci: var(--ci-physical); color: var(--phys-ink); }
.ci--special { --ci: var(--ci-special); color: var(--spec-ink); }
.ci--status { --ci: var(--ci-status); color: var(--muted); }
.seg .ci { margin-right: 5px; vertical-align: -2px; }
html[data-icons="minimal"] .ci { display: 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; min-width: 0; margin: 2px 0 0; font-weight: 700; text-wrap: pretty; }
.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-weight: 800; font-variant-numeric: tabular-nums; }
.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(--surface-2); color: var(--text); border: 1px solid var(--line); }
.entries p { margin: 0; }
.entry__games { display: block; margin-top: 6px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; 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-size: .72rem; font-weight: 800; letter-spacing: .06em; 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(--text); background: var(--surface-2); border: 1px solid var(--line); }
.gender-view__title { margin: 0 0 8px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.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: var(--sprite-bg); }
.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; color: var(--muted); font-size: .72rem; font-weight: 700; }
.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: var(--chip); }
.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; }
/* "Full rankings": a link in a component's header, as the site's other "more" links: bold, underlined only on hover */
.top__head .muted a { font-weight: 700; text-decoration: none; }
.top__head .muted a:hover { text-decoration: underline; }
.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; }
  .top__pct { font-size: .7rem; }
  .top__rank { top: 4px; left: 6px; }
}
.top__rank { position: absolute; top: 6px; left: 9px; z-index: 1; font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; 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 { max-width: 100%; font-weight: 700; font-size: .84rem; line-height: 1.2; text-align: center; text-wrap: balance; }
.top__pct { font-size: .78rem; font-weight: 600; color: var(--muted); }

.list-tools { display: grid; gap: 10px; margin: 18px 0 10px; min-width: 0; }
/* 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(--tools-h, 0px) - 4px); } /* under the header (html) and the tools */
.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; }
/* A list's sort as the site's segmented buttons (render.py: sort_buttons); a long one scrolls sideways on a phone */
.fbar-sort { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.fbar-sort__k { flex: none; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fbar-sort .seg { min-width: 0; }
/* A period picker (app.js: initPeriods): the granularity, greyed where the source doesn't have it (its tip says why),
   then the month, range, regulation, day or season it needs, and a note on what's shown */
.period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; margin: 10px 0 2px; }
.period__label { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.period__pick { display: inline-flex; min-width: 0; max-width: 100%; }
.period .seg button.period__off { opacity: .45; cursor: help; }
@media (max-width: 480px) { .period .seg { flex-wrap: wrap; border-radius: 16px; } } /* the greyed ones stay in view */
.period__note { flex-basis: 100%; margin: 0; }
.period.is-loading .period__note { opacity: .5; }
.rk__use.is-thin { color: var(--muted); } /* a share resting on few teams in the period picked */
/* 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; min-width: 0; max-width: 100%; }
/* "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: var(--tt-shadow); }
.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); }
.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; }
/* An item's bag icon where its sprite would be; the minimal look shows the plain square instead */
.sr-icon--item .dot, html[data-icons="minimal"] .sr-icon--item .item-ico { display: none; }
html[data-icons="minimal"] .sr-icon--item .dot { display: block; }
.sr-icon .item-ico--none { width: 26px; height: 26px; }
.search__results .sr-kind { flex: none; font-family: inherit; font-size: .72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
/* Phones: what it is ("Item · in Champions") goes under the name, so names that differ at the end show whole
   (Charizardite X and Y) */
@media (max-width: 420px) {
  .search__results a:has(> .sr-kind) { flex-wrap: wrap; row-gap: 0; }
  .search__results a > .sr-kind { flex: 1 0 100%; margin-top: -6px; padding-left: 50px; }
}
/* 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: var(--tt-shadow);
  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, hover cards) */
.type--xs { padding: 0 6px; font-size: .68rem; 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-size: .74rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.mon__name { min-width: 0; font-weight: 700; text-wrap: balance; }
.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; }
/* A sprite playing its animation on hover (app.js: data-still holds the still) keeps its box: the animated file's own
   shape fits inside it, since Showdown's are rarely square, and Showdown's smooth 3D renders aren't drawn as pixels */
img[data-still] { object-fit: contain; }
img[data-still][src*="/showdown/"] { image-rendering: auto; }
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: .66rem; }
  .mon-list[data-view="grid"] .types { gap: 3px; }
  .mon-list[data-view="grid"] .type--sm { padding: 0 5px; font-size: .66rem; }
}
.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: 999px; 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: 999px; 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: its text beside a mini Pokédex card for it (render.py: bio_form), Megas in their turning colours,
   the form you're on marked; on a phone the card sits on top */
.bio-forms { display: grid; gap: 12px; container-type: inline-size; }
.bio-form {
  display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); align-items: start; gap: 12px 18px;
  padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface);
}
/* Side by side only where the text keeps a readable width (the Biology card is half the page on wide screens) */
@container (max-width: 640px) { .bio-form { grid-template-columns: minmax(0, 1fr); } }
.bio-form--plain { display: block; padding: 12px 14px; }
.bio-form h4 { margin: 0 0 6px; font-size: .98rem; }
.bio-form h4 a { color: var(--text); text-decoration: none; }
.bio-form h4 a:hover { color: var(--link); }
.bio-form.is-current { box-shadow: 0 0 0 2px var(--red); }
.bio-form__body { min-width: 0; padding: 4px 2px 0; }
.bio-form__text p:last-child { margin-bottom: 0; }
.bio-mon {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.bio-mon.mega-ring { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
  conic-gradient(from var(--mega-turn), #c79bd8, #6c74cc, #3e5ec0, #1db6e3, #2fb29b, #78c142, #e8ea5e, #c79bd8) border-box; margin: 0; }
.bio-mon__who { display: grid; justify-items: center; align-content: start; gap: 4px; color: var(--text); text-align: center; text-decoration: none; }
.bio-mon__who .msprite { width: 92px; height: 92px; border-radius: 12px; background: var(--sprite-bg); }
.bio-form .bio-mon__name { min-width: 0; margin: 0; font-size: .86rem; font-weight: 800; line-height: 1.2; text-wrap: balance; }
.bio-mon__who:hover .bio-mon__name { color: var(--link); }
.bio-mon__info { display: grid; align-content: start; justify-items: start; gap: 6px; min-width: 0; }
.bio-mon__info .types { gap: 4px; }
.bio-mon__abil { display: flex; flex-wrap: wrap; gap: 4px; }
.bio-mon__bst { display: grid; gap: 3px; width: 100%; color: var(--muted); font-size: .76rem; }
.bio-mon__bst b { color: var(--text); font-variant-numeric: tabular-nums; }
.bio-mon__bar { display: block; height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.bio-mon__bar > span { display: flex; gap: 1px; height: 100%; }
.bio-mon__bar i { min-width: 2px; background: var(--c); }
.bio-mon__extra { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 0; font-size: .8rem; font-weight: 600; }
.bio-mon__extra > span:first-child { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
@media (hover: hover) { .bio-mon__who:hover .msprite { transform: scale(1.12); } }
@media (max-width: 360px) {
  .bio-mon { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding: 8px; }
  .bio-mon__who .msprite { width: 72px; height: 72px; }
  .bio-form .bio-mon__name { font-size: .76rem; }
}
/* Polls & views: a line for each source as it published it, what kind of source above it and the source after it */
.polls { list-style: none; display: grid; gap: 10px; margin: 0 0 4px; padding: 0; }
.polls li { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.polls__kind { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.polls__text { min-width: 0; font-size: .95rem; text-wrap: pretty; }
.polls__text b { font-variant-numeric: tabular-nums; }
.polls__src { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; color: var(--muted); font-size: .8rem; }
/* 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,
  .ab-top__mons a: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; }
/* "Add to team" on a card: a round + over the sprite's top corner in the grid, at the row's end in the lists. It sits
   beside the card's link, not in it, and the + is drawn here so 1,000 cards stay light. */
.mon-list > li.mon { position: relative; }
.mon__add {
  position: absolute; z-index: 1; top: 20px; right: 20px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer; pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12); transition: background .12s, color .12s, transform .15s;
}
.mon__add::before, .mon__add::after { content: ""; position: absolute; width: 12px; height: 2.5px; border-radius: 2px; background: currentColor; }
.mon__add::after { transform: rotate(90deg); }
.mon__add:hover, .mon__add:focus-visible { background: var(--red); border-color: var(--red); color: #fff; }
.mon__add[aria-busy="true"] { cursor: progress; opacity: .7; }
/* On the team: a ✓, an × to take it off again under the pointer or the keyboard's focus */
.mon__add.is-on { background: var(--good-ink); border-color: var(--good-ink); color: #fff; }
.mon__add.is-on::before { width: 6px; transform: translate(-3px, 2px) rotate(45deg); }
.mon__add.is-on::after { width: 11px; transform: translate(2px, -1px) rotate(-50deg); }
.mon__add.is-on:is(:hover, :focus-visible) { background: var(--red); border-color: var(--red); }
.mon__add.is-on:is(:hover, :focus-visible)::before { width: 12px; transform: rotate(45deg); }
.mon__add.is-on:is(:hover, :focus-visible)::after { width: 12px; transform: rotate(-45deg); }
.mon-list[data-view="grid"] > li.mon:hover .mon__add { transform: translateY(-2px); } /* rides the card's lift */
.mon-list:is([data-view="list"], [data-view="stats"]) .mon__add { top: 50%; right: 12px; margin-top: -15px; }
.mon-list:is([data-view="list"], [data-view="stats"]) > li.mon:has(.mon__add) > a { padding-right: 50px; }
@media (max-width: 440px) {
  .mon-list[data-view="grid"] .mon__add { top: 18px; right: 18px; width: 26px; height: 26px; }
  .mon-list[data-view="grid"] .mon__add::before, .mon-list[data-view="grid"] .mon__add::after { width: 10px; }
}
/* A Pokédex row past the first screen is its link alone until app.js draws it, moments after the page loads: card-sized
   meanwhile, so nothing jumps */
.mon-list[data-view="grid"] .mon > a:not(:has(.mon__img))::before { content: ""; width: var(--ls); height: var(--ls); }
/* Until app.js has applied them (render.py: LIST_EARLY_JS), a saved sprite style keeps the first sprites unseen and the
   address's sort and filters keep the rows unseen, so the first frame never shows the wrong ones; shown after 2s anyway */
.mon-list[data-restyle] .msprite, .mon-list[data-pending] { visibility: hidden; animation: list-reveal 0s 2s forwards; }
@keyframes list-reveal { to { visibility: visible; } }
/* 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; } }
.movers__none { color: var(--muted); font-size: .85rem; }
/* All · Megas: each Mega in its turning ring, its stone, and how many of its species' teams hold the stone */
.movers__bar { display: flex; margin: 14px 0 -4px; }
.movers--megas .movers__col a { grid-template-columns: 40px 28px minmax(0, 1fr); gap: 8px; padding: 3px 0; }
.movers__mega { display: grid; place-items: center; width: 40px; height: 40px; margin: 0; border-radius: 12px; }
.movers__col .movers__mega img { width: 34px; height: 34px; }
.movers__col .movers__stone { width: 28px; height: 28px; }
.movers__line { min-width: 0; font-size: .82rem; line-height: 1.3; }
.movers__line b { font-variant-numeric: tabular-nums; }
.movers__fine { margin: 6px 0 0; }
@media (max-width: 700px) { .movers--megas { grid-template-columns: minmax(0, 1fr); } }
/* What top players on Showdown use more and less, with its source under it */
.skill-src { margin: 6px 0 0; }
/* 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; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; } /* a long level name can't widen it */
.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__level { max-width: 100%; }
.setcard__lvnote { margin: -4px 0 12px; color: var(--tone-par); font-size: .8rem; font-weight: 600; }
.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; text-wrap: balance; }
.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__alt .move-chip__t { margin-left: -8px; }
.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: #fff; filter: var(--ti-glow); }
.setcard__mname { flex: 1; min-width: 0; text-wrap: balance; }
.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; }
.toast__undo { padding: 2px 11px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
@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); }
.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 { min-width: 0; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.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; }
.rk__use.is-thin .rk__pct { color: var(--muted); font-weight: 600; } /* few teams behind it at the level picked */
.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; }
/* The usual item and ability, then the top moves: chips, each with its hover card */
.rk__set, .rk__moves { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; min-width: 0; }
.rk__moves { margin-top: 3px; }
.rk__picks .move-chip, .rk__picks .item-chip--sm, .rk__picks .abil-chip--sm { font-size: .76rem; }
.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); }
.src--tour { background: color-mix(in srgb, #1baf7a 20%, transparent); color: var(--text); }
/* Online tournaments on Switch (render.py: tournament_block, while SHOW_TOURNAMENTS is on): a row of its own */
.tour { margin: 0 0 16px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); }
.tour__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: .9rem; }
.tour .fine { margin: 6px 0 0; }
/* 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; }

/* ---------- type pages ---------- */
a.type { text-decoration: none; }
a.type:hover { filter: brightness(1.08); }
/* A type page's title: the pill sized to sit in the heading's line (render.py: type_pill(size="title")) */
.type--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); }
/* A type page's table of every type in the 2020 vote, this type's row marked */
.poll-types { margin-bottom: 8px; scroll-margin-top: calc(var(--header-h) + 12px); }
.poll-types .type-sec__lead { color: var(--text); }
.poll-table__wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.poll-table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.poll-table th, .poll-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-weight: 500; }
.poll-table tbody tr:last-child > * { border-bottom: 0; }
.poll-table thead th { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.poll-table td small { color: var(--muted); }
.poll-table tr.is-current { background: color-mix(in srgb, var(--red) 9%, transparent); }
.poll-table tr.is-current > th { box-shadow: inset 3px 0 0 var(--red); }
@media (max-width: 520px) { .poll-table th, .poll-table td { padding: 5px 6px; font-size: .8rem; } }
@media (max-width: 360px) { .poll-table th, .poll-table td { padding: 5px 3px; font-size: .74rem; } .poll-table thead th { font-size: .62rem; } }
/* 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: #fff; filter: var(--ti-glow); }
/* In a line of picks (render.py: type_dot(small=True)); the minimal look leaves the plain colour dot */
.tdot--sm { width: 18px; height: 18px; box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .15); }
.tdot--sm .ti { width: 12px; height: 12px; }
html[data-icons="minimal"] .tdot--sm { width: 10px; height: 10px; box-shadow: none; }
html[data-icons="minimal"] .tdot--sm .ti { display: none; }
.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; }
/* The "Most used on Showdown" cards (render.py: top_card): the card goes to its page, each Pokémon under it to its own */
.ab-top--card { position: relative; }
.ab-top__link { color: inherit; text-decoration: none; }
.ab-top__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ab-top__link:focus-visible { outline: none; }
.ab-top--card:has(.ab-top__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ab-top--card:hover .ab-top__title b { color: var(--link); }
.ab-top__title .type { padding: 1px 8px; font-size: .72rem; }
.ab-top__mons a { position: relative; z-index: 1; display: grid; border-radius: 10px; }
.ab-top__mons a:hover { background: var(--surface-2); }
.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 { min-width: 0; font-size: 1.15rem; font-weight: 800; text-wrap: balance; }
.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; }
/* A number that picks what it counts in the list below (render.py: stat_tile): the whole tile is one button, which
   shows pressed (a dark edge and a tick) while it's picked. Its (i), source chip and linked pick sit above that button. */
.tile--act, .tile--split { position: relative; }
.tile--act { transition: background .15s, box-shadow .15s; }
.tile--act:hover { background: color-mix(in srgb, var(--text) 6%, var(--surface-2)); }
.tile__hit { position: absolute; inset: 0; width: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.tile__hit:focus-visible { outline-offset: -3px; }
.tile--act:has(> .tile__hit[aria-pressed="true"]) { background: color-mix(in srgb, var(--chip-on) 9%, var(--surface-2)); box-shadow: inset 0 0 0 2px var(--chip-on); }
.tile--act:has(> .tile__hit[aria-pressed="true"]) .tile__k { padding-right: 22px; }
.tile--act:has(> .tile__hit[aria-pressed="true"])::after {
  content: "✓"; position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--chip-on); color: var(--chip-on-ink); font-size: .68rem; font-weight: 800; line-height: 1; pointer-events: none;
}
.tile .info-btn, .tile__src, .tile__v .tchip, .tile__v .mv-cls { position: relative; z-index: 1; }
.tile__src { margin-left: 6px; padding: 1px 7px; font-size: .62rem; letter-spacing: .02em; text-transform: none; white-space: nowrap; }
.tile__v .mv-cls { padding: 1px 7px; font-size: .62rem; vertical-align: middle; }
/* A tile's pick: a small chip with its icon (a move's type, an item's sprite, an ability's dot), not a bare link */
.tchip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 2px 6px 2px 0; padding: 3px 12px 3px 3px; vertical-align: middle;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .95rem; font-weight: 700; line-height: 1.35;
  transition: border-color .15s, background .15s;
}
.tchip:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); background: var(--surface-2); }
.tchip > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchip .type { flex: none; padding: 1px 8px; font-size: .7rem; }
.tchip .item-ico { width: 22px; height: 22px; margin: -2px 0 -2px 3px; }
.tchip__dot { flex: none; width: 12px; height: 12px; margin-left: 6px; border-radius: 50%; background: linear-gradient(135deg, #f5b301, #f97316); }
/* Spread moves: two numbers in one tile, each picking its kind (both foes, or the ally too) */
.tile--split { gap: 6px; }
.tile__part {
  display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 5px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; text-align: left; cursor: pointer;
}
.tile__part b { color: var(--text); font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tile__part:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.tile__part[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); border-color: transparent; }
.tile__part[aria-pressed="true"] b { color: inherit; }
.gen-bars { display: flex; align-items: flex-end; gap: 6px; height: 74px; margin-top: 6px; }
/* Each generation's bar picks it; the one picked stays dark, the rest fade */
.gen-bar {
  flex: 1; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; min-width: 0; padding: 0;
  border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer;
}
.gen-bar:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.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; }
.gen-bar[aria-pressed="true"] i { background: var(--chip-on); }
.gen-bar[aria-pressed="true"] small { padding: 0 5px; border-radius: 999px; background: var(--chip-on); color: var(--chip-on-ink); font-weight: 800; }
.gen-bars:has([aria-pressed="true"]) .gen-bar:not([aria-pressed="true"]) i { opacity: .35; }
@media (max-width: 420px) { .tile--l { grid-column: 1 / -1; } }
/* Physical / special / status: one bar split by their share, each part picking its category */
.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: inherit; font-size: .76rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; border: 0; border-radius: 0; cursor: pointer;
}
.cls-bar__part:hover { filter: brightness(.95); }
.cls-bar__part[aria-pressed="true"] { box-shadow: inset 0 0 0 2px currentColor; }
.cls-bar:has([aria-pressed="true"]) .cls-bar__part:not([aria-pressed="true"]) { opacity: .45; }
/* "+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-list { display: grid; gap: 12px; margin: 0; }
.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; text-decoration: none; }
.gl-see:hover { text-decoration: underline; }
.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-size: .74rem; font-weight: 800; letter-spacing: .04em; 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-glyph__img { width: 28px; height: 28px; object-fit: contain; }
.gm-glyph__img.is-pixel { width: 30px; height: 30px; image-rendering: pixelated; }
.gm-sec { position: relative; overflow: hidden; padding-top: 20px; }
.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); text-decoration: none; }
.gm-cell b a:hover { color: var(--link); }
.gm-cell__sub { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.gm-cell__sub .mini { margin: 1px 0; font-size: .8rem; }
.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)); }
/* A Gigantamax form: its sprite and name go to its page, its G-Max Move to the move's */
.gm-cell--mon > a { display: grid; }
.gm-cell--mon a { text-decoration: none; }
.gm-cell__move a { color: inherit; }
.gm-cell--mon b a:hover, .gm-cell__move a:hover { color: var(--link); }
/* A Z-Move's page: the move's power, then the Z-Move's */
.zpow { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-width: 640px; margin: 4px 0 12px; padding: 0; }
.zpow li { display: grid; gap: 1px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); }
.zpow span { color: var(--muted); font-size: .74rem; font-weight: 700; }
.zpow b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.zpow b::before { content: "→ "; color: var(--muted); font-weight: 600; }
.gm-mons { display: flex; flex-wrap: wrap; max-width: 84px; }
.gm-mons img { width: 40px; height: 40px; }
.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; text-wrap: balance; }
  .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; } }
/* /meta/: the Doubles / Singles switch and the section jumps under the intro, then a card per section holding both
   versions (the page's data-mode shows one, as on /champions/), each with its source chip */
.meta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.meta-jump .chip { color: var(--text); text-decoration: none; }
.meta-sec { scroll-margin-top: calc(var(--header-h) + 12px); }
.meta-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.meta-head > div { min-width: 0; }
.meta-head h2 { margin: 0; font-size: 1.25rem; }
.meta-sec .meta-head p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.4; }
.meta-glyph { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); }
.meta-sec .sources { margin: 0 0 12px; }
.meta-sec h3 { margin: 18px 0 8px; color: var(--muted); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.meta-sec .sources + h3 { margin-top: 0; }
.meta-sec .fine { max-width: 92ch; margin: 12px 0 0; line-height: 1.5; }
/* A share as a thin bar, in the type's colour where there is one */
.meta-meter { position: relative; display: block; height: 5px; border-radius: 5px; overflow: hidden; background: var(--line); }
.meta-meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--tc, var(--red)); }
/* Top cores: the two sprites overlapping, both names and how often each brings the other, then the pair's share as a bar */
.meta-pairs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 8px; margin: 0; padding: 0; }
.meta-pair {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mons names names" "bar bar pct"; align-items: center;
  gap: 2px 10px; padding: 6px 12px 6px 6px; border-radius: 14px; background: var(--surface-2);
}
.meta-pair__mons { grid-area: mons; display: flex; }
.meta-pair__mons img { width: 48px; height: 48px; }
.meta-pair__mons a + a { margin-left: -14px; }
.meta-pair__names { grid-area: names; min-width: 0; font-weight: 700; line-height: 1.3; }
.meta-pair__names a { color: var(--text); text-decoration: none; }
.meta-pair__names a:hover { color: var(--link); }
.meta-pair__names small { display: block; margin-top: 2px; color: var(--muted); font-size: .76rem; font-weight: 500; }
.meta-pair__pct { grid-area: pct; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.meta-pair .meta-meter { grid-area: bar; margin-left: 6px; }
/* Team styles: a tile per style in its move's type colour, its setters underneath */
.meta-styles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; margin: 0; padding: 0; }
.meta-style { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 12px 14px; border-radius: 14px; border-top: 4px solid var(--tc); background: var(--surface-2); }
.meta-style__head { display: flex; align-items: center; gap: 8px; }
.meta-style__ti { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--tc); color: var(--tt, #fff); }
.meta-style__ti .ti { width: 17px; height: 17px; fill: #fff; filter: var(--ti-glow); }
.meta-style__head b { flex: 1; min-width: 0; font-weight: 800; line-height: 1.25; }
.meta-style__pct { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta-setters { list-style: none; display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0; padding: 0; }
.meta-setters li { display: grid; justify-items: center; }
.meta-setters img { width: 44px; height: 44px; }
.meta-setters small { margin-top: -4px; color: var(--muted); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.meta-style .meta-style__via { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
/* Each way a style is set up (an ability, or a move with its type's symbol), with the Pokémon that use it under it */
.meta-ways { display: grid; gap: 10px; }
.meta-way { display: grid; gap: 4px; min-width: 0; }
.meta-way__how { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.meta-way__kind { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.meta-style__via a { color: inherit; font-weight: 700; }
/* Items: icon and name, who holds it most, the share; then the Megas teams bring */
.meta-items { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 2px 28px; margin: 0; padding: 0; }
.meta-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.4rem; align-items: center; gap: 2px 8px; padding: 4px 0 6px; }
.meta-item__name { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); font-weight: 700; line-height: 1.25; text-decoration: none; }
.meta-item__name:hover { color: var(--link); }
.meta-item__who { display: flex; }
.meta-item__who img { width: 36px; height: 36px; margin: -6px 0; }
.meta-item__pct { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.meta-item .meta-meter { grid-column: 1 / -1; height: 4px; }
.meta-sec .meta-note { margin: 0 0 8px; font-size: .88rem; }
.meta-stones .mon-chip small { margin-left: 6px; }
/* Speed tiers: what changes the order, then a band per range, fastest first; Trick Room's band in its colour */
.meta-keys { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; }
.meta-keys li { padding: 5px 12px; border-radius: 999px; background: var(--surface-2); font-size: .84rem; }
.meta-bands { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.meta-band { display: grid; grid-template-columns: 8.6rem minmax(0, 1fr); align-items: start; gap: 8px 14px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.meta-band__label { display: grid; justify-items: start; gap: 2px; padding-top: 4px; }
.meta-band__label b { font-size: 1.12rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.meta-band__label small { color: var(--muted); font-size: .78rem; font-weight: 700; }
.meta-band__label .type { margin-top: 2px; }
.meta-band__mons { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr)); gap: 2px 12px; margin: 0; padding: 0; }
.meta-band__mons a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 2px 6px 2px 2px; border-radius: 10px; color: var(--text); text-decoration: none; }
.meta-band__mons a:hover { background: var(--surface); }
.meta-band__mons img { width: 40px; height: 40px; }
.meta-spd__who { display: grid; min-width: 0; line-height: 1.25; }
.meta-spd__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.meta-spd__who small { color: var(--muted); font-size: .74rem; }
.meta-spd__val { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.meta-band--tr { background: color-mix(in srgb, var(--tc) 9%, var(--surface-2)); box-shadow: inset 4px 0 0 var(--tc); }
/* The ladder: today's top 10 as the Pokédex's "most used" strip, five to a row, then the week's climbers and fallers in
   the /champions/ movers' columns */
.meta-sec .top__list { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding-top: 0; }
.meta-sec .top__list a { background: var(--surface-2); border: 0; box-shadow: none; }
.meta-sec .movers { margin: 0; }
.meta-sec .movers__col { border: 0; background: var(--surface-2); }
.meta-sec .movers__col h3 { margin: 0 0 6px; }
.meta-sec .movers__col small { display: inline; white-space: nowrap; }
/* /champions/: the way here, under the intro */
.meta-cta {
  display: inline-grid; gap: 1px; margin-top: 12px; padding: 8px 16px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow); color: var(--text); text-decoration: none;
}
.meta-cta b { font-weight: 800; }
.meta-cta small { color: var(--muted); font-size: .8rem; }
.meta-cta:hover { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
@media (max-width: 560px) {
  .meta-band { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 10px; }
  .meta-band__label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 0; }
  .meta-band__mons a { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .meta-band__mons img { width: 34px; height: 34px; }
  .meta-sec .movers { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: the styles two to a row, each with its share under its name and its three main setters */
@media (min-width: 361px) and (max-width: 560px) {
  .meta-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta-style { gap: 6px; padding: 10px 10px 12px; }
  .meta-style__head { flex-wrap: wrap; gap: 4px 8px; }
  .meta-style__head b { font-size: .92rem; }
  .meta-style__pct { flex-basis: 100%; font-size: 1.2rem; line-height: 1.1; }
  .meta-setters { gap: 0 2px; }
  .meta-setters li:nth-child(n+4) { display: none; }
  .meta-setters img { width: 38px; height: 38px; }
}
/* Phones: the top 10 scrolls sideways as on the Pokédex, out to the card's edges */
@media (max-width: 520px) { .meta-sec .top__list { margin-inline: -18px; padding: 0 18px 10px; scroll-padding-inline: 18px; } }
@media (max-width: 400px) {
  .meta-pair__mons img { width: 40px; height: 40px; }
  .meta-pair__mons a + a { margin-left: -12px; }
  .meta-item__who img { width: 30px; height: 30px; }
}
/* The smallest phones: an item's main holder only and the movers without their ranks, so the names stay whole */
@media (max-width: 359px) {
  .meta-item__who a + a { display: none; }
  .meta-item__name .item-ico { width: 28px; height: 28px; }
  .meta-sec .movers__col small { display: 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); }
.item-ico--inline.item-ico--none { width: 20px; height: 20px; }
/* Customize › Icons › Minimal: items named in lines and lists go without their icons */
html[data-icons="minimal"] .item-ico--inline { display: none; }
.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; }
/* A Z-Move's or Max Move's category is its base move's: half one colour, half the other, with no one symbol */
.cls--varies, .mv-cls--varies { background: linear-gradient(90deg, var(--phys-bg) 50%, var(--spec-bg) 50%); color: var(--text); }
:is(.cls--varies, .mv-cls--varies)::before { display: none; }
/* The once-per-battle moves, in /gimmicks/'s colours: Z-Moves gold, Max and G-Max Moves Dynamax pink */
.badge--z { background: color-mix(in srgb, #d39a12 20%, transparent); color: color-mix(in srgb, #d39a12 55%, var(--text)); }
.badge--max, .badge--gmax { background: color-mix(in srgb, #e0306a 16%, transparent); color: color-mix(in srgb, #e0306a 55%, var(--text)); }
.ab__name .badge { font-size: .62rem; }
.move-kind { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
/* The category pill as tall as the type's beside it */
.move-kind .cls { padding: 5px 12px; font-size: .78rem; }
.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; }
/* What Pokémon Champions changed (render.py: champions_changes_section): counts that pick ▲ buffed, ▼ nerfed or
   ◆ changed and each kind of change, then each move with its direction in words and its changes in exact numbers */
.chg-tools { display: grid; gap: 8px; margin: 12px 0 0; }
.chg-chip { display: inline-flex; align-items: center; gap: 5px; }
.chg-chip--buff > span { color: var(--tone-up); }
.chg-chip--nerf > span { color: var(--tone-down); }
.chg-chip[aria-pressed="true"] > span { color: inherit; }
.chg-tools .type-chip small { margin-left: 2px; font-size: .78em; font-weight: 600; opacity: .7; }
.chg-sec .list-meta { margin: 10px 0 8px; }
.changes { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 6px; margin: 0; padding: 0; }
.chg[hidden] { display: none; }
.chg__card {
  display: grid; align-content: start; gap: 6px; height: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent;
  background: var(--surface-2); color: var(--text); text-decoration: none; transition: border-color .15s;
}
.chg__card:hover { border-color: color-mix(in srgb, var(--text) 22%, var(--line)); }
.chg__card:hover .chg__head b { color: var(--link); }
.chg__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.chg__head .type { padding: 1px 8px; font-size: .72rem; }
.chg__dir {
  margin-left: auto; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap;
}
.chg__dir--buff { background: color-mix(in srgb, var(--tone-up) 15%, transparent); color: var(--tone-up); }
.chg__dir--nerf { background: color-mix(in srgb, var(--tone-down) 15%, transparent); color: var(--tone-down); }
.chg__dir--mixed { background: var(--chip); color: var(--muted); }
.chg__lines { display: grid; gap: 2px; color: var(--muted); font-size: .86rem; font-weight: 600; }
.chg__line b { color: var(--text); }
.chg--up b, .chg--up .chg__arrow { color: var(--tone-up); }
.chg--down b, .chg--down .chg__arrow { color: var(--tone-down); }
.chg__arrow { margin-left: 4px; font-size: .72em; }
.chg__line .type { padding: 0 7px; font-size: .68rem; vertical-align: 1px; }
.chg__when { color: var(--muted); font-size: .74rem; }
.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; }
/* Undo, redo and the latest changes (team.js: history) */
.tb-undo { display: flex; gap: 4px; }
.tb-undo__btn { display: inline-grid; place-items: center; width: 36px; padding: 6px 0; }
.tb-undo__btn .i { width: 18px; height: 18px; }
.tb-undo__btn[aria-disabled="true"], .tb-undo__btn:disabled { opacity: .4; cursor: default; }
.tb-hist { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.tb-hist button {
  width: 100%; padding: 7px 10px 7px 26px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: .88rem;
  font-weight: 600; text-align: left; cursor: pointer; position: relative;
}
.tb-hist button::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--line); }
.tb-hist button:hover { background: var(--surface-2); }
.tb-hist [aria-current="step"] { background: color-mix(in srgb, var(--red) 12%, var(--surface-2)); }
.tb-hist [aria-current="step"]::before { background: var(--red); }
.tb-hist .is-undone { color: var(--muted); font-weight: 500; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.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%; min-width: 0; text-wrap: balance; }
.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; }
/* Dragged onto another slot, a Pokémon swaps places with it */
.tb-slot[draggable="true"] { cursor: grab; }
.tb-slot.is-drop { border-color: var(--focus); border-style: dashed; background: color-mix(in srgb, var(--focus) 8%, var(--surface)); }
@media (max-width: 560px) { .tb-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* What a fix changed lights up for a moment */
@keyframes tb-flash { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--good-ink) 70%, transparent); } to { box-shadow: 0 0 0 3px transparent; } }
.is-flash { animation: tb-flash 1.4s ease-out; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .is-flash { animation: none; } }
/* The export bar: Showdown, PokePaste, a link, Discord (a message or a Showdown paste), the team sheet and a picture */
.tb-export { position: relative; 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, .tb-export summary {
  display: 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, .tb-export summary:hover, .tb-export [open] > summary { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.tb-export .i { width: 17px; height: 17px; color: var(--red); }
.tb-export .tb-menu__list { left: 0; right: auto; width: 320px; }
.tb-menu__opt {
  display: grid; gap: 1px; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.tb-menu__opt:hover, .tb-menu__opt:focus-visible { background: var(--surface-2); }
.tb-menu__opt small { color: var(--muted); font-size: .8rem; font-weight: 500; }
@media (max-width: 560px) {
  .tb-export { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tb-export__label { display: none; }
  .tb-export > button, .tb-export summary { padding: 9px 4px; border-radius: 12px; font-size: .82rem; }
  .tb-export .tb-menu__list { right: 0; width: auto; } /* under the bar, its width */
}
.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-combo { position: relative; }
.tb-combo input {
  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 { outline: none; border-color: var(--focus); }
/* What's picked shows around its field (not while typing a new one): a move's type symbol on the left and its category
   and power on the right, an item's icon, a hidden ability's tag, an alignment's + and − */
.tb-combo--move input { padding-left: 42px; }
.tb-combo--move.has-pick input { padding-right: 84px; }
.tb-combo--ability.is-hidden input { padding-right: 116px; border-style: dashed; } /* a hidden ability: dashed, as its chip */
.tb-combo--nature.has-pick input { padding-right: 96px; }
.tb-combo.has-pick input:focus { padding-right: 12px; }
/* DexPicker's × shows while the field is in use, where the marks above step aside; the text keeps clear of it */
.tb-combo:not(:focus-within) .dexpick__x { display: none; }
.tb-combo:focus-within input, .tb-combo.has-pick input:focus { padding-right: 40px; }
.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: #fff; filter: var(--ti-glow); }
.tb-combo__meta {
  position: absolute; right: 9px; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 6px; pointer-events: none;
  font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.tb-combo__meta:empty, .tb-combo:focus-within .tb-combo__meta { display: none; }
.tb-combo__meta b { min-width: 1.8em; text-align: right; }
.tb-combo__ico { position: absolute; left: 6px; top: 5px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; pointer-events: none; }
.tb-combo__ico:empty { display: none; }
.tb-combo__ico .item-ico { width: 30px; height: 30px; }
.tb-combo--item.has-pick input { padding-left: 42px; }
/* "Hidden ability": a line beside a hidden ability's dashed chip or field, never a tag in it */
.tb-hidline { color: var(--muted); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.dexpick__sub .tb-hidline { font-size: inherit; font-weight: 800; }
.mini.is-hidden { border-style: dashed; }
/* In the pickers' lists (DexPicker): an ability as its chip, dashed when it's hidden; a move's category, power and
   accuracy on the right, and a mark where Champions changed it */
.tb-abil { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.tb-abil.is-hidden { border-style: dashed; }
.tb-mv { display: inline-flex; align-items: center; gap: 6px; }
.tb-mv > span:not(.ci) { min-width: 2.2em; text-align: right; }
.dexpick .tb-chg { padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--text); font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; }
/* A Stat Alignment's + and − in the muted tones the set cards use */
:is(.tb, .dexpick) .is-up { color: var(--tone-up); font-weight: 800; }
:is(.tb, .dexpick) .is-down { color: var(--tone-down); font-weight: 800; }
.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; }
/* The editor names this Pokémon's problems only: each goes to its row in Checks, where it's said once, with its fixes */
.tb-flags { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; padding: 0; font-size: .84rem; }
.tb-flags button {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 0; border-radius: 999px; background: var(--surface-2);
  color: var(--text); font: inherit; font-weight: 700; cursor: pointer;
}
.tb-flags button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.tb-flags .is-bad button::before { background: var(--red); }
.tb-flags .is-warn button::before { background: #f59f00; }
.tb-flags button:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent); }
.tb-flags__go { color: var(--muted); }
/* Checks: one row per problem (a clash between Pokémon once), its sentence with the names as chips, then its choices,
   each saying what it changes, the best one red; why under them (brief mode keeps it in the (i)). */
.tb-rows { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.tb-row { display: grid; gap: 6px; padding: 8px 10px 10px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--muted); }
.tb-row.is-bad { border-left-color: var(--red); }
.tb-row.is-warn { border-left-color: #f59f00; }
.tb-row.is-note { border-left-color: var(--line); color: var(--muted); }
.tb-row__text { margin: 0; font-size: .9rem; line-height: 1.75; }
.tb-fix__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tb-fix__btn {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-height: 34px; padding: 5px 14px 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: .84rem; font-weight: 700; text-align: left; cursor: pointer;
}
.tb-fix__btn:hover { border-color: color-mix(in srgb, var(--text) 35%, var(--line)); }
.tb-fix__btn.is-main { border-color: transparent; background: linear-gradient(180deg, var(--red), var(--red-2)); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.tb-fix__btn.is-main:hover { background: var(--red-2); }
.tb-fix__pick { border-style: dashed; background: transparent; color: var(--link); }
.tb-fix__btn .item-ico { width: 26px; height: 26px; margin: -6px -3px; }
.tb-fix__btn img:not(.item-ico) { width: 30px; height: 30px; margin: -8px -4px -8px -6px; image-rendering: pixelated; }
.tb-fix__btn .tdot { width: 20px; height: 20px; }
.tb-fix__btn .tdot .ti { width: 12px; height: 12px; }
.tb-fix__btn .cls { padding: 1px 6px; font-size: .62rem; }
.tb-fix__btn small { font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
.tb-fix__pct { padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.tb-fix__btn:not(.is-main) .tb-fix__pct { background: var(--chip); }
.tb-fix__why { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.7; }
.tb-fix__why .src { margin: 0 1px; font-size: .66rem; vertical-align: 1px; }
.tb-fix__tip { display: none; }
html[data-brief="on"] .tb-fix__tip { display: inline-grid; }
@media (max-width: 560px) { .tb-fix__row > .tb-fix__btn { flex: 1 1 100%; justify-content: center; text-align: center; } }
/* A fix pointed at or focused, on the team before it's applied: the Pokémon it changes ringed, a new item as a ghost */
.tb-slot.is-preview, .tb-card.is-preview { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.tb-ghost { position: absolute; left: -8px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; opacity: .75; outline: 2px dashed var(--focus); outline-offset: 1px; }
.tb-ghost .item-ico { width: 24px; height: 24px; }
.tb-ghost--line { position: static; display: inline-flex; align-items: center; gap: 4px; width: auto; height: auto; margin-left: 6px; padding: 0 8px 0 2px;
  border-radius: 999px; outline: 0; border: 1px dashed var(--focus); color: var(--muted); font-size: .84rem; }
.tb-ghost--line .item-ico { width: 22px; height: 22px; }
.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-order { display: inline-flex; gap: 4px; } /* move it a slot left or right */
.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; } }
/* A panel's heading with its switch (Checks: Brief or Detailed) */
.tb-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-bottom: 8px; }
.tb-panel__head h2 { margin: 0; }
.tb-status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.tb-status-row .tb-go { padding: 7px 16px; }
/* What Fix all did, until the team changes again */
.tb-fixed { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--good-ink) 10%, var(--surface-2)); font-size: .88rem; }
.tb-fixed p { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0; }
.tb-fixed .link-btn { padding: 2px 0; }
.tb-fixed ul { display: grid; gap: 4px; margin: 6px 0 0; padding-left: 18px; line-height: 1.7; }
.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; }
/* The team at a glance (team.js: memberCard): the team sheet's cards, each name opening it in the editor */
.tb-cards { margin: 0; }
.tb-card__pic { flex: none; display: block; border-radius: 12px; }
.tb-card__edit { padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tb-card__edit:hover { color: var(--link); }
.tb-card__item .mini { font-size: .92rem; }
.tb-card__facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.tb-card__facts .mini { font-size: .84rem; }
.tb-card__facts small { color: var(--muted); }
.tb-card__stats td.is-zero { color: var(--muted); font-weight: 500; }
.tb-card__moves li > a { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; color: var(--text); font-weight: 700; text-decoration: none; }
.tb-card__moves li > a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-card__moves li > a:hover > span { color: var(--link); }
.tb-card__moves .cls { flex: none; padding: 1px 6px; font-size: .6rem; }
.tb-card__moves small { min-width: 1.8em; text-align: right; font-variant-numeric: tabular-nums; }
/* Roles: who does each job, as chips */
.tb-roles { display: grid; gap: 8px; margin: 0; }
.tb-role { display: grid; gap: 4px; }
.tb-role dt { display: flex; align-items: center; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.tb-role dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: .86rem; }
.tb-role__who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.tb-role__n { padding: 1px 8px; border-radius: 999px; background: var(--chip); font-size: .78rem; font-variant-numeric: tabular-nums; }
.tb-role.is-none dt { color: color-mix(in srgb, var(--bad-ink) 70%, var(--muted)); }
/* Speed: the Pokémon pages' Speed tiers list, with a switch for Tailwind and Trick Room */
.tb-spd__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; font-size: .86rem; }
.tb-spd { max-height: 440px; }
button.spd-row__who { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.spd-row__who:hover b { color: var(--link); }
/* Type matchups (team.js: matchupTable). Defense or Offense on one switch, a row per type and a column per Pokémon in
   the type chart's colours: 2× warm and 4× deeper and ringed, ½× green and ¼× deeper, 0× dark. The sprite row stays
   under the site's header, rows alternate a shade, the row and column under the pointer or focus light up, and the
   type shows again at the row's end. Each square is a tile with a border in the box's colour (as on /types/), so the
   sticky row has nothing to show through. It fits a phone: the types keep their symbols, the end column goes. */
.tb-wk__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 6px; }
.tb-wk__cap { margin: 0 0 8px; color: var(--muted); font-size: .86rem; }
.tb-wk__sum { display: grid; gap: 6px; margin: 0 0 10px; }
.tb-worry { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; color: var(--muted); font-size: .88rem; }
.tb-worry > b { margin-right: 2px; color: var(--text); }
.tb-worry.is-bad > b { color: var(--bad-ink); }
.tb-wk__threat { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-right: 8px; color: var(--text); font-weight: 600; }
.tb-wk__t { display: inline-flex; border-radius: 999px; }
.tb-wk__t.is-hit .type { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--bad-ink); }
.tb-wk__key { margin: 0 0 8px; }
.tb-key { display: inline-grid; place-items: center; min-width: 2.2rem; height: 1.45rem; padding: 0 6px; border-radius: 8px; font-size: .78rem; font-weight: 800; }
.tb-wk { --hot: color-mix(in srgb, var(--text) 9%, transparent); width: 100%; max-width: 760px; border-collapse: separate; border-spacing: 0;
  table-layout: fixed; font-size: .8rem; font-variant-numeric: tabular-nums; }
.tb-wk th, .tb-wk td { padding: 0; border: 2px solid var(--surface); background-clip: padding-box; text-align: center; }
.tb-wk thead :is(th, td) { position: sticky; top: var(--header-h); z-index: 2; height: 46px; background-color: var(--surface); color: var(--muted);
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; vertical-align: bottom; }
.tb-wk thead th:first-child { width: 112px; }
.tb-wk .tb-tot { width: 74px; }
.tb-wk .tb-wk__end { width: 34px; }
.tb-wk__mon { display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.tb-wk__mon 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[data-tip] { height: 30px; border-radius: 9px; background-color: var(--surface-2); font-weight: 800; cursor: help; }
.tb-wk td[data-x="none"] { background-color: transparent; color: var(--muted); }
.tb-wk tbody tr:nth-child(even) > :is(th, .tb-tot, .tb-wk__end) { background-color: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.tb-wk tbody tr:nth-child(even) > td[data-x="1"] { background-color: color-mix(in srgb, var(--text) 9%, var(--surface)); }
/* The scale, after the plain squares so it wins */
:is(.tb-wk td, .tb-key)[data-x="4"] {
  background-color: color-mix(in srgb, #e2702f 64%, var(--surface)); color: color-mix(in srgb, #e2702f 18%, var(--text));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #e2702f 70%, var(--text)); font-weight: 900;
}
:is(.tb-wk td, .tb-key)[data-x="2"] { background-color: color-mix(in srgb, #e2702f 30%, var(--surface)); color: color-mix(in srgb, #e2702f 50%, var(--text)); }
:is(.tb-wk td, .tb-key)[data-x="0.5"] { background-color: color-mix(in srgb, #3c9a5c 26%, var(--surface)); color: color-mix(in srgb, #3c9a5c 60%, var(--text)); }
:is(.tb-wk td, .tb-key)[data-x="0.25"] { background-color: color-mix(in srgb, #3c9a5c 46%, var(--surface)); color: color-mix(in srgb, #3c9a5c 35%, var(--text)); }
:is(.tb-wk td, .tb-key)[data-x="0"] { background-color: color-mix(in srgb, var(--text) 68%, var(--surface)); color: var(--surface); }
.tb-wk tbody th, .tb-wk .tb-tot, .tb-wk tbody .tb-wk__end { border-radius: 9px; }
/* The crosshair: the row and column of the square pointed at or focused, and the square itself */
.tb-wk tr.is-hot > :is(th, td), .tb-wk .is-hot { box-shadow: inset 0 0 0 99px var(--hot); }
.tb-wk td[data-x="4"]:is(.is-hot, tr.is-hot > *) { box-shadow: inset 0 0 0 2px color-mix(in srgb, #e2702f 70%, var(--text)), inset 0 0 0 99px var(--hot); }
.tb-wk td[data-tip]:hover, .tb-wk td[data-tip]:focus-visible, .tb-wk td[aria-describedby] { outline: 2px solid var(--text); outline-offset: -2px; border-radius: 9px; }
.tb-wk thead th.is-hot .tb-wk__mon { background: var(--hot); }
/* The totals: how many, the 4× or 0× ones tagged, and a bar a segment each in the squares' colours */
.tb-wk .tb-tot { padding: 2px 6px; text-align: left; }
.tb-tot__n { display: flex; align-items: center; gap: 4px; }
.tb-tot__n b { font-size: .92rem; }
.tb-tot--hi .tb-tot__n b { color: var(--bad-ink); }
.tb-tot--lo .tb-tot__n b { color: var(--good-ink); }
.tb-tot__n small { padding: 0 5px; border-radius: 999px; font-size: .62rem; font-weight: 800; line-height: 1.5; }
.tb-tot--hi small { background: color-mix(in srgb, #e2702f 64%, var(--surface)); color: color-mix(in srgb, #e2702f 18%, var(--text)); }
.tb-tot--lo small { background: color-mix(in srgb, var(--text) 68%, var(--surface)); color: var(--surface); }
.tb-wk .tb-tot.is-none .tb-tot__n b { color: var(--bad-ink); }
.tb-bar { display: flex; gap: 2px; height: 5px; margin-top: 3px; }
.tb-bar i { flex: none; width: 7px; border-radius: 2px; }
.tb-bar i[data-x="2"] { background: color-mix(in srgb, #e2702f 70%, var(--surface)); }
.tb-bar i[data-x="4"] { background: color-mix(in srgb, #e2702f 75%, var(--text)); }
.tb-bar i[data-x="0.5"] { background: color-mix(in srgb, #3c9a5c 60%, var(--surface)); }
.tb-bar i[data-x="0.25"] { background: #3c9a5c; }
.tb-bar i[data-x="0"] { background: color-mix(in srgb, #3c9a5c 55%, var(--text)); }
.tb-wk .tb-wk__end { text-align: center; }
.tb-wk__end .tdot { width: 22px; height: 22px; vertical-align: middle; }
.tb-wk__end .tdot .ti { width: 13px; height: 13px; }
@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 thead th:first-child { width: 30px; }
  .tb-wk .tb-tot { width: 36px; padding: 2px 3px; }
  .tb-wk .tb-wk__end { display: none; }
  .tb-wk__mon img { width: 28px; height: 28px; }
  .tb-tot__long, .tb-tot__n small { display: none; }
  .tb-bar { gap: 1px; }
  .tb-bar i { width: 4px; }
}
@media (min-width: 561px) { .tb-tot__short { display: none; } }
.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 { min-width: 0; margin: 0; font-size: 1.2rem; font-weight: 800; text-wrap: balance; }
.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;
}
/* With names as chips, and Undo after a change */
.tb-toast:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.tb-toast .mini { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 35%, transparent); color: inherit; }
.tb-toast__undo { padding: 4px 12px; border: 0; border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-weight: 800; cursor: pointer; }
@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) ---------- */
/* Wider than the other pages: the two Pokémon and the results sit side by side from 1200 px */
.wrap.calc-page { max-width: 1440px; }
.dc { --dc-fb: 0px; 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-muted { margin: 4px 0; color: var(--muted); font-size: .86rem; }

/* The bar: the game and the format, undo and redo, saved calcs, sharing, pasting, the keys */
.dc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.dc-bar__end { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.dc-bar .dc-menu__btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; }
.dc-bar .dc-menu__btn .i { width: 18px; height: 18px; }
@media (max-width: 560px) { .dc-bar__txt { display: none; } .dc-bar__end { margin-left: 0; } }
/* Round icon buttons */
.dc-ib {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer;
}
.dc-ib:hover { background: var(--chip); }
.dc-ib:disabled { opacity: .4; cursor: default; }
.dc-ib--sm { width: 28px; height: 28px; }
.dc-ib--sm .i { width: 15px; height: 15px; }
.chip.dc-xs { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: .8rem; }
.chip.dc-xs .i { width: 14px; height: 14px; }

/* Little menus under a button (saved calcs, sharing, the team, the field bar's parts, a set's variants) */
.dc-menu { position: relative; min-width: 0; }
.dc-menu__btn > .i:last-child { width: 15px; height: 15px; transition: transform .15s; }
.dc-menu__btn[aria-expanded="true"] > .i:last-child { transform: rotate(180deg); }
.dc-menu__pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; display: grid; gap: 2px; width: max-content; min-width: 230px;
  max-width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 540px); overflow: auto; padding: 8px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}
.dc-bar__end .dc-menu__pop, .dc-teambtn .dc-menu__pop { left: auto; right: 0; }
.dc-menu__h { margin: 6px 6px 2px; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dc-menu__list { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.dc-menu__list li { display: flex; align-items: center; gap: 4px; }
.dc-menu__item {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0;
  border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: .9rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.dc-menu__item:hover, .dc-menu__item[aria-pressed="true"] { background: var(--surface-2); }
.dc-menu__item:disabled { opacity: .6; cursor: default; }
.dc-menu__item > .i { width: 18px; height: 18px; color: var(--muted); }
.dc-menu__item small { flex-basis: 100%; color: var(--muted); font-size: .76rem; font-weight: 500; }
.dc-menu__item > .i ~ small { padding-left: 26px; }
.dc-menu__item b { display: inline-flex; align-items: center; gap: 6px; }
.dc-menu__mons { display: flex; flex-basis: 100%; gap: 2px; }
.dc-menu__mons img { image-rendering: pixelated; }
.dc-menu__row { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px 8px; }
.dc-dot { display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--red); vertical-align: 1px; }
.dc-saveform { display: flex; gap: 6px; padding: 4px; }
.dc-saveform input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }

/* The teams, under the bar: your six (a tap loads one into the side being edited) and theirs, as tiles with names */
.dc-team { display: grid; gap: 6px; margin-top: 12px; padding: 8px 10px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.dc-team__row { display: flex; align-items: center; gap: 8px 10px; min-width: 0; }
.dc-team__row--opp { padding-top: 6px; border-top: 1px solid var(--line); }
.dc-team__k { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dc-team__btn {
  display: inline-flex; align-items: center; gap: 6px; max-width: 200px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--chip); color: var(--text); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer;
}
.dc-team__btn > .i { width: 18px; height: 18px; flex: none; }
.dc-team__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-fill { flex: none; }
/* A row of tiles, scrolling sideways when it runs out of room */
.dc-team__slots { list-style: none; display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; margin: 0; padding: 2px; overflow-x: auto; scrollbar-width: thin; }
.dc-tile__wrap { position: relative; flex: none; }
.dc-tile {
  position: relative; display: grid; justify-items: center; width: 74px; padding: 4px 4px 5px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer;
}
.dc-tile img { width: 40px; height: 40px; image-rendering: pixelated; }
.dc-tile span { max-width: 100%; overflow: hidden; font-size: .72rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dc-tile:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.dc-tile.is-empty { align-content: center; gap: 2px; min-height: 64px; height: 100%; border-style: dashed; background: none; color: var(--muted); }
.dc-tile.is-empty .i { width: 18px; height: 18px; }
.dc-tile.is-you { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.dc-tile.is-foe { border-color: var(--series-1); box-shadow: inset 0 0 0 1px var(--series-1); }
/* Edited here and not saved to the team */
.dc-tile.is-edited::after { content: ""; position: absolute; top: 6px; left: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.dc-tile__wrap > .dc-menu, .dc-tile__wrap > .dc-tile__more { position: absolute; top: 1px; right: 1px; }
.dc-tile__more {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); font: inherit; font-size: .9rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.dc-tile__more:hover, .dc-tile__more:focus-visible { background: var(--chip); color: var(--text); }
.dc-tile__more .i { width: 14px; height: 14px; }
.dc-oppadd { flex: 1 1 200px; max-width: 300px; }
.dc-team__empty { margin: 0; color: var(--muted); font-size: .9rem; }
.dc-team__empty .link-btn { padding: 0; }
/* The format's top threats, narrowed by type */
.dc-threats { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.dc-threats[hidden] { display: none; }
.dc-threats__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.dc-threats__types { display: flex; flex-wrap: wrap; gap: 2px; }
.dc-tchip { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; opacity: .5; }
.dc-tchip:hover, .dc-tchip[aria-pressed="true"] { opacity: 1; }
.dc-tchip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.dc-tchip .tdot { width: 24px; height: 24px; }
.dc-tchip .tdot .ti { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .dc-team__row { flex-wrap: wrap; }
  .dc-team__row > .dc-team__slots { order: 9; flex-basis: 100%; }
  .dc-tile { width: 66px; }
  /* Their row on one line above its tiles: the field's placeholder says what it's for */
  .dc-team__row--opp > .dc-team__k { display: none; }
  .dc-oppadd { flex-basis: 130px; }
}

/* The field bar: one row under the site's header on wide screens, each part a menu that says what's on */
.dc-fieldbar { display: none; }
@media (min-width: 900px) {
  .dc-fieldbar {
    position: sticky; top: var(--header-h); z-index: 35; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 12px 0 0; padding: 8px 10px; border-radius: 0 0 16px 16px; border: 1px solid var(--line); border-top: 0;
    background: var(--bg); box-shadow: 0 8px 18px -14px rgba(0, 0, 0, .35);
  }
}
.dc-fieldbar__k { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dc-fieldbar__k .i { width: 18px; height: 18px; }
.dc-fb {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font: inherit; font-size: .86rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.dc-fb.is-on, .dc-fb[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); border-color: transparent; }
.dc-fb small { opacity: .75; font-weight: 500; }
.dc-fb .i { width: 15px; height: 15px; }
.dc-fb-seg button { min-height: 28px; }
.dc-fpop { display: grid; gap: 10px; min-width: 260px; padding: 4px; }
.dc-fieldbar .dc-menu__pop { max-width: min(440px, calc(100vw - 24px)); }

/* The grid: you | the results | the foe from 1024 px; under that the two take turns beside the results; on a phone,
   one tab at a time */
.dc-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; margin-top: 12px; }
.dc-tabs { display: none; }
@media (min-width: 1024px) {
  .dc-grid { grid-template-columns: minmax(0, 1fr) 290px minmax(0, 1fr); grid-template-areas: "you rail foe"; gap: 12px; }
  .dc-side[data-card="0"] { grid-area: you; }
  .dc-side[data-card="1"] { grid-area: foe; }
  .dc-rail { grid-area: rail; }
  .dc-fieldbox { display: none; }
}
@media (min-width: 1200px) { .dc-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px) minmax(0, 1fr); gap: 14px; } }
/* From 1024 px each column is a pane as tall as the screen under the field bar, so everything is in reach without
   scrolling the page; a pane that's longer scrolls by itself */
@media (min-width: 1024px) {
  .dc-side {
    position: sticky; top: calc(var(--header-h) + var(--dc-fb) + 10px); max-height: calc(100vh - var(--header-h) - var(--dc-fb) - 20px);
    overflow-y: auto; scrollbar-width: thin;
  }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .dc-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 390px); grid-template-areas: "tabs rail" "edit rail"; }
  .dc-tabs { grid-area: tabs; position: sticky; top: calc(var(--header-h) + var(--dc-fb)); z-index: 30; display: flex; }
  .dc-side { grid-area: edit; }
  .dc-rail { grid-area: rail; grid-row: 1 / span 2; }
  .dc[data-dc-tab="1"] .dc-side[data-card="0"], .dc:not([data-dc-tab="1"]) .dc-side[data-card="1"], .dc-fieldbox { display: none; }
  .dc-tab[data-tab="f"] { display: none; }
}
@media (max-width: 899px) {
  .dc-tabs { position: sticky; top: var(--header-h); z-index: 30; display: flex; margin: 0 -16px; padding: 6px 12px; }
  .dc-rail { display: none; }
  .dc:not([data-dc-tab="0"]) .dc-side[data-card="0"], .dc:not([data-dc-tab="1"]) .dc-side[data-card="1"], .dc:not([data-dc-tab="f"]) .dc-fieldbox { display: none; }
}
.dc-tabs { align-items: center; gap: 6px; background: var(--bg); border-bottom: 1px solid var(--line); }
.dc-tabs__list { display: flex; flex: 1; gap: 4px; min-width: 0; }
.dc-tab {
  display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; min-height: 48px; padding: 4px 8px; border: 0;
  border-bottom: 3px solid transparent; border-radius: 12px 12px 4px 4px; background: none; color: var(--muted); font: inherit;
  font-size: .86rem; font-weight: 700; cursor: pointer;
}
.dc-tab[aria-selected="true"] { color: var(--text); background: var(--surface); border-bottom-color: var(--red); }
.dc-tab img { width: 34px; height: 34px; flex: none; margin: -4px 0; image-rendering: pixelated; }
.dc-tab > .i { width: 20px; height: 20px; flex: none; }
.dc-tab__txt { display: grid; min-width: 0; text-align: left; line-height: 1.15; }
.dc-tab__who { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.dc-tab__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-tab__hp { margin-left: auto; color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.dc-tab__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: .7rem; }
.dc-tab[data-tab="f"] { flex: 0 1 auto; }
@media (max-width: 400px) { .dc-tab__hp { display: none; } .dc-tab img { width: 28px; height: 28px; } .dc-tab { padding: 4px 5px; gap: 4px; } }

/* A Pokémon's card: who it is, then its set, stats and condition in sections that fold */
.dc-side { min-width: 0; padding: 14px; container: card / inline-size; }
@media (min-width: 1024px) and (max-width: 1199px) { .dc-side { padding: 12px 10px; } }
.dc-head { display: flex; align-items: center; gap: 12px; }
.dc-sprite { width: 84px; height: 84px; 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; }
@media (max-width: 420px) { .dc-sprite { width: 60px; height: 60px; border-radius: 12px; } .dc-head { gap: 8px; } }
.dc-id { display: grid; gap: 6px; flex: 1; min-width: 0; }
.dc-id__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dc-eyebrow { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dc-id__pick { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dc-id__pick .dp { flex: 1; }
.dc-id .types { align-items: center; }
.dc-tera { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.dc-teambtn { flex: none; }
.dc-tbtn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; }
.dc-tbtn .i { width: 16px; height: 16px; }
.dc-tbtn.is-on { border-color: color-mix(in srgb, var(--tone-up) 45%, var(--line)); background: color-mix(in srgb, var(--tone-up) 14%, var(--surface)); color: var(--tone-up); }
.dc-head__more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.dc-megas { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-setbtn { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.dc-setbtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-form { flex: 1 1 220px; }
.dc-dex { margin-left: auto; font-size: .85rem; font-weight: 700; text-decoration: none; }
.dc-dex:hover { text-decoration: underline; }
.dc-movesbox:empty { display: none; }
.dc-movesbox { margin-top: 12px; }
.dc-sec { margin-top: 10px; border-top: 1px solid var(--line); }
.dc-sec__head { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 2px; list-style: none; cursor: pointer; }
.dc-sec__head::-webkit-details-marker { display: none; }
.dc-sec__t { flex: none; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dc-sec__sum { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.dc-sec__head > .i { width: 18px; height: 18px; color: var(--muted); transition: transform .15s; }
.dc-sec[open] > .dc-sec__head > .i { transform: rotate(180deg); }
.dc-sec__body { padding: 0 0 8px; }
.dc-sec__body--set { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.dc-sec__body--cond { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dc-sel { display: flex; width: 100%; }
.dc-sel input { flex: 1; min-width: 0; }
/* A picker in a pill, drawn like the site's selects: its label, then its box (not .select itself, whose label style
   would reach into the picker's list) */
.dc-field {
  position: relative; display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding-left: 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.dc-field:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.dc-field:focus-within { border-color: var(--focus); }
.dc-pickf > label, .dc-form > label { flex: none; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.dc-switch:empty { display: none; }
.dc-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.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; }
.dc-gender { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dc-lv { padding: 9px 10px 9px 2px; border: 0; background: transparent; font-weight: 600; }
.dc-lv:focus { outline: none; }

/* Pickers (pick() in calc.js): a box with an icon before it and tags after it; its list drops down under it, or comes
   up as a sheet on a phone */
.dp { position: relative; display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.dp > .i { flex: none; width: 15px; height: 15px; margin-right: 8px; color: var(--muted); pointer-events: none; }
.dp__lead, .dp__adorn { display: inline-flex; align-items: center; flex: none; gap: 4px; }
.dp__lead:empty, .dp__adorn:empty { display: none; }
.dp__lead img { width: 28px; height: 28px; image-rendering: pixelated; }
.dp__lead .tdot { width: 24px; height: 24px; }
.dp__lead .tdot .ti { width: 14px; height: 14px; }
.dp__input {
  flex: 1; min-width: 0; height: 40px; padding: 0 2px; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600;
  text-overflow: ellipsis;
}
.dp__input:focus { outline: none; }
.dp__input[readonly] { cursor: pointer; }
.dp__input::placeholder { color: var(--muted); font-weight: 600; }
.dp-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.dp-tag.is-up { background: color-mix(in srgb, var(--tone-up) 16%, transparent); color: var(--tone-up); }
.dp-tag.is-down { background: color-mix(in srgb, var(--tone-down) 16%, transparent); color: var(--tone-down); }
.dp-tag--hidden { border: 1px dashed currentColor; background: none; }
.dp-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); }
.dp-dot--brn { background: var(--tone-brn); }
.dp-dot--par { background: var(--tone-par); }
.dp-dot--psn, .dp-dot--tox { background: var(--tone-psn); }
.dp-dot--slp { background: var(--tone-slp); }
.dp-dot--frz { background: var(--tone-frz); }
/* The Pokémon's own field: the site's search field, a size up */
.dp--mon > .i:first-child { position: absolute; left: 12px; z-index: 1; width: 18px; height: 18px; margin: 0; color: var(--muted); pointer-events: none; }
.dp--mon .dp__input {
  height: 44px; padding: 0 12px 0 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font-size: 1.08rem; font-weight: 800;
}
.dp--mon .dp__input:focus { border-color: var(--focus); }
/* DexPicker's × (app.js) shows while a field is in use, where what's picked steps aside */
.dp:not(:focus-within) .dexpick__x { display: none; }
.dp:focus-within .dp__adorn { display: none; }
.dp:focus-within .dp__input { padding-right: 36px; }
.dp--mon:focus-within .dp__input { padding-right: 40px; }
/* A hidden ability: its field dashed, as its chip, with a line saying so */
.dc-field:has(.dp--ability.is-hidden) { border-style: dashed; }

/* Steppers: stages, hits, uses (and the Stat Points') */
.dc-step { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.dc-step button { width: 28px; 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: 36px; }
.dc-step--sm button { width: 24px; height: 30px; }
.dc-step--sm input { width: 30px; height: 30px; }
.dc-step.is-up { border-color: var(--tone-up); }
.dc-step.is-up input { color: var(--tone-up); }
.dc-step.is-down { border-color: var(--tone-down); }
.dc-step.is-down input { color: var(--tone-down); }
.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, .dc-final__in::-webkit-outer-spin-button, .dc-final__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Stats: the stat and its base, the + and − of the alignment, points (with Max), the stage and what it comes to */
.dc-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dc-stats { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dc-stats th, .dc-stats td { padding: 3px 2px; text-align: left; vertical-align: middle; }
.dc-stats thead th { color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dc-stats thead small { font-size: inherit; font-weight: 600; text-transform: none; }
.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-stat__n { display: inline-flex; flex-direction: column; min-width: 2.1em; vertical-align: middle; line-height: 1.1; }
.dc-stat__n small { color: var(--muted); font-size: .66rem; font-weight: 600; }
.dc-stat__pts { white-space: nowrap; }
.dc-stat__pts .dc-max { margin-left: 3px; }
.dc-num--iv { width: 40px; margin-left: 3px; }
tr.is-up .dc-stat__n { color: var(--tone-up); }
tr.is-down .dc-stat__n { color: var(--tone-down); }
.dc-align { display: inline-flex; gap: 2px; margin-left: 3px; vertical-align: middle; }
.dc-align button {
  width: 24px; height: 26px; padding: 0; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: .82rem; font-weight: 800; line-height: 1; cursor: pointer;
}
/* Narrow cards (phones, three columns at 1024 px): each stat on two lines, the points over the stage */
@container card (max-width: 329px) {
  .dc-stats thead { display: none; }
  .dc-stats tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name pts final" "name stage final"; align-items: center; gap: 2px 6px; padding: 4px 0; }
  .dc-stats tbody th { grid-area: name; }
  .dc-stat__pts { grid-area: pts; }
  .dc-stat__stage { grid-area: stage; }
  .dc-stats .dc-final { grid-area: final; }
  .dc-stats tbody td, .dc-stats tbody th { padding: 0; }
  .dc-stats tfoot tr, .dc-stats tfoot td { display: block; }
}
.dc-align button[aria-pressed="true"]:first-child { border-color: var(--tone-up); background: var(--tone-up); color: var(--surface); }
.dc-align button[aria-pressed="true"]:last-child { border-color: var(--tone-down); background: var(--tone-down); color: var(--surface); }
.dc-max { min-width: 38px; height: 30px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer; }
.dc-max:hover { background: var(--chip); }
.dc-stats .dc-final { text-align: right; }
.dc-final__in {
  width: 48px; height: 30px; padding: 0 2px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font: inherit;
  font-size: 1rem; font-weight: 800; text-align: right; -moz-appearance: textfield; appearance: textfield;
}
.dc-final__in:hover { border-color: var(--line); }
.dc-final__in:focus { outline: none; border-color: var(--focus); background: var(--surface); }
.dc-final small { display: block; font-size: .7rem; font-weight: 800; }
.dc-final small:empty { display: none; }
.dc-final small.is-up { color: var(--tone-up); }
.dc-final small.is-down { color: var(--tone-down); }
.dc-over { color: var(--red); font-weight: 800; }
.dc-optlink { padding: 2px 0; margin-left: 4px; font-size: .84rem; }

/* Condition: status, HP, accuracy and evasion, quick stages */
.dc-cond__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dc-status { flex: 1 1 220px; width: auto; }
.dc-stage { display: inline-flex; align-items: center; gap: 6px; }
.dc-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-hpctl { display: flex; align-items: center; gap: 8px; flex: 1 1 230px; min-width: 0; }
.dc-hpctl label { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.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__abs { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-hpctl__abs .dc-num { width: 52px; }
.dc-hpctl { flex-wrap: wrap; }

/* A move's chip, the same everywhere: its type's symbol in a coloured circle, then its name and its category's symbol
   on a neutral chip, then its power and accuracy */
.mvc { position: relative; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; padding: 2px 8px 2px 2px; border-radius: 999px; background: var(--chip); font-size: .8rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.mvc--in { padding: 0; background: none; }
.mvc .tdot { width: 22px; height: 22px; }
.mvc .tdot .ti { width: 13px; height: 13px; }
.mvc__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mvc__cat { display: inline-flex; align-items: center; flex: none; }
.mvc__cat .ci { width: 15px; height: 15px; }
.mvc__pow, .mvc__acc { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mvc__acc { color: var(--muted); }
.mvc .is-none { color: var(--muted); }
.mvc .tip-term { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.mvc .mv-changed { text-decoration: underline dotted #d9a520; text-underline-offset: 3px; cursor: help; }
.mvc__acc.is-mod { color: var(--text); }

/* The moves and their results: in the results rail on wide screens, first in each card on phones */
.dc-moves { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); 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__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 4px 6px 0; }
.dc-move__pick { flex: 1 1 250px; min-width: 0; }
.dc-move .dp { padding: 0 4px; border-radius: 10px; }
.dc-move .dp:hover { background: var(--surface); }
.dc-move .dp:focus-within { background: var(--surface); box-shadow: 0 0 0 2px var(--focus); }
.dc-move .dp__input { height: 38px; font-weight: 700; }
.dc-move__meta { display: inline-flex; gap: 4px; }
.dc-move__meta:empty { display: none; }
.dc-move__res { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0 6px 6px; }
.dc-move__ctl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.dc-move__ctl:empty { display: none; }
.dc-ctl { display: inline-flex; align-items: center; gap: 4px; }
.dc-ctl__k { color: var(--muted); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dc-crit { height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.dc-crit[aria-pressed="true"] { border-color: transparent; background: #f59f00; color: #241a00; }
.dc-tag { padding: 1px 7px; border: 0; border-radius: 999px; background: var(--chip); color: var(--muted); font: inherit; font-size: .7rem; font-weight: 800; white-space: nowrap; cursor: help; }
.dc-tag--prio { background: color-mix(in srgb, var(--series-1) 20%, transparent); color: var(--text); }
.dc-tag--note { background: color-mix(in srgb, #fab005 22%, transparent); color: var(--text); }
.dc-res {
  display: grid; flex: 1 1 200px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar bar" "pct ko"; align-items: center; gap: 4px 10px;
  min-width: 0; padding: 4px 6px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.dc-res:hover { background: var(--surface); }
.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: .84rem; line-height: 1.35; }
/* The HP bar, out of the target's full HP: what's left even after the highest roll (the games' green, yellow or red),
   then the damage: the band only higher rolls take in a light tint, a hairline, and what every roll takes in the solid
   hue. The empty track is HP it had already lost. */
.dc-hp { --dmg: color-mix(in srgb, var(--bad-ink) 72%, var(--surface)); display: flex; height: 8px; overflow: hidden; border-radius: 999px; background: var(--chip); }
.dc-hp i { display: block; height: 100%; transition: width .2s; }
.dc-hp .dc-hp__left { background: var(--hp); }
.dc-hp .dc-hp__band { background: color-mix(in srgb, var(--dmg) 32%, var(--surface)); }
.dc-hp .dc-hp__lost { background: var(--dmg); box-shadow: inset 1px 0 0 var(--surface); }
.dc-hp--hi { --hp: var(--s5); }
.dc-hp--mid { --hp: var(--s3); }
.dc-hp--lo { --hp: var(--s1); }
@media (prefers-reduced-motion: reduce) { .dc-hp i { transition: none; } }
/* Its key, in plain words */
.dc-hpkey { --dmg: color-mix(in srgb, var(--bad-ink) 72%, var(--surface)); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 6px 0 0; color: var(--muted); font-size: .74rem; font-weight: 600; }
.dc-hpkey span { display: inline-flex; align-items: center; gap: 5px; }
.dc-hpkey i { display: inline-block; width: 14px; height: 8px; border-radius: 3px; }
.dc-hpkey__left { background: var(--hp); }
.dc-hpkey__band { background: color-mix(in srgb, var(--dmg) 32%, var(--surface)); }
.dc-hpkey__lost { background: var(--dmg); }
.dc-hpkey .info-btn { margin-left: -6px; }
.dc-railkey .dc-hpkey { margin: 0; }
/* 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 results rail: always on screen beside the Pokémon, the matchup pinned at its top */
.dc-rail { min-width: 0; }
@media (min-width: 900px) {
  .dc-rail {
    position: sticky; top: calc(var(--header-h) + var(--dc-fb) + 10px); max-height: calc(100vh - var(--header-h) - var(--dc-fb) - 20px);
    overflow-y: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
    box-shadow: var(--shadow); scrollbar-width: thin;
  }
}
.dc-rail__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 12px 12px; }
.dc-rail .dc-match { position: sticky; top: 0; z-index: 3; margin: 0 -12px; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); background: var(--surface); }
.dc-dir__h { margin: 4px 2px 6px; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dc-detail:empty { display: none; }
/* Speed and who wins */
.dc-speed { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.dc-speed__mon { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dc-speed__mon--r { justify-content: flex-end; text-align: right; }
.dc-speed__mon img { width: 40px; height: 40px; flex: none; margin: -4px 0; image-rendering: pixelated; }
.dc-speed__mon > span { display: grid; min-width: 0; line-height: 1.1; }
.dc-speed__mon small { overflow: hidden; color: var(--muted); font-size: .7rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dc-speed__mon b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.dc-speed__mid { display: grid; justify-items: center; line-height: 1.2; text-align: center; }
.dc-speed__k { color: var(--muted); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dc-speed__who { font-size: .8rem; font-weight: 700; }
.dc-speed__who.is-left::before { content: "‹ "; }
.dc-speed__who.is-right::after { content: " ›"; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .dc-rail__in { padding: 0 10px 10px; }
  .dc-rail .dc-match { margin: 0 -10px; padding: 8px 10px; }
}
/* A narrow rail: the two Speeds side by side, who moves first under them */
.dc-rail { container: rail / inline-size; }
@container rail (max-width: 340px) {
  .dc-speed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .dc-speed__mid { grid-column: 1 / -1; grid-row: 2; }
  .dc-speed__mon small { display: none; }
  .dc-speed__mon img { width: 32px; height: 32px; }
  .dc-move .dp { gap: 4px; }
  .dc-move .mvc { gap: 3px; }
}
/* A narrow card: a smaller sprite, so the name has room beside + Team */
@container card (max-width: 359px) {
  .dc-sprite { width: 56px; height: 56px; border-radius: 12px; }
  .dc-head { gap: 8px; }
  .dp--mon > .i:first-child { display: none; }
  .dp--mon .dp__input { padding-left: 14px; font-size: 1rem; }
  .dc-tbtn { padding: 0 10px; }
}
.dc-win { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 6px 0 0; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); font-size: .86rem; }
.dc-win__k { padding: 1px 7px; border-radius: 6px; background: var(--text); color: var(--bg); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dc-win.is-you b { color: var(--good-ink); }
.dc-win.is-foe b { color: var(--bad-ink); }
.dc-win .info-btn { order: 1; }
.dc-win__how { flex-basis: 100%; order: 2; color: var(--muted); font-size: .78rem; }
/* The open move's details: a plain card with the numbers, the crit's, how often it lands, what went in, the line to copy and every roll */
.dc-lcd { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.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 { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dc-lcd__head .ref { color: inherit; }
.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; }
.dc-lcd .dc-lcd__hp { margin-top: 6px; color: var(--muted); font-size: .8rem; }
.dc-lcd .dc-lcd__sub { margin-top: 6px; font-size: .84rem; }
.dc-lcd__k { display: inline-block; min-width: 6.4em; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
/* Why this number: every modifier as a chip; abilities, items, moves and types link to their pages */
.dc-why { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px !important; }
.dc-why__k { margin-right: 2px; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dc-why__c {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: inherit; font-size: .74rem; font-weight: 700; text-decoration: none;
}
a.dc-why__c:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
/* A name in a reason (an ability, a move, a type), which opens its hover card */
.dc-wchip {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 4px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  color: inherit; font-weight: 800; text-decoration: none; white-space: nowrap; vertical-align: 1px;
}
.dc-wchip:not(.dc-wchip--type) { padding-left: 8px; }
.dc-wchip .tdot { width: 18px; height: 18px; }
.dc-wchip .tdot .ti { width: 11px; height: 11px; }
.dc-wchip:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.dc-lcd--none .dc-lcd__none { margin-top: 4px; font-size: 1.02rem; font-weight: 800; }
.dc-lcd--none .dc-lcd__none .ref { color: inherit; }
.dc-lcd .dc-lcd__why { margin-top: 6px; font-size: .88rem; line-height: 1.6; }
.dc-bnone { max-width: 220px; font-size: .76rem; line-height: 1.35; }
.dc-lcd .dc-lcd__gap { margin-top: 8px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, #fab005 25%, transparent); color: var(--text); font-size: .8rem; }
.dc-lcd .dc-lcd__desc {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: .86rem; font-weight: 600; line-height: 1.45;
}
.dc-lcd__desc span { flex: 1; min-width: 0; text-wrap: pretty; }
.dc-copy {
  display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer;
}
.dc-copy:hover { background: var(--chip); }
.dc-copy .i { width: 14px; height: 14px; }
.dc-lcd .dc-lcd__rolls { margin-top: 6px; color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; text-wrap: pretty; }
.dc-lcd__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* The combo: hits added up */
.dc-combo { padding: 10px; border-radius: 14px; border: 1px dashed var(--line); }
.dc-combo .dc-sub { margin: 0 0 6px; }
.dc-combo__empty { margin: 0; color: var(--muted); font-size: .84rem; }
.dc-combo__list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; }
.dc-combo__hit { display: flex; align-items: center; gap: 6px; }
.dc-combo__n { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--chip); font-size: .72rem; font-weight: 800; }
.dc-combo__hit img { width: 30px; height: 30px; flex: none; image-rendering: pixelated; }
.dc-combo__name { display: grid; flex: 1; gap: 2px; min-width: 0; }
.dc-combo__name small { color: var(--muted); font-size: .74rem; }
.dc-combo__out { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0; font-size: .84rem; }
.dc-combo__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.dc-combo .link-btn { padding: 4px 0; font-size: .84rem; }

/* The field, all in one place (the phone's Field tab) */
.dc-fieldbox { padding: 14px; }
.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; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.dc-fsec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.dc-sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 0 0 4px; 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; }
.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; }
.dc-fnote { margin: 0; color: var(--muted); font-size: .8rem; }
.dc-fnote:empty { display: none; }

/* Phones: the dock with the open move's result and the field that's on; it opens a sheet with every result */
.dc-dock { display: none; }
@media (max-width: 899px) {
  .page-calc main { padding-bottom: 112px; }
  .dc-dock {
    position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 55; display: grid; gap: 4px; max-height: 96px;
    padding: 5px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  }
  /* Out of the way while typing (the keyboard is up) */
  body:has(input:focus:not([readonly]), textarea:focus) .dc-dock { display: none; }
}
@media (max-width: 760px) {
  .dc-dock { bottom: calc(66px + env(safe-area-inset-bottom)); }
  .page-calc .to-top { bottom: calc(172px + env(safe-area-inset-bottom)); }
}
.dc-dock__main {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; width: 100%; padding: 5px 10px; border: 1px solid var(--line);
  border-radius: 13px; background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.dc-dock__who { min-width: 0; overflow: hidden; font-size: .78rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dc-dock__res { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dc-dock__res .dc-hp { flex: 1; min-width: 40px; }
.dc-dock__res b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-dock__res .dc-ko { color: inherit; }
.dc-dock__all { display: inline-flex; grid-column: 2; grid-row: 1 / span 2; align-items: center; gap: 2px; font-size: .7rem; font-weight: 800; }
.dc-dock__all .i { width: 14px; height: 14px; transform: rotate(180deg); }
.dc-dock__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.dc-dock__chips::-webkit-scrollbar { display: none; }
.dc-fxchip {
  display: inline-flex; align-items: center; gap: 4px; flex: none; height: 30px; padding: 0 6px 0 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--chip); color: var(--text); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer;
}
.dc-fxchip .i { width: 14px; height: 14px; }
.dc-fxchip--add { padding: 0 10px 0 6px; background: var(--surface); }
.dc-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column; max-height: min(78vh, 680px);
  padding-bottom: env(safe-area-inset-bottom); border-radius: 20px 20px 0 0; border-top: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .3);
}
@media (min-width: 900px) { .dc-sheet, .dc-dock { display: none !important; } }
.dc-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.dc-sheet__head .dc-title { margin: 0; }
.dc-sheet__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow: auto; padding: 10px 14px 16px; }
.dc-sheet .dc-dir__h { margin: 4px 0 0; }
.dc-mlist { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; padding: 0; }
.dc-mres {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "bar bar" "pct ko"; gap: 2px 8px; width: 100%;
  padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.dc-mres[aria-pressed="true"] { border-color: var(--red); }
.dc-mres__name { grid-area: name; font-size: .86rem; font-weight: 700; }
.dc-mres .dc-hp { grid-area: bar; }
.dc-mres .dc-res__pct { grid-area: pct; font-weight: 800; font-variant-numeric: tabular-nums; }
.dc-mres .dc-ko { grid-area: ko; justify-self: end; }
.dc-mres .dc-res__note { grid-area: bar; }

/* More calcs: the 2v2 board, the meta table, the spread finder */
.dc-toolbox { margin-top: 14px; padding: 14px 16px 16px; }
.dc-toolbox__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.dc-toolbox__head .dc-title { margin: 0; }
.dc-tool__intro { max-width: 82ch; margin: 0 0 12px; color: var(--muted); font-size: .88rem; }
.dc-bscroll { position: relative; max-width: 100%; overflow-x: auto; }
.dc-bfield { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.dc-bside { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; }
.dc-bside .dc-sub { margin: 0; }
.dc-bslot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.dc-bslot.is-shown { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.dc-bslot.is-empty { justify-content: space-between; border-style: dashed; background: none; }
.dc-bslot img { width: 48px; height: 48px; flex: none; image-rendering: pixelated; }
.dc-bslot__id { display: grid; flex: 1; gap: 2px; min-width: 0; }
.dc-bslot__k { color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dc-bslot__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dc-bslot__acts .link-btn { padding: 0; font-size: .82rem; }
.dc-border { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 0 0; font-size: .86rem; }
.dc-border .dc-sub { margin: 0 4px 0 0; }
.dc-border__m { display: inline-flex; align-items: center; gap: 4px; }
.dc-border__m img { width: 28px; height: 28px; image-rendering: pixelated; }
.dc-bsums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; margin-top: 12px; }
.dc-bsum, .dc-btable, .dc-mt { width: 100%; border-collapse: collapse; font-size: .82rem; }
.dc-bsum caption { padding-bottom: 4px; color: var(--muted); font-size: .7rem; font-weight: 800; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
.dc-bsum th, .dc-bsum td, .dc-btable th, .dc-btable td, .dc-mt th, .dc-mt td { padding: 6px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.dc-bsum thead th, .dc-btable thead th, .dc-mt thead th { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.is-none { color: var(--muted); }
.dc-batts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-top: 12px; }
.dc-batt { min-width: 0; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.dc-batt__h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .95rem; }
.dc-batt__h img { width: 32px; height: 32px; image-rendering: pixelated; }
.dc-batt__h small { color: var(--muted); font-size: .72rem; font-weight: 700; }
.dc-btable td .dc-hp { height: 6px; margin-bottom: 3px; }
.dc-bcell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-bsum .dc-bcell { display: block; margin-top: 3px; }
.dc-btable td .dc-ib--sm { margin-left: 4px; vertical-align: middle; }
.dc-mt__tools { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
.dc-mt { min-width: 620px; font-size: .84rem; }
.dc-mt__rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.dc-mt__mon { display: flex; align-items: center; gap: 6px; padding: 2px 6px 2px 2px; border: 0; border-radius: 10px; background: none; color: var(--link); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.dc-mt__mon:hover { background: var(--surface-2); }
.dc-mt__mon img { width: 36px; height: 36px; image-rendering: pixelated; }
.dc-mt__mon > span { display: grid; }
.dc-mt__mon small { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: .72rem; font-weight: 600; }
.dc-mt__mon .item-ico { width: 18px; height: 18px; }
.dc-mt__n { margin: 0 4px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-mt__spe b { font-variant-numeric: tabular-nums; }
.dc-mt__spe.is-faster small { color: var(--bad-ink); }
.dc-mt__spe.is-slower small { color: var(--good-ink); }
.dc-opt__who { margin-bottom: 10px; }
.dc-goals { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 10px; padding: 0; }
.dc-goal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.dc-goal__k { font-weight: 800; }
.dc-goal .dc-pickf { flex: 1 1 200px; width: auto; }
.dc-goal .dc-sel:not(.dc-pickf) { width: auto; }
.dc-goal > .dc-ib--sm { margin-left: auto; }
.dc-opt__add, .dc-opt__opts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; }
.dc-opt__go { padding: 8px 18px; border-color: transparent; background: var(--red); color: #fff; font-weight: 800; }
.dc-optres { margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); }
.dc-optres.is-best { border-color: color-mix(in srgb, var(--tone-up) 50%, var(--line)); background: color-mix(in srgb, var(--tone-up) 7%, var(--surface)); }
.dc-optres__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; }
.dc-checks { list-style: none; display: grid; gap: 4px; margin: 0 0 8px; padding: 0; font-size: .86rem; }
.dc-checks li { display: flex; align-items: flex-start; gap: 6px; }
.dc-checks .i { width: 16px; height: 16px; margin-top: 2px; }
.dc-checks .is-ok .i { color: var(--tone-up); }
.dc-checks .is-bad .i { color: var(--tone-down); }

/* Pasting and the keys */
.dc-dialog { width: min(560px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); }
.dc-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.dc-dialog h2 { margin: 0 0 4px; font-size: 1.15rem; }
.dc-dialog__hint { margin: 0 0 10px; color: var(--muted); font-size: .88rem; }
.dc-dialog textarea {
  width: 100%; min-height: 180px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font: .88rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical;
}
.dc-dialog__msg { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #fab005 20%, transparent); font-size: .86rem; }
.dc-dialog__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dc-dialog__close { margin-left: auto; }
.dc-keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 10px 0 0; }
.dc-keys dt { white-space: nowrap; }
.dc-keys dd { margin: 0; color: var(--muted); }
.dc-keys kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--surface-2); font: 700 .8rem var(--font); text-align: center; }

/* The site's toast (app.js) sits above the calc's dock and the phone's tab bar */
@media (max-width: 899px) { .page-calc .toast { bottom: calc(120px + env(safe-area-inset-bottom)); } }
@media (max-width: 760px) { .page-calc .toast { bottom: calc(176px + 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; }
/* The dock at the foot of the screen (app.js): back on the left, "Jump to" in the middle, the top on the right. Small and
   see-through, each shows once the page has scrolled past where it's needed; it sits above the phone bar and the home
   indicator, and on phones steps aside while you scroll down. The footer leaves it room at the end of the page. */
:root { --dock-bottom: max(16px, env(safe-area-inset-bottom)); }
@media (max-width: 760px) { :root { --dock-bottom: calc(70px + env(safe-area-inset-bottom)); } }
.dock {
  position: fixed; left: 0; right: 0; bottom: var(--dock-bottom); z-index: 45; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 8px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); pointer-events: none;
  transition: opacity .2s, translate .2s;
}
.dock.is-tucked { opacity: 0; translate: 0 14px; visibility: hidden; transition: opacity .2s, translate .2s, visibility 0s .2s; }
body:has(.fpanel:not([hidden])) .dock { display: none; } /* out of the way of an open filter panel and its Done button */
@media print { .dock { display: none; } }
.dock__btn {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; min-width: 40px; max-width: 100%; height: 40px; padding: 0 14px 0 10px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 999px; color: var(--text);
  background: color-mix(in srgb, var(--surface) 76%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .45); font: inherit; font-size: .86rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.dock__btn:hover { background: color-mix(in srgb, var(--surface) 94%, transparent); border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.dock__btn .i { width: 18px; height: 18px; flex: none; }
.dock__btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dock__back { grid-column: 1; justify-self: start; }
.dock:not(:has(.dock__jump:not([hidden]))) .dock__back { grid-column: 1 / 3; } /* the middle's free: room for the name */
.dock__jump { grid-column: 2; max-width: min(62vw, 300px); padding-right: 10px; }
.dock__top { grid-column: 3; justify-self: end; }
.dock__top.is-return { border-color: transparent; background: var(--text); color: var(--bg); }
/* "Jump to" names the part you're in; its arrow turns while the menu is open */
.dock__jump > span { display: grid; line-height: 1.15; text-align: left; }
.dock__jump small { color: var(--muted); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dock__jump b { overflow: hidden; text-overflow: ellipsis; }
.dock__jump .i:last-child { width: 16px; height: 16px; color: var(--muted); transition: rotate .15s; }
.dock__jump[aria-expanded="true"] .i:last-child { rotate: 180deg; }
/* Narrow phones: the top button is just its arrow */
@media (max-width: 480px) {
  .dock__top:not(.is-return) { width: 40px; padding: 0; justify-content: center; }
  .dock__top:not(.is-return) > span { display: none; }
}

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

/* ---------- 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; }
}

/* ---------- pick menus (render.py: menu_pick; app.js: pick menus) ----------
   The dropdown for a handful to a few dozen choices: it looks like the site's fields (a label, the choice, a chevron),
   and opens a list of rich options under it, a sheet at the foot of the screen on a phone, as DexPicker's does. */
.mpick {
  position: relative; display: inline-flex; align-items: center; max-width: 100%; min-width: 0;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
}
.mpick:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.mpick:focus-within { border-color: var(--focus); }
.mpick--wide { display: flex; width: 100%; }
.mpick__btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; max-width: 100%; min-height: 40px; padding: 6px 10px 6px 12px;
  border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.mpick__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mpick--sm .mpick__btn { min-height: 34px; padding-block: 3px; font-size: .88rem; }
.mpick__k { flex: none; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mpick__v { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mpick__v > :not(img) { min-width: 0; }
.mpick__v .mpick__tag { display: none; } /* the regulation beside a month shows in the list; the note under it says it again */
.mpick__v .mpick__img { width: 24px; height: 24px; }
.mpick__btn > .i { width: 16px; height: 16px; margin-left: auto; color: var(--muted); transition: rotate .15s; }
.mpick__btn[aria-expanded="true"] > .i { rotate: 180deg; }
.mpick__v .type { font-size: .72rem; }
/* On the Pokédex screen's red rim */
.mpick--dark { border-color: color-mix(in srgb, var(--red-3) 70%, transparent); background: color-mix(in srgb, var(--red-3) 55%, transparent); color: var(--tt); }
.mpick--dark .mpick__k, .mpick--dark .mpick__btn > .i { color: color-mix(in srgb, var(--tt) 78%, transparent); }
/* The open list: under the button (app.js places it), the choice marked as DexPicker marks its own */
.mpick__pop {
  position: fixed; z-index: 90; display: flex; flex-direction: column; max-width: calc(100vw - 16px); overflow: hidden;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px color-mix(in srgb, var(--text) 25%, transparent);
}
.mpick__head { display: none; flex: none; align-items: center; gap: 8px; padding: 8px 8px 6px 16px; }
.mpick__title { flex: 1; min-width: 0; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.mpick__close { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--chip); color: var(--text); font: inherit; font-size: 1.2rem; cursor: pointer; }
.mpick__q { flex: none; margin: 6px 6px 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .9rem; }
.mpick__list { flex: 1; min-height: 0; overflow: auto; padding: 4px; overscroll-behavior: contain; }
.mpick__gh { padding: 8px 10px 2px; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.mpick__opt {
  display: grid; gap: 1px; min-height: 40px; align-content: center; padding: 6px 12px; border-radius: 10px; cursor: pointer;
  font-size: .92rem; font-weight: 600; white-space: nowrap;
}
.mpick--sm + .mpick__pop .mpick__opt, .mpick__pop--sm .mpick__opt { font-size: .88rem; }
.mpick__opt:hover, .mpick__opt:focus { background: var(--surface-2); outline: none; }
.mpick__opt:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.mpick__opt[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--red); }
.mpick__opt[aria-selected="true"]:focus-visible { box-shadow: inset 3px 0 0 var(--red), inset 0 0 0 2px var(--focus); }
.mpick__opt[aria-disabled="true"] { opacity: .5; cursor: help; }
.mpick__main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mpick__main .type { flex: none; }
.mpick__img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.mpick__tag { padding: 1px 7px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: .7rem; font-weight: 800; }
.mpick__note { color: var(--muted); font-size: .76rem; font-weight: 500; white-space: normal; }
/* A phone: a sheet at the foot of the screen, with its name and × */
.mpick__pop.is-sheet { left: 0; right: 0; max-width: none; border-radius: 18px 18px 0 0; border-bottom: 0; box-shadow: 0 -12px 40px color-mix(in srgb, var(--text) 30%, transparent); }
.mpick__pop.is-sheet .mpick__head { display: flex; }
.mpick__pop.is-sheet .mpick__opt { min-height: 46px; padding: 8px 16px; }

/* ---------- the moves card's controls (render.py: moves_section) ---------- */
.moves__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.moves__row .chip-row { flex: 1 1 auto; }
.moves__row .fbar-sort { flex: 0 1 auto; }
.moves__controls .input { min-width: 140px; }

/* ---------- stat changes in the moves list (render.py: stat_marker) ----------
   Each change in the muted up or down tone, its arrow and stages in words beside the stat, then whose and how sure. */
.sc { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: .78rem; font-weight: 700; }
.sc__group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.sc__ch { padding: 0 6px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc__ch--up { background: color-mix(in srgb, var(--tone-up) 14%, transparent); color: var(--tone-up); }
.sc__ch--down { background: color-mix(in srgb, var(--tone-down) 14%, transparent); color: var(--tone-down); }
.sc__who, .sc__x { color: var(--muted); font-weight: 600; white-space: nowrap; }
.sc__who::before, .sc__x::before { content: "· "; }
.sc__was { flex-basis: 100%; color: var(--muted); font-size: .72rem; font-weight: 600; }
.ab__main:hover .sc__ch { text-decoration: none; }
/* Its filter chips (in the filter panel) and the tile's two parts */
.fpanel__row--sc { align-items: flex-start; }
.fpanel__row--sc .fpanel__label { min-width: 8.5em; padding-top: 7px; }
.fpanel__row--sc .chip-row { flex: 1; }
.sc-chip--up:not([aria-pressed="true"]) { color: var(--tone-up); }
.sc-chip--down:not([aria-pressed="true"]) { color: var(--tone-down); }
.sc-part span { margin-left: 2px; font-size: .8em; }
.sc-part--up span { color: var(--tone-up); }
.sc-part--down span { color: var(--tone-down); }
.sc-part[aria-pressed="true"] span { color: inherit; }
@media (max-width: 560px) { .fpanel__row--sc { display: grid; gap: 6px; } .fpanel__row--sc .fpanel__label { padding-top: 0; } }

/* ---------- counts that pick their list (rule 3) ---------- */
.fact-link { color: inherit; text-decoration: underline dotted color-mix(in srgb, var(--text) 45%, transparent); text-underline-offset: 3px; }
.fact-link:hover { color: var(--link); text-decoration-color: currentColor; }
.fact-filter {
  margin-left: 4px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--chip); color: var(--text);
  font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.fact-filter:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.fact-filter[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); border-color: transparent; }
.mon-filter { margin: 0 0 10px; }

/* ---------- Z-Moves and Max Moves in Good to know, labelled and tucked away (rule 9) ---------- */
.gimmick-chip { display: inline-flex; align-items: center; gap: 4px; }
.gimmick-chip[hidden] { display: none; }
.gimmick-chip .badge { font-size: .62rem; }
.gimmick-show { align-self: center; font-size: .82rem; }

/* ---------- "Changes over time": each change's direction ---------- */
.history .chg__dir { margin-left: 6px; vertical-align: 1px; }

/* ---------- the stat calculator's Stat Alignment (DexPicker) ---------- */
.calc-nat { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.calc-nat > span:first-child { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.calc-nat__field { position: relative; min-width: 0; }
.calc-nat__field .input { width: 10.5em; min-width: 0; padding-right: 34px; }
.calc-nat__marks { display: inline-flex; gap: 6px; font-size: .8rem; font-weight: 800; }
.calc-nat__marks .is-up, .dexpick .is-up { color: var(--tone-up); }
.calc-nat__marks .is-down, .dexpick .is-down { color: var(--tone-down); }

/* ---------- the move preview's pickers (moveanim.js) ---------- */
.anim-field { display: grid; gap: 4px; min-width: 0; }
.anim-field > span:first-child { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.anim-field__box { position: relative; min-width: 0; }
.anim-field__box .input { width: 100%; min-width: 0; padding-right: 34px; }
.anim-games { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; grid-column: 1 / -1; min-width: 0; }
.anim-games__k { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* ---------- /champions/ and the Smogon tables: what "top players use it more or less" compares ---------- */
.skill-src .info-btn { vertical-align: -3px; }

/* A source chip in a fact's label keeps its own case */
.facts dt .src { margin-left: 6px; text-transform: none; letter-spacing: .02em; }