/* ===== HUD-панель снизу ===== */
#hud-wrap {
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  /* HUD is the primary control surface and must never be covered by a
     full-scene hotspot container or a transient activity button. */
  z-index: var(--layer-hud, 20);
  /* The expanded HUD owns its controls. Once it is visually collapsed the
     class below removes its old full-size hit area from scene administration. */
  pointer-events: auto;
  isolation: isolate;
  touch-action: manipulation;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#hud-toggle {
  order: 0;
  width: 48px;
  height: 20px;
  border: none;
  border-radius: 10px;
  background: rgba(15, 17, 21, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e8d8b0;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
#hud-toggle:hover { background: rgba(15, 17, 21, 0.7); }
#hud-toggle svg { transition: transform 0.3s ease; }
#hud-toggle.collapsed { order: 2; }
#hud-toggle.collapsed svg { transform: rotate(180deg); }
#hud-wrap.is-collapsed { pointer-events:none; }
#hud-wrap.is-collapsed #hud-toggle { pointer-events:auto; }
#hud {
  order: 1;
  position: relative;
  pointer-events: auto;
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(15, 17, 21, 0.25);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#hud.collapsed {
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
}
.hud-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
  padding: 6px 10px;
  border: none;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: background 0.15s ease, transform 0.1s ease;
}
.hud-btn:hover  { background: rgba(0, 0, 0, 0.4); }
.hud-btn .hud-ico {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hud-btn .hud-ico img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.hud-btn .hud-label {
  font-family: var(--font-game);
  font-size: 13px;
  text-transform: lowercase;
  letter-spacing: 0.3px;
  color: #e8d8b0;
  text-shadow:
    0 0 1px #000,
    0 1px 1px rgba(0,0,0,0.9),
   -1px 0 1px rgba(0,0,0,0.8),
    1px 0 1px rgba(0,0,0,0.8);
}
.hud-btn:hover  { background: rgba(255, 255, 255, 0.14); }
.hud-btn:active { transform: scale(0.94); }

/* The location sound control belongs to the persistent HUD layer and repeats
   the compact world-navigation geometry: 36px glass with a 44px touch halo. */
.scene-sound-toggle {
  position:absolute;
  top:calc(max(env(safe-area-inset-top),var(--tg-safe-top,0px)) + 9px);
  left:9px;
  z-index:var(--layer-hud,20);
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(35,37,40,.46);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,.36);
  cursor:pointer;
  touch-action:manipulation;
  transition:background .15s ease,transform .1s ease;aspect-ratio:1;flex-shrink:0;min-width:36px;max-width:36px;min-height:36px;max-height:36px;}
.scene-sound-toggle::before { content:''; position:absolute; inset:-4px; border-radius:50%; }
.scene-sound-toggle:hover { background:rgba(64,66,69,.58); }
.scene-sound-toggle:active { transform:scale(.92); }
.scene-sound-toggle:focus-visible { outline:2px solid #f0dfb2; outline-offset:3px; }
.scene-sound-toggle svg { width:12px; height:12px; overflow:visible; pointer-events:none; }
.scene-sound-note-stem { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.scene-sound-note-head { fill:currentColor; stroke:none; }
.scene-sound-slash { fill:none; stroke:#ef7770; stroke-width:2.4; stroke-linecap:round; opacity:0; filter:drop-shadow(0 1px 2px #000); }
.scene-sound-toggle.is-muted .scene-sound-slash { opacity:1; }