/* One compact shop surface in both preparation and battle. */
#shop-dialog {
  width:min(1040px,calc(100% - 20px));
  padding:16px;
  background:linear-gradient(135deg,#152235,#090f1b 80%);
  color:#eee4ce;
  border-color:#bfa267;
}
#shop-dialog[open] {height:min(760px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);overflow:hidden}
#shop-dialog .shop-content {display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
#shop-dialog .shop-header {align-items:center;gap:8px}
#shop-dialog .shop-header .eyebrow {display:none}
#shop-dialog .shop-header h2 {font:28px/1.15 Georgia,serif;margin:0 0 5px}
#shop-dialog .shop-header-actions {gap:12px}
#shop-dialog .shop-header-actions .icon-button {margin:0;width:40px;height:40px}
#shop-dialog .shop-gold {font-size:22px;min-width:0;padding:0}
#shop-dialog .shop-hero-line {font-size:14px;gap:4px 12px;padding:0}
#shop-dialog .gear-limit-note {font-size:13px;margin:4px 0}
#shop-dialog .shop-category-list {padding:10px 0 8px;gap:6px;scrollbar-width:thin}
#shop-dialog .shop-category {font-size:14px;min-height:40px;padding:7px 12px;border-radius:5px;background:#ffffff05}
#shop-dialog .shop-category.active {background:#ceb06b20;border-color:#ceb06b;color:#f3dc9f}
#shop-dialog .shop-layout {display:block;flex:1 1 auto;height:auto;min-height:80px;max-height:none;overflow:auto;padding:8px 0;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-behavior:auto}
#shop-dialog .shop-catalog {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 3px 0 0;max-height:none;min-height:0;overflow:visible;align-content:start}
#shop-dialog .catalog-item {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;align-content:start;gap:6px 4px;min-height:0;height:auto;padding:10px;border:1px solid #a9b6c22c;border-radius:7px;background:linear-gradient(145deg,#1a2b3d,#101c2a);box-shadow:inset 3px 0 var(--rarity-color)}
#shop-dialog .catalog-item.selected {border-color:#d8bb77;background:linear-gradient(145deg,#293c47,#172534);box-shadow:inset 3px 0 var(--rarity-color)}
#shop-dialog .catalog-item:hover {border-color:#d8bb7780}
#shop-dialog .catalog-inspect {display:grid;grid-column:1/-1;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:6px 8px;min-height:0;min-width:0}
#shop-dialog .catalog-emblem,#shop-dialog .catalog-item .item-emblem {width:34px;height:34px}
#shop-dialog .catalog-copy {display:contents}
#shop-dialog .catalog-copy strong {font-size:14px;line-height:1.25;color:#f2ead7}
#shop-dialog .catalog-copy .catalog-effects {grid-column:1/-1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:36px;margin:0;font-size:13px;line-height:18px;color:#c5d1d8;white-space:normal}
#shop-dialog .catalog-price {display:block;font-size:13px;line-height:1.2;color:#dfc17e}
#shop-dialog .catalog-copy .catalog-upgrades {display:block;grid-column:1/-1;font-size:12px;line-height:16px;margin:0;color:#9bc8be;letter-spacing:0}
#shop-dialog .catalog-buy {width:auto;min-width:58px;min-height:36px;padding:6px 9px;align-self:center;border:1px solid #c5a76a;border-radius:4px;background:#cfb371;color:#172019;font-size:14px;white-space:nowrap;word-break:normal;overflow-wrap:normal}
#shop-dialog .catalog-buy:disabled {background:#ffffff05;color:#9aa6ae;border-color:#71808c55;opacity:1}
#shop-dialog .catalog-item.equipped .catalog-buy {color:#a8d4ab;border-color:#6eaa7866}
#shop-dialog .shop-detail {max-height:none;min-height:0;padding:12px;background:#101c2c;border:1px solid #a9b6c22c;border-radius:7px}
#shop-dialog .shop-detail .detail-heading h3 {font-size:26px}
#shop-dialog .shop-detail .detail-heading {margin:0 0 8px;gap:10px}
#shop-dialog .shop-detail .detail-emblem {width:50px;height:50px;padding:0}
#shop-dialog .shop-detail .detail-emblem>.item-emblem {width:48px;height:48px}
#shop-dialog .shop-detail .item-stats {font-size:15px;line-height:1.5}
#shop-dialog .shop-detail .item-stats li {font-size:15px;line-height:1.5}
#shop-dialog .shop-detail .item-stats .item-effect {grid-column:1 / -1}
#shop-dialog .shop-detail .detail-action {position:static;background:transparent;padding:0;border:0;margin:8px 0}
#shop-dialog .item-upgrades {grid-column:1/-1;margin:12px 0;padding:10px 0;border-top:1px solid #a9b6c22c;border-bottom:1px solid #a9b6c22c}
#shop-dialog .item-upgrades h4 {margin:0 0 6px;font:600 14px/1.4 Arial,sans-serif;letter-spacing:0;color:#e9dfc9}
#shop-dialog .item-upgrade-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
#shop-dialog .item-upgrade {display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px;min-width:0;min-height:60px;padding:6px;border:1px solid transparent;border-radius:4px;background:transparent;color:#e9dfc9;text-align:left;letter-spacing:0}
#shop-dialog .item-upgrade:hover {border-color:#a8caba70;background:#b7d9cd0c}
#shop-dialog .item-upgrade .item-emblem {width:34px;height:34px}
#shop-dialog .upgrade-copy {display:flex;flex-direction:column;gap:3px;min-width:0}
#shop-dialog .upgrade-copy strong {font:600 13px/1.3 Arial,sans-serif;overflow-wrap:anywhere;letter-spacing:0}
#shop-dialog .upgrade-price {font:12px/1.3 Arial,sans-serif;color:#d2bb84;overflow-wrap:anywhere;letter-spacing:0}
#shop-dialog .upgrade-affordable .upgrade-price,#shop-dialog .upgrade-owned .upgrade-price {color:#a8d4ab}
#shop-dialog .item-upgrade-end {grid-column:1/-1;margin:12px 0;font-size:13px;color:#a9b5bd;letter-spacing:0}
#shop-dialog .shop-detail-nav {display:flex;align-items:center;justify-content:space-between;gap:8px;grid-column:1/-1;margin-bottom:8px}
#shop-dialog #back-to-catalog {font-size:14px;min-height:40px;margin:0;padding:0;text-align:left;overflow-wrap:anywhere}
#shop-dialog #shop-catalog-home {flex-shrink:0;width:40px;height:40px;margin:0}
#shop-dialog .shop-inventory-heading {display:flex;margin:8px 0 5px}
#shop-dialog .shop-inventory-heading .eyebrow {font-size:12px;letter-spacing:.05em}
#shop-dialog .shop-inventory-heading>span:last-child {font-size:12px}
#shop-dialog .shop-inventory {gap:6px;margin:0}
#shop-dialog .shop-inventory .inventory-slot {min-height:44px;height:44px;padding:3px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:4px}
#shop-dialog .shop-inventory .item-emblem {width:32px;height:32px;flex-shrink:0}
#shop-dialog .shop-inventory .slot-name {font-size:12px;line-height:1.1}
#shop-dialog .shop-inventory .slot-number,#shop-dialog .inventory-slot:not(.occupied) .slot-name {display:none}
#shop-dialog .shop-footer {display:flex;flex-wrap:wrap;gap:6px 12px;padding-top:8px}
#shop-dialog .shop-footer .shop-message {flex:1 1 100%;min-height:0;padding:0;margin:0;border:0;font-size:12px;line-height:1.35;color:#bbc8d2}
#shop-dialog .shop-footer>a {font-size:13px}
#shop-dialog .shop-footer>button {flex:1;min-height:42px;padding:8px 12px;font-size:15px;border-radius:4px}
#shop-dialog button:focus-visible {outline:2px solid #f7dd91;outline-offset:2px}
@media(max-width:500px) {
  #shop-dialog .item-upgrade-list {grid-template-columns:1fr;gap:2px}
  #shop-dialog .item-upgrade {min-height:48px;padding:5px}
  #shop-dialog .upgrade-copy {display:grid;grid-template-columns:minmax(0,1fr) 86px;align-items:center;gap:8px}
  #shop-dialog .upgrade-price {text-align:right}
}
@media(max-width:700px) {
  #shop-dialog.preparing-battle,#shop-dialog {padding:12px;width:calc(100% - 16px)}
  #shop-dialog .shop-header h2 {font-size:22px}
  #shop-dialog .shop-header-actions {gap:8px}
  #shop-dialog .shop-header-actions .icon-button {width:32px;height:40px}
  #shop-dialog .shop-gold {font-size:20px}
  #shop-dialog .shop-category {min-height:40px;padding:7px 10px}
  #shop-dialog .shop-catalog {grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #shop-dialog .catalog-item {padding:8px}
  #shop-dialog .shop-inventory .slot-name,#shop-dialog .shop-inventory-heading>span:last-child {display:none}
}
@media(max-height:500px) and (orientation:landscape) {
  #shop-dialog.preparing-battle,#shop-dialog {padding:8px 12px}
  #shop-dialog[open] {height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}
  #shop-dialog .shop-header h2 {font-size:24px;margin:0}
  #shop-dialog .shop-hero-line {position:absolute;top:21px;left:245px;font-size:13px}
  #shop-dialog .shop-hero-line>span {display:none}
  #shop-dialog .shop-category-list {padding:4px 0}
  #shop-dialog .shop-category {min-height:36px;padding:5px 12px}
  #shop-dialog .shop-layout {padding:5px 0}
  #shop-dialog .shop-catalog {grid-template-columns:repeat(4,minmax(0,1fr))}
  #shop-dialog .shop-inventory-heading {display:none}
  #shop-dialog .shop-inventory {margin-top:6px;max-width:320px;flex:1}
  #shop-dialog .shop-inventory .slot-name {display:none}
  #shop-dialog .shop-footer {padding-top:5px}
  #shop-dialog .shop-footer .shop-message {display:none}
  #shop-dialog .shop-footer>button {position:absolute;right:12px;bottom:8px;width:calc(100% - 358px);min-height:44px}
  #shop-dialog .shop-detail {display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;padding:10px}
  #shop-dialog #back-to-catalog {grid-column:1/-1;justify-self:start;margin:0;min-height:32px}
  #shop-dialog .shop-detail .detail-heading {grid-column:1;grid-row:2;margin:0}
  #shop-dialog .shop-detail .detail-action {grid-column:1;grid-row:3;margin:0}
  #shop-dialog .shop-detail .item-stats {grid-column:1;grid-row:4;margin:0;padding:0}
  #shop-dialog .item-upgrades,#shop-dialog .item-upgrade-end {grid-column:2;grid-row:2/span 3;margin:0;padding:0;border:0}
  #shop-dialog .item-upgrade-list {grid-template-columns:1fr;gap:2px}
  #shop-dialog .item-upgrade {min-height:48px;padding:5px}
  #shop-dialog .upgrade-copy {display:grid;grid-template-columns:minmax(0,1fr) 86px;align-items:center;gap:8px}
  #shop-dialog .upgrade-price {text-align:right}
  #shop-dialog .shop-detail .recipe-label,#shop-dialog .shop-detail .recipe-list,#shop-dialog .shop-detail .recipe-credit {grid-column:1/-1;margin:0}
}
@media(max-width:350px) {#shop-dialog .shop-header h2{font-size:22px}#shop-dialog .catalog-item{padding:6px}#shop-dialog .catalog-inspect{grid-template-columns:28px minmax(0,1fr);gap:6px}#shop-dialog .catalog-emblem,#shop-dialog .catalog-item .item-emblem{width:28px;height:28px}}
@media(max-width:350px) {#shop-dialog .upgrade-copy{display:flex;align-items:stretch;gap:3px}#shop-dialog .upgrade-price{text-align:left}}