/* A Pokédex da Vila (index.html: #pokedex, abrirPokedex): o aparelho vermelho, com a coleção ao lado do resumo (as espécies
   num anel, as raridades em barras, o ranking da galera) e a grade de cartas (sprite, número, nível, tipos, experiência e a
   próxima evolução). Busca e filtro por raridade e brilhante. No celular, o resumo vai para cima. */
.dex-tela.menu{padding:clamp(8px,2.5vw,28px)}
.dex-aparelho{width:min(1180px,100%);height:min(820px,100%);display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:22px;overflow:hidden;font-family:"Pixelify Sans",monospace;
  background:linear-gradient(160deg,#e3343a,#b51f2a);border:4px solid #3a0d12;box-shadow:inset 0 0 0 3px #ff8a8a55,0 30px 80px #000c}
.dex-topo{display:flex;align-items:center;gap:12px;padding:12px clamp(12px,2vw,22px);background:linear-gradient(#ef444b,#c8242d);border-bottom:4px solid #3a0d12;color:#fff}
.dex-luz{width:clamp(34px,4vw,48px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d6f4ff,#36a6f0 45%,#0d5aa8);border:4px solid #fff;box-shadow:0 0 0 3px #3a0d12,0 0 18px #6cc8ff}
.dex-leds{display:flex;gap:6px;align-self:flex-start;margin-top:4px}.dex-leds i{width:11px;height:11px;border-radius:50%;border:2px solid #3a0d12;background:#ff6b6b}.dex-leds i:nth-child(2){background:#ffe066}.dex-leds i:nth-child(3){background:#69db7c}
.dex-topo h2{margin:0 auto 0 4px;font:900 clamp(20px,2.4vw,30px)/1 "Lilita One",sans-serif;letter-spacing:.01em;text-shadow:0 3px 0 #7a1219}
.dex-fechar{width:40px;height:40px;border-radius:50%;border:3px solid #3a0d12;background:#fff;color:#3a0d12;font:900 18px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 3px 0 #3a0d12}
.dex-corpo{min-height:0;display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(8px,1.4vw,16px);padding:clamp(8px,1.4vw,16px);background:#2b0f14}
.dex-msg{grid-column:1/-1;margin:20px;color:#ffe9e9;font:700 16px "Pixelify Sans",monospace;text-align:center}
.dex-lado{min-height:0;overflow:auto;display:grid;align-content:start;gap:14px;padding:14px;border-radius:14px;background:#1b2240;color:#e9eeff;border:3px solid #0d1229;box-shadow:inset 0 0 0 2px #ffffff14}
.dex-anel{--p:0;justify-self:center;width:150px;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(closest-side,#1b2240 78%,transparent 79%),conic-gradient(#ffd84a calc(var(--p) * 1%),#ffffff1c 0)}
.dex-anel b{font:900 40px/1 "Lilita One",sans-serif;color:#ffd84a}.dex-anel small{font-size:12px;line-height:1.2;color:#c7cff0}
.dex-raridades{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.dex-raridades li{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:12px}
.dex-raridades li span{color:var(--r);font-weight:800}.dex-raridades li i{height:9px;border-radius:5px;background:#ffffff1c;overflow:hidden}.dex-raridades li em{display:block;height:100%;background:var(--r)}
.dex-raridades li b{font-size:11px;color:#c7cff0}
.dex-lado h3{margin:4px 0 0;font:800 14px "Pixelify Sans",monospace;color:#ffd84a;letter-spacing:.06em;text-transform:uppercase}
.dex-rank{margin:0;padding-left:22px;display:grid;gap:4px;font-size:13px}.dex-rank li span{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.dex-rank li b{float:right;color:#ffd84a}
.dex-dica{margin:0;font-size:12px;line-height:1.35;color:#aab3d8}
.dex-principal{min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;padding:12px;border-radius:14px;background:#eef3f7;border:3px solid #0d1229;box-shadow:inset 0 0 0 3px #fff}
.dex-busca{display:grid;gap:8px}
.dex-busca input{width:100%;padding:9px 12px;border:3px solid #c9d4f0;border-radius:10px;font:600 15px "Pixelify Sans",monospace;color:#1d2140;background:#fff}
.dex-busca input:focus{outline:none;border-color:#1d2140}
.dex-filtros{display:flex;flex-wrap:wrap;gap:6px}
.dex-filtros button{padding:5px 12px;border-radius:999px;border:2px solid var(--r);background:#fff;color:#1d2140;font:700 13px "Pixelify Sans",monospace;cursor:pointer}
.dex-filtros button[aria-pressed=true]{background:var(--r);color:#fff;text-shadow:0 1px 0 #0006;border-color:#1d2140}
.dex-conta{margin:0;font-size:12px;color:#5b6488}
#dexGrade{min-height:0;overflow:auto;padding:2px}
.dex-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dex-carta{position:relative;display:grid;justify-items:center;gap:4px;padding:8px 8px 10px;border-radius:14px;background:#fff;border:3px solid var(--r);box-shadow:0 4px 0 #1d214022;color:#1d2140;text-align:center;
  animation:dexEntra .35s ease-out both;animation-delay:calc(var(--i) * 25ms)}
.dex-carta.brilhante{background:linear-gradient(160deg,#fffbe6,#fff)}
.dex-carta header{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:11px}
.dex-num{color:#6a7298}.dex-nv{padding:1px 7px;border-radius:6px;background:#1d2140;color:#ffd84a;font-weight:800}
.dex-foto{width:84px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--t) 45%,#fff) 0,#fff 70%)}
.dex-foto img{width:96px;height:96px;object-fit:contain;image-rendering:pixelated}
.dex-carta b{font:800 15px/1.1 "Pixelify Sans",monospace;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dex-carta .cap-tipos{justify-content:center}
.dex-xp{width:100%;height:6px;border-radius:3px;background:#e3e8f6;overflow:hidden}.dex-xp i{display:block;height:100%;background:linear-gradient(90deg,#6fd3ff,#3f8fe0)}
.dex-carta small{font-size:11px;line-height:1.25;color:#5b6488}
/* os tipos (as mesmas fichinhas do encontro) */
.dex-carta .cap-tipos{display:flex;flex-wrap:wrap;gap:4px}
.dex-carta .cap-tipos i{font-style:normal;padding:1px 7px;border-radius:999px;background:var(--t);font:700 10px/1.4 "Pixelify Sans",monospace;color:#fff;text-shadow:0 1px 0 #0007}
@keyframes dexEntra{from{transform:translateY(10px)}}
@media (max-width:760px){
  .dex-aparelho{height:100%;border-radius:16px}
  .dex-corpo{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);overflow:auto}
  .dex-lado{grid-template-columns:auto minmax(0,1fr);align-items:center}.dex-anel{width:96px}.dex-anel b{font-size:26px}.dex-anel small{font-size:10px}
  .dex-lado h3,.dex-rank,.dex-dica{display:none}
  .dex-grade{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}.dex-foto{width:64px}.dex-foto img{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){.dex-carta{animation:none}}
.dex-filtros button[data-dexf=todos][aria-pressed=true]{color:#1d2140;text-shadow:none}