/* styles/responsive/mobile-hexahunt.css
 * ══════════════════════════════════════════════════════════════════
 * Couche mobile du mode NUANCIERS / HEXAHUNT (#view-hexahunt).
 * Le point critique : le color-picker au doigt (barre de teinte fine,
 * toggle 22px) + les breakpoints < 900px absents du CSS d'origine.
 * ══════════════════════════════════════════════════════════════════ */

/* ─── Tactile : zones de saisie du picker élargies ───────────────── */
@media (pointer: coarse){
  /* Barre de teinte : 22px de haut → 34px, curseur plus visible. */
  .hx-hue{ height:34px; }
  .hx-hue-cursor{ width:14px; height:40px; }

  /* Curseur SV un peu plus lisible sous le doigt. */
  .hx-sv-cursor{ width:22px; height:22px; }

  /* Sliders H/S/V (mode sliders) plus épais. */
  .hx-slider{ height:22px; }

  /* Toggle pad ↔ sliders : 22px → 40px. */
  .hx-picker-mode-toggle{ width:40px; height:40px; }
  .hx-mode-icon{ width:18px; height:18px; }

  /* Flèches du carrousel : MASQUÉES au tactile. La navigation passe
   * par le swipe horizontal (hexahunt.js::_wireCarouselSwipe), le tap
   * sur les tuiles voisines et la VUE GRILLE — les flèches se
   * superposaient aux tuiles sur écran étroit. */
  .hx-carousel .hx-carousel-arrow{ display:none; }

  /* Footer : cibles ≥ 44px. */
  .hx-view-toggle{ min-height:44px; padding:10px 14px; }
  .hx-diag-btn{ min-height:46px; }
}

/* Le swipe horizontal doit atteindre les pointer events : on réserve
 * le geste vertical au scroll page, l'horizontal au carrousel. */
.hx-carousel-viewport{ touch-action:pan-y; }

/* Fenêtre étroite avec souris (et filet de sécurité tactile) : les
 * flèches passent AU-DESSUS des tuiles estompées, avec fond opaque —
 * plus de superposition illisible. */
@media (max-width: 640px){
  .hx-carousel-arrow{
    position:relative;
    z-index:6;
    background:var(--panel);
    box-shadow:0 2px 10px rgba(0,0,0,.22);
  }
}

/* ─── Garde-fou universel : le picker ne sort jamais de l'écran ──── */
.hx-picker-mini{ max-width:calc(100vw - 24px); }

/* ─── Téléphone (≤ 480px) ────────────────────────────────────────── */
@media (max-width: 480px){
  /* Mode COMPLETE : tuiles plus denses, le track (centré par JS sur
   * la tuile active) garde ses voisines visibles. */
  .hx-carousel{
    --tile-size:38px;
    gap:6px;
  }
  .hx-carousel-track{ gap:6px; }
  .hx-carousel-track.is-grid{
    grid-template-columns:repeat(5, clamp(38px, 16vw, 52px));
    grid-auto-rows:clamp(38px, 16vw, 52px);
    gap:10px;
    padding:12px;
  }

  /* Diagnostic de fin (21 lignes) : grille compactée, le nom prend
   * la place restante avec ellipsis. */
  .hx-diag-row{
    grid-template-columns:26px 40px 14px 40px 1fr auto;
    gap:6px;
    padding:8px 8px;
  }
  .hx-diag-chip{ width:40px; height:40px; font-size:15px; }

  /* Footer actions pleine largeur, confortables. */
  .hx-complete-footer{
    gap:8px;
    padding:10px 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* Le stage récupère la largeur des flèches disparues. */
  .hx-complete-stage{ padding-left:10px; padding-right:10px; }

  /* Rapport de score : la barre ASCII 20 caractères tient à 320px
   * avec une fonte réduite. */
  .hx-reveal .lr-score-bar{ font-size:10px; }
}

/* ─── Petit téléphone (≤ 400px) : solo resserré ──────────────────── */
@media (max-width: 400px){
  .hx-shell-solo{
    --picker-w:clamp(130px, calc(100vh - 500px), 230px);
  }
  /* dvh : hauteur réellement visible (cf. hexahunt.css fin de fichier
   * pour le pourquoi du @supports sur les custom properties). */
  @supports (height: 100dvh){
    .hx-shell-solo{
      --picker-w:clamp(130px, calc(100dvh - 500px), 230px);
    }
  }
  .hx-solo-arena{
    gap:clamp(16px, 4vw, 40px);
    padding-left:12px;
    padding-right:12px;
  }
}

/* ─── Feedback focus (remplace le hover inexistant au doigt) ─────── */
.hx-line-tile:focus-visible,
.hx-view-toggle:focus-visible,
.hx-picker-mode-toggle:focus-visible,
.hx-carousel-arrow:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}