/* =====================================================================
   Ydolem_stream - mobile hardening (additive, loaded LAST)
   Surgical, non-destructive complements to style.css's existing media
   queries. Targets: real ≥44px touch targets, zero horizontal overflow,
   safe-area insets, and touch-only effect trims. Never redesigns.
   Site par Orz — Dylan · NoemaWorks · https://noemaworks.net
   ===================================================================== */

/* ---- Belt-and-braces: nothing pushes the document wider than the screen.
        style.css already sets body{overflow-x:hidden}; this guards the root
        too without changing any layout. ---- */
html { overflow-x: hidden; }

/* ---- Coarse-pointer (touch) refinements ---- */
@media (pointer: coarse) {
  /* Burger: real 44×44 hit area (the two bars stay visually identical). */
  .nav__burger {
    width: 44px;
    height: 44px;
    padding: 10px;
    /* keep style.css's column flex (the two bars stack); just center them */
    align-items: center;
    justify-content: center;
  }

  /* Audio dock buttons → ≥44px, and lift above the iOS home indicator. */
  .audioDock { bottom: max(18px, env(safe-area-inset-bottom)); }
  .audioBtn { width: 46px; height: 46px; }
  .volWrap { height: 46px; }

  /* Volume slider: keep the visual rail slim but give the THUMB a fat,
     finger-friendly grab zone via a tall transparent control box. */
  .volSlider { height: 24px; background-clip: content-box; padding: 10px 0; }

  /* Footer utility links (crédits / espace artiste / © line) — comfortable
     vertical hit area without shifting the layout. */
  .footer__bottom { row-gap: 4px; }
  .footer__admin { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__social a { width: 48px; height: 48px; }

  /* "Ouvrir sur Twitch" inline link in the live meta row. */
  .live__open { min-height: 44px; display: inline-flex; align-items: center; }

  /* In-flow CTA text links (goals + gallery "more") get a taller touch zone. */
  .goals__cta a,
  .atelier__more a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Social cards: already large, just ensure a comfy minimum. */
  .socialCard { min-height: 64px; }
}

/* ---- Very small phones (≤380px): tighten only what risks crowding ---- */
@media (max-width: 380px) {
  /* Keep the audio dock + volume from colliding by allowing a slim slider. */
  .volSlider { width: 64px; }
  /* Status pill text never forces a wider-than-screen line. */
  .statusPill { max-width: 100%; }
  .statusPill__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---- Respect the notch / rounded corners horizontally on all phones ---- */
@supports (padding: max(0px)) {
  @media (max-width: 860px) {
    .nav { padding-left: max(var(--gut, 20px), env(safe-area-inset-left));
           padding-right: max(var(--gut, 20px), env(safe-area-inset-right)); }
  }
}