/* The merchant's corner, as one room: the merchant and the way out under the
   awning, three supplies on a shelf, the chosen supply's rule and its button,
   then the satchel and health. No panels: everything sits on the same wall. */
.shop-view { max-width: 760px; padding-block: clamp(6px, 1.6dvh, 18px) 6px; }
.market { --shop-gold: #edcf94; --figure: clamp(64px, 19vw, 118px); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: clamp(10px, 2dvh, 18px); width: 100%; padding: 0 clamp(12px, 3vw, 28px) clamp(12px, 2dvh, 20px); border-radius: 12px; background: linear-gradient(#353331, #2b2a2e 60%, #262529); box-shadow: 0 12px 40px #0b0e1433; }
.market button { -webkit-appearance: none; }
.shop-backdrop { position: absolute; z-index: -1; inset: 0 0 auto; width: 100%; height: clamp(170px, 40%, 300px); }

/* Under the awning: merchant, greeting, way out. */
.market-top { display: grid; grid-template-columns: clamp(48px, 13vw, 92px) minmax(0, 1fr) clamp(48px, 13vw, 92px); align-items: end; gap: 8px; padding-top: clamp(26px, 4.5dvh, 40px); }
.market-keeper .merchant-art { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 0 #15191e40); }
.market-greeting { text-align: center; padding-bottom: 4px; }
.market-greeting h2 { font: clamp(18px, 5.2vw, 28px)/1.2 Georgia, serif; color: #f6e7cf; text-wrap: balance; }
.market-gift { margin-top: 6px; color: var(--shop-gold); font-size: 12px; line-height: 1.4; text-wrap: balance; }
.market-gift .icon { width: 15px; height: 15px; margin-inline-end: 3px; vertical-align: -3px; }
.market-leave { justify-self: end; align-self: start; display: grid; place-items: center; width: 46px; height: 46px; margin-top: clamp(-10px, -1.5dvh, -4px); padding: 0; border-radius: 50%; border: 1px solid #e8ce9d; border-bottom-width: 3px; border-bottom-color: #9c7d49; background: #d6ba86; color: #30291f; box-shadow: 0 4px 14px #0b0e1466; }
.market-leave:not(:disabled):hover { background: #e8ce9d; }
.market-leave .icon { width: 22px; height: 22px; }

/* The shelf: supplies stand on one wooden board; the chosen one is lit. */
.market-stock { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(4px, 2vw, 16px); }
.market-stock::before { content: ''; position: absolute; z-index: -1; inset-inline: calc(-1 * clamp(12px, 3vw, 28px)); top: calc(var(--figure) - 2px); height: 9px; background: #6a4d3c; border-top: 3px solid #9f7751; box-shadow: 0 4px 0 #1f1a1b80; }
.market-offer { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 0 4px 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: center; }
.market-offer[aria-pressed="true"] { background: radial-gradient(ellipse at 50% 30%, #efc88226, transparent 72%); }
.market-offer:focus-visible { outline-offset: 2px; }
.offer-figure { display: grid; place-items: end center; width: 100%; height: var(--figure); padding-bottom: 4px; }
.supply-art { display: block; width: 64px; height: 64px; image-rendering: pixelated; flex-shrink: 0; }
.offer-figure .supply-art { width: calc(var(--figure) * .82); height: calc(var(--figure) * .82); transition: transform .18s; filter: drop-shadow(0 4px 0 #13182344); }
.market-offer:hover .supply-art, .market-offer[aria-pressed="true"] .supply-art { transform: translateY(-4px); }
.offer-name { margin-top: 10px; font: clamp(14px, 4vw, 19px)/1.2 Georgia, serif; color: #fff0d7; overflow-wrap: anywhere; hyphens: auto; }
.offer-short { min-height: 15px; color: #cdbfae; font-size: 11px; line-height: 1.35; }
.offer-price { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 58px; margin-top: 4px; padding: 4px 11px; border-radius: 999px; background: #1d1a1d; color: #f2cf8c; font-size: 14px; font-weight: 650; }
.market-offer[aria-pressed="true"] .offer-price { box-shadow: 0 0 0 2px #e4be78; }
.offer-price .icon { width: 15px; height: 15px; }
.offer-price.unaffordable { color: #e5a79a; }
.is-sold .offer-figure { opacity: .35; filter: grayscale(.6); }
.is-sold :is(.offer-name, .offer-short) { color: #a59d94; }
.is-sold .offer-price { color: #bcb7aa; font-size: 12px; }

/* The chosen supply: its full rule, with its button beside it. */
.market-inspection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 46px; }
.inspection-copy { flex: 1 1 12rem; min-width: 0; font-size: 13px; line-height: 1.5; color: #d4cec6; }
.inspection-copy strong { margin-inline-end: 3px; color: #f4e4ca; font-weight: 600; }
.inspection-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-inline-start: auto; }
.shop-reason { flex-basis: 100%; text-align: end; font-size: 11px; line-height: 1.4; color: #d8bca5; }
.market-sold { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; color: #c9c2ad; font-size: 13px; }
.market-sold .icon { width: 16px; height: 16px; }
.market-primary, .market-secondary, .market-discard { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 8px 16px; border-radius: 10px; font-size: 13px; line-height: 1.3; }
.market-primary { border: 1px solid #d1aa6b; border-bottom-width: 3px; background: #e2bd80; color: #29252a; font-weight: 650; }
.market-primary:hover:not(:disabled) { background: #f4d59e; }
.market-secondary { border: 1px solid #8b7a6580; background: #302e31; color: #e3cba6; }
.market-secondary:hover:not(:disabled) { border-color: #b49a74; background: #48403a; }
.market-discard { border: 1px solid transparent; background: transparent; color: #b9b2aa; padding-inline: 8px; font-size: 12px; }
.market-discard:hover:not(:disabled) { color: #f1b5a1; background: #b96c5612; }
.market :is(.market-primary, .market-secondary, .market-discard) .icon { width: 16px; height: 16px; }

/* What you carry, and how you're holding up. */
.market-pack { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #a992722e; }
.pack-slots { display: flex; gap: 8px; }
.pack-item, .pack-empty { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #8b80704d; border-radius: 10px; background: #1f1e2266; }
.pack-item[aria-pressed="true"] { border-color: #d8b779; background: #b99b601f; }
.pack-item:hover { background: #ebce9015; }
.pack-item .supply-art { width: 32px; height: 32px; }
.pack-empty { border-style: dashed; background: transparent; }
.pack-empty .icon { width: 18px; height: 18px; color: #807b724d; }
.market-health { display: grid; grid-template-columns: 16px auto; align-items: center; gap: 3px 6px; min-width: 76px; font-size: 13px; }
.market-health > .icon { width: 16px; height: 16px; color: #e99d89; }
.market-health strong { font-weight: 600; white-space: nowrap; }
.market-health strong span { font-weight: 400; font-size: 11px; color: #b2aaa6; }
.market-health-meter { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: #171c24; overflow: hidden; }
.market-health-meter i { display: block; height: 100%; background: #c68b76; }

/* After a boss: bank the haul or carry it on. */
.market-checkpoint { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid #a992722e; }
.checkpoint-haul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 10px; letter-spacing: .5px; color: #c3b9aa; }
.checkpoint-haul > .icon { width: 16px; height: 16px; }
.checkpoint-haul strong { display: inline-flex; align-items: center; gap: 5px; color: #efd198; font-size: 18px; font-weight: 600; letter-spacing: 0; }
.checkpoint-haul strong .icon { width: 16px; height: 16px; }
.checkpoint-haul span .icon { width: 14px; height: 14px; vertical-align: -2px; }
.checkpoint-risk { font-size: 12px; line-height: 1.5; color: #b9b0a5; }
.checkpoint-risk strong { color: #e0cab1; }
.checkpoint-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.checkpoint-actions > button { flex: 1 1 9rem; }

.market-elite { text-align: center; color: var(--shop-gold); font-size: 12px; }
.market-legacy-gift { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; color: var(--shop-gold); font-size: 12px; }
:lang(ar) .market :is(h2, .offer-name), :lang(ko) .market :is(h2, .offer-name) { font-family: inherit; }
/* Arriving at the merchant: the stall rises in, the awning drops, the merchant
   pops up and the supplies hop onto the shelf one by one. Only on arrival. */
.shop-view.entering .market { animation: market-rise .4s cubic-bezier(.2, .9, .3, 1.12) both; }
.shop-view.entering .shop-backdrop { animation: awning-drop .5s .06s cubic-bezier(.2, .9, .3, 1.25) both; }
.shop-view.entering .market-keeper { animation: shop-pop .36s .18s cubic-bezier(.2, .9, .3, 1.45) both; }
.shop-view.entering :is(.market-greeting, .market-leave) { animation: shop-fade-up .3s .24s ease-out both; }
.shop-view.entering .market-offer { animation: shop-pop .34s cubic-bezier(.2, .9, .3, 1.45) both; animation-delay: calc(.3s + var(--n, 0) * .08s); }
.shop-view.entering :is(.market-inspection, .market-legacy-gift, .market-pack, .market-elite, .market-checkpoint) { animation: shop-fade-up .3s .52s ease-out both; }
@keyframes market-rise { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@keyframes awning-drop { from { transform: translateY(-46px); } }
@keyframes shop-pop { from { opacity: 0; transform: translateY(12px) scale(.6); } }
@keyframes shop-fade-up { from { opacity: 0; transform: translateY(8px); } }
/* After a boss: three relic cards, a take button for the chosen one, and a skip. */
.relic-pick { position: relative; z-index: 1; margin: 0 0 14px; padding: 12px; border: 1px solid #e2bd8055; border-radius: 12px; background: #211f23f2; box-shadow: 0 8px 24px #0006; }
.relic-pick h3 { margin: 0 0 10px; color: var(--shop-gold); font-family: Georgia, serif; font-size: 17px; font-weight: 400; text-align: center; }
.relic-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.relic-card { --ring: #9aa3b0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px 8px; border: 1px solid color-mix(in srgb, var(--ring) 45%, transparent); border-radius: 10px; background: #26252acc; color: #e9e2d6; text-align: center; animation: relic-rise .35s ease backwards; animation-delay: calc(var(--n) * 70ms); }
.relic-card.uncommon { --ring: #8fbbe6; }
.relic-card.rare { --ring: #e6c27f; }
.relic-card.chosen { border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring), 0 0 16px color-mix(in srgb, var(--ring) 40%, transparent); background: #34312f; }
.relic-art { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--ring) 70%, transparent); border-radius: 50%; color: var(--ring); background: #1d222b; }
.relic-art .icon { width: 22px; height: 22px; }
.relic-card strong { font-size: 13px; font-weight: 650; line-height: 1.2; }
.relic-card > span:not(.relic-art) { color: #c9c0b2; font-size: 11px; line-height: 1.35; }
.relic-card small { margin-top: auto; color: var(--ring); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.relic-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
@keyframes relic-rise { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .relic-card { animation: none; } }