/* =========================================================
   V5.13 – mobile safety layer
   Scoped to tablet/phone widths so V5.11 desktop styling stays intact.
   ========================================================= */

@media (max-width: 980px) {
  /* A fresh mobile page always shows the normal Amigo's identity. The dog head
     is a mode state, never the default/mobile fallback artwork. */
  body:not(.amigo-mode) .logo-earable .amigo-dog-svg.amigo-user-logo,
  body:not(.amigo-mode) .intro__mark .amigo-dog-svg.amigo-user-logo,
  body:not(.amigo-mode) .brand__mark .amigo-dog-svg.amigo-user-logo,
  body:not(.amigo-mode) .hero__badge .amigo-dog-svg.amigo-user-logo {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body:not(.amigo-mode) .logo-earable > span,
  body:not(.amigo-mode) .logo-earable > b,
  body:not(.amigo-mode) .logo-earable > small,
  body:not(.amigo-mode) .logo-earable > em,
  body:not(.amigo-mode) .intro__mark > i {
    opacity: 1 !important;
    visibility: visible !important;
  }

  body:not(.amigo-mode) .dog-placeholder--amigo-head .amigo-dog-svg.dog-placeholder__image {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body:not(.amigo-mode) .dog-placeholder--amigo-head .dog-placeholder__fallback {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Touch controls must remain real controls, not rely on hover or a desktop pointer. */
  .menu-toggle,
  .mobile-nav__close,
  .mobile-nav__tools button,
  .mobile-sound,
  .mobile-amigo,
  [data-legal-open],
  [data-legal-close],
  [data-legal-tab],
  [data-cookie-settings],
  [data-consent-action],
  [data-track-select] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  /* Legal views are a real in-page sheet on mobile; they may never fall behind
     page layers or become untouchable. */
  .legal-overlay:not([hidden]) {
    display: grid !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .legal-overlay__backdrop,
  .legal-overlay__sheet,
  .legal-overlay__header,
  .legal-overlay__body,
  .legal-overlay__tabs,
  .legal-overlay__tabs button,
  .legal-overlay__close {
    pointer-events: auto !important;
  }
  .legal-overlay__body {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* Menus and modal layers get explicit stacking for mobile WebKit. */
  .mobile-nav { z-index: 17000 !important; }
  .legal-overlay { z-index: 18000 !important; }
  .consent-scrim { z-index: 19010 !important; }
  .consent-dialog { z-index: 19020 !important; }
  .reward-scrim { z-index: 19100 !important; }
  .reward-dialog { z-index: 19110 !important; }

  /* Native cursor is irrelevant on touch; do not let cursor layers intercept taps. */
  .cursor,
  .paw-layer { pointer-events: none !important; }
}

@media (max-width: 760px) {
  /* Keep modal controls comfortably inside notches/safe areas. */
  .legal-overlay {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(8px, env(safe-area-inset-left));
  }
  .legal-overlay__sheet {
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  }

  /* Stable touch layout: avoid accidental horizontal panning from animated layers. */
  html, body { max-width: 100%; overflow-x: clip; }
  .site, main { max-width: 100%; }

  /* Mobile sound buttons need a clear enabled state after a successful tap. */
  .mobile-sound,
  .mobile-amigo {
    min-height: 48px;
  }
}

/* V6.0 – all sound entry points are explicit touch controls on iOS/WebKit. */
@media (max-width: 980px) {
  .sound-toggle,
  .sound-cta,
  .mobile-sound,
  [data-track-select] {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }
}