/* HUD buttons and the title sequence. Owner: J34. Top right; the sky button is top left, the joystick bottom left. */
.hud {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 14px);
  right: calc(env(safe-area-inset-right) + 14px);
  z-index: 30;
  display: flex;
  gap: 8px;
  transition: opacity .3s ease, visibility .3s;
}
.hud.hud-away, #ui.title-on .hud, #ui.title-on .tgc-joy { opacity: 0; visibility: hidden; }

.hud-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(251, 240, 226, .92);
  box-shadow: 0 0 0 2px rgba(251, 240, 226, .75), 0 6px 18px rgba(74, 63, 74, .16);
  color: var(--ink);
  pointer-events: auto;
  cursor: pointer;
  transition: background-color .2s ease;
}
.hud-btn:hover { background: #fff6e8; }
.hud-btn[aria-expanded="true"], .hud-btn[aria-pressed="true"] { background: #ffe9ae; }
.hud-btn:focus-visible { outline: 3px solid #b77a9b; outline-offset: 2px; }

.hud-badge {
  position: absolute; top: 3px; right: 3px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fde39a;
  box-shadow: 0 0 0 2px #fbf0e2, inset 0 0 0 1.5px #e8c97a;
  opacity: 0;
  transition: opacity .3s ease;
}
.hud-badge.show { opacity: 1; }

.hud-note {
  position: absolute;
  left: 50%; top: calc(env(safe-area-inset-top) + 82px);
  transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 40px);
  padding: 7px 14px;
  border-radius: 16px;
  background: rgba(251, 240, 226, .9);
  color: var(--ink);
  font: italic 500 16px/1.25 var(--font);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.hud-note.show { opacity: 1; visibility: visible; }

.hud-saved {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 80px);
  right: calc(env(safe-area-inset-right) + 22px);
  width: 40px; height: 32px;
  opacity: 0;
  transition: opacity .6s ease;
}
.hud-saved.show { opacity: .9; }
.calm .hud-saved, .calm .hud, .calm .hud-note, .calm .hud-badge, .calm .hud-btn { transition-duration: .001s; }

/* The title. Opacities are set from JS, so a 2 s crossfade still is one under the OS reduced-motion setting. */
.title {
  position: absolute; inset: 0;
  z-index: 40;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  display: flex; align-items: center; justify-content: center;
}
.title-veil { position: absolute; inset: 0; background: var(--cream); }
.title-snap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.title-mark {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 34px 20px;
  border-radius: 36px;
  background: rgba(251, 240, 226, .86);
  box-shadow: 0 12px 40px rgba(74, 63, 74, .16);
  color: var(--ink);
  opacity: 0;
  text-align: center;
}
.title-wedge { width: 76px; height: 60px; }
.title-wedge svg { width: 100%; height: 100%; }
.title-name {
  margin: 4px 0 0;
  font: 800 clamp(38px, 7vw, 62px)/1.05 var(--font);
  letter-spacing: .01em;
}
.title-line { margin: 6px 0 0; font: 600 clamp(16px, 2.6vw, 20px)/1.25 var(--font); opacity: .8; }
.title-skip {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 22px);
  left: 50%; transform: translateX(-50%);
  margin: 0; padding: 6px 14px;
  border-radius: 14px;
  background: rgba(251, 240, 226, .78);
  color: var(--ink);
  font: 600 15px/1.2 var(--font);
  opacity: 0;
}