/* Pokédex do Laboratório: o aparelho vermelho (tampa com lente e LEDs) e a tela clara com a grade */

.page-pokedex {
  --ink: #2a0b0e;
  --bone: #fdf3ef;
  --verdigris: #ffcb05;
  --verdigris-light: #ffe066;
  --brass: #ffcb05;
  --line: #7a1218;
  --line-soft: #93161d;
  --panel: #c4151c;
  --btn-ink: #2a0b0e;
  --text-secondary: #ffd9d4;
  --text-muted: #ffb8b0;
  --tela: #eef3ec;
  --tela-tinta: #1d2a24;
  --font-serif: "Pixelify Sans", "Courier New", monospace;
  --font-mono: "Pixelify Sans", "Courier New", monospace;
  --font-body: "Rubik", system-ui, sans-serif;
  background: radial-gradient(120% 80% at 50% 0%, #e0262d 0%, #b0141b 45%, #6d0c11 100%) fixed;
  color: var(--bone); font-family: var(--font-body); min-height: 100vh;
}
body:has(.page-pokedex) { background: #6d0c11; }
.page-pokedex .site-header { background: rgba(70,8,12,.55); border-bottom-color: rgba(0,0,0,.25); }
.page-pokedex .nav-link { font: 500 13px var(--font-body); color: var(--bone); text-decoration: none; opacity: .85; }
.page-pokedex .nav-link:hover { opacity: 1; text-decoration: underline; }

.aparelho { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: clamp(24px,5vh,56px) clamp(14px,3vw,32px) 120px; display: grid; gap: 18px; }

/* ---------- tampa ---------- */
.tampa { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 4px solid rgba(0,0,0,.28); position: relative; }
.tampa::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 3px; background: rgba(255,255,255,.12); }
.lente { width: clamp(56px,8vw,84px); aspect-ratio: 1; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #c8f1ff 0 12%, #3fa8e8 30%, #1b5fa8 70%, #0e3566 100%);
  border: 5px solid #fdf3ef; box-shadow: 0 0 0 3px #2a0b0e, 0 0 24px rgba(63,168,232,.55); animation: lente 4s ease-in-out infinite; }
@keyframes lente { 50% { box-shadow: 0 0 0 3px #2a0b0e, 0 0 38px rgba(63,168,232,.85); } }
.led { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #2a0b0e; align-self: flex-start; margin-top: 6px; }
.led--r { background: #ff5a5f; } .led--a { background: #ffcb05; } .led--v { background: #4fd16a; }
.tampa-txt { margin-left: auto; text-align: right; }
.kicker { margin: 0 0 4px; font: 500 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.tampa h1 { margin: 0; font: 700 clamp(34px,6vw,64px)/1 var(--font-serif); letter-spacing: .02em; color: #fff; text-shadow: 3px 3px 0 #2a0b0e; }
@media (prefers-reduced-motion: reduce) { .lente { animation: none; } }

/* ---------- painel de controle ---------- */
.painel { display: grid; gap: 12px; }
.sobre { margin: 0; max-width: 70ch; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.controles { display: grid; grid-template-columns: minmax(0,2fr) repeat(2, minmax(0,1fr)) auto auto; gap: 10px; }
@media (max-width: 760px) { .controles { grid-template-columns: 1fr 1fr; } .campo--busca { grid-column: 1 / -1; } }
.campo input, .campo select { width: 100%; box-sizing: border-box; font: 500 15px var(--font-body); color: var(--tela-tinta); background: var(--tela);
  border: 3px solid #2a0b0e; border-radius: 10px; padding: 10px 12px; box-shadow: inset 0 3px 0 rgba(0,0,0,.08); }
.campo input:focus-visible, .campo select:focus-visible { outline: 3px solid var(--verdigris); outline-offset: 2px; }
.b-sorteio { font: 700 15px var(--font-serif); color: #2a0b0e; background: var(--verdigris); border: 3px solid #2a0b0e; border-radius: 10px; padding: 10px 16px; cursor: pointer; box-shadow: 0 4px 0 #2a0b0e; }
.b-sorteio:hover { background: var(--verdigris-light); }
.b-sorteio:active { transform: translateY(3px); box-shadow: 0 1px 0 #2a0b0e; }
.contador { margin: 0; font: 500 13px var(--font-serif); color: var(--text-secondary); letter-spacing: .04em; }

/* ---------- tela com a grade ---------- */
.tela { background: var(--tela); color: var(--tela-tinta); border: 4px solid #2a0b0e; border-radius: 14px; padding: clamp(12px,2vw,22px);
  box-shadow: inset 0 0 0 6px #d9e2d6, 0 10px 0 rgba(0,0,0,.25); }
.grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.card { width: 100%; display: grid; justify-items: center; gap: 2px; padding: 8px 6px 10px; cursor: pointer; font: inherit; color: inherit;
  background: #fff; border: 2px solid #c9d4c6; border-radius: 10px; transition: transform .12s, border-color .12s; }
.card:hover, .card:focus-visible { transform: translateY(-3px); border-color: #c4151c; outline: none; }
.card img { width: 96px; height: 96px; image-rendering: pixelated; }
.card .num { font: 500 12px var(--font-serif); color: #6a7a70; }
.card b { font: 600 14px var(--font-body); text-align: center; }
.aviso { text-align: center; color: #6a7a70; margin: 24px 0; }
.mais { display: block; margin: 18px auto 0; font: 700 14px var(--font-serif); padding: 10px 18px; border: 3px solid #2a0b0e; border-radius: 10px; background: #fff; cursor: pointer; }

/* ---------- ficha (dialog) ---------- */
.ficha { width: min(760px, calc(100% - 24px)); max-height: calc(100% - 32px); padding: 0; border: 4px solid #2a0b0e; border-radius: 16px; background: var(--tela); color: var(--tela-tinta); }
.ficha::backdrop { background: rgba(30,4,8,.72); }
.ficha .fechar { position: sticky; top: 10px; float: right; margin: 10px 10px 0 0; z-index: 2; width: 40px; height: 40px; border: 3px solid #2a0b0e; border-radius: 50%; background: #fff; font-size: 16px; cursor: pointer; }
.ficha-corpo { padding: 22px clamp(16px,3vw,30px) 28px; }
.carregando { text-align: center; margin: 60px 0; font: 500 16px var(--font-serif); color: #6a7a70; }
.ficha-topo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 20px; align-items: center; }
@media (max-width: 620px) { .ficha-topo { grid-template-columns: 1fr; } }
.arte { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--t) 45%, #fff) 0%, color-mix(in srgb, var(--t) 18%, #fff) 70%); }
.arte img { width: 88%; height: auto; filter: drop-shadow(0 10px 12px rgba(0,0,0,.2)); }
.ficha-info .num { font: 500 14px var(--font-serif); color: #6a7a70; }
.ficha-info h2 { margin: 2px 0 2px; font: 700 clamp(28px,4vw,40px)/1.05 var(--font-serif); }
.genero { margin: 0 0 10px; color: #5a6a60; font-size: 14px; }
.tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.tipo { font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--t); padding: 5px 10px; border-radius: 999px; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.tipo b { font-weight: 700; }
.tipos--mult { margin-top: 4px; }
.tipos--resiste .tipo { opacity: .75; }
.medidas { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0; font-size: 14px; }
.medidas div { display: contents; }
.medidas dt { color: #5a6a60; }
.medidas dd { margin: 0; font-weight: 600; }
.medidas small { font-weight: 400; color: #6a7a70; }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.botoes button { font: 600 13px var(--font-body); padding: 8px 12px; border: 2px solid #2a0b0e; border-radius: 8px; background: #fff; cursor: pointer; }
.botoes button[aria-pressed="true"] { background: #ffcb05; }
.descricao { margin: 18px 0 0; padding: 12px 14px; background: #fff; border-left: 4px solid #c4151c; font-size: 15px; line-height: 1.55; }
.ficha-corpo h3 { margin: 22px 0 8px; font: 700 15px var(--font-serif); letter-spacing: .06em; text-transform: uppercase; color: #8a1016; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stats li { display: grid; grid-template-columns: 90px 38px 1fr; align-items: center; gap: 10px; font-size: 14px; }
.stats b { text-align: right; font-variant-numeric: tabular-nums; }
.stats i { height: 10px; border-radius: 6px; background: linear-gradient(90deg, #c4151c var(--v), #dbe3d8 var(--v)); }
.stats .total { border-top: 1px solid #c9d4c6; padding-top: 6px; font-weight: 600; }
.evolucao { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.evolucao li { display: flex; flex-wrap: wrap; gap: 6px; }
.evolucao li + li::before { content: '→'; align-self: center; margin-right: 4px; color: #8a1016; font-weight: 700; }
.evo { display: grid; justify-items: center; padding: 4px 8px 8px; border: 2px solid #c9d4c6; border-radius: 10px; background: #fff; cursor: pointer; font: 500 13px var(--font-body); }
.evo img { width: 80px; height: 80px; image-rendering: pixelated; }
.evo.is-atual { border-color: #c4151c; }

/* ---------- Quem é esse Pokémon? ---------- */
.b-quiz { background: #3fa8e8; color: #fff; text-shadow: 1px 1px 0 #1b5fa8; }
.b-quiz:hover { background: #63bcf0; }
@media (max-width: 760px) { .b-quiz { grid-column: 1 / -1; } }
.quiz { width: min(560px, calc(100% - 24px)); padding: 18px 20px 20px; border: 4px solid #2a0b0e; border-radius: 16px; color: var(--tela-tinta);
  background: radial-gradient(circle at 50% 38%, #fff6b0 0, #ffcb05 30%, #3fa8e8 31%, #1b5fa8 100%); }
.quiz::backdrop { background: rgba(30,4,8,.72); }
.quiz .fechar { float: right; width: 38px; height: 38px; border: 3px solid #2a0b0e; border-radius: 50%; background: #fff; cursor: pointer; }
.quiz-titulo { margin: 0 0 6px; font: 700 clamp(22px,4vw,30px)/1.1 var(--font-serif); color: #ffcb05; -webkit-text-stroke: 2px #1b3f8a; paint-order: stroke fill; text-shadow: 3px 3px 0 #1b3f8a; }
.quiz-palco { display: grid; place-items: center; min-height: 230px; }
.quiz-palco img { width: min(240px, 60vw); height: auto; transition: filter .45s; filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.quiz-palco img.sombra { filter: brightness(0) drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.quiz-resultado { min-height: 1.4em; margin: 4px 0 10px; text-align: center; font: 700 22px var(--font-serif); color: #fff; text-shadow: 2px 2px 0 #1b3f8a; }
.quiz-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quiz-opcoes button { font: 600 16px var(--font-body); padding: 12px 10px; border: 3px solid #2a0b0e; border-radius: 10px; background: #fff; cursor: pointer; text-align: left; }
.quiz-opcoes button:hover:not(:disabled) { background: #fff6b0; }
.quiz-opcoes kbd { font: 700 12px var(--font-serif); background: #2a0b0e; color: #fff; border-radius: 4px; padding: 1px 6px; margin-right: 4px; }
.quiz-opcoes .certo { background: #4fd16a; } .quiz-opcoes .errado { background: #ff7a7f; }
.quiz-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font: 600 14px var(--font-body); color: #fff; text-shadow: 1px 1px 0 #1b3f8a; }
@media (prefers-reduced-motion: reduce) { .quiz-palco img { transition: none; } }