/* ════════════════════════════════════════════════════════
   dungeon-wall.css  —  Mur de donjon + effets de torche
   Usage :
     <link rel="stylesheet" href="/css/dungeon-wall.css">
     <div class="dungeon-bg">
       <div class="torch"      style="--tx:15%;--ty:35%"></div>
       <div class="torch-glow" style="--tx:15%;--ty:35%"></div>
       <div class="torch-spot" style="--tx:15%;--ty:35%"></div>
     </div>
   ════════════════════════════════════════════════════════ */

/* ── Quand .dungeon-bg est présent : body transparent + stars supprimées ── */
body:has(> .dungeon-bg) {
  background: transparent !important;
}
body:has(> .dungeon-bg)::before {
  display: none !important;
}

/* ════════════════════════════════════════════════════════
   TEXTURE PIERRE
   Principe : base pierre moyenne (#3a3228), joints très
   sombres (#0a0806) pour contraste net, highlights chauds
   sur les blocs pour simuler la lumière des torches.
   ════════════════════════════════════════════════════════ */

/* Valeurs partagées entre .dungeon-bg et .dungeon-scene */
.dungeon-bg,
.dungeon-scene {
  background-color: #32281e;

  background-image:
    /* ── Vignette bords (obscurité des coins) ── */
    radial-gradient(ellipse 130% 130% at 50% 50%,
      transparent 30%, rgba(0,0,0,.75) 100%),

    /* ── Highlights chauds : blocs éclairés par les torches ── */
    radial-gradient(ellipse 22% 16% at 10%  12%, rgba(140,108,70,.55) 0%, transparent 100%),
    radial-gradient(ellipse 18% 14% at 36%   8%, rgba(120, 92,58,.45) 0%, transparent 100%),
    radial-gradient(ellipse 24% 16% at 62%  16%, rgba(150,115,75,.55) 0%, transparent 100%),
    radial-gradient(ellipse 18% 14% at 86%   9%, rgba(125, 96,62,.45) 0%, transparent 100%),
    radial-gradient(ellipse 20% 16% at 22%  40%, rgba(132,102,66,.45) 0%, transparent 100%),
    radial-gradient(ellipse 24% 14% at 50%  35%, rgba(118, 90,57,.40) 0%, transparent 100%),
    radial-gradient(ellipse 20% 16% at 78%  42%, rgba(138,106,70,.45) 0%, transparent 100%),
    radial-gradient(ellipse 18% 14% at  6%  62%, rgba(128, 98,64,.42) 0%, transparent 100%),
    radial-gradient(ellipse 22% 16% at 34%  68%, rgba(142,110,72,.48) 0%, transparent 100%),
    radial-gradient(ellipse 20% 14% at 64%  64%, rgba(115, 88,56,.40) 0%, transparent 100%),
    radial-gradient(ellipse 18% 16% at 90%  70%, rgba(135,104,68,.44) 0%, transparent 100%),
    radial-gradient(ellipse 22% 14% at 16%  88%, rgba(122, 94,60,.42) 0%, transparent 100%),
    radial-gradient(ellipse 20% 16% at 52%  85%, rgba(145,112,74,.48) 0%, transparent 100%),
    radial-gradient(ellipse 24% 14% at 80%  90%, rgba(118, 90,58,.40) 0%, transparent 100%),

    /* ── Ombres douces entre blocs ── */
    radial-gradient(ellipse 20% 18% at 48%  22%, rgba(0,0,0,.30) 0%, transparent 100%),
    radial-gradient(ellipse 18% 16% at 74%  50%, rgba(0,0,0,.25) 0%, transparent 100%),
    radial-gradient(ellipse 22% 18% at 28%  75%, rgba(0,0,0,.28) 0%, transparent 100%),

    /* ── Joints horizontaux (mortier) — très sombres pour contraste net ── */
    repeating-linear-gradient(
      180deg,
      transparent  0px,
      transparent 56px,
      #0c0a07     56px,
      #0c0a07     60px,
      transparent 60px,
      transparent 116px,
      #0c0a07    116px,
      #0c0a07    120px,
      transparent 120px
    ),

    /* ── Joints verticaux ── */
    repeating-linear-gradient(
      90deg,
      transparent  0px,
      transparent 84px,
      #0c0a07     84px,
      #0c0a07     88px,
      transparent 88px,
      transparent 172px,
      #0c0a07    172px,
      #0c0a07    176px,
      transparent 176px
    ),

    /* ── Couleur de base pierre ── */
    linear-gradient(175deg, #3e3428 0%, #322a1e 45%, #2a2218 100%);
}

/* ── Fond fixe (pose derrière tout le contenu de la page) ── */
.dungeon-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Conteneur scène (variante relative, pour wrapping) ── */
.dungeon-scene {
  position: relative;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════
   TORCHE
   ════════════════════════════════════════════════════════ */

.torch {
  position: absolute;
  left: var(--tx, 20%);
  top:  var(--ty, 25%);
  transform: translate(-50%, -100%);
  width: 28px;
  z-index: 2;
  pointer-events: none;
}

/* Manche */
.torch::before {
  content: '';
  display: block;
  width: 6px;
  height: 30px;
  margin: 0 auto;
  background: linear-gradient(180deg, #7a4812 0%, #522e08 60%, #3a2006 100%);
  border-radius: 3px 3px 2px 2px;
  box-shadow: inset -1px 0 2px rgba(0,0,0,.6), 1px 1px 3px rgba(0,0,0,.5);
}

/* Flamme */
.torch::after {
  content: '🔥';
  display: block;
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  margin-top: -2px;
  transform-origin: bottom center;
  animation: flameFlicker var(--flicker-speed, 1.8s) ease-in-out infinite alternate;
  filter: drop-shadow(0 0 8px #f97316);
}

@keyframes flameFlicker {
  0%   { transform: scaleX(1)    scaleY(1)    rotate(-1deg); opacity: 1;   filter: drop-shadow(0 0 8px #fb923c); }
  20%  { transform: scaleX(.91)  scaleY(1.07) rotate( 1deg); opacity: .93; filter: drop-shadow(0 0 10px #ea580c); }
  40%  { transform: scaleX(1.05) scaleY(.96)  rotate(-2deg); opacity: 1;   filter: drop-shadow(0 0 7px #f97316); }
  60%  { transform: scaleX(.95)  scaleY(1.04) rotate( 1deg); opacity: .9;  filter: drop-shadow(0 0 12px #c2410c); }
  80%  { transform: scaleX(1.03) scaleY(.97)  rotate(-1deg); opacity: .97; filter: drop-shadow(0 0 8px #f97316); }
  100% { transform: scaleX(.93)  scaleY(1.06) rotate( 2deg); opacity: .93; filter: drop-shadow(0 0 9px #ea580c); }
}

/* Halo de lumière sur le mur */
.torch-glow {
  position: absolute;
  left: var(--tx, 20%);
  top:  var(--ty, 25%);
  transform: translate(-50%, -60%);
  width:  var(--glow-w, 380px);
  height: var(--glow-h, 320px);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 35%,
    rgba(255, 170,  50, .30)   0%,
    rgba(240, 120,  15, .18)  30%,
    rgba(210,  80,   5, .09)  58%,
    transparent               80%
  );
  pointer-events: none;
  z-index: 1;
  animation: glowFlicker var(--glow-speed, 2.1s) ease-in-out infinite alternate;
}

@keyframes glowFlicker {
  0%   { opacity: 1;   transform: translate(-50%, -60%) scale(1);    }
  25%  { opacity: .80; transform: translate(-50%, -60%) scale(.95);  }
  50%  { opacity: .95; transform: translate(-50%, -60%) scale(1.04); }
  75%  { opacity: .75; transform: translate(-50%, -60%) scale(.93);  }
  100% { opacity: .88; transform: translate(-50%, -60%) scale(1.02); }
}

/* Tache lumineuse sur le mur sous la flamme */
.torch-spot {
  position: absolute;
  left: var(--tx, 20%);
  top:  var(--ty, 25%);
  transform: translate(-50%, 0%);
  width:  70px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,170,50,.45) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: spotFlicker var(--spot-speed, 1.6s) ease-in-out infinite alternate;
}

@keyframes spotFlicker {
  0%   { opacity: 1;   transform: translate(-50%, 0%) scaleX(1);   }
  50%  { opacity: .55; transform: translate(-50%, 0%) scaleX(.78); }
  100% { opacity: .82; transform: translate(-50%, 0%) scaleX(1.12);}
}

/* ── Utilitaire : couche de contenu par-dessus le mur ── */
.dungeon-content {
  position: relative;
  z-index: 10;
}