/* The merchant's stall on the road (run.js merchantSheet): an awning, two wooden shelves of wares with their price
   tags, the counter below. */
div.stall { display: flex; flex-direction: column; gap: 10px; }
.st-head { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.st-head h2 { margin: 0; }
.st-gold { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 5px; font: .85rem var(--pixel); }

.st-board { position: relative; padding: 22px 8px 6px; border-radius: 6px; border: 3px solid #3a2410;
  background: linear-gradient(#4a2e17, #3b2412); box-shadow: inset 0 0 0 2px #5a3a1c, 0 4px 0 #1c120a; }
/* the awning, red and cream, with its scalloped edge */
.st-awning { position: absolute; left: -3px; right: -3px; top: -3px; height: 16px; border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(90deg, #a8291c 0 18px, #e6d3a8 18px 36px); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.st-awning::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
  background: radial-gradient(circle at 9px 0, #a8291c 6px, transparent 6.5px) 0 0 / 36px 6px repeat-x,
    radial-gradient(circle at 27px 0, #e6d3a8 6px, transparent 6.5px) 0 0 / 36px 6px repeat-x; }

.st-shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 2px; padding: 6px 2px 0; margin-bottom: 14px; position: relative; }
/* the plank the wares stand on */
.st-shelf::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 26px; height: 7px; border-radius: 2px;
  background: linear-gradient(#9a6a38, #6a4220); box-shadow: 0 3px 0 #2a1a0c; z-index: 0; }
.st-shelf:last-child { margin-bottom: 4px; }

.st-slot { position: relative; z-index: 1; width: 58px; padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.st-slot.on { transform: translateY(-5px); }
.st-slot.on .st-pile { filter: drop-shadow(0 0 6px rgba(255, 220, 140, .8)); }
.st-pile { position: relative; height: 52px; width: 58px; }
.st-pile > i { position: absolute; bottom: 2px; left: calc(13px + var(--k) * 11px - var(--n, 0) * 5.5px); transform: translateY(calc(var(--k) * -1px)); }
.st-pile.n1 > i { left: 13px; } .st-pile.n2 { --n: 1; } .st-pile.n3 { --n: 2; } .st-pile.n4 { --n: 3; }
.st-pile > i:nth-child(2) { z-index: 2; } .st-pile > i:nth-child(3) { z-index: 3; } .st-pile > i:nth-child(4) { z-index: 4; }
.st-pile canvas, .st-pile img { display: block; image-rendering: pixelated; }
.st-pile .st-glyph { width: 48px; height: 48px; image-rendering: pixelated; }
.st-slot.relic .st-pile > i, .st-slot.soin .st-pile > i { left: 5px; }
/* a relic lies on a small velvet cushion */
.st-slot.relic .st-pile::before { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 9px; border-radius: 5px; background: #5a1d4a; box-shadow: inset 0 2px 0 #7a2e66; }
.st-slot.legendary .st-glyph { filter: drop-shadow(0 0 5px rgba(254, 174, 52, .7)); }

/* the price tag hanging under the plank */
.st-tag { position: relative; margin-top: 3px; padding: 2px 6px 2px 4px; min-width: 44px; border-radius: 2px; text-align: center;
  background: #e8d6a8; color: #3a2410; border: 1px solid #8a6a3a; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); font: .7rem var(--pixel); transform: rotate(-2deg); }
.st-slot:nth-child(even) .st-tag { transform: rotate(2deg); }
.st-tag b { display: inline-flex; align-items: center; gap: 2px; font-weight: 400; }
.st-tag::before { content: ""; position: absolute; left: 50%; top: -5px; width: 1px; height: 5px; background: #2a1a0c; }
.st-slot.dear .st-tag { color: #9a2a2a; }
.st-slot.sold { cursor: default; }
.st-slot.sold .st-tag { opacity: .5; }
.st-slot .bag-n { top: 0; right: 4px; z-index: 6; }
.st-slot.sold-one .st-pile > i:last-child { animation: stTake .35s ease-out; }
@keyframes stTake { from { transform: translateY(-14px); opacity: 0; } }

/* the counter: what the ware in hand does, and the buy button */
.st-counter { display: flex; gap: 10px; align-items: center; min-height: 64px; padding: 10px; border-radius: 6px; background: #241912; border: 2px solid #4a3220; }
.st-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.st-what b { font: .85rem var(--pixel); color: #f4e6cf; }
.st-what b.legendary { color: #feae34; }
.st-what small { color: #d8c8ae; line-height: 1.3; }
.st-what .st-left { font: .62rem var(--pixel); color: #b8a68a; }
.st-buy { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 6px; cursor: pointer;
  font: .74rem var(--pixel); color: #2a1608; background: linear-gradient(#ffcf6b, #e8902a); border: 2px solid #ffe2a0; box-shadow: 0 0 10px rgba(255, 190, 80, .3); }
.st-buy b { display: inline-flex; align-items: center; gap: 3px; font-weight: 400; }
.st-buy:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
.st-counter.idle { color: #b8a68a; font-style: italic; }
.st-merchant { width: 48px; height: 48px; image-rendering: pixelated; flex: none; }

/* what the party carries, as on the road */
.st-bag { display: flex; gap: 3px; }
.st-bag .chip { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 2px 3px; font: .72rem var(--pixel); }
.st-bag .chip.st-gold { flex: 1.6 1 0; }
.st-bag .chip.none { opacity: .45; }
.st-bag .chip canvas { image-rendering: pixelated; }

/* the merchant in his corner of the stall, under the awning, with a word now and then */
.st-board { padding-bottom: 6px; }
.st-front { position: relative; }
.st-front .st-counter { padding-right: 78px; }
.st-man { position: absolute; right: 6px; bottom: 6px; z-index: 2; width: 64px; height: 64px; }
.st-man .st-merchant { width: 64px; height: 64px; animation: stBob 1.3s steps(2) infinite; }
@keyframes stBob { 50% { transform: translateY(-2px); } }
.st-say { position: absolute; right: 8px; bottom: 68px; width: max-content; max-width: 210px; padding: 6px 9px; border-radius: 6px; background: #f4ead2; color: #2a1a0e;
  border: 2px solid #2a1a0e; font-size: .85rem; line-height: 1.25; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; pointer-events: none; }
.st-say::after { content: ""; position: absolute; right: 22px; bottom: -8px; border: 6px solid transparent; border-top-color: #2a1a0e; }
.st-say.on { opacity: 1; transform: none; }