@font-face {
  font-family: "Uncial Antiqua";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/uncial-antiqua-latin.woff2') format('woff2');
}

#map-title {
  position: absolute;
  inset: 0 0 calc(var(--chat-height) + var(--keyboard-inset));
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px 8%;
  pointer-events: none;
  text-align: center;
}

.map-title-name {
  max-width: 100%;
  color: #f6e9c5;
  font-family: "Uncial Antiqua", Georgia, serif;
  font-size: clamp(34px, 5.8vw, 80px);
  font-weight: 400;
  line-height: 1.35;
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 3px #14251f, 0 4px 16px #081811, 0 0 36px #081811;
}

.map-title-name::after {
  content: "";
  display: block;
  width: min(220px, 60%);
  height: 1px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, #e6d7a7, transparent);
}

@media (pointer: coarse) and (orientation: portrait) {
  #world.handheld #map-title { bottom: 0; padding-inline: 20px; }
}

@media (pointer: coarse) and (orientation: landscape) {
  .map-title-name { font-size: clamp(32px, 5.8vw, 52px); }
  .map-title-name::after { margin-top: 10px; }
}