/* ============================================================
   MAUVAISE PIOCHE V5.2.1 STABLE — MOBILE SAFE + MOBILE FLOW
   Couche additive uniquement. Aucun changement moteur.
   Chargée APRES style.css.
   ============================================================ */

:root{
  --mp521-dock-reserve:96px;
  --mp521-hud-reserve:0px;
  --mp521-visual-height:100vh;
  --mp521-safe-top:env(safe-area-inset-top,0px);
  --mp521-safe-right:env(safe-area-inset-right,0px);
  --mp521-safe-bottom:env(safe-area-inset-bottom,0px);
  --mp521-safe-left:env(safe-area-inset-left,0px);
}

html,body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

/* Les conteneurs structurants ne doivent jamais imposer une largeur supérieure au viewport. */
.rulebook-shell,
.rule-section,
#playBox,
.game-card,
.game-card > *,
.mp-card-top,
.mp-card-content,
.mp-card-visual,
.card-body,
.card-acid,
.interaction-sheet,
.karma-sheet,
.v430-sticky-hud,
#playBox #actions.action-zone,
.host-team,
.mp510-auth-banner,
.mp510-structure-card,
.mp510-coach-card{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* Les contenus textuels longs ne doivent jamais élargir leur parent. */
.card-title,
.card-effect,
.card-acid,
.family-label,
.notice,
.approval-wait,
.interaction-sheet p,
.karma-sheet,
.host-team,
.mp510-auth-banner,
.mp510-structure-card,
.mp510-coach-card{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Le contenu joueur réserve dynamiquement la hauteur réelle du dock fixe.
   La valeur est mise à jour par mobile_v521.js. */
#playBox{
  padding-bottom:calc(var(--mp521-dock-reserve) + 24px)!important;
  scroll-padding-top:calc(var(--mp521-hud-reserve) + 12px);
  scroll-padding-bottom:calc(var(--mp521-dock-reserve) + 18px);
}

.game-card{
  scroll-margin-top:calc(var(--mp521-hud-reserve) + 12px);
  scroll-margin-bottom:calc(var(--mp521-dock-reserve) + 18px);
}

/* La punchline doit pouvoir remonter au-dessus du dock. */
.game-card .card-acid{
  position:relative;
  z-index:3;
  max-width:100%;
}

/* Les popups doivent rester lisibles sur téléphones courts. */
.interaction-popup,
.karma-lock{
  padding-top:max(12px,var(--mp521-safe-top));
  padding-right:max(12px,var(--mp521-safe-right));
  padding-bottom:max(12px,var(--mp521-safe-bottom));
  padding-left:max(12px,var(--mp521-safe-left));
  overflow:auto;
}
.interaction-sheet,.karma-sheet{max-height:calc(var(--mp521-visual-height) - 24px);overflow:auto}

@media(max-width:900px){
  /* Marge physique réelle à gauche/droite, safe areas comprises. */
  .rulebook-shell{
    width:calc(100% - 16px - var(--mp521-safe-left) - var(--mp521-safe-right))!important;
    max-width:calc(100% - 16px - var(--mp521-safe-left) - var(--mp521-safe-right))!important;
    margin:8px auto!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  input,select,textarea,button,.btn,.back{max-width:100%;box-sizing:border-box}

  /* Interface maître : aucun groupe horizontal rigide sur mobile. */
  .dashboard-top,.score-strip,.host-grid,.settings,.two-btn,.exercise-actions,.target-grid,.family-rule-row{
    min-width:0;
  }
  .qr-inline-zone{max-width:100%;min-width:0}
  .qr-inline-zone > *{min-width:0;max-width:100%}
}

@media(max-width:600px){
  /* 4 px de respiration de chaque côté : le contour/ombre de la carte reste visible. */
  #playBox .game-card{
    width:calc(100% - 8px)!important;
    max-width:calc(100% - 8px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  #playBox .game-card .mp-card-top,
  #playBox .game-card .mp-card-content,
  #playBox .game-card .mp-card-visual,
  #playBox .game-card .card-body,
  #playBox .game-card .card-acid{
    min-width:0!important;
    max-width:100%!important;
  }

  #playBox .game-card .mp-card-visual img{
    max-width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }

  /* Le min-height historique était utile visuellement mais pouvait pousser
     artificiellement la punchline sous le dock sur les écrans courts. */
  #playBox .game-card.blue{
    min-height:clamp(500px,82dvh,610px)!important;
    margin-bottom:18px!important;
  }

  #playBox .game-card:not(.blue){
    margin-bottom:18px!important;
  }

  #playBox .game-card .card-acid{
    width:96%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Le dock respecte les safe areas sans changer sa logique fonctionnelle. */
  #playBox #actions.action-zone{
    width:calc(100% - 12px - var(--mp521-safe-left) - var(--mp521-safe-right))!important;
    max-width:720px!important;
    bottom:max(6px,var(--mp521-safe-bottom))!important;
  }

  .v430-sticky-hud{
    width:calc(100% - 12px - var(--mp521-safe-left) - var(--mp521-safe-right))!important;
    max-width:720px!important;
    top:max(5px,var(--mp521-safe-top))!important;
  }

  /* Maître du jeu : contrôles tactiles et grilles souples. */
  .v351-mode-grid{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .v351-mode-card{min-width:0!important;padding-left:8px!important;padding-right:8px!important}
  .v3-config-grid,.v3-check-grid,.v3-exercise-grid{min-width:0!important}
  .v36-head-links{
    max-width:100%;
    min-width:0;
    width:100%;
    display:flex!important;
    gap:6px!important;
  }
  .v36-head-links .back,
  .v36-head-links button{
    min-width:0!important;
    flex:1 1 0!important;
    padding-left:4px!important;
    padding-right:4px!important;
    overflow-wrap:normal;
    word-break:normal;
    white-space:nowrap!important;
  }

  /* V5.5.1 — sur téléphone, le libellé COMMENT ÇA MARCHE peut
     passer proprement sur 2 lignes sans déborder de son bouton. */
  #hostHowLink{
    white-space:normal!important;
    line-height:1.15!important;
    text-align:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  /* DÉCONNEXION a besoin d'un peu plus de largeur que les autres actions. */
  #hostLogoutBtn{
    flex:1.35 1 0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    align-self:stretch!important;
    box-sizing:border-box!important;
    font-size:9.5px!important;
    line-height:normal!important;
    letter-spacing:0!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
    padding-left:2px!important;
    padding-right:2px!important;
  }
  .qr-inline-zone{flex-direction:column;align-items:stretch!important}
  .qr-inline-box{align-self:center}
}

/* Téléphones très étroits. */
@media(max-width:390px){
  .rulebook-shell{
    width:calc(100% - 12px - var(--mp521-safe-left) - var(--mp521-safe-right))!important;
    max-width:calc(100% - 12px - var(--mp521-safe-left) - var(--mp521-safe-right))!important;
    padding-left:9px!important;
    padding-right:9px!important;
  }
  #playBox .game-card{width:calc(100% - 6px)!important;max-width:calc(100% - 6px)!important}
  .v351-mode-grid{grid-template-columns:1fr!important}
}

/* Téléphones bas (SE, navigateur avec barres visibles, paysage). */
@media(max-height:700px) and (max-width:600px){
  #playBox .game-card,
  #playBox .game-card.blue{
    min-height:auto!important;
  }
  .game-card .card-acid{margin-top:14px!important}
  .interaction-sheet,.karma-sheet{max-height:calc(var(--mp521-visual-height) - 16px)}
}

@media(orientation:landscape) and (max-height:500px){
  #playBox{padding-bottom:calc(var(--mp521-dock-reserve) + 14px)!important}
  .interaction-popup,.karma-lock{align-items:flex-start}
}