#modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.7);
  z-index:         200;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.25s;
  padding:         1rem;
}

#modal-overlay.show {
  opacity:        1;
  pointer-events: all;
}


.modal {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 24px;
  width:         100%;
  max-width:     480px;
  max-height:    90vh;
  overflow-y:    auto;
  position:      relative;
  transform:     scale(0.95);
  transition:    transform 0.25s;
}

#modal-overlay.show .modal { transform: scale(1); }


.modal::before {
  content:       '';
  position:      absolute;
  top: 0; left: 0; right: 0;
  height:        3px;
  background:    linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 24px 24px 0 0;
}


.modal-close {
  position:        absolute;
  top:             1rem;
  right:           1rem;
  width:           32px;
  height:          32px;
  background:      rgba(255, 255, 255, 0.06);
  border:          1px solid var(--border);
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       16px;
  color:           var(--muted);
  transition:      background 0.15s;
}

.modal-close:hover { background: rgba(255, 255, 255, 0.1); }


.modal-body { padding: 2rem; }


.modal-pokemon-img {
  width:            160px;
  height:           160px;
  object-fit:       contain;
  image-rendering:  pixelated;
  display:          block;
  margin:           0 auto 1.25rem;
  animation:        float 3s ease-in-out infinite;
}


.modal-name {
  text-align:     center;
  font-family:    var(--font-pixel);
  font-size:      12px;
  color:          var(--text);
  text-transform: capitalize;
  margin-bottom:  4px;
  letter-spacing: 1px;
}

.modal-num {
  text-align:    center;
  font-size:     12px;
  color:         var(--muted);
  margin-bottom: 1rem;
}


.modal-types {
  display:         flex;
  justify-content: center;
  gap:             8px;
  margin-bottom:   1.5rem;
}

.modal-type-badge {
  font-size:      11px;
  font-weight:    700;
  padding:        4px 14px;
  border-radius:  var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 1px;
  border:         1px solid;
}


.modal-divider { height: 1px; background: var(--border); margin: 1.25rem 0; }


.modal-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
  margin-bottom:         1.25rem;
}

.modal-stat {
  background:    var(--surface);
  border-radius: var(--radius-md);
  padding:       0.8rem 1rem;
  border:        1px solid var(--border);
}

.modal-stat-label {
  font-size:      10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--muted);
  margin-bottom:  4px;
  font-weight:    600;
}

.modal-stat-val { font-size: 20px; font-weight: 700; color: var(--text); }


.modal-section-title {
  font-size:      10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--muted);
  font-weight:    700;
  margin-bottom:  0.75rem;
}


.stat-bars { display: flex; flex-direction: column; gap: 8px; }

.stat-bar-row { display: flex; align-items: center; gap: 10px; }

.stat-bar-label {
  font-size:      11px;
  color:          var(--muted);
  min-width:      80px;
  font-weight:    600;
  text-transform: capitalize;
}

.stat-bar-track {
  flex:          1;
  height:        6px;
  background:    var(--border);
  border-radius: 6px;
  overflow:      hidden;
}

.stat-bar-fill {
  height:        100%;
  border-radius: 6px;
  transition:    width 0.6s ease;
}

.stat-bar-num {
  font-size:   11px;
  font-weight: 700;
  color:       var(--text);
  min-width:   30px;
  text-align:  right;
}


.modal-abilities { display: flex; flex-wrap: wrap; gap: 6px; }

.ability-chip {
  font-size:      12px;
  font-weight:    600;
  padding:        4px 12px;
  border-radius:  var(--radius-pill);
  background:     rgba(255, 255, 255, 0.05);
  border:         1px solid var(--border);
  color:          var(--text);
  text-transform: capitalize;
}


.modal-loader {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             16px;
  padding:         3rem 2rem;
  color:           var(--muted);
  font-size:       13px;
}