/* Broke (systems/broke.js): the balls at a species that got away since its last capture */
/* the chip on a fallen body in "Caídos" (beside P1–P5 and N=) */
.broke-chip { color: #ffb36b; border-color: #7a4a1f; }
.broke-chip.high { color: #ff7b6b; border-color: #8a2f25; }
/* the Pokédex's card, and the shiny's lines inside the shiny card */
.broke-card, .broke-shiny { display: grid; gap: 3px; }
.broke-shiny { margin-top: 6px; padding-top: 6px; border-top: 1px solid #8a6d1f88; text-align: left; }
.broke-title { font-family: var(--pixel); font-size: 0.9rem; color: var(--accent); }
.broke-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; }
.broke-row b { font-family: var(--pixel); }
.broke-val { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* the balls by ball: icon + number */
.broke-balls { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.broke-ball { display: inline-flex; align-items: center; gap: 2px; font-size: 0.85rem; }
.broke-ball img, .broke-last img { width: 18px; height: 18px; image-rendering: pixelated; }
.broke-balls.small .broke-ball { font-size: 0.78rem; opacity: 0.85; }
.broke-balls.small img { width: 14px; height: 14px; }
.broke-last { display: inline-flex; align-items: center; gap: 4px; }
/* the Pokédex's "Broke" tab: one line per species */
.broke-sum { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 4px; }
.broke-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.broke-list { display: grid; gap: 6px; }
.broke-line {
  display: grid; grid-template-columns: 56px minmax(120px, 1.2fr) 1.4fr 1fr 1fr; gap: 10px; align-items: center;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer;
}
.broke-line:hover { border-color: var(--accent); }
.broke-sprite { width: 56px; height: 56px; display: grid; place-items: center; }
.broke-name { display: grid; gap: 2px; min-width: 0; }
.broke-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.broke-cell { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.broke-cell .broke-val { justify-content: flex-start; }
.broke-now b { font-family: var(--pixel); font-size: 1.05rem; color: #ffb36b; }
.broke-now.high b { color: #ff7b6b; }
@media (max-width: 720px) {
  .broke-line { grid-template-columns: 48px 1fr 1fr; }
  .broke-sprite { width: 48px; height: 48px; }
  .broke-line > :nth-child(3) { grid-column: 2 / -1; }
}
.broke-row-balls { display: flex; justify-content: flex-end; margin-top: -2px; }