*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100dvh;
  background:#d32f2f;min-height:100vh;display:flex;justify-content:center;align-items:center;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}

/* --- Pokédex --- */
.pokedex{position:relative;width:90vw;max-width:400px;aspect-ratio:2/3;background:#d32f2f;border:5px solid #333;border-radius:20px;overflow:hidden}
.pokedex::before{content:"";position:absolute;top:0;left:0;width:100%;height:12%;border-bottom:5px solid #333}
.camera{position:absolute;top:4%;left:10%;width:18%;aspect-ratio:1;background:#40c4ff;border:3px solid #333;border-radius:50%;outline:4px solid #fff;outline-offset:-4px}
.light{position:absolute;top:8%;width:6%;aspect-ratio:1;border:3px solid #333;border-radius:50%}
.light.red{left:35%;background:#f44336}.light.yellow{left:44%;background:#ffeb3b}.light.green{left:53%;background:#4caf50}

/* --- Pantalla --- */
.screen{
  position:absolute;top:18%;left:7%;width:86%;height:42%;background:#eee;border:5px solid #333;border-radius:10px;
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.1);overflow:hidden
}
.screen::before{content:"";position:absolute;top:6px;left:10px;width:14px;height:14px;background:#f44336;border-radius:50%;outline:3px solid #333}
/* (QUITADO) .screen .button-red */

/* Contenido dentro de pantalla */
.screen-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.5rem 1rem;text-align:center}
.sprite{width:65%;max-height:65%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.15))}
.poke-name{font-size:1.1rem;font-weight:800;color:#333;text-transform:capitalize;text-shadow:0 1px #fff}
.loading,.error{position:absolute;bottom:8px;right:8px;font-size:.8rem;color:#666;background:#fff8;padding:.1rem .4rem;border-radius:4px;display:none}
.error{color:#b71c1c;background:#ffebee}

/* Botones decorativos */
.small-buttons{position:absolute;bottom:22%;left:12%;width:60%;display:flex;justify-content:space-between}
.small-buttons .btn{flex:1;margin:0 2%;height:4%;background:#00bfa5;border:5px solid #333;border-radius:5px}
.small-buttons .btn.red{background:#f44336;flex:.4}

/* --- Buscador (izq. de flechas) --- */
/* Fondo y z-index para tapar cualquier línea gris detrás */
.search-wrap{
  position:absolute;bottom:26%;left:12%;
  right:calc(10% + 22% + 12px);height:9%;
  display:flex;gap:.4rem;align-items:center;z-index:5;background:#d32f2f;padding-right:.2rem
}
.search-wrap input{
  width:100%;height:100%;border:5px solid #333;border-radius:8px;padding:0 .6rem;font-weight:700;background:#fafafa;outline:none
}
.search-wrap button{
  height:100%;aspect-ratio:1;border-radius:8px;border:5px solid #333;background:#ffd54f;cursor:pointer;display:grid;place-items:center
}

/* --- Flechas --- */
.nav-buttons{position:absolute;bottom:18%;right:10%;width:22%;height:20%;display:flex;justify-content:space-between;align-items:center}
.nav-btn{position:relative;width:44%;aspect-ratio:1;background:#555;border:5px solid #333;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer}
.nav-btn.left::before,.nav-btn.right::before{content:"";display:block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}
.nav-btn.left::before{border-right:14px solid #333}
.nav-btn.right::before{border-left:14px solid #333}

/* --- Display verde (más grande) --- */
.bottom-display{
  position:absolute;bottom:7%;left:12%;width:76%;height:16%;
  background:#00e676;border:5px solid #333;border-radius:8px;
  padding:.35rem .55rem;display:flex;align-items:center;overflow:hidden
}
.stats{
  list-style:none;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem .6rem;
  font-size:.65rem;font-weight:600;line-height:1.15
}
.stats li{display:flex;gap:.4rem;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats li.col-2{grid-column:1/-1}
.stats span{display:inline-block;padding:.05rem .35rem;background:#00c853;border:2px solid #333;border-radius:4px;font-weight:800}

/* Responsive */
@media (max-width:576px){

  body{ min-height:100dvh !important; }


  .pokedex{width:100vw;height:100dvh;max-width:none;aspect-ratio:auto;border-radius:0}
  .pokedex::before{height:10%}
  .screen{top:17%;left:6%;width:88%;height:50%}
  .search-wrap{bottom:24%;right:calc(8% + 22% + 10px);left:10%;height:8%}
  .nav-buttons{bottom:17%;right:8%;width:22%;height:22%}
  .bottom-display{bottom:5%;left:10%;width:80%;height:18%}
  .stats{font-size:.7rem}
}

/* Blink cámara al buscar */
@keyframes cameraBlink {
  0%,100% { background:#40c4ff; }   /* azul claro actual */
  50%     { background:#1e88e5; }   /* azul más oscuro */
}
.camera.blink {
  animation: cameraBlink .8s ease-in-out infinite;
}