* { box-sizing: border-box; }

:root{
  --poke-yellow: #ffcb05;
  --poke-blue: #2a75bb;
  --poke-dark: #1b2a4a;
  --card: rgba(255,255,255,.92);
  --border: rgba(27,42,74,.18);
  --text: #0b1020;
  --muted: rgba(11,16,32,.65);
}

body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at top, rgba(255,203,5,.35), transparent 55%),
    radial-gradient(circle at bottom, rgba(42,117,187,.28), transparent 55%),
    linear-gradient(135deg, #f7fbff, #fff7cc);
  color: var(--text);
}

.card{
  width:min(760px, 95vw);
  padding:22px;
  border-radius:18px;
  background: var(--card);
  border: 2px solid rgba(42,117,187,.25);
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
  position: relative;
  overflow: hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width:260px;
  height:260px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, #ffffff 0 22px, #0b1020 22px 30px, transparent 30px),
    linear-gradient(#ef4444 0 50%, #ffffff 50% 100%);
  opacity:.14;
  transform: rotate(18deg);
  pointer-events:none;
}

h1{
  margin:0 0 14px;
  text-align:center;
  letter-spacing:.6px;
  font-weight: 1000;
  color: var(--poke-blue);
  text-shadow: 0 2px 0 rgba(255,203,5,.55);
}

.search-row{
  display:flex;
  gap:10px;
  margin-bottom:16px;
}

#search-input{
  flex:1;
  padding:12px 14px;
  border-radius:14px;
  border:2px solid rgba(42,117,187,.25);
  background: #ffffff;
  color: var(--text);
  outline:none;
}

#search-input::placeholder{
  color: rgba(11,16,32,.45);
}

#search-input:focus{
  box-shadow: 0 0 0 4px rgba(255,203,5,.35);
  border-color: rgba(255,203,5,.8);
}

#search-button{
  padding:12px 14px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
  color: #0b1020;
  background: linear-gradient(90deg, var(--poke-yellow), #ffe782);
  box-shadow: 0 10px 24px rgba(255,203,5,.25);
}

#search-button:hover{
  filter: brightness(1.03);
}

#search-button:active{
  transform: scale(.98);
}

.results{
  margin-top:8px;
  padding:16px;
  border-radius:16px;
  background: rgba(42,117,187,.06);
  border: 2px solid rgba(42,117,187,.18);
}

.topline{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.name-id{
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
}

.creature-name{
  margin:0;
  font-size:1.35rem;
  font-weight:1000;
  letter-spacing:.8px;
  color: #0b1020;
}

.creature-id{
  margin:0;
  font-weight:900;
  color: rgba(42,117,187,.9);
}

.meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.pill{
  margin:0;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(42,117,187,.25);
  background: rgba(255,255,255,.75);
  color: var(--muted);
  font-weight:800;
}

.section-title{
  margin:0 0 8px;
  font-size:.95rem;
  opacity:.95;
  letter-spacing:.3px;
  color: rgba(27,42,74,.95);
}

.types{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  min-height:32px;
}

.type-badge{
  padding:6px 10px;
  border-radius:999px;
  font-weight:1000;
  letter-spacing:.4px;
  border: 2px solid rgba(0,0,0,.08);
  background: rgba(255,203,5,.25);
}

.type-badge{
  text-transform: uppercase;
}

.type-badge[data-type="FIRE"]{
  background: rgba(239, 68, 68, 0.25);
  color: #7f1d1d;
}

.type-badge[data-type="WATER"]{
  background: rgba(59, 130, 246, 0.25);
  color: #1e3a8a;
}

.type-badge[data-type="GRASS"]{
  background: rgba(34, 197, 94, 0.25);
  color: #14532d;
}

.type-badge[data-type="ELECTRIC"]{
  background: rgba(250, 204, 21, 0.35);
  color: #713f12;
}

.type-badge[data-type="ICE"]{
  background: rgba(186, 230, 253, 0.45);
  color: #075985;
}

.type-badge[data-type="ROCK"]{
  background: rgba(120, 113, 108, 0.35);
  color: #292524;
}

.type-badge[data-type="GROUND"]{
  background: rgba(202, 138, 4, 0.35);
  color: #78350f;
}

.type-badge[data-type="FLYING"]{
  background: rgba(196, 181, 253, 0.35);
  color: #3730a3;
}

.type-badge[data-type="BUG"]{
  background: rgba(163, 230, 53, 0.35);
  color: #365314;
}

.type-badge[data-type="POISON"]{
  background: rgba(168, 85, 247, 0.35);
  color: #581c87;
}

.type-badge[data-type="PSYCHIC"]{
  background: rgba(244, 114, 182, 0.35);
  color: #831843;
}

.type-badge[data-type="DARK"]{
  background: rgba(55, 48, 163, 0.35);
  color: #1e1b4b;
}

.type-badge[data-type="GHOST"]{
  background: rgba(124, 58, 237, 0.35);
  color: #312e81;
}

.type-badge[data-type="STEEL"]{
  background: rgba(148, 163, 184, 0.45);
  color: #1e293b;
}

.type-badge[data-type="FAIRY"]{
  background: rgba(251, 207, 232, 0.6);
  color: #831843;
}

.type-badge[data-type="DRAGON"]{
  background: rgba(14, 165, 233, 0.35);
  color: #0c4a6e;
}


.stats{
  margin-top:14px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}

.stat{
  padding:10px;
  border-radius:14px;
  border:2px solid rgba(42,117,187,.14);
  background: rgba(255,255,255,.85);
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.k{
  color: rgba(11,16,32,.6);
  font-weight:900;
}

.v{
  font-weight:1000;
  color: rgba(27,42,74,.95);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width: 560px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}