/* Type pill colors — gradients for a richer look */
.type-pill {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.t-Normal { background: linear-gradient(135deg, #b8b89c, #9a9a82); }
.t-Fire { background: linear-gradient(135deg, #f5894a, #c25e1d); }
.t-Water { background: linear-gradient(135deg, #6c9bf3, #3d6fc8); }
.t-Electric { background: linear-gradient(135deg, #f5d643, #d8b41a); color: #2a2300; text-shadow: none; }
.t-Grass { background: linear-gradient(135deg, #82d262, #4f9c33); }
.t-Ice { background: linear-gradient(135deg, #aedede, #74b8b8); color: #0e3838; text-shadow: none; }
.t-Fighting { background: linear-gradient(135deg, #d2453d, #971d16); }
.t-Poison { background: linear-gradient(135deg, #b150b1, #7a247a); }
.t-Ground { background: linear-gradient(135deg, #e6c772, #b89844); color: #322004; text-shadow: none; }
.t-Flying { background: linear-gradient(135deg, #b39df5, #8466d4); }
.t-Psychic { background: linear-gradient(135deg, #fa6691, #d3325f); }
.t-Bug { background: linear-gradient(135deg, #b8c63a, #828b1e); color: #1c1f06; text-shadow: none; }
.t-Rock { background: linear-gradient(135deg, #c2ab48, #8b7621); }
.t-Ghost { background: linear-gradient(135deg, #7e64a3, #4f3677); }
.t-Dragon { background: linear-gradient(135deg, #7d4dfb, #4a23c7); }
.t-Dark { background: linear-gradient(135deg, #7c6354, #4f3a2c); }
.t-Steel { background: linear-gradient(135deg, #c8c8d8, #95a3b3); color: #1f242b; text-shadow: none; }
.t-Fairy { background: linear-gradient(135deg, #f3a8b9, #db748b); color: #3a121e; text-shadow: none; }

/* Type filter checkbox blocks */
.type-chip {
  display: flex; align-items: center; justify-content: center;
  padding: 4px 0; border-radius: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; cursor: pointer; user-select: none;
  opacity: 0.45; transition: opacity 0.12s, transform 0.08s;
  border: 1px solid transparent;
}
.type-chip:hover { opacity: 0.75; }
.type-chip.active { opacity: 1; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); transform: translateY(-1px); }
.type-chip input { display: none; }

/* Cost badge — color by tier */
.cost-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; padding: 1px 8px; border-radius: 6px;
  font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px;
}
.cost-1, .cost-2, .cost-3 { background: rgba(122, 122, 133, 0.15); color: #9a9aa3; border: 1px solid rgba(122, 122, 133, 0.25); }
.cost-4, .cost-5, .cost-6, .cost-7 { background: rgba(74, 222, 128, 0.10); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.25); }
.cost-8, .cost-9, .cost-10, .cost-11 { background: rgba(96, 165, 250, 0.10); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.25); }
.cost-12, .cost-13, .cost-14, .cost-15 { background: rgba(192, 132, 252, 0.10); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.30); }
.cost-16, .cost-17, .cost-18, .cost-19 { background: rgba(251, 146, 60, 0.10); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.30); }
.cost-20 { background: rgba(244, 63, 94, 0.10); color: #f43f5e; border: 1px solid rgba(244, 63, 94, 0.35); font-weight: 700; }
.cost-na { color: #5a5a63; font-size: 11px; }

/* Sprite avatar */
.sprite {
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  image-rendering: pixelated;
}

/* Move chip in active filter */
.move-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(192, 132, 252, 0.12);
  color: #d8b4fe; border: 1px solid rgba(192, 132, 252, 0.3);
  font-size: 11px; font-weight: 500; cursor: pointer;
  transition: background 0.12s;
}
.move-chip:hover { background: rgba(192, 132, 252, 0.22); }
.move-chip::after { content: "×"; opacity: 0.6; margin-left: 2px; font-weight: 600; }

/* Suggestion lists */
#ability-list, #move-suggestions {
  position: relative;
  z-index: 1;
}
#move-suggestions div, #ability-list label {
  padding: 5px 8px; cursor: pointer; font-size: 12px;
  display: block;
}
#move-suggestions div:hover, #ability-list label:hover { background: #1d1d22; }
#ability-list label { display: flex; align-items: center; gap: 6px; }
#ability-list input { accent-color: #c084fc; }

/* Table rows */
#results-body td.abilities {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#results-body tr {
  border-bottom: 1px solid #1d1d22;
  cursor: pointer;
  transition: background 0.08s;
}
#results-body tr:hover { background: #17171a; }
#results-body td { padding: 8px; vertical-align: middle; }
#results-body td.num { text-align: right; font-variant-numeric: tabular-nums; color: #a0a0aa; }
#results-body td.name { font-weight: 500; }
#results-body td.abilities { color: #a0a0aa; font-size: 12px; }
#results-body em { font-style: normal; color: #c084fc; opacity: 0.85; }

/* Scrollbars */
.scroll-thin::-webkit-scrollbar { width: 8px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 4px; }
.scroll-thin::-webkit-scrollbar-thumb:hover { background: #3a3a42; }

/* Detail dialog — body scroll lock when open */
body:has(dialog#detail[open]) { overflow: hidden; }
dialog#detail[open] { z-index: 50; }
dialog#detail::backdrop { backdrop-filter: blur(4px); }
.detail-art {
  width: 200px; height: 200px;
  background: radial-gradient(circle at center, rgba(192, 132, 252, 0.08), transparent 60%);
  border-radius: 12px; padding: 12px;
}

/* Stat bars */
.stat-bar {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--bar-color), color-mix(in srgb, var(--bar-color) 70%, white));
  transition: width 0.3s;
}