/* ======================================================================
   LES RAIDS DE BOSS — la barre de vie (public/extra/raid.js).

   Trois mises en page :
     · téléphone (≤ 900 px) : une pastille en bas à gauche, juste au-dessus
       du comptoir des mises (le haut de l'écran est au verdict), qui se
       déplie vers le haut au doigt ;
     · ordinateur : une barre de boss, large, centrée au-dessus du comptoir ;
       aux tables dont le verdict descend là (événement, réflexion), elle se
       range à gauche en pastille ;
     · écran bas (ordinateur couché, ≤ 560 px de haut) : la pastille.
   Aucune balise header/footer (style.css les fixe plein écran).
   ====================================================================== */
#raidX{
  --rd-c:#FF5A6E;
  position:fixed; left:8px; bottom:calc(var(--comptoir-haut,90px) + 8px); z-index:14;
  font:600 12px/1.25 Instrument Sans,system-ui,sans-serif; color:#F1E9D6;
  max-width:calc(100vw - 16px);
}
#raidX[hidden]{display:none}
.rd-tete{
  display:flex; align-items:center; gap:6px; cursor:pointer; margin:0;
  padding:5px 10px 5px 7px; border-radius:99px; border:1.5px solid var(--rd-c);
  background:rgba(12,8,14,.78); color:inherit; font:inherit;
  box-shadow:0 4px 16px rgba(0,0,0,.45),0 0 14px color-mix(in srgb,var(--rd-c) 45%,transparent);
  -webkit-tap-highlight-color:transparent;
}
.rd-ico{font-size:15px; line-height:1; filter:drop-shadow(0 0 4px var(--rd-c))}
.rd-nom,.rd-pv,.rd-temps{display:none}
.rd-barre{position:relative; display:block; width:56px; height:8px; border-radius:6px; overflow:hidden;
  background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.rd-barre i{position:absolute; left:0; top:0; bottom:0; width:100%; border-radius:inherit}
.rd-trace{background:#FFE7A8; transition:width .9s ease .45s}
.rd-vie{background:linear-gradient(90deg,#B3122E,var(--rd-c)); transition:width .22s ease-out}
.rd-pct{font-variant-numeric:tabular-nums; min-width:34px; text-align:right}

/* le coup reçu : la pastille tremble */
#raidX.touche .rd-tete{animation:rdTouche .32s ease-out}
#raidX.critique .rd-tete{animation:rdTouche .5s ease-out; border-color:#FFD23F}
@keyframes rdTouche{
  0%{transform:translate(0,0)} 20%{transform:translate(-3px,1px)} 40%{transform:translate(3px,-1px)}
  60%{transform:translate(-2px,0)} 80%{transform:translate(1px,1px)} 100%{transform:translate(0,0)}
}
#raidX[data-etat="attente"] .rd-barre{display:none}
#raidX[data-etat="attente"] .rd-temps{display:inline}
#raidX[data-etat="victoire"] .rd-tete{border-color:#FFD23F; box-shadow:0 0 18px rgba(255,210,63,.7)}
#raidX[data-etat="victoire"] .rd-vie{background:#FFD23F}
#raidX[data-etat="defaite"] .rd-tete,#raidX[data-etat="annule"] .rd-tete{opacity:.75}

/* le détail, déplié vers le haut */
.rd-corps{
  display:none; position:absolute; left:0; bottom:calc(100% + 6px);
  width:min(320px,calc(100vw - 16px)); max-height:calc(100vh - var(--comptoir-haut,90px) - var(--entete-bas,120px) - 24px); overflow-y:auto;
  padding:10px 12px 11px; border-radius:14px; border:1px solid color-mix(in srgb,var(--rd-c) 60%,transparent);
  background:rgba(12,8,14,.9); box-shadow:0 10px 30px rgba(0,0,0,.55);
}
#raidX.ouvert .rd-corps{display:block}
.rd-titre{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.rd-titre b{font:800 15px/1.15 Fraunces,Georgia,serif; color:var(--rd-c); text-shadow:0 0 10px rgba(0,0,0,.6)}
.rd-titre span{font-variant-numeric:tabular-nums; color:#E8CE79; white-space:nowrap}
.rd-chiffres{margin-top:3px; color:#CFC5AE; font-variant-numeric:tabular-nums}
.rd-devise{margin-top:5px; color:#B9AF99; font-style:italic; font-weight:500}
.rd-mot{margin-top:6px; padding:6px 8px; border-radius:8px; background:rgba(232,206,121,.1); color:#F1E9D6}
.rd-mot:empty{display:none}
.rd-moi{margin-top:7px; color:#F1E9D6}
.rd-moi b{color:#FFD23F}
.rd-top{margin:7px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px}
.rd-top li{display:flex; justify-content:space-between; gap:8px; font-weight:500}
.rd-top li span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rd-top li span:last-child{font-variant-numeric:tabular-nums; color:#E8CE79}
.rd-top li.moi{color:#FFD23F; font-weight:700}
.rd-regle{margin-top:8px; font-size:11px; color:#A89F8A; font-weight:500}
.rd-fin{margin-top:7px; font:800 14px/1.2 Fraunces,Georgia,serif; color:#FFD23F}
.rd-fin:empty{display:none}

/* Ordinateur : la barre de boss, centrée au-dessus du comptoir. */
@media (min-width:901px) and (min-height:561px){
  #raidX{left:50%; transform:translateX(-50%); bottom:calc(var(--comptoir-haut,104px) + 10px); width:min(480px,46vw)}
  #raidX .rd-tete{width:100%; border-radius:12px; padding:6px 12px; gap:10px}
  #raidX .rd-nom{display:block; font:800 14px/1 Fraunces,Georgia,serif; color:var(--rd-c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38%}
  #raidX .rd-barre{flex:1; width:auto; height:16px}
  #raidX .rd-pv{display:block; position:absolute; inset:0; text-align:center; font:700 10.5px/16px Instrument Sans,system-ui,sans-serif; color:#fff; text-shadow:0 1px 2px #000}
  #raidX .rd-temps{display:inline; font-variant-numeric:tabular-nums; color:#E8CE79}
  #raidX .rd-pct{display:none}
  #raidX .rd-corps{left:50%; transform:translateX(-50%); width:min(360px,46vw)}
  /* aux tables où le verdict descend au-dessus du comptoir : la pastille, à gauche */
  body[data-jeu="equipage"] #raidX,body[data-jeu="menteur"] #raidX,body[data-jeu="poneglyphe"] #raidX,
  body[data-jeu="memoire"] #raidX,body[data-jeu="motpont"] #raidX,body[data-jeu="trajet"] #raidX,body[data-jeu="cible"] #raidX,
  body[data-jeu="ordre"] #raidX,body[data-jeu="echecs"] #raidX,body[data-jeu="p4"] #raidX,body[data-jeu="quiz"] #raidX,
  body[data-jeu="grandquiz"] #raidX,body[data-jeu="investir"] #raidX,body[data-jeu="immobilier"] #raidX,
  body[data-jeu="banque"] #raidX,body[data-jeu="coffres"] #raidX{left:auto; right:16px; transform:none; width:auto}
  /* (à droite, pas à gauche : le verdict, la pastille chaud/froid et le fil y sont déjà — audit du 25/09) */
  body[data-jeu="equipage"] #raidX .rd-nom,body[data-jeu="menteur"] #raidX .rd-nom,body[data-jeu="poneglyphe"] #raidX .rd-nom,
  body[data-jeu="memoire"] #raidX .rd-nom,body[data-jeu="motpont"] #raidX .rd-nom,body[data-jeu="trajet"] #raidX .rd-nom,body[data-jeu="cible"] #raidX .rd-nom,
  body[data-jeu="ordre"] #raidX .rd-nom,body[data-jeu="echecs"] #raidX .rd-nom,body[data-jeu="p4"] #raidX .rd-nom,body[data-jeu="quiz"] #raidX .rd-nom,
  body[data-jeu="grandquiz"] #raidX .rd-nom,body[data-jeu="investir"] #raidX .rd-nom,body[data-jeu="immobilier"] #raidX .rd-nom,
  body[data-jeu="banque"] #raidX .rd-nom,body[data-jeu="coffres"] #raidX .rd-nom{display:none}
  body[data-jeu="equipage"] #raidX .rd-barre,body[data-jeu="menteur"] #raidX .rd-barre,body[data-jeu="poneglyphe"] #raidX .rd-barre,
  body[data-jeu="memoire"] #raidX .rd-barre,body[data-jeu="motpont"] #raidX .rd-barre,body[data-jeu="trajet"] #raidX .rd-barre,body[data-jeu="cible"] #raidX .rd-barre,
  body[data-jeu="ordre"] #raidX .rd-barre,body[data-jeu="echecs"] #raidX .rd-barre,body[data-jeu="p4"] #raidX .rd-barre,body[data-jeu="quiz"] #raidX .rd-barre,
  body[data-jeu="grandquiz"] #raidX .rd-barre,body[data-jeu="investir"] #raidX .rd-barre,body[data-jeu="immobilier"] #raidX .rd-barre,
  body[data-jeu="banque"] #raidX .rd-barre,body[data-jeu="coffres"] #raidX .rd-barre{flex:none; width:120px}
  #raidX.gauche .rd-corps{left:auto; right:0; transform:none}
}

/* Le salon a son propre panneau à gauche : sur téléphone la pastille s'efface. */
@media (max-width:900px){
  body[data-jeu="salon"] #raidX{display:none}
}
/* Les tables à panneau (bourse, agence, banque, coffres, boutique) : leur panneau prend le bas de l'écran,
   la barre s'efface (le boss reste dans le bureau) — comme le fil d'actualité. Audit du HUD du 25/09. */
body[data-jeu="investir"] #raidX,body[data-jeu="immobilier"] #raidX,body[data-jeu="boutique"] #raidX{display:none}
@media (max-width:900px){
  body[data-jeu="banque"] #raidX,body[data-jeu="coffres"] #raidX{display:none}
}