/* «Магазин» (draft): showcase rows in the walnut panel of the inner screens. */
#shop { overflow-y: auto; }
#app:has(#shop.active) #scene::before { opacity: 1; }
#app:has(#shop.active) .scene-slices, #app:has(#shop.active) .scene-velvet { opacity: 0; }
.shop-box { position: relative; margin-top: calc(18px + env(safe-area-inset-top)) !important; margin-bottom: 24px !important; border-radius: 12px;
  padding-left: 26px !important; padding-right: 26px !important;
  background: linear-gradient(rgba(36, 22, 12, .9), rgba(18, 11, 6, .93)); box-shadow: var(--k-rim), 0 24px 60px rgba(0, 0, 0, .6); }
.shop-draft { font-size: 14px; color: #ffb37a; margin: 0 0 6px; }
.shop-list { display: grid; gap: 10px; }
.shop-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 10px;
  background: rgba(20, 12, 6, .7); box-shadow: inset 0 0 0 1px rgba(232, 184, 90, .45), inset 0 0 0 3px #160c06; }
.shop-art { width: 84px; height: 84px; border-radius: 50%; background: #2a1a0e center 18% / cover no-repeat; display: grid; place-items: center;
  box-shadow: 0 0 0 2px #160c06, 0 0 0 4px var(--k-gold, #e8b85a); font: 800 40px 'Fira Sans Extra Condensed', sans-serif; color: rgba(232, 184, 90, .55); }
.shop-item.soon .shop-art { background: radial-gradient(circle at 50% 40%, #4a2e16, #1a0f07); }
.shop-tx b { display: block; font: 800 21px 'Fira Sans Extra Condensed', sans-serif; color: #f6d77a; }
.shop-tx p { margin: 2px 0 0; font-size: 15px; line-height: 1.35; }
.shop-tag { display: inline-block; font: 700 12px 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; letter-spacing: .8px;
  padding: 1px 8px; border-radius: 9px; background: #8a2a1a; color: #ffe8c0; }
.shop-tag.own { background: #2f5a2a; }
.shop-foot { margin-top: 18px; font-size: 14px; color: #cdbb94; }
@media (max-width: 760px) {
  .shop-box { margin-left: 8px !important; margin-right: 8px !important; padding-left: 14px !important; padding-right: 14px !important; }
  .shop-item { grid-template-columns: 56px 1fr; }
  .shop-art { width: 56px; height: 56px; font-size: 28px; }
  .shop-act { grid-column: 1 / -1; justify-self: end; }
}