/* ---------- Font ---------- */

@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/PressStart2P-Regular.ttf") format("truetype");
  font-display: swap;
}

/* ---------- Colors ---------- */

:root {
  --shell: #d32f2f;
  --shell-dark: #9a1b1b;
  --shell-ink: #ffffff;
  --brand-gold: #ffd740;
  --brand-ink: #2a0f12;
  --logo-outline: #1c1012;
  --footer-card: #1c1416;
  --footer-tile: #120c0d;
  --footer-line: #3d2e2a;
  --footer-text: #eee5dc;
  --footer-muted: #a8988d;
  --page: #000000;
  --screen: #e9f1dc;
  --screen-edge: #2b2b2b;
  --panel: #f7faf2;
  --ink: #1f2a1c;
  --muted: #5b6656;
  --line: #c3cfb4;
  --accent: #2d6a4f;
  --pixel-font: "Press Start 2P", ui-monospace, monospace;
  --body-font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shell: #8e1c1c;
    --shell-dark: #5c1010;
    --screen: #1c231b;
    --screen-edge: #000000;
    --panel: #253024;
    --ink: #e4ecd9;
    --muted: #9fae98;
    --line: #3a4a37;
    --accent: #8fd3a8;
  }
}

:root[data-theme="dark"] {
  --shell: #8e1c1c;
  --shell-dark: #5c1010;
  --screen: #1c231b;
  --screen-edge: #000000;
  --panel: #253024;
  --ink: #e4ecd9;
  --muted: #9fae98;
  --line: #3a4a37;
  --accent: #8fd3a8;
}

/* ---------- Page and shell ---------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body-font);
  line-height: 1.5;
}

.shell {
  max-width: 860px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--shell);
  padding: 0 16px 24px;
  box-shadow: 0 0 0 4px var(--shell-dark) inset;
}

.shell-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  color: var(--shell-ink);
  text-decoration: none;
}

.brand-icon {
  flex: 0 0 auto;
  display: flex;
}

.brand-icon img {
  display: block;
  width: 60px;
  height: 60px;
  filter: drop-shadow(2px 3px 0 var(--shell-dark));
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* The logo: metallic letters with a hard shine line through the middle (after Gold's title),
   a blocky dark outline and a drop shadow. "Poké" and "Helper" take the colors of the
   selected game's versions; see the .logo-<version> palettes below. */
.brand-name {
  position: relative;
  font-family: var(--pixel-font);
  font-size: 24px;
  line-height: 24px;
  white-space: nowrap;
  color: var(--logo-outline);
  text-shadow:
    -2px -2px 0 var(--logo-outline),
    -2px -1px 0 var(--logo-outline),
    -2px 0px 0 var(--logo-outline),
    -2px 1px 0 var(--logo-outline),
    -2px 2px 0 var(--logo-outline),
    -1px -2px 0 var(--logo-outline),
    -1px 2px 0 var(--logo-outline),
    0px -2px 0 var(--logo-outline),
    0px 2px 0 var(--logo-outline),
    1px -2px 0 var(--logo-outline),
    1px 2px 0 var(--logo-outline),
    2px -2px 0 var(--logo-outline),
    2px -1px 0 var(--logo-outline),
    2px 0px 0 var(--logo-outline),
    2px 1px 0 var(--logo-outline),
    2px 2px 0 var(--logo-outline),
    0px 1px 0 var(--shell-dark),
    0px 2px 0 var(--shell-dark),
    0px 3px 0 var(--shell-dark),
    0px 4px 0 var(--shell-dark),
    0px 5px 0 var(--shell-dark),
    1px 1px 0 var(--shell-dark),
    1px 5px 0 var(--shell-dark),
    2px 1px 0 var(--shell-dark),
    2px 5px 0 var(--shell-dark),
    3px 1px 0 var(--shell-dark),
    3px 5px 0 var(--shell-dark),
    4px 1px 0 var(--shell-dark),
    4px 2px 0 var(--shell-dark),
    4px 3px 0 var(--shell-dark),
    4px 4px 0 var(--shell-dark),
    4px 5px 0 var(--shell-dark);
}

/* The gradient is drawn by an overlay copy of each word (::after),
   because the outline's text-shadow would otherwise paint over it. */
/* Both the letters and their overlay copy use the same 24px line height, so the overlay sits
   exactly on top of the letters and the gradient bands line up with the font's pixel rows. */
.logo-part,
.logo-part::after {
  line-height: 24px;
}

.logo-part {
  position: relative;
}

.logo-part::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  /* Hard bands on the font's 3px pixel rows (at 24px), like pixel-art shading:
     one highlight row, three base rows, then a slightly darker shade below the shine line. */
  background-image: linear-gradient(
    var(--light) 0 3px,
    var(--base) 3px 12px,
    var(--dark) 12px
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

/* Metallic palettes for each version: highlight, base, and the shade below the shine line. */
.logo-red { --light: #ffb3a8; --base: #ff4a3d; --dark: #c0141a; }
.logo-blue { --light: #cfe0ff; --base: #5b8cff; --dark: #2a4fd0; }
.logo-yellow { --light: #fff7b0; --base: #ffd83a; --dark: #e0a800; }
.logo-gold { --light: #fff6b0; --base: #f5cf3a; --dark: #c48a1a; }
.logo-silver { --light: #ffffff; --base: #dde2ea; --dark: #9aa3b2; }
.logo-crystal { --light: #ffffff; --base: #c8f4ff; --dark: #5cc8f0; }
.logo-ruby { --light: #ffc2cf; --base: #ff3d6a; --dark: #c00f3a; }
.logo-sapphire { --light: #c8d8ff; --base: #4f7dff; --dark: #2148c8; }
.logo-emerald { --light: #e6fff0; --base: #5ee696; --dark: #1fa85c; }
.logo-firered { --light: #fff38a; --base: #ffb52e; --dark: #ff6a1a; }
.logo-leafgreen { --light: #eaffc0; --base: #9be060; --dark: #4fa82a; }

.brand-tagline {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

/* Version colors, lightened to stay readable on dark backgrounds. */
.version-red { color: #ff5c5c; }
.version-blue { color: #6fa8ff; }
.version-yellow { color: #ffd93d; }
.version-gold { color: #f0c040; }
.version-silver { color: #c9ced8; }
.version-crystal { color: #7fe3ff; }
.version-ruby { color: #ff5577; }
.version-sapphire { color: #7092ff; }
.version-emerald { color: #3ddc84; }
.version-firered { color: #ff7a45; }
.version-leafgreen { color: #8bdc5a; }

/* ---------- Dropdowns (game picker and type filter) ---------- */

.dropdown {
  position: relative;
}

.dropdown-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  cursor: pointer;
}

.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 340px;
  overflow-y: auto;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.dropdown-list li {
  padding: 6px;
  border-radius: 3px;
  cursor: pointer;
}

/* The header's game picker: dark, so the version colors stand out. */

.game-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.game-picker-label {
  font-family: var(--pixel-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--shell-ink);
  text-shadow: 1px 1px 0 var(--shell-dark);
}

.game-picker .dropdown-button,
.game-picker .dropdown-list {
  font-family: var(--pixel-font);
  font-size: 16px;
  line-height: 24px;
  background: var(--brand-ink);
  color: var(--footer-text);
  border: 3px solid var(--screen-edge);
  border-radius: 4px;
}

.game-picker .dropdown-button {
  width: 380px;
  max-width: 100%;
  text-align: left;
  padding: 8px 10px;
}

.game-picker .dropdown-button:focus-visible,
.game-picker .dropdown-list:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

.game-picker .dropdown-arrow {
  color: var(--brand-gold);
}

.game-picker .dropdown-list {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.game-picker .dropdown-list li {
  padding: 8px 6px;
}

.game-picker .dropdown-list li.active {
  background: #4a2a2e;
}

.game-picker .dropdown-list li[aria-selected="true"]::after {
  content: " ✓";
  color: var(--brand-gold);
}

.screen {
  background: var(--screen);
  border: 4px solid var(--screen-edge);
  border-radius: 6px 6px 6px 32px;
  padding: 16px;
  min-height: 60vh;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.message {
  font-family: var(--pixel-font);
  font-size: 12px;
  text-align: center;
  padding: 48px 0;
}

.muted {
  color: var(--muted);
}

a {
  color: var(--accent);
}

/* ---------- Type badges and tags ---------- */

.type {
  display: inline-block;
  min-width: 64px;
  margin: 2px 4px 2px 0;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
  background: #888888;
}

.type-normal { background: #a8a878; }
.type-fire { background: #f08030; }
.type-water { background: #6890f0; }
.type-electric { background: #f8d030; }
.type-grass { background: #78c850; }
.type-ice { background: #98d8d8; }
.type-fighting { background: #c03028; }
.type-poison { background: #a040a0; }
.type-ground { background: #e0c068; }
.type-flying { background: #a890f0; }
.type-psychic { background: #f85888; }
.type-bug { background: #a8b820; }
.type-rock { background: #b8a038; }
.type-ghost { background: #705898; }
.type-dragon { background: #7038f8; }
.type-dark { background: #705848; }
.type-steel { background: #b8b8d0; }

.exclusive {
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid var(--muted);
  border-radius: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

/* ---------- List view ---------- */

.list-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.search {
  flex: 1 1 220px;
}

.list-controls input,
.type-filter .dropdown-button,
.type-filter .dropdown-list {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--screen-edge);
  border-radius: 4px;
}

.list-controls input {
  width: 100%;
  padding: 10px;
}

/* The type filter: light like the search box, with each type as its colored badge. */

.type-filter {
  flex: 0 0 170px;
}

.type-filter .dropdown-button {
  height: 100%;
  padding: 6px 10px;
}

.type-filter .dropdown-button:focus-visible,
.type-filter .dropdown-list:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.type-filter .type {
  margin: 0;
}

/* Three columns (spacer, option, check mark or arrow) keep the option centered. */
.type-filter .dropdown-button,
.type-filter .dropdown-list li {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.type-filter .dropdown-button::before,
.type-filter .dropdown-list li::before {
  content: "";
}

.type-filter .dropdown-arrow,
.type-filter .dropdown-list li::after {
  justify-self: end;
}

.type-filter .dropdown-list li.active {
  background: var(--line);
}

.type-filter .dropdown-list li[aria-selected="true"]::after {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
}

.result-count {
  margin: 8px 0;
  color: var(--muted);
  font-size: 13px;
}

.pokemon-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pokemon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 8px;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 4px;
}

.pokemon-card:hover,
.pokemon-card:focus-visible {
  border-color: var(--screen-edge);
  outline: none;
}

.dex-number {
  font-family: var(--pixel-font);
  font-size: 11px;
  color: var(--muted);
}

.list-sprite {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
}

.pokemon-name {
  font-weight: 700;
}

.pokemon-card .exclusive {
  margin-left: 0;
}

.pokemon-types {
  margin-top: auto;
}

.pokemon-types .type {
  min-width: 0;
}

.sprite-missing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pixel-font);
  color: var(--muted);
}

@media (max-width: 520px) {
  .pokemon-list {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
  .list-sprite {
    width: 72px;
    height: 72px;
  }
}

/* ---------- Detail view ---------- */

.back-link {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--pixel-font);
  font-size: 11px;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.detail-sprite-frame {
  background: var(--panel);
  border: 3px solid var(--screen-edge);
  border-radius: 4px;
  padding: 8px;
}

.detail-sprite {
  display: block;
  width: 192px;
  height: 192px;
  image-rendering: pixelated;
}

.detail-name {
  font-family: var(--pixel-font);
  font-size: 22px;
  margin: 8px 0;
  line-height: 1.3;
}

.detail-types {
  margin: 0;
}

.detail-section {
  margin-top: 24px;
}

.detail-section h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pixel-font);
  font-size: 13px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--screen-edge);
}

.detail-section h3 {
  font-size: 14px;
  margin: 12px 0 6px;
  color: var(--muted);
}

/* Help tooltips: a "?" next to a heading that explains it on hover or focus. */

.help {
  position: relative;
  display: flex;
}

.help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--screen-edge);
  border-radius: 50%;
  cursor: help;
}

.help-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.help-text {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  width: max-content;
  max-width: 240px;
  padding: 6px 10px;
  font-family: var(--body-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--footer-text);
  background: var(--brand-ink);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  visibility: hidden;
}

.help:hover .help-text,
.help-button:focus + .help-text {
  visibility: visible;
}

/* Abilities */

.abilities dt {
  font-weight: 700;
}

.abilities dd {
  margin: 0 0 8px;
  color: var(--muted);
}

/* Type matchups */

.matchup-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: start;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}

.matchup-label {
  font-weight: 700;
}

.matchup-label .type {
  min-width: 0;
}

/* Evolution */

.evolution {
  overflow-x: auto;
}

.evo-stage {
  display: flex;
  align-items: center;
  gap: 8px;
}

.evo-branches {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.evo-branch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.evo-method {
  flex: 0 0 140px;
  font-size: 12px;
  color: var(--muted);
}

.evo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 96px;
  padding: 4px 8px 8px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.evo-card:hover {
  border-color: var(--screen-edge);
}

.evo-current {
  border-color: var(--screen-edge);
  border-width: 3px;
}

.evo-sprite {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}

/* Tables */

.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th {
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 2px solid var(--screen-edge);
  padding: 4px 8px;
}

td {
  padding: 4px 8px;
  border-bottom: 1px dashed var(--line);
  vertical-align: middle;
}

.moves-table td:first-child,
.moves-table td:nth-child(n + 4) {
  font-variant-numeric: tabular-nums;
}

.locations-table td {
  white-space: nowrap;
}

.locations-table td:first-child {
  white-space: normal;
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  color: var(--footer-text);
  font-size: 14px;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--brand-gold);
  text-decoration-color: rgba(255, 215, 64, 0.4);
  text-underline-offset: 3px;
}

.footer-card {
  padding: 16px;
  background: var(--footer-card);
  border: 1px solid var(--footer-line);
  border-radius: 6px;
}

.footer-heading {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--footer-line);
  font-family: var(--pixel-font);
  font-size: 12px;
  font-weight: normal;
  color: var(--brand-gold);
}

.footer-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.footer-tile {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  background: var(--footer-tile);
  border: 1px solid var(--footer-line);
  border-radius: 4px;
}

.tile-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--footer-muted);
}

.tile-value {
  font-weight: 700;
  color: var(--brand-gold);
}

.source {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.source-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 2px;
  image-rendering: pixelated;
  background: var(--footer-tile);
  border: 2px solid var(--brand-gold);
  border-radius: 4px;
}

.source-title {
  font-weight: 700;
}

.source p:not(.source-title) {
  color: var(--footer-muted);
}

.site-footer .footer-fineprint {
  margin-top: 14px;
  font-size: 13px;
  color: var(--footer-muted);
}

.footer-games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .footer-game {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-weight: 700;
  text-decoration: none;
  background: var(--footer-tile);
  border: 1px solid var(--footer-line);
  border-radius: 4px;
}

.site-footer .footer-game:hover {
  border-color: var(--brand-gold);
}

.footer-game-sprites {
  display: flex;
  flex: 0 0 auto;
}

.footer-game-sprites img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}

.maker-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border-left: 4px solid var(--brand-gold);
}

.maker-avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--brand-gold);
  background: #7b3fb8;
  font-family: var(--pixel-font);
  font-size: 16px;
  color: #ffffff;
  text-shadow: 2px 2px 0 var(--brand-ink);
}

.maker-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--footer-muted);
}

.site-footer .maker-name {
  margin-bottom: 4px;
  font-family: var(--pixel-font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--brand-gold);
}