/* 都市島店舖的店內畫面（平面、整間店一眼看完） */
.shop-view { position: fixed; inset: 0; z-index: 24; background: rgba(40, 60, 70, .55); display: grid; place-items: center; padding: 8px; overflow: auto; }
.shop-view[hidden] { display: none; }
.shop-wrap { width: min(880px, 100%); display: flex; flex-direction: column; gap: 8px; }
.shop-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden;
  background-color: var(--floor, #d9b48a);
  background-image: linear-gradient(var(--wall, #f3ead8) 0 60%, var(--floor, #d9b48a) 60% 100%);
  background-size: cover; background-position: center; box-shadow: 0 10px 30px rgba(40, 60, 70, .35);
}
.shop-top { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; background: linear-gradient(rgba(253, 248, 232, .95), rgba(253, 248, 232, .7) 80%, transparent); z-index: 3; }
.shop-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.shop-title b { font-size: 16px; }
.shop-stars { color: #e3a62f; font-size: 14px; letter-spacing: 1px; }
.shop-sub { font-size: 12px; color: var(--ink-soft); }
.shop-floors { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 60%; }
.shop-floors .chip { font-size: 12px; padding: 2px 8px; }
.shop-close { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; font-size: 16px; box-shadow: 0 2px 4px rgba(60, 50, 30, .2); flex: none; }
.shop-shelf { position: absolute; left: 3%; top: 30%; width: 17%; background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 2; }
.shop-shelf-ic { width: 100%; height: auto; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .2)); }
.shop-seat { position: absolute; width: 15%; transform: translate(-50%, -100%); z-index: 2; }
.shop-seat-ic { width: 100%; height: auto; display: block; }
.shop-seat-fallback { width: 100%; aspect-ratio: 1.4; border-radius: 12px; background: rgba(120, 80, 40, .35); }
.shop-cust { position: absolute; left: 50%; bottom: 26%; transform: translateX(-50%); width: 165%; background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.shop-cust-ic { width: auto; height: 16vmin; max-height: 120px; min-height: 48px; display: block; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); animation: shop-idle 2.4s ease-in-out infinite; }
.shop-cust.serving .shop-cust-ic { animation: shop-happy .6s ease-in-out infinite; }
.shop-cust-fallback { width: 60%; aspect-ratio: 1 / 1.3; border-radius: 40% 40% 30% 30%; background: #c9a37a; }
.shop-cust-name { font-size: 11px; background: rgba(253, 248, 232, .9); border-radius: 999px; padding: 0 6px; white-space: nowrap; }
.shop-cust-name.faint { color: var(--ink-soft); }
@keyframes shop-idle { 50% { transform: translateY(-2px); } }
@keyframes shop-happy { 50% { transform: translateY(-6px) scale(1.04); } }
.shop-bubble { display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--paper, #fdf8e8); border-radius: 12px; padding: 4px 6px 5px; box-shadow: 0 2px 4px rgba(60, 50, 30, .18); }
.shop-bubble::after { content: ""; border: 6px solid transparent; border-top-color: var(--paper, #fdf8e8); position: absolute; bottom: -12px; left: 50%; margin-left: -6px; }
.shop-bubble { position: relative; margin-bottom: 6px; }
.shop-want { width: 26px; height: 26px; }
.shop-bubble .cbar { width: 40px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .12); overflow: hidden; }
.shop-bubble .cbar i { display: block; height: 100%; background: var(--mint); border-radius: 3px; transition: width .4s linear; }
.shop-cust.mood-ok .cbar i { background: #f0c050; }
.shop-cust.mood-angry .cbar i { background: #e8705a; }
.shop-cust.mood-angry .shop-bubble { background: #fde4df; }
.shop-cust.mood-angry .shop-bubble::after { border-top-color: #fde4df; }
.shop-cust.serving .shop-bubble { background: #e3f6ec; }
.shop-cust.serving .shop-bubble::after { border-top-color: #e3f6ec; }
.shop-cust.serving .cbar i { background: #58b388; }
.shop-counter { position: absolute; right: 2%; top: 44%; width: 23%; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.shop-counter-ic { width: 100%; height: auto; }
.shop-staff-ic { position: absolute; width: auto; height: 14vmin; max-height: 100px; bottom: 50%; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); }
.shop-note { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); font-size: 12px; background: rgba(253, 248, 232, .9); border-radius: 999px; padding: 2px 10px; white-space: nowrap; z-index: 3; }
.shop-bar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.shop-panel { background: var(--paper, #fdf8e8); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow: auto; }
.shop-supplies, .shop-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.shop-supply, .shop-item, .shop-upgrade { display: flex; gap: 8px; background: #fff; border-radius: 12px; padding: 8px; align-items: flex-start; }
.shop-upgrade { flex-direction: column; }
.shop-supply.hot { outline: 2px solid var(--sun, #f6c26b); }
.shop-supply.wanted { background: #fff3ef; }
.shop-supply-ic, .shop-item-ic { width: 40px; height: 40px; flex: none; }
.shop-supply-main, .shop-item-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.shop-recipe { font-size: 11.5px; color: var(--ink-soft); }
.shop-recipe.short { color: #c85a4a; }
@media (max-width: 480px) {
  .shop-view { padding: 4px; align-items: start; }
  .shop-stage { border-radius: 12px; aspect-ratio: 4 / 3; }
  .shop-top { padding: 6px 8px; }
  .shop-shelf { top: 34%; width: 20%; }
  .shop-counter { width: 26%; top: 46%; }
  .shop-title b { font-size: 14px; }
  .shop-floors { max-width: 55%; }
  .shop-cust-name { font-size: 10px; }
  .shop-want { width: 20px; height: 20px; }
  .shop-bubble .cbar { width: 30px; }
  .shop-supplies, .shop-items { grid-template-columns: 1fr 1fr; }
}
body.in-shop #phoneBtn, body.in-shop .tray { visibility: hidden; }

/* 商店「禮包」分頁（public/js/packs.js）：每個禮包有自己的主色 --pack */
.pack-banner { display: block; width: 100%; height: auto; border-radius: 18px; margin-bottom: 6px; }
.pack-row { border-left: 6px solid var(--pack, var(--sun)); }
.pack-row .pack-ic { background: color-mix(in srgb, var(--pack, #f6c26b) 22%, #fff); border-radius: 14px; padding: 2px; }
.pack-hero { text-align: center; padding: 14px 10px 10px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--pack, #f6c26b) 30%, #fff), #fff); }
.pack-hero h3 { margin: 4px 0 2px; }
.pack-hero-ic { width: 112px; height: 112px; object-fit: contain; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin: 10px 0; }
.pack-cell { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 14px; background: var(--paper-2); text-align: center; min-width: 0; }
.pack-cell-ic { width: 40px; height: 40px; object-fit: contain; }
.pack-cell-name { font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.pack-cell-qty { font-size: 13px; font-weight: 700; }
.confirm-text.center { text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.tag.pack-tier { background: var(--paper-2); color: var(--ink-soft); }
.tag.pack-tier.t-s { background: #e4f4da; color: #4c7f3a; }
.tag.pack-tier.t-m { background: #dcecf8; color: #3a6f9a; }
.tag.pack-tier.t-l { background: #fbecc4; color: #9a6a10; font-weight: 700; }
.tag.pack-tier.t-level { background: #e4f4da; color: #4c7f3a; }
.avatar-shop-ic { width: 64px; height: 64px; object-fit: contain; }