/* mobile.css — le jeu sur téléphone (Sébastien, 24 oct. 2026 : « entièrement adapté pour mobile […] mon téléphone branché et mis
   à l'horizontale sur mon piano »). Chargé après interface.css par index, carte, jouer et mini-jeux.
   Téléphone couché = peu de hauteur (360 à 430 px) : tout ce qui est fenêtre se tasse et défile, les boutons restent en bas. */

/* ── fenêtres de départ et de fin (jouer, mini-jeux) : jamais plus hautes que l'écran ── */
.panneau > .carte { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }

@media (max-height: 560px), (max-width: 560px) {
  .panneau { padding: 8px; }
  .panneau > .carte { padding: 16px 18px; border-radius: 18px; max-height: calc(100dvh - 16px); }
  .panneau > .carte h1 { font-size: 22px; }
  .panneau > .carte .sous { font-size: 13px; margin-bottom: 8px; }
  .panneau > .carte p, .panneau > .carte li { font-size: 14px; line-height: 1.4; }
  .panneau > .carte ul { margin: 6px 0 8px; }
  /* les boutons collent au bas de la fenêtre : « Jouer » toujours visible sans défiler */
  .panneau > .carte > .boutons, #fin .carte > .boutons { position: sticky; bottom: -16px; z-index: 2; background: #12151f;
    margin: 12px -18px -16px; padding: 10px 18px 14px; border-radius: 0 0 18px 18px; }
  .panneau .bouton { padding: 9px 14px; font-size: 14px; }
  .joueur-chip { margin-bottom: 8px; }
  .joueur-chip .av { width: 44px; height: 44px; }
  .fin-tete .av { width: 48px; height: 48px; }
  .etoiles { margin: 6px 0 10px; }
  .etoiles .et-svg { width: 46px; height: 46px; }
  .stats { font-size: 14px; }
  .titre-ic .ic { width: 42px; height: 42px; }
  .but { font-size: 16px !important; padding: 8px 12px; }
  .monde { margin-top: 12px; }
  .niv { width: 60px; height: 64px; border-radius: 16px; font-size: 20px; }
  .chemin::before { display: none; }
  .chemin.inverse { flex-direction: row; }
}
/* couché : une fenêtre plus large = moins de lignes à faire défiler */
@media (orientation: landscape) and (max-height: 560px) {
  .panneau > .carte { width: min(760px, 100%); }
  .panneau > .carte.carte-niv { width: min(1000px, 100%); }
}

/* ── jouer et mini-jeux debout : on invite à tourner le téléphone (la scène est en 16/9) ── */
@media (orientation: portrait) and (max-width: 600px) {
  body.scene-169::before { content: "Tourne ton téléphone à l’horizontale pour jouer en grand"; position: fixed; left: 16px; right: 16px;
    top: max(16px, env(safe-area-inset-top)); z-index: 4; padding: 10px 14px; border-radius: 14px; text-align: center; pointer-events: none;
    font: 800 14px/1.35 Inter, sans-serif; color: var(--encre); background: rgba(18, 21, 31, .92); border: 1px solid var(--ligne2); }
}

/* ── menu (index) couché : en-tête et clavier décoratif plus bas ── */
@media (max-height: 500px) and (orientation: landscape) {
  main { padding-top: 10px; }
  .haut { margin-bottom: 8px; }
  .logo { font-size: 22px; } .logo .ic { width: 26px; height: 26px; }
  .clavier-deco { height: 34px; overflow: hidden; }
  h1 { font-size: 34px; }
  .intro { margin-bottom: 16px; font-size: 15px; }
  .joueur { padding: 12px 16px; gap: 14px; }
  .joueur > .av { width: 64px; height: 64px; }
  .joueur h2 { font-size: 22px; }
  .anneau { width: 70px; height: 70px; } .anneau > div { width: 56px; height: 56px; } .anneau b { font-size: 15px; }
  .onglets { margin-bottom: 14px; } .onglets button { padding: 10px 12px; font-size: 15px; }
  .profil .av { width: 96px; height: 96px; } .profil.nouveau { min-height: 200px; }
  .voile { padding: 8px; }
  .fenetre { max-height: calc(100dvh - 16px); overflow-y: auto; padding: 18px; }

  /* carte de l'île : étiquettes et barre du haut plus petites, comme sur un écran étroit */
  .joueur-chip { padding-right: 10px; } .haut .joueur-chip .av { width: 38px; height: 38px; } .haut .joueur-chip b { font-size: 15px; }
  .bouton.liste span { display: none; } .bouton.liste { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; }
  .etiquette { font-size: 11.5px; padding: 4px 8px 5px; border-radius: 9px; } .etiquette small { font-size: 10.5px; margin-top: 1px; }
  .bandeau { padding: 6px 10px 6px 14px; } .bandeau b { font-size: 15px; } .bandeau span { font-size: 12.5px; }
}

/* écrans tactiles : pas de délai ni de zoom au double tap sur les boutons */
@media (pointer: coarse) {
  button, a, .bouton { touch-action: manipulation; }
}

/* l'aide « Piano manette » (manette.js) : sur un écran bas, en haut à droite et plus petite, pour ne pas cacher « Jouer » */
@media (max-height: 560px) {
  #manette-aide { left: auto !important; right: 8px; bottom: auto !important; top: 8px; transform: scale(.72); transform-origin: top right; opacity: .92; }
}