/* ===================================================
   KURO ARCANA — Table de combat « Duel » (après combat-table.css et combat-lisible.css)
   Habillage seul, mêmes éléments et mêmes actions : cartes actives en bannières (illustration recadrée,
   nom, barre de vie, jauge Kuro), banc en médaillons, portraits en biseau, KO en barres, énergie en cristaux,
   attaques en cartes de compétence (coût en gemme), « Fin du tour » hexagonal. Le zoom montre toujours la carte entière.
   =================================================== */

.cl-table {
  --cd-or: var(--or-dore, #ffd700);
  --cd-rouge: var(--rouge-crimson, #dc143c);
  background: linear-gradient(180deg, #2a0710 0%, #0b0610 36%, #0b0610 64%, #1b0a2e 100%);
}

/* ---------- Bandeau du haut ---------- */
.cl-table .cl-instruction {
  border: 0; border-radius: 0; background: linear-gradient(90deg, transparent, rgba(75, 0, 130, 0.75) 20%, rgba(75, 0, 130, 0.75) 80%, transparent);
  text-transform: none; letter-spacing: 0.01em;
}
.cl-table .cl-instruction-fort { background: linear-gradient(90deg, transparent, rgba(139, 0, 0, 0.85) 20%, rgba(139, 0, 0, 0.85) 80%, transparent); color: #fff; box-shadow: none; }

/* ---------- Joueurs : portrait en biseau, KO en barres ---------- */
.cl-table .cb-avatar {
  width: 46px; height: 44px; border: 0; border-radius: 0;
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
  background: linear-gradient(135deg, var(--violet-orchidee, #9932cc), var(--violet-profond, #4b0082));
}
.cl-table .cb-avatar-adversaire { background: linear-gradient(135deg, var(--cd-rouge), var(--rouge-sang, #8b0000)); }
.cl-table .cb-pseudo { font-family: 'Cinzel', serif; font-weight: 900; }
.cl-table .cb-ko-pastilles { gap: 4px; }
.cl-table .cb-ko-pastilles i { width: 16px; height: 8px; border-radius: 1px; border: 0; transform: skewX(-20deg); background: #2b1f38; }
.cl-table .cb-ko-pastilles i.cb-plein { background: var(--cd-rouge); box-shadow: 0 0 6px var(--cd-rouge); }

/* ---------- Cartes actives : bannières ---------- */
.cl-table .cb-rangee-actif { gap: 10px; }
.cl-table .cb-actif { width: calc(50% - 5px); max-width: 300px; height: calc(var(--cb-h-actif) * 0.82); }
.cl-table .cb-vide.cb-actif { border-radius: 12px; }
.cl-jeton-actif { border-radius: 12px; }
.cl-jeton-actif .cl-jeton-art img { transform: none; object-position: 50% 22%; }
.cl-jeton-actif::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 30%, rgba(5, 3, 8, 0.96) 78%);
}
.cl-jeton-actif .cl-jeton-nom {
  z-index: 1; left: 8px; right: 70px; bottom: 22px; padding: 0; background: none; text-align: left;
  font-family: 'Cinzel', serif; font-size: 16px; font-weight: 900;
}
.cl-jeton-actif .cl-jeton-pv { z-index: 1; top: auto; right: 6px; bottom: 20px; }
.cl-jeton-actif .cl-jeton-pv b { padding: 0; background: none; font-size: 20px; }
.cl-jeton-actif .cl-jeton-barre {
  z-index: 1; left: 8px; right: 8px; bottom: 9px; height: 9px; background: #2b1f38; transform: skewX(-20deg);
}
.cl-jeton-actif .cl-jeton-barre i { background: linear-gradient(90deg, #f7d23e, #3ddc84); }
.cl-jeton-actif .cl-jeton-barre.cl-pv-moyen i { background: linear-gradient(90deg, #ff9d2e, #f7d23e); }
.cl-jeton-actif .cl-jeton-barre.cl-pv-bas i { background: linear-gradient(90deg, var(--rouge-sang, #8b0000), #ff4d4d); }
.cl-jeton-actif .cl-jeton-effets { z-index: 1; flex-direction: row; flex-wrap: wrap; right: 70px; }
/* Jauge Kuro : fine barre dorée tout en bas de la bannière */
.cl-table .cb-actif .cb-jauge { top: auto; bottom: 2px; left: 8px; right: 8px; height: 4px; border-radius: 2px; z-index: 2; }
.cl-table .cb-actif .cb-jauge i { background: var(--cd-or); }
.cl-table .cb-jauge-pleine i { box-shadow: 0 0 8px var(--cd-or); }

/* ---------- Banc : médaillons ---------- */
.cl-table .cb-banc { width: var(--cb-h-banc); height: var(--cb-h-banc); border-radius: 50%; }
.cl-table .cb-vide.cb-banc, .cl-table .cb-banc::before, .cl-table .cb-banc::after { border-radius: 50%; }
.cl-table .cb-actif::before, .cl-table .cb-actif::after { border-radius: 14px; }
.cl-jeton-banc { border-radius: 50%; }
.cl-jeton-banc .cl-jeton-art img { transform: none; object-position: 50% 18%; }
.cl-jeton-banc .cl-jeton-nom { display: none; }
.cl-jeton-banc .cl-jeton-pv { top: auto; bottom: 2px; left: 0; right: 0; text-align: center; }
.cl-jeton-banc .cl-jeton-pv b { display: inline-block; font-size: 16px; padding: 0 5px; border-radius: 8px; }
.cl-jeton-banc .cl-jeton-barre { display: none; }
.cl-jeton-banc .cl-jeton-effets { top: 0; bottom: auto; left: 50%; transform: translateX(-50%); }
.cl-table .cb-banc .cb-jauge { left: 20%; right: 20%; top: 1px; }

/* ---------- Centre : tour et énergie en cristaux ---------- */
.cl-table .cb-tour { font-family: 'Cinzel', serif; font-weight: 900; border-color: var(--or-pale, #daa520); }
.cl-table .cb-energie { gap: 4px; }
.cl-table .cb-energie-pastilles { gap: 3px; }
.cl-table .cb-energie-pastilles i {
  width: 12px; height: 16px; border: 0; border-radius: 0; transform: none; background: #2b1f38;
  clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%);
}
.cl-table .cb-energie-pastilles i.cb-plein { background: linear-gradient(180deg, #fff6b0, var(--cd-or), var(--or-pale, #daa520)); box-shadow: none; }

/* ---------- Attaques : cartes de compétence ---------- */
.cl-table .cl-attaque { border-top: 2px solid var(--or-pale, #daa520); border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #24123a, #120a1d); }
.cl-attaque .cb-attaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; padding-top: 10px; overflow: visible; }
.cl-attaque .cb-attaques > li { min-width: 0; }
.cl-attaque .cb-attaque-bouton[class*="cl-t-"] {
  position: relative; width: 100%; height: 100%; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  padding: 10px 8px 8px; text-align: left; border-radius: 12px; box-shadow: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cl-c) 32%, #120a1c), #120a1c 72%);
}
.cl-attaque .cb-attaque-tete { display: block; }
.cl-attaque .cb-attaque-nom { display: block; padding-right: 22px; font-size: 16px; line-height: 1.15; }
.cl-attaque .cl-cout {
  position: absolute; top: -10px; right: -4px; min-width: 34px; height: 30px; padding: 0 4px; border-radius: 0;
  display: grid; place-items: center; font-size: 16px; color: #120a1c;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(180deg, #fff6b0, var(--or-pale, #daa520));
}
.cl-attaque .cb-attaque-effet { font-size: 16px; line-height: 1.2; color: var(--cl-c); font-weight: 700; }
.cl-attaque .cl-t-dot .cb-attaque-effet { color: #ff6b78; }
.cl-attaque .cl-t-reduction .cb-attaque-effet { color: #c4c8d2; }
.cl-attaque .cb-ultime-bouton { box-shadow: 0 0 18px -4px var(--cd-or); }

/* ---------- Commandes : « Fin du tour » hexagonal ---------- */
.cl-table .cb-actions .cb-fin-tour {
  flex: 1; border: 0; border-radius: 0; font-size: 16px; line-height: 1.1;
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  background: linear-gradient(180deg, #ff5070, var(--cd-rouge), var(--rouge-sang, #8b0000));
}
.cl-table .cb-actions .cb-fin-tour:disabled { background: linear-gradient(180deg, #4a3560, #241532); }

@media (max-width: 768px) {
  .cl-table .cb-actif { height: calc(var(--cb-h-actif) * 0.78); }
  .cl-table .cb-actions .cb-bouton:not(.cb-fin-tour) { padding: 0 8px; }
}
@media (min-width: 1024px) {
  .cl-table .cl-ressources { display: none; }
  .cl-table .cb-rangee-actif { gap: 16px; }
  .cl-table .cb-actif { width: min(300px, calc(50% - 8px)); height: calc(var(--cb-h-actif) * 0.9); }
  .cl-attaque .cb-attaques { grid-template-columns: 1fr; }
  .cl-attaque .cb-attaque-bouton[class*="cl-t-"] { min-height: 76px; }
  .cl-table .cb-actions .cb-fin-tour { min-height: 64px; font-size: 20px; }
}