/* The dungeon: its monsters on a strip of the game's room, its biomes and the boss. */

.dungeon .section-head { grid-template-columns: auto 1fr; grid-template-areas: "marker marker" "title lead"; align-items: end; column-gap: 64px; }
.dungeon .marker { grid-area: marker; }
.dungeon h2 { grid-area: title; }
.dungeon .lead { grid-area: lead; justify-self: end; max-width: 380px; }
.marker-minotaur { width: 44px; height: 44px; background: url("../assets/monsters/minotaur-idle.png") -25px -19px / 1536px 384px no-repeat; image-rendering: pixelated; }

/* The lineup stands on the room's own wall and floor, at 4x. */
.monster-lineup {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 56px;
  padding: 40px 24px 0;
  background:
    url("../assets/dungeon/lineup-wall.png") 0 0 / 96px 64px repeat-x,
    url("../assets/dungeon/lineup-floor.png") 0 64px / 192px 64px repeat,
    #1c2626;
  box-shadow: inset 0 0 0 2px #3f4452, inset 0 -60px 60px -30px #0e1016;
  clip-path: var(--corners);
}
.monster-lineup li { min-width: 0; position: relative; display: grid; justify-items: center; gap: 6px; padding-bottom: 26px; }
/* --s is the art scale; the frames keep 13 empty art pixels under the feet, which the negative margin takes back. */
.monster-sprite {
  --s: 8;
  --frames: 8;
  --sheet: 256px;
  width: calc(32px * var(--s));
  height: calc(32px * var(--s));
  margin: calc(-6px * var(--s)) 0 calc(-12px * var(--s));
  background-size: calc(var(--sheet) * var(--s)) calc(128px * var(--s));
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: monster-idle calc(var(--frames) * .2s) steps(var(--frames)) infinite;
}
@keyframes monster-idle { to { background-position-x: calc(var(--sheet) * var(--s) * -1); } }
.monster-sprite.slime { background-image: url("../assets/monsters/slime-idle.png"); }
.monster-sprite.blueslime { background-image: url("../assets/monsters/blueslime-idle.png"); }
.monster-sprite.orc { --frames: 16; --sheet: 512px; background-image: url("../assets/monsters/orc-idle.png"); }
.monster-sprite.minotaur { --frames: 16; --sheet: 512px; background-image: url("../assets/monsters/minotaur-idle.png"); }
.monster-lineup li:hover .monster-sprite { animation-duration: calc(var(--frames) * .1s); }
.monster-name { z-index: 1; padding: 4px 10px 5px; background: #0e1016d9; clip-path: var(--corners-small); font: 24px/1 var(--display); }
.loot { z-index: 1; display: flex; gap: 4px; }
.loot i { width: 10px; height: 10px; background: #0e1016c0; box-shadow: inset 0 0 0 1px #ffffff20; }
.loot .on { background: var(--torch); box-shadow: 0 0 6px #ffa43a80; }

.dungeon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.biomes, .boss { padding: 34px 34px 36px; background: var(--plate); box-shadow: inset 0 0 0 2px var(--line); clip-path: var(--corners); }
.dungeon-grid h3 { margin-bottom: 14px; }
.dungeon-grid p { color: var(--muted); font-size: 16px; }
.dungeon-grid p + p { margin-top: 12px; }

.biome-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.biome-list li { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; color: var(--biome); background: color-mix(in srgb, var(--biome) 7%, #141822); box-shadow: inset 3px 0 0 var(--biome); clip-path: var(--corners-small); font: 24px/1 var(--display); }
/* A mage holds the element of the biome it casts, as on the room's upper wall. */
.mage-sprite { width: 48px; height: 48px; flex: none; background: url("../assets/effects/mage-wind-holding.png") -21px -18px / 384px 96px no-repeat; image-rendering: pixelated; animation: mage-hold .6s steps(4) infinite; }
.mage-sprite[data-element="ice"] { background-image: url("../assets/effects/mage-ice-holding.png"); }
.mage-sprite[data-element="fire"] { background-image: url("../assets/effects/mage-fire-holding.png"); }
.mage-sprite[data-element="earth"] { background-image: url("../assets/effects/mage-earth-holding.png"); }
@keyframes mage-hold { to { background-position-x: -405px; } }

.boss { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 28px; box-shadow: inset 0 0 0 2px #4a2a2e; background: radial-gradient(ellipse 50% 60% at 18% 50%, #ff6a5c1f, transparent 70%), var(--plate); }
.boss-art { position: relative; height: 200px; }
/* The boss shows in a dark red light: its own art is still to come. */
.boss-sprite {
  position: absolute;
  left: -32px;
  top: -16px;
  width: 256px;
  height: 256px;
  background: url("../assets/monsters/giant-idle.png") 0 0 / 6400px 1024px no-repeat;
  image-rendering: pixelated;
  filter: grayscale(1) brightness(.24) sepia(1) saturate(6) hue-rotate(-28deg) drop-shadow(0 0 1px #ff6a5c) drop-shadow(0 0 20px #ff6a5c70);
  animation: boss-idle 5s steps(25) infinite;
}
@keyframes boss-idle { to { background-position-x: -6400px; } }
.boss-art .mint-card { position: absolute; right: 0; bottom: 0; rotate: 8deg; filter: drop-shadow(0 0 14px #ffd44766); }

@media (max-width: 1199px) {
  .monster-sprite { --s: 7; }
  .dungeon-grid { grid-template-columns: 1fr; }
}
@media (max-width: 959px) {
  .monster-sprite { --s: 6; }
  .dungeon .section-head { grid-template-columns: 1fr; grid-template-areas: "marker" "title" "lead"; }
  .dungeon .lead { justify-self: start; }
}
@media (max-width: 719px) {
  .monster-lineup { grid-template-columns: 1fr 1fr; row-gap: 0; padding-inline: 8px; background-size: 72px 48px, 144px 48px, auto; background-position: 0 0, 0 48px, 0 0; }
  .monster-sprite { --s: 5; }
  .monster-name { font-size: 20px; }
  .biomes, .boss { padding: 26px 20px 28px; }
  .biome-list { grid-template-columns: 1fr; }
  .boss { grid-template-columns: 1fr; }
  .boss-art { width: 220px; height: 200px; justify-self: center; }
}