/* Inventory-style storefront: copper frames, wine panels and preserved rarity art. */
#shopScreen { --shop-stage-dark: var(--z-wood-dark, #392b35); --shop-card-inset: 14px; color: var(--t-panel-text); }
#gameScreen .menu-overlay:has(#shopScreen:not([hidden])) { z-index: 150; }
#shopScreen .shop-balance { width: fit-content; margin-bottom: 16px; }
#shopScreen .shop-section-help { max-width: 65ch; line-height: 1.45; color: var(--t-panel-text); opacity: .85; }
#shopScreen .shop-filters { border: 2px solid var(--t-card-border); background: var(--t-panel-header-bg); box-shadow: inset 0 2px 0 var(--z-wood-light); }
#shopScreen .shop-filters label { color: var(--t-panel-text); font-size: 14px; }
#shopScreen .shop-filters select { background: var(--t-field-bg); color: var(--t-field-color); border: var(--t-field-border); }
#shopScreen .shop-result-count { font-size: 16px; color: var(--t-panel-text); }
#shopScreen .shop-items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
#shopScreen .shop-categories { position: static; flex-wrap: nowrap; overflow-x: auto; }
#shopScreen .shop-categories button { flex: 1 0 auto; }
#shopScreen .class-skin-card { --shop-rarity: var(--ui-rarity-common); --shop-stage-image: url('../assets/shop/background/common.png'); display: flex; flex-direction: column; align-items: stretch; padding: 0; gap: 0; overflow: hidden; border: 3px solid var(--t-card-border); background: var(--t-card-bg); color: var(--t-card-text); box-shadow: inset 0 2px 0 var(--z-wood-light), 3px 3px 0 var(--z-shadow); }
#shopScreen .class-skin-card.rarity-uncommon { --shop-rarity: var(--ui-rarity-uncommon); --shop-stage-image: url('../assets/shop/background/uncommon.png'); }
#shopScreen .class-skin-card.rarity-rare { --shop-rarity: var(--ui-rarity-rare); --shop-stage-image: url('../assets/shop/background/rare.png'); }
#shopScreen .class-skin-card.rarity-epic { --shop-rarity: var(--ui-rarity-epic); --shop-stage-image: url('../assets/shop/background/epic.png'); }
#shopScreen .class-skin-card.rarity-legendary { --shop-rarity: var(--ui-rarity-legendary); --shop-stage-image: url('../assets/shop/background/legendary.png'); }
#shopScreen .class-skin-card.rarity-mythic { --shop-rarity: var(--ui-rarity-mythic); --shop-stage-image: url('../assets/shop/background/mythic.png'); }
#shopScreen .class-skin-card.is-equipped { border-color: var(--z-green-light); box-shadow: inset 0 0 0 1px var(--z-green-dark), 3px 3px 0 var(--z-shadow); }
#shopScreen .class-skin-card:hover { background: var(--t-card-bg); border-color: var(--t-card-hover-border); }
#shopScreen .class-skin-card > .shop-skin-stage {
  position: relative; display: grid; place-items: center; flex: none; min-height: 252px;
  padding: 32px 12px 10px; isolation: isolate; overflow: hidden;
  border-bottom: 3px solid var(--z-outline); background-color: var(--shop-stage-dark);
  background-image: var(--shop-stage-image);
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
  image-rendering: pixelated;
}
#shopScreen .shop-skin-stage::after { content: ''; position: absolute; inset: 10px; border: 1px solid #ffffff14; pointer-events: none; }
#shopScreen .shop-skin-stage .shop-tags { position: absolute; inset: 12px 12px auto; justify-content: space-between; align-items: start; gap: 6px; z-index: 2; }
#shopScreen .shop-class-tag, #shopScreen .skin-rarity { margin: 0; padding: 3px 7px; line-height: 1.15; font-size: 13px; }
#shopScreen .shop-class-tag { background: var(--shop-stage-dark); color: var(--z-light-text); border-color: var(--z-wood-light); }
#shopScreen .skin-rarity { color: var(--z-ink); border-color: var(--z-outline); }
#shopScreen canvas.class-skin-character[data-showcase] { position: relative; z-index: 1; display: block; width: min(100%, 256px); height: auto; max-width: 100%; aspect-ratio: 1; background: none; image-rendering: pixelated; }
#shopScreen .class-skin-card > .shop-skin-details { display: flex; flex: 1; flex-direction: column; padding: var(--shop-card-inset); background: var(--t-card-bg); color: var(--t-card-text); box-shadow: inset 0 2px 0 var(--z-wood-light); }
#shopScreen .shop-skin-details h2 { gap: 8px; font-size: 20px; line-height: 1.25; margin: 0 0 8px; overflow-wrap: anywhere; color: var(--t-card-text); }
#shopScreen .skin-portrait.small { width: 36px; height: 36px; flex: none; margin: 0; }
#shopScreen .shop-skin-description { flex: none; line-height: 1.4; min-height: 2.8em; color: var(--t-card-text); opacity: .85; }
#shopScreen .shop-skin-description:empty { display: none; }
#shopScreen .skin-parts { margin: 0 0 16px; padding-top: 10px; border-top: 1px solid var(--z-wood-light); gap: 8px; }
#shopScreen .skin-part-sprite { width: 50px; height: 50px; border-color: var(--z-outline); background: var(--shop-stage-dark); box-shadow: inset 0 2px 0 var(--z-wood-light), 1px 2px 0 var(--z-shadow); }
#shopScreen .skin-part-sprite .skill-shop-sheet { transform: none; }
#shopScreen .shop-skin-purchase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 1fr); align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--z-wood-light); }
#shopScreen .shop-skin-purchase .price { display: flex; align-items: center; gap: 7px; padding: 0; margin: 0; border: 0; background: none; color: var(--z-gold-light); line-height: 1.1; font-size: 22px; }
#shopScreen .price small { display: block; font-size: 12px; margin-top: 4px; color: var(--t-card-text); font-weight: 400; }
#shopScreen .shop-skin-purchase button { min-height: 44px; font-size: 16px; }
#shopScreen .shop-skin-purchase button:disabled { border-color: var(--z-green-dark); background: var(--z-green-dark); color: var(--z-light-text); opacity: .8; }
#shopScreen .shop-price-note { margin: 9px 0 0; font-size: 14px; line-height: 1.3; color: var(--t-card-text); }
#shopScreen .shop-empty { border-color: var(--t-card-border); background: var(--t-panel-header-bg); color: var(--t-panel-text); }
#shopScreen .shop-balance { border-color: var(--z-outline); background: var(--t-panel-header-bg); color: var(--t-panel-text); box-shadow: inset 0 2px 0 var(--z-wood-light), 3px 3px 0 var(--z-shadow); }
#shopScreen .shop-balance b { color: var(--z-gold-light); }
#shopScreen .shop-categories { border-color: var(--z-outline); background: var(--t-tabs-bar); box-shadow: inset 0 2px 0 var(--z-wood-light); }
#shopScreen .shop-categories button { border: var(--t-btn-neutral-border); background: var(--t-tab-bg); color: var(--t-tab-color); box-shadow: var(--z-bevel); }
#shopScreen .shop-categories button.active { background: var(--t-tab-active-bg); color: var(--t-tab-active-color); box-shadow: inset 0 2px 0 var(--z-green-light), inset 0 -3px 0 var(--z-green-dark); }
/* Non-character purchases share the same copper cards and clear price inset. */
#shopScreen .shop-item:not(.class-skin-card) { background: var(--t-card-bg); color: var(--t-card-text); border-color: var(--t-card-border); }
#shopScreen .shop-item:not(.class-skin-card):hover { background: var(--t-card-bg); border-color: var(--t-card-hover-border); }
#shopScreen .shop-item:not(.class-skin-card) :is(h2, p) { color: var(--t-card-text); }
#shopScreen .shop-item:not(.class-skin-card) .price { border-color: var(--t-card-border); background: var(--t-field-bg); color: var(--t-field-color); }
#shopScreen .shop-ability-label { color: var(--t-card-text); }
#shopScreen .shop-notice { color: var(--z-green-light); }
#shopScreen .class-skin-card:focus-within { outline: 3px solid var(--z-gold); outline-offset: 2px; }
@media (max-width: 600px) {
  #shopScreen .shop-items { grid-template-columns: 1fr; }
  #shopScreen .class-skin-card > .shop-skin-stage { min-height: 224px; padding-top: 28px; }
  #shopScreen canvas.class-skin-character[data-showcase] { width: min(100%, 224px); }
  #shopScreen .shop-skin-description { min-height: 0; }
}
@media (max-width: 420px) {
  #shopScreen .shop-filters { grid-template-columns: minmax(0, 1fr); }
  #shopScreen .shop-filters label:last-child { grid-column: auto; }
  #shopScreen .shop-skin-purchase { gap: 8px; }
}
@media (max-width: 720px) {
  /* An open shop needs enough vertical space to inspect a whole skin on a phone. */
  #gameScreen .menu-overlay:has(#shopScreen:not([hidden])) { top: 8dvh; bottom: env(safe-area-inset-bottom, 0px); max-height: none; }
  #gameScreen .world-wrap:has(#menuOverlay:not([hidden]) #shopScreen:not([hidden])) .game-dock { visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: no-preference) {
  #shopScreen .class-skin-card { transition: border-color .15s, box-shadow .15s; }
}