/* Trading panels use the remaining safe viewport, including any tutorial header. */
body {
  --trading-gutter:clamp(12px, 1.5vw, 24px);
  --trading-guide-height:0px;
  --trading-width:calc(var(--ui-viewport-width, 100vw) - var(--ui-safe-left, 0px) - var(--ui-safe-right, 0px) - 2 * var(--trading-gutter));
  --trading-height:calc(var(--ui-viewport-height, 100dvh) - var(--ui-safe-top, 0px) - var(--ui-safe-bottom, 0px) - var(--trading-guide-height) - 2 * var(--trading-gutter));
}
body[data-story-panel=true] {--trading-guide-height:calc(var(--ui-story-panel-height, 124px) + 8px)}
body #panel-overlay:has(#game-window:is([data-panel=shop],[data-panel=bag])) {
  top:var(--ui-viewport-top, 0px);
  height:var(--ui-viewport-height, 100dvh);
  padding:calc(var(--ui-safe-top, 0px) + var(--trading-guide-height) + var(--trading-gutter)) calc(var(--ui-safe-right, 0px) + var(--trading-gutter)) calc(var(--ui-safe-bottom, 0px) + var(--trading-gutter)) calc(var(--ui-safe-left, 0px) + var(--trading-gutter));
}
body[data-story-panel=true] #panel-overlay:has(#game-window:is([data-panel=shop],[data-panel=bag])) {
  padding-top:calc(var(--ui-safe-top, 0px) + var(--trading-guide-height) + var(--trading-gutter));
  padding-bottom:calc(var(--ui-safe-bottom, 0px) + var(--trading-gutter));
}
#game-window:is([data-panel=shop],[data-panel=bag]) {flex-shrink:0;max-width:100%;max-height:100%}
#game-window[data-panel=bag] #panel-close {right:0;min-width:44px;min-height:44px}
#game-window[data-panel=bag] .inventory-step.previous {left:0}
#game-window[data-panel=bag] .inventory-step.next {right:0}
#game-window[data-panel=bag] .inventory-grid {
  grid-auto-rows:minmax(calc(170 * var(--iu)), max-content);
  padding:12px;
  scrollbar-gutter:stable;
}
#game-window[data-panel=bag] .inventory-slot,
#game-window[data-panel=bag] .inventory-slot.active {height:auto;min-height:0;justify-content:flex-start;padding:8px 2px 12px}
#game-window[data-panel=bag] .inventory-item-name {overflow-wrap:break-word;word-break:normal;white-space:normal;line-height:1.3}
#game-window[data-panel=bag] .inventory-item-level {display:inline-block;white-space:nowrap;overflow-wrap:normal;word-break:normal}
#game-window[data-panel=bag] .inventory-footer {padding:6px 10px;gap:8px}
#game-window[data-panel=bag] .inventory-detail .inventory-selected-preview {margin-top:0}
#game-window[data-panel=bag] .inventory-detail .detail-name {min-width:0;white-space:normal;overflow-wrap:break-word;line-height:1.3}
#game-window[data-panel=bag] .inventory-detail .inventory-facts-frame {padding:10px 12px}
#game-window[data-panel=bag] .inventory-detail .detail-actions {padding:8px 2px 2px}
#game-window[data-panel=bag] .inventory-detail .detail-facts>[data-fruit-fact=mutation] {grid-template-columns:minmax(0,1fr);gap:3px}
#game-window[data-panel=bag] .inventory-detail .detail-facts>[data-fruit-fact=mutation]>strong {justify-self:start;text-align:left}

/* Let translated names determine card height rather than overlap the next row. */
#game-window[data-panel=shop] .shop-art-layout .shop-main {background:#f5f3df;border-radius:clamp(18px,3vw,38px);overflow:hidden}
#game-window[data-panel=shop] .shop-art-layout .shop-list {background:none}
#game-window[data-panel=shop] .shop-art-layout .shop-list::before {display:none}
#game-window[data-panel=shop] .shop-art-layout .shop-list {grid-template-rows:none;grid-auto-rows:minmax(154px,max-content);align-content:start;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
#game-window[data-panel=shop] .shop-art-layout .shop-item,
#game-window[data-panel=shop] .shop-art-layout .shop-item.active {height:auto;min-height:0;justify-content:flex-start;padding-bottom:12px}
#game-window[data-panel=shop] .shop-art-layout .shop-copy {flex:none;min-width:0;margin:0}
#game-window[data-panel=shop] .shop-art-layout .shop-copy strong {white-space:normal;overflow-wrap:break-word;word-break:normal;line-height:1.3;min-height:0;padding:4px 0 0}
#game-window[data-panel=shop] .shop-art-layout .shop-copy small {display:block;white-space:normal;overflow-wrap:break-word;line-height:1.35}
#game-window[data-panel=shop] .shop-art-layout .shop-wallet {left:calc(var(--ui-safe-left,0px) + var(--trading-gutter));bottom:calc(var(--ui-safe-bottom,0px) + var(--trading-gutter));max-width:calc(100% - 2 * var(--trading-gutter))}
#game-window[data-panel=shop] .shop-art-layout .shop-wallet>span {max-width:100%;min-width:0;gap:8px}
#game-window[data-panel=shop] .shop-art-layout .shop-detail .detail-name {min-width:0;white-space:normal;overflow-wrap:break-word;word-break:normal;line-height:1.3}
#game-window[data-panel=shop] .shop-art-layout .detail-facts.item-facts {padding-left:6px;padding-right:10px}
#game-window[data-panel=shop] .shop-art-layout .detail-facts.item-facts>div[data-fruit-fact=mutation] {grid-template-columns:minmax(0,1fr);gap:3px}
#game-window[data-panel=shop] .shop-art-layout .detail-facts.item-facts>div[data-fruit-fact=mutation]>strong {text-align:left}

@media(min-width:1051px) and (min-height:701px) {
  /* Header tabs now sit inside the frame; no extra space above it is needed. */
  body #panel-overlay:has(#game-window[data-panel=shop]) {align-items:flex-start}
  body #game-window[data-panel=shop],
  body[data-story-panel=true] #game-window[data-panel=shop] {
    --su:min(calc(var(--trading-width) / 1920), calc(var(--trading-height) / 1080), 1px);
    width:calc(1920 * var(--su));height:var(--trading-height);margin-top:0;
  }
  #game-window[data-panel=shop] .shop-art-layout::before {background-size:calc(1723 * var(--su)) calc(100% - 67 * var(--su))}
  #game-window[data-panel=shop] .shop-art-layout .shop-main {height:calc(100% - 333 * var(--su))}
  #game-window[data-panel=shop] .shop-art-layout .shop-detail {height:calc(100% - 286 * var(--su))}
  body #game-window[data-panel=bag],
  body[data-story-panel=true] #game-window[data-panel=bag] {
    --iu:min(calc(var(--trading-width) / 1180), calc(var(--trading-height) / 690), 1.2px);
    width:calc(1180 * var(--iu));height:calc(690 * var(--iu));
  }
  #game-window[data-panel=shop] #panel-close {right:0}
  #game-window[data-panel=shop] .shop-art-layout .shop-main {display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;padding:18px 22px}
  #game-window[data-panel=shop] .shop-art-layout .shop-list {grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;height:100%;padding:12px 10px;gap:16px 12px;background:none;min-height:0}
  #game-window[data-panel=shop] .shop-art-layout .shop-list::before {display:none}
  #game-window[data-panel=shop] .sell-art-layout .shop-main {display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px}
  #game-window[data-panel=shop] .sell-art-layout .sale-list-title {position:static;inset:auto;margin:0;padding:0 6px;font-size:16px;line-height:1.35}
  #game-window[data-panel=shop] .unified-shop .stock-time {position:static;inset:auto;grid-row:1;justify-self:end;max-width:100%;min-height:0;translate:none;margin:0;padding:4px 10px;font-size:14px;line-height:1.35;white-space:normal}
  #game-window[data-panel=shop] .shop-art-layout .shop-copy strong {font-size:16px}
  #game-window[data-panel=shop] .shop-art-layout .shop-copy small {font-size:12px}
  #game-window[data-panel=shop] .shop-art-layout .shop-detail {grid-template-rows:calc(220 * var(--su)) auto minmax(0,1fr) calc(112 * var(--su)) auto}
  #game-window[data-panel=shop] .shop-art-layout .shop-detail .detail-art {width:calc(220 * var(--su));height:calc(220 * var(--su))}
  #game-window[data-panel=shop] .shop-art-layout .shop-detail .detail-name {font-size:20px;min-height:0;padding:5px 0}
  #game-window[data-panel=shop] .shop-art-layout .shop-wallet {padding:6px 10px;background:#fff7df;border:1px solid #c5a06e;border-radius:18px}
  #game-window[data-panel=shop] .shop-art-layout .shop-wallet>span {padding:0;background:none;font-size:20px}
  #game-window[data-panel=shop] .shop-art-layout .shop-wallet .crop-icon {width:30px;height:30px}
}

@media(max-width:1050px),(max-height:700px) {
  #game-window[data-panel=bag] .inventory-grid {grid-auto-rows:minmax(112px,max-content);padding:10px 9px}
  #game-window[data-panel=bag] .inventory-detail .inventory-facts-frame {padding:8px}
  #game-window[data-panel=bag] .inventory-footer {padding:5px 3px}
  #game-window[data-panel=bag] .inventory-detail .detail-actions {padding-top:5px}

  /* One bounded composition for buy, sell and potion details.  The old bitmap
     coordinates must not set the size of the scrollable content on a phone. */
  /* The supplied 1723x1013 frame has transparent side margins and a rounded
     inner edge.  Content follows its painted inset, not the PNG element box. */
  #game-window[data-panel=shop] {--shop-item-size:64px;--shop-preview-size:76px;--shop-note-height:28px;--shop-checkout-height:44px;--shop-frame-inset:10%;--shop-content-top:max(66px,calc(28px + (var(--trading-height) - 28px) * .13));--shop-content-bottom:42px;width:100%;height:100%;min-height:0;overflow:hidden}
  #game-window[data-panel=shop] #panel-content {position:absolute;inset:0;width:auto;height:auto;min-height:0;padding:0;overflow:hidden}
  #game-window[data-panel=shop] .shop-art-layout.shop-layout,
  body[data-story-panel=true] #game-window[data-panel=shop] .shop-art-layout.shop-layout {
    display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);
    width:100%;height:100%;min-height:0;gap:12px;padding:var(--shop-content-top) var(--shop-frame-inset) var(--shop-content-bottom);
  }
  #game-window[data-panel=shop] .shop-art-layout::before {inset:28px 0 0;background-size:100% 100%;background-position:center}
  body #game-window[data-panel=shop] .shop-art-layout .shop-main {
    position:relative;inset:auto;display:grid;grid-template-rows:auto minmax(0,1fr);gap:4px;
    width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:8px;
    overflow:hidden;border-radius:22px;
  }
  #game-window[data-panel=shop] .shop-art-layout :is(.stock-time,.sale-list-title) {
    position:static;inset:auto;grid-row:1;width:auto;max-width:100%;min-height:0;
    margin:0;padding:3px 6px;translate:none;font-size:11px;line-height:1.3;white-space:normal;
  }
  #game-window[data-panel=shop] .shop-art-layout .shop-list {
    grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:max-content;
    align-content:start;align-items:stretch;gap:12px 6px;width:100%;height:100%;min-height:0;max-height:none;padding:5px;
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  }
  #game-window[data-panel=shop] .shop-art-layout .shop-item,
  #game-window[data-panel=shop] .shop-art-layout .shop-item.active {
    display:flex;flex-direction:column;align-self:stretch;align-items:center;justify-content:flex-start;
    width:100%;height:auto;min-height:0;gap:3px;margin:0;padding:3px 2px 7px;
  }
  #game-window[data-panel=shop] .shop-art-layout .shop-item .crop-art {
    flex:none;width:var(--shop-item-size);height:var(--shop-item-size);max-width:100%;margin:0;
  }
  #game-window[data-panel=shop] .shop-art-layout .shop-item .card-price {
    position:static;inset:auto;order:-1;flex:none;align-self:center;
    width:max-content;max-width:100%;min-width:0;height:auto;min-height:21px;margin:0;padding:1px 5px 1px 1px;
    gap:2px;font-size:12px;line-height:1.2;white-space:nowrap;
  }
  #game-window[data-panel=shop] .shop-art-layout .card-price .crop-icon {flex:none;width:19px;height:19px}
  #game-window[data-panel=shop] .shop-art-layout .shop-copy {display:block;flex:none;width:100%;min-width:0;margin:0}
  #game-window[data-panel=shop] .shop-art-layout .shop-copy strong {display:block;min-height:0;margin:0;padding:1px 0;font-size:12px;line-height:1.3}
  #game-window[data-panel=shop] .shop-art-layout .shop-copy :is(small,.slot-purchase-count,.slot-stock,.sale-quality) {display:block;margin:2px 0 0;font-size:10px;line-height:1.3;white-space:normal;overflow-wrap:break-word}
  #game-window[data-panel=shop] .shop-art-layout .sale-item-count {display:none}
  #game-window[data-panel=shop] .shop-art-layout .potion-offer-complete {grid-column:1/-1;min-height:54px;font-size:12px}
  body #game-window[data-panel=shop] .shop-art-layout .shop-detail {
    position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--shop-preview-size) minmax(28px,max-content) minmax(0,1fr) var(--shop-checkout-height) var(--shop-note-height);
    align-items:stretch;width:100%;height:100%;min-width:0;min-height:0;gap:4px;margin:0;padding:8px;
    overflow:hidden;border-radius:22px;background:#bcc292;
  }
  #game-window[data-panel=shop] .shop-art-layout .shop-detail::before {display:none}
  body #game-window[data-panel=shop] .shop-art-layout .shop-detail:not(:has(.detail-footnote)) {grid-template-rows:var(--shop-preview-size) minmax(28px,max-content) minmax(0,1fr) var(--shop-checkout-height)}
  #game-window[data-panel=shop] .shop-art-layout .shop-selected-preview {position:relative;inset:auto;grid-area:1 / 1;min-width:0;min-height:0;width:100%;height:100%;margin:0;overflow:hidden}
  #game-window[data-panel=shop] .shop-art-layout .shop-selected-preview .detail-art {position:absolute;display:grid;inset:0 auto auto 50%;width:var(--shop-preview-size);height:var(--shop-preview-size);max-width:100%;max-height:100%;margin:0;transform:translateX(-50%)}
  body #game-window[data-panel=shop] .shop-art-layout .shop-detail .detail-name {position:static;grid-area:2 / 1;width:100%;max-width:100%;height:auto;min-height:0;max-height:40px;margin:0;padding:2px 4px;translate:none;transform:none;overflow:auto;font-size:14px;line-height:1.3}
  #game-window[data-panel=shop] .shop-art-layout :is(.detail-facts,.unified-potion-facts) {
    position:static;inset:auto;grid-area:3 / 1;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;
    width:100%;height:100%;min-width:0;min-height:0;max-height:none;margin:0;padding:0 5px 0 2px;
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable;font-size:12px;line-height:1.35;
  }
  #game-window[data-panel=shop] .shop-art-layout .detail-facts.item-facts>div {display:grid;grid-template-columns:minmax(0,1fr) max-content;flex:none;min-width:0;min-height:28px;margin:0;padding:4px 0;gap:6px;border-bottom-width:2px}
  #game-window[data-panel=shop] .shop-art-layout .detail-facts.item-facts :is(span,strong) {min-width:0;font-size:12px;line-height:1.35}
  #game-window[data-panel=shop] .shop-art-layout .detail-facts.item-facts>div>strong {white-space:nowrap;overflow-wrap:normal;word-break:normal;min-width:0}
  #game-window[data-panel=shop] .shop-art-layout .detail-facts.item-facts .item-fact-label {padding:0;gap:4px}
  #game-window[data-panel=shop] .shop-art-layout .detail-facts .item-fact-label>img {flex:none;width:17px;height:17px}
  #game-window[data-panel=shop] .shop-art-layout .detail-facts.item-facts>div[data-fruit-fact=mutation] {grid-template-columns:minmax(0,1fr)}
  #game-window[data-panel=shop] .shop-art-layout .detail-facts.item-facts>div[data-fruit-fact=mutation]>strong {white-space:normal;overflow-wrap:break-word;text-align:left}
  #game-window[data-panel=shop] .shop-art-layout .unified-potion-facts :is(p,.potion-probabilities,.potion-legend) {flex:none}
  body #game-window[data-panel=shop] .shop-art-layout .shop-checkout {position:relative;inset:auto;grid-area:4 / 1;display:flex;align-items:center;min-width:0;width:100%;height:var(--shop-checkout-height);min-height:var(--shop-checkout-height);margin:0;padding:0 49px 0 0}
  #game-window[data-panel=shop] .shop-art-layout .detail-total {position:static;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:5px;width:100%;height:40px;min-height:40px;min-width:0;margin:0;padding:4px 8px;font-size:12px;line-height:1.2}
  #game-window[data-panel=shop] .shop-art-layout .detail-total strong {min-width:0;gap:3px;font-size:14px;white-space:nowrap;overflow-wrap:normal}
  #game-window[data-panel=shop] .shop-art-layout .detail-total .crop-icon {flex:none;width:19px;height:19px}
  #game-window[data-panel=shop] .shop-art-layout .shop-cart-button {inset:0 0 auto auto;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:8px}
  #game-window[data-panel=shop] .shop-art-layout .detail-footnote {position:static;grid-area:5 / 1;width:100%;height:100%;min-height:0;margin:0;padding:0 3px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;font-size:10px;line-height:1.35;white-space:normal;overflow-wrap:break-word}
  #game-window[data-panel=shop] .shop-art-layout .shop-wallet {position:absolute;inset:auto auto 6px var(--shop-frame-inset);min-width:0;max-width:calc(100% - 2 * var(--shop-frame-inset));width:auto;height:30px;margin:0;padding:0;border:0;background:none}
  #game-window[data-panel=shop] .shop-art-layout .shop-wallet>span {width:auto;min-width:0;height:30px;padding:2px 9px;gap:5px;font-size:16px;white-space:nowrap}
  #game-window[data-panel=shop] .shop-art-layout .shop-wallet strong {font-size:inherit;white-space:nowrap;overflow-wrap:normal}
  #game-window[data-panel=shop] .shop-art-layout .shop-wallet .crop-icon {flex:none;width:25px;height:25px}
  #game-window[data-panel=shop] .shop-art-layout .sale-empty-detail {grid-area:1 / 1 / -1 / -1;min-height:0;height:100%;overflow:auto;padding:8px}
  #game-window[data-panel=shop] #panel-close {inset:4px 4px auto auto;width:44px;height:44px;min-width:44px;min-height:44px;background-size:26px 26px,42px 42px,0 0;background-position:center}
}
@media(orientation:portrait) and (max-width:760px) {
  #game-window[data-panel=shop] {--shop-item-size:70px;--shop-preview-size:88px;--shop-note-height:38px}
  #game-window[data-panel=shop] .shop-art-layout.shop-layout,
  body[data-story-panel=true] #game-window[data-panel=shop] .shop-art-layout.shop-layout {grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.1fr) minmax(0,1fr);gap:8px;padding:var(--shop-content-top) var(--shop-frame-inset) var(--shop-content-bottom)}
  #game-window[data-panel=shop] .shop-art-layout .shop-list {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 6px;padding:5px}
  body #game-window[data-panel=shop] .shop-art-layout .shop-detail {grid-template-columns:minmax(76px,.72fr) minmax(0,1.65fr);grid-template-rows:34px minmax(0,1fr) var(--shop-checkout-height) var(--shop-note-height);gap:4px 8px}
  body #game-window[data-panel=shop] .shop-art-layout .shop-detail:not(:has(.detail-footnote)) {grid-template-rows:34px minmax(0,1fr) var(--shop-checkout-height)}
  #game-window[data-panel=shop] .shop-art-layout .shop-selected-preview {grid-area:1 / 1 / 3 / 2}
  #game-window[data-panel=shop] .shop-art-layout .shop-selected-preview:has(.quantity-control) .detail-art {width:auto;height:min(var(--shop-preview-size),calc(100% - 44px));aspect-ratio:1}
  body #game-window[data-panel=shop] .shop-art-layout .shop-detail .detail-name {grid-area:1 / 2;max-height:34px}
  #game-window[data-panel=shop] .shop-art-layout :is(.detail-facts,.unified-potion-facts) {grid-area:2 / 2}
  body #game-window[data-panel=shop] .shop-art-layout .shop-checkout {grid-area:3 / 1 / 4 / -1}
  #game-window[data-panel=shop] .shop-art-layout .detail-footnote {grid-area:4 / 1 / 5 / -1}
  #game-window[data-panel=shop] .shop-art-layout .quantity-control {position:absolute;inset:auto 0 0;height:40px;width:100%}
  #game-window[data-panel=shop] .shop-art-layout .quantity-control input {inset:0 auto auto 50%;transform:translateX(-50%);width:30px;height:40px;min-height:40px;font-size:18px;border-radius:9px}
  #game-window[data-panel=shop] .shop-art-layout .quantity-control button {top:0;width:30px;height:40px;min-width:0;min-height:40px;background-size:16px 24px}
  #game-window[data-panel=shop] .shop-art-layout .selected-stock {display:block;top:0;right:0;font-size:10px}
  #game-window[data-panel=shop] .shop-art-layout .shop-wallet {left:var(--shop-frame-inset)}
  #game-window[data-panel=shop] .shop-art-layout .shop-wallet>span {font-size:14px}
  #game-window[data-panel=bag] .inventory-grid {padding:9px;grid-auto-rows:minmax(115px,max-content)}
}
@media(orientation:landscape) and (max-height:420px) {
  #game-window[data-panel=shop] {--shop-item-size:58px;--shop-preview-size:64px;--shop-note-height:27px}
  body #game-window[data-panel=shop] .shop-art-layout.shop-layout,
  body[data-story-panel=true] #game-window[data-panel=shop] .shop-art-layout.shop-layout {padding:var(--shop-content-top) var(--shop-frame-inset) var(--shop-content-bottom);gap:10px}
  body #game-window[data-panel=shop] .shop-art-layout .shop-detail {grid-template-columns:70px minmax(0,1fr);grid-template-rows:30px minmax(0,1fr) 44px var(--shop-note-height);gap:3px 7px;padding:6px;margin:0;height:100%}
  body #game-window[data-panel=shop] .shop-art-layout .shop-detail:not(:has(.detail-footnote)) {grid-template-rows:30px minmax(0,1fr) 44px}
  #game-window[data-panel=shop] .shop-art-layout .shop-selected-preview {grid-area:1 / 1 / 3 / 2}
  #game-window[data-panel=shop] .shop-art-layout .shop-selected-preview:has(.quantity-control) .detail-art {width:auto;height:min(var(--shop-preview-size),calc(100% - 36px));aspect-ratio:1}
  body #game-window[data-panel=shop] .shop-art-layout .shop-detail .detail-name {grid-area:1 / 2;max-height:30px;font-size:13px}
  #game-window[data-panel=shop] .shop-art-layout :is(.detail-facts,.unified-potion-facts) {grid-area:2 / 2;padding-right:3px}
  body #game-window[data-panel=shop] .shop-art-layout .shop-checkout {grid-area:3 / 1 / 4 / -1}
  #game-window[data-panel=shop] .shop-art-layout .detail-footnote {grid-area:4 / 1 / 5 / -1}
  #game-window[data-panel=shop] .shop-art-layout .quantity-control {position:absolute;inset:auto 0 0;width:100%;height:32px}
  #game-window[data-panel=shop] .shop-art-layout .quantity-control input {inset:0 auto auto 50%;transform:translateX(-50%);width:26px;height:32px;min-height:32px;font-size:17px;border-radius:9px}
  #game-window[data-panel=shop] .shop-art-layout .quantity-control button {top:0;width:24px;height:32px;min-width:0;min-height:32px;background-size:14px 22px}
  #game-window[data-panel=shop] .shop-art-layout .selected-stock {display:block;top:0;right:0;font-size:10px;padding:1px 3px}
  #game-window[data-panel=shop] .shop-art-layout .detail-facts.item-facts>div {grid-template-columns:minmax(0,1fr);gap:1px;padding:3px 0}
  #game-window[data-panel=shop] .shop-art-layout .detail-facts.item-facts>div>strong {text-align:right}
}