/* ── PREY (20/10/2026): painel, cartas e chips (preyPainel.ts) ─────────── */
#prey {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(640px, 96vw); max-height: min(84vh, 700px);
  padding: 13px; display: flex; flex-direction: column; gap: 9px; z-index: 26;
  font-family: var(--ui);
}
#prey[hidden] { display: none !important; }
#prey > header { display: flex; align-items: center; gap: 10px; }
#prey > header .lead { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
#prey > header .lead img { width: 22px; height: 22px; image-rendering: pixelated; }
#prey > header .close { margin-left: 0; }
.py-estoque { margin-left: auto; display: flex; gap: 6px; }
.py-estoque span { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .05); border: 1px solid var(--edge); }
.py-corpo { overflow: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.py-intro { margin: 0; font-size: 12px; color: var(--dim); line-height: 1.45; }

/* as cores de cada bônus */
.py-xp { --py: 255, 205, 80; }
.py-dano { --py: 255, 104, 88; }
.py-defesa { --py: 96, 165, 250; }
.py-captura { --py: 74, 222, 128; }
.py-shiny { --py: 232, 121, 249; }
.py-loot { --py: 250, 160, 60; }

.py-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.py-slot { display: flex; flex-direction: column; gap: 5px; }
.py-rot { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.py-carta {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 250px;
  padding: 12px; border-radius: 14px; font: inherit; color: var(--ink); text-align: center;
  border: 1px solid rgba(var(--py, 255, 255, 255), .45);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(var(--py, 255, 255, 255), .22), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .25));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .35);
}
.py-carta::after { content: ''; position: absolute; inset: 5px; border-radius: 10px; border: 1px dashed rgba(var(--py, 255, 255, 255), .18); pointer-events: none; }
.py-topo { display: flex; align-items: center; gap: 6px; width: 100%; }
.py-topo b { font-size: 13px; }
.py-ic { font-size: 18px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.py-pct { margin-left: auto; font-size: 13px; font-weight: 800; color: rgb(var(--py)); }
.py-mon { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.py-mon img, .py-mon canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.py-mon b { font-size: 14px; }
.py-barra { display: block; width: 100%; height: 6px; border-radius: 99px; background: rgba(0, 0, 0, .4); overflow: hidden; }
.py-barra > i { display: block; height: 100%; background: rgb(var(--py)); transition: width 1s linear; }
.py-tempo { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.py-status { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); }
.py-status.on { color: #6ee7a0; font-weight: 700; }
.py-acoes { display: flex; gap: 6px; margin-top: auto; }
.py-mini { font: inherit; font-size: 11.5px; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.py-limpar { opacity: .75; }

.py-vazia { cursor: pointer; justify-content: center; border-style: dashed; --py: 255, 255, 255; background: rgba(255, 255, 255, .025); }
.py-vazia:hover { background: rgba(255, 255, 255, .06); border-color: rgba(var(--accent-rgb), .55); }
.py-vazia b { font-size: 14px; }
.py-vazia small { font-size: 11.5px; color: var(--dim); }
.py-mais { font-size: 34px; font-weight: 300; line-height: 1; color: var(--dim); }
.py-travada { --py: 242, 196, 64; border-color: rgba(242, 196, 64, .45); }
.py-cadeado { font-size: 26px; }

.py-pe { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 11.5px; color: var(--dim); border-top: 1px solid var(--edge); padding-top: 9px; }

/* escolher */
.py-escolha-tit { display: flex; align-items: center; gap: 10px; }
.py-passo { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.py-bonus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.py-bt {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 6px; border-radius: 11px; cursor: pointer;
  font: inherit; color: var(--ink); text-align: center;
  background: rgba(var(--py), .07); border: 1px solid rgba(var(--py), .25);
}
.py-bt b { font-size: 12px; }
.py-bt small { font-size: 10px; color: var(--dim); line-height: 1.25; }
.py-bt.on { background: rgba(var(--py), .2); border-color: rgb(var(--py)); box-shadow: 0 0 12px rgba(var(--py), .35); }
.py-busca { font: inherit; font-size: 12.5px; color: var(--ink); background: rgba(255, 255, 255, .05); border: 1px solid var(--edge); border-radius: 9px; padding: 7px 10px; }
.py-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 5px; max-height: 230px; overflow: auto; }
.py-esp {
  display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; text-align: left;
  padding: 4px 7px; border-radius: 9px; cursor: pointer; font: inherit; color: var(--ink);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--edge);
}
.py-esp > :first-child { grid-row: 1 / 3; width: 32px; height: 32px; image-rendering: pixelated; }
.py-esp b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.py-esp small { font-size: 10px; color: var(--dim); }
.py-esp.on { border-color: rgba(var(--accent-rgb), .8); background: rgba(var(--accent-rgb), .14); }
.py-vazio { font-size: 12px; color: var(--dim); grid-column: 1 / -1; }
.py-ir { font: inherit; font-weight: 700; padding: 10px; border-radius: 10px; cursor: pointer; }

/* loja de diamantes */
.dm-card.dm-prey { border-color: rgba(232, 121, 249, .35); background: linear-gradient(180deg, rgba(232, 121, 249, .1), rgba(255, 255, 255, .015)); }
.dm-prey { display: flex; flex-direction: column; align-items: center; font-size: 26px; line-height: 1; }
.dm-prey small { font-size: 11px; font-weight: 800; color: #f0abfc; margin-top: 3px; }

/* chips embaixo do cartão do treinador */
.buff-prey { background: linear-gradient(180deg, rgba(var(--py), .18), rgba(var(--py), .06)); border-color: rgba(var(--py), .5); }
.buff-prey .bf-txt b { color: rgb(var(--py)); }
.buff-prey .bf-bar > i { background: rgb(var(--py)); }
.buff-prey.pausado { opacity: .55; }
.bf-prey-ic { position: relative; display: inline-flex; width: 22px; height: 22px; }
.bf-prey-ic > :first-child { width: 22px; height: 22px; image-rendering: pixelated; }
.bf-prey-ic i { position: absolute; right: -4px; bottom: -3px; font-size: 10px; font-style: normal; }

@media (max-width: 720px) {
  #prey { width: 100vw; max-height: calc(100vh - var(--dock-h, 74px) - 20px); top: 0; transform: translate(-50%, 0); border-radius: 0 0 12px 12px; padding: 10px; }
  .py-slots { grid-template-columns: 1fr; }
  .py-carta { min-height: 0; }
  .py-bonus { grid-template-columns: repeat(3, 1fr); }
}