/* =============================================================================
 *  BW-HERO — Styles (tout préfixé .bw-hero-* pour ne pas casser le thème Azuriom)
 *  À coller dans une feuille de style chargée par la page (ou un <style>).
 * ========================================================================== */

/* La section hero = la "boîte physique" visible — PLEINE PAGE */
.bw-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;                   /* plein écran (corrige les barres mobiles) */
  overflow: hidden;                 /* important : contient la scène */
  background: radial-gradient(ellipse at 50% 30%, #1b2a4a 0%, #0c1322 70%, #070b14 100%);
  isolation: isolate;               /* évite les conflits de z-index avec le thème */
  font-family: 'Montserrat', system-ui, sans-serif;
  transition: background 0.5s ease; /* fondu vers la brume rouge quand le perso meurt */
}
/* Personnage MORT : la brume passe au ROUGE (classe posée par bw-hero.js). */
.bw-hero.bw-hero--dead {
  background: radial-gradient(ellipse at 50% 30%, #5a1414 0%, #2a0c0c 70%, #070b14 100%);
}

/* Canvas 3D : remplit la hero, capte la souris */
.bw-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  touch-action: none;               /* pour pointer events / drag */
  cursor: grab;
}
.bw-hero__canvas:active { cursor: grabbing; }

/* H1 : point d'attention, aligné à GAUCHE, centré verticalement.
   Steve se tient à droite et le regarde. */
.bw-hero__title {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0;
  padding: 0 6%;
  max-width: 52%;
  text-align: left;
  pointer-events: none;             /* les clics passent au canvas (Steve dessous) */
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;        /* full caps */
  letter-spacing: 0.02em;
  line-height: 1.05;
  font-size: clamp(1.8rem, 4.4vw, 3.8rem);
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 0 2px rgba(120, 200, 255, 0.4);
}
.bw-hero__title em {
  font-style: normal;
  color: #5ef0e6;                   /* accent diamant */
}

/* (Barre de vie, champ pseudo et message d'aide retirés.) */