.player-identity-plate {
  --plate-accent: #25dcff;
  --plate-accent-2: #65ff35;
  --plate-title: #ffcf40;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  color: #f5fbff;
  background: none;
  font-family: var(--pixel-font);
  isolation: isolate;
  filter: drop-shadow(0 8px 0 #000) drop-shadow(0 0 9px rgba(37,220,255,.42));
}

.player-identity-plate[data-side="rival"] {
  --plate-accent: #ff3e91;
  --plate-accent-2: #ff76bd;
  filter: drop-shadow(0 8px 0 #000) drop-shadow(0 0 9px rgba(255,62,145,.42));
}

.player-identity-plate[data-frame="high-score"] {
  --plate-title: #ffcf40;
  filter: drop-shadow(0 8px 0 #000) drop-shadow(0 0 11px color-mix(in srgb, var(--plate-accent), transparent 25%));
}

.identity-plate-chassis {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}

.identity-plate-frame-name,
.identity-plate-avatar,
.identity-plate-copy {
  position: absolute;
  z-index: 2;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

.identity-plate-copy {
  top: 56.2%;
  display: grid;
  width: 80%;
  justify-items: center;
  gap: clamp(6px, .6vw, 8px);
}

.identity-plate-frame-name {
  top: 12.2%;
  display: grid;
  width: 66%;
  height: 8.5%;
  place-items: center;
  overflow: hidden;
  color: var(--plate-accent);
  background: transparent;
  font-family: var(--pixel-display-font);
  font-size: clamp(.64rem, 2.1vw, 1.12rem);
  line-height: .86;
  letter-spacing: .055em;
  text-align: center;
  text-shadow: 2px 2px #00151d;
  white-space: nowrap;
}

.identity-plate-avatar {
  top: 21.7%;
  display: grid;
  width: 49.5%;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid var(--plate-accent);
  background: #01080b;
  box-shadow:
    0 0 0 4px #00151c,
    0 0 0 6px color-mix(in srgb, var(--plate-accent-2), transparent 42%),
    inset 0 0 16px color-mix(in srgb, var(--plate-accent), transparent 76%);
}

.identity-plate-avatar img {
  width: 96%;
  height: 96%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* The default fighters form one face-off composition. Custom avatars retain
   their authored orientation until their own facing metadata is introduced. */
.player-identity-plate[data-side="rival"] .identity-plate-avatar img[data-default-avatar="true"] {
  transform: scaleX(-1);
}

.player-identity-plate[data-waiting="true"] .identity-plate-avatar img {
  width: 76%;
  height: 76%;
  opacity: .45;
  filter: grayscale(.45) contrast(1.2);
}

.identity-plate-name {
  display: block;
  width: 100%;
  overflow: hidden;
  color: #f7fbff;
  font-family: var(--pixel-display-font);
  font-size: clamp(.78rem, 2.4vw, 1.55rem);
  line-height: .88;
  letter-spacing: .045em;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 3px 3px #000, 0 0 9px var(--plate-accent);
  white-space: nowrap;
}

.identity-plate-title {
  display: grid;
  width: 74%;
  grid-template-columns: 6px minmax(0, auto) 6px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
  color: var(--plate-title);
  background: transparent;
  font-size: clamp(.52rem, 1.4vw, .82rem);
  line-height: 1;
  white-space: nowrap;
}

.identity-plate-title[hidden] { display: none; }
.identity-plate-title i { width: 5px; height: 5px; background: currentColor; transform: rotate(45deg); }

@media (max-width: 600px) {
  .identity-plate-frame-name { font-size: clamp(12px, 3vw, 15px); }
  .identity-plate-name { font-size: clamp(12px, 3.6vw, 18px); }
  .identity-plate-title { font-size: clamp(12px, 2.8vw, 14px); }
}