/* Scène de combat (arene.js) et sa mise en page : la Table (.arene) et le téléphone (.mini-arene).
   Préfixe arene- / heros- / mini-. Seuls transform et opacity sont animés. */

/* ═══════════ La Table : l'ennemi à gauche, l'équipe à droite ═══════════ */
.arene.boss-panneau { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: stretch; }
.arene[data-illu] {
  --voile: var(--hachures),
    radial-gradient(ellipse 60% 70% at 26% 58%, rgba(11, 8, 9, .45), rgba(11, 8, 9, .9) 75%),
    linear-gradient(0deg, rgba(11, 8, 9, .9), rgba(11, 8, 9, .2) 60%);
}
.arene-tete h2 { font-size: clamp(1.6em, 3.4vw, 2.3em); line-height: 1.05; }
.arene-terrain {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center; gap: clamp(20px, 5vw, 80px); min-height: 420px; padding: 8px 0 4px;
}
/* Le sol : deux flaques d'ombre sous les camps */
.arene-terrain::before {
  content: ""; position: absolute; inset: auto 0 -6px 0; height: 46%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 30% 22% at 26% 86%, rgba(0, 0, 0, .75), transparent 72%),
    radial-gradient(ellipse 30% 24% at 74% 86%, rgba(0, 0, 0, .6), transparent 72%);
}
.arene-camp { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; }
.arene-ennemi { position: relative; line-height: 0; }
/* Une lueur de sang derrière l'ennemi */
.arene-ennemi::before {
  content: ""; position: absolute; inset: -18% -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(200, 66, 58, .28), transparent 70%);
}
.arene-pv { width: min(100%, 280px); display: grid; gap: 6px; }
.arene-pv-chiffres { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.arene-pv-chiffres .num { font: 600 2.2em/1 var(--texte); text-shadow: 0 2px 18px rgba(0, 0, 0, .85); }
.arene-pv-chiffres small { font-size: .7em; }
.arene-barre {
  position: relative; height: 10px; overflow: hidden; border-radius: 1px;
  background: rgba(5, 3, 4, .75); box-shadow: 0 0 0 1px rgba(200, 66, 58, .45), inset 0 1px 3px rgba(0, 0, 0, .8);
}
.arene-barre > span {
  position: absolute; inset: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, #6E1416, var(--sang, #C8423A) 70%, #E9785A);
  box-shadow: 0 0 12px rgba(200, 66, 58, .6);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

/* L'équipe : en diagonale comme dans les vieux Final Fantasy, sur deux rangs au-delà de trois */
.arene-equipe { position: relative; z-index: 1; display: grid; grid-template-columns: max-content; gap: 14px 22px; justify-content: center; align-content: center; }
.arene-equipe--large { grid-template-columns: repeat(2, max-content); }
.arene-equipe:not(.arene-equipe--large) .heros-carte { margin-left: calc(var(--i, 0) * 22px); }
.arene-equipe--large .heros-carte:nth-child(even) { margin-top: 30px; }
.heros-carte { display: flex; align-items: center; gap: 12px; min-width: 0; }
.heros-portrait { flex: none; line-height: 0; }
.heros-texte { display: grid; gap: 2px; min-width: 0; }
.heros-nom { font: 600 1.05em/1.1 var(--titre); color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9em; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.heros-etat { display: inline-flex; align-items: center; gap: 6px; font: 400 .52em/1.2 var(--etiquette); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-att); }
.heros-etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; flex: none; }
.etat-fait .heros-etat { color: var(--serment); }
.etat-fait .heros-etat::before { background: var(--serment); box-shadow: 0 0 8px rgba(240, 217, 160, .7); }
.etat-attend .heros-etat::before { animation: heros-attend 1.6s ease-in-out infinite; }
.etat-a-terre { opacity: .5; }
.etat-a-terre .heros-portrait { filter: grayscale(1); }
.etat-a-terre .heros-etat { color: var(--danger); }
@keyframes heros-attend { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

@media (max-width: 700px) {
  .arene-terrain { grid-template-columns: minmax(0, 1fr); gap: 18px; min-height: 0; }
  .arene-ennemi .fig { --fig-h: 210px !important; --fig-w: 158px !important; }
  .arene-equipe, .arene-equipe--large { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 12px; }
  .arene-equipe:not(.arene-equipe--large) .heros-carte { margin-left: 0; }
  .arene-equipe--large .heros-carte:nth-child(even) { margin-top: 0; }
  .heros-portrait .fig { --fig-h: 80px !important; --fig-w: 60px !important; }
  .heros-carte { gap: 8px; }
  .heros-etat { letter-spacing: .03em; white-space: nowrap; }
}

/* ═══════════ Le téléphone : moi face à l'ennemi ═══════════ */
.mini-arene {
  position: relative; width: 100%; max-width: 340px; margin: 6px auto 2px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 6px 4px 14px;
}
.mini-arene::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%; pointer-events: none;
  background:
    radial-gradient(ellipse 28% 30% at 26% 88%, rgba(0, 0, 0, .8), transparent 72%),
    radial-gradient(ellipse 26% 28% at 76% 88%, rgba(0, 0, 0, .7), transparent 72%);
}
.mini-acteur { position: relative; z-index: 1; line-height: 0; }
.mini-acteur[data-acteur="ennemi"]::before {
  content: ""; position: absolute; inset: -14% -24%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(200, 66, 58, .26), transparent 70%);
}
.mini-moi { margin-bottom: 4px; }

/* ═══════════ Le calque : acteurs, traînées, projectiles, impacts ═══════════ */
.calque-frappes, .calque-frappe-main { overflow: visible; }
.arene-acteur { position: absolute; z-index: 2; isolation: isolate; line-height: 0; transform-origin: 50% 85%; will-change: transform; }
.arene-acteur > .fig { position: absolute; left: 0; top: 0; }
.arene-acteur--heros { z-index: 3; }
.arene-flash {
  position: absolute; inset: 0; z-index: 2; border-radius: 3px; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 70% at 50% 45%, #FFFFFF, rgba(255, 246, 225, .85) 60%, rgba(255, 231, 168, .6));
  will-change: opacity;
}
.arene-flash--sang { background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(255, 150, 120, .85), rgba(200, 66, 58, .8) 55%, rgba(110, 20, 22, .9)); }
.arene-aura {
  position: absolute; inset: -16% -26%; z-index: -1; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(255, 231, 168, .55), rgba(240, 217, 160, .15) 45%, transparent 70%);
  will-change: opacity;
}
.arene-aura--sang { background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(233, 90, 60, .6), rgba(158, 42, 43, .3) 45%, transparent 70%); }
.arene-fantome { z-index: 1; opacity: 0; filter: sepia(1) saturate(1.6) brightness(1.35); }
.arene-trainee {
  position: absolute; z-index: 1; height: 12px; transform-origin: 0 50%; opacity: 0; border-radius: 6px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 231, 168, 0), rgba(255, 231, 168, .55) 60%, rgba(255, 255, 255, .95));
  filter: blur(2px);
  will-change: transform, opacity;
}
.arene-zone { position: absolute; z-index: 4; pointer-events: none; }

.arene-proj { position: absolute; z-index: 5; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); will-change: transform, opacity; }
.arene-proj > svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Souffle de feu */
.arene-flamme {
  border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, #FFF6DC 0 14%, #FFD27A 30%, #E9783A 52%, rgba(200, 66, 58, .55) 66%, rgba(200, 66, 58, 0) 72%);
}
.arene-braise { border-radius: 50%; background: radial-gradient(circle, #FFF3CF 0 30%, #E9783A 60%, rgba(233, 120, 58, 0) 75%); box-shadow: 0 0 6px rgba(233, 120, 58, .9); }
/* Lame de flammes : un croissant */
.arene-lame {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 50%, transparent 0 45%, #FFF3CF 49%, #FFB45A 55%, #E9783A 62%, rgba(200, 66, 58, .7) 69%, transparent 75%);
  -webkit-mask: linear-gradient(90deg, transparent 38%, #000 62%); mask: linear-gradient(90deg, transparent 38%, #000 62%);
  filter: drop-shadow(0 0 8px rgba(233, 120, 58, .9));
}
.arene-lame--violet {
  background: radial-gradient(circle at 30% 50%, transparent 0 45%, #FFE6FA 49%, #E8A6E0 55%, #C77BC0 62%, rgba(122, 46, 110, .7) 69%, transparent 75%);
  filter: drop-shadow(0 0 8px rgba(199, 123, 192, .9));
}
/* Chiens : une ombre qui file, deux yeux, puis les crocs */
.arene-bete {
  background:
    radial-gradient(circle at 74% 47%, #FF7A5A 0 2.6%, rgba(255, 122, 90, 0) 4.5%),
    radial-gradient(circle at 82% 45%, #FF7A5A 0 2.4%, rgba(255, 122, 90, 0) 4.3%),
    radial-gradient(ellipse 50% 24% at 50% 52%, rgba(10, 5, 6, .95), rgba(10, 5, 6, .55) 60%, transparent 76%);
  filter: drop-shadow(0 0 6px rgba(200, 66, 58, .5));
}
.arene-crocs { z-index: 6; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .85)); }
.arene-rocher > svg { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .7)); }
.arene-eclat > svg { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .55)); }
/* Onde : un croissant de force qui grandit (le bord droit est le front) */
.arene-onde {
  border-radius: 50%; border: 5px solid transparent; border-right-color: currentColor; color: var(--sang, #C8423A);
  filter: drop-shadow(0 0 8px currentColor);
}
.arene-onde--violet { color: var(--ombre, #C77BC0); }
.arene-onde--or { color: var(--serment, #F0D9A0); }
.arene-scarabee { border-radius: 50% 50% 42% 42%; background: #1A120E; box-shadow: 0 0 0 1px rgba(157, 203, 94, .55), 0 0 5px rgba(0, 0, 0, .9); }
.arene-griffes > svg { filter: drop-shadow(0 0 6px rgba(200, 66, 58, .8)); }

.arene-impact { position: absolute; z-index: 6; border-radius: 50%; opacity: 0; pointer-events: none; mix-blend-mode: screen; will-change: transform, opacity; }
.arene-impact--feu { background: radial-gradient(circle, rgba(255, 246, 220, .95) 0 12%, rgba(255, 180, 90, .8) 30%, rgba(200, 66, 58, .4) 55%, transparent 70%); }
.arene-impact--sang { background: radial-gradient(circle, rgba(255, 210, 190, .9) 0 10%, rgba(200, 66, 58, .75) 32%, rgba(110, 20, 22, .35) 55%, transparent 70%); }
.arene-impact--poussiere { mix-blend-mode: normal; background: radial-gradient(circle, rgba(170, 155, 130, .75) 0 18%, rgba(110, 100, 85, .45) 40%, transparent 68%); }
.arene-impact--clair { background: radial-gradient(circle, #FFFFFF 0 10%, rgba(255, 231, 168, .75) 30%, rgba(240, 217, 160, .25) 52%, transparent 70%); }
.arene-impact--glace { background: radial-gradient(circle, #FFFFFF 0 10%, rgba(200, 238, 245, .8) 30%, rgba(127, 169, 180, .3) 52%, transparent 70%); }
.arene-impact--sombre { mix-blend-mode: normal; background: radial-gradient(circle, rgba(30, 20, 14, .85) 0 20%, rgba(79, 122, 42, .35) 45%, transparent 68%); }
.arene-impact--onde-sang { background: radial-gradient(circle, transparent 0 30%, rgba(200, 66, 58, .8) 42%, transparent 60%); }
.arene-impact--onde-violet { background: radial-gradient(circle, transparent 0 30%, rgba(199, 123, 192, .85) 42%, transparent 60%); }
.arene-impact--onde-or { background: radial-gradient(circle, transparent 0 30%, rgba(240, 217, 160, .85) 42%, transparent 60%); }
.arene-etincelle {
  position: absolute; z-index: 6; width: 6px; height: 6px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: #F6DCCF; box-shadow: 0 0 6px rgba(200, 66, 58, .9); will-change: transform, opacity;
}
.arene-etincelle--feu, .arene-etincelle--clair, .arene-etincelle--onde-or { background: #FFE7A8; box-shadow: 0 0 6px rgba(233, 120, 58, .9); }
.arene-etincelle--poussiere { background: #9A8C76; box-shadow: none; width: 8px; height: 8px; }
.arene-etincelle--glace { background: #F2FCFF; box-shadow: 0 0 6px rgba(127, 169, 180, .9); }
.arene-etincelle--sombre { background: #1A120E; box-shadow: 0 0 0 1px rgba(157, 203, 94, .5); }
.arene-etincelle--onde-violet { background: #E8C6E4; box-shadow: 0 0 6px rgba(199, 123, 192, .9); }

/* « Frappe 4 » : la Table annonce la frappe de l'ennemi, jamais ce que chacun perd */
.arene-etiquette {
  position: absolute; z-index: 7; opacity: 0; white-space: nowrap; pointer-events: none; line-height: 1;
  font: 600 clamp(1.15rem, 2.4vw, 1.7rem) var(--titre, "Cormorant Garamond", Georgia, serif);
  font-variant-numeric: lining-nums tabular-nums; color: #F6DCCF;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .85), 0 0 .35em rgba(30, 4, 6, .95), 0 0 .8em rgba(200, 66, 58, .85);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .etat-attend .heros-etat::before { animation: none; }
  .arene-barre > span { transition: none; }
}

/* Les animations de frappe jouées dans une zone (et non plein écran) : bords fondus, jamais de rectangle visible */
.arene-zone > .anim-scene {
  -webkit-mask: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask: radial-gradient(closest-side, #000 62%, transparent 100%);
}

/* ═══════════ Bande des joueurs (Table) : portrait à gauche, nom et état à droite ═══════════ */
.joueur-col { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; align-content: center; }
.joueur-col > :not(.fig-bande):not(.pret) { grid-column: 2; }
.joueur-col .fig-bande { grid-column: 1; grid-row: 1 / span 3; height: auto; margin: 0; align-self: center; }

/* Tablette paysage (1024 × 768, 1280 × 800) : l'arène se resserre ; le résultat vient sous les yeux une fois
   les frappes jouées (table.js, voirResultat) — audit 09, P2-8 */
@media (max-height: 820px) and (orientation: landscape) and (min-width: 901px) {
  body.table .arene-terrain { min-height: 0; padding-block: 0; }
  body.table .arene-ennemi .fig { --fig-h: 27vh !important; --fig-w: calc(27vh * .75) !important; }
  body.table .heros-portrait .fig { --fig-h: 11vh !important; --fig-w: calc(11vh * .75) !important; }
  body.table .arene-tete h2 { font-size: clamp(1.4em, 2.6vw, 1.9em); }
  body.table .arene-equipe--large .heros-carte:nth-child(even) { margin-top: 12px; }
  body.table .arene-equipe { gap: 10px 18px; }
  body.table .arene-camp { gap: 8px; }
}