:root {
  --pkmn-yellow:      #FFCB05;
  --pkmn-yellow-dark: #E6B800;
  --pkmn-red:         #CC0000;
  --pkmn-red-dark:    #990000;
  --pkmn-blue:        #3B4CCA;
  --pkmn-dark:        #1a1a2e;
  --pkmn-darker:      #0f0f1a;
  --pkmn-card-bg:     #16213e;
  --pkmn-card-border: rgba(255,203,5,0.15);
  --pkmn-surface:     #1e2a45;
  --pkmn-text:        #e8e8f0;
  --pkmn-text-muted:  #8892a4;
  --pkmn-radius:      12px;
  --pkmn-radius-lg:   20px;
  --pkmn-shadow:      0 8px 32px rgba(0,0,0,0.4);
  --pkmn-glow-yellow: 0 0 20px rgba(255,203,5,0.3);
  --pkmn-glow-red:    0 0 20px rgba(204,0,0,0.3);

  
  --type-fire:      #FD7D24;
  --type-water:     #4592C4;
  --type-grass:     #9BCC50;
  --type-electric:  #F8D030;
  --type-psychic:   #F366B9;
  --type-fighting:  #D56723;
  --type-darkness:  #707070;
  --type-metal:     #B8B8D0;
  --type-dragon:    #7038F8;
  --type-fairy:     #EE99AC;
  --type-colorless: #A8A878;
  --type-poison:    #A040A0;
  --type-ice:       #98D8D8;
  --type-normal:    #A8A878;
}


#pkmn-card-page, #pkmn-set-page {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--pkmn-text);
  line-height: 1.7;
}

#pkmn-card-page *, #pkmn-set-page * {
  box-sizing: border-box;
}


.pkmn-topbar {
  padding: .5rem 0 .4rem;
  border-bottom: 1px solid rgba(255,203,5,.08);
  margin-bottom: .75rem;
}


.pkmn-breadcrumb {
  font-size: .8rem;
  color: var(--pkmn-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem;
}
.pkmn-breadcrumb a { color: var(--pkmn-yellow); text-decoration: none; transition: opacity .2s; }
.pkmn-breadcrumb a:hover { opacity: .75; }
.pkmn-breadcrumb span[aria-current] {
  color: var(--pkmn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}