/*
 * ESTRELAS, IV E CRECHE (22/10/2026): a ficha do pokémon (ivPainel.ts) e o
 * cartão da Creche (crechePainel.ts). Dourado = Ascendida (6★+).
 */
.rar-ascendida { color: #ffd75e; text-shadow: 0 0 9px rgba(255, 215, 94, .8); }
#party .mon.rar-mon-ascendida { box-shadow: inset 2px 0 0 #ffd75e, 0 0 12px rgba(255, 215, 94, .5); }
.px-mon.rar-ascendida { box-shadow: 0 0 18px -6px #ffd75e; }
.px-heroi.rar-ascendida { border-color: rgba(255, 215, 94, .55); }

/* ── estrela na ficha ── */
.px-estrela-n, .px-iv-n { font-size: 16px; font-weight: 900; color: #ffd66b; font-variant-numeric: tabular-nums; }
.px-estrela-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.px-estrela-t { font-size: 18px; letter-spacing: .06em; color: var(--cor, #ffa53d); text-shadow: 0 0 8px rgba(255, 180, 80, .45); }
.px-estrela-l b { font-size: 13px; }

/* ── IV ── */
.px-iv-l { display: grid; grid-template-columns: minmax(96px, 1.1fr) 1fr auto auto; gap: 8px; align-items: center; }
.px-iv-l.max .px-iv-v { color: #5fd88a; }
.px-iv-nome { display: flex; flex-direction: column; min-width: 0; }
.px-iv-nome b { font-size: 12.5px; }
.px-iv-nome small { color: var(--faint); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-iv .px-prog-b { margin: 0; }
.px-iv .px-prog-b > i { background: linear-gradient(90deg, #4c9dff, #7fd8e8); }
.px-iv-v { font-variant-numeric: tabular-nums; font-size: 12px; min-width: 42px; text-align: right; }
.px-bt.px-vit { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; font-size: 11px; white-space: nowrap; }
.px-bt.px-vit img, .px-bt.px-vit canvas { width: 18px; height: 18px; }
.px-bt.px-vit.on { border-color: rgba(95, 216, 138, .6); background: rgba(95, 216, 138, .1); }
@media (max-width: 720px) {
  .px-iv-l { grid-template-columns: 1fr auto; }
  .px-iv-l .px-prog-b { grid-column: 1 / -1; }
  .px-iv-nome small { white-space: normal; }
}

/* ── o cartão da Creche ── */
.creche-card { width: min(640px, 96vw); max-height: 92vh; overflow: auto; }
.cr-corpo { display: flex; flex-direction: column; gap: 10px; }
.cr-cab { text-align: center; }
.cr-cab .tr-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--dim); }
.cr-sec { padding: 10px 12px 12px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--edge); display: flex; flex-direction: column; gap: 8px; text-align: left; }
.cr-sec .px-h { margin: 0; }
.cr-ovo { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(255, 214, 107, .06); border: 1px solid rgba(255, 214, 107, .35); }
.cr-ovo-img { width: 48px; height: 48px; display: grid; place-items: center; font-size: 28px; animation: cr-balanca 2.4s ease-in-out infinite; }
.cr-ovo-img img, .cr-ovo-img canvas { width: 44px; height: 44px; image-rendering: pixelated; }
@keyframes cr-balanca { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.cr-ovo-i { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.cr-ovo-i b { font-size: 13px; }
.cr-prazo { color: #ffd66b; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-ovo-b { display: flex; flex-direction: column; gap: 4px; }
.cr-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.cr-mon { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--edge); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cr-mon:hover { border-color: rgba(255, 214, 107, .5); }
.cr-mon.on { border-color: #ffd66b; background: rgba(255, 214, 107, .1); }
.cr-mon img, .cr-mon canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.cr-mon-i { display: flex; flex-direction: column; min-width: 0; }
.cr-mon-i b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-mon-i small { font-size: 10.5px; color: var(--dim); letter-spacing: .04em; }
.px-bt.cr-mini { align-self: flex-start; padding: 4px 10px; font-size: 11px; }
.cr-receita { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255, 214, 107, .05); border: 1px dashed rgba(255, 214, 107, .4); }
.cr-alvo { font-size: 14px; color: #ffd66b; }
.px-nota.falta { color: #ff7a85; }
@media (max-width: 720px) {
  .cr-ovo { grid-template-columns: 40px 1fr; }
  .cr-ovo-b { grid-column: 1 / -1; flex-direction: row; }
  .cr-lista { grid-template-columns: 1fr 1fr; }
}

/* A etiqueta da Creche no CP. */
.label.lb-creche .tag { color: #ffd1e8; border-color: rgba(255, 180, 220, .5); }
.label.lb-creche button { background: linear-gradient(180deg, #ffb7d9, #e86fb0); color: #2a0a1c; font-weight: 800; }
.px-atrib { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .px-atrib { grid-template-columns: repeat(2, 1fr); } }

/* Pokédex › Onde caçar (23/10/2026). */
.px-onde-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.px-onde-c { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--edge); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.px-onde-c:hover:not(:disabled) { border-color: rgba(95, 216, 138, .55); background: rgba(95, 216, 138, .07); }
.px-onde-c b { font-size: 12.5px; }
.px-onde-c small { font-size: 10.5px; color: #5fd88a; }
.px-onde-c.fechada { opacity: .55; cursor: default; }
.px-onde-c.fechada small { color: var(--faint); }

/* Pokédex › Montar time (timeGuia.ts, 23/10/2026). */
.px-corpo.px-time { display: block; overflow: auto; }
.tg { display: flex; flex-direction: column; gap: 12px; max-width: 980px; margin: 0 auto; }
.tg-topo h4 { margin: 0; font-size: 17px; }
.tg-sub { margin: 2px 0 0; font-size: 12px; color: var(--dim); }
.tg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tg-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--tinta, #888) 55%, transparent); background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.tg-chip img { width: 16px; height: 16px; }
.tg-chip.on { background: color-mix(in srgb, var(--tinta, #ffd66b) 30%, transparent); border-color: var(--tinta, #ffd66b); font-weight: 800; }
.tg-chip.atual { --tinta: #ffd66b; }
.tg-resumo { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--edge); }
.tg-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px; }
.tg-linha b { margin-right: 4px; }
.tg-linha.bom b { color: #5fd88a; }
.tg-linha.ruim b { color: #ff8a8a; }
.tg-tipo { padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--tinta) 28%, transparent); border: 1px solid color-mix(in srgb, var(--tinta) 60%, transparent); font-size: 11px; font-weight: 700; }
.tg-nada { color: var(--faint); }
.tg-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tg-cab .px-h { margin: 0; }
.tg-filtro { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); cursor: pointer; }
.tg-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.tg-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--edge); }
.tg-card.tenho { border-color: rgba(95, 216, 138, .45); background: rgba(95, 216, 138, .05); }
.tg-ret { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 0; cursor: pointer; padding: 0; }
.tg-ret img, .tg-ret canvas { width: 44px; height: 44px; image-rendering: pixelated; object-fit: contain; }
.tg-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tg-nome { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tg-nome b { font-size: 13px; }
.tg-motivo { font-size: 11px; color: var(--dim); }
.tg-motivo.ruim { color: #ffb0a0; }
.tg-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tg-selo { font-size: 10.5px; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); color: var(--dim); white-space: nowrap; }
.tg-selo.ok { background: rgba(95, 216, 138, .15); color: #5fd88a; font-weight: 700; }
.tg-selo.fechada { opacity: .7; }
.px-bt.tg-ir { padding: 5px 10px; font-size: 11.5px; white-space: nowrap; }
@media (max-width: 720px) {
  .tg-lista { grid-template-columns: 1fr; }
  .tg-card { grid-template-columns: 44px 1fr; }
  .tg-status { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
}
/* Banco › "Pokédex ›" ao lado do nome. */
.row.mon .nm .ver-dex { margin-left: 6px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px; background: rgba(255, 255, 255, .05); color: var(--dim); font: inherit; font-size: 10px; font-weight: 700; line-height: 16px; cursor: pointer; vertical-align: 1px; }
.row.mon .nm .ver-dex:hover { color: #fff; border-color: rgba(255, 214, 107, .6); background: rgba(255, 214, 107, .12); }

/* Cartão do selvagem (selvagemCartao.ts, 23/10/2026): clique num selvagem. */
.sv-cartao { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(16, 18, 26, .96); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); color: var(--ink, #fff); font-size: 12px; animation: sv-entra .12s ease-out; }
.sv-nome { font-size: 13.5px; }
.sv-bts { display: flex; gap: 6px; }
.sv-bt { padding: 6px 10px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: inherit; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; min-height: 32px; }
.sv-bt:hover { border-color: rgba(255, 214, 107, .6); background: rgba(255, 214, 107, .12); }
.sv-bt.ok { border-color: rgba(95, 216, 138, .6); color: #5fd88a; }
@keyframes sv-entra { from { opacity: 0; transform: translateY(4px); } }