/* pokedex.css - extracted VERBATIM from CardDesign.md "Styling" (v15).
   Web reuse notes:
   - The [data-w] wide/xwide rules are kept as-is; on the web card.js sets
     data-w from a REAL matchMedia (no Anki iframe lie), so they just work.
   - .front-card / #answer / FrontSide rules are harmless no-ops here (the web
     card has no front/back split; the image is built straight into the header).
   - Night mode: the .nightMode/.night_mode selectors are driven by a class the
     app toggles on the card host (see app.js / detail page). */

/* Reset native <button> chrome that differs per engine. Anki desktop (Qt
   WebEngine) draws a faint drop shadow on buttons that AnkiDroid (system
   Chromium) does not, even with appearance:none - so kill box-shadow explicitly
   here for every card button (form tabs, compare options, matchup toggle).
   Also the 12px 6px default margin: without the reset the form tabs sit 24px
   apart vertically instead of the 6px gap. Both stated, not inherited. */
.card button {
    margin: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Kill the default body margin. The preview resets html/body to margin:0 in its
   own wrapper, but the real Anki card never saw that reset - so Anki/the browser
   kept the ~8px default body margin AROUND .card, making the gap to the screen
   edge look bigger on device than in the preview. Reset it here so both match.
   AnkiMobile/AnkiDroid also lean on this. */
html, body { margin: 0; padding: 0; }

/* Base card style configurations.
   line-height MUST be stated: left at the default (normal) every environment
   picks its own - Anki spaces noticeably wider than Chromium, which pulls the
   whole card apart compared to the preview. */
.card {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.25;
    /* iOS and Android silently scale text up in some situations, breaking the
       layout. Lock it so every device renders at the same size. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Long words (location names, ability descriptions) must not overflow */
    overflow-wrap: break-word;
    text-align: center;
    color: #2c3e50;
    /* The area around the card (Anki's own wrapper). Neutral light by default;
       tinted per Pokemon by the :has() rules below so the frame does not clash
       with the toned card. A hair DARKER than the card's wash, so the card reads
       as sitting on the page. :has() is only in newer Anki - old builds fall back
       to this neutral, which is fine. */
    background-color: #fbfcfc;
    padding: 22px 20px;
}
.card:has(.pokedex-card[data-color="black"]) { background-color: #fafafa; }
.card:has(.pokedex-card[data-color="blue"]) { background-color: #fafbfd; }
.card:has(.pokedex-card[data-color="brown"]) { background-color: #fcfbfa; }
.card:has(.pokedex-card[data-color="gray"]) { background-color: #fbfbfc; }
.card:has(.pokedex-card[data-color="green"]) { background-color: #fafcfa; }
.card:has(.pokedex-card[data-color="pink"]) { background-color: #fefbfc; }
.card:has(.pokedex-card[data-color="purple"]) { background-color: #fcfafd; }
.card:has(.pokedex-card[data-color="red"]) { background-color: #fefafa; }
.card:has(.pokedex-card[data-color="white"]) { background-color: #fcfdfd; }
.card:has(.pokedex-card[data-color="yellow"]) { background-color: #fefcf9; }

/* An image must never be wider than its container, however large the file */
.card img { max-width: 100%; }

/* Main Pokédex layout frame */
.pokedex-card {
    /* Per-Pokemon colour tone. The species colour (PokeAPI, column 32) picks one
       of the ten [data-color] rules below, each setting four variables the tinted
       rules read: --accent (mid, dex/small accents), --accent-ink (dark, readable
       - name and titles), --accent-soft (wash), --accent-line (dividers). Mapped
       in CSS, not JS, so it works on the front side (no script) and survives a
       dead script. Defaults here are neutral for an unknown/blank colour.
       To revert the whole experiment: delete these vars, the [data-color] rules,
       and swap the var() references back to their old literals. */
    --accent: #8a929c;
    --accent-ink: #525860;
    --accent-soft: #f9fafa;
    --accent-line: #e2e4e6;
    --accent-contrast: #1f9e8f;   /* the compared form on the radar: tone's complement */
    --accent-panel: #fbfcfc;      /* panels: a whisper of tone, LIGHTER than the wash */
    --accent-chip: #f6f6f7;      /* tabs/options: light tone chip */
    /* Flat wash, not a gradient. A gradient fading to white left the lower half
       of the card white, so bottom sections (Abilities) sat on white and read
       with more contrast than the top ones. A flat tint is even top-to-bottom;
       panels sit on --accent-panel (a lighter tint of the same tone, not white,
       which looked off-tone) so they lift off the wash evenly everywhere. */
    background: var(--accent-soft);
    max-width: 380px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--accent-line);
}
.pokedex-card[data-color="black"] { --accent: #4b5058; --accent-ink: #33383e; --accent-soft: #f6f6f7; --accent-line: #d2d3d5; --accent-contrast: #1f9e8f; --accent-panel: #fafafa; --accent-chip: #f1f1f2; }
.pokedex-card[data-color="blue"] { --accent: #4f83cc; --accent-ink: #355178; --accent-soft: #f6f9fc; --accent-line: #d3e0f2; --accent-contrast: #be8637; --accent-panel: #fafbfd; --accent-chip: #f1f5fb; }
.pokedex-card[data-color="brown"] { --accent: #9c6b4a; --accent-ink: #5c4537; --accent-soft: #faf8f6; --accent-line: #e6dad2; --accent-contrast: #3788be; --accent-panel: #fcfbfa; --accent-chip: #f7f3f1; }
.pokedex-card[data-color="gray"] { --accent: #7d8794; --accent-ink: #4c535c; --accent-soft: #f8f9fa; --accent-line: #dee1e4; --accent-contrast: #1f9e8f; --accent-panel: #fbfbfc; --accent-chip: #f5f5f6; }
.pokedex-card[data-color="green"] { --accent: #5aa84f; --accent-ink: #3a643a; --accent-soft: #f7fbf6; --accent-line: #d6e9d3; --accent-contrast: #ad37be; --accent-panel: #fafcfa; --accent-chip: #f2f8f1; }
.pokedex-card[data-color="pink"] { --accent: #e07ba6; --accent-ink: #7e4d65; --accent-soft: #fdf8fb; --accent-line: #f7dee9; --accent-contrast: #37be84; --accent-panel: #fefbfc; --accent-chip: #fdf4f8; }
.pokedex-card[data-color="purple"] { --accent: #9163c4; --accent-ink: #564174; --accent-soft: #faf7fc; --accent-line: #e4d8f0; --accent-contrast: #7ebe37; --accent-panel: #fcfafd; --accent-chip: #f6f3fa; }
.pokedex-card[data-color="red"] { --accent: #dc5348; --accent-ink: #7c3936; --accent-soft: #fdf6f6; --accent-line: #f6d4d1; --accent-contrast: #37b4be; --accent-panel: #fefafa; --accent-chip: #fcf1f0; }
.pokedex-card[data-color="white"] { --accent: #a7adb6; --accent-ink: #61666d; --accent-soft: #fbfbfb; --accent-line: #e9eaed; --accent-contrast: #1f9e8f; --accent-panel: #fcfdfd; --accent-chip: #f8f8f9; }
.pokedex-card[data-color="yellow"] { --accent: #dca62c; --accent-ink: #7c6228; --accent-soft: #fdfbf4; --accent-line: #f6e9ca; --accent-contrast: #3760be; --accent-panel: #fefcf9; --accent-chip: #fcf8ee; }

/* Core image container responsive sizing.
   The source artwork is a square canvas and the drawn area fills only about
   78-94% of its height (Charizard is 800x800 but only 800x627 carries artwork).
   CSS cannot trim that transparent band, so compensate by letting the image run
   taller and tightening its margin. */
.pokemon-image { position: relative; }
.pokemon-image img {
    max-height: 215px;
    width: auto;
    object-fit: contain;
    margin: 2px 0;
}
/* ✨ Shiny toggle: floats over the top-right of the artwork (JS adds it on the
   back only). Tone-driven so it fits every colour + night; when active it fills
   with the accent and the sparkle turns gold. Hidden for forms with no shiny. */
.shiny-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--accent-line);
    border-radius: 50%;
    background: var(--accent-chip);
    color: var(--accent-ink);
    cursor: pointer;
    box-shadow: none;
    z-index: 5;
    transition: background 0.12s, color 0.12s;
}
.shiny-toggle.on {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffd86b;                 /* gold sparkle = shiny is on */
}
.shiny-toggle[hidden] { display: none; }
/* The front holds nothing but the image, so it needs less padding than the back */
.front-card {
    padding: 10px;
}

/* Visual divider line between front and back */
#answer {
    border: none;
    height: 1px;
    background: #e1e8ed;
    margin: 15px auto;
    max-width: 380px;
}

/* Typography settings for identity header */
.pokemon-header {
    margin-bottom: 12px;
}
/* National Dex number. Kept small and muted: it identifies the card but should
   not compete with the name, which is what the deck is actually teaching.
   Back side only - on the front it would be a hint toward the answer. */
.dex-no {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1px;
    margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
}
.eng-name {
    font-size: 26px;
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: var(--accent-ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.jap-box {
    font-size: 14px;
    line-height: 1.3;
    color: #7f8c8d;
}
.jap-name {
    font-weight: bold;
    margin-right: 5px;
}

/* Alignment wrapper for elemental types */
.type-box {
    margin-bottom: 18px;
}

/* Legacy type structure configuration */
.type {
    display: inline-block;
    padding: 5px 14px;
    margin: 0 3px;
    border-radius: 8px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.4px;
    text-align: center;
    text-transform: uppercase;
}

/* The divider sits on a wrapper rather than on the grey box itself:
   .stats-grid has a background and rounded corners, so a border-top there would
   read as the box's own edge instead of a section divider. */
.size-section {
    border-top: 1px dashed var(--accent-line);
    padding-top: 15px;
}

/* Physical info grid layout split */
.stats-grid {
    display: flex;
    justify-content: space-between;
    background: var(--accent-panel);
    border: 1px solid var(--accent-line);
    border-radius: 10px;
    padding: 10px 15px;
    margin-bottom: 15px;
}
.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.stat-item:first-child {
    border-right: 1px solid #e1e8ed;
}
.stat-item .label {
    font-size: 12px;
    color: var(--accent-ink);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.stat-item .value {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
}

/* Pill badge styling for regions and generations */
.meta-box {
    margin-bottom: 15px;
}
.badge-gen, .badge-region {
    display: inline-block;
    font-size: 11px;
    line-height: 1.5;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 20px;
    margin: 0 3px;
}
.badge-gen { background: #e8f4fd; color: #1da1f2; }
.badge-region { background: #feebd0; color: #e67e22; }

/* Etymology block details layout */
.origins-section {
    position: relative;
    text-align: left;
    background: var(--accent-panel);
    border: 1px solid var(--accent-line);
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 15px;
}
.origin-block {
    margin-bottom: 10px;
}
.origin-block:last-child {
    margin-bottom: 0;
}
.origin-label {
    font-size: 12px;
    font-weight: bold;
    color: var(--accent-ink);
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
    text-align: center;
}
/* Applied only when the script finds the text actually overflows; short
   entries are left alone. -webkit-line-clamp is safe here: Anki runs on
   Chromium (desktop, Android) and WebKit (iOS), both of which support it. */
.origins-section.clamped .origin-text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.origins-section.clampable {
    cursor: pointer;
    /* Text stays selectable: user-select was disabled here so a tap would
       expand instead of starting a selection, but that also killed long-press
       selection on mobile. The script now ignores a click when text is
       selected, so tap-to-expand and long-press-to-select can coexist. */
    -webkit-tap-highlight-color: transparent;
}
/* Fade at the bottom hints that there is more text below */
.origins-section.clamped::after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 38px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(to bottom, transparent, var(--accent-panel) 82%);
    pointer-events: none;
}
.origin-text {
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    color: #34495e;
}

/* Sections whose only content is script-built are hidden by default and the
   script reveals them once it has finished. A dead script therefore hides the
   whole block - heading and all - rather than leaving a bare heading with
   nothing under it. */
.needs-js { display: none; }

/* Best-effort stat line shown when the radar cannot be drawn; the script hides
   it once the radar is up. */
.stats-fallback {
    font-size: 12.5px;
    line-height: 1.6;
    color: #57606f;
}

/* Base stat radar chart */
.stats-section {
    border-top: 1px dashed var(--accent-line);
    padding-top: 15px;
    margin-bottom: 15px;
}
.stats-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--accent-ink);
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
/* Direct child only. As a plain descendant selector this also caught the dashed
   swatch inside the legend and, being the more specific rule, stretched an 18px
   swatch to the full 264px - its dashes then read as three grey slabs. */
.radar > svg { width: 100%; max-width: 264px; height: auto; display: block; margin: 0 auto; }
.rg { fill: none; stroke: var(--accent-line); stroke-width: 1; }
.rs { stroke: var(--accent-line); stroke-width: 1; }
.rv { fill-opacity: 0.18; stroke-width: 2; stroke-linejoin: round; }
.rl { font-size: 11px; font-weight: 700; fill: #95a5a6; text-transform: uppercase; }
.rn { font-size: 13px; font-weight: 800; fill: #2c3e50; }
/* The compared form's value, sat just under each axis number when a comparison
   is on. Same size and weight as the current form's number - only the colour,
   set inline, tells them apart. */
.rn2 { font-size: 13px; font-weight: 800; }
/* The totals block, shared by both modes so the caption stays put when a
   comparison is toggled. Single form: the caption over the number on its own
   line. Comparing: the caption over two items (form name + total), in one format
   so neither form reads as the main one. The total is coloured to match that
   form's shape on the chart. */
.radar-totals { margin-top: 6px; }
.rt-cap {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #b2bec3;
    margin-bottom: 1px;
}
.rt-val { font-size: 18px; font-weight: 800; }
.radar-item {
    font-size: 12px;
    color: #7f8c8d;
    line-height: 1.5;
    text-transform: uppercase;
}
.radar-item b { font-size: 15px; }

/* The compared form is drawn exactly like the current one - same fill opacity,
   stroke and vertex dots - and set apart only by colour: a fixed purple against
   the current form's tier colour. Painted first so the form on screen sits on
   top. Purple is fixed, not tier-derived, because half of all form pairs share
   a tier (regional forms often keep the identical total) and a tier colour
   would then collide with the current form exactly when it matters. */
.rghost {
    fill-opacity: 0.18;
    stroke-width: 2;
    stroke-linejoin: round;
}
.cmp-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 2px 0 6px;
}
.cmp-pick[hidden] { display: none; }
.cmp-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #b2bec3;
    margin-right: 1px;
}
.cmp-opt {
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    /* The anchor is a <span>, the options are <button>s, side by side in a flex
       row. Chromium (preview) renders them equal, but Qt WebEngine (Anki desktop)
       gives the button an intrinsic min-height from its font metrics, so it comes
       out ~1px taller. Forcing both to inline-flex + border-box makes the box
       height come purely from line-height + padding on every engine. */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    line-height: 1.25;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 3px 7px;
    color: var(--accent-ink);
    background: var(--accent-chip);
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    cursor: pointer;
}
/* Active comparison: purple, matching the ghost shape it draws. */
.cmp-opt.on { background: var(--accent-contrast); border-color: var(--accent-contrast); color: #fff; }

/* The locked chip standing for the form on screen. Same pill shape as the
   options but dark and non-interactive - the same colour a selected form tab
   uses, so "this is what you are looking at" reads at a glance. It carries no
   .cmp-opt class, so the picker's click handler skips right over it. */
.cmp-anchor {
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    line-height: 1.25;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 3px 7px;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
}

/* Evolution layout mapping setup.
   The padding-bottom keeps the red highlight around the current form from
   touching the divider of the section below. */
.evo-section {
    border-top: 1px dashed var(--accent-line);
    padding-top: 15px;
    padding-bottom: 15px;
}
.evo-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--accent-ink);
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}
/* space-evenly instead of center: centring left 92px unused on the sides (26% of
   the width) while the gaps between figures were only 4px. Spreading the slack
   evenly widens both. It also self-adjusts - on a narrow screen the slack simply
   shrinks to the 6px floor instead of forcing a wrap. */
.evo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 3px;
}
.evo-node {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    max-width: 78px;
    min-width: 0;
    flex-shrink: 1;      /* shrink the artwork when space is tight instead of wrapping */
}
/* Artwork inside the chain, deliberately smaller than the hero image: the chain
   is context, not the subject, so it should read as secondary at a glance. */
.evo-node .ea { height: 62px; width: auto; max-width: 100%; object-fit: contain; }

/* The arrow now carries the evolution requirement underneath it */
.evo-arrow {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 60px;
    flex: none;
}
.evo-tip { font-size: 18px; color: #a4b0be; line-height: 1; }
.evo-cond {
    font-size: 11px;
    line-height: 1.3;
    color: #7f8c8d;
    font-weight: 600;
    text-align: center;
    margin-top: 2px;
}
/* One limb of a branching chain: its own arrow plus everything downstream */
.evo-limb {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 6px;
    min-width: 0;
}
.evo-node .es { height: 64px; image-rendering: pixelated; }
/* Marks the Pokemon the card is about: the name sits in the same dark pill as
   the active form tab, so "currently viewing" reads the same everywhere on the
   card. No box around the figure - the pill alone is enough and it keeps every
   node the same width. */
.evo-node.cur {
    background: none;
    border: none;
    padding: 0;
}
.evo-node.cur .es { height: 88px; }
/* Every name carries the same padding, pill or not. Otherwise the highlighted
   node is 4px taller, and since the row is vertically centred that pushes its
   artwork up out of line with the rest of the chain. */
.evo-node .en {
    font-size: 12.5px;
    margin-top: 3px;
    color: #7f8c8d;
    padding: 2px 0;
    border-radius: 20px;
    line-height: 1.25;
}
/* Only the pill needs side padding. Giving it to every name widened each node
   for nothing and pushed a 3-node chain over the wrap threshold. */
.evo-node.cur .en { padding: 2px 10px; }
.evo-node.cur .en { font-weight: 700; color: #fff; background: var(--accent); }
.evo-arrow { font-size: 16px; color: #b2bec3; }

/* Pokémon that do not evolve (201 cards). Styled as a pill to match the
   Gen/Region badges, so it reads as a deliberate state rather than missing data. */
.no-evo {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    padding: 5px 14px;
    border-radius: 20px;
    background: #f1f2f6;
    color: #a4b0be;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Branching evolution: parallel forms growing out of the same root
   (Snorunt → Glalie or Froslass, Eevee → 8 Eeveelutions).
   The vertical rule on the left shows these are branching choices, not a chain. */
.evo-branch {
    display: grid;
    /* Grid, not column-wrap: column-wrap splits columns by height, so it has
       no idea how wide the card is and overflows once the artwork gets big.
       auto-fit works off the width, so the column count always fits. */
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    align-items: center;
    gap: 8px 2px;
    width: 100%;
    padding: 8px 4px 8px 8px;
    background: var(--accent-panel);
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
}
/* Branches that continue on their own get a full row each */
.evo-branch.deep { grid-template-columns: 1fr; gap: 10px 0; }
/* A deep limb owns a whole row, so spread it like a straight chain instead of
   pinning it left - otherwise the row hugs the left edge and leaves a gap. */
.evo-branch.deep .evo-limb { justify-content: space-evenly; width: 100%; }
/* A stacked row is far wider than a grid cell, so the condition can have more
   room - at 72px a label like "Dawn Stone · ♀" wraps and leaves the separator
   dangling at the end of the line. */
.evo-branch.deep .evo-arrow { max-width: 124px; }
/* Each limb carries a real arrow element now, so the old pseudo-element
   arrow is gone. */

/* Large alternative forms block design */
.forms-section {
    border-top: 1px dashed var(--accent-line);
    padding-top: 15px;
    margin-top: 15px;
}
.forms-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--accent-ink);
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}
.forms-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.form-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f9fa;
    padding: 15px 10px;
    border-radius: 12px;
    border: 1px solid #e1e8ed;
}
.form-img-wrapper img {
    max-height: 160px;
    width: auto;
    object-fit: contain;
    margin-bottom: 6px;
}
.form-name {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    color: #2c3e50;
    text-transform: uppercase;
}

/* Elemental color palette hex codes */
.normal { background-color: #A8A77A; }
.fire { background-color: #EE8130; }
.water { background-color: #6390F0; }
.electric { background-color: #F7D02C; }
.grass { background-color: #7AC74C; }
.ice { background-color: #96D9D6; }
.fighting { background-color: #C22E28; }
.poison { background-color: #A33EA1; }
.ground { background-color: #E2BF65; }
.flying { background-color: #A98FF3; }
.psychic { background-color: #F95587; }
.bug { background-color: #A6B91A; }
.rock { background-color: #B6A136; }
.ghost { background-color: #735797; }
.dragon { background-color: #6F35FC; }
.dark { background-color: #705746; }
.steel { background-color: #B7B7CE; }
.fairy { background-color: #D685AD; }

/* On phones the body padding and the card padding stack up and cost 72px of
   width (20% of a 360px screen). Pull them in so the content gets wider, while
   still leaving room for the rounded corners and shadow. Desktop is left alone
   because a centred card looks better on a wide screen. */
@media (max-width: 480px) {
    .card { padding: 18px 16px; }
    /* drop the 380px ceiling: on wide phones like the iPhone Pro Max it wastes 10px more */
    .pokedex-card { padding: 16px 12px; border-radius: 14px; max-width: none; }
    .front-card { padding: 8px; }
    #answer { margin: 12px auto; max-width: none; }
}

/* ============================================================
   WIDE-SCREEN LAYOUT  (prototype - tablet / Anki desktop)
   ------------------------------------------------------------
   NOT driven by @media: Anki's iframe can over-report its width
   (852px measured inside a 439px window), so a viewport query
   would wrongly hand a narrow window the wide layout. Instead
   _pokedex.js measures the REAL available width (the min across
   every reachable window, including the parent webview) and sets
   data-w = narrow | wide | xwide on BOTH .pokedex-card elements
   (the image hero and the back). With no JS, data-w is absent and
   these rules never match, so the default single-column mobile
   layout stands. Taking the min means a phone can never trip the
   wide layout even if its iframe lies about being wide.
   ------------------------------------------------------------
   Layout at wide (>=720) and xwide (>=1024):
   - The artwork stays part of ONE card: _pokedex.js moves the image
     node from the top .front-card into #v-head-img, so it sits to the
     LEFT of the name block (image-left header). The top hero + divider
     are then hidden. On narrow the image stays on top as before.
   - The detail sections (.bc-body) flow into 2 (wide) or 3 (xwide)
     balanced columns spanning the full card width.
   The card just widens and centres; it is never split into an image
   sidebar + content panel. ==================================== */

/* Widen and centre the single card; hide the now-unused top hero + divider. */
.back-card[data-w="wide"]  { max-width: 820px; }
.back-card[data-w="xwide"] { max-width: 1080px; }
.front-card[data-w="wide"], .front-card[data-w="xwide"] { display: none; }
.card:has(.pokedex-card[data-w="wide"])  > #answer,
.card:has(.pokedex-card[data-w="xwide"]) > #answer { display: none; }

/* Identity header. The image node is moved here by JS; the slot is empty (and
   hidden) on narrow. Image sits to the RIGHT of the name block.
   To flip (image LEFT of name): at wide swap the two grid-column values below;
   at xwide swap the two `order` values. Nothing else changes. */
.bc-head-img:empty { display: none; }
.back-card[data-w="wide"]  .bc-head-img .pokemon-image img,
.back-card[data-w="xwide"] .bc-head-img .pokemon-image img { max-height: 185px; margin: 0; }
.back-card[data-w="wide"]  .bc-id .pokemon-header,
.back-card[data-w="xwide"] .bc-id .pokemon-header { margin-bottom: 10px; }

/* Header mirrors a 2-column split for BOTH wide and xwide: the name block
   centred in the LEFT half, the image centred in the RIGHT half, spread apart
   (not a tight centred pair) so it feels open - the xwide 3-column body still
   gets its own split below. grid-row:1 on both: the image slot is first in the
   DOM but lives in column 2, so sparse auto-placement would otherwise drop the
   name into row 2; pinning both to row 1 keeps them side by side, centred. */
.back-card[data-w="wide"] .bc-head,
.back-card[data-w="xwide"] .bc-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 26px;
    align-items: center;
    margin-bottom: 8px;
}
.back-card[data-w="wide"] .bc-id,
.back-card[data-w="xwide"] .bc-id       { grid-column: 1; grid-row: 1; min-width: 0; }        /* name -> left half */
.back-card[data-w="wide"] .bc-head-img,
.back-card[data-w="xwide"] .bc-head-img { grid-column: 2; grid-row: 1; justify-self: center; } /* image -> right half, centred */

/* Shiny ✨ toggle. In the header the image box shrink-wraps the artwork, so the
   default top-right corner button would sit ON the Pokémon. Nudge it up and OUT
   into the empty space beside the image (each half has plenty), so it never
   covers the art. (Narrow keeps the default: there the image box is full width,
   so the corner is already whitespace.) */
.back-card[data-w="wide"]  .shiny-toggle,
.back-card[data-w="xwide"] .shiny-toggle { top: -8px; right: -30px; }

/* Detail sections: 2 columns at wide, 3 at xwide, spanning the full card. */
.back-card[data-w="wide"]  .bc-body { column-count: 2; column-gap: 26px; }
.back-card[data-w="xwide"] .bc-body { column-count: 3; column-gap: 26px; }
.back-card[data-w="wide"]  .bc-body > *,
.back-card[data-w="xwide"] .bc-body > * {
    break-inside: avoid;                 /* never split a section across a column */
    -webkit-column-break-inside: avoid;
    margin-top: 0;
    margin-bottom: 18px;
}

/* Damage Taken panel: cap width + centre it under the type badges so it does not
   stretch stranded across the header. */
.back-card[data-w="wide"]  .mu-panel,
.back-card[data-w="xwide"] .mu-panel { max-width: 320px; margin-left: auto; margin-right: auto; }

/* Raw JSON holders: read by the script, never displayed */
.json-src { display: none; }

/* Species category, right under the name so it reads as part of the identity block */
.species-box {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.3;
}
.sp-en {
    color: #57606f;
    font-weight: 600;
}
.sp-jp {
    color: #a4b0be;
    margin-left: 8px;
}

/* Rarity badge, sharing the shape of the Gen/Region badges */
.badge-rarity {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 20px;
    margin: 0 3px;
    background: #f3e8ff;
    color: #8e44ad;
}

/* Form tabs. This is what keeps the card from growing when a Pokémon has many forms */
.form-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--accent-line);   /* tone-driven like every other divider (was #e1e8ed) */
}
.form-tabs:empty { display: none; }
.ftab {
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--accent-ink);
    background: var(--accent-chip);
    border: 1px solid var(--accent-line);
    border-radius: 20px;
    padding: 5px 12px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ftab.on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Shown only when the script fails. A red line beats a blank card with no
   explanation. */
.js-error {
    background: #fdecea;
    border: 1px solid #f5c6c0;
    color: #c0392b;
    font-size: 12px;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Type matchup */
.type-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 18px;
}
.type-row .type-box { margin-bottom: 0; }

/* Button that opens the matchup table. A shield icon because the table is
   about damage taken from each type. 28px round - 2px taller than a type badge,
   so the row height stays the same. */
.mu-toggle svg {
    /* display:block kills the inline-baseline gap that would otherwise push the
       icon off-centre; the SVG is centred by its own viewBox, not by font
       metrics, so it lands identically on every platform. */
    display: block;
    width: 15px;
    height: 15px;
}
.mu-toggle {
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    color: #7f8c8d;
    background: #f1f2f6;
    border: 1px solid #dfe4ea;
    border-radius: 50%;
    cursor: pointer;
}
.mu-toggle.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mu-toggle[hidden] { display: none; }

.matchup-wrap { margin: -8px 0 15px; }
.matchup-wrap:empty { display: none; }
.mu-title {
    font-size: 11px;
    font-weight: bold;
    color: var(--accent-ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    margin-bottom: 9px;
}
.mu-panel {
    padding: 10px 8px 4px;
    background: var(--accent-panel);
    border: 1px solid var(--accent-line);
    border-radius: 10px;
}
.mu-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.mu-k {
    flex: none;
    width: 34px;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
    margin-right: 4px;
}
.mu-k.x4 { color: #c0392b; }
.mu-k.x2 { color: #e67e22; }
.mu-k.r2 { color: #16a085; }
.mu-k.r4 { color: #0e6655; }
.mu-k.im { color: #7f8c8d; }
/* small type chips, reusing the existing type colour palette */
.mt {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Abilities */
.abil-section {
    border-top: 1px dashed var(--accent-line);
    padding-top: 15px;
    margin-bottom: 15px;
    text-align: left;
}
.abil-section:empty { display: none; }
.abil-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--accent-ink);
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    text-align: center;
}
.abil {
    background: var(--accent-panel);
    border: 1px solid var(--accent-line);
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 8px;
}
.abil:last-child { margin-bottom: 0; }
.abil-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.abil-en {
    font-size: 15px;
    font-weight: 700;
    color: #2c3e50;
}
.abil-jp {
    font-size: 13.5px;
    color: #7f8c8d;
}
.abil-hid {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #8e44ad;
    background: #f3e8ff;
    border-radius: 20px;
    padding: 1px 7px;
}
.abil-desc {
    font-size: 13.5px;
    line-height: 1.45;
    color: #57606f;
    margin-top: 4px;
}

/* Pokedex flavor entries: one card per unique description, with the game
   versions that share it as pills. Collapses to the newest few; EN/JP toggle. */
.pokedex-section {
    border-top: 1px dashed var(--accent-line);
    padding-top: 15px;
    margin-bottom: 15px;
    text-align: left;
}
.pokedex-section:empty { display: none; }
.pdx-head {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 10px;
}
.pdx-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--accent-ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pdx-lang { position: absolute; right: 0; display: inline-flex; gap: 4px; }
.pdx-lbtn {
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--accent-line);
    background: var(--accent-chip);
    color: var(--accent-ink);
    cursor: pointer;
}
.pdx-lbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pdx-entry {
    background: var(--accent-panel);
    border: 1px solid var(--accent-line);
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 8px;
}
.pdx-vers { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.pdx-ver {
    font-size: 9px;              /* version chips kept small on purpose (not bumped) */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 999px;
    color: #fff;                 /* uniform white text, like the type badges */
    background: #8a909b;         /* fallback; the script sets the game colour inline */
}
/* form label when one game has several form-specific entries (Cap Pikachu…) */
.pdx-form { font-size: 11px; font-weight: 700; color: var(--accent-ink); margin: 5px 0 2px; letter-spacing: 0.2px; }
.pdx-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: #34495e; }
.pdx-more {
    display: block;
    margin: 2px auto 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-ink);
    cursor: pointer;
}

/* Extra Pokedex data: a labelled grid (breeding / catch / training / class). */
.dexdata-section {
    border-top: 1px dashed var(--accent-line);
    padding-top: 15px;
    margin-bottom: 15px;
}
.dexdata-section:empty { display: none; }
.dx-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--accent-ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    margin-bottom: 10px;
}
.dx-grid {
    background: var(--accent-panel);
    border: 1px solid var(--accent-line);
    border-radius: 10px;
    padding: 2px 13px;
}
.dx-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--accent-line);
}
.dx-item:last-child { border-bottom: none; }
.dx-k {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--accent-ink);
    flex: none;
}
.dx-v {
    font-size: 13.5px;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
    text-align: right;
}
/* Gender: dual-ended bar, the % sits at each END next to its colour. */
/* Gender: label on the left, a compact cluster (%, bar, %) pushed to the right. */
.dx-gwrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 700;
}
.dx-gm { color: #4f83cc; flex: none; }
.dx-gf { color: #e07ba6; flex: none; }
.dx-gbar {
    width: 84px;
    flex: none;
    display: flex;
    height: 9px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--accent-line);
}
.dx-male { background: #4f83cc; }
.dx-female { background: #e07ba6; }
/* Meters: value + its max, then a clearly-visible gauge (track = --accent-line
   25%, was --accent-soft 5% which was nearly invisible). */
.dx-num { font-weight: 800; color: #2c3e50; }
.dx-max { font-size: 12px; font-weight: 600; color: #a4b0be; }
.dx-mval { white-space: nowrap; }   /* keep "45/255" together, tight (gap only before the bar) */
.dx-meter {
    display: inline-block;
    width: 58px;
    height: 8px;
    border-radius: 4px;
    background: var(--accent-line);
    overflow: hidden;
    vertical-align: middle;
}
.dx-meter > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.dx-sub { font-size: 10.5px; font-weight: 600; color: #a4b0be; }
/* Egg-group chips (tone) + EV chips (coloured per stat). */
.dx-chip {
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent-chip);
    border: 1px solid var(--accent-line);
    color: var(--accent-ink);
}
.dx-ev {
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    color: #fff;
}
/* Shape: the HOME body-style silhouette (Bulbapedia). Plain <img> (a CSS mask
   url() doesn't load on AnkiDroid); the dark silhouette shows as-is in day and
   is inverted to light for night (see the night block). */
.dx-shape { display: inline-flex; align-items: center; gap: 7px; }
.dx-sic {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: none;
    object-fit: contain;
    vertical-align: middle;
}

/* Reference: outbound links to the three data sources. Same section frame as
   the rest of the card; the script fills it, so an empty box (script failed)
   collapses instead of leaving a bare heading. */
.ref-section {
    border-top: 1px dashed var(--accent-line);
    padding-top: 15px;
    text-align: center;
}
.ref-section:empty { display: none; }
.ref-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--accent-ink);
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}
.ref-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.ref-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 13px;
    color: var(--accent-ink);
    background: var(--accent-panel);
    border: 1px solid var(--accent-line);
    border-radius: 8px;
    text-decoration: none;
}
/* Small arrow marking these as outbound. Inline SVG, not a unicode glyph -
   glyphs fall back to different fonts and can render as tofu (see the shield). */
.ref-link svg { width: 11px; height: 11px; opacity: 0.7; }





/* =========================================================================
   NIGHT MODE. Anki desktop/iOS add .nightMode; AnkiDroid adds .night_mode
   (once .night_mode appears in the CSS, AnkiDroid stops auto-inverting and uses
   these rules). Every night rule targets BOTH. Surface = the Pokemon tone
   DARKENED (hue kept). --accent / --accent-contrast are DEEPENED a touch so the
   solid selected pills (form tab, compare anchor, current evo node) do not glare
   on the dark card; the type badges are muted for the same reason.
   ========================================================================= */
.nightMode .pokedex-card[data-color="black"], .night_mode .pokedex-card[data-color="black"] { --accent: #42474e; --accent-contrast: #1d887c; --accent-soft: #21242b; --accent-panel: #292d36; --accent-line: #40454e; --accent-chip: #23272e; --accent-ink: #b0b2b6; }
.nightMode .pokedex-card[data-color="blue"], .night_mode .pokedex-card[data-color="blue"] { --accent: #4671af; --accent-contrast: #a37432; --accent-soft: #222f45; --accent-panel: #2a3a52; --accent-line: #425c82; --accent-chip: #243248; --accent-ink: #b2c8e9; }
.nightMode .pokedex-card[data-color="brown"], .night_mode .pokedex-card[data-color="brown"] { --accent: #865d42; --accent-contrast: #3176a4; --accent-soft: #332a28; --accent-panel: #3d3433; --accent-line: #645147; --accent-chip: #362d2b; --accent-ink: #d3beaf; }
.nightMode .pokedex-card[data-color="gray"], .night_mode .pokedex-card[data-color="gray"] { --accent: #6c7580; --accent-contrast: #1d887c; --accent-soft: #2c3039; --accent-panel: #353b45; --accent-line: #565e69; --accent-chip: #2f333c; --accent-ink: #c6cad0; }
.nightMode .pokedex-card[data-color="green"], .night_mode .pokedex-card[data-color="green"] { --accent: #4f9046; --accent-contrast: #9532a4; --accent-soft: #253829; --accent-panel: #2d4334; --accent-line: #476d4a; --accent-chip: #273b2c; --accent-ink: #b6d9b2; }
.nightMode .pokedex-card[data-color="pink"], .night_mode .pokedex-card[data-color="pink"] { --accent: #bf6b8f; --accent-contrast: #31a373; --accent-soft: #432e3d; --accent-panel: #4e3849; --accent-line: #835871; --accent-chip: #453140; --accent-ink: #f1c5d8; }
.nightMode .pokedex-card[data-color="purple"], .night_mode .pokedex-card[data-color="purple"] { --accent: #7d57a9; --accent-contrast: #6da332; --accent-soft: #312843; --accent-panel: #3a3250; --accent-line: #604e7e; --accent-chip: #332b46; --accent-ink: #cfbae5; }
.nightMode .pokedex-card[data-color="red"], .night_mode .pokedex-card[data-color="red"] { --accent: #bc4940; --accent-contrast: #319ba4; --accent-soft: #422427; --accent-panel: #4d2e32; --accent-line: #814646; --accent-chip: #44282b; --accent-ink: #f0b3ae; }
.nightMode .pokedex-card[data-color="white"], .night_mode .pokedex-card[data-color="white"] { --accent: #8f959d; --accent-contrast: #1d887c; --accent-soft: #363940; --accent-panel: #40444d; --accent-line: #696f78; --accent-chip: #383c43; --accent-ink: #d8dbdf; }
.nightMode .pokedex-card[data-color="yellow"], .night_mode .pokedex-card[data-color="yellow"] { --accent: #bc8f29; --accent-contrast: #3154a4; --accent-soft: #423721; --accent-panel: #4d422b; --accent-line: #816c3a; --accent-chip: #443a24; --accent-ink: #f0d8a2; }
.card.nightMode:has(.pokedex-card[data-color="black"]), .card.night_mode:has(.pokedex-card[data-color="black"]), .nightMode .card:has(.pokedex-card[data-color="black"]), .night_mode .card:has(.pokedex-card[data-color="black"]) { background-color: #16181d !important; }
.card.nightMode:has(.pokedex-card[data-color="blue"]), .card.night_mode:has(.pokedex-card[data-color="blue"]), .nightMode .card:has(.pokedex-card[data-color="blue"]), .night_mode .card:has(.pokedex-card[data-color="blue"]) { background-color: #171f2d !important; }
.card.nightMode:has(.pokedex-card[data-color="brown"]), .card.night_mode:has(.pokedex-card[data-color="brown"]), .nightMode .card:has(.pokedex-card[data-color="brown"]), .night_mode .card:has(.pokedex-card[data-color="brown"]) { background-color: #211b1b !important; }
.card.nightMode:has(.pokedex-card[data-color="gray"]), .card.night_mode:has(.pokedex-card[data-color="gray"]), .nightMode .card:has(.pokedex-card[data-color="gray"]), .night_mode .card:has(.pokedex-card[data-color="gray"]) { background-color: #1d1f25 !important; }
.card.nightMode:has(.pokedex-card[data-color="green"]), .card.night_mode:has(.pokedex-card[data-color="green"]), .nightMode .card:has(.pokedex-card[data-color="green"]), .night_mode .card:has(.pokedex-card[data-color="green"]) { background-color: #18241c !important; }
.card.nightMode:has(.pokedex-card[data-color="pink"]), .card.night_mode:has(.pokedex-card[data-color="pink"]), .nightMode .card:has(.pokedex-card[data-color="pink"]), .night_mode .card:has(.pokedex-card[data-color="pink"]) { background-color: #2a1e28 !important; }
.card.nightMode:has(.pokedex-card[data-color="purple"]), .card.night_mode:has(.pokedex-card[data-color="purple"]), .nightMode .card:has(.pokedex-card[data-color="purple"]), .night_mode .card:has(.pokedex-card[data-color="purple"]) { background-color: #201a2c !important; }
.card.nightMode:has(.pokedex-card[data-color="red"]), .card.night_mode:has(.pokedex-card[data-color="red"]), .nightMode .card:has(.pokedex-card[data-color="red"]), .night_mode .card:has(.pokedex-card[data-color="red"]) { background-color: #2a181b !important; }
.card.nightMode:has(.pokedex-card[data-color="white"]), .card.night_mode:has(.pokedex-card[data-color="white"]), .nightMode .card:has(.pokedex-card[data-color="white"]), .night_mode .card:has(.pokedex-card[data-color="white"]) { background-color: #23242a !important; }
.card.nightMode:has(.pokedex-card[data-color="yellow"]), .card.night_mode:has(.pokedex-card[data-color="yellow"]), .nightMode .card:has(.pokedex-card[data-color="yellow"]), .night_mode .card:has(.pokedex-card[data-color="yellow"]) { background-color: #2a2317 !important; }
/* Type palette muted for the dark card (white text on the light types reads better too) */
.nightMode .normal, .night_mode .normal { background-color: #888766; }
.nightMode .fire, .night_mode .fire { background-color: #be6a2c; }
.nightMode .water, .night_mode .water { background-color: #5275c2; }
.nightMode .electric, .night_mode .electric { background-color: #c5a729; }
.nightMode .grass, .night_mode .grass { background-color: #64a042; }
.nightMode .ice, .night_mode .ice { background-color: #7aaead; }
.nightMode .fighting, .night_mode .fighting { background-color: #9c2926; }
.nightMode .poison, .night_mode .poison { background-color: #843584; }
.nightMode .ground, .night_mode .ground { background-color: #b59a55; }
.nightMode .flying, .night_mode .flying { background-color: #8875c4; }
.nightMode .psychic, .night_mode .psychic { background-color: #c74770; }
.nightMode .bug, .night_mode .bug { background-color: #86951b; }
.nightMode .rock, .night_mode .rock { background-color: #938330; }
.nightMode .ghost, .night_mode .ghost { background-color: #5e497c; }
.nightMode .dragon, .night_mode .dragon { background-color: #5b2ecb; }
.nightMode .dark, .night_mode .dark { background-color: #5c493d; }
.nightMode .steel, .night_mode .steel { background-color: #9394a7; }
.nightMode .fairy, .night_mode .fairy { background-color: #ac6d8d; }
.nightMode #answer, .night_mode #answer { background: #33373f; }
.nightMode .card, .night_mode .card { color: #d6dbe1; }
.nightMode .origin-text, .nightMode .abil-desc, .nightMode .abil-en, .nightMode .stat-item .value, .nightMode .sp-en, .night_mode .origin-text, .night_mode .abil-desc, .night_mode .abil-en, .night_mode .stat-item .value, .night_mode .sp-en { color: #d2d8de; }
.nightMode .abil-jp, .nightMode .evo-cond, .nightMode .evo-node .en, .nightMode .romaji, .nightMode .jap-name, .nightMode .sp-jp, .nightMode .radar-total, .nightMode .rt-cap, .nightMode .radar-item, .night_mode .abil-jp, .night_mode .evo-cond, .night_mode .evo-node .en, .night_mode .romaji, .night_mode .jap-name, .night_mode .sp-jp, .night_mode .radar-total, .night_mode .rt-cap, .night_mode .radar-item { color: #9099a3; }
.nightMode .evo-node.cur .en, .night_mode .evo-node.cur .en { color: #fff; }
.nightMode .rn, .night_mode .rn { fill: #d6dbe1; }
.nightMode .rl, .night_mode .rl { fill: #7e8791; }
.nightMode .badge-gen, .night_mode .badge-gen { background: #12304a; color: #6cc0ff; }
.nightMode .badge-region, .night_mode .badge-region { background: #34260f; color: #f0a355; }
.nightMode .abil-hid, .night_mode .abil-hid { background: #291f38; color: #c79be8; }
.nightMode .mu-k.x4, .night_mode .mu-k.x4 { color: #ff6f61; }
.nightMode .mu-k.x2, .night_mode .mu-k.x2 { color: #f0a355; }
.nightMode .mu-k.r2, .night_mode .mu-k.r2 { color: #35c9a6; }
.nightMode .mu-k.r4, .night_mode .mu-k.r4 { color: #2fb894; }
.nightMode .mu-k.im, .night_mode .mu-k.im { color: #9099a3; }
.nightMode .mu-toggle, .night_mode .mu-toggle { background: var(--accent-chip); border-color: var(--accent-line); color: #9099a3; }
.nightMode .no-evo, .night_mode .no-evo { background: var(--accent-chip); color: #9099a3; }
.nightMode .badge-rarity, .night_mode .badge-rarity { background: #291f38; color: #c79be8; }
/* new Pokedex Entries + Details sections: lighten their fixed text on dark */
.nightMode .pdx-text, .nightMode .dx-v, .nightMode .dx-num, .night_mode .pdx-text, .night_mode .dx-v, .night_mode .dx-num { color: #d2d8de; }
.nightMode .dx-sub, .nightMode .dx-max, .night_mode .dx-sub, .night_mode .dx-max { color: #9099a3; }
/* Shape silhouette is a dark icon -> invert to light so it shows on the dark card. */
.nightMode .dx-sic, .night_mode .dx-sic { filter: invert(1); }