/* Échecs W3 — vignette d'unité : portrait, bandeau d'icônes, colonne d'ordres, barres à blocs (1 point = 1 bloc).
   Taille pilotée par --cell (40–76px sur l'échiquier). Couleurs : tokens du design system, avec repli. */
.w3-token{
  --_side: var(--side-south, #e8b33a);
  --_fr: max(2px, calc(var(--cell, 76px) * .045));                 /* épaisseur du cadre de camp */
  --_ink: max(1px, calc(var(--cell, 76px) * .017));                /* trait d'encre sous le cadre */
  --_in: calc(var(--_fr) + var(--_ink) + 3px);                      /* marge intérieure : rien ne touche le cadre */
  --_slots: var(--pip-slots, 10);                                  /* blocs max par ligne : le jeu le fixe (PV de fiche + formation + aura), 10 par défaut */
  --_gap: max(1px, calc(var(--cell, 76px) * .012));
  /* tous les blocs ont la même largeur sur le plateau, calculée pour que --_slots blocs tiennent entre les marges */
  --_pw: calc((var(--cell, 76px) - 2 * var(--_in) - (var(--_slots) - 1) * var(--_gap)) / var(--_slots));
  --_ph: max(3px, calc(var(--cell, 76px) * .07));
  /* trois étages qui ne se chevauchent pas : bandeau d'icônes / fenêtre du portrait (~2:1) / barres */
  --_bh: calc(var(--_fr) + var(--_ink) + var(--_ic) + max(2px, calc(var(--cell, 76px) * .03)));
  --_barh: calc(var(--_gap) * 4.6 + 2 * var(--_ph) + var(--_fr) + var(--_ink) + 2px);
  --_ic: max(7px, calc(var(--cell, 76px) * .16));
  position: relative; flex: none; width: var(--cell, 76px); height: var(--cell, 76px);
  border-radius: calc(var(--cell, 76px) * .09); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-ink, #1c130c);
  background: var(--line-ink, #1c130c);
}
.w3-token.side-N{ --_side: var(--side-north, #b9c4cf); }
.w3-token > img{ position:absolute; left:0; right:0; top: var(--_bh); width:100%; height: calc(100% - var(--_bh) - var(--_barh));
  display:block; object-fit: cover; object-position: 50% 45%; }   /* portrait large 2:1 (…-wide.svg) ; un portrait carré est recadré au centre */
/* cadre de camp : or (Sud) / acier (Nord), peint au-dessus de tout */
.w3-token::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4;
  box-shadow: inset 0 0 0 var(--_fr) var(--_side), inset 0 0 0 calc(var(--_fr) + var(--_ink)) var(--line-ink, #1c130c); }
.w3-token.dead{ filter: grayscale(1) brightness(.55); }

/* ---------- bandeau d'identité (haut) ---------- */
.w3-band{ position:absolute; z-index:2; left:0; right:0; top:0; height: var(--_bh);
  padding: calc(var(--_fr) + var(--_ink)) calc(var(--_in) - 1px) 0; box-sizing:border-box;
  display:flex; align-items:center; gap: max(1px, calc(var(--cell, 76px) * .025));
  background: var(--band, var(--band-base, #1d140c)); border-bottom: 1px solid var(--line-ink, #1c130c);
  box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.w3-band .w3-b, .w3-band .w3-emb{ display:inline-flex; align-items:flex-end; flex:0 1 auto; min-width:0; }
/* ordres dans le bandeau, poussés à droite ; si la place manque (lanceur entravé avec deux ordres), les icônes rétrécissent */
.w3-orders.in-band{ position:static; margin-left:auto; flex:0 1 auto; min-width:0; flex-direction:row; gap: max(1px, calc(var(--cell, 76px) * .015)); }
.w3-orders.in-band .w3-o{ padding:0; background:none; box-shadow:none; border-radius:0; min-width:0; flex:0 1 auto; }
.w3-orders.in-band .w3-o .w3-ic{ width: var(--_ic); height: var(--_ic); }
.w3-band .w3-ic{ max-width:100%; height:auto; aspect-ratio:1; }
.w3-ic{ display:block; width: var(--_ic); height: var(--_ic); flex:none; }
.w3-band sub, .w3-orders sub{ font: 700 max(7px, calc(var(--cell, 76px) * .11))/1 var(--font-sans, "Alegreya Sans", sans-serif);
  color: var(--band-ink, #f3e8d2); margin-left: -1px; vertical-align: baseline; position: relative; top: 1px; }
/* roi : bandeau or + couronne ; reine : bandeau violet + diadème. Liseré intérieur de 2px de la couleur de rôle, juste sous le trait. */
.w3-token.king{ --band: linear-gradient(var(--band-king, #f6cf55), #c98f1f); --band-ink: #1c130c; }
.w3-token.queen{ --band: linear-gradient(var(--band-queen, #8a5ad8), #4e2a99); --band-ink: #fbf6ff; }
.w3-token.king .w3-emb .w3-ic, .w3-token.queen .w3-emb .w3-ic{ width: calc(var(--_ic) * 1.4); height: calc(var(--_ic) * 1.4); margin: calc(var(--_ic) * -.2) 0; }
.w3-token.king::before, .w3-token.queen::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 0 0 calc(var(--_fr) + var(--_ink) + 2px) var(--_role); }
.w3-token.king{ --_role: #f3c84b; }
.w3-token.queen{ --_role: #8a5ad8; }

/* ---------- ordres en cours (au-dessus des barres, à droite) ---------- */
/* rangée posée juste au-dessus des barres, calée à droite : ne chevauche ni le bandeau ni les blocs, même à 9 PV */
.w3-orders{ position:absolute; z-index:2; right: var(--_in); bottom: calc(var(--_barh) + max(1px, calc(var(--cell, 76px) * .02)));
  display:flex; flex-direction:row-reverse; gap: max(1px, calc(var(--cell, 76px) * .02)); }
.w3-o{ display:flex; align-items:flex-end; justify-content:center; padding: max(1px, calc(var(--cell, 76px) * .015));
  background: var(--plaque, rgba(20,13,8,.88)); border-radius: 999px; box-shadow: 0 0 0 1px var(--line-ink, #1c130c); }
.w3-o .w3-ic{ width: calc(var(--_ic) * .9); height: calc(var(--_ic) * .9); }

/* ---------- barres (bas) ---------- */
.w3-token .w3-bars{ position:absolute; z-index:1; left:0; right:0; bottom:0; height: var(--_barh); box-sizing:border-box;
  padding: calc(var(--_gap) * 3) var(--_in) calc(var(--_fr) + var(--_ink) + 2px);
  background: var(--band-base, #1d140c); border-top: 1px solid var(--line-ink, #1c130c); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.w3-bars{ display:flex; flex-direction:column; gap: calc(var(--_gap, 1px) * 1.6); }
.w3-row{ display:flex; gap: var(--_gap, 1px); align-items:center; }
.w3-pip{
  display:block; flex:none; box-sizing:border-box; width: var(--_pw, 6px); height: var(--_ph, 5px); border-radius: 1.5px; position: relative;
  background: var(--_c);
  box-shadow: 0 0 0 1px var(--line-ink, #1c130c), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.35);
}
.w3-pip.hp{ --_c: var(--hp, #3fae2e); }
.w3-pip.hp.aura{ --_c: var(--hp-aura, #5ab8ff); }
.w3-pip.atk{ --_c: var(--atk, #e0352b); }
.w3-pip.atk.aura{ --_c: var(--atk-aura, #ffa31a); }
.w3-pip.aura:not(.empty){ box-shadow: 0 0 0 1px var(--line-ink, #1c130c), inset 0 0 0 1px rgba(255,255,255,.55), 0 0 4px var(--_c); }
/* PV perdu : une alvéole vide, bord clair et barre en travers. On voit combien de PV manquent,
   donc un blessé ne se confond jamais avec une unité qui a peu de PV de base. */
.w3-pip.hp.empty, .w3-pip.hp.aura.empty{ --_c: #120c08; --_w: var(--wound, #e6d7b9);
  box-shadow: 0 0 0 1px var(--line-ink, #1c130c), inset 0 0 0 1px var(--_w);
  background: linear-gradient(to top right, transparent calc(50% - .7px), var(--_w) calc(50% - .7px), var(--_w) calc(50% + .7px), transparent calc(50% + .7px)), #120c08; }
.w3-pip.hp.aura.empty{ --_w: var(--hp-aura, #5ab8ff); }
/* dégâts prévus : les blocs qui vont tomber clignotent hachurés de rouge */
.w3-pip.doomed{ background: repeating-linear-gradient(135deg, var(--_c) 0 2px, var(--atk, #e0352b) 2px 3.5px);
  animation: w3-doom 1s steps(2, jump-none) infinite; }
@keyframes w3-doom{ 50%{ filter: brightness(1.5); } }
.w3-token.doomed .w3-bars{ background: #5a0f0c; }
@media (prefers-reduced-motion: reduce){ .w3-pip.doomed{ animation: none; } }

/* ---------- Effets de résolution (EchecW3.fx) ---------- */
.fx-layer{ position:absolute; inset:0; pointer-events:none; z-index:20; overflow:visible; }
.fx-layer > *{ position:absolute; }
.fx-float{ font: 900 calc(var(--cell, 76px) * .42)/1 var(--font-display, Cinzel, Georgia, serif); white-space:nowrap; transform:translate(-50%,-50%);
  -webkit-text-stroke: max(1.5px, calc(var(--cell, 76px) * .03)) var(--line-ink, #1c130c); paint-order: stroke fill; text-shadow: 0 2px 0 var(--line-ink, #1c130c); }
.fx-float.fx-dmg{ color: var(--atk, #e0352b); }
.fx-float.fx-heal{ color: #7dff6a; }
.fx-float.fx-aura{ color: var(--hp-aura, #5ab8ff); font-size: calc(var(--cell, 76px) * .24); }
.fx-bolt{ width: calc(var(--cell, 76px) * .42); height: max(4px, calc(var(--cell, 76px) * .07)); border-radius: 99px; transform-origin: 50% 50%;
  background: linear-gradient(90deg, rgba(255,240,200,0), #ffe3a0 55%, #fff 100%); box-shadow: 0 0 6px 2px rgba(255,163,26,.8); }
.fx-bolt.fx-spell{ background: linear-gradient(90deg, rgba(200,170,255,0), #c9a8ff 55%, #fff); box-shadow: 0 0 8px 3px rgba(138,90,216,.9); }
.fx-ring{ width: calc(var(--cell, 76px) * .95); height: calc(var(--cell, 76px) * .95); border-radius: 50%; transform: translate(-50%,-50%); }
.fx-ring.fx-hit{ box-shadow: 0 0 0 max(2px, calc(var(--cell, 76px) * .04)) var(--atk, #e0352b), inset 0 0 calc(var(--cell, 76px) * .25) rgba(224,53,43,.7); }
.fx-ring.fx-heal{ box-shadow: 0 0 0 max(2px, calc(var(--cell, 76px) * .04)) #7dff6a, inset 0 0 calc(var(--cell, 76px) * .25) rgba(125,255,106,.6); }
.fx-ring.fx-death{ box-shadow: 0 0 0 max(3px, calc(var(--cell, 76px) * .06)) var(--line-ink, #1c130c), 0 0 0 max(4px, calc(var(--cell, 76px) * .08)) #e6d7b9; }
.fx-ring.fx-spell{ box-shadow: 0 0 0 max(2px, calc(var(--cell, 76px) * .05)) #b48cff, 0 0 calc(var(--cell, 76px) * .3) #8a5ad8; }
.fx-ring.fx-aura-hp{ box-shadow: 0 0 0 2px var(--hp-aura, #5ab8ff); }
.fx-ring.fx-aura-atk{ box-shadow: 0 0 0 2px var(--atk-aura, #ffa31a); }
.fx-beam{ height: max(3px, calc(var(--cell, 76px) * .06)); transform-origin: 0 50%; margin-top: calc(max(3px, calc(var(--cell, 76px) * .06)) / -2); border-radius: 99px;
  background: repeating-linear-gradient(90deg, #7dff6a 0 8px, rgba(125,255,106,.25) 8px 12px); box-shadow: 0 0 6px #3fae2e; }
.fx-zone{ width: var(--cell, 76px); height: var(--cell, 76px); transform: translate(-50%,-50%); box-sizing: border-box; border-radius: 4px; }
.fx-zone.fx-aura-hp{ background: rgba(90,184,255,.18); outline: 2px dashed var(--hp-aura, #5ab8ff); outline-offset: -4px; }
.fx-zone.fx-aura-atk{ background: rgba(255,163,26,.18); outline: 2px dashed var(--atk-aura, #ffa31a); outline-offset: -4px; }
.fx-zone.fx-spell, .fx-zone.fx-bind, .fx-zone.fx-teleport{ background: rgba(138,90,216,.35); box-shadow: inset 0 0 0 3px #b48cff; }
.fx-zone.fx-lightning{ background: radial-gradient(circle, rgba(255,255,220,.95), rgba(255,215,90,.55) 60%, rgba(255,215,90,.15)); box-shadow: inset 0 0 0 3px #ffe27a; }
.fx-zone.fx-plague{ background: radial-gradient(circle, rgba(170,255,90,.75), rgba(90,140,40,.45) 65%, rgba(60,90,30,.2)); box-shadow: inset 0 0 0 3px #a6ff5a; }
.fx-zone.fx-renewal{ background: radial-gradient(circle, rgba(200,255,190,.8), rgba(63,174,46,.4) 65%, rgba(63,174,46,.15)); box-shadow: inset 0 0 0 3px #7dff6a; }
.fx-mark{ transform: translate(-50%,-50%); }
.fx-mark .w3-ic{ width: calc(var(--cell, 76px) * .55); height: calc(var(--cell, 76px) * .55); filter: drop-shadow(0 2px 0 var(--line-ink, #1c130c)); }
.w3-token.fx-busy{ pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .fx-layer{ display:none; } }

/* ---------- Effets « pro » (EchecW3.fxp) ---------- */
.x-layer{ position:absolute; left:0; top:0; pointer-events:none; z-index:22; }
.x-layer > *{ position:absolute; }
.w3-token.x-hold{ z-index:7 !important; }
.x-dim{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; }
.x-flash{ position:absolute; inset:0; z-index:23; pointer-events:none; background:#fffbe6; opacity:0; mix-blend-mode:screen; }
.x-banner{ position:absolute; z-index:24; left:0; right:0; top:calc(var(--cell, 76px) * .18); display:flex; align-items:center; gap:10px; padding:6px 12px 6px 8px;
  background:linear-gradient(90deg, rgba(14,9,6,.96) 70%, rgba(14,9,6,0)); border-top:2px solid var(--k); border-bottom:2px solid var(--k); pointer-events:none; }
.x-banner img{ width:calc(var(--cell, 76px) * 1.2); height:calc(var(--cell, 76px) * .6); object-fit:cover; border-radius:3px; box-shadow:0 0 0 2px var(--k), 0 0 0 3px #1c130c; }
.x-banner .k{ font:700 11px/1 var(--font-sans, "Alegreya Sans", sans-serif); letter-spacing:.2em; text-transform:uppercase; color:var(--k); }
.x-banner .n{ font:900 calc(var(--cell, 76px) * .42)/1 var(--font-display, Cinzel, Georgia, serif); color:#fff8e6; letter-spacing:.04em; text-shadow:0 2px 0 #1c130c, 0 0 12px var(--k); }
.x-toast{ position:absolute; z-index:24; left:50%; bottom:6px; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:4px 10px 4px 6px; white-space:nowrap;
  background:rgba(14,9,6,.94); border:1px solid #c9a46a; border-radius:99px; font:700 12px/1 var(--font-sans, "Alegreya Sans", sans-serif); color:#f3e2bd; pointer-events:none; }
.x-toast.top{ bottom:auto; top:6px; }
.x-toast svg{ width:18px; height:18px; }
.x-slam{ position:absolute; z-index:26; left:50%; top:50%; padding:14px 24px; text-align:center; pointer-events:none; width:max-content; max-width:88%; box-sizing:border-box;
  background:rgba(14,9,6,.92); border:3px solid var(--k); border-radius:10px; box-shadow:0 0 0 2px #1c130c, 0 0 40px var(--k); }
.x-slam .t{ text-wrap:balance; font:900 calc(var(--cell, 76px) * .5)/1.05 var(--font-display, Cinzel, Georgia, serif); color:#fff8e6; letter-spacing:.06em; text-shadow:0 3px 0 #1c130c, 0 0 18px var(--k); }
.x-slam .s{ margin-top:6px; font:700 calc(var(--cell, 76px) * .2)/1.2 var(--font-sans, "Alegreya Sans", sans-serif); color:var(--k); letter-spacing:.08em; text-transform:uppercase; }
/* carte de fin de partie, posée sur le plateau jusqu'au prochain clic */
.x-end{ position:absolute; inset:0; z-index:30; display:grid; place-items:center; background:radial-gradient(circle, rgba(10,6,4,.55), rgba(10,6,4,.85)); cursor:pointer; }
.x-end .xc{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 26px 16px; max-width:80%; text-align:center;
  background:#1d140c; border:3px solid var(--k); border-radius:12px; box-shadow:0 0 0 2px #1c130c, 0 10px 40px rgba(0,0,0,.6), 0 0 30px var(--k); }
.x-end img{ width:calc(var(--cell, 76px) * 2.6); max-width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:6px; box-shadow:0 0 0 3px var(--k), 0 0 0 5px #1c130c; }
.x-end .t{ font:900 calc(var(--cell, 76px) * .6)/1 var(--font-display, Cinzel, Georgia, serif); color:#fff8e6; letter-spacing:.06em; text-shadow:0 3px 0 #1c130c, 0 0 16px var(--k); }
.x-end .s{ font:700 15px/1.3 var(--font-sans, "Alegreya Sans", sans-serif); color:#f3e8d2; }
.x-end .h{ font:400 12px/1 var(--font-sans, "Alegreya Sans", sans-serif); color:#bfae92; }
@media (prefers-reduced-motion: reduce){ .x-layer, .x-flash, .x-dim{ display:none; } }

/* ===== Neutres + coffre ===== */
.w3-token.side-X{ --_side: var(--side-neutral, #7aa23e); }
.w3-glint{ animation: w3-glint 1.8s ease-in-out infinite; }
.w3-spark{ transform-box: fill-box; transform-origin: center; animation: w3-spark 2.6s ease-in-out infinite; }
@keyframes w3-glint{ 0%,100%{ opacity:.25; } 50%{ opacity:.85; } }
@keyframes w3-spark{ 0%,60%,100%{ opacity:0; transform: scale(.3) rotate(0deg); } 75%{ opacity:1; transform: scale(1.1) rotate(45deg); } }
@media (prefers-reduced-motion: reduce){ .w3-glint, .w3-spark{ animation: none; } }

/* Planche de race */
.w3-roster-h{ font: 700 18px/22px var(--font-display, Cinzel, Georgia, serif); letter-spacing:.04em; color: var(--title, #e8b33a); margin: 0 0 8px; }
.w3-roster-row{ display:flex; flex-wrap:wrap; gap:12px; }
.w3-roster-f{ margin:0; width:88px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.w3-roster-f figcaption{ font: 700 13px/16px var(--font-sans, "Alegreya Sans", sans-serif); color: var(--ink, #f3e8d2); text-align:center; }