/* Keep the original HUD, with touch targets and visible keyboard focus. */
html, body { height: 100%; overflow: hidden; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #2e7def; outline-offset: 3px; }
#titlecard .hud-handle { min-height: 44px; }
.drawer-handle { min-width: 44px; }
.btns button, .toggles button, #panel .drawer-handle { min-height: 44px; }
#titlecard .title-body { max-height: calc(100dvh - 96px); overflow: auto; }
#loader { background: #0d0f11 url('/immersive/villa-ravine.webp') center / cover no-repeat; }
.lwrap { background: rgba(14,16,18,.85); padding: 22px; width: 280px; }
.ltxt { opacity: 1; line-height: 1.7; }
#panel:not(.collapsed) { max-height: calc(100dvh - 100px); }
#panel .drawer-inner { max-height: calc(100dvh - 100px); overflow-y: auto; }
.side-drawer .drawer-inner { padding-top: 80px; }
.row input[type=range] { margin-block: 14px; }
@media (max-width: 600px) {
  #titlecard { pointer-events: none; }
  #titlecard .hud-handle, #titlecard .title-body { pointer-events: auto; }
  #titlecard .hud-handle { padding-inline: 10px; }
  .hint { letter-spacing: .03em; line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}