/* NES-styled type badge with CSS variables for type colors */
:root {
  --type-normal: #A8A77A;
  --type-fire: #EE8130;
  --type-water: #6390F0;
  --type-electric: #F7D02C;
  --type-grass: #7AC74C;
  --type-ice: #96D9D6;
  --type-fighting: #C22E28;
  --type-poison: #A33EA1;
  --type-ground: #E2BF65;
  --type-flying: #A98FF3;
  --type-psychic: #F95587;
  --type-bug: #A6B91A;
  --type-rock: #B6A136;
  --type-ghost: #735797;
  --type-dragon: #6F35FC;
  --type-dark: #705746;
  --type-steel: #B7B7CE;
  --type-fairy: #D685AD;
}

.type-badge {
  width: 17.5em;
}

.nes-badge .type-normal   { background-color: var(--type-normal); box-shadow: var(--type-normal) 0 0.5em, var(--type-normal) 0 -0.5em, var(--type-normal) 0.5em 0, var(--type-normal) -0.5em 0; }
.nes-badge .type-fire     { background-color: var(--type-fire); box-shadow: var(--type-fire) 0 0.5em, var(--type-fire) 0 -0.5em, var(--type-fire) 0.5em 0, var(--type-fire) -0.5em 0; }
.nes-badge .type-water    { background-color: var(--type-water); box-shadow: var(--type-water) 0 0.5em, var(--type-water) 0 -0.5em, var(--type-water) 0.5em 0, var(--type-water) -0.5em 0; }
.nes-badge .type-electric { background-color: var(--type-electric); box-shadow: var(--type-electric) 0 0.5em, var(--type-electric) 0 -0.5em, var(--type-electric) 0.5em 0, var(--type-electric) -0.5em 0; }
.nes-badge .type-grass    { background-color: var(--type-grass); box-shadow: var(--type-grass) 0 0.5em, var(--type-grass) 0 -0.5em, var(--type-grass) 0.5em 0, var(--type-grass) -0.5em 0; }
.nes-badge .type-ice      { background-color: var(--type-ice); box-shadow: var(--type-ice) 0 0.5em, var(--type-ice) 0 -0.5em, var(--type-ice) 0.5em 0, var(--type-ice) -0.5em 0; }
.nes-badge .type-fighting { background-color: var(--type-fighting); box-shadow: var(--type-fighting) 0 0.5em, var(--type-fighting) 0 -0.5em, var(--type-fighting) 0.5em 0, var(--type-fighting) -0.5em 0; }
.nes-badge .type-poison   { background-color: var(--type-poison); box-shadow: var(--type-poison) 0 0.5em, var(--type-poison) 0 -0.5em, var(--type-poison) 0.5em 0, var(--type-poison) -0.5em 0; }
.nes-badge .type-ground   { background-color: var(--type-ground); box-shadow: var(--type-ground) 0 0.5em, var(--type-ground) 0 -0.5em, var(--type-ground) 0.5em 0, var(--type-ground) -0.5em 0; }
.nes-badge .type-flying   { background-color: var(--type-flying); box-shadow: var(--type-flying) 0 0.5em, var(--type-flying) 0 -0.5em, var(--type-flying) 0.5em 0, var(--type-flying) -0.5em 0; }
.nes-badge .type-psychic  { background-color: var(--type-psychic); box-shadow: var(--type-psychic) 0 0.5em, var(--type-psychic) 0 -0.5em, var(--type-psychic) 0.5em 0, var(--type-psychic) -0.5em 0; }
.nes-badge .type-bug      { background-color: var(--type-bug); box-shadow: var(--type-bug) 0 0.5em, var(--type-bug) 0 -0.5em, var(--type-bug) 0.5em 0, var(--type-bug) -0.5em 0; }
.nes-badge .type-rock     { background-color: var(--type-rock); box-shadow: var(--type-rock) 0 0.5em, var(--type-rock) 0 -0.5em, var(--type-rock) 0.5em 0, var(--type-rock) -0.5em 0; }
.nes-badge .type-ghost    { background-color: var(--type-ghost); box-shadow: var(--type-ghost) 0 0.5em, var(--type-ghost) 0 -0.5em, var(--type-ghost) 0.5em 0, var(--type-ghost) -0.5em 0; }
.nes-badge .type-dragon   { background-color: var(--type-dragon); box-shadow: var(--type-dragon) 0 0.5em, var(--type-dragon) 0 -0.5em, var(--type-dragon) 0.5em 0, var(--type-dragon) -0.5em 0; }
.nes-badge .type-dark     { background-color: var(--type-dark); box-shadow: var(--type-dark) 0 0.5em, var(--type-dark) 0 -0.5em, var(--type-dark) 0.5em 0, var(--type-dark) -0.5em 0; }
.nes-badge .type-steel    { background-color: var(--type-steel); box-shadow: var(--type-steel) 0 0.5em, var(--type-steel) 0 -0.5em, var(--type-steel) 0.5em 0, var(--type-steel) -0.5em 0; }
.nes-badge .type-fairy    { background-color: var(--type-fairy); box-shadow: var(--type-fairy) 0 0.5em, var(--type-fairy) 0 -0.5em, var(--type-fairy) 0.5em 0, var(--type-fairy) -0.5em 0; }

.nes-badge span.is-type:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
}

.nes-badge.is-splited span.is-type:first-child {
  position: absolute;
  top: 0px;
  width: 50%;
  color: rgb(255, 255, 255);
  text-align: center;
  left: 0px;
}

.nes-badge.is-splited span.is-type:last-child {
  position: absolute;
  top: 0px;
  width: 50%;
  color: rgb(255, 255, 255);
  text-align: center;
  right: 0px;
}

.nes-badge.is-splited span.is-type:last-child.type-normal   { background-color: var(--type-normal); box-shadow: var(--type-normal) 0 0.5em, var(--type-normal) 0 -0.5em, var(--type-normal) 0.5em 0, var(--type-normal) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-fire     { background-color: var(--type-fire); box-shadow: var(--type-fire) 0 0.5em, var(--type-fire) 0 -0.5em, var(--type-fire) 0.5em 0, var(--type-fire) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-water    { background-color: var(--type-water); box-shadow: var(--type-water) 0 0.5em, var(--type-water) 0 -0.5em, var(--type-water) 0.5em 0, var(--type-water) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-electric { background-color: var(--type-electric); box-shadow: var(--type-electric) 0 0.5em, var(--type-electric) 0 -0.5em, var(--type-electric) 0.5em 0, var(--type-electric) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-grass    { background-color: var(--type-grass); box-shadow: var(--type-grass) 0 0.5em, var(--type-grass) 0 -0.5em, var(--type-grass) 0.5em 0, var(--type-grass) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-ice      { background-color: var(--type-ice); box-shadow: var(--type-ice) 0 0.5em, var(--type-ice) 0 -0.5em, var(--type-ice) 0.5em 0, var(--type-ice) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-fighting { background-color: var(--type-fighting); box-shadow: var(--type-fighting) 0 0.5em, var(--type-fighting) 0 -0.5em, var(--type-fighting) 0.5em 0, var(--type-fighting) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-poison   { background-color: var(--type-poison); box-shadow: var(--type-poison) 0 0.5em, var(--type-poison) 0 -0.5em, var(--type-poison) 0.5em 0, var(--type-poison) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-ground   { background-color: var(--type-ground); box-shadow: var(--type-ground) 0 0.5em, var(--type-ground) 0 -0.5em, var(--type-ground) 0.5em 0, var(--type-ground) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-flying   { background-color: var(--type-flying); box-shadow: var(--type-flying) 0 0.5em, var(--type-flying) 0 -0.5em, var(--type-flying) 0.5em 0, var(--type-flying) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-psychic  { background-color: var(--type-psychic); box-shadow: var(--type-psychic) 0 0.5em, var(--type-psychic) 0 -0.5em, var(--type-psychic) 0.5em 0, var(--type-psychic) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-bug      { background-color: var(--type-bug); box-shadow: var(--type-bug) 0 0.5em, var(--type-bug) 0 -0.5em, var(--type-bug) 0.5em 0, var(--type-bug) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-rock     { background-color: var(--type-rock); box-shadow: var(--type-rock) 0 0.5em, var(--type-rock) 0 -0.5em, var(--type-rock) 0.5em 0, var(--type-rock) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-ghost    { background-color: var(--type-ghost); box-shadow: var(--type-ghost) 0 0.5em, var(--type-ghost) 0 -0.5em, var(--type-ghost) 0.5em 0, var(--type-ghost) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-dragon   { background-color: var(--type-dragon); box-shadow: var(--type-dragon) 0 0.5em, var(--type-dragon) 0 -0.5em, var(--type-dragon) 0.5em 0, var(--type-dragon) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-dark     { background-color: var(--type-dark); box-shadow: var(--type-dark) 0 0.5em, var(--type-dark) 0 -0.5em, var(--type-dark) 0.5em 0, var(--type-dark) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-steel    { background-color: var(--type-steel); box-shadow: var(--type-steel) 0 0.5em, var(--type-steel) 0 -0.5em, var(--type-steel) 0.5em 0, var(--type-steel) 0 0; }
.nes-badge.is-splited span.is-type:last-child.type-fairy    { background-color: var(--type-fairy); box-shadow: var(--type-fairy) 0 0.5em, var(--type-fairy) 0 -0.5em, var(--type-fairy) 0.5em 0, var(--type-fairy) 0 0; }

.nes-badge.is-splited span.is-type.type-normal:first-child   { box-shadow: var(--type-normal) 0 0.5em, var(--type-normal) 0 -0.5em, var(--type-normal) 0 0px, var(--type-normal) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-fire:first-child     { box-shadow: var(--type-fire) 0 0.5em, var(--type-fire) 0 -0.5em, var(--type-fire) 0 0px, var(--type-fire) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-water:first-child    { box-shadow: var(--type-water) 0 0.5em, var(--type-water) 0 -0.5em, var(--type-water) 0 0px, var(--type-water) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-electric:first-child { box-shadow: var(--type-electric) 0 0.5em, var(--type-electric) 0 -0.5em, var(--type-electric) 0 0px, var(--type-electric) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-grass:first-child    { box-shadow: var(--type-grass) 0 0.5em, var(--type-grass) 0 -0.5em, var(--type-grass) 0 0px, var(--type-grass) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-ice:first-child      { box-shadow: var(--type-ice) 0 0.5em, var(--type-ice) 0 -0.5em, var(--type-ice) 0 0px, var(--type-ice) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-fighting:first-child { box-shadow: var(--type-fighting) 0 0.5em, var(--type-fighting) 0 -0.5em, var(--type-fighting) 0 0px, var(--type-fighting) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-poison:first-child   { box-shadow: var(--type-poison) 0 0.5em, var(--type-poison) 0 -0.5em, var(--type-poison) 0 0px, var(--type-poison) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-ground:first-child   { box-shadow: var(--type-ground) 0 0.5em, var(--type-ground) 0 -0.5em, var(--type-ground) 0 0px, var(--type-ground) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-flying:first-child   { box-shadow: var(--type-flying) 0 0.5em, var(--type-flying) 0 -0.5em, var(--type-flying) 0 0px, var(--type-flying) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-psychic:first-child  { box-shadow: var(--type-psychic) 0 0.5em, var(--type-psychic) 0 -0.5em, var(--type-psychic) 0 0px, var(--type-psychic) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-bug:first-child      { box-shadow: var(--type-bug) 0 0.5em, var(--type-bug) 0 -0.5em, var(--type-bug) 0 0px, var(--type-bug) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-rock:first-child     { box-shadow: var(--type-rock) 0 0.5em, var(--type-rock) 0 -0.5em, var(--type-rock) 0 0px, var(--type-rock) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-ghost:first-child    { box-shadow: var(--type-ghost) 0 0.5em, var(--type-ghost) 0 -0.5em, var(--type-ghost) 0 0px, var(--type-ghost) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-dragon:first-child   { box-shadow: var(--type-dragon) 0 0.5em, var(--type-dragon) 0 -0.5em, var(--type-dragon) 0 0px, var(--type-dragon) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-dark:first-child     { box-shadow: var(--type-dark) 0 0.5em, var(--type-dark) 0 -0.5em, var(--type-dark) 0 0px, var(--type-dark) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-steel:first-child    { box-shadow: var(--type-steel) 0 0.5em, var(--type-steel) 0 -0.5em, var(--type-steel) 0 0px, var(--type-steel) -0.5em 0; }
.nes-badge.is-splited span.is-type.type-fairy:first-child    { box-shadow: var(--type-fairy) 0 0.5em, var(--type-fairy) 0 -0.5em, var(--type-fairy) 0 0px, var(--type-fairy) -0.5em 0; }