.hud { grid-template-columns: 1fr 1.3fr 1fr 1fr 1fr; }
.dex-row { grid-template-columns: 36px 1fr auto; }
.dex-row small { letter-spacing: 1px; white-space: nowrap; }
.creature-badge { position: relative; }
.creature-badge b { position: absolute; right: -3px; bottom: -3px; display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid var(--a); border-radius: 50%; background: #fff9df; font-size: 8px; }
.next-preview .creature-badge { font-size: 54px; }
.queue .creature-badge { font-size: 22px; }
.dex-row .creature-badge { font-size: 17px; }

@media (max-width: 650px) {
  .hud { grid-template-columns: 1fr 1fr 1fr; }
  .hud > div:last-child { display: none; }
}