/* team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.team-card {
  position: relative;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px;
  padding: 34px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.team-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px #ffd23f22; }
.team-card.fainted .team-sprite { filter: grayscale(1) brightness(0.7); }
.team-badge.ko { left: 10px; right: auto; background: var(--red); color: #fff; }
.team-badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--accent); color: #000; font-family: var(--pixel); font-size: 0.7rem;
  padding: 2px 8px; border-radius: 999px;
}
.team-sprite { width: 96px; height: 88px; display: grid; place-items: end center; background: radial-gradient(ellipse at bottom, #2a4a7a, transparent 70%); }
.team-name { font-family: var(--pixel); font-size: 1.2rem; }
.team-types { display: flex; gap: 4px; }
.team-level { font-family: var(--pixel); color: var(--accent); }
.xp-track { width: 100%; height: 6px; background: #000; border-radius: 3px; overflow: hidden; }
.xp-fill { height: 100%; background: linear-gradient(90deg, #d9a91a, #ffe06a); }
/* genetics: N= / potency / quality / IV, and the six stats */
.genes-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.gene-chip {
  font-family: var(--pixel); font-size: 0.72rem; padding: 2px 7px; border-radius: 6px;
  background: #0b1424; border: 1px solid var(--line); color: var(--text);
}
.gene-chip.nota.mid { border-color: #4b6aa8; color: #9fc2ff; }
.gene-chip.nota.high { border-color: #8a6d1f; color: var(--accent); }
.gene-chip.pot.p1 { color: var(--muted); }
.gene-chip.pot.p2 { color: #7dff8a; border-color: #2f6b3a; }
.gene-chip.pot.p3 { color: #7fd8ff; border-color: #2a6fa8; }
.gene-chip.pot.p4 { color: #c79bff; border-color: #6b3fc4; }
.gene-chip.pot.p5 { color: #ffd23f; border-color: #8a6d1f; box-shadow: 0 0 6px #ffd23f55; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; }
.stat-cell {
  display: grid; justify-items: center; gap: 1px; padding: 4px 2px;
  background: #0b1424; border-radius: 6px; font-size: 0.72rem;
}
.stat-cell b { font-family: var(--pixel); font-size: 0.9rem; }
.stat-cell .iv { color: var(--muted); font-size: 0.65rem; }
.stat-cell .iv.top { color: var(--accent); }
.team-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; font-size: 0.7rem; color: var(--muted); }
/* the card's foot: the field button on its own row, then the four actions in a 2×2 grid */
.team-foot { display: grid; gap: 6px; width: 100%; margin-top: auto; padding-top: 4px; }
.team-field { width: 100%; }
.team-field.on { padding: 6px; border-radius: 8px; background: #3d3210; color: var(--accent); font-family: var(--pixel); font-size: 0.85rem; }
.team-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.team-actions .btn { width: 100%; min-width: 0; padding-left: 4px; padding-right: 4px; }
.team-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; }
.team-top .team-badge { position: static; }
.team-slot { font-family: var(--pixel); font-size: 0.75rem; color: var(--muted); }
.team-empty {
  border-style: dashed; justify-content: center; min-height: 200px; align-self: start; color: var(--muted); cursor: pointer;
  background: transparent; font: inherit;
}
.team-empty:hover { border-color: var(--accent); color: var(--text); }
.team-empty-plus { font-family: var(--pixel); font-size: 2.2rem; line-height: 1; }

/* evolving with a stone */
.evo-box { display: grid; gap: 6px; width: 100%; padding: 8px; border-radius: 10px; background: #0b1424; border: 1px solid #2a3f6b; }
.depot-row .evo-box { margin-top: 8px; }
.evo-title { font-family: var(--pixel); font-size: 0.8rem; color: #c08bff; }
/* two columns in a team card, so a branching species (Eevee: 8) stays compact */
.evo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.evo-list:has(> :only-child) { grid-template-columns: minmax(0, 170px); justify-content: center; }
.evo-pick {
  display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 5px 6px; border-radius: 8px;
  border: 1px solid #4a3a7a; background: #1a1636; color: var(--text); cursor: pointer; font: inherit;
}
.evo-pick:hover:not(:disabled) { border-color: #c08bff; background: #251d4a; }
.evo-pick:disabled { opacity: 0.5; cursor: default; }
.evo-name { font-family: var(--pixel); font-size: 0.8rem; }
.evo-stone { display: flex; align-items: center; gap: 3px; font-size: 0.68rem; color: var(--muted); }
.evo-stone img { width: 16px; height: 16px; image-rendering: pixelated; }

/* Equipe | Depot */
.pk-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.pk-tab {
  padding: 7px 16px; border-radius: 9px; border: 1px solid var(--line); background: #0b1424;
  color: var(--muted); font-family: var(--pixel); font-size: 0.95rem; cursor: pointer;
}
.pk-tab:hover { color: var(--text); background: #14223b; }
.pk-tab.on { background: var(--card-2); border-color: var(--accent); color: var(--accent); }
.pk-msg { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; background: #163a2a; color: #c9ffd8; font-size: 0.85rem; }
.pk-msg.bad { background: #3a1c2a; color: #ffc2cc; }

/* depot */
.depot { display: grid; gap: 10px; }
.depot-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.depot-tools .input { min-width: 0; }
.pk-search { flex: 1; min-width: 180px !important; }
.pk-select { flex: none; }
.depot-list { display: grid; gap: 6px; }
.depot-row { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.depot-row.shiny { border-color: #8a6d1f; }
.depot-row.swapping { border-color: var(--accent); }
.depot-main { display: grid; grid-template-columns: 48px minmax(140px, 1.4fr) 56px 56px minmax(0, 2fr) auto; gap: 10px; align-items: center; }
.depot-who { display: grid; gap: 4px; min-width: 0; }
.depot-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot-who .team-types { justify-content: flex-start; }
.depot-stat { display: grid; justify-items: center; }
.depot-stat b { font-family: var(--pixel); }
.depot-stat b.mid { color: #9fc2ff; }
.depot-stat b.hi { color: var(--accent); }
.depot-genes .genes-row { justify-content: flex-start; }
.depot-actions { display: flex; gap: 6px; }
.depot-swap { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #ffffff12; }
.depot-swap-list { display: flex; flex-wrap: wrap; gap: 6px; }
.depot-swap-pick {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 8px;
  border: 1px solid var(--line); background: #0b1424; color: var(--text); cursor: pointer; font: inherit; font-size: 0.85rem;
}
.depot-swap-pick:hover { border-color: var(--accent); }
.depot-empty { display: grid; justify-items: center; gap: 8px; padding: 32px; text-align: center; background: var(--card); border: 1px dashed var(--line); border-radius: 12px; }
.depot-empty img { width: 48px; height: 48px; image-rendering: pixelated; opacity: 0.8; }
@media (max-width: 900px) {
  .depot-main { grid-template-columns: 48px minmax(0, 1fr) 52px 52px; }
  .depot-genes, .depot-actions { grid-column: 1 / -1; }
  .depot-actions { justify-content: flex-end; }
}

/* pokedex */
.pokemon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pokemon-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform 0.12s, border-color 0.12s;
}
.pokemon-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.pokemon-card { position: relative; }
.pokemon-card.owned { background: linear-gradient(180deg, #23401f, var(--card)); }
/* not registered yet: a dark silhouette until you defeat one */
.pokemon-card.locked { cursor: default; background: #10182b; border-style: dashed; }
.pokemon-card.locked:hover { transform: none; border-color: var(--line); }
.pokemon-card.locked .name { color: var(--muted); }
.locked .sprite-canvas { filter: brightness(0); opacity: 0.55; }
.dex-shiny-badge { position: absolute; top: 6px; right: 8px; color: #ffe14d; text-shadow: 0 0 6px #ffe14d88; }
.dex-progress { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 0.85rem; color: var(--muted); }
.dex-progress .xp-track { width: 180px; }
/* generation tabs (systems/generations.js), drawn like the world map's region tabs */
/* every tab visible, in even columns that wrap to a new row (never a sideways scroll) */
.dex-gens { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-bottom: 12px; }
.dex-gen {
  display: grid; gap: 1px; text-align: left; min-width: 0;
  padding: 6px 12px; border-radius: 9px; border: 1px solid var(--line); background: #0b1424;
  color: var(--muted); font-family: var(--pixel); cursor: pointer;
}
.dex-gen:hover { color: var(--text); background: #14223b; }
.dex-gen.on { background: var(--card-2); border-color: var(--accent); color: var(--accent); }
.dex-gen.done .dex-gen-name { color: var(--accent); }
.dex-gen-name { font-size: 0.9rem; }
.dex-gen-sub { font-family: 'Inter', sans-serif; font-size: 0.68rem; color: var(--muted); }
.dex-counts { display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
.dex-counts b { font-family: var(--pixel); font-size: 1.1rem; color: var(--accent); }
.shiny-card { text-align: center; display: grid; gap: 4px; border-color: #8a6d1f; background: linear-gradient(180deg, #3a3215, var(--card)); }
.shiny-title, .shiny-star { color: #ffe14d; font-family: var(--pixel); }
.shiny-card .portrait-sprites { justify-content: center; background: radial-gradient(ellipse at bottom, #8a6d1f55, transparent 70%); }
.team-card.shiny { border-color: #8a6d1f; }
.card-sprite { width: 56px; height: 56px; display: grid; place-items: end center; }
.pokemon-card .name { font-family: var(--pixel); font-size: 0.95rem; }
.types { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.stats-row { display: flex; gap: 6px; align-items: center; font-size: 0.7rem; color: var(--muted); }

.pokemon-detail { display: grid; grid-template-columns: 300px 1fr; gap: 20px; margin-top: 12px; }
.portrait { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.portrait h2 { font-family: var(--pixel); }
.portrait-sprites { display: flex; gap: 8px; background: radial-gradient(ellipse at bottom, #2a4a7a, transparent 70%); padding: 8px 16px 0; }
.portrait .card { width: 100%; text-align: left; font-size: 0.85rem; display: grid; gap: 4px; }
.info h3 { font-family: var(--pixel); margin: 6px 0 8px; }
.bst { font-family: var(--pixel); margin-top: 4px; }

.stat-bar-row { display: grid; grid-template-columns: 64px 1fr 40px; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 0.8rem; }
.stat-bar-row .label { color: var(--muted); }
.stat-bar-row .bar { height: 8px; background: #000; border-radius: 4px; overflow: hidden; }
.stat-bar-row .fill { height: 100%; background: linear-gradient(90deg, var(--red), var(--accent)); }
.stat-bar-row .val { text-align: right; font-variant-numeric: tabular-nums; }

.attack-list { margin-top: 12px; }
.attack-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; background: var(--card); border-radius: 8px; margin-bottom: 4px; font-size: 0.82rem;
}
.atk-name { flex: 1; font-weight: 600; }
.atk-power { color: var(--accent); }
.atk-cd { color: var(--muted); min-width: 52px; text-align: right; }

@media (max-width: 800px) {
  .pokemon-detail { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- mega evolution and upgrades (upgrades.js) */
.evo-pick.mega { border-color: #8a5bd6; background: linear-gradient(160deg, #241a45, #0b1424); }
.evo-craft { display: grid; gap: 4px; }
.up-box { display: grid; gap: 6px; width: 100%; padding: 8px; border-radius: 10px; background: #0b1424; border: 1px solid #2a3f6b; }
.up-have { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.up-z { font-family: var(--pixel); }
.up-aoe { display: inline-flex; align-items: center; gap: 4px; font-family: var(--pixel); font-size: 0.75rem; color: #7fd0ff; }
.up-list { display: flex; flex-wrap: wrap; gap: 6px; }
.up-btn { display: inline-flex; align-items: center; gap: 4px; }
.up-icon { width: 18px; height: 18px; image-rendering: pixelated; }

/* ---------------------------------------------------------------- the team, compact (no scroll in the window) */
.team-view { display: grid; gap: 12px; }
.team-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
.team-card { padding: 28px 10px 10px; gap: 4px; }
.team-sprite { width: 80px; height: 66px; }
.team-sprite canvas { max-height: 64px; }
.team-name { font-size: 1rem; line-height: 1.15; }
.team-level { font-size: 0.85rem; }
.team-card .gene-chip { font-size: 0.64rem; padding: 1px 5px; }
.team-card .stat-cell { padding: 2px 1px; font-size: 0.64rem; }
.team-card .stat-cell b { font-size: 0.8rem; }
.team-card .stat-cell .iv { font-size: 0.6rem; }
.team-card > .muted.small { font-size: 0.7rem; line-height: 1.2; }
.team-ups { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.team-aoe { background: #1d3a5c; color: #7fd0ff; border: 1px solid #2f6aa8; }
.team-actions { grid-template-columns: 1fr 1fr; gap: 4px; }
.team-actions .btn { font-size: 0.72rem; padding-top: 4px; padding-bottom: 4px; }
.team-field.btn, .team-field.on { padding-top: 5px; padding-bottom: 5px; font-size: 0.8rem; }
/* a card's Evoluir / Melhorias, below the team at full width */
.team-detail { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: var(--card); border: 2px solid #4b3a8a; }
.team-detail-who { display: flex; align-items: center; gap: 8px; font-family: var(--pixel); }
.team-detail-who .btn { margin-left: auto; }
.team-detail .evo-list { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }