/*
 * 2 · Market Stall: Pip's stall in the plaza. A striped orange awning with a scalloped edge,
 * wooden posts and planks, a hanging title board, hanging wooden signs for the sections, crates
 * with paper price tags, and a chalkboard that describes the selected item.
 */
.m--stall {
  --plank: #E5B577; --plank-d: #D29A5A; --wood: #A8652F; --wood-d: #7A4520; --wood-dd: #5E3415;
  --stripe: #E14826; --cream: #FFF8F4; --tag: #FFF6E2; --chalk: #FFF8F4; --board: #22313F;
  --ink: #3A2412; --short: #CC3530; --focus: #263445;
  padding: 74px clamp(14px, 2.6vw, 26px) clamp(14px, 2.6vw, 26px); border-radius: 18px 18px 22px 22px;
  background:
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(110, 60, 20, 0.35) 34px 36px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 3px, transparent 3px 17px, rgba(110, 60, 20, 0.06) 17px 19px, transparent 19px 41px),
    linear-gradient(180deg, #EBC089, var(--plank) 50%, var(--plank-d));
  box-shadow: inset 0 0 0 4px #9A5F2C, 0 18px 34px rgba(80, 40, 10, 0.25);
}
/* awning: stripes, shading and a scalloped edge */
.m--stall .m-awning {
  position: absolute; left: 0; right: 0; top: 0; height: 52px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.14), transparent 45%, rgba(0, 0, 0, 0.1)), repeating-linear-gradient(90deg, var(--stripe) 0 44px, var(--cream) 44px 88px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}
.m--stall .m-awning::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px;
  background: radial-gradient(circle at 22px 0, var(--stripe) 21px, transparent 21.5px) 0 0 / 88px 14px repeat-x, radial-gradient(circle at 66px 0, var(--cream) 21px, transparent 21.5px) 0 0 / 88px 14px repeat-x;
  filter: drop-shadow(0 4px 3px rgba(60, 25, 5, 0.25));
}
.m--stall .m-awning--small { height: 36px; }
/* the stall's posts */
.m--stall .m__deco::before, .m--stall .m__deco::after { content: ''; position: absolute; top: 52px; bottom: 0; width: 12px; background: linear-gradient(90deg, #7A4520, #B5733A 45%, #7A4520); box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); }
.m--stall .m__deco::before { left: 4px; }
.m--stall .m__deco::after { right: 4px; }
.m--stall.m-inv { padding-top: 58px; }
.m--stall.m-inv .m__deco::before, .m--stall.m-inv .m__deco::after { top: 36px; }

/* title board on two ropes */
.m--stall .m__titlebox {
  padding: 10px 20px; border-radius: 10px; color: #FFE7A8; transform: rotate(-1.5deg);
  background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(60, 25, 5, 0.25) 14px 15px), linear-gradient(180deg, var(--wood), #8A5326);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 5px 0 var(--wood-dd), 0 9px 12px rgba(0, 0, 0, 0.25);
}
.m--stall .m__titlebox::before, .m--stall .m__titlebox::after { content: ''; position: absolute; top: -24px; width: 3px; height: 24px; background: #6E4A26; }
.m--stall .m__titlebox::before { left: 20px; }
.m--stall .m__titlebox::after { right: 20px; }
.m--stall .m__title { text-shadow: 0 3px 0 rgba(60, 25, 5, 0.55); }
.m--stall .m__sub { color: #FFF1D6; }

/* Pip's speech bubble, comic style */
.m--stall .m__keeper { background: #fff; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 rgba(60, 25, 5, 0.3); border-radius: 16px; }
.m--stall .m__who { color: var(--stripe); }
.m--stall .m-coin { background: var(--tag); box-shadow: inset 0 0 0 2px var(--wood-d), 0 3px 0 var(--wood-d); }

/* hanging wooden signs */
.m--stall .m__tabs { gap: 12px; margin-top: 8px; padding-top: 16px; }
.m--stall .m-tab {
  --tilt: -2deg; padding: 8px 14px 8px 8px; border-radius: 8px; color: #FFF1D6; transform-origin: 50% -16px; transform: rotate(var(--tilt));
  background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(60, 25, 5, 0.22) 13px 14px), linear-gradient(180deg, #B5733A, #94592A);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 4px 0 var(--wood-dd), 0 6px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.m--stall .m-tab:nth-child(even) { --tilt: 2deg; }
.m--stall .m-tab::before, .m--stall .m-tab::after { content: ''; position: absolute; top: -16px; width: 2px; height: 16px; background: #6E4A26; }
.m--stall .m-tab::before { left: 14px; }
.m--stall .m-tab::after { right: 14px; }
.m--stall .m-tab:hover { --tilt: 0deg; }
.m--stall .m-tab[aria-selected='true'] {
  --tilt: 0deg; color: #fff; animation: m-swing 1.4s ease-in-out;
  background: linear-gradient(180deg, #F2643A, var(--stripe));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 4px 0 #9A2A12, 0 0 0 3px var(--tag), 0 8px 12px rgba(0, 0, 0, 0.2);
}
@keyframes m-swing { 0% { transform: rotate(-6deg); } 30% { transform: rotate(4deg); } 60% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }

/* crates */
.m--stall .m__list { --cell: 150px; --gap: 16px; padding: 18px 14px 14px; border-radius: 12px; background: rgba(90, 50, 20, 0.16); box-shadow: inset 0 4px 10px rgba(60, 30, 5, 0.3); }
.m--stall .m-opt {
  padding: 16px 10px 12px; border-radius: 6px; color: var(--ink);
  background: repeating-linear-gradient(180deg, #D9A15C 0 22px, #B97C3E 22px 25px);
  box-shadow: inset 0 0 0 5px #9A5F2C, inset 0 0 0 7px rgba(255, 255, 255, 0.16), 0 5px 0 #6E3F1E, 0 8px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.m--stall .m-opt__art { margin-top: -4px; filter: drop-shadow(0 6px 4px rgba(60, 25, 5, 0.45)); }
.m--stall .m-opt__name { padding: 3px 8px; border-radius: 4px; background: var(--tag); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }
.m--stall .m-opt__have, .m--stall .m-opt__status { padding: 2px 7px; border-radius: 999px; background: rgba(255, 246, 226, 0.85); }
.m--stall .m-opt__price {
  position: absolute; top: 8px; right: -6px; padding: 5px 9px 5px 15px; color: var(--ink); background: var(--tag); transform: rotate(8deg);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.m--stall .m-opt__price::before { content: ''; position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #9A5F2C; }
.m--stall .m-opt__tag { top: 12px; left: -6px; padding: 4px 10px; border-radius: 3px; transform: rotate(-12deg); box-shadow: 0 2px 0 #7E1F14; }
.m--stall .m-opt__rarity { padding: 2px 7px; border-radius: 999px; background: rgba(38, 52, 69, 0.85); }
.m--stall .m-opt:hover { transform: translateY(-3px); }
.m--stall .m-opt.is-sel {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 5px var(--stripe), inset 0 0 0 7px rgba(255, 255, 255, 0.3), 0 11px 0 #6E3F1E, 0 16px 22px rgba(0, 0, 0, 0.25), 0 0 0 4px #FCAA1A;
}
.m--stall .m-opt.is-sel .m-opt__price { background: #FCAA1A; transform: rotate(-4deg) scale(1.08); }

/* chalkboard */
.m--stall .m-detail {
  padding: 24px; border-radius: 10px; color: var(--chalk);
  background: radial-gradient(ellipse at 25% 15%, rgba(255, 255, 255, 0.09), transparent 50%), radial-gradient(ellipse at 75% 85%, rgba(255, 255, 255, 0.06), transparent 45%), linear-gradient(160deg, #2F4250, var(--board));
  box-shadow: inset 0 0 0 9px #8A5326, inset 0 0 0 11px var(--wood-dd), inset 0 0 40px rgba(0, 0, 0, 0.4), 0 10px 18px rgba(0, 0, 0, 0.28);
}
.m--stall .m-detail__stage { background: radial-gradient(ellipse 40% 10% at 50% 90%, rgba(0, 0, 0, 0.4), transparent 70%); }
.m--stall .m-detail__art { filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.4)); }
.m--stall .m-detail__name { color: #FFE7A8; font-size: clamp(24px, 2.6vw, 32px); text-shadow: 0 0 1px rgba(255, 255, 255, 0.6); }
.m--stall .m-detail__desc { color: #EDE6DA; }
.m--stall .m-detail__stats div { border: 1px dashed rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.05); }
.m--stall .m-detail__total .m-price { color: #FCAA1A; }
.m--stall .m-detail__reason.is-warn { color: #FFB3A6; }
.m--stall .m-step { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); }
.m--stall .m-buy {
  border-radius: 10px; background: linear-gradient(180deg, #F2643A, var(--stripe) 55%, #C2381C);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 5px 0 #8E2A14; transition: transform 0.1s, box-shadow 0.1s;
}
.m--stall .m-buy:active:not([aria-disabled='true']) { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 1px 0 #8E2A14; }
.m--stall .m-detail button:focus-visible { outline-color: #FCAA1A; }
.m--stall .m-project { background: var(--tag); box-shadow: inset 0 0 0 2px var(--wood-d); }

/* backpack: a woven basket of small crates */
.m--stall.m-inv .m__list {
  --slot: 70px; padding: 16px; border-radius: 18px;
  background: repeating-linear-gradient(45deg, rgba(120, 70, 25, 0.35) 0 6px, transparent 6px 12px), repeating-linear-gradient(-45deg, rgba(255, 230, 180, 0.25) 0 6px, transparent 6px 12px), #C99257;
  box-shadow: inset 0 0 0 5px #8A5326, inset 0 6px 12px rgba(0, 0, 0, 0.3);
}
.m--stall .m-slot { border-radius: 8px; background: repeating-linear-gradient(180deg, #E2B070 0 12px, #C28447 12px 14px); box-shadow: inset 0 0 0 3px #8A5326, 0 3px 0 var(--wood-dd); transition: transform 0.2s ease; }
.m--stall .m-slot.is-empty { background: rgba(255, 246, 226, 0.4); box-shadow: inset 0 0 0 2px rgba(138, 83, 38, 0.55); }
.m--stall .m-slot__qty { padding: 1px 5px; border-radius: 4px; background: var(--tag); }
.m--stall .m-slot.is-sel { transform: translateY(-3px); box-shadow: inset 0 0 0 3px var(--stripe), 0 0 0 3px #FCAA1A, 0 6px 0 var(--wood-dd); }
.m--stall .m-cap__bar { background: rgba(94, 52, 21, 0.45); }
.m--stall .m__hint { color: var(--ink); }

@media (max-width: 640px) {
  .m--stall { padding: 66px 16px 16px; }
  .m--stall.m-inv { padding-top: 52px; }
  .m--stall .m__list { --cell: 120px; --gap: 12px; padding: 14px 10px 10px; }
  .m--stall.m-inv .m__list { --slot: 54px; padding: 12px; }
}