:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --border: #d3d9df;
  --text: #22292f;
  --muted: #66727d;
  --accent: #3a6ea5;

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

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  padding: 24px 32px 8px;
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 1.8rem;
}

.subtitle {
  margin: 4px 0 0;
  color: var(--muted);
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 32px var(--page-bottom-gap);
}

:root {
  --mode-toggle-h: 0px;
  --controls-h: 0px;
  /* Must equal main's own bottom padding (below). table-scroll's max-height
     subtracts this so its bottom edge lines up with the end of the page:
     at max page scroll, the sticky mode-toggle/controls bars are fully
     docked and table-scroll's top has scrolled up to sit flush beneath
     them. If this drifts out of sync with main's padding-bottom, that
     alignment breaks and the docked bars end up overlapping/clipping the
     table's own sticky header instead of sitting cleanly above it. */
  --page-bottom-gap: 48px;
}

.mode-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  padding: 8px 0;
}

.mainline-only-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.mainline-only-label input {
  cursor: pointer;
}

.mode-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.mode-btn:hover {
  background: #eef1f4;
}

.mode-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.whos-that-btn {
  background: #e0a030;
  border: 1px solid #c4881f;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
}

.whos-that-btn:hover {
  background: #c4881f;
}

.types-game-btn {
  background: #2f9e6e;
  border: 1px solid #257c56;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
}

.types-game-btn:hover {
  background: #257c56;
}

.regions-game-btn {
  background: #7a4fb5;
  border: 1px solid #5f3a8c;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
}

.regions-game-btn:hover {
  background: #5f3a8c;
}

.games-note {
  margin-bottom: 16px;
}

.col-release-date {
  width: 130px;
  white-space: nowrap;
  color: var(--muted);
}

.col-game-art {
  width: 200px;
}

.boxart-row.game-art img {
  height: 72px;
}

.col-game-names {
  min-width: 220px;
}

.col-game-names .game-name {
  display: block;
  font-weight: 600;
}

.dlc-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f0e6ff;
  color: #6b3fa0;
  font-size: 0.72rem;
  font-weight: 600;
}

.gen-tag {
  display: inline-block;
  margin-top: 4px;
  margin-right: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e6f0ff;
  color: #3f5f9e;
  font-size: 0.72rem;
  font-weight: 600;
}

.region-tag {
  display: inline-block;
  margin-top: 4px;
  margin-right: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e6f5ec;
  color: #2f7a56;
  font-size: 0.72rem;
  font-weight: 600;
}

.col-game-dex,
.col-game-debut-species,
.col-game-debut-variants {
  width: 110px;
  text-align: center;
}

.dex-count-link {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 600;
}

.dex-count-link:hover {
  background: var(--accent);
  color: white;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  position: sticky;
  top: var(--mode-toggle-h);
  z-index: 35;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.dex-note {
  font-size: 0.82rem;
  color: var(--muted);
  background: #fff8e6;
  border: 1px solid #f0dca0;
  border-radius: 6px;
  padding: 8px 12px;
  margin: -4px 0 16px;
}

.controls label {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

.controls select,
.controls input {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  background: white;
  color: var(--text);
}

.controls .count {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--muted);
}

/* overflow-x:auto keeps wide tables (dual box art, many columns) from
   bleeding past the page's right edge - Game Release's table in particular
   is comfortably wider than the page's content area. Setting overflow-x
   forces the browser to also compute overflow-y as auto (per the CSS
   Overflow spec), which makes this element a scrolling container in its
   own right - so a sticky thead inside it can no longer track the page's
   scroll position the way .mode-toggle/.controls do above it (those aren't
   inside a scroll container, so they stick to the page fine). Rather than
   fight that, table-scroll gets a bounded height and its own scrollbar:
   the thead sticks to the top of *this* scrollport (see `thead th`'s
   `top: 0`) instead of the page's. */
.table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - var(--mode-toggle-h) - var(--controls-h) - var(--page-bottom-gap));
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  background: #eef1f4;
  border-bottom: 2px solid var(--border);
  text-align: left;
  padding: 10px 12px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  position: sticky;
  top: 0;
  z-index: 20;
}

tbody tr {
  border-bottom: 1px solid var(--border);
}

tbody tr:hover {
  background: #f7fafc;
}

tbody td {
  padding: 6px 12px;
  vertical-align: middle;
}

.col-num {
  width: 64px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.col-sprite {
  width: 64px;
}

.col-sprite img {
  display: block;
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  cursor: pointer;
}

body.art-medium .col-sprite {
  width: 112px;
}

body.art-medium .col-sprite img {
  width: 96px;
  height: 96px;
}

body.art-large .col-sprite {
  width: 208px;
}

body.art-large .col-sprite img {
  width: 192px;
  height: 192px;
}

.col-name {
  font-weight: 600;
}

.col-name .name-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.col-name .name-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.type-badge {
  display: inline-block;
  padding: 3px 10px;
  margin: 2px 4px 2px 0;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: white;
  text-transform: capitalize;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

.type-grass { background: var(--grass); }
.type-poison { background: var(--poison); }
.type-fire { background: var(--fire); }
.type-flying { background: var(--flying); }
.type-water { background: var(--water); }
.type-bug { background: var(--bug); }
.type-normal { background: var(--normal); }
.type-electric { background: var(--electric); color: #4a3d00; text-shadow: none; }
.type-ground { background: var(--ground); color: #4a3d00; text-shadow: none; }
.type-fairy { background: var(--fairy); color: #6b2038; text-shadow: none; }
.type-fighting { background: var(--fighting); }
.type-psychic { background: var(--psychic); }
.type-rock { background: var(--rock); }
.type-steel { background: var(--steel); color: #33333d; text-shadow: none; }
.type-ice { background: var(--ice); color: #1a4a4a; text-shadow: none; }
.type-ghost { background: var(--ghost); }
.type-dragon { background: var(--dragon); }
.type-dark { background: var(--dark); }

.empty-row td {
  text-align: center;
  color: var(--muted);
  padding: 24px;
}

.origin-col {
  display: none;
}

#dexTable.show-origin .origin-col {
  display: table-cell;
}

.generation-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.boxart-row {
  display: flex;
  gap: 4px;
}

.generation-tag-row {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.generation-tag-row .gen-tag,
.generation-tag-row .region-tag {
  margin-top: 0;
  margin-right: 0;
}

.boxart-row img {
  display: block;
  height: 48px;
  width: auto;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

body.art-medium .boxart-row img {
  height: 96px;
}

body.art-large .boxart-row img {
  height: 192px;
}

.dlc-label {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-style: italic;
  color: var(--accent);
}

.generation-box .dlc-label {
  text-align: center;
  max-width: 220px;
}

.forms-link {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}

.forms-link:hover {
  background: var(--accent);
  color: white;
}

.inline-forms-link {
  display: block;
  margin-top: 6px;
}

.inline-forms-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.inline-forms-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #eef1f4;
  border-radius: 4px;
  padding: 2px 8px 2px 2px;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}

.inline-forms-chip img {
  height: 20px;
  width: 20px;
  image-rendering: pixelated;
}

.hidden {
  display: none !important;
}

.forms-view-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.forms-view-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

#backToDex {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
}

#backToDex:hover {
  background: #eef1f4;
}

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

#backToDexFromDetail {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-bottom: 16px;
}

#backToDexFromDetail:hover {
  background: #eef1f4;
}

.detail-card {
  display: flex;
  gap: 32px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  align-items: flex-start;
}

.detail-sprite {
  width: 220px;
  height: 220px;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.detail-info h2 {
  margin: 0 0 8px;
  font-size: 1.6rem;
}

.detail-flavor {
  font-style: italic;
  color: var(--muted);
  margin: 0 0 20px;
  max-width: 480px;
  line-height: 1.5;
}

.detail-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 10px;
  margin: 0;
}

.detail-stats dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.detail-stats dd {
  margin: 0;
}

#detailRegionalNumbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.region-number-chip {
  background: #eef1f4;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.debut-count-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

.debut-count-link:hover {
  color: #274d78;
}

.source-link {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.source-link:hover {
  text-decoration: underline;
}

.detail-games {
  margin-top: 20px;
}

.detail-games h3 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  font-weight: 600;
}

.debut-game-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.debut-game-block .boxart-row img {
  height: 72px;
  width: auto;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.debut-game-names {
  font-size: 0.9rem;
  line-height: 1.4;
}

.debut-game-names .game-name {
  display: block;
  font-weight: 600;
}

.debut-game-date {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.82rem;
}

.also-featured-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.also-featured-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
}

.also-featured-item img {
  height: 56px;
  width: auto;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.also-featured-item span {
  margin-top: 4px;
  font-size: 0.68rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
}

.no-featured {
  color: var(--border);
  font-size: 0.85rem;
}

/* ---------- Who's that Pokemon? ---------- */
.whos-that-panel {
  max-width: 520px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.whos-that-panel h2 {
  margin: 0 0 12px;
}

.whos-that-panel p {
  color: var(--text);
  line-height: 1.5;
  text-align: left;
}

.whos-that-rules {
  text-align: left;
  margin: 0 0 16px;
  padding-left: 20px;
  line-height: 1.7;
}

.whos-that-primary-btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
}

.whos-that-primary-btn:hover {
  background: #2a5580;
}

.whos-that-secondary-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.whos-that-secondary-btn:hover {
  background: #eef1f4;
}

.whos-that-variant-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.whos-that-variant-label input {
  cursor: pointer;
}

.whos-that-start-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.whos-that-sprite-hidden {
  filter: brightness(0);
}

.whos-that-progress {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}

.whos-that-sprite {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto 16px;
  image-rendering: pixelated;
  transition: filter 0.3s ease;
}

.whos-that-input-wrap {
  position: relative;
  margin-bottom: 12px;
}

#whosThatInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  background: white;
  color: var(--text);
}

.whos-that-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 10;
  text-align: left;
}

.whos-that-suggestions li {
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.whos-that-suggestions li:hover {
  background: #eef1f4;
}

.whos-that-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.whos-that-actions .whos-that-primary-btn,
.whos-that-actions .whos-that-secondary-btn {
  width: 100%;
  max-width: 280px;
}

.whos-that-mc-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.whos-that-mc-option {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.whos-that-mc-option:hover:not(:disabled) {
  background: #eef1f4;
  border-color: var(--accent);
}

.whos-that-mc-option:disabled {
  cursor: default;
  opacity: 0.6;
}

.whos-that-mc-option.whos-that-mc-wrong {
  background: #fde8e8;
  border-color: #d97b7b;
  color: #a03434;
}

.whos-that-feedback {
  min-height: 1.2em;
  margin: 8px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #a03434;
}

.whos-that-round-done {
  margin-top: 12px;
}

.whos-that-round-done p {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 16px;
}

.whos-that-final-score {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

.whos-that-recap-table {
  width: 100%;
  margin: 16px 0;
}

.whos-that-recap-table img {
  height: 40px;
  width: auto;
  image-rendering: pixelated;
}

.whos-that-recap-table td {
  text-align: center;
}

#regionsRecapTable img {
  image-rendering: auto;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ---------- Pokemon Types ---------- */
.types-show-chart-btn {
  display: block;
  margin: 16px auto 0;
}

.types-chart-wrap {
  margin-top: 16px;
  text-align: left;
}

.types-chart-table {
  width: auto;
  border-collapse: collapse;
}

.types-chart-table th,
.types-chart-table td {
  display: table-cell;
  padding: 4px 6px;
  text-align: center;
  font-size: 0.72rem;
  border: 1px solid var(--border);
  white-space: nowrap;
  margin: 0;
}

.types-chart-table thead th:first-child,
.types-chart-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
}

.types-chart-table thead th {
  top: 0;
}

.types-chart-table thead th:first-child {
  z-index: 2;
  background: var(--panel);
}

.types-chart-super {
  background: #2f9e42;
  color: white;
  font-weight: 700;
}

.types-chart-weak {
  background: #a03434;
  color: white;
  font-weight: 700;
}

.types-chart-none {
  background: #2b2b2b;
  color: white;
  font-weight: 700;
}

.types-game-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 12px;
  padding: 10px 24px;
  font-size: 1.3rem;
  border-radius: 8px;
}

.types-prompt-text {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 16px;
}

.types-answer-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.types-answer-option {
  width: 100%;
  max-width: 280px;
  padding: 12px 16px;
  font-size: 1rem;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.types-answer-option:disabled {
  cursor: default;
}

.types-answer-option.types-answer-correct {
  border-color: #2f9e42;
  box-shadow: 0 0 0 2px #2f9e42 inset;
}

.types-answer-option.types-answer-incorrect {
  border-color: #a03434;
  box-shadow: 0 0 0 2px #a03434 inset;
}

.types-next-btn {
  display: block;
  margin: 16px auto 0;
}

/* ---------- Regions ---------- */
.regions-prompt {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.regions-prompt img {
  height: 120px;
  width: auto;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.regions-prompt.regions-prompt-text {
  width: fit-content;
  margin: 0 auto 8px;
  padding: 10px 24px;
  background: var(--accent);
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 8px;
}

.regions-answer-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.regions-answer-option {
  width: 100%;
  max-width: 320px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--panel);
  color: var(--text);
}

.regions-answer-option:hover:not(:disabled) {
  background: #eef1f4;
}

.regions-answer-option:disabled {
  cursor: default;
}

.regions-cover-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--panel);
  color: var(--text);
}

.regions-cover-option img {
  height: 48px;
  width: auto;
  flex-shrink: 0;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.regions-cover-option:hover:not(:disabled) {
  background: #eef1f4;
}

.regions-cover-option:disabled {
  cursor: default;
}

.regions-answer-option.types-answer-correct,
.regions-cover-option.types-answer-correct {
  border-color: #2f9e42;
  box-shadow: 0 0 0 2px #2f9e42 inset;
}

.regions-answer-option.types-answer-incorrect,
.regions-cover-option.types-answer-incorrect {
  border-color: #a03434;
  box-shadow: 0 0 0 2px #a03434 inset;
}

/* ---------- Mobile / responsive ---------- */
@media (max-width: 640px) {
  header {
    padding: 16px 12px 6px;
  }

  header h1 {
    font-size: 1.35rem;
  }

  .subtitle {
    font-size: 0.85rem;
  }

  :root {
    --page-bottom-gap: 32px;
  }

  main {
    padding: 10px 10px var(--page-bottom-gap);
  }

  .mode-toggle {
    gap: 6px;
    padding: 6px 0;
  }

  .mode-btn {
    padding: 7px 12px;
    font-size: 0.85rem;
  }

  .mainline-only-label {
    margin-left: 0;
    width: 100%;
    font-size: 0.8rem;
  }

  .controls {
    padding: 10px 12px;
    gap: 8px 14px;
  }

  .controls .count {
    margin-left: 0;
    width: 100%;
  }

  .control-group select,
  .control-group input {
    font-size: 16px; /* avoids iOS auto-zoom on focus */
  }

  .detail-card {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    align-items: center;
  }

  .detail-sprite {
    width: 160px;
    height: 160px;
  }

  .detail-info {
    width: 100%;
  }

  .detail-stats {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .detail-stats dt {
    margin-top: 8px;
  }

  .forms-view-header {
    flex-wrap: wrap;
  }

  .whos-that-panel {
    padding: 16px;
  }

  .whos-that-sprite {
    width: 140px;
    height: 140px;
  }

  #whosThatInput {
    font-size: 16px; /* avoids iOS auto-zoom on focus */
  }

  .types-chart-table th,
  .types-chart-table td {
    padding: 3px 4px;
    font-size: 0.65rem;
  }

  .regions-prompt img {
    height: 90px;
  }
}