/* The market and invites: two windows side by side, gold for trading, cyan for friends. */

.market .section-head { grid-template-columns: auto 1fr; grid-template-areas: "marker marker" "title lead"; align-items: end; column-gap: 64px; }
.market .marker { grid-area: marker; }
.market h2 { grid-area: title; }
.market .lead { grid-area: lead; justify-self: end; max-width: 380px; }
.market .marker img { width: 52px; }

.market-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.market-card { display: grid; grid-template-rows: auto 1fr; background: var(--plate); box-shadow: inset 0 3px 0 var(--accent), inset 0 0 0 2px var(--line); clip-path: var(--corners); }
.market-card-copy { padding: 30px 34px 34px; }
.market-card h3 { margin-bottom: 12px; color: var(--text); }
.market-card p { color: var(--muted); font-size: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tags li { padding: 5px 12px 7px; color: var(--rarity, var(--text)); background: #141822; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rarity, var(--accent)) 35%, transparent); clip-path: var(--corners-small); font-size: 14px; }

/* The merchant walks in with his pack, sets up his stall and sits at it, as in the game's lobby (merchant.png at 6x). */
.merchant-stage { position: relative; height: 250px; overflow: hidden; background: radial-gradient(ellipse 60% 70% at 50% 70%, #ffd4471a, transparent 70%), #151820; }
.merchant-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: url("../assets/dungeon/lineup-floor.png") 0 0 / 192px 64px repeat; opacity: .55; mask: linear-gradient(transparent, #000 40%); }
.merchant {
  --s: 6;
  --frame: calc(32px * var(--s));
  position: absolute;
  left: calc(50% - var(--frame) / 2);
  bottom: calc(-6px * var(--s));
  width: var(--frame);
  height: var(--frame);
  background: url("../assets/ui/merchant.png") calc(-33 * var(--frame)) 0 / calc(1824px * var(--s)) 100% no-repeat;
  image-rendering: pixelated;
  animation:
    merchant-walk .8s steps(4) 0s 5,
    merchant-setup 5.8s steps(29) 4s 1 forwards,
    merchant-idle 4.8s steps(24) 9.8s infinite,
    merchant-move 4s steps(20) 0s 1 backwards;
}
@keyframes merchant-walk { from { background-position-x: 0; } to { background-position-x: calc(-4 * var(--frame)); } }
@keyframes merchant-setup { from { background-position-x: calc(-4 * var(--frame)); } to { background-position-x: calc(-33 * var(--frame)); } }
@keyframes merchant-idle { from { background-position-x: calc(-33 * var(--frame)); } to { background-position-x: calc(-57 * var(--frame)); } }
@keyframes merchant-move { from { translate: calc(-20px * var(--s)) 0; } to { translate: 0 0; } }
.gold-pile { position: absolute; bottom: 26px; width: 104px; height: 52px; background: url("../assets/ui/gold-pile.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.gold-left { left: calc(50% - 250px); }
.gold-right { right: calc(50% - 250px); transform: scaleX(-1); }

.invite-stage { position: relative; display: grid; place-items: center; align-content: center; gap: 22px; height: 250px; overflow: hidden; background: radial-gradient(ellipse 60% 70% at 50% 45%, #7fe3ff1a, transparent 70%), #151820; }
.invite-cards { display: flex; }
.invite-cards .mint-card { margin-inline: -14px; filter: drop-shadow(0 8px 12px #00000070); }
.invite-cards .mint-card:nth-child(1) { rotate: -10deg; translate: 0 8px; }
.invite-cards .mint-card:nth-child(3) { rotate: 10deg; translate: 0 8px; }
.invite-cards .mint-card:nth-child(2) { z-index: 1; translate: 0 -6px; filter: drop-shadow(0 0 16px #7fe3ff55); }
.invite-link { padding: 7px 14px 8px; color: var(--muted); background: #0e1016; box-shadow: inset 0 0 0 2px #7fe3ff40; clip-path: var(--corners-small); font: 14px/1.2 var(--mono); }
.invite-link b { color: var(--accent); font-weight: 400; }

@media (max-width: 1199px) {
  .gold-left { left: 6%; }
  .gold-right { right: 6%; }
}
@media (max-width: 959px) {
  .market .section-head { grid-template-columns: 1fr; grid-template-areas: "marker" "title" "lead"; }
  .market .lead { justify-self: start; }
  .market-grid { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
  .merchant-stage, .invite-stage { height: 210px; }
  .merchant { --s: 5; }
  .gold-pile { width: 78px; height: 39px; }
  .gold-left { left: 2%; }
  .gold-right { right: 2%; }
  .market-card-copy { padding: 24px 20px 28px; }
}