/* ===================================================
   KURO ARCANA — Combat lisible (classes .cl-*) : jetons, zoom, panneau d'attaque, instruction et guidage,
   aide en fiches, tutoriel (projecteur, flèche, bulle), grand écran.
   Couleurs des effets = celles imprimées sur les cartes. Animations : transform et opacity, coupées en mouvement réduit.
   =================================================== */

.cl-table {
  --cl-rouge: #d7263d;
  --cl-vert: #2fae5a;
  --cl-gris: #8a8f9c;
  --cl-orange: #f08c1e;
  --cl-bleu: #2f6fe0;
  --cl-rose: #e24c9a;
  --cl-dot: #7d0f1e;
  --cl-or: #ffd700;
}
.cl-t-degats { --cl-c: var(--cl-rouge, #d7263d); }
.cl-t-soin { --cl-c: var(--cl-vert, #2fae5a); }
.cl-t-reduction { --cl-c: var(--cl-gris, #8a8f9c); }
.cl-t-esquive { --cl-c: var(--cl-orange, #f08c1e); }
.cl-t-controle { --cl-c: var(--cl-bleu, #2f6fe0); }
.cl-t-bonus { --cl-c: var(--cl-rose, #e24c9a); }
.cl-t-dot { --cl-c: var(--cl-dot, #7d0f1e); }
.cl-t-ultime { --cl-c: var(--cl-or, #ffd700); }

/* ---------- Instruction (haut) ---------- */
.cl-instruction-ligne { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; }
.cl-instruction {
  flex: 1; margin: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 4px 12px;
  font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; color: #fff;
  border-radius: 12px; border: 1px solid rgba(255, 215, 0, 0.35); background: rgba(20, 8, 24, 0.85);
}
.cl-instruction-fort { border-color: var(--cl-or); color: var(--cl-or); box-shadow: 0 0 14px rgba(255, 215, 0, 0.35); }
.cl-aide-bouton { flex: none; width: 44px; padding: 0; font-size: 20px; }

/* ---------- Jetons ---------- */
.cl-jeton {
  position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 10px;
  border: 2px solid var(--cl-rarete); background: #140812;
  box-shadow: 0 0 10px color-mix(in srgb, var(--cl-rarete) 50%, transparent), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  transition: filter var(--cb-duree, 240ms) ease;
}
.cl-jeton-art { position: absolute; inset: 0; }
.cl-jeton-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.5); transform-origin: 50% 27%; }
.cl-jeton-initiales {
  display: grid; place-items: center; height: 100%; font-size: 26px; font-weight: 900; color: var(--cl-rarete);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--cl-rarete) 30%, #1a0820), #0c050c 78%);
}
.cl-jeton-nom {
  position: absolute; left: 0; right: 0; bottom: 6px; padding: 14px 4px 3px; font-size: 14px; font-weight: 800; line-height: 1.1;
  text-align: center; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000;
  background: linear-gradient(transparent, rgba(5, 2, 6, 0.92) 50%);
}
.cl-jeton-pv { position: absolute; top: 7px; right: 4px; }
.cl-jeton-pv b {
  display: block; padding: 1px 6px; border-radius: 8px; font-size: 24px; font-weight: 900; line-height: 1.1; color: #fff;
  background: rgba(5, 2, 6, 0.8); text-shadow: 0 1px 2px #000;
}
.cl-jeton-pv.cl-pv-moyen b { color: #ffc46b; }
.cl-jeton-pv.cl-pv-bas b { color: #ff6b78; }
/* Barre de vie : tout le bas du jeton */
.cl-jeton-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255, 255, 255, 0.15); }
.cl-jeton-barre i { display: block; height: 100%; background: #3ddc6a; transform-origin: left center; transition: transform var(--cb-duree, 240ms) ease; }
.cl-jeton-barre.cl-pv-moyen i { background: #ff9d2e; }
.cl-jeton-barre.cl-pv-bas i { background: #ff3a4a; }
.cl-jeton-effets { position: absolute; top: 7px; left: 4px; display: flex; flex-direction: column; gap: 3px; }
.cl-effet {
  display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 5px; border-radius: 11px;
  font-size: 14px; line-height: 1; color: #fff; box-shadow: 0 1px 3px #000;
}
.cl-effet b { font-size: 14px; font-weight: 900; }
.cl-f-degats { background: var(--cl-rouge, #d7263d); }
.cl-f-soin { background: var(--cl-vert, #2fae5a); }
.cl-f-reduction { background: var(--cl-gris, #8a8f9c); }
.cl-f-esquive { background: var(--cl-orange, #f08c1e); }
.cl-f-controle { background: var(--cl-bleu, #2f6fe0); }
.cl-f-bonus { background: var(--cl-rose, #e24c9a); }
.cl-f-dot { background: var(--cl-dot, #7d0f1e); }

/* Jauge Kuro : fine barre violette en haut du jeton */
.cl-table .cb-jauge { left: 2px; right: 2px; top: 2px; bottom: auto; height: 4px; border-radius: 3px; z-index: 1; }
.cl-table .cb-banc .cb-jauge { bottom: auto; height: 3px; }
.cl-table .cb-ultime-pret { z-index: 2; }
.cl-table .cb-apercu { z-index: 3; font-size: 16px; top: 38%; }

/* Tailles : actifs en portrait, banc en paysage, main en portrait */
.cl-table .cb-actif { width: calc(var(--cb-h-actif) * 0.8); }
.cl-table .cb-banc { width: calc(var(--cb-h-banc) * 1.25); }
.cl-table .cb-main-carte { position: relative; width: calc(var(--cb-h-main) * 0.8); transform: none; border-radius: 10px; }
.cl-table .cb-main { gap: 6px; }
.cl-jeton-banc .cl-jeton-pv b, .cl-jeton-main .cl-jeton-pv b { font-size: 16px; padding: 0 4px; }
.cl-jeton-banc .cl-jeton-pv { top: 6px; }
.cl-jeton-banc .cl-jeton-nom, .cl-jeton-main .cl-jeton-nom { padding-top: 8px; }
.cl-jeton-banc .cl-jeton-effets { flex-direction: row; top: auto; bottom: 26px; }
.cl-jeton-banc .cl-effet { height: 18px; }

/* ---------- Guidage : ce qui peut jouer brille, le reste est assombri ---------- */
.cl-jouable::after { opacity: 1; box-shadow: 0 0 0 2px var(--cl-or, #ffd700), 0 0 16px rgba(255, 215, 0, 0.75); animation: cl-respire calc(1.4s / var(--cb-vitesse, 1)) ease-in-out infinite alternate; }
.cb-main-carte.cl-jouable .cl-jeton { box-shadow: 0 0 0 2px var(--cl-or, #ffd700), 0 0 14px rgba(255, 215, 0, 0.7); }
@keyframes cl-respire { from { opacity: 0.45; } to { opacity: 1; } }
.cl-sombre .cl-jeton, .cb-a-attaque .cl-jeton { filter: brightness(0.5) saturate(0.6); }
.cl-table .cb-a-attaque .cc-carte { opacity: 1; }
.cl-energie-texte { font-size: 18px; font-weight: 900; color: var(--cl-or, #ffd700); white-space: nowrap; }
.cl-table .cb-energie > b:not(.cl-energie-texte) { display: none; }
.cl-ressources { display: none; }

/* ---------- Panneau d'attaque (bas de l'écran sur mobile) ---------- */
.cl-cote { display: contents; }
.cl-cote > * { position: relative; z-index: 1; }
.cl-table .cl-attaque {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; max-height: 62%; max-width: none; margin: 0;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); opacity: 1; transform: none;
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.7);
}
.cl-attaque-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cl-attaque-tete .cb-panneau-nom { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-attaque-pv { font-size: 16px; font-weight: 700; white-space: nowrap; }
.cl-attaque .cb-panneau-fermer { width: 44px; flex: none; padding: 0; font-size: 18px; }
.cl-attaque .cb-attaques { margin: 0; gap: 8px; }
.cb-attaque-bouton[class*="cl-t-"] {
  min-height: 64px; border: 2px solid var(--cl-c); border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cl-c) 40%, #1a0820), #1a0820 75%);
  box-shadow: inset 7px 0 0 var(--cl-c); padding: 8px 12px 8px 18px;
}
.cb-attaque-bouton[class*="cl-t-"] .cb-attaque-nom { font-size: 17px; }
.cl-cout { flex: none; padding: 2px 8px; border-radius: 10px; font-size: 16px; font-weight: 900; color: #1a0820; background: var(--cl-or, #ffd700); }
.cb-attaque-bouton:disabled { opacity: 1; filter: grayscale(0.7) brightness(0.65); }
.cb-attaque-bouton:disabled .cb-attaque-raison { color: #ffb3bf; font-weight: 700; }

/* ---------- Zoom ---------- */
.cl-zoom {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5, 2, 8, 0.88); cursor: pointer; animation: cl-apparaitre 0.18s ease-out;
}
.cl-zoom-corps { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 760px; max-height: 100%; overflow-y: auto; color: #f3e9ff; }
.cl-zoom-carte { width: min(56vw, 34vh, 300px); flex: none; }
.cl-zoom-carte .cc-carte { width: 100%; }
.cl-zoom-infos { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 8px; }
.cl-zoom-nom { margin: 0; font-size: 22px; color: var(--or-dore, #ffd700); text-align: center; }
.cl-zoom-ligne { margin: 0; font-size: 16px; text-align: center; }
.cl-zoom-pv { font-size: 18px; }
.cl-zoom-attaques, .cl-zoom-effets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cl-zoom-attaque {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 10px 18px; border-radius: 12px; border: 2px solid var(--cl-c);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cl-c) 35%, #1a0820), #1a0820 75%); box-shadow: inset 7px 0 0 var(--cl-c);
}
.cl-zoom-attaque-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 17px; }
.cl-zoom-attaque-effet { font-size: 16px; }
.cl-zoom-effets li { font-size: 16px; padding: 6px 10px; border-radius: 10px; color: #fff; }
.cl-zoom-aide { margin: 0; font-size: 16px; text-align: center; opacity: 0.75; }
@keyframes cl-apparaitre { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

/* ---------- Aide (6 fiches) et proposition du tutoriel ---------- */
.cl-aide-fond { position: fixed; inset: 0; z-index: 41; background: rgba(0, 0, 0, 0.6); }
.cl-aide {
  position: fixed; left: 50%; top: 50%; z-index: 42; width: min(92vw, 520px); max-height: 88dvh; overflow-y: auto; translate: -50% -50%;
  display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; color: #f3e9ff;
  border: 2px solid var(--or-dore, #ffd700); background: linear-gradient(180deg, #24092e, #0d050d); box-shadow: 0 0 30px rgba(153, 50, 204, 0.5);
}
.cl-aide-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cl-aide-titre { margin: 0; font-size: 20px; color: var(--or-dore, #ffd700); }
.cl-aide-fiches { touch-action: pan-y; }
.cl-aide-fiche[aria-hidden="true"] { display: none; }
.cl-aide-fiche { animation: cl-apparaitre 0.2s ease-out; }
.cl-aide-fiche h3 { margin: 0 0 8px; font-size: 18px; color: #fff; }
.cl-aide-fiche p { margin: 0 0 8px; font-size: 16px; line-height: 1.4; }
.cl-aide-couleurs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; font-size: 16px; }
.cl-pastille { display: inline-block; min-width: 92px; margin-right: 6px; padding: 2px 8px; border-radius: 10px; font-size: 16px; font-weight: 800; text-align: center; color: #fff; background: var(--cl-c); }
.cl-pastille.cl-t-ultime { color: #1a0820; }
.cl-aide-points { display: flex; justify-content: center; gap: 8px; }
.cl-aide-points i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.cl-aide-points i.cl-actif { background: var(--or-dore, #ffd700); }
.cl-aide-nav { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; }
.cl-prop-recompense b { color: var(--or-dore, #ffd700); }
.cl-accueil-aide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- Tutoriel ---------- */
.cl-tuto { position: fixed; inset: 0; z-index: 35; pointer-events: none; }
.cl-projecteur {
  position: fixed; border-radius: 14px; border: 3px solid var(--or-dore, #ffd700);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62), 0 0 22px rgba(255, 215, 0, 0.8); animation: cl-respire 1s ease-in-out infinite alternate;
}
.cl-fleche {
  position: fixed; width: 0; height: 0; translate: -50% 0; border: 14px solid transparent; border-bottom-color: var(--or-dore, #ffd700);
  border-top-width: 0; filter: drop-shadow(0 0 6px #ffd700); animation: cl-fleche-haut 0.8s ease-in-out infinite alternate;
}
.cl-fleche-bas { translate: -50% -100%; border-bottom-color: transparent; border-top-color: var(--or-dore, #ffd700); border-top-width: 18px; border-bottom-width: 0; animation-name: cl-fleche-bas; }
@keyframes cl-fleche-haut { from { transform: translateY(6px); } to { transform: none; } }
@keyframes cl-fleche-bas { from { transform: translateY(-6px); } to { transform: none; } }
.cl-bulle {
  position: fixed; left: 12px; right: 12px; max-width: 520px; margin: 0 auto; pointer-events: auto; z-index: 1;
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; color: #f3e9ff;
  border: 2px solid var(--or-dore, #ffd700); background: linear-gradient(180deg, rgba(42, 12, 54, 0.97), rgba(13, 5, 13, 0.97));
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.7);
}
.cl-bulle-haut { top: calc(10px + env(safe-area-inset-top)); }
.cl-bulle-bas { bottom: calc(10px + env(safe-area-inset-bottom)); }
.cl-bulle-centre { top: 50%; translate: 0 -50%; }
.cl-bulle-etape { margin: 0; font-size: 14px; color: var(--or-dore, #ffd700); letter-spacing: 1px; text-transform: uppercase; }
.cl-bulle-titre { margin: 0; font-size: 19px; color: #fff; }
.cl-bulle-texte { margin: 0; font-size: 16px; line-height: 1.35; }
.cl-bulle .cl-aide-couleurs { gap: 4px; }
.cl-bulle-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.cl-tuto-attente .cl-tuto-passer { position: fixed; right: 12px; top: calc(60px + env(safe-area-inset-top)); pointer-events: auto; }

/* ---------- Grand écran : toute la largeur, panneau et journal sur les côtés ---------- */
@media (min-width: 1024px) {
  body.cb-page-active #page-combat > .header-principal, body.cb-page-active #page-combat > .menu-navigation { display: none; }
  body.cb-page-active .cb-quitter { display: inline-flex; align-items: center; justify-content: center; }
  .cb-racine[data-cb-ecran="partie"] { max-width: 1600px; }
  .cl-table {
    --cb-h-actif: clamp(130px, 21vh, 230px);
    --cb-h-banc: clamp(70px, 10vh, 110px);
    --cb-h-main: clamp(84px, 12vh, 120px);
    max-width: none; display: grid; grid-template-columns: 0 minmax(0, 1fr) minmax(300px, 380px); grid-template-rows: auto 1fr;
    column-gap: 0; row-gap: 10px; padding: 12px 16px;
  }
  .cl-table.cl-journal-ouvert { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(300px, 380px); column-gap: 14px; }
  .cl-table:not(.cl-journal-ouvert) { column-gap: 14px; grid-template-columns: 0 minmax(0, 1fr) minmax(300px, 380px); }
  .cl-instruction-ligne { grid-column: 2 / 4; grid-row: 1; }
  .cl-table > .cb-terrain { grid-column: 2; grid-row: 2; justify-content: center; }
  .cl-cote { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .cl-table .cb-journal { grid-column: 1; grid-row: 1 / 3; position: relative; inset: auto; max-height: none; margin: 0; z-index: 1; overflow-y: auto; }
  .cl-ressources { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 215, 0, 0.35); background: rgba(20, 8, 24, 0.85); }
  .cl-ressources-tour { font-size: 16px; color: var(--or-dore, #ffd700); font-weight: 700; }
  .cl-ressources b { font-size: 22px; color: var(--or-dore, #ffd700); }
  .cl-table .cl-attaque { position: relative; inset: auto; max-height: none; border-radius: 16px; border: 2px solid var(--or-dore, #ffd700); box-shadow: none; padding: 12px; }
  .cl-table .cb-main { flex-wrap: wrap; justify-content: flex-start; overflow: visible; padding: 4px 0; }
  .cl-table .cb-actions { flex-wrap: wrap; margin-top: auto; }
  .cl-table .cb-actions .cb-fin-tour { flex: 1 1 100%; min-height: 52px; font-size: 18px; order: -1; }
  .cl-table .cb-mise-en-place { grid-template-columns: 1fr; }
  .cl-table .cb-brume { width: 100%; left: 0; }
  .cl-zoom-corps { flex-direction: row; align-items: flex-start; justify-content: center; }
  .cl-zoom-carte { width: min(34vw, 60vh, 380px); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-jouable::after, .cl-projecteur, .cl-fleche, .cl-zoom, .cl-aide-fiche { animation: none !important; }
}

/* Mobile : jetons plus grands, la table tient toujours dans l'écran */
@media (max-width: 768px) {
  .cl-table {
    --cb-h-actif: clamp(96px, 19dvh, 180px);
    --cb-h-banc: clamp(54px, 7.6dvh, 80px);
    --cb-h-main: clamp(62px, 9dvh, 92px);
  }
}