/* ===== Shared dungeon stone wall (PixelLab pixel-art tiles) =====
   A seamless pixel-art stone wall tile is repeated as the base. Each floor
   overrides --floor-tile (for the volcanic lair) and --floor-tint to drive
   the cold -> red descent. Warm torch-light pools + a vignette add depth. */
.dungeon-section {
  --floor-tint: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  --floor-tile: url("../../assets/tiles/floor1-stone-bg64.png");
  position: relative;
  background-color: #0a0910;
  background-image:
    /* Per-floor red descent tint (topmost) */
    var(--floor-tint),
    /* Warm torch-light pools on the wall */
    radial-gradient(50% 40% at 9% 22%, rgba(255, 150, 50, 0.10), transparent 70%),
    radial-gradient(50% 40% at 91% 68%, rgba(255, 140, 45, 0.09), transparent 70%),
    /* Depth vignette */
    radial-gradient(135% 108% at 50% 16%, transparent 38%, rgba(0, 0, 0, 0.62)),
    /* Seamless pixel-art stone wall tile */
    var(--floor-tile);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position: center, center, center, center, top center;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 256px 256px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ===== FLOOR 1: Entrance ===== */
.entrance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-top: var(--nav-height);
  text-align: center;
  /* Floor 1 — cold neutral stone, only a faint warmth from the gate torches */
  --floor-tint: linear-gradient(to top, rgba(200, 95, 25, 0.06), rgba(0, 0, 0, 0) 45%);
}

.entrance-content {
  position: relative;
  z-index: 2;
}

.stone-arch {
  padding: 2rem;
}

.arch-text {
  max-width: 600px;
  margin: 0 auto;
}

.entrance-greeting {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  animation: flicker 3s infinite;
}

.entrance-name {
  font-family: var(--font-pixel);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  text-shadow: 0 0 20px var(--accent-glow);
}

.entrance-title-box {
  margin-bottom: 1.5rem;
}

.title-class {
  display: block;
  font-size: 0.7rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.title-subclass {
  display: block;
  font-size: 0.55rem;
  color: var(--text-muted);
}

.entrance-description {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.entrance-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Scroll Hint */
.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.5rem;
  animation: bounce 2s infinite;
}

.scroll-arrow {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

/* ===== FLOOR 2: Corridors ===== */
.corridors {
  /* Floor 2 — a first hint of warmth creeping up from below */
  --floor-tint: linear-gradient(to top, rgba(195, 50, 14, 0.20), rgba(195, 50, 14, 0.06) 60%);
}

.corridor-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

/* ===== FLOOR 3: Armory ===== */
.armory {
  /* Floor 3 — ember-lit forge halls */
  --floor-tint: linear-gradient(to top, rgba(205, 48, 12, 0.30), rgba(205, 52, 14, 0.10) 60%);
}

.armory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.weapon-rack {
  background-color: rgba(12, 10, 18, 0.85);
  border: 16px solid transparent;
  border-image: url('../../assets/sprites/ui-panel-frame.png') 20% stretch;
  border-image-repeat: stretch;
  border-radius: 0;
  padding: 1.5rem;
  image-rendering: pixelated;
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: visible;
}

.weapon-rack::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.weapon-rack:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(232, 148, 10, 0.05);
}

.weapon-rack:hover::before {
  opacity: 1;
}

.rack-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.rack-header h3 {
  font-size: 0.6rem;
  color: var(--accent);
}

.rack-icon {
  font-size: 1.5rem;
}

/* ===== FLOOR 4: Treasury ===== */
.treasury {
  /* Floor 4 — the heat intensifies, red washing over the stone */
  --floor-tint: linear-gradient(to top, rgba(212, 44, 8, 0.42), rgba(212, 58, 12, 0.15) 60%);
}

.treasure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* ===== FLOOR 5: Dragon's Lair ===== */
.dragon-lair {
  /* Floor 5 — the dragon's lair: molten volcanic rock with lava cracks */
  --floor-tile: url("../../assets/tiles/floor5-volcanic-bg64.png");
  --floor-tint: linear-gradient(to top, rgba(225, 55, 0, 0.42), rgba(200, 30, 0, 0.16) 60%);
}

.lava-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  pointer-events: none;
  animation: lavaPulse 4s ease-in-out infinite;
}

.lava-glow {
  background: linear-gradient(to top, rgba(212, 64, 0, 0.18), transparent);
}

.dragon-scene {
  text-align: center;
  margin-bottom: 2.5rem;
}

.dragon-message {
  font-size: 0.6rem;
  color: var(--text-muted);
  font-style: italic;
  max-width: 500px;
  margin: 0 auto;
}

/* Dragon Lair layout: form left, dragon sprite right */
.lair-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.lair-dragon-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  position: relative;
  overflow: visible;
}

/* ===== Dragon Breathing Sprite (Floor 5) =====
   9-frame sprite sheet: 2160x240 (each frame 240x240).
   Animate background-position-x from 0 to -2160px in 9 steps. */
.dragon-breathing {
  /* --frame drives both the element box and the sprite-sheet scale, so the
     dragon's layout footprint always matches its visual size. Kept fluid so
     it never overflows its column in the two-column layout. */
  --frame: min(440px, 40vw);
  width: var(--frame);
  height: var(--frame);
  background-image: url("../../assets/sprites/dragon-breathing.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: calc(var(--frame) * 9) var(--frame);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 24px rgba(255, 60, 0, 0.35));
  animation: dragonBreathe 3s steps(9) infinite;
}

@keyframes dragonBreathe {
  from { background-position-x: 0; }
  to { background-position-x: calc(var(--frame) * -9); }
}

/* Larger screens: fill the lair area more */
@media screen and (min-width: 1024px) {
  .dragon-breathing {
    --frame: min(500px, 40vw);
  }
}

/* Reduced motion: hold on the resting frame, no looping */
@media (prefers-reduced-motion: reduce) {
  .dragon-breathing {
    animation: none;
    background-position: 0 0;
  }
}

/* ===== Dungeon Gate Sprite (Floor 1) ===== */
.entrance-gate-sprite {
  width: 240px;
  height: 240px;
  background: url('../../assets/sprites/dungeon-gate.png?v=2') center / contain no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  margin: 0 auto 1.5rem;
  filter: drop-shadow(0 0 26px rgba(232, 148, 10, 0.4));
}

/* Shared sprite rendering rules */
[class*="-sprite"] {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Scale down gate on mobile */
@media screen and (max-width: 768px) {
  .entrance-gate-sprite {
    width: 170px;
    height: 170px;
    margin-bottom: 1rem;
  }

  /* Single-column: dragon grows toward the form's width */
  .dragon-breathing {
    --frame: min(500px, 84vw);
  }
}

/* ===== Wall Decorations (positioned sprites along walls) ===== */
.wall-decor {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* Sit in the empty gutter just outside the centered content container */
.wall-decor.wall-left {
  left: calc((100% - var(--max-width)) / 2 - 84px);
}

.wall-decor.wall-right {
  right: calc((100% - var(--max-width)) / 2 - 84px);
}

.decor-sprite {
  width: 42px;
  height: 42px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform: scale(2);
  filter: drop-shadow(0 0 8px rgba(232, 148, 10, 0.3));
}

/* Torches: static sprite with a subtle, slow firelight glow */
.decor-torch {
  filter:
    drop-shadow(0 0 6px rgba(255, 150, 55, 0.75))
    drop-shadow(0 0 16px rgba(255, 95, 20, 0.45));
  animation: torchGlowPulse 2.6s ease-in-out infinite alternate;
}

@keyframes torchGlowPulse {
  0% {
    filter:
      drop-shadow(0 0 5px rgba(255, 140, 45, 0.55))
      drop-shadow(0 0 12px rgba(255, 80, 15, 0.32));
  }
  100% {
    filter:
      drop-shadow(0 0 9px rgba(255, 165, 60, 0.9))
      drop-shadow(0 0 22px rgba(255, 100, 25, 0.55));
  }
}

/* Mirrored right-side torch keeps its glow while flipped */
.decor-torch.decor-mirrored {
  animation: torchGlowPulseMirror 2.6s ease-in-out infinite alternate;
}

@keyframes torchGlowPulseMirror {
  0% {
    filter:
      drop-shadow(0 0 5px rgba(255, 140, 45, 0.55))
      drop-shadow(0 0 12px rgba(255, 80, 15, 0.32));
  }
  100% {
    filter:
      drop-shadow(0 0 9px rgba(255, 165, 60, 0.9))
      drop-shadow(0 0 22px rgba(255, 100, 25, 0.55));
  }
}

/* Reduced motion: hold a steady glow, no pulse */
@media (prefers-reduced-motion: reduce) {
  .decor-torch,
  .decor-torch.decor-mirrored {
    animation: none;
  }
}

.decor-sprite.decor-large {
  width: 64px;
  height: 64px;
  transform: scale(1.8);
}

/* Mirror right-side decorations */
.decor-sprite.decor-mirrored {
  transform: scale(2) scaleX(-1);
}

.decor-sprite.decor-large.decor-mirrored {
  transform: scale(1.8) scaleX(-1);
}

/* Hide wall decorations once the side gutters are too narrow to hold them
   without overlapping the centered content (container is --max-width wide,
   each sprite needs ~90px of gutter). */
@media screen and (max-width: 1280px) {
  .wall-decor {
    display: none;
  }
}