/* Persistent Atlas space titles: a quiet vertical cinnabar inscription.
   Narrative headings, score labels, instructions, and dialog titles remain
   horizontal; this treatment is only for the identity label of the space. */
:root {
  --atlas-title-left: max(68px, calc(env(safe-area-inset-left, 0px) + 68px));
  --atlas-title-top: max(10px, calc(env(safe-area-inset-top, 0px) + 10px));
  --atlas-cinnabar: #9e382d;
  --atlas-paper-halo: rgba(246, 241, 228, 0.88);
}

.activity-title,
body > #title,
body > #heading,
body > header:first-of-type > h1:first-of-type {
  position: fixed !important;
  z-index: 500 !important;
  inset: auto !important;
  top: var(--atlas-title-top) !important;
  left: var(--atlas-title-left) !important;
  max-width: none !important;
  max-height: calc(100dvh - var(--atlas-title-top) - 12px);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--atlas-cinnabar) !important;
  font-family: Emojinq, Georgia, serif !important;
  font-size: clamp(12px, 2.05vmin, 18px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.13em !important;
  text-align: start !important;
  text-orientation: upright;
  text-shadow: none;
  writing-mode: vertical-rl;
  pointer-events: none !important;
  filter: drop-shadow(0 2px 2px rgba(63, 48, 39, 0.12));
}

.activity-title small,
body > #title small,
body > #heading small {
  display: block !important;
  margin: 0 0.32em 0 !important;
  color: #66594c !important;
  font-size: 0.62em !important;
  font-weight: 400 !important;
  letter-spacing: 0.09em !important;
  opacity: 0.8;
  writing-mode: vertical-rl;
}

@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --atlas-title-top: max(7px, env(safe-area-inset-top, 0px));
  }

  .activity-title,
  body > #title,
  body > #heading,
  body > header:first-of-type > h1:first-of-type {
    font-size: clamp(11px, 2.35vmin, 15px) !important;
    letter-spacing: 0.1em !important;
  }
}

@media (prefers-contrast: more) {
  .activity-title,
  body > #title,
  body > #heading,
  body > header:first-of-type > h1:first-of-type {
    color: #862c24 !important;
    text-shadow: none;
  }
}