/* The forge: blacksmiths, porters and the chest, around the dwarven forge. */

.forge-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }

.forge-scene { position: relative; min-height: 520px; }
.forge-scene > * { position: absolute; }
.forge-halo { inset: 10px -20px 40px; background: radial-gradient(ellipse 50% 50% at 50% 50%, #ff6b3d2e, transparent 64%); }
.forge-halo::after { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; content: ""; border: 1px solid #ff6b3d2a; transform: translate(-50%, -50%) rotate(45deg); }
.forge-entrance { left: 50%; top: 40px; z-index: 1; width: 280px; height: auto; translate: -62% 0; filter: drop-shadow(0 0 26px #ff6b3d40); }
.forge-floor { left: 50%; bottom: 38px; width: 460px; height: 110px; translate: -50% 0; opacity: .85; clip-path: polygon(12% 0, 88% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%); background: repeating-linear-gradient(0deg, transparent 0 21px, #42382c 21px 22px), repeating-linear-gradient(90deg, #26231f 0 39px, #42382c 39px 40px); }
.forge-chest { left: 8%; bottom: 84px; z-index: 2; width: 72px; height: 52px; background: url("../assets/ui/chest-open.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
/* The smith at the anvil (6 frames at 200 ms) and the porter's loop, both at 6x. */
.forge-smith { --s: 6; right: 12%; bottom: 40px; z-index: 3; width: calc(32px * var(--s)); height: calc(32px * var(--s)); background: url("../assets/ui/blacksmith-working.png") 0 0 / calc(192px * var(--s)) 100% no-repeat; image-rendering: pixelated; animation: smith-work 1.2s steps(6) infinite; }
@keyframes smith-work { to { background-position-x: calc(-192px * var(--s)); } }
.forge-porter { --s: 6; right: -2%; bottom: 60px; z-index: 2; width: calc(24px * var(--s)); height: calc(14px * var(--s)); background: url("../assets/ui/porter-loop.png") 0 0 / calc(1200px * var(--s)) 100% no-repeat; image-rendering: pixelated; animation: porter-loop 8.2s infinite; }
/* 32 idle frames at 200 ms, then the bag put down, opened, closed and taken up: 18 frames at 100 ms. */
@keyframes porter-loop {
  0% { background-position-x: 0; animation-timing-function: steps(32, end); }
  78.0488% { background-position-x: calc(-768px * var(--s)); animation-timing-function: steps(18, end); }
  100% { background-position-x: calc(-1200px * var(--s)); }
}

.forge-copy .lead { max-width: 420px; }
.marker-anvil { width: 44px; height: 44px; background: url("../assets/ui/blacksmith-working.png") -9px -15px / 384px 64px no-repeat; image-rendering: pixelated; }
.support-list { margin-top: 36px; }
.support-list article { display: flex; align-items: flex-start; gap: 20px; padding-block: 22px; border-top: 1px solid var(--line); }
.support-icon { display: grid; place-items: center; width: 58px; height: 58px; flex: none; background: #241f1c; box-shadow: inset 0 0 0 2px #4a3a30; clip-path: var(--corners); }
.support-icon img { width: 40px; height: auto; }
.support-smith { width: 54px; height: 54px; background: url("../assets/ui/blacksmith-working.png") -4px -10px / 384px 64px no-repeat; image-rendering: pixelated; }
.support-list h3 { margin-bottom: 6px; font-size: 30px; }
.support-list p { color: var(--muted); font-size: 16px; }
.tier-pips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tier-pips li { display: grid; place-items: center; min-width: 34px; height: 28px; padding-inline: 6px; color: var(--rarity); background: color-mix(in srgb, var(--rarity) 12%, #141822); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--rarity) 55%, transparent); clip-path: var(--corners-small); font: 20px/1 var(--display); }

@media (max-width: 1199px) {
  .forge-grid { gap: 40px; }
  .forge-scene { min-height: 460px; }
  .forge-entrance { width: 210px; }
  .forge-floor { width: 380px; }
  .forge-smith { --s: 5; right: 6%; }
}
@media (max-width: 959px) {
  .forge-grid { grid-template-columns: 1fr; }
  .forge-copy { grid-row: 1; }
  .forge-scene { width: min(520px, 100%); justify-self: center; }
}
@media (max-width: 719px) {
  .forge-scene { min-height: 380px; }
  .forge-entrance { top: 20px; width: 168px; }
  .forge-floor { width: 320px; height: 90px; bottom: 30px; }
  .forge-smith { --s: 4; right: 2%; bottom: 30px; }
  .forge-porter { --s: 4; right: -4%; bottom: 44px; }
  .forge-chest { left: 4%; bottom: 66px; width: 54px; height: 39px; }
  .support-list h3 { font-size: 27px; }
  .support-list p { font-size: 15px; }
}