/* ——— HUD: floating picture buttons over the map ——— */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.hud-corner {
  position: absolute;
  display: flex;
  gap: 14px;
  pointer-events: none;
  transition: opacity .3s ease, transform .4s var(--spring);
}
.hud-corner > * { pointer-events: auto; }
.hud-tl { top: calc(var(--gap) + var(--sat)); left: calc(var(--gap) + var(--sal)); }
.hud-tr { top: calc(var(--gap) + var(--sat)); right: calc(var(--gap) + var(--sar)); }
.hud-bl { bottom: calc(var(--gap) + var(--sab)); left: calc(var(--gap) + var(--sal)); }
.hud-br { bottom: calc(var(--gap) + var(--sab)); right: calc(var(--gap) + var(--sar)); }
.hud.is-hidden .hud-corner { opacity: 0; pointer-events: none; }
.hud.is-hidden .hud-tl, .hud.is-hidden .hud-tr { transform: translateY(-30px); }
.hud.is-hidden .hud-bl, .hud.is-hidden .hud-br { transform: translateY(30px); }
.hud.is-hidden .hud-corner > * { pointer-events: none; }

.hud-btn { width: var(--hud); height: var(--hud); }
.hud-zoom { display: flex; flex-direction: column; gap: 14px; }
.hud-zoom .hud-btn > svg { width: 70%; height: 70%; }
.hud-home { margin-bottom: 6px; }
.hud-btn.is-limit { opacity: .45; }

.hud-sound, .hud-zoom .hud-btn {
  width: calc(var(--hud) * .85);
  height: calc(var(--hud) * .85);
}
.hud-sound.is-muted { background-color: var(--stone); }

/* the big stories button: sunny, a little proud, gently glowing */
.hud-stories {
  width: calc(var(--hud) * 1.38);
  height: calc(var(--hud) * 1.38);
  background-color: var(--yellow);
  border-width: 4px;
  box-shadow: 4px 6px 0 rgba(42, 33, 28, .28);
}
.hud-stories > svg { width: 74%; height: 74%; margin-top: 4%; }
.hud-stories.is-menu-open > svg { width: 58%; height: 58%; margin-top: 0; }
.hud.is-menu-open .hud-corner:not(.hud-br) { opacity: 0; }
.hud.is-menu-open .hud-corner:not(.hud-br) > * { pointer-events: none; }
.hud-stories-glow {
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 3px dashed rgba(255, 244, 214, .9);
  animation: glow-spin 16s linear infinite;
  pointer-events: none;
}
@keyframes glow-spin { to { transform: rotate(360deg); } }
.hud-stories.nudge { animation: nudge 1.1s ease; }
@keyframes nudge {
  0%, 100% { transform: none; }
  12% { transform: rotate(-9deg) scale(1.06); }
  26% { transform: rotate(8deg) scale(1.08); }
  40% { transform: rotate(-6deg) scale(1.05); }
  54% { transform: rotate(4deg); }
  68% { transform: rotate(-2deg); }
}

/* parents: small, needs press-and-hold */
.hold-wrap { position: relative; }
.hud-parents {
  width: 56px; height: 56px;
  background-color: var(--paper);
  opacity: .92;
  touch-action: none;
}
.hud-parents > svg.ico { width: 64%; height: 64%; }
.hud-parents.is-holding { transform: scale(1.08); }
.hold-ring { position: absolute; inset: -11px; width: calc(100% + 22px); height: calc(100% + 22px); pointer-events: none; }
.hold-hint {
  position: absolute;
  top: calc(100% + 16px);
  right: -6px;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 600;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--flat);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.hold-hint::before {
  content: ''; position: absolute; top: -9px; right: 22px;
  width: 14px; height: 14px; background: var(--cream);
  border-left: 2.5px solid var(--ink); border-top: 2.5px solid var(--ink);
  transform: rotate(45deg);
}
.hold-hint.show { animation: hint 2.2s ease forwards; }
@keyframes hint {
  0% { opacity: 0; transform: translateY(-6px); }
  10%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px); }
}

@media (max-width: 600px) {
  :root { --hud: 58px; }
}

/* Species index and spoken-name caption, drawn on the atlas's paper. */
.wildlife-toggle { font-size: 17px; font-weight: 700; font-family: inherit; }
.hud-tl { gap: 10px; }
.wildlife-dialog { pointer-events: auto; direction: rtl; color: var(--ink, #2a211c); background: #f6ecd4; border: 2px solid #2a211c; border-radius: 22px; width: min(620px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 36px)); padding: 20px; box-sizing: border-box; }
.wildlife-dialog::backdrop { background: rgba(42,33,28,.35); }
.wildlife-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wildlife-header h2 { font-size: 23px; margin: 0; }
.wildlife-dialog p { margin: 12px 0; font-size: 16px; }
.wildlife-dialog input { width: 100%; padding: 10px 12px; border: 1px solid #5a4a40; border-radius: 12px; background: #fff4d6; color: #2a211c; font: inherit; box-sizing: border-box; }
.wildlife-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.wildlife-tabs button { flex: 1; white-space: nowrap; font-size: 15px; padding: 8px; }
.wildlife-tabs [aria-pressed="true"] { background: #f7c948; }
.wildlife-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(125px,1fr)); gap: 10px; }
.wildlife-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; font: inherit; font-size: 16px; gap: 3px; color: #2a211c; background: #fff4d6; border: 1px solid #bfae8f; border-radius: 14px; padding: 8px; cursor: pointer; }
.wildlife-choice:hover, .wildlife-choice:focus-visible { background: #ead9b0; outline: 2px solid #2a64ad; }
.wildlife-preview { width: 95px; height: 72px; }
.wildlife-preview svg { width: 100%; height: 100%; }
@media(max-width:420px) { .wildlife-dialog { padding: 14px; } .wildlife-header h2 { font-size: 19px; } .wildlife-list { grid-template-columns: repeat(2,minmax(0,1fr)); } .wildlife-tabs button { font-size: 13px; } }