/* v2.9.1 — barre d'actions du combat (chargée en dernier). Tout est sous « .ab.ac ».
   Principe : une colonne, quatre bandes qui ne se chevauchent jamais :
   énergie + fiche / (message) / attaques / actions. Rien n'est en position absolue. */
.bt .ab.ac{
  width:100%;max-width:640px;min-height:0;margin:14px auto 0;padding:10px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:8px;
  background:linear-gradient(#06180ee0,#04120ae6);border:1px solid var(--ln);border-radius:20px;
  box-shadow:0 12px 36px -14px #000;backdrop-filter:blur(14px);box-sizing:border-box;
}
.bt .ab.ac.idle{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:4px 0;min-height:0}

/* --- bande 1 : énergie à gauche, fiche à droite --- */
.ac-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ac-en{display:flex;align-items:center;gap:10px;min-width:0}
.ac-en b{font-size:1rem;font-weight:900;color:#facc15;white-space:nowrap}
.ac-en b span{font-size:.78rem;opacity:.65;font-weight:800}
.ac-pips{display:flex;gap:4px}
.ac-pips i{width:16px;height:8px;border-radius:3px;background:#ffffff1f;transform:skewX(-14deg)}
.ac-pips i.on{background:#facc15;box-shadow:0 0 8px #facc1599}
.ac-info{flex:none;padding:6px 12px;border-radius:99px;border:1px solid var(--ln);background:var(--pn);color:var(--tx);font:700 .78rem/1 inherit;font-family:inherit;cursor:pointer;transition:.15s}
.ac-info:hover{background:#ffffff1f}

/* --- bande 2 : message (seulement si utile) --- */
.ac-hint{text-align:center;font-size:.8rem;line-height:1.3;color:var(--mu)}
.ac-hint b{color:var(--tx)}

/* --- bande 3 : une tuile par attaque --- */
.ac-atks{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.ac-tile{display:flex;min-width:0;min-height:58px;border-radius:14px;overflow:hidden;background:var(--pn);border:1px solid var(--ln);transition:border-color .15s,background .15s,box-shadow .15s}
.ac-tile.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 16%,var(--pn));box-shadow:0 0 0 1px var(--ac),0 0 16px #c6ff3d44}
.ac-atk{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 6px;border:0;background:none;color:var(--tx);font:inherit;text-align:center;cursor:pointer}
.ac-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;font-size:.78rem;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.ac-c{padding:1px 8px;border-radius:99px;background:#facc15;color:#1b1500;font-size:.7rem;font-weight:900;white-space:nowrap}
.ac-c.no{background:#ef444455;color:#ffb4b4}
.ac-atk:disabled{cursor:not-allowed;opacity:.45}
.ac-tile.off{background:#ffffff08}
.ac-q{flex:none;width:30px;border:0;border-left:1px solid var(--ln);background:#ffffff0a;color:var(--mu);font:900 .85rem/1 inherit;font-family:inherit;cursor:pointer;transition:.15s}
.ac-q:hover{background:#ffffff1c;color:var(--ac)}
.ac-tile.on .ac-q{border-left-color:#c6ff3d55}

/* --- bande 4 : actions --- */
.ac-foot{display:flex;align-items:stretch;gap:8px}
.ac-foot button{border-radius:99px;font:800 .88rem/1 inherit;font-family:inherit;padding:12px 16px;cursor:pointer;transition:.15s;white-space:nowrap}
.ac-foot button:active{transform:scale(.97)}
.ac-undo,.ac-rest{background:#ffffff0d;color:var(--tx);border:1px solid #ffffff3a}
.ac-undo:hover,.ac-rest:hover{background:#ffffff1c}
.ac-rest small{margin-left:4px;color:#facc15;font-weight:800}
.ac-go{flex:1 1 auto;min-width:0;background:var(--ac);color:#06180d;border:0;box-shadow:0 6px 22px -8px var(--gl)}
.ac-go:disabled{opacity:.35;filter:grayscale(.5);cursor:not-allowed;box-shadow:none}
.ac-go.rdy{animation:acgo 1.2s ease-in-out infinite}
@keyframes acgo{50%{box-shadow:0 0 0 4px #c6ff3d40,0 0 22px #c6ff3d80}}
.ac-foot:not(:has(.ac-go)) .ac-rest{flex:1}
.ac button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* --- hauteur réservée à la barre (hors paysage téléphone, qui a son propre calcul) ---
   Avant : 276-340 px réservés, prévus pour l'ancienne barre → le bas était coupé (.bt a overflow:hidden).
   Maintenant : la barre fait 150-230 px selon le message ; les cartes se calent sur 372 px réservés,
   et si l'écran est vraiment trop petit le combat défile au lieu de couper. */
@media (orientation:portrait),(min-height:561px){
  .bt.fg{--cwb:min(27vw,calc((100dvh - 372px)/5.8),150px);--cw:var(--cwb);overflow-y:auto;overflow-x:hidden}
}

/* --- bouton d'emotes : sorti de la zone d'attaque (il était fixé en bas à gauche, par-dessus la barre) ---
   Il passe en haut à gauche, sous l'en-tête, dans la marge libre à côté de la file d'initiative.
   Le paysage téléphone le place déjà en haut au centre (css/rewards-pack-opening.css). */
@media (orientation:portrait),(min-height:561px){
  #v2emo{bottom:auto;top:calc(52px + env(safe-area-inset-top,0px));left:10px}
  .v2-eb{width:38px;height:38px;font-size:1.1rem}
}

/* --- téléphone en portrait : on serre un peu --- */
@media (max-width:520px){
  .bt .ab.ac{margin-top:8px;padding:7px;gap:5px;border-radius:16px}
  .ac-top{min-height:30px}
  .ac-info{padding:5px 10px;font-size:.74rem}
  .ac-hint{font-size:.74rem;line-height:1.2}
  .ac-atks{gap:5px}
  .ac-tile{min-height:46px}
  .ac-atk{padding:5px 4px;gap:3px}
  .ac-n{font-size:.7rem;line-height:1.1}
  .ac-c{font-size:.66rem;padding:0 7px}
  .ac-q{width:24px}
  .ac-pips i{width:12px;height:7px}
  .ac-foot{gap:5px}
  .ac-foot button{padding:9px 12px;font-size:.8rem}
  .ac-rest small{display:none}
}

/* --- téléphone en paysage : panneau à droite, attaques empilées --- */
@media (orientation:landscape) and (max-height:560px){
  .bt.fg>.ab.ac{margin:0;padding:6px;gap:5px;max-width:none;overflow-y:auto;justify-content:flex-start;border-radius:14px}
  .bt.fg>.ab.ac .ac-atks{grid-auto-flow:row;grid-auto-columns:auto;gap:4px}
  .bt.fg>.ab.ac .ac-tile{min-height:38px}
  .bt.fg>.ab.ac .ac-atk{flex-direction:row;justify-content:space-between;padding:4px 8px;gap:6px}
  .bt.fg>.ab.ac .ac-n{-webkit-line-clamp:1;text-align:left}
  .bt.fg>.ab.ac .ac-foot{flex-wrap:wrap}
  .bt.fg>.ab.ac .ac-go{flex:1 0 100%;order:-1}
  .bt.fg>.ab.ac .ac-foot button{padding:8px 10px}
  .bt.fg>.ab.ac .ac-pips i{width:9px;height:6px}
}

@media (prefers-reduced-motion:reduce){.ac-go.rdy{animation:none}}