/* Combat UI CURRENT — HUD compact et formation lisible */

.battle-strip{
  min-height:230px;
  padding-top:42px;
  padding-bottom:24px;
  gap:24px;
}

.battle-hero{
  width:290px !important;
}

.party-formation{
  position:relative;
  width:235px;
  height:220px;
  margin:0 auto;
}

.party-slot{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-width:58px;
}

/* Héros principal : toujours le point focal */
.party-slot-front{
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
}
.party-slot-front .battle-icon{
  width:84px !important;
  height:84px !important;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.55));
}

/* Ligne intermédiaire */
.party-slot-left-top{
  left:78px;
  top:6px;
  z-index:4;
}
.party-slot-left-bottom{
  left:78px;
  bottom:6px;
  z-index:4;
}

/* Arrière-garde */
.party-slot-left-top2{
  left:4px;
  top:32px;
  z-index:3;
}
.party-slot-left-bottom2{
  left:4px;
  bottom:32px;
  z-index:3;
}

.party-slot-left-top .battle-icon,
.party-slot-left-bottom .battle-icon,
.party-slot-left-top2 .battle-icon,
.party-slot-left-bottom2 .battle-icon{
  width:58px !important;
  height:58px !important;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.48));
}

/* Tous les compagnons restent identifiables */
.party-slot .battle-label-mini{
  display:block !important;
  max-width:74px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:1px 5px;
  font-size:10px;
  line-height:1.15;
  background:rgba(8,7,10,.70);
}

/* L'arrière-garde (Guerrier/Soigneuse) garde une PV bar mais pas d'étiquette
   texte : la formation n'a pas la hauteur pour empiler icône + nom + PV sur
   les deux rangées sans qu'elles ne se chevauchent verticalement. */
.party-slot-left-top2 .battle-label-mini,
.party-slot-left-bottom2 .battle-label-mini{
  display:none !important;
}

.party-slot .hp-bar-mini{
  width:52px !important;
  height:5px;
  margin-top:1px;
}

/* Évite l'effet "personnages flottants" */
.battle-hero > .battle-label{
  margin-top:-3px;
}
.battle-hero > .hp-bar{
  max-width:185px;
  height:8px;
}

/* Barre de compétences = HUD de jeu, pas boutons de formulaire */
.battle-skill-bar{display:flex;gap:8px;justify-content:center;align-items:stretch;flex-wrap:wrap;margin:10px 0 6px}
.battle-skill-btn{position:relative;min-width:92px;min-height:54px;padding:6px 8px;border:1px solid rgba(220,185,90,.55);border-radius:10px;background:rgba(18,15,26,.9);color:var(--text);font:600 12px/1.15 'IBM Plex Mono',monospace;overflow:hidden}
.battle-skill-btn:not(:disabled):active{transform:translateY(1px)}
.battle-skill-btn:disabled{opacity:.45;filter:saturate(.6)}
.battle-skill-cd{position:absolute;inset:auto 0 0;height:4px;background:linear-gradient(90deg,#7c4bd4,#dcb95a);transform-origin:left center}
.battle-skill-time{display:block;margin-top:3px;font-size:10px;opacity:.75}
@media (min-width:700px){.battle-skill-btn{min-width:110px}}

.monster-slot{
  cursor:pointer;
  touch-action:manipulation;
}
.monster-slot.targeted{
  filter:drop-shadow(0 0 8px rgba(240,208,96,.95));
}
.monster-slot.targeted::after{
  content:'🎯';
  position:absolute;
  right:-2px;
  top:-12px;
  font-size:16px;
  pointer-events:none;
}
.battle-actor-ko{
  filter:grayscale(1);
  opacity:.45;
}
.battle-status-shield::before{
  content:'🛡️';
  position:absolute;
  left:50%;
  top:-14px;
  transform:translateX(-50%);
  font-size:14px;
}

@media(max-width:900px){
  .battle-strip{
    min-height:205px;
    padding:38px 8px 18px;
    gap:10px;
  }
  .battle-hero{
    width:190px !important;
  }
  .party-formation{
    width:165px;
    height:145px;
  }
  .party-slot-front .battle-icon{
    width:68px !important;
    height:68px !important;
  }
  .party-slot-left-top,
  .party-slot-left-bottom{
    left:55px;
  }
  .party-slot-left-top{
    top:2px;
  }
  .party-slot-left-bottom{
    bottom:2px;
  }
  .party-slot-left-top2,
  .party-slot-left-bottom2{
    left:0;
  }
  .party-slot-left-top2{
    top:14px;
  }
  .party-slot-left-bottom2{
    bottom:14px;
  }
  .party-slot-left-top .battle-icon,
  .party-slot-left-bottom .battle-icon,
  .party-slot-left-top2 .battle-icon,
  .party-slot-left-bottom2 .battle-icon{
    width:46px !important;
    height:46px !important;
  }
  .party-slot .battle-label-mini{
    max-width:58px;
    font-size:9px;
  }
  .party-slot .hp-bar-mini{
    width:43px !important;
  }
}

@media(max-width:560px){
  .battle-strip{
    flex-wrap:nowrap;
    align-items:center;
    justify-content:space-between;
    min-height:190px;
    padding:42px 5px 14px;
  }
  .battle-side,
  .battle-hero,
  .battle-monster-group{
    width:46% !important;
  }
  .party-formation{
    width:145px;
    height:135px;
  }
  .party-slot-front .battle-icon{
    width:62px !important;
    height:62px !important;
  }
  .party-slot-left-top,
  .party-slot-left-bottom{
    left:48px;
  }
  .party-slot-left-top2,
  .party-slot-left-bottom2{
    left:0;
  }
  .party-slot-left-top2{
    top:10px;
  }
  .party-slot-left-bottom2{
    bottom:10px;
  }
  .party-slot-left-top .battle-icon,
  .party-slot-left-bottom .battle-icon,
  .party-slot-left-top2 .battle-icon,
  .party-slot-left-bottom2 .battle-icon{
    width:40px !important;
    height:40px !important;
  }
  .party-slot .battle-label-mini{
    display:none !important;
  }
  .battle-vfx{
    width:auto;
    order:initial;
    font-size:18px;
  }
  .battle-skill-bar{
    gap:8px;
  }
  .battle-skill-btn{
    min-width:78px;
    min-height:48px;
    padding:5px 6px;
    font-size:11px;
  }
}