@charset "UTF-8";

/* Keep the desktop shop composition; compact only its decorative spacing. */
@media (orientation:landscape) and (max-height:700px), (orientation:landscape) and (max-width:1050px) {
  #panel-overlay:has(#game-window[data-panel="shop"]) {
    padding:calc(var(--ui-safe-top,0px) + 8px) calc(var(--ui-safe-right,0px) + 8px) calc(var(--ui-safe-bottom,0px) + 8px) calc(var(--ui-safe-left,0px) + 8px);
  }
  #game-window[data-panel="shop"] {
    --shop-tab-art:.28px;
    --shop-preview-size:96px;
    --shop-item-size:60px;
    width:100%;
    height:100%;
    max-width:1180px;
    max-height:100%;
    min-height:0;
    overflow:hidden;
  }
  #game-window[data-panel="shop"] #panel-content {position:absolute;inset:0;padding:0;overflow:hidden}
  #game-window[data-panel="shop"] .shop-art-layout.shop-layout {
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    gap:20px;
    width:100%;
    height:100%;
    min-height:0;
    padding:76px 72px 14px 46px;
  }
  #game-window[data-panel="shop"] .shop-art-layout::before {
    inset:22px 28px 6px 14px;
    background-size:100% 100%;
    background-position:center;
  }
  #game-window[data-panel="shop"] .shop-trade-tabs {
    position:absolute;
    inset:10px auto auto 18px;
    display:block;
    width:calc(1000 * var(--shop-tab-art));
    height:calc(302 * var(--shop-tab-art));
  }
  #game-window[data-panel="shop"] .shop-trade-tab,
  #game-window[data-panel="shop"] .shop-trade-tab.active {
    position:absolute;
    display:block;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    transform:none;
    box-shadow:none;
    font-size:29px;
    line-height:1;
    letter-spacing:0;
    background-size:100% 100%;
    background-repeat:no-repeat;
  }
  #game-window[data-panel="shop"] .shop-trade-tab[data-mode="buy"] {
    left:0;
    top:0;
    width:calc(536 * var(--shop-tab-art));
    height:calc(302 * var(--shop-tab-art));
    background-image:url("../assets/ui-user/shop-buy-tab.png");
  }
  #game-window[data-panel="shop"] .shop-trade-tab[data-mode="sell"] {
    left:calc(438 * var(--shop-tab-art));
    top:0;
    width:calc(446 * var(--shop-tab-art));
    height:calc(253 * var(--shop-tab-art));
    background-image:url("../assets/ui-user/shop-sell-tab.png");
  }
  #game-window[data-panel="shop"] .shop-trade-tab > span,
  #game-window[data-panel="shop"] .shop-trade-tab.active > span {
    position:absolute;
    display:grid;
    place-items:center;
    padding:0;
    background-size:100% 100%;
    text-shadow:0 2px 3px #56723a55;
  }
  #game-window[data-panel="shop"] .shop-trade-tab[data-mode="buy"] > span {
    left:calc(113 * var(--shop-tab-art));
    top:calc(22 * var(--shop-tab-art));
    width:calc(263 * var(--shop-tab-art));
    height:calc(182 * var(--shop-tab-art));
    background-image:url("../assets/ui-user/shop-buy-label-bg.png");
  }
  #game-window[data-panel="shop"] .shop-trade-tab[data-mode="sell"] > span {
    left:calc(95 * var(--shop-tab-art));
    top:calc(38 * var(--shop-tab-art));
    width:calc(261 * var(--shop-tab-art));
    height:calc(171 * var(--shop-tab-art));
    background-image:url("../assets/ui-user/shop-sell-label-bg.png");
  }
  #game-window[data-panel="shop"] .shop-trade-tab[data-mode="buy"] > span > b {transform:rotate(12deg)}
  #game-window[data-panel="shop"] .shop-trade-tab[data-mode="sell"] > span > b {transform:rotate(-15deg)}
  #game-window[data-panel="shop"] .shop-trade-tabs-rear {display:none}
  #game-window[data-panel="shop"] .shop-trade-tabs-front .shop-trade-tab[data-mode="buy"] {background-image:url("../assets/ui-user/shop-buy-tab.png")}
  #game-window[data-panel="shop"] .shop-trade-tabs-front .shop-trade-tab[data-mode="sell"] {background-image:url("../assets/ui-user/shop-sell-tab.png")}
  #game-window[data-panel="shop"] .shop-trade-tabs-front .shop-trade-tab > span {visibility:visible}
  #game-window[data-panel="shop"] .trade-guide-hand {left:75%;top:65%;font-size:26px}
  #game-window[data-panel="shop"] #panel-close {
    inset:94px 2px auto auto;
    width:68px;
    height:60px;
    min-width:44px;
    min-height:44px;
    border:0;
    border-radius:0;
    background-color:transparent;
    background-image:url("../assets/ui-user/shop-close.png"),url("../assets/ui-user/shop-close-circle.png"),url("../assets/ui-user/shop-close-bg.png");
    background-size:25px 25px,46px 46px,100% 100%;
    background-position:30px center,20px center,center;
    background-repeat:no-repeat;
  }
  #game-window[data-panel="shop"] .shop-main {
    position:relative;
    inset:auto;
    display:grid;
    grid-template-rows:24px minmax(0,1fr);
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    padding:12px 14px;
    background:url("../assets/ui-user/shop-list.png") center / 100% 100% no-repeat;
    overflow:hidden;
  }
  #game-window[data-panel="shop"] :is(.stock-time,.sale-list-title) {
    position:static;
    grid-row:1;
    justify-self:center;
    align-self:center;
    width:auto;
    max-width:100%;
    min-height:0;
    margin:0;
    padding:3px 10px;
    font-size:12px;
    line-height:1.2;
    translate:none;
  }
  #game-window[data-panel="shop"] .shop-list {
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-rows:104px;
    gap:8px;
    min-height:0;
    max-height:none;
    padding:4px 5px;
    overflow:auto;
    scrollbar-gutter:stable;
  }
  #game-window[data-panel="shop"] .shop-list::before {display:none}
  #game-window[data-panel="shop"] .shop-item .crop-art {width:var(--shop-item-size);height:var(--shop-item-size);max-width:100%;margin:4px 0 0}
  #game-window[data-panel="shop"] .shop-copy {margin:0}
  #game-window[data-panel="shop"] .shop-copy strong {font-size:13px;line-height:1.2;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
  #game-window[data-panel="shop"] .shop-copy small {font-size:10px;line-height:1.2;margin-top:1px}
  #game-window[data-panel="shop"] .card-price {inset:0 auto auto 0;font-size:12px;height:21px;min-width:0;max-width:100%}
  #game-window[data-panel="shop"] .card-price .crop-icon {width:20px;height:20px}
  #game-window[data-panel="shop"] .unified-shop [data-category="potion"],
  #game-window[data-panel="shop"] .unified-shop .potion-offer-complete {grid-column:2}
  #game-window[data-panel="shop"] .shop-detail {
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--shop-preview-size) 25px minmax(0,1fr) 48px 18px;
    gap:2px;
    align-items:stretch;
    width:100%;
    height:calc(100% + 24px);
    min-height:0;
    padding:0 10px 4px;
    margin-top:-24px;
    overflow:hidden;
  }
  #game-window[data-panel="shop"] .shop-detail::before {inset:62px -12px 0;background-size:100% 100%}
  #game-window[data-panel="shop"] .shop-selected-preview {
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:1;
    width:100%;
    height:var(--shop-preview-size);
    overflow:visible;
  }
  #game-window[data-panel="shop"] .shop-selected-preview .detail-art {
    display:grid;
    left:50%;
    top:0;
    width:var(--shop-preview-size);
    height:var(--shop-preview-size);
    max-height:none;
    transform:translateX(-50%);
  }
  #game-window[data-panel="shop"] .selected-stock {display:block;top:5px;right:0;font-size:11px}
  #game-window[data-panel="shop"] .quantity-control {position:absolute;inset:0;width:100%;height:100%;z-index:3}
  #game-window[data-panel="shop"] .quantity-control input {left:2px;top:3px;transform:none;width:40px;height:40px;min-height:40px;border-radius:50%;font-size:22px}
  #game-window[data-panel="shop"] .quantity-control button {top:46px;width:44px;height:44px;min-height:44px;border-radius:50%;background-color:#fff3bd;background-size:32px 32px;box-shadow:0 2px 4px #68573830}
  #game-window[data-panel="shop"] .quantity-control button[data-delta="-1"] {left:0}
  #game-window[data-panel="shop"] .quantity-control button[data-delta="1"] {right:0}
  #game-window[data-panel="shop"] .shop-detail .detail-name {grid-column:1;grid-row:2;position:static;width:100%;max-width:100%;height:25px;min-height:0;margin:0;padding:0 4px;font-size:15px;line-height:1.2;transform:none;translate:none;overflow:auto}
  #game-window[data-panel="shop"] :is(.detail-facts,.unified-potion-facts) {position:static;grid-column:1;grid-row:3;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;width:100%;height:100%;min-width:0;min-height:0;max-height:none;padding:0 14px 0 2px;margin:0;font-size:13px;line-height:1.35;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable}
  #game-window[data-panel="shop"] .detail-facts > div {min-height:25px;padding:2px 0;gap:5px}
  #game-window[data-panel="shop"] .detail-facts :is(span,strong) {min-width:0;font-size:13px;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
  #game-window[data-panel="shop"] .detail-facts .item-fact-label {padding:0}
  #game-window[data-panel="shop"] .detail-facts .item-fact-label > img {width:18px;height:18px}
  #game-window[data-panel="shop"] .shop-checkout {position:relative;inset:auto;grid-column:1;grid-row:4;display:flex;align-items:center;width:100%;height:48px;min-height:48px;padding:0 52px 0 0;margin:0}
  #game-window[data-panel="shop"] .detail-total {position:static;display:flex;width:100%;height:40px;min-height:40px;gap:3px;padding:5px 10px;margin:0;flex-direction:column;justify-content:center;font-size:12px;line-height:1.1}
  #game-window[data-panel="shop"] .detail-total strong {font-size:15px;line-height:1.1}
  #game-window[data-panel="shop"] .detail-total .crop-icon {width:17px;height:17px}
  #game-window[data-panel="shop"] .shop-cart-button {inset:0 0 auto auto;width:48px;height:48px;min-width:48px;min-height:48px;padding:9px}
  #game-window[data-panel="shop"] .detail-footnote {position:static;grid-column:1;grid-row:5;width:100%;height:18px;min-height:0;padding:0;margin:0;font-size:10px;line-height:1.25;overflow:auto}
  #game-window[data-panel="shop"] .shop-wallet {position:absolute;inset:auto auto 0 0;width:auto;max-width:45%;height:42px;padding:6px 14px 4px 8px;border-radius:0 25px 0 0;background:#fffef0}
  #game-window[data-panel="shop"] .shop-wallet > span {width:auto;height:30px;padding:2px 8px;gap:8px;font-size:18px}
  #game-window[data-panel="shop"] .shop-wallet .crop-icon {width:27px;height:27px}
}

@media (orientation:landscape) and (max-height:350px), (orientation:landscape) and (max-width:650px) {
  #game-window[data-panel="shop"] {--shop-tab-art:.24px;--shop-preview-size:68px;--shop-item-size:58px}
  #game-window[data-panel="shop"] .shop-art-layout.shop-layout {padding:66px 56px 16px 28px;gap:12px;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  #game-window[data-panel="shop"] .shop-art-layout::before {inset:20px 18px 6px 4px}
  #game-window[data-panel="shop"] .shop-trade-tabs {left:8px}
  #game-window[data-panel="shop"] .shop-trade-tab,
  #game-window[data-panel="shop"] .shop-trade-tab.active {font-size:25px}
  #game-window[data-panel="shop"] #panel-close {right:0;top:80px;width:54px;height:52px;background-size:23px 23px,40px 40px,100% 100%;background-position:23px center,14px center,center}
  #game-window[data-panel="shop"] .shop-main {padding:10px}
  #game-window[data-panel="shop"] .shop-list {grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:108px;gap:6px;padding:3px}
  #game-window[data-panel="shop"] .shop-copy strong {font-size:12px}
  #game-window[data-panel="shop"] :is(.stock-time,.sale-list-title) {font-size:10px;padding:2px 4px}
  #game-window[data-panel="shop"] .shop-detail {height:calc(100% + 16px);margin-top:-16px;padding:0 5px 3px;grid-template-rows:var(--shop-preview-size) 25px minmax(0,1fr) 48px 16px}
  #game-window[data-panel="shop"] .shop-detail::before {inset:46px -4px 0}
  #game-window[data-panel="shop"] .quantity-control input {left:0;top:0;width:34px;height:34px;min-height:34px;font-size:20px}
  #game-window[data-panel="shop"] .quantity-control button {top:26px;width:30px;height:42px;min-height:42px}
  #game-window[data-panel="shop"] .selected-stock {top:0;font-size:10px;padding:2px 4px}
  #game-window[data-panel="shop"] .shop-detail .detail-name {font-size:14px}
  #game-window[data-panel="shop"] :is(.detail-facts,.unified-potion-facts) {padding-right:12px}
  #game-window[data-panel="shop"] .detail-facts .item-fact-label > img {width:16px;height:16px}
  #game-window[data-panel="shop"] .shop-checkout {padding-right:46px}
  #game-window[data-panel="shop"] .shop-cart-button {width:44px;height:44px;min-width:44px;min-height:44px;padding:8px}
  #game-window[data-panel="shop"] .detail-total {padding:4px 6px;font-size:11px}
  #game-window[data-panel="shop"] .detail-total strong {font-size:13px}
  #game-window[data-panel="shop"] .detail-footnote {height:16px}
  #game-window[data-panel="shop"] .shop-wallet {height:35px;padding:3px 11px 3px 5px}
  #game-window[data-panel="shop"] .shop-wallet > span {height:28px;font-size:16px}
}

@media (orientation:landscape) and (min-height:500px) and (max-height:700px), (orientation:landscape) and (min-height:500px) and (max-width:1050px) {
  #game-window[data-panel="shop"] {--shop-tab-art:.36px;--shop-preview-size:150px;--shop-item-size:82px}
  #game-window[data-panel="shop"] .shop-art-layout.shop-layout {padding-top:102px;padding-bottom:22px;gap:24px}
  #game-window[data-panel="shop"] .shop-trade-tab,
  #game-window[data-panel="shop"] .shop-trade-tab.active {font-size:35px}
  #game-window[data-panel="shop"] #panel-close {top:130px;width:76px;height:64px;background-size:28px 28px,52px 52px,100% 100%;background-position:32px center,21px center,center}
  #game-window[data-panel="shop"] .shop-list {grid-auto-rows:132px;gap:10px}
  #game-window[data-panel="shop"] .shop-copy strong {font-size:14px}
  #game-window[data-panel="shop"] .shop-copy small {font-size:11px}
  #game-window[data-panel="shop"] .shop-detail {grid-template-rows:var(--shop-preview-size) 30px minmax(0,1fr) 58px 22px;height:calc(100% + 30px);margin-top:-30px;padding-bottom:7px;gap:4px}
  #game-window[data-panel="shop"] .shop-detail::before {top:100px}
  #game-window[data-panel="shop"] .shop-detail .detail-name {height:30px;font-size:16px}
  #game-window[data-panel="shop"] .detail-facts > div {min-height:30px;padding:4px 0}
  #game-window[data-panel="shop"] .shop-checkout {height:58px;padding-right:62px}
  #game-window[data-panel="shop"] .shop-cart-button {width:58px;height:58px;padding:12px}
  #game-window[data-panel="shop"] .detail-total {height:48px;font-size:13px}
  #game-window[data-panel="shop"] .detail-total strong {font-size:17px}
  #game-window[data-panel="shop"] .detail-footnote {height:22px;font-size:11px}
}

/* Dialogue reserves its own band; preserve checkout while reducing preview decoration. */
@media (orientation:landscape) and (max-height:700px), (orientation:landscape) and (max-width:1050px) {
  body[data-story-panel="true"] #game-window[data-panel="shop"] {--shop-tab-art:.22px;--shop-preview-size:60px;--shop-item-size:54px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-art-layout.shop-layout {padding:58px 60px 10px 32px;gap:12px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-art-layout::before {inset:18px 22px 4px 8px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-trade-tabs {top:6px;left:10px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-trade-tab,
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-trade-tab.active {font-size:24px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] #panel-close {top:70px;width:54px;height:52px;background-size:23px 23px,40px 40px,100% 100%;background-position:23px center,14px center,center}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-main {padding:8px 12px;grid-template-rows:22px minmax(0,1fr)}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-list {grid-auto-rows:100px;gap:6px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-detail {height:calc(100% + 12px);margin-top:-12px;grid-template-rows:var(--shop-preview-size) 24px minmax(0,1fr) 48px 14px;gap:2px;padding:0 6px 3px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-detail::before {inset:36px -8px 0}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-detail .detail-name {height:24px;font-size:14px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .quantity-control input {width:28px;height:28px;min-height:28px;font-size:18px;top:0}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .quantity-control button {top:28px;width:32px;height:32px;min-height:32px;background-size:16px 24px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .detail-facts > div {min-height:24px;padding:2px 0}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-checkout {height:48px;min-height:48px;padding-right:50px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-cart-button {width:48px;height:48px;min-width:48px;min-height:48px;padding:9px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .detail-total {height:40px;min-height:40px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .detail-footnote {height:14px;font-size:10px}
}

@media (orientation:landscape) and (max-height:350px), (orientation:landscape) and (max-width:650px) {
  body[data-story-panel="true"] #game-window[data-panel="shop"] {--shop-tab-art:.18px;--shop-preview-size:56px;--shop-item-size:48px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-art-layout.shop-layout {padding:46px 50px 8px 24px;gap:10px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-trade-tabs {top:4px;left:6px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-trade-tab,
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-trade-tab.active {font-size:20px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] #panel-close {top:62px;width:48px;height:46px;background-size:21px 21px,36px 36px,100% 100%;background-position:20px center,12px center,center}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-main {padding:6px 8px;grid-template-rows:22px minmax(0,1fr)}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-list {grid-auto-rows:96px;gap:6px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-detail {height:calc(100% + 8px);margin-top:-8px;grid-template-rows:var(--shop-preview-size) 22px minmax(0,1fr) 44px 12px;padding:0 4px 2px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-detail .detail-name {height:22px;font-size:13px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .quantity-control input {width:26px;height:26px;min-height:26px;font-size:17px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .quantity-control button {top:26px;height:30px;min-height:30px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-checkout {height:44px;min-height:44px;padding-right:46px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-cart-button {width:44px;height:44px;min-width:44px;min-height:44px;padding:8px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .detail-total {height:38px;min-height:38px;padding:3px 5px}
  body[data-story-panel="true"] #game-window[data-panel="shop"] .detail-footnote {height:12px}
}