/* =====================================================
     MOBILE — layout complet repensé
     ===================================================== */

  /* Masquer le layout desktop sur mobile */
  body.mobile .wrap{ display:none; }

  /* --- Écrans de connexion par étapes --- */
  #mobileSteps{ display:none; }
  body.mobile #mobileSteps{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    position:fixed; inset:0; z-index:60;
    background:
      radial-gradient(ellipse 900px 600px at 20% 15%, rgba(46,100,46,.45), transparent 60%),
      linear-gradient(160deg, var(--bg1), var(--bg2) 55%, var(--bg3));
    padding:24px 20px;
  }
  body.mobile.inGame #mobileSteps{ display:none; }

  #mobileSteps .msLogo{
    font-family:"Playfair Display",Georgia,serif; font-size:24px; font-weight:900;
    color:var(--wood2); margin-bottom:22px; text-align:center;
  }
  #mobileSteps .msLogo .sub{ font-size:13px; color:var(--muted); font-weight:400; display:block; margin-top:4px; }

  .msStep{ display:none; flex-direction:column; gap:12px; width:100%; max-width:340px; }
  .msStep.active{ display:flex; }
  .msStep .msTitle{
    font-family:"Playfair Display",Georgia,serif; font-size:15px; font-weight:700;
    color:var(--wood2); text-align:center; margin-bottom:2px;
  }
  .msStep input{
    width:100%; padding:14px 16px; border-radius:12px;
    border:1px solid #7a5828; background:rgba(10,25,10,.70); color:var(--ivory);
    font-size:20px; font-family:"Fredoka",sans-serif; font-weight:600;
    text-align:center; box-shadow:inset 0 2px 6px rgba(0,0,0,.35); outline:none;
  }
  .msStep input:focus{ border-color:var(--wood2); box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 2px rgba(200,144,60,.25); }
  .msStep .msBigBtn{
    cursor:pointer; width:100%; padding:15px; border-radius:14px;
    font-family:"Playfair Display",Georgia,serif; font-weight:700; font-size:15px; color:var(--ivory);
    background:linear-gradient(180deg,#2e6e2e 0%,#1e4e1e 50%,#143414 100%);
    border-top:2px solid #4a9e4a; border-left:2px solid #3a8a3a;
    border-right:2px solid #0e2e0e; border-bottom:3px solid #091a09;
    box-shadow:0 4px 10px rgba(0,0,0,.45); user-select:none; transition:transform .08s,filter .12s;
  }
  .msStep .msBigBtn:active{ transform:translateY(1px); filter:brightness(.95); }
  .msStep .msBigBtn.wood{
    background:linear-gradient(180deg,#a06828 0%,#7a4818 50%,#5c3410 100%);
    border-top:2px solid #d4944a; border-left:2px solid #c07838;
    border-right:2px solid #4a2808; border-bottom:3px solid #3a1e04;
  }
  .msStep .msBigBtn.danger{
    background:linear-gradient(180deg,#8b1a1a 0%,#6a1010 50%,#4a0808 100%);
    border-top:2px solid #c04040; border-left:2px solid #a03030;
    border-right:2px solid #400808; border-bottom:3px solid #2a0404;
  }
  .msStep .msBigBtn:disabled{ opacity:.5; cursor:not-allowed; filter:saturate(.5) brightness(.75); }
  .msStep .msRoomInfo{
    text-align:center; font-size:13px; color:var(--muted); padding:10px;
    border:1px solid rgba(200,144,60,.25); border-radius:10px; background:rgba(200,144,60,.08);
  }
  .msStep .msRoomInfo b{ color:var(--wood2); font-size:20px; display:block; margin-top:3px; }
  .msStep .msBack{
    background:none; border:none; color:var(--muted); font-size:13px;
    cursor:pointer; text-align:center; padding:4px;
    text-decoration:underline; text-underline-offset:3px;
  }
  #msRoomsListWrap{ max-height:130px; overflow-y:auto; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(10,20,10,.55); }
  #msRoomsList .roomOpt{ font-size:14px; padding:12px 14px; }

  /* --- Layout principal mobile (en jeu) --- */
  #mobileGame{ display:none; }
  body.mobile.inGame #mobileGame{
    display:flex; flex-direction:column;
    height:100dvh; width:100%; overflow:hidden;
    background:
      radial-gradient(ellipse 900px 600px at 20% 15%, rgba(46,100,46,.45), transparent 60%),
      linear-gradient(160deg, var(--bg1), var(--bg2) 55%, var(--bg3));
  }

  #mgTopBar{
    flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:5px;
    padding:4px 8px; background:linear-gradient(180deg,#7a4a18,#5a3210); border-bottom:2px solid #c8903c;
  }
  #mgTopBar .mgTitle{ font-family:"Playfair Display",Georgia,serif; font-weight:900; font-size:12px; color:var(--wood2); white-space:nowrap; }
  #mgTopBar .mgStatus{ display:flex; align-items:center; gap:4px; flex:1; justify-content:center; flex-wrap:wrap; min-width:0; }
  #mgTopBar .mgPill{ display:flex; align-items:center; gap:3px; font-size:9px; color:var(--muted); font-family:"Playfair Display",Georgia,serif; white-space:nowrap; }
  #mgTopBar .mgPill .dot{ width:6px; height:6px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.08) inset; }
  #mgTopBar .mgActions{ display:flex; gap:4px; flex-shrink:0; }
  #mgTopBar .mgIconBtn{
    cursor:pointer; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
    border-radius:7px; padding:4px 7px; font-size:13px; color:var(--ivory); user-select:none; line-height:1;
  }

  #mgInfoPanel{
    flex-shrink:0; overflow:hidden; max-height:0; transition:max-height .3s ease;
    background:rgba(10,20,10,.92); border-bottom:1px solid rgba(200,144,60,.25);
  }
  #mgInfoPanel.open{ max-height:110px; }
  #mgInfoPanel .mgInfoInner{ padding:7px 10px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
  #mgInfoPanel .mgInfoInner .pill{ font-size:10px; padding:4px 8px; }
  #mgInfoPanel .mgInfoInner .mgLeave{
    cursor:pointer; padding:5px 10px; border-radius:8px; font-size:11px;
    font-family:"Playfair Display",serif; font-weight:700; color:var(--ivory);
    background:linear-gradient(180deg,#8b1a1a,#4a0808);
    border-top:1px solid #c04040; border-left:1px solid #a03030;
    border-right:1px solid #400808; border-bottom:2px solid #2a0404;
    margin-left:auto; user-select:none;
  }

  #mgBoard{
    flex:2; overflow-y:auto; padding:6px;
    display:flex; flex-direction:column; gap:5px; min-height:0;
  }
  #mgBoard .board{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
  #mgBoard .measure{ min-height:0; padding:6px; gap:4px; border-radius:8px; border-width:1px; }
  #mgBoard .mTop{ gap:3px; }
  #mgBoard .mTop .mTitle{ font-size:10px; }
  #mgBoard .mTop .mChord{ font-size:9px; }
  #mgBoard .slots{ gap:3px; }
  #mgBoard .slot{ aspect-ratio:1; min-height:0; padding:2px 1px; font-size:9px; border-radius:4px; }
  #mgBoard .slot.filled{ font-size:clamp(7px,2vw,11px); padding:2px 1px; line-height:1.1; }
  #mgBoard .hint{ font-size:9px; }

  #mgTurnInfo{
    flex-shrink:0; font-size:10px; color:var(--muted); padding:3px 10px; text-align:center;
    background:rgba(0,0,0,.30); border-top:1px solid rgba(255,255,255,.06);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  #mgPlayers{
    flex-shrink:0; display:flex; gap:6px; padding:6px 8px; overflow-x:auto;
    background:rgba(0,0,0,.20); border-bottom:1px solid rgba(255,255,255,.07); scrollbar-width:none;
    align-items:stretch;
  }
  #mgPlayers::-webkit-scrollbar{ display:none; }
  #mgPlayers .mgPRow{
    flex-shrink:0; display:flex; flex-direction:column; align-items:center;
    padding:6px 14px; border-radius:10px; border:1px solid rgba(74,110,48,.6);
    background:rgba(15,40,15,.50); min-width:80px;
  }
  #mgPlayers .mgPRow.me{ border-color:var(--wood); }
  #mgPlayers .mgPRow.turn{ border-color:#7aaa7a; }
  #mgPlayers .mgPRow .mgPName{ font-weight:700; font-size:40px; font-family:"Playfair Display",serif; white-space:nowrap; line-height:1.1; }
  #mgPlayers .mgPRow .mgPScore{ color:var(--muted); font-size:36px; font-weight:700; line-height:1.1; }

  #mgDeckZone{
    flex-shrink:0; background:linear-gradient(180deg,rgba(10,25,10,.94),rgba(5,15,5,.98));
    border-top:2px solid #c8903c; padding:7px 8px;
  }
  #mgDeckZone .mgDeckHeader{ display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; gap:6px; }
  #mgDeckZone .mgDeckTitle{ font-size:10px; font-family:"Playfair Display",serif; color:var(--muted); }
  #mgDeckZone .mgTimer{ font-family:"Fredoka",sans-serif; font-size:18px; font-weight:900; min-width:34px; text-align:center; }
  #mgDeckZone .deck{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
  #mgDeckZone .cardNote{ width:62px; height:62px; font-size:18px; }
  #mgDeckZone .cardNote::after{ font-size:8px; bottom:3px; right:4px; }
  #mgDeckZone .mgBtns{ display:flex; gap:6px; margin-top:6px; justify-content:center; }
  #mgDeckZone .mgBtns button{ flex:1; max-width:180px; padding:8px 10px; font-size:12px; border-radius:10px; }

  #mgLogPanel{
    flex-shrink:0; overflow:hidden; max-height:0; transition:max-height .3s ease;
    background:rgba(5,15,5,.95); border-top:1px solid rgba(200,144,60,.20);
  }
  #mgLogPanel.open{ max-height:140px; }
  #mgLogPanel .log{ max-height:140px; padding:8px 10px; }

  /* Overlay “tourner le téléphone” */

.fxSpark{
  position:absolute;
  left:0; top:0;
  width: 18px; height: 18px;
  transform: translate(-50%,-50%);
  opacity: 0;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.22));
  animation: fxBurst var(--dur,520ms) ease-out forwards;
}
.fxSpark::after{
  content: "✨";
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size: 16px;
  transform: rotate(var(--rot,0deg));
}

/* Pop sur les éléments cliqués */
.funPop{ /* désactivé */ }

/* Burst (particules) */
@keyframes fxBurst{
  0%{
    opacity: 1;
    transform: translate(-50%,-50%) scale(.85);
  }
  100%{
    opacity: 0;
    transform:
      translate(
        calc(-50% + (var(--dx,0) * 1px)),
        calc(-50% + (var(--dy,0) * 1px))
      )
      scale(1.25);
  }
}

/* ✅ Smartphone : on garde le “pop”, mais on coupe les particules */
body.mobile .fxLayer{ display:none; }
body.mobile .funPop{ /* désactivé */ }

/* ✅ Respect “réduire les animations” */
@media (prefers-reduced-motion: reduce){
  .fxLayer{ display:none !important; }
  .funPop{ animation: none !important; }
}

/* =====================================================
   PORTRAIT — adaptations spécifiques
   ===================================================== */

/* Écrans de connexion : OK en portrait par défaut */

/* En jeu — portrait : plateau 2×2, deck plus grand */
@media (orientation: portrait) {
  /* Plateau : 2 colonnes au lieu de 4 */
  #mgBoard .board {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  /* Mesures un peu plus hautes en portrait */
  #mgBoard .measure {
    padding: 8px;
    gap: 5px;
  }
  #mgBoard .mTop .mTitle { font-size: 11px; }
  #mgBoard .mTop .mChord { font-size: 10px; }
  #mgBoard .slot { aspect-ratio: 1; min-height: 0; font-size: 10px; }
  #mgBoard .slot.filled { font-size: clamp(8px, 4vw, 14px); }
  #mgBoard .hint { font-size: 10px; }

  /* Tuiles deck plus grandes en portrait (plus de place en largeur) */
  #mgDeckZone .cardNote { width: 72px; height: 72px; font-size: 22px; }
  #mgDeckZone .cardNote::after { font-size: 9px; }

  /* Barre du haut : réduire les pills pour gagner de la place */
  #mgTopBar .mgStatus { gap: 3px; }
  #mgTopBar .mgPill { font-size: 8px; gap: 2px; }

  /* Joueurs : un peu plus compacts */
  #mgPlayers .mgPRow { min-width: 80px; padding: 6px 12px; }
}