:root {
  --bg: #0f1115;
  --surface: #151920;
  --surface-2: #1c2029;
  --hairline: #23272f;
  --text: #eef0f5;
  --text-dim: #8b91a1;
  --text-mute: #7c8395;
  --text-faint: #5d6373;
  --text-faint-2: #6d7484;
  --brand: #f04430;
  --brand-soft: #f0705f;
  --brand-wash: rgba(240,68,48,.14);
  --weak: #22c55e;
  --weak-text: #8ee6ac;
  --resist: #ef4444;
  --resist-text: #ff8a8a;
  --correct: #facc15;
  --muted-bar: #4a4f5e;
  --incorrect: #6b7280;

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

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Archivo", system-ui, sans-serif;
  min-height: 100vh;
}

#app {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 18px 22px;
}

.mono {
  font-family: "IBM Plex Mono", monospace;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hairline);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-ball {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(var(--brand) 0 50%, var(--bg) 50% 56%, #e8e8ea 56% 100%);
  flex-shrink: 0;
}

.brand h1 {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-btn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: #14161c;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.icon-btn:hover { filter: brightness(.94); }

.icon-btn.profile-btn { overflow: hidden; position: relative; }

.profile-glyph { display: block; width: 100%; height: 100%; position: relative; }
.profile-glyph::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 36%;
  border-radius: 50%;
  background: #14161c;
}
.profile-glyph::after {
  content: "";
  position: absolute;
  bottom: -22%;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 56%;
  border-radius: 50%;
  background: #14161c;
}

.kofi-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.kofi-btn-img {
  display: block;
  height: 30px;
  width: auto;
}

.auth-area {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  color: var(--text-mute);
  letter-spacing: .04em;
}

.auth-area .username { color: var(--text-mute); }
.auth-area .topbar-streak-num { color: var(--brand); font-weight: 600; }

.link-btn {
  background: none;
  border: none;
  color: var(--brand);
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  padding: 4px;
}
.link-btn:hover { text-decoration: underline; }

.legal-page {
  padding: 24px 0 40px;
  min-height: 40vh;
}

.legal-page h2 {
  font-size: 20px;
  margin: 0 0 12px;
}

.legal-page p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
}

.site-footer {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.footer-disclosure {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-faint);
  margin: 0 0 10px;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}

.footer-links a {
  color: var(--text-mute);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--brand-soft);
  text-decoration: underline;
}

.footer-sep {
  color: var(--text-faint);
}

.game-switcher {
  display: flex;
  gap: 20px;
  padding: 14px 0 4px;
}

.game-tab {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 0 7px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.game-tab.active {
  color: var(--text);
  border-bottom-color: var(--brand);
}

.mode-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 14px;
}

.mode-tab {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 6px;
  border: none;
  background: var(--surface-2);
  color: #a4abbb;
  cursor: pointer;
  transition: all .15s ease;
}

.mode-tab.active {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

.filter-wrap {
  position: relative;
  display: flex;
  margin-left: auto;
}

.filter-tab { margin-left: 0; }

.filter-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px;
  z-index: 20;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

.filter-section + .filter-section {
  margin-top: 14px;
}

.filter-section-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-faint);
  margin-bottom: 8px;
  font-weight: 600;
}

.gen-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gen-btn {
  font-family: "IBM Plex Mono", monospace;
  padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 10px;
  cursor: pointer;
  transition: all .15s ease;
}

.gen-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}

.gen-btn.champions-btn {
  border-color: var(--correct);
  color: var(--correct);
}

.gen-btn.champions-btn.active {
  background: var(--correct);
  border-color: var(--correct);
  color: #14161c;
}

.scope-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scope-btn {
  font-family: "IBM Plex Mono", monospace;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 10.5px;
  cursor: pointer;
  transition: all .15s ease;
}

.scope-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}

.game-card { display: block; }

.pokemon-display {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(168,168,120,.20), rgba(168,168,120,.10) 62%, rgba(15,17,21,0));
  border: 1px solid rgba(168,168,120,.30);
}

.sprite-disc {
  width: 92px;
  height: 92px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(168,168,120,.45), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}

#pokemon-sprite {
  width: 74px;
  height: 74px;
  object-fit: contain;
}

.pokemon-info { min-width: 0; text-align: left; }

.pokemon-dex {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: .08em;
  text-transform: uppercase;
}

#pokemon-name {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 2px 0 8px;
}

.pokemon-types {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 9px;
}

.type-pill {
  font-family: "IBM Plex Mono", monospace;
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .09em;
  padding: 4px 9px;
  border-radius: 5px;
  color: #14161c;
  text-transform: uppercase;
}

.hint-row {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
}

.hint-chip { background: none; padding: 0; border-radius: 0; }
.hint-chip span { font-weight: 600; }
.hint-chip.weak span { color: var(--weak); }
.hint-chip.resist span { color: var(--resist); }
.hint-sep { color: var(--text-faint); }

.select-mode-tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0 12px;
}

.select-mode-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px;
  border-radius: 9px;
  border: 1px solid var(--hairline);
  background: transparent;
  cursor: pointer;
  transition: all .15s ease;
}

.select-mode-tabs.locked .select-mode-btn {
  cursor: default;
  pointer-events: none;
}

/* Once submitted, both buckets stay permanently color-coded (green for
   weak, red for resist) as a reference key -- regardless of which one was
   last active while tagging. */
.select-mode-tabs.locked .select-mode-btn.weak {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.5);
}
.select-mode-tabs.locked .select-mode-btn.weak .dot { background: var(--weak); }
.select-mode-tabs.locked .select-mode-btn.weak .label { color: var(--weak-text); }

.select-mode-tabs.locked .select-mode-btn.resist {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.5);
}
.select-mode-tabs.locked .select-mode-btn.resist .dot { background: var(--resist); }
.select-mode-tabs.locked .select-mode-btn.resist .label { color: var(--resist-text); }

.select-mode-btn .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted-bar);
  flex-shrink: 0;
}

.select-mode-btn .label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--text-faint-2);
}

.select-mode-btn.weak.active {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.5);
}
.select-mode-btn.weak.active .dot { background: var(--weak); }
.select-mode-btn.weak.active .label { color: var(--weak-text); }

.select-mode-btn.resist.active {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.5);
}
.select-mode-btn.resist.active .dot { background: var(--resist); }
.select-mode-btn.resist.active .label { color: var(--resist-text); }

.type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.type-chip {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--text-mute);
  cursor: pointer;
  min-width: 0;
  text-align: center;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.type-chip .chip-bar {
  width: 4px;
  height: 14px;
  border-radius: 2px;
  flex: none;
}

.type-chip .chip-name {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: .03em;
  min-width: 0;
  white-space: nowrap;
}

.type-chip .chip-mark {
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
}

.type-chip.sel-weak,
.type-chip.locked.truth-weak {
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.42);
  color: var(--text);
}
.type-chip.sel-resist,
.type-chip.locked.truth-resist {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.42);
  color: var(--text);
}

.type-chip.locked { cursor: default; }

.type-chip .chip-mark.mark-correct { color: var(--weak); }
.type-chip .chip-mark.mark-incorrect { color: var(--resist); }

.result-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.result-top {
  display: flex;
  align-items: center;
  gap: 18px;
}

.gauge {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gauge-inner {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gauge-pct {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.gauge-pct .pct-sign { font-size: 13px; }

.gauge-score {
  font-family: "IBM Plex Mono", monospace;
  font-size: 8.5px;
  color: var(--text-faint-2);
  letter-spacing: .08em;
  margin-top: 2px;
}

.verdict { min-width: 0; }

.verdict-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.verdict-title {
  font-size: 15px;
  font-weight: 700;
}

.verdict-chip {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .06em;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--brand-wash);
  color: var(--brand-soft);
  white-space: nowrap;
}

.verdict-sentence {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.verdict-sentence .hl-resist { color: var(--resist-text); font-weight: 600; }
.verdict-sentence .hl-weak { color: var(--weak-text); font-weight: 600; }

.segment-bar {
  display: flex;
  gap: 2px;
  margin-top: 14px;
}
.segment-bar span {
  flex: 1;
  height: 7px;
  border-radius: 2px;
}

.segment-legend {
  font-family: "IBM Plex Mono", monospace;
  display: flex;
  gap: 14px;
  margin-top: 9px;
  font-size: 9.5px;
  color: var(--text-faint-2);
}
.segment-legend .swatch { font-size: 10px; }

.result-sub {
  color: var(--text-dim);
  font-size: 11.5px;
  margin-top: 10px;
}

.speed-prompt {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 16px;
}

.speed-board {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 16px;
}

/* Doubles (2v2): arrange the four cards in an explicit 2x2 grid instead of
   letting them wrap organically. Purely a positioning aid -- no border or
   background of its own. Gap is extra generous here (rather than matching
   the singles row gap) because the corner badges revealed on submit are
   absolutely positioned outside each card's edges and need clearance from
   the neighboring card in both directions. */
.speed-board.grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 130px);
  grid-auto-rows: auto;
  justify-content: center;
  gap: 34px;
}

.speed-board.grid-2x2 .speed-card {
  width: 130px;
}

.speed-card {
  position: relative;
  width: 140px;
  padding: 14px 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.speed-card img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.speed-card .speed-card-name {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
}

.speed-card .speed-card-speed {
  font-family: "IBM Plex Mono", monospace;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--text-mute);
  min-height: 1.1em;
}

.speed-card .pick-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

.speed-card.picked {
  border-color: var(--brand);
  background: var(--brand-wash);
}

.speed-card .speed-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  min-width: 36px;
  height: 28px;
  padding: 0 7px;
  border-radius: 14px;
  background: var(--brand);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--bg);
}
.speed-card .speed-badge .speed-badge-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .85;
}
.speed-card .speed-badge .speed-badge-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 800;
}
.speed-card.locked.judged-incorrect .speed-badge { background: var(--resist); }

.speed-card.locked { cursor: default; }
.speed-card.locked.judged-correct {
  box-shadow: 0 0 0 3px var(--correct);
  border-color: var(--correct);
}
.speed-card.locked.judged-incorrect {
  box-shadow: 0 0 0 3px var(--resist);
  border-color: var(--resist);
}

.actions {
  display: flex;
  gap: 9px;
  margin-top: 18px;
}

.primary-btn {
  flex: 1;
  background: var(--brand);
  color: white;
  border: none;
  padding: 13px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13.5px;
}
.primary-btn:hover { filter: brightness(1.06); }
.primary-btn:disabled { opacity: .5; cursor: default; }

.secondary-btn {
  background: transparent;
  color: #a4abbb;
  border: 1px solid var(--hairline);
  padding: 13px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}

.hidden { display: none !important; }

.stats-panel {
  margin-top: 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px 18px;
}

.stats-eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--text-faint);
  margin-bottom: 14px;
}

.stats-top {
  display: flex;
  justify-content: center;
}

.stats-streak-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-streak-value {
  font-size: 44px;
  font-weight: 800;
  line-height: .8;
  color: var(--brand);
}

.stat-streak-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  color: var(--text-faint-2);
  margin-top: 6px;
  letter-spacing: .06em;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.stat-value { display: block; font-size: 19px; font-weight: 700; }
.stat-value .stat-pct { font-size: 12px; color: var(--text-faint-2); }
.stat-label {
  font-family: "IBM Plex Mono", monospace;
  display: block;
  font-size: 9px;
  color: var(--text-faint-2);
  margin-top: 3px;
  letter-spacing: .05em;
}

/* Modal (unchanged behaviour, restyled to match new tokens) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,11,15,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 24px;
  width: 320px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  cursor: pointer;
}

.help-modal {
  width: 420px;
  max-width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  text-align: left;
}

.help-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
}

.help-section + .help-section { margin-top: 18px; }

.help-section h3 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 8px;
}

.help-section p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 0 8px;
}
.help-section p:last-child { margin-bottom: 0; }
.help-section p strong { color: var(--text); font-weight: 600; }

.modal-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.modal-tab {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-weight: 600;
}
.modal-tab.active { background: var(--brand); border-color: var(--brand); color: white; }

.auth-form { display: flex; flex-direction: column; gap: 10px; }

.auth-form input,
.auth-form select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  width: 100%;
}

.auth-form select:invalid { color: var(--text-mute); }

.form-error {
  color: var(--resist);
  font-size: .8rem;
  min-height: 1em;
  margin: 0;
}

.form-success {
  color: var(--weak-text);
  font-size: .8rem;
  min-height: 1em;
  margin: 0;
}

.form-note {
  color: var(--text-dim);
  font-size: .8rem;
  line-height: 1.5;
  margin: 0 0 2px;
}

.form-link {
  align-self: center;
  font-size: .8rem;
  padding: 2px;
}

@media (min-width: 720px) {
  #app { max-width: 720px; }

  .topbar { padding-bottom: 28px; }
  .brand { gap: 18px; }
  .brand-ball { width: 34px; height: 34px; }
  .brand h1 { font-size: 32px; }
  .auth-area { font-size: 18px; gap: 16px; }
  .link-btn { font-size: 18px; }
  .topbar-right { gap: 20px; }
  .icon-btn { width: 38px; height: 38px; font-size: 19px; }
  .kofi-btn-img { height: 38px; }

  .game-switcher { gap: 28px; padding: 18px 0 6px; }
  .game-tab { font-size: 13px; padding-bottom: 9px; }

  .site-footer { margin-top: 44px; padding-top: 22px; }
  .footer-disclosure { font-size: 12px; max-width: 560px; margin: 0 auto 12px; }
  .footer-links { font-size: 13px; gap: 10px; }

  .mode-tabs { gap: 8px; margin: 20px 0 18px; }
  .mode-tab { font-size: 12px; padding: 9px 16px; border-radius: 8px; }

  .filter-dropdown { width: 300px; padding: 18px; border-radius: 14px; }
  .filter-section-label { font-size: 10.5px; }
  .gen-btn { font-size: 11px; padding: 8px 14px; }
  .scope-btn { font-size: 11.5px; padding: 9px 12px; }

  .pokemon-display { padding: 24px; gap: 22px; border-radius: 18px; }
  .sprite-disc { width: 140px; height: 140px; }
  #pokemon-sprite { width: 112px; height: 112px; }
  .pokemon-dex { font-size: 11.5px; }
  #pokemon-name { font-size: 34px; margin: 4px 0 10px; }
  .type-pill { font-size: 11px; padding: 6px 12px; border-radius: 6px; }
  .hint-row { font-size: 12.5px; }

  .select-mode-tabs { gap: 10px; margin: 22px 0 16px; }
  .select-mode-btn { padding: 13px; gap: 9px; border-radius: 11px; }
  .select-mode-btn .dot { width: 9px; height: 9px; }
  .select-mode-btn .label { font-size: 12.5px; }

  .type-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .type-chip { padding: 13px 10px; border-radius: 10px; gap: 8px; }
  .type-chip .chip-bar { width: 5px; height: 17px; }
  .type-chip .chip-name { font-size: 11px; }
  .type-chip .chip-mark { font-size: 11px; top: 7px; right: 9px; }

  .result-panel { margin-top: 24px; padding-top: 24px; }
  .result-top { gap: 26px; }
  .gauge { width: 130px; height: 130px; }
  .gauge-inner { width: 104px; height: 104px; }
  .gauge-pct { font-size: 34px; }
  .gauge-pct .pct-sign { font-size: 16px; }
  .gauge-score { font-size: 10px; }
  .verdict-title { font-size: 18px; }
  .verdict-chip { font-size: 11px; padding: 4px 9px; }
  .verdict-sentence { font-size: 13.5px; }
  .segment-bar { gap: 3px; margin-top: 18px; }
  .segment-bar span { height: 9px; border-radius: 3px; }
  .segment-legend { font-size: 11px; gap: 18px; margin-top: 12px; }
  .result-sub { font-size: 13px; }

  .speed-prompt { font-size: 15px; margin-bottom: 20px; }
  .speed-board { gap: 22px; margin-top: 20px; }
  .speed-board.grid-2x2 { grid-template-columns: repeat(2, 170px); gap: 44px; }
  .speed-board.grid-2x2 .speed-card { width: 170px; }
  .speed-card { width: 170px; padding: 18px 14px 16px; border-radius: 16px; }
  .speed-card img { width: 88px; height: 88px; }
  .speed-card .speed-card-name { font-size: 14px; margin-top: 6px; }
  .speed-card .speed-card-speed { font-size: 12px; }
  .speed-card .pick-badge { width: 32px; height: 32px; font-size: 13px; }
  .speed-card .speed-badge { min-width: 44px; height: 34px; border-radius: 17px; }
  .speed-card .speed-badge .speed-badge-label { font-size: 9px; }
  .speed-card .speed-badge .speed-badge-value { font-size: 15px; }

  .actions { gap: 14px; margin-top: 24px; }
  .primary-btn { padding: 16px; border-radius: 12px; font-size: 15.5px; }
  .secondary-btn { padding: 16px 24px; border-radius: 12px; font-size: 15.5px; }

  .stats-panel { margin-top: 28px; padding: 22px 26px; border-radius: 18px; }
  .stats-eyebrow { font-size: 11px; margin-bottom: 18px; }
  .stat-streak-value { font-size: 58px; }
  .stat-streak-label { font-size: 11px; }
  .stats-grid { gap: 16px; margin-top: 20px; padding-top: 18px; }
  .stat-value { font-size: 24px; }
  .stat-value .stat-pct { font-size: 14px; }
  .stat-label { font-size: 10.5px; }

  .modal { width: 380px; padding: 30px; border-radius: 18px; }
  .modal-tabs { margin-bottom: 20px; }
  .modal-tab { padding: 11px; font-size: 14px; }
  .auth-form input, .auth-form select { padding: 12px 14px; font-size: 1rem; }
}

@media (max-width: 380px) {
  .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}