:root {
  --highlight: #ddd;
  --background: #222;
  --tile-width: 484px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: var(--highlight);
  background-color: var(--background);
  accent-color: var(--highlight);
}

select:disabled {
  display: none;
}

.pkmn {
  margin: 0.25rem;
  padding: 0.25rem;
  display: grid;
  gap: 0.25rem;
  grid-template-columns: 64px 1fr 14ch;
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
    "img name  cls1"
    "img score cls2"
    "... total cls3"
    "... total cls4";
  align-items: center;
  border: 1px solid var(--highlight);
}

.pkmn > img {
  grid-area: img;
  justify-self: center;
}

.pkmn > .pkmn-name {
  grid-area: name;
  font-weight: 800;
}

.pkmn > .pkmn-total {
  grid-area: total;
  height: 100%;
  display: inline-flex;
  align-items: center;
}

.pkmn > .pkmn-score {
  grid-area: score;
  padding-left: 4ch;
}

.pkmn > .pkmn-cls {
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.125rem;
  display: flex;
  justify-content: space-between;
}

.pkmn > :is(.pkmn-total, .pkmn-cls)::before {
  display: inline-block;
  content: "";
  width: 1ch;
  margin-right: 4px;
}

.pkmn-total-selected > .pkmn-total::before,
.pkmn-cls1-selected > .pkmn-cls1::before,
.pkmn-cls2-selected > .pkmn-cls2::before,
.pkmn-cls3-selected > .pkmn-cls3::before,
.pkmn-cls4-selected > .pkmn-cls4::before {
  content: "▸";
}

.pkmn > .pkmn-cls1 {
  grid-area: cls1;
}

.pkmn > .pkmn-cls2 {
  grid-area: cls2;
}

.pkmn > .pkmn-cls3 {
  grid-area: cls3;
}

.pkmn > .pkmn-cls4 {
  grid-area: cls4;
}