/* ===================================================
   KURO ARCANA — Table de combat (classes .cb-*, combat-table.js)
   Mobile d'abord : la table tient dans l'écran (375 et 390 px) sans défilement.
   Animations : transform et opacity uniquement, coupées en mouvement réduit.
   =================================================== */

.cb-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10px 16px;
}

.cb-table {
  --cb-or: var(--or-dore, #ffd700);
  --cb-rouge: var(--rouge-crimson, #dc143c);
  --cb-violet: var(--violet-orchidee, #9932cc);
  --cb-h-actif: clamp(96px, 13vh, 172px);
  --cb-h-banc: clamp(62px, 7vh, 100px);
  --cb-h-main: clamp(68px, 8vh, 110px);
  --cb-duree: calc(240ms / var(--cb-vitesse, 1));
  position: relative;
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 18px;
  border: 1px solid rgba(255, 215, 0, 0.25);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(153, 50, 204, 0.22), transparent 62%),
    linear-gradient(180deg, #160716 0%, #0a0505 48%, #0a0505 52%, #1a0808 100%);
  box-shadow: inset 0 0 40px rgba(75, 0, 130, 0.45);
  color: #f3e9ff;
  overflow: hidden;
}

/* ---------- Camps ---------- */
.cb-camp { display: flex; flex-direction: column; gap: 5px; }
.cb-camp-adversaire { padding-bottom: 2px; }

.cb-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.cb-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  border: 2px solid var(--cb-or);
  background: radial-gradient(circle at 35% 30%, var(--cb-violet), #2a0a2a);
}
.cb-avatar-adversaire { border-color: var(--cb-rouge); background: radial-gradient(circle at 35% 30%, #a0102a, #2a0a0a); }

.cb-identite { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.cb-pseudo, .cb-titre { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-pseudo { font-weight: 700; }
.cb-titre { color: var(--cb-or); font-style: italic; opacity: 0.9; }

.cb-pastilles { display: inline-flex; gap: 3px; }
.cb-pastilles i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 215, 0, 0.55);
  background: rgba(255, 255, 255, 0.06);
}
.cb-ko-pastilles i.cb-plein { background: var(--cb-rouge); border-color: #ff8a9c; box-shadow: 0 0 6px var(--cb-rouge); }

/* Pioche (dos de carte), défausse, main adverse */
.cb-pile {
  flex: none;
  position: relative;
  width: 30px;
  height: 42px;
  border-radius: 4px;
  display: grid;
  place-items: center;
}
.cb-pile b, .cb-main-adverse b { font-size: 14px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; position: relative; }
.cb-dos.cb-pile, .cb-main-adverse i {
  border: 1px solid var(--cb-or);
  background:
    radial-gradient(circle, rgba(255, 215, 0, 0.35) 0 18%, transparent 20%),
    repeating-linear-gradient(45deg, #2a0a2a 0 4px, #4b0082 4px 8px);
}
.cb-defausse { border: 1px dashed rgba(255, 255, 255, 0.4); background: rgba(139, 0, 0, 0.25); }

.cb-main-adverse { flex: none; position: relative; width: 44px; height: 42px; display: grid; place-items: center; }
.cb-main-adverse i { position: absolute; width: 22px; height: 31px; border-radius: 3px; top: 5px; left: 11px; }
.cb-main-adverse i:nth-child(1) { transform: rotate(-14deg) translateX(-7px); }
.cb-main-adverse i:nth-child(3) { transform: rotate(14deg) translateX(7px); }

/* ---------- Emplacements ---------- */
.cb-rangee { display: flex; justify-content: center; gap: 10px; }
.cb-rangee-actif { gap: 18px; }

.cb-emplacement {
  position: relative;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  border-radius: 8px;
  transition: transform var(--cb-duree) ease, opacity var(--cb-duree) ease;
}
.cb-actif { height: var(--cb-h-actif); width: calc(var(--cb-h-actif) * 5 / 7); }
.cb-banc { height: var(--cb-h-banc); width: calc(var(--cb-h-banc) * 5 / 7); }
button.cb-emplacement { cursor: pointer; }
.cb-emplacement .cc-carte { width: 100%; }

.cb-vide {
  border: 2px dashed rgba(255, 215, 0, 0.35);
  background: rgba(75, 0, 130, 0.12);
}

/* Lueur : pseudo-élément dont seule l'opacité varie */
.cb-emplacement::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--cb-duree) ease;
}
.cb-selectionnee { transform: translateY(-4px) scale(1.05); z-index: 2; }
.cb-selectionnee::after { opacity: 1; box-shadow: 0 0 0 2px var(--cb-or), 0 0 16px var(--cb-or); }
.cb-cible-possible::after { box-shadow: 0 0 0 2px var(--cb-rouge), 0 0 18px var(--cb-rouge); animation: cb-pulse calc(1.1s / var(--cb-vitesse, 1)) ease-in-out infinite alternate; }
@keyframes cb-pulse { from { opacity: 0.35; } to { opacity: 1; } }

.cb-ko .cc-carte { filter: grayscale(1) brightness(0.55); }
.cb-ko-marque {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 20px;
  color: #ff5a6e;
  text-shadow: 0 0 6px #000, 0 0 2px #000;
  transform: rotate(-14deg);
}
.cb-banc .cb-ko-marque { font-size: 15px; }

/* Barre de PV */
.cb-pv {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 5%;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 3px;
  border-radius: 6px;
  background: rgba(10, 5, 5, 0.82);
}
.cb-pv-barre { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.cb-pv-barre i { display: block; height: 100%; transform-origin: left center; transition: transform var(--cb-duree) ease; }
.cb-pv b { font-size: 12px; font-weight: 800; min-width: 2ch; text-align: right; }
.cb-banc .cb-pv b { font-size: 10px; }
.cb-pv-vert i { background: #3ddc6a; }
.cb-pv-orange i { background: #ff9d2e; }
.cb-pv-rouge i { background: #ff3a4a; }
.cb-ko .cb-pv { opacity: 0.5; }

/* Effets */
.cb-effets { position: absolute; top: 4%; left: 4%; right: 4%; display: flex; flex-wrap: wrap; gap: 2px; }
.cb-effet {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 0 3px;
  height: 17px;
  border-radius: 9px;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  background: #555;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.cb-effet b { font-size: 10px; }
.cb-banc .cb-effet { height: 14px; font-size: 8px; }
.cb-banc .cb-effet b { font-size: 8px; }
.cb-effet-degats { background: #c8102e; }
.cb-effet-soin { background: #1f9d4c; }
.cb-effet-reduction { background: #6f6f7a; }
.cb-effet-esquive { background: #e07b10; }
.cb-effet-controle { background: #2a64d6; }
.cb-effet-bonus { background: #d63c94; }

/* ---------- Centre ---------- */
.cb-centre {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 2px 4px;
}
.cb-centre::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cb-rouge) 20%, var(--cb-or) 50%, var(--cb-rouge) 80%, transparent);
  opacity: 0.6;
}
.cb-tour, .cb-energie {
  position: relative;
  font-size: 16px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 14px;
  background: #140814;
  border: 1px solid rgba(255, 215, 0, 0.45);
}
.cb-tour { color: var(--cb-or); }
.cb-energie { display: inline-flex; align-items: center; gap: 6px; }
.cb-energie-pastilles i { width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; }
.cb-energie-pastilles i.cb-plein { background: var(--cb-or); border-color: #fff3a0; box-shadow: 0 0 6px var(--cb-or); }
.cb-bandeau-adverse {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 14px;
  color: #fff;
  background: var(--rouge-sang, #8b0000);
  border: 1px solid var(--cb-rouge);
  white-space: nowrap;
}
.cb-bandeau-adverse[hidden] { display: none; }

/* ---------- Main en éventail ---------- */
.cb-main {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cb-main::-webkit-scrollbar { display: none; }
.cb-main-carte {
  flex: none;
  height: var(--cb-h-main);
  width: calc(var(--cb-h-main) * 5 / 7);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  transform: rotate(calc(var(--k) * 5deg)) translateY(calc(var(--k) * var(--k) * 2.5px));
  transition: transform var(--cb-duree) ease;
}
.cb-main-carte .cc-carte { width: 100%; }
@media (hover: hover) {
  .cb-main-carte:hover { transform: translateY(-8px) scale(1.06); }
}

/* ---------- Actions ---------- */
.cb-actions { display: flex; gap: 8px; }
.cb-bouton {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(255, 215, 0, 0.5);
  background: linear-gradient(180deg, #3a0f4a, #1a0820);
  transition: transform var(--cb-duree) ease, opacity var(--cb-duree) ease;
}
.cb-bouton:active { transform: scale(0.96); }
.cb-bouton:focus-visible, .cb-emplacement:focus-visible, .cb-main-carte:focus-visible { outline: 2px solid var(--cb-or); outline-offset: 2px; }
.cb-vitesse[aria-pressed="true"] { background: linear-gradient(180deg, #b8860b, #6b4a00); color: #fff; }
.cb-fin-tour {
  flex: 1;
  border-color: var(--cb-or);
  background: linear-gradient(180deg, #c8102e, #6b0010);
  box-shadow: 0 0 12px rgba(220, 20, 60, 0.45);
}
.cb-fin-tour:disabled { opacity: 0.45; cursor: default; }

/* Journal repliable */
.cb-journal {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 62px;
  max-height: 40%;
  overflow-y: auto;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.4);
  background: rgba(10, 5, 10, 0.96);
  z-index: 5;
}
.cb-journal[hidden] { display: none; }
.cb-journal ol { margin: 0; padding-left: 20px; }
.cb-journal li { font-size: 16px; line-height: 1.4; }

/* ---------- Tour adverse : le joueur ne peut rien faire ---------- */
.cb-tour-adverse .cb-camp-joueur,
.cb-tour-adverse .cb-main,
.cb-tour-adverse .cb-fin-tour { pointer-events: none; opacity: 0.55; }

/* ---------- Panneau des attaques ---------- */
.cb-panneau-fond { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 8; }
.cb-panneau-fond[hidden], .cb-panneau[hidden] { display: none; }
.cb-panneau {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  max-height: 78%;
  overflow-y: auto;
  padding: 16px;
  border-radius: 18px 18px 0 0;
  border-top: 2px solid var(--cb-or);
  background: linear-gradient(180deg, #24092e, #0d050d);
  opacity: 0;
  transform: translateY(24px);
  transition: transform var(--cb-duree) ease, opacity var(--cb-duree) ease;
}
.cb-panneau.cb-ouvert { opacity: 1; transform: none; }
.cb-panneau-tete { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.cb-panneau-carte { flex: none; width: 72px; }
.cb-panneau-nom { margin: 0 0 4px; font-size: 20px; color: var(--cb-or); }
.cb-panneau-ligne { margin: 0 0 4px; font-size: 16px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-panneau-ligne .cb-effet, .cb-panneau-ligne .cb-effet b { height: 22px; font-size: 16px; }
.cb-attaques { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cb-attaque {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  background: rgba(75, 0, 130, 0.25);
}
.cb-attaque-tete { display: flex; align-items: center; gap: 8px; }
.cb-attaque-nom { font-size: 16px; flex: 1; }
.cb-cout i { background: var(--cb-or); transform: rotate(45deg); border-radius: 2px; }
.cb-cout-nombre { font-size: 16px; color: var(--cb-or); }
.cb-attaque-effet { font-size: 16px; opacity: 0.9; }
.cb-cible-apercu { font-size: 16px; font-weight: 700; color: #ffb3bf; }
.cb-cible-ko { color: #ff3a4a; }
.cb-panneau-fermer { width: 100%; }

/* ---------- Mobile : la table occupe tout l'écran, barres masquées ---------- */
@media (max-width: 768px) {
  body.cb-page-active .mb-haut, body.cb-page-active .mb-bas { display: none !important; }
  body.cb-page-active:not(.mb-hors-jeu) #page-combat { padding: 0; }
  #page-combat .cb-page { padding: 0; }
  .cb-table {
    --cb-h-actif: clamp(92px, 16.5dvh, 160px);
    --cb-h-banc: clamp(60px, 8.6dvh, 92px);
    --cb-h-main: clamp(64px, 9.6dvh, 100px);
    min-height: 100dvh;
    max-width: none;
    justify-content: space-between;
    border-radius: 0;
    border: 0;
    padding: calc(6px + env(safe-area-inset-top)) 12px calc(8px + env(safe-area-inset-bottom));
  }
  .cb-journal { bottom: calc(62px + env(safe-area-inset-bottom)); }
}

@media (min-width: 769px) {
  .cb-quitter { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-table *, .cb-table *::after { transition: none !important; animation: none !important; }
  .cb-cible-possible::after { opacity: 1; }
}

/* ===================================================
   Combat jouable (combat-jeu.js) : écrans, jauge Kuro, ultime, aperçu de la cible, animations
   =================================================== */
.cb-racine { width: 100%; max-width: 760px; }
.cb-ecran { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 16px; color: #f3e9ff; }
.cb-ecran-titre { margin: 0; font-size: 24px; color: var(--or-dore, #ffd700); text-align: center; }
.cb-bloc {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px;
  border: 1px solid rgba(255, 215, 0, 0.3); background: linear-gradient(180deg, rgba(75, 0, 130, 0.28), rgba(10, 5, 10, 0.8));
}
.cb-bloc h3 { margin: 0; font-size: 16px; color: var(--or-dore, #ffd700); text-transform: uppercase; letter-spacing: 1px; }
.cb-ligne { margin: 0; font-size: 16px; }
.cb-erreur { margin: 0; font-size: 16px; color: #ff8a9c; }
.cb-ok { margin: 0; font-size: 16px; color: #7ef0a0; }
.cb-message { margin: 0; font-size: 16px; color: #ff8a9c; text-align: center; }
.cb-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cb-choix-robot[aria-pressed="true"] { background: linear-gradient(180deg, #b8860b, #6b4a00); border-color: #fff3a0; }
.cb-principal {
  min-height: 52px; font-size: 18px; border-color: var(--or-dore, #ffd700);
  background: linear-gradient(180deg, #c8102e, #6b0010); box-shadow: 0 0 14px rgba(220, 20, 60, 0.45);
}
.cb-bouton:disabled { opacity: 0.45; cursor: default; }

/* Éditeur de deck */
.cb-entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cb-compteur-deck { font-size: 18px; color: var(--or-dore, #ffd700); }
.cb-erreurs { display: flex; flex-direction: column; gap: 4px; }
.cb-ed-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-ed-actions .cb-bouton { flex: 1; }
.cb-ed-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.cb-ed-carte { position: relative; width: 100%; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; opacity: 0.55; transition: transform 0.15s ease, opacity 0.15s ease; }
.cb-ed-carte.cb-dans-deck { opacity: 1; transform: translateY(-2px); }
.cb-ed-carte .cc-carte { width: 100%; }
.cb-ed-coche {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; font-weight: 900; color: #0a0505; background: var(--or-dore, #ffd700);
}

/* Fin de partie */
.cb-fin-titre { font-size: 34px; }
.cb-fin-victoire .cb-fin-titre { color: var(--or-dore, #ffd700); text-shadow: 0 0 16px rgba(255, 215, 0, 0.6); }
.cb-fin-defaite .cb-fin-titre { color: #ff5a6e; }
.cb-fin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Partie */
.cb-partie { position: relative; width: 100%; }
.cb-mise-en-place { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cb-actions { gap: 6px; }
.cb-actions .cb-bouton { padding: 0 8px; }
.cb-auto[aria-pressed="true"] { background: linear-gradient(180deg, #2a64d6, #12306b); }
.cb-brille { animation: cb-brille calc(1s / var(--cb-vitesse, 1)) ease-in-out infinite alternate; }
@keyframes cb-brille { from { transform: scale(1); opacity: 0.85; } to { transform: scale(1.04); opacity: 1; } }
.cb-a-attaque .cc-carte { opacity: 0.7; }
.cb-verrou .cb-camp-joueur, .cb-verrou .cb-main { pointer-events: none; }

/* Jauge Kuro : fine barre violette, brille quand elle est pleine */
.cb-jauge { position: absolute; left: 6%; right: 6%; bottom: calc(5% + 14px); height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.cb-jauge i { display: block; height: 100%; background: linear-gradient(90deg, #9932cc, #ff3df0); transform-origin: left center; transition: transform var(--cb-duree) ease; }
.cb-jauge-pleine i { background: linear-gradient(90deg, #ffd700, #ff3df0); }
.cb-banc .cb-jauge { bottom: calc(5% + 11px); height: 3px; }
.cb-ultime-pret {
  position: absolute; left: 50%; top: 38%; translate: -50% 0; padding: 2px 6px; border-radius: 8px;
  font-size: 12px; font-weight: 900; letter-spacing: 1px; color: #1a0a00;
  background: linear-gradient(180deg, #fff3a0, #ffd700); box-shadow: 0 0 12px #ffd700;
  animation: cb-brille 0.9s ease-in-out infinite alternate;
}
.cb-ultime-bouton { border-color: var(--or-dore, #ffd700) !important; box-shadow: 0 0 14px rgba(255, 215, 0, 0.55); animation: cb-brille 0.9s ease-in-out infinite alternate; }

/* Attaques du panneau */
.cb-attaques li { list-style: none; }
.cb-attaque-bouton {
  width: 100%; min-height: 44px; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  border-radius: 12px; border: 1px solid rgba(255, 215, 0, 0.3); background: rgba(75, 0, 130, 0.25);
}
.cb-attaque-bouton:disabled { opacity: 0.45; cursor: default; }
.cb-attaque-raison { font-size: 16px; color: #ff8a9c; }

/* Aperçu sur la cible : PV restants / KO */
.cb-apercu {
  position: absolute; left: 50%; top: 40%; translate: -50% 0; padding: 2px 6px; border-radius: 8px; white-space: nowrap;
  font-size: 13px; font-weight: 900; color: #fff; background: rgba(10, 5, 5, 0.9); border: 1px solid #ff8a9c;
}
.cb-apercu-ko { color: #ff3a4a; border-color: #ff3a4a; }

/* Animations : dégâts flottants, ultime (transform et opacity) */
.cb-flottant {
  position: absolute; left: 50%; top: 30%; translate: -50% 0; font-size: 22px; font-weight: 900; color: #ff3a4a; text-shadow: 0 0 6px #000;
  pointer-events: none; animation: cb-flotter calc(650ms / var(--cb-vitesse, 1)) ease-out both;
}
.cb-flottant-soin { color: #3ddc6a; }
@keyframes cb-flotter { from { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-26px); } }
.cb-ultime-anim {
  position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.35), rgba(10, 5, 10, 0.92) 70%); pointer-events: none;
  animation: cb-ultime calc(1500ms / var(--cb-vitesse, 1)) ease-out both;
}
.cb-ultime-anim span { font-size: 40px; font-weight: 900; letter-spacing: 4px; color: #ffd700; text-shadow: 0 0 18px #ffd700; }
.cb-ultime-anim b { font-size: 20px; color: #fff; }
.cb-ultime-anim small { font-size: 16px; color: #ffb3bf; }
@keyframes cb-ultime { from { opacity: 0; transform: scale(0.8); } 15% { opacity: 1; transform: scale(1.05); } 85% { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1); } }
.cb-panneau-fond { position: fixed; }
.cb-panneau { position: fixed; max-width: 760px; margin: 0 auto; }

@media (max-width: 768px) {
  #page-combat .cb-racine { padding: 0 16px; }
  body.cb-page-active #page-combat .cb-racine { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-brille, .cb-ultime-pret, .cb-ultime-bouton, .cb-flottant, .cb-ultime-anim { animation: none !important; }
}

/* ===================================================
   Tapis immersif (tableHTML → .cb-tapis) : pierre noire fissurée, brumes, sceau, filigranes, particules
   Rien n'est étiré : la texture se répète, les fissures sont recadrées (slice), le sceau garde sa taille.
   =================================================== */
.cb-table { isolation: isolate; background: #07040a; }
.cb-table > .cb-terrain, .cb-table > .cb-main, .cb-table > .cb-actions, .cb-table > .cb-mise-en-place, .cb-table > .cb-message { position: relative; z-index: 1; }
.cb-journal, .cb-bandeau-tour, .cb-ultime-anim { z-index: 9; }
.cb-tapis { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cb-tapis > * { position: absolute; }
.cb-pierre {
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.13 0 0 0 0 0.16 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse at 50% 50%, #1b1018 0%, #0d080d 60%, #060306 100%);
}
.cb-fissures { inset: 0; width: 100%; height: 100%; }
.cb-fissures g { stroke: rgba(0, 0, 0, 0.75); stroke-width: 1.4; }
.cb-fissures path:nth-child(odd) { stroke: rgba(120, 90, 60, 0.18); stroke-width: 0.8; }
/* Brumes : violette côté joueur, rouge sang côté adversaire, dérive lente (transform) */
.cb-brume { width: 120%; height: 55%; left: -10%; border-radius: 50%; opacity: 0.55; will-change: transform; }
.cb-brume-adversaire { top: -12%; background: radial-gradient(ellipse at 60% 50%, rgba(170, 16, 40, 0.55), transparent 65%); animation: cb-deriver 26s ease-in-out infinite alternate; }
.cb-brume-joueur { bottom: -12%; background: radial-gradient(ellipse at 40% 50%, rgba(120, 40, 200, 0.55), transparent 65%); animation: cb-deriver 30s ease-in-out infinite alternate-reverse; }
@keyframes cb-deriver { from { transform: translate3d(-6%, 0, 0) scale(1); } to { transform: translate3d(6%, 2%, 0) scale(1.08); } }
/* Halo et sceau au centre (sur la ligne du centre du terrain) */
.cb-halo { left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 90, 0.16), rgba(130, 50, 200, 0.12) 45%, transparent 70%); }
.cb-sceau { left: 50%; top: 50%; width: min(78%, 300px); aspect-ratio: 1; translate: -50% -50%; opacity: 0.5; animation: cb-tourner 180s linear infinite; }
.cb-sceau circle, .cb-sceau polygon, .cb-sceau line { fill: none; }
.cb-sceau-or { stroke: #c9a24a; }
.cb-sceau-violet { stroke: #9b4dff; }
.cb-sceau-runes { fill: #c9a24a; font-size: 11px; letter-spacing: 2px; opacity: 0.8; }
@keyframes cb-tourner { to { transform: rotate(360deg); } }
/* Filigranes dorés des 4 coins */
.cb-coin { width: 46px; height: 46px; }
.cb-coin svg { width: 100%; height: 100%; fill: none; stroke: #c9a24a; stroke-width: 1.2; opacity: 0.7; }
.cb-coin circle { fill: #c9a24a; }
.cb-coin-hg { left: 4px; top: 4px; }
.cb-coin-hd { right: 4px; top: 4px; transform: scaleX(-1); }
.cb-coin-bg { left: 4px; bottom: 4px; transform: scaleY(-1); }
.cb-coin-bd { right: 4px; bottom: 4px; transform: scale(-1, -1); }
/* Particules violettes (moins nombreuses sur mobile) */
.cb-particules { inset: 0; }
.cb-particules i {
  position: absolute; bottom: 10%; left: calc(8% + var(--k) * 11.5%); width: 4px; height: 4px; border-radius: 50%;
  background: #c48bff; box-shadow: 0 0 6px #9b4dff; opacity: 0;
  animation: cb-monter calc(7s + var(--k) * 0.9s) linear infinite; animation-delay: calc(var(--k) * -1.3s);
}
@keyframes cb-monter { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-70vh); } }
.cb-vignette { inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.75) 100%); }

/* Terrain : légère perspective, emplacements dessinés sous chaque place, ombres portées */
.cb-terrain { display: flex; flex-direction: column; gap: 6px; transform: perspective(1100px) rotateX(7deg); transform-origin: 50% 60%; }
.cb-emplacement::before {
  content: ''; position: absolute; inset: -3px; border-radius: 9px; pointer-events: none;
  border: 1px solid rgba(201, 162, 74, 0.55); box-shadow: 0 0 10px rgba(201, 162, 74, 0.18), inset 0 0 12px rgba(0, 0, 0, 0.6);
}
.cb-vide { background: rgba(10, 5, 10, 0.55); border: 0; }
.cb-emplacement.cb-carte { box-shadow: 0 12px 16px -6px rgba(0, 0, 0, 0.85); }

/* ---------- Animations d'action ---------- */
.cb-anim-elan { animation: cb-elan calc(380ms / var(--cb-vitesse, 1)) cubic-bezier(0.5, 0, 0.3, 1); z-index: 3; }
@keyframes cb-elan { 0%, 100% { transform: none; } 55% { transform: translate(var(--cb-dx), var(--cb-dy)) scale(1.06); } }
.cb-anim-pose { animation: cb-pose calc(450ms / var(--cb-vitesse, 1)) cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes cb-pose { from { opacity: 0; transform: translateY(-36px) scale(1.18); box-shadow: 0 40px 30px -10px rgba(0, 0, 0, 0.2); } to { opacity: 1; transform: none; } }
.cb-flash { position: absolute; inset: 0; border-radius: 8px; pointer-events: none; opacity: 0; animation: cb-flash calc(500ms / var(--cb-vitesse, 1)) ease-out; }
@keyframes cb-flash { 20% { opacity: 0.75; } to { opacity: 0; } }
.cb-flash-degats { background: radial-gradient(circle, rgba(255, 60, 70, 0.9), transparent 70%); }
.cb-flash-soin { background: radial-gradient(circle, rgba(61, 220, 106, 0.9), transparent 70%); }
.cb-flash-reduction { background: radial-gradient(circle, rgba(180, 180, 195, 0.9), transparent 70%); }
.cb-flash-esquive { background: radial-gradient(circle, rgba(240, 140, 30, 0.9), transparent 70%); }
.cb-flash-controle { background: radial-gradient(circle, rgba(60, 120, 240, 0.9), transparent 70%); }
.cb-flash-bonus { background: radial-gradient(circle, rgba(230, 70, 160, 0.9), transparent 70%); }
.cb-tremble .cb-terrain { animation: cb-tremble calc(360ms / var(--cb-vitesse, 1)) linear; }
@keyframes cb-tremble { 20% { translate: -4px 1px; } 40% { translate: 4px -1px; } 60% { translate: -3px 0; } 80% { translate: 2px 1px; } }
.cb-ko-calque { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.cb-ko-copie { position: fixed; margin: 0; animation: cb-ko calc(900ms / var(--cb-vitesse, 1)) ease-in forwards; }
.cb-fissure-ko { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.4; opacity: 0; animation: cb-fissure calc(900ms / var(--cb-vitesse, 1)) ease-out forwards; }
@keyframes cb-fissure { 10%, 50% { opacity: 0.9; } to { opacity: 0; } }
@keyframes cb-ko { 0%, 35% { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.85) translateY(10px) rotate(-4deg); } }
.cb-bandeau-tour {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 8; display: flex; justify-content: center; pointer-events: none;
  animation: cb-bandeau calc(900ms / var(--cb-vitesse, 1)) ease-out forwards;
}
.cb-bandeau-tour span { padding: 8px 28px; font-size: 22px; font-weight: 900; letter-spacing: 3px; color: #fff; border-radius: 6px; }
.cb-bandeau-moi span { background: linear-gradient(90deg, transparent, rgba(120, 40, 200, 0.95) 20%, rgba(120, 40, 200, 0.95) 80%, transparent); text-shadow: 0 0 10px #c48bff; }
.cb-bandeau-lui span { background: linear-gradient(90deg, transparent, rgba(170, 16, 40, 0.95) 20%, rgba(170, 16, 40, 0.95) 80%, transparent); text-shadow: 0 0 10px #ff6070; }
@keyframes cb-bandeau { from { opacity: 0; transform: translate(-30%, -50%) scaleX(0.6); } 20%, 75% { opacity: 1; transform: translate(0, -50%) scaleX(1); } to { opacity: 0; transform: translate(20%, -50%); } }
.cb-allumage i.cb-plein { animation: cb-allumer calc(260ms / var(--cb-vitesse, 1)) ease-out both; animation-delay: calc(var(--i) * 90ms / var(--cb-vitesse, 1)); }
@keyframes cb-allumer { from { opacity: 0.2; transform: rotate(45deg) scale(0.4); } to { opacity: 1; transform: rotate(45deg) scale(1); } }

@media (max-width: 768px) {
  .cb-particules i:nth-child(n + 5) { display: none; }
  .cb-coin { width: 34px; height: 34px; }
  .cb-terrain { transform: perspective(900px) rotateX(5deg); }
}
/* Mouvement réduit : simples fondus, décor immobile */
@media (prefers-reduced-motion: reduce) {
  .cb-brume, .cb-sceau, .cb-particules i { animation: none !important; }
  .cb-particules { display: none; }
  .cb-anim-elan, .cb-anim-pose, .cb-tremble .cb-terrain, .cb-flash, .cb-fissure-ko, .cb-allumage i.cb-plein { animation: none !important; }
  .cb-ko-copie, .cb-bandeau-tour { animation: cb-fondu-sortie 0.4s ease-out forwards !important; }
}
@keyframes cb-fondu-sortie { from { opacity: 1; } to { opacity: 0; } }