.pokemon-wrap { max-width: var(--container); margin: 0 auto; padding: 20px 20px 60px; }

.pokemon-header { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pokemon-header .avatar { width: 76px; height: 76px; font-size: var(--text-sm); }
.pokemon-header-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pokemon-header-types { display: flex; gap: 6px; margin-bottom: 4px; }
.pokemon-name {
  font-family: var(--font-display); font-size: clamp(26px, 5vw, 36px);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
}
.pokemon-dex { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--t3); margin-top: 2px; }

/* ── Mega Evolution form switcher — "Base" is a plain neutral pill. Each
   "⚡ Mega Evolve" button is outlined with the brand gradient in the border
   (not a filled background) so a row of 2-3 of them stays calm rather than
   competing for attention; only the currently-active one fills solid with
   a soft pulsing glow, so there's exactly one "busy" element at a time. ── */
.mega-evolve-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
.mega-form-btn {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 999px; border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.mega-form-base { color: var(--t2); background: var(--surface); border-color: var(--line2); }
.mega-form-base:hover { color: var(--t1); border-color: var(--t2); }
.mega-form-base.active { color: var(--t1); background: var(--surface2); border-color: var(--t2); }

.mega-evolve-btn {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800; letter-spacing: .01em;
  color: var(--accent);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient-brand) border-box;
}
.mega-evolve-btn:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.05); }
.mega-evolve-btn.active {
  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.25);
  background: var(--gradient-brand);
  animation: mega-glow 2.2s ease-in-out infinite; transform: scale(1.02);
}

@keyframes mega-glow {
  0%, 100% { box-shadow: 0 0 0 3px var(--gold-b), 0 6px 20px -4px var(--red-b); }
  50% { box-shadow: 0 0 0 6px var(--gold-b), 0 8px 26px -4px var(--red-b); }
}

.pokemon-sections { display: flex; flex-direction: column; gap: 34px; margin-top: 30px; }
.pokemon-section h2 {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; margin-bottom: 14px;
}
.pokemon-stat-list { max-width: 480px; }
.pokemon-stat-list .pstat-key { width: 64px; }

.ability-list { display: flex; flex-direction: column; gap: 10px; }
.ability-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.ability-name { font-weight: 700; font-size: var(--text-base); margin-bottom: 3px; }
.ability-desc { font-size: var(--text-sm); color: var(--t2); line-height: 1.5; }

.type-eff-groups { display: flex; flex-direction: column; gap: 10px; }
.type-eff-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.type-eff-label {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--t2);
  width: 100px; flex-shrink: 0;
}
.type-eff-row.is-weak .type-eff-label { color: var(--danger); }
.type-eff-row.is-resist .type-eff-label { color: var(--ok); }
.type-eff-row.is-immune .type-eff-label { color: var(--t3); }
.type-eff-badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Learnable moves — a compact list, not cards, so a 50+ move
   movepool doesn't turn into a huge wall of tiles. ────────────── */
.move-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.move-list-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); flex-wrap: wrap; }
.move-list-row:last-child { border-bottom: none; }
.move-list-row:nth-child(even) { background: var(--surface); }
.move-list-name { font-weight: 700; flex: 1 1 140px; min-width: 0; }
.move-list-cat {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 2px 6px; line-height: 1.4; flex-shrink: 0;
}
.move-list-cat.cat-physical { color: var(--danger); background: var(--danger-d); }
.move-list-cat.cat-special { color: var(--accent); background: var(--accent-d); }
.move-list-cat.cat-status { color: var(--t3); background: var(--surface2); }
.move-list-stats {
  display: flex; gap: 12px; font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--t2); flex-shrink: 0; margin-left: auto;
}