/* Talentos do Jogador (systems/talents.js): categories on the left, the talents of one on the right.
   --tc is the category's type color (the trainer's and every pokemon's use the gold accent). */
#panel-talents { --tc: var(--accent); }
.win[data-panel="talents"] .win-body { overflow: hidden; }
#panel-talents.active { height: min(720px, calc(calc(100vh / var(--ui-zoom, 1)) - var(--win-top) - var(--win-bottom) - 120px)); }
.tl { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; height: 100%; min-height: 0; }

/* ---- categories ---- */
.tl-cats { display: grid; gap: 4px; align-content: start; overflow-y: auto; padding-right: 4px; }
.tl-cat {
  --tc: var(--accent);
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: 10px; border: 1px solid var(--line); background: #0b1424; color: var(--muted); text-align: left;
  font-family: var(--pixel); font-size: 0.85rem; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tl-cat .tl-ico { width: 22px; height: 22px; }
.tl-cat:hover { color: var(--text); border-color: color-mix(in srgb, var(--tc) 60%, var(--line)); }
.tl-cat.on { color: var(--text); border-color: var(--tc); background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, #0b1424), #0b1424); }
.tl-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-cat-n { font-family: 'Inter', sans-serif; font-size: 0.72rem; color: var(--muted); }
.tl-ico { object-fit: contain; image-rendering: pixelated; flex: none; }

/* ---- one category ---- */
.tl-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
.tl-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--tc) 45%, var(--line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 18%, #0e1a2e), #0b1424);
}
.tl-title { display: flex; align-items: center; gap: 10px; }
.tl-title h3 { font-family: var(--pixel); font-size: 1.1rem; color: var(--tc); }
.tl-totals { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.78rem; color: var(--text); }
.tl-totals span { white-space: nowrap; }
.tl-progress { display: grid; grid-template-columns: 140px auto; align-items: center; gap: 4px 10px; }
.tl-bar { height: 8px; border-radius: 8px; background: #050a14; border: 1px solid var(--line); overflow: hidden; }
.tl-bar i { display: block; height: 100%; background: var(--tc); transition: width 0.3s; }
.tl-filter { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; }

.tl-list { display: grid; gap: 6px; align-content: start; overflow-y: auto; padding-right: 4px; }
.tl-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid #22355c; background: linear-gradient(180deg, #13213d, #0b1424);
}
.tl-card.done { border-color: #2f8a4a; background: linear-gradient(180deg, #13301f, #0b1a14); }
.tl-card.locked { opacity: 0.6; }
.tl-card-ico { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #070e1b; }
.tl-check {
  position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: #3fd34f; color: #06240d; font-size: 0.75rem; box-shadow: 0 0 0 2px #0b1a14;
}
.tl-card-body { display: grid; gap: 4px; min-width: 0; }
.tl-effect { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.tl-lock { font-size: 0.75rem; color: #ffbf5e; font-weight: 700; }
.tl-cost { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 260px; }
.tl-item {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px;
  background: #070e1b; border: 1px solid var(--line); cursor: help;
}
.tl-item img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.tl-item b {
  position: absolute; right: 1px; bottom: 0; font-size: 0.66rem; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000;
}
.tl-item.ok { border-color: #2f8a4a; }
.tl-item.miss { border-color: #8a2f3d; }
.tl-item.miss b { color: #ff8fa3; }
.tl-go { min-width: 108px; }
.tl-done { min-width: 108px; text-align: center; color: #6dff8b; font-family: var(--pixel); }
.tl-note { text-align: center; }

@media (max-width: 760px) {
  #panel-talents.active { height: auto; }
  .win[data-panel="talents"] .win-body { overflow-y: auto; }
  .tl { grid-template-columns: 1fr; height: auto; }
  .tl-cats { display: flex; overflow-x: auto; overflow-y: hidden; padding: 0 0 4px; scrollbar-width: none; }
  .tl-cats::-webkit-scrollbar { display: none; }
  .tl-cat { flex: none; grid-template-columns: 22px auto auto; }
  .tl-list { overflow: visible; padding: 0; }
  .tl-card { grid-template-columns: 40px minmax(0, 1fr); }
  .tl-cost { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .tl-go, .tl-done { grid-column: 1 / -1; width: 100%; }
}