:host {
  display: block;
}

.top-bar {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto minmax(18rem, 1fr);
  align-items: center;
  min-block-size: 5.6rem;
  padding: var(--ar-space-2) var(--ar-space-5);
  border-block: 1px solid var(--ar-border-highlight);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 62%), var(--ar-panel);
  box-shadow: var(--ar-shadow-raised);
}

.top-bar__character {
  display: flex;
  align-items: center;
  gap: var(--ar-space-3);
  min-inline-size: 0;
}

.top-bar__portrait {
  inline-size: 4.25rem;
  block-size: 4.25rem;
  object-fit: cover;
  border: 1px solid var(--ar-border-highlight);
  border-radius: 50%;
  background: #080909;
}

.top-bar__identity,
.top-bar__health {
  display: grid;
  gap: 0.2rem;
}

.top-bar__name,
.top-bar__world-name {
  color: var(--ar-text);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
}

.top-bar__level,
.top-bar__loading {
  color: var(--ar-text-muted);
  font-size: var(--ar-font-sm);
}

.top-bar__health {
  min-inline-size: 8rem;
  color: var(--ar-text);
  font-size: var(--ar-font-sm);
}

.top-bar__health-track {
  display: block;
  overflow: hidden;
  block-size: 0.45rem;
  border: 1px solid #6d2f2a;
  background: #23100f;
}

.top-bar__health-value {
  display: block;
  block-size: 100%;
  background: linear-gradient(90deg, #8e231f, #c74b42);
  transition: inline-size var(--ar-motion-base);
}

.top-bar__ornament {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  transform: rotate(45deg);
  border: 1px solid var(--ar-border-highlight);
  box-shadow: 0 0 0 0.25rem var(--ar-panel);
}

.top-bar__world-name {
  justify-self: end;
  color: var(--ar-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (width < 620px) {
  .top-bar {
    grid-template-columns: 1fr auto;
    padding-inline: var(--ar-space-3);
  }

  .top-bar__ornament,
  .top-bar__world-name {
    display: none;
  }

  .top-bar__health {
    min-inline-size: 5rem;
  }
}
