/* =========================================================
   DUNGEON MASTER HANGMAN — PREMIUM FIERY DUNGEON SCENE
   Uses trapped_in_the_fiery_dungeon.png as the cinematic art.
   ========================================================= */

#scene {
  min-height: clamp(390px, 47vw, 610px);
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.02),
      rgba(0, 0, 0, 0.14)
    ),
    url("/assets/trapped_in_the_fiery_dungeon.png")
      center center / 100% 100% no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(214, 139, 34, 0.26),
    inset 0 -28px 65px rgba(255, 68, 0, 0.14),
    0 10px 30px rgba(0, 0, 0, 0.54);
}

/* Retire the temporary procedural background pieces. */
#scene > .stone-wall,
#scene > .arch-shadow,
#scene > .torch,
#scene > .hanging-chain {
  display: none !important;
}

/*
  Darkly veil the cage that is baked into the full background.
  The live #pirate layer below redraws that exact center crop and
  can still lower through all six authoritative danger stages.
*/
#scene::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 31.8%;
  top: -2%;
  width: 36.4%;
  height: 88%;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 57% 70% at 50% 43%,
      rgba(1, 1, 2, 0.94) 0 49%,
      rgba(2, 2, 3, 0.80) 61%,
      rgba(2, 2, 3, 0.34) 76%,
      transparent 100%
    );
  filter: blur(3px);
}

/* Animated heat and lava glow. */
#scene::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: -8%;
  right: -8%;
  bottom: -15%;
  height: 53%;
  pointer-events: none;
  opacity: 0.22;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(255, 245, 143, 0.46) 0 8%,
      rgba(255, 113, 8, 0.36) 23%,
      rgba(226, 35, 0, 0.20) 43%,
      transparent 68%
    );
  mix-blend-mode: screen;
  filter: blur(7px);
  transform-origin: 50% 100%;
  animation: premiumDungeonHeat 3.2s ease-in-out infinite;
  transition: opacity 600ms ease, transform 700ms ease;
}

/*
  Reuse the same full artwork inside the live cage element.
  Its center crop is aligned over the background at stage zero.
*/
#scene #pirate.cage-rig {
  z-index: 6;
  left: 50% !important;
  width: 34%;
  height: 85%;
  margin: 0;
  border: 0;
  border-radius: 44% 44% 28% 28%;
  background:
    url("/assets/trapped_in_the_fiery_dungeon.png")
      center top / 294% 118% no-repeat;
  box-shadow: none;
  transform: translateX(-50%) !important;
  transform-origin: 50% 0;
  filter:
    drop-shadow(0 16px 18px rgba(0, 0, 0, 0.72))
    saturate(1.05)
    contrast(1.04);
  -webkit-mask-image:
    radial-gradient(
      ellipse 73% 82% at 50% 47%,
      #000 0 63%,
      rgba(0, 0, 0, 0.94) 76%,
      transparent 100%
    );
  mask-image:
    radial-gradient(
      ellipse 73% 82% at 50% 47%,
      #000 0 63%,
      rgba(0, 0, 0, 0.94) 76%,
      transparent 100%
    );
  transition:
    top 850ms cubic-bezier(.2, .82, .2, 1),
    filter 450ms ease;
  animation: premiumDungeonCageFloat 4.6s ease-in-out infinite;
}

/* Hide the original emoji/procedural cage pieces inside #pirate. */
#scene #pirate.cage-rig > * {
  visibility: hidden !important;
}

/* Keep authoritative six-stage lowering, tuned for the art crop. */
#scene.danger-0 #pirate.cage-rig { top: -1.5%; }
#scene.danger-1 #pirate.cage-rig { top: 1.5%; }
#scene.danger-2 #pirate.cage-rig { top: 4.8%; }
#scene.danger-3 #pirate.cage-rig { top: 8.2%; }
#scene.danger-4 #pirate.cage-rig { top: 11.8%; }
#scene.danger-5 #pirate.cage-rig {
  top: 15.6%;
  filter:
    drop-shadow(0 18px 20px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 13px rgba(255, 91, 8, 0.63))
    saturate(1.12)
    contrast(1.06);
}
#scene.danger-6 #pirate.cage-rig {
  top: 19.8%;
  filter:
    drop-shadow(0 18px 20px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 23px rgba(255, 61, 0, 0.92))
    saturate(1.20)
    contrast(1.08);
}

/* Rising heat as mistakes accumulate. */
#scene.danger-1::after { opacity: 0.27; }
#scene.danger-2::after { opacity: 0.32; }
#scene.danger-3::after { opacity: 0.39; transform: scaleY(1.04); }
#scene.danger-4::after { opacity: 0.48; transform: scaleY(1.10); }
#scene.danger-5::after { opacity: 0.60; transform: scaleY(1.18); }
#scene.danger-6::after { opacity: 0.76; transform: scaleY(1.28); }

/* Use the old lava element only as a faint moving highlight. */
#scene .lava-threat {
  z-index: 5;
  opacity: 0.17;
  mix-blend-mode: screen;
  filter: brightness(1.16) saturate(1.18) blur(1px);
}

/* Align the live danger tracker with the chain in the artwork. */
#scene .danger-ladder {
  left: 67.4%;
  top: 10.5%;
  z-index: 9;
  padding: 5px 7px 8px;
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      rgba(9, 7, 6, 0.78),
      rgba(9, 7, 6, 0.44)
    );
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(2px);
}

#scene .danger-ladder small {
  border-color: #a56b25;
  background: rgba(27, 18, 10, 0.90);
  color: #ffd481;
  box-shadow: inset 0 0 8px rgba(255, 128, 13, 0.10);
}

#scene .danger-step {
  border-color: #4f4d49;
  background: linear-gradient(180deg, #1a1b1c, #090a0b);
}

#scene .danger-step.active {
  border-color: #ffb435;
  background: radial-gradient(circle, #aa3308, #5e1703);
  color: #fff5c4;
  box-shadow:
    0 0 12px #ff5b08,
    0 0 25px rgba(255, 80, 0, 0.46);
}

/* More polished parchment card, positioned like the mockup. */
#scene .wrong-card {
  right: 2.5%;
  top: 4%;
  min-width: clamp(170px, 21%, 245px);
  border-color: #76552c;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.34), transparent 28%),
    linear-gradient(135deg, #efdca9, #bc9555);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.58),
    inset 0 0 22px rgba(111, 67, 20, 0.18);
}

#scene .scene-message {
  bottom: 2.4%;
  border-color: #9c6126;
  background: rgba(5, 4, 3, 0.82);
  color: #ffe1a2;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(2px);
}

/* Existing wrong-guess and finale animations remain functional. */
#scene #pirate.effect-step {
  animation: premiumDungeonCageDrop 820ms ease-out;
}

#scene.effect-victory #pirate.cage-rig {
  animation: premiumDungeonCageRescue 1.8s ease-in-out;
}

#scene.effect-defeat #pirate.cage-rig,
#scene #pirate.effect-eaten-pirate {
  animation: premiumDungeonCageBurn 2.7s ease-in forwards;
}

@keyframes premiumDungeonHeat {
  0%, 100% {
    filter: blur(7px) brightness(0.95);
  }
  50% {
    filter: blur(10px) brightness(1.22);
  }
}

@keyframes premiumDungeonCageFloat {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-3px);
  }
}

@keyframes premiumDungeonCageDrop {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  45% {
    transform: translateX(-50%) translateY(17px);
  }
  72% {
    transform: translateX(-50%) translateY(-4px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes premiumDungeonCageRescue {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  30% {
    transform: translateX(-50%) translateY(10px);
  }
  100% {
    opacity: 0.18;
    transform: translateX(-50%) translateY(-92%);
  }
}

@keyframes premiumDungeonCageBurn {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
  55% {
    opacity: 1;
    transform: translateX(-50%) translateY(32%) rotate(4deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(82%) rotate(12deg) scale(0.78);
  }
}

/*
  On narrow phones the full cinematic image is allowed to crop rather
  than becoming severely stretched. The baked cage remains visible;
  the invisible live cage still preserves all game state and effects.
*/
@media (max-width: 760px) {
  #scene {
    min-height: clamp(340px, 96vw, 475px);
    background-size: cover;
    background-position: center center;
  }

  #scene::before {
    display: none;
  }

  #scene #pirate.cage-rig {
    opacity: 0 !important;
  }

  #scene .danger-ladder {
    left: 61%;
    top: 10%;
    transform: scale(0.82);
    transform-origin: top center;
  }

  #scene .wrong-card {
    right: 2%;
    top: 3%;
    min-width: 146px;
    padding: 10px 11px;
    transform: scale(0.88);
    transform-origin: top right;
  }

  #scene .scene-message {
    width: 88%;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #scene::after,
  #scene #pirate.cage-rig,
  #scene #pirate.effect-step {
    animation: none !important;
  }
}