/* ---------- Zone de jeu ---------- */
  #gameWrap{position:relative; flex:1; overflow:hidden}
  canvas{display:block; width:100%; height:100%; cursor:crosshair}
  canvas.moving{cursor:wait}
  canvas.targeting{cursor:cell}

  /* ---------- Sélecteur de forme de tir ---------- */
  /* bottom relevé de 112 à 138px (2026-09-03) : laisse la place à #hpBarBottom
     (css/03), posée juste au-dessus de la barre de capacités. */
  #formPicker{
    position:absolute; left:50%; bottom:138px; transform:translateX(-50%);
    display:none; gap:6px;
    padding:6px;
    background:rgba(20,16,24,.88);
    border:1px solid var(--panel-edge);
    border-radius:8px;
    user-select:none;
  }
  #formPicker.show{display:flex}
  .chip{
    font-size:.75rem; letter-spacing:.04em;
    padding:6px 12px; border-radius:6px;
    border:1px solid var(--panel-edge);
    background:#231d2c; color:var(--ink-dim);
    cursor:pointer;
    transition:border-color .12s, color .12s, background .12s;
  }
  .chip:hover{border-color:var(--accent-dim); color:var(--ink)}
  .chip.active{
    border-color:var(--target); color:var(--ink);
    background:#1e2b33;
    box-shadow:0 0 8px rgba(92,200,216,.35);
  }

  /* ---------- Mode immersif (touche M) : TOUTE l'interface s'efface ---------- */
  body.uiHidden header,
  body.uiHidden #minimap,
  body.uiHidden #consumableBar,
  body.uiHidden #log,
  body.uiHidden #hint,
  body.uiHidden #abilityBar,
  body.uiHidden #formPicker,
  body.uiHidden #enemyTurnBadge{ display:none !important }

  /* ---------- Indicateur « tour des monstres » ---------- */
  #enemyTurnBadge{
    position:absolute; top:12px; left:50%; transform:translateX(-50%);
    display:none; align-items:center; gap:9px;
    background:rgba(40,16,20,.92);
    border:1px solid #7a3844; border-radius:8px;
    color:#ffb0a0; font-size:.85rem; letter-spacing:.06em;
    padding:7px 14px;
    z-index:6; pointer-events:none;
    box-shadow:0 6px 20px rgba(0,0,0,.45);
  }
  #enemyTurnBadge.show{display:flex}

  /* ---------- Indicateur coop « reconnexion en cours » (js/58) ---------- */
  #coopReconnectBadge{
    position:absolute; top:12px; left:50%; transform:translateX(-50%);
    display:none; align-items:center; gap:9px;
    background:rgba(40,30,10,.94);
    border:1px solid #a87a2a; border-radius:8px;
    color:#ffd070; font-size:.85rem; letter-spacing:.06em;
    padding:7px 14px;
    z-index:30; pointer-events:none;
    box-shadow:0 6px 20px rgba(0,0,0,.5);
  }
  #coopReconnectBadge.show{display:flex}
  #coopReconnectBadge .etb-spin{ border-color:rgba(255,208,112,.25); border-top-color:#ffd070 }

  .etb-spin{
    width:14px; height:14px; flex:none; border-radius:50%;
    border:2px solid rgba(255,176,160,.25);
    border-top-color:#ffb0a0;
    animation:etbspin .8s linear infinite;
  }
  @keyframes etbspin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion: reduce){ .etb-spin{animation:none} }

  /* ---------- Indicateur coop « à qui le tour » + compte à rebours ----------
     La taille (transform:scale, appliqué directement en JS — voir
     coopRenderTurnBadge(), js/59) et l'intensité de couleur (classes
     .mine/.urgent ci-dessous) augmentent à l'approche de la fin du minuteur
     d'inactivité, comme demandé explicitement. */
  #coopTurnBadge{
    position:absolute; top:12px; left:50%; transform:translate(-50%,0);
    display:none; align-items:center; gap:9px;
    background:rgba(24,30,42,.92);
    border:1px solid #3a5a78; border-radius:8px;
    color:#a8d0ff; font-size:.85rem; letter-spacing:.06em;
    padding:7px 14px;
    z-index:6; pointer-events:none;
    box-shadow:0 6px 20px rgba(0,0,0,.45);
    transition:background-color .25s, border-color .25s, color .25s;
    transform-origin:50% 0;
  }
  #coopTurnBadge.show{display:flex}
  #coopTurnBadge.mine{
    background:rgba(20,44,28,.92); border-color:#3a8858; color:#a8ffc0;
  }
  #coopTurnBadge.urgent{
    background:rgba(52,18,18,.94); border-color:#b03838; color:#ffb0a0;
  }
  #coopTurnBadge.monster{
    background:rgba(40,26,50,.94); border-color:#8858b0; color:#d8b8ff;
  }
  #coopTurnDot{
    width:10px; height:10px; border-radius:50%; flex:none;
    background:currentColor; box-shadow:0 0 6px currentColor;
  }
  #coopTurnSeconds{ min-width:2em; text-align:right; font-variant-numeric:tabular-nums; }
  /* PULSATION — désormais en CSS (retour Pixel : « trop saccadée, trop
     violente »). Avant, coopRenderTurnBadge() recalculait un scale inline
     toutes les 150 ms sur une sinusoïde de 0,65 à 1,3 s : 5 à 9 paliers par
     battement, d'où l'escalier visible. Une animation CSS est interpolée par
     le compositeur à la fréquence de l'écran — fluide par construction — et
     l'amplitude est nettement réduite (±2,5 %, contre ±8 % + 6 % de fond).
     Elle ne se déclenche QUE quand le chrono est visible (.ticking), donc
     jamais pendant les 10 s de grâce ni au changement de joueur. */
  #coopTurnBadge.ticking{ animation:coopTick 1.15s ease-in-out infinite }
  #coopTurnBadge.ticking.urgent{ animation-duration:.8s }
  @keyframes coopTick{
    0%,100%{ transform:translate(-50%,0) scale(1) }
    50%    { transform:translate(-50%,0) scale(1.025) }
  }
  @media (prefers-reduced-motion: reduce){
    #coopTurnBadge{ transform:translate(-50%,0) !important }
    #coopTurnBadge.ticking, #coopTurnBadge.ticking.urgent{ animation:none }
  }
  body.uiHidden #coopTurnBadge{ display:none !important }

  #btnEndTurn:disabled{opacity:.45; cursor:default}
  .abIcon{width:28px; height:28px; image-rendering:pixelated; vertical-align:middle}