:root { color-scheme: light dark; }
body { font-family: Arial, sans-serif; margin: 0; background: #111827; color: #f3f4f6; }
a { color: #93c5fd; text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }
.site-header { background: #1f2937; border-bottom: 1px solid #374151; }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.site-header nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.brand { font-weight: 700; color: #fff; }
.hero { padding: 2rem 0; }
.stats-grid, .grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
/* min-width: 0 on grid items so a wide .table-scroll child can't push the card past its column track. */
.stats-grid > *, .grid.two > * { min-width: 0; }
.card, .card-list > li { background: #1f2937; border: 1px solid #374151; border-radius: 14px; padding: 1rem; }
.card-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.link-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }
.link-grid > li { display: flex; }
.link-grid > li > a { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.75rem; background: #1f2937; border: 1px solid #374151; border-radius: 8px; color: #93c5fd; }
.link-grid > li > a:hover, .link-grid > li > a:focus { background: #374151; text-decoration: none; }
/* Each card sizes to its own content so short names don't stretch and long names don't wrap. */
.cross-link-grid { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cross-link-grid > li > a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: #1f2937; border: 1px solid #374151; border-radius: 8px; color: #93c5fd; white-space: nowrap; }
.cross-link-grid > li > a:hover, .cross-link-grid > li > a:focus { background: #374151; text-decoration: none; }
.cross-link-grid .sprite { width: 36px; height: 36px; image-rendering: pixelated; flex-shrink: 0; }
.cross-link-grid .type-badge { font-size: 0.72rem; padding: 0.1rem 0.45rem; flex-shrink: 0; }
.cross-link-grid .move-cat-icon { width: 18px; height: 18px; flex-shrink: 0; }
.region-map { position: relative; display: block; width: 100%; max-width: 760px; margin: 0 auto 1.25rem; }
.region-map img { display: block; width: 100%; height: auto; image-rendering: pixelated; border-radius: 8px; }
.region-map a { position: absolute; display: block; box-sizing: border-box; }
.region-map a:hover, .region-map a:focus, .region-map a.linked-hover { outline: 2px solid #93c5fd; background: rgba(147, 197, 253, 0.18); }
.region-map a::after { content: attr(aria-label); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; padding: 2px 6px; font-size: 0.8rem; font-weight: 600; color: #f9fafb; background: rgba(17, 24, 39, 0.9); border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 80ms; }
.region-map a:hover::after, .region-map a:focus::after, .region-map a.linked-hover::after { opacity: 1; }
.link-grid > li > a.linked-hover { background: #374151; }
.link-grid > li > a.has-map {
  background-color: #1f2937;
  background-image: linear-gradient(rgba(31, 41, 55, 0.62), rgba(31, 41, 55, 0.62)), var(--map-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  color: #f9fafb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  font-weight: 600;
}
.link-grid > li > a.has-map:hover,
.link-grid > li > a.has-map:focus,
.link-grid > li > a.has-map.linked-hover {
  background-image: linear-gradient(rgba(55, 65, 81, 0.5), rgba(55, 65, 81, 0.5)), var(--map-bg);
  text-decoration: none;
}
.muted { color: #9ca3af; }
table { width: 100%; border-collapse: collapse; background: #1f2937; border-radius: 14px; overflow: hidden; }
tr[data-href], li[data-href], td[data-href] { cursor: pointer; }
tr[data-href]:hover, li[data-href]:hover, td[data-href]:hover { background: #2a3441; }
th, td { padding: 0.75rem; border-bottom: 1px solid #374151; text-align: left; }
ul { line-height: 1.6; }
@media (max-width: 800px) { .stats-grid, .grid.two { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .wrap { padding: 0.75rem; } }

.sprite-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.sprite-card { background: #111827; border: 1px solid #374151; border-radius: 12px; padding: 0.75rem; text-align: center; }
.sprite-card img { image-rendering: pixelated; max-width: 100%; height: auto; }
.sprite-card figcaption { margin-top: 0.5rem; color: #9ca3af; font-size: 0.9rem; word-break: break-word; }


.pokemon-hero-card { margin-bottom: 1rem; }
.pokemon-hero { display:flex; align-items:center; gap:1.25rem; }
.pokemon-hero-sprites { display:flex; align-items:center; gap:0.5rem; }
.pokemon-hero-sprite { image-rendering: pixelated; width: 96px; height: auto; }


.filter-bar { margin: 1rem 0 1.25rem; display: grid; gap: 0.45rem; }
.filter-label { font-weight: 700; }
.filter-input { width: 100%; max-width: 34rem; padding: 0.8rem 0.95rem; border-radius: 10px; border: 1px solid #4b5563; background: #111827; color: #f3f4f6; }
.filter-input::placeholder { color: #9ca3af; }
.filter-empty { margin-top: 1rem; color: #9ca3af; }
.filter-hidden { display: none !important; }
.pokedex-filter-bar { position: relative; }
.search-suggestions { position: absolute; top: 100%; left: 0; right: 0; max-width: 34rem; max-height: 280px; overflow-y: auto; background: #111827; border: 1px solid #4b5563; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.4); z-index: 20; margin-top: 4px; }
.suggestion { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; background: none; border: none; color: #f3f4f6; cursor: pointer; }
.suggestion:hover, .suggestion:focus, .suggestion.is-active { background: rgba(148, 163, 184, 0.18); }
.suggestion-kind { display: inline-block; min-width: 4.5rem; font-size: 0.78em; opacity: 0.7; text-transform: uppercase; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.filter-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(148, 163, 184, 0.22); font-size: 0.9em; }
.chip-kind { font-size: 0.75em; opacity: 0.7; text-transform: uppercase; }
.chip-remove { background: none; border: none; color: inherit; cursor: pointer; font-size: 1.1em; line-height: 1; padding: 0 0.15rem; }
.chip-remove:hover { color: #f9fafb; }
.sortable-table th.sortable { cursor: pointer; user-select: none; }
.sortable-table th.sortable::after { content: '▾'; display: inline-block; width: 0.7em; margin-left: 0.3em; opacity: 0.3; }
.sortable-table th.sort-asc::after { content: '▲'; opacity: 1; }
.sortable-table th.sort-desc::after { content: '▼'; opacity: 1; }


.species-section { margin-top: 1rem; }
.encounter-block { margin-top: 0.75rem; }
.encounter-block h3, .encounter-block h4 { margin-bottom: 0.35rem; }
.species-section .encounter-block h3 { font-size: 1.5em; }
.species-section .encounter-block h4 { font-size: 1.25em; }
.species-section .encounter-block h5 { font-size: 1.1em; }
.species-section .encounter-block h6 { font-size: 1em; }


.species-section { margin-top: 1.25rem; }

.type-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
  color: #f9fafb;
  border: 1px solid rgba(255,255,255,0.14);
  margin-right: 0.2rem;
  white-space: nowrap;
}
/* .type-* color rules are appended at build time from TYPE_ICON_COLORS in site.py. */

.trainer-pic { max-width: 96px; height: auto; image-rendering: pixelated; }
/* Itemdex bag UI: 6× upscaled bag sprite; the PNG is a 64×384 6-frame sheet picked via background-position-y. */
.itemdex-bag-frame {
  width: fit-content;
  margin: 1.25rem auto;
  padding: 1rem;
  background: radial-gradient(ellipse at center, #2a3441 0%, #1f2937 70%, #131923 100%);
  border: 1px solid #374151;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 0 24px rgba(0, 0, 0, 0.3);
}
.itemdex-bag {
  position: relative;
  /* Fluid width keeps the 6-frame bag sheet aspect-1; JS sets backgroundPositionY in % to match. */
  width: min(384px, calc(100vw - 72px));
  aspect-ratio: 1 / 1;
  background: url('../assets/game/graphics/bag/bag_male.png') 0 0 / 100% auto no-repeat;
  image-rendering: pixelated;
}
.itemdex-bag-hotspot {
  position: absolute;
  border: 1.5px solid rgba(249, 250, 251, 0.6);
  background: rgba(249, 250, 251, 0.18);
  border-radius: 4px;
  padding: 0;
  cursor: pointer; box-sizing: border-box;
  transition: border-color 80ms, background-color 80ms;
}
.itemdex-bag-hotspot:hover, .itemdex-bag-hotspot:focus {
  border-color: #f9fafb;
  background: rgba(249, 250, 251, 0.28);
}
.itemdex-bag-hotspot::after {
  content: attr(aria-label);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 4px; padding: 2px 6px;
  font-size: 0.85rem; font-weight: 600; color: #f9fafb;
  background: rgba(17, 24, 39, 0.92); border-radius: 4px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 80ms;
}
.itemdex-bag-hotspot:hover::after, .itemdex-bag-hotspot:focus::after { opacity: 1; }
.itemdex-pocket { display: none; }
.itemdex-pocket.is-active { display: block; margin-top: 1.25rem; }
.itemdex-grid {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
}
.itemdex-grid > li > a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: #1f2937; border: 1px solid #374151; border-radius: 8px;
  color: #93c5fd;
}
.itemdex-grid > li > a:hover, .itemdex-grid > li > a:focus {
  background: #374151; text-decoration: none;
}
.itemdex-grid .item-icon { flex: 0 0 auto; }
.itemdex-grid > li > a > span { white-space: nowrap; }
.item-page-icon { width: 96px; height: 96px; image-rendering: pixelated; flex: 0 0 96px; }
.item-sources-card { margin-top: 1.25rem; }
.item-source-heading { margin: 1rem 0 0.35rem; font-size: 1.1em; }
.item-source-heading:first-of-type { margin-top: 0.5rem; }
.item-source-list { padding-left: 1.75rem; margin: 0 0 0.75rem; }
.item-source-list li { padding: 0.1rem 0; }
.trainer-page-pic { max-width: 160px; height: auto; image-rendering: pixelated; }
.trainer-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.trainer-heading > h1 { margin: 0; }
.rematch-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0; }
.rematch-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: #1f2937; border: 1px solid #374151; border-radius: 8px; color: #93c5fd; white-space: nowrap; text-decoration: none; }
.rematch-tab:hover, .rematch-tab:focus { background: #374151; text-decoration: none; }
.party-panel { display: none; }
.party-panel.is-active { display: block; }
.rematch-tab.is-active { background: #93c5fd; border-color: #93c5fd; color: #0b1220; font-weight: 600; }
.trainer-mon-sprite { max-width: 72px; height: auto; image-rendering: pixelated; }
.type-icon { width: 76px; height: 24px; vertical-align: middle; }
.type-icon-sm { width: 60px; height: 18px; vertical-align: middle; }
.tm-icon { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; margin-right: 6px; }
.item-icon { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; margin-right: 4px; }
.pickup-table-scroll { overflow-x: auto; overflow-y: hidden; border-radius: 14px; }
.pickup-table { border-collapse: collapse; border-radius: 0; }
.pickup-table th, .pickup-table td { border: 1px solid rgba(148, 163, 184, 0.4); padding: 4px 6px; text-align: center; }
.pickup-table thead th { background: rgba(148, 163, 184, 0.18); }
.pickup-table tbody th { text-align: left; font-weight: 600; }
.pickup-table .item-icon { margin: 0; }
.pickup-table td:has(a):hover { background: #2a3441; cursor: pointer; }
.pickup-table a { position: relative; display: inline-block; }
.pickup-table a[aria-label]::after { content: attr(aria-label); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; padding: 2px 6px; font-size: 0.8rem; font-weight: 600; color: #f9fafb; background: rgba(17, 24, 39, 0.9); border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 80ms; z-index: 1; }
.pickup-table td:hover a[aria-label]::after, .pickup-table a[aria-label]:focus::after { opacity: 1; }
.litter-picker-table { width: auto; }
.litter-picker-table th, .litter-picker-table td { padding: 2px 8px; text-align: left; }
.move-cat-icon { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; }
.stab { font-weight: 700; }
/* 2-column grid (source | move); source column auto-sizes per section so rows align within it. */
.move-list { display: grid; grid-template-columns: max-content auto; align-items: center; column-gap: 0.5rem; row-gap: 0.2rem; padding-left: 0; }
.move-list li { display: contents; }
.move-list .move-source { display: flex; align-items: center; gap: 0.35rem; width: 100%; }
.move-list .move-source::after { content: '—'; margin-left: auto; padding-left: 0.4rem; color: #9ca3af; }
.move-row { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.table-scroll { overflow-x: auto; }
/* Pin move-list grids to natural width inside .table-scroll so narrow viewports scroll instead of wrapping move names. */
.table-scroll .move-list { min-width: max-content; }
.table-scroll .move-list .move-target { white-space: nowrap; }
.small-text { font-size: 0.9rem; }


.trainer-type-stack { display: flex; flex-direction: column; gap: 0.65rem; }
.trainer-types-row, .trainer-tera-row { line-height: 1; }
.trainer-tera-row { margin-top: 0.35rem; display: flex; align-items: center; gap: 0.5rem; }
.table-card table th:nth-child(3), .table-card table td:nth-child(3) { width: 88px; }
.table-card table th:nth-child(9), .table-card table td:nth-child(9) { min-width: 180px; }
.stat-table { width: auto; min-width: 0; }
.stat-table td { border-bottom: none; padding: 0.25rem 0.75rem; }
.stat-label { text-align: left; font-weight: 600; white-space: nowrap; }
.stat-value { text-align: right; font-variant-numeric: tabular-nums; }
.stat-bar-cell { width: 220px; padding-left: 0.75rem !important; vertical-align: middle; }
.stat-bar-track { height: 16px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; overflow: hidden; }
.stat-bar-fill {
  height: 100%;
  border-radius: 999px;
  min-width: 4px;
  background-color: #d1d5db;
}
.stat-bar-hp  { background-color: #8de878; }
.stat-bar-atk { background-color: #ffdc6e; }
.stat-bar-def { background-color: #ffa75c; }
.stat-bar-spa { background-color: #7ed4ff; }
.stat-bar-spd { background-color: #8ba0ff; }
.stat-bar-spe { background-color: #ff85d4; }
.stat-total td { border-top: 1px solid #4b5563; }
.stat-physical { margin-top: 0.5rem; color: #9ca3af; font-size: 0.9rem; }
.stat-pair { white-space: nowrap; }
/* CSS grid keeps Wild Held Items rows left-aligned regardless of label width. */
.wild-items { display: grid; grid-template-columns: max-content 1fr; column-gap: 0.4rem; align-items: baseline; }
.form-entry { display: inline-flex; align-items: center; gap: 0.5rem; }
.form-sprite { width: 48px; height: 48px; image-rendering: pixelated; }
.form-sprite-base { width: 72px; height: 72px; image-rendering: pixelated; }
.encounter-entry { display: inline-flex; align-items: center; gap: 0.5rem; }
.encounter-sprite { width: 56px; height: 56px; image-rendering: pixelated; }
.species-inline-link { display: inline-flex; align-items: center; gap: 0.4rem; vertical-align: middle; }
.species-inline-sprite { width: 56px; height: 56px; image-rendering: pixelated; }
.species-section ul { list-style: none; padding-left: 0; }
.species-section li { padding: 0.2rem 0; }
#encounter-list ul, .encounter-block ul { list-style: none; padding-left: 0; }
#encounter-list li, .encounter-block li { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; }
.form-list { list-style: none; padding: 0; }
.form-list li { padding: 0.25rem 0; }


/* Generated from TYPE_ICON_COLORS */
.type-normal { background: #8f8a81; }
.type-fire { background: #e76f51; }
.type-water { background: #4d90fe; }
.type-electric { background: #f4c430; color: #111827; }
.type-grass { background: #43aa57; }
.type-ice { background: #58c4dd; color: #111827; }
.type-fighting { background: #c65b3d; }
.type-poison { background: #9c6ade; }
.type-ground { background: #c59b55; color: #111827; }
.type-flying { background: #7c8cff; }
.type-psychic { background: #ff5d8f; }
.type-bug { background: #93b125; color: #111827; }
.type-rock { background: #b49b55; }
.type-ghost { background: #6f62b5; }
.type-dragon { background: #5a64ea; }
.type-dark { background: #705848; }
.type-steel { background: #8aa1b1; color: #111827; }
.type-fairy { background: #e98ad7; color: #111827; }
.type-stellar { background: #8b5cf6; }
.type-unknown { background: #6b7280; }