/* One bounded landscape composition. Units follow the desktop artwork;
   lists and descriptions scroll, while frames and actions never do. */
@media (orientation:landscape) and (max-height:700px), (orientation:landscape) and (max-width:1050px) {
 body {
  --desktop-guide-band:0px;
  --desktop-panel-width:calc(var(--ui-viewport-width) - var(--ui-safe-left) - var(--ui-safe-right) - 16px);
  --desktop-panel-height:calc(var(--ui-viewport-height) - var(--ui-safe-top) - var(--ui-safe-bottom) - 16px - var(--desktop-guide-band));
  --desktop-modal-unit:min(calc(var(--desktop-panel-width)/1180),calc(var(--desktop-panel-height)/690));
 }
 body[data-story-panel=true] {--desktop-guide-band:0px}
 body:is(body,[data-story-panel]) #panel-overlay:has(#game-window:is([data-panel=shop],[data-panel=bag],[data-panel=pets],[data-panel=catalog])) {
  inset:auto;left:var(--ui-viewport-left);top:var(--ui-viewport-top);
  width:var(--ui-viewport-width);height:var(--ui-viewport-height);
  padding:calc(var(--ui-safe-top) + 8px + var(--desktop-guide-band)) calc(var(--ui-safe-right) + 8px) calc(var(--ui-safe-bottom) + 8px) calc(var(--ui-safe-left) + 8px);
  align-items:center;justify-content:center;overflow:hidden;
 }
 body:is(body,[data-story-panel]) #game-window[data-panel=shop] {
  --su:min(calc(var(--desktop-panel-width)/1180),calc(var(--desktop-panel-height)/690));
  --shop-item-size:clamp(42px,calc(110 * var(--su)),90px);
  --shop-preview-size:clamp(50px,calc(152 * var(--su)),122px);
  --shop-checkout-height:36px;--shop-note-height:25px;
  --trade-tab-height:calc(100 * var(--su));--trade-tab-font:clamp(17px,calc(38 * var(--su)),30px);
  --trade-tab-left:calc(135 * var(--su));--trade-tab-top:0px;
  flex:none;min-width:0;min-height:0;width:calc(1180 * var(--su));height:calc(690 * var(--su));
  max-width:100%;max-height:100%;margin:0;overflow:visible;background:none;
 }
 body #game-window[data-panel=shop] #panel-content {position:absolute;inset:0;min-height:0;width:100%;height:100%;margin:0;padding:0;overflow:visible}
 body #game-window[data-panel=shop] #panel-content .shop-art-layout.shop-layout {
  position:relative;display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  width:100%;height:100%;min-height:0;gap:calc(20 * var(--su));padding:calc(135 * var(--su)) calc(115 * var(--su)) calc(62 * var(--su));
 }
 body #game-window[data-panel=shop] #panel-content .shop-art-layout::before {
  display:block;inset:calc(65 * var(--su)) 0 0;background:url('../assets/ui-user/shop-frame.png') center / 100% 100% no-repeat;
 }
 body #game-window[data-panel=shop] #panel-content .shop-main {
  position:relative;inset:auto;display:grid;grid-template-rows:auto minmax(0,1fr);gap:3px;
  width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:6px 8px;
  border-radius:calc(48 * var(--su));background:#f5f3df;overflow:hidden;
 }
 body #game-window[data-panel=shop] #panel-content :is(.stock-time,.sale-list-title) {grid-row:1;position:static;inset:auto;justify-self:end;align-self:center;max-width:100%;width:auto;min-height:0;margin:0;padding:2px 6px;translate:none;font-size:10px;line-height:1.3;white-space:normal}
 body #game-window[data-panel=shop] #panel-content .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;gap:10px 4px;width:100%;height:100%;min-height:0;padding:4px;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;touch-action:pan-y}
 body #game-window[data-panel=shop] #panel-content .shop-item {position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;align-self:stretch;gap:3px;width:100%;height:auto;min-width:0;min-height:0;padding:3px 1px 5px}
 body #game-window[data-panel=shop] #panel-content .shop-item .crop-art {width:var(--shop-item-size);height:var(--shop-item-size);flex:none;max-width:100%;margin:0}
 body #game-window[data-panel=shop] #panel-content .card-price {position:static;order:-1;align-self:center;min-width:0;max-width:100%;width:max-content;height:auto;min-height:18px;padding:0 4px 0 0;margin:0;gap:1px;font-size:11px;line-height:1.2;white-space:nowrap}
 body #game-window[data-panel=shop] #panel-content .card-price .crop-icon {width:18px;height:18px;flex:none}
 body #game-window[data-panel=shop] #panel-content .shop-copy {min-width:0;width:100%;margin:0}
 body #game-window[data-panel=shop] #panel-content .shop-copy strong {font-size:clamp(11px,calc(23 * var(--su)),16px);line-height:1.25;padding:0;white-space:normal;overflow-wrap:break-word}
 body #game-window[data-panel=shop] #panel-content .shop-copy :is(small,.slot-purchase-count,.slot-stock,.sale-quality) {display:block;font-size:10px;line-height:1.25;margin:1px 0 0;white-space:normal;overflow-wrap:break-word}
 body #game-window[data-panel=shop] #panel-content .shop-detail,
 body #game-window[data-panel=shop] #panel-content .shop-detail:not(:has(.detail-footnote)) {
  position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:var(--shop-preview-size) minmax(24px,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;margin:0;padding:0 4px 4px;gap:3px;
  background:none;border-radius:0;overflow:hidden;isolation:isolate;
 }
 body #game-window[data-panel=shop] #panel-content .shop-detail::before {display:block;content:'';position:absolute;inset:calc(var(--shop-preview-size)*.58) 0 0;z-index:-1;border-radius:calc(62 * var(--su));background:#bcc292;pointer-events:none}
 body #game-window[data-panel=shop] #panel-content .shop-selected-preview {position:relative;inset:auto;grid-area:1/1;width:100%;height:100%;min-width:0;min-height:0;margin:0;overflow:hidden}
 body #game-window[data-panel=shop] #panel-content .shop-selected-preview .detail-art,
 body #game-window[data-panel=shop] #panel-content .shop-selected-preview:has(.quantity-control) .detail-art {position:absolute;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] #panel-content .quantity-control {position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
 body #game-window[data-panel=shop] #panel-content .quantity-control input {inset:0 auto auto 0;transform:none;width:30px;height:30px;min-height:30px;font-size:18px;border-radius:50%;pointer-events:auto}
 body #game-window[data-panel=shop] #panel-content .quantity-control button {top:auto;bottom:0;width:30px;height:32px;min-width:30px;min-height:32px;background-size:18px 23px;background-color:transparent;box-shadow:none;pointer-events:auto}
 body #game-window[data-panel=shop] #panel-content .quantity-control button[data-delta='-1'] {left:0;right:auto}
 body #game-window[data-panel=shop] #panel-content .quantity-control button[data-delta='1'] {right:0;left:auto}
 body #game-window[data-panel=shop] #panel-content .selected-stock {display:block;inset:0 0 auto auto;font-size:10px;padding:1px 4px;max-width:55%;white-space:normal}
 body #game-window[data-panel=shop] #panel-content .shop-detail .detail-name {position:static;grid-area:2/1;width:100%;height:auto;min-height:0;max-height:36px;margin:0;padding:1px 4px;transform:none;translate:none;font-size:clamp(12px,calc(27 * var(--su)),18px);line-height:1.25;overflow:auto;white-space:normal;overflow-wrap:break-word}
 body #game-window[data-panel=shop] #panel-content :is(.detail-facts,.unified-potion-facts) {position:static;inset:auto;grid-area:3/1;display:flex;flex-direction:column;justify-content:flex-start;gap:3px;width:100%;height:100%;min-width:0;min-height:0;max-height:none;margin:0;padding:0 5px;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;overscroll-behavior:contain;touch-action:pan-y;font-size:11px;line-height:1.35}
 body #game-window[data-panel=shop] #panel-content .detail-facts.item-facts>div {display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:4px;min-height:26px;padding:3px 0;flex:none;border-bottom-width:2px}
 body #game-window[data-panel=shop] #panel-content .detail-facts.item-facts :is(span,strong) {font-size:11px;line-height:1.35;min-width:0}
 body #game-window[data-panel=shop] #panel-content .detail-facts.item-facts>div>strong {white-space:nowrap;overflow-wrap:normal;word-break:normal}
 body #game-window[data-panel=shop] #panel-content .detail-facts.item-facts .item-fact-label>img {width:15px;height:15px;flex:none}
 body #game-window[data-panel=shop] #panel-content .shop-checkout {position:relative;inset:auto;grid-area:4/1;display:flex;align-items:center;width:100%;height:36px;min-height:36px;margin:0;padding:0 39px 0 0}
 body #game-window[data-panel=shop] #panel-content .detail-total {display:flex;position:static;flex-direction:column;justify-content:center;align-items:center;width:100%;height:34px;min-height:34px;gap:0;padding:1px 4px;font-size:10px;line-height:1.2;overflow:hidden}
 body #game-window[data-panel=shop] #panel-content .detail-total strong {font-size:12px;gap:2px;line-height:1.2;white-space:nowrap;overflow-wrap:normal}
 body #game-window[data-panel=shop] #panel-content .detail-total .crop-icon {width:16px;height:16px;flex:none}
 body #game-window[data-panel=shop] #panel-content .shop-cart-button {inset:0 0 auto auto;width:36px;height:36px;min-width:36px;min-height:36px;padding:7px}
 body #game-window[data-panel=shop] #panel-content .detail-footnote {position:static;grid-area:5/1;width:100%;height:100%;min-height:0;margin:0;padding:0 4px;font-size:9px;line-height:1.3;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
 body #game-window[data-panel=shop] #panel-content .shop-wallet {position:absolute;inset:auto auto calc(12 * var(--su)) calc(128 * var(--su));width:auto;height:28px;min-width:0;max-width:50%;padding:0;margin:0;border:0;background:none}
 body #game-window[data-panel=shop] #panel-content .shop-wallet>span {width:auto;height:28px;padding:1px 8px 1px 2px;gap:4px;min-width:0;font-size:14px}
 body #game-window[data-panel=shop] #panel-content .shop-wallet .crop-icon {width:24px;height:24px}
 body #game-window[data-panel=shop] #panel-content .shop-trade-tabs-front {left:var(--trade-tab-left);top:0;height:var(--trade-tab-height);width:calc(3.6 * var(--trade-tab-height));gap:4px}
 body #game-window[data-panel=shop] #panel-content .shop-trade-tabs-front .shop-trade-tab {min-height:30px;height:100%;padding:4px 6px;font-size:var(--trade-tab-font)}
 body #game-window[data-panel=shop] #panel-close {inset:calc(128 * var(--su)) calc(8 * var(--su)) auto auto;width:40px;height:40px;min-width:40px;min-height:40px;background-size:24px 24px,38px 38px,0 0;background-position:center}
 body #trade-warehouse-shortcut {position:fixed;inset:calc(var(--ui-safe-top) + 8px) calc(var(--ui-safe-right) + 8px) auto auto}
 body #trade-warehouse-shortcut button {width:40px;height:40px;min-width:40px;min-height:40px;padding:5px}
 body #trade-warehouse-shortcut button img {width:28px;height:28px}
 body #trade-warehouse-shortcut button span {display:none}
 /* Guides occupy the unused right half of the desktop header. */
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]),body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true])[data-collapsed] {
  left:calc(var(--ui-viewport-left) + var(--ui-safe-left) + 8px + (var(--desktop-panel-width) - 1180 * var(--desktop-modal-unit)) / 2 + 480 * var(--desktop-modal-unit));right:auto;
  top:calc(var(--ui-viewport-top) + var(--ui-safe-top) + 5px);
  width:calc(560 * var(--desktop-modal-unit));max-width:none;
  height:calc(110 * var(--desktop-modal-unit));min-height:44px;max-height:68px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:20px minmax(0,1fr);
  padding:3px 10px 5px;gap:1px 5px;translate:none;overflow:hidden;
 }
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]) header {display:flex;grid-area:1/1/2/-1;height:20px;min-height:20px;gap:4px;margin:0}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]) .story-guide-avatar {width:18px;height:20px}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]) .story-guide-kicker {font-size:9px}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]) .story-guide-kicker b {display:inline;font-size:9px;margin-left:4px}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]) [data-guide=journal] {display:none}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]) [data-guide=collapse] {width:26px;height:24px;min-width:26px;min-height:24px;font-size:16px}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]) .story-guide-copy {display:block;grid-area:2/1;min-height:0;max-height:none;overflow:auto;touch-action:pan-y}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]) :is(h2,p,small) {margin:0;line-height:1.3}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]) h2 {font-size:10px}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]) :is(p,small) {font-size:10px}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]) footer {grid-area:2/2;align-self:center;max-width:86px;gap:0;margin:0}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]) #story-guide-primary {min-height:28px;padding:3px 5px;font-size:11px}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true]) .story-skip {min-height:18px;padding:1px;font-size:9px}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true])[data-collapsed=true] {height:36px;min-height:36px;grid-template-rows:28px;padding:4px 10px}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true])[data-collapsed=true] :is(.story-guide-copy,footer) {display:none}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true])[data-step=claim] {height:56px;min-height:56px;grid-template-rows:minmax(0,1fr)}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true])[data-step=claim] header {display:none}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true])[data-step=claim] :is(.story-guide-copy,footer) {grid-row:1}
 body[data-story-guide] #story-guide:is([data-shop=true],[data-panel=true])[data-step=claim] #story-guide-primary {min-height:40px}
 /* Small reward and equipment dialogs keep complete numeric values and icons. */
 body .potion-acquisition[data-kind=collection] .acquisition-facts {grid-template-columns:minmax(0,1fr)}
 body .potion-acquisition[data-kind=collection] .acquisition-fact strong {white-space:nowrap;max-width:none}
 body #game-window[data-panel=equipment] .equipment-slots {padding:10px 5px 12px;min-height:90px;overflow-x:hidden}
 body #game-window[data-panel=equipment] .equipment-slot {grid-template-rows:minmax(0,1fr)}
 body #game-window[data-panel=equipment] .equipment-icon {min-width:0;min-height:0}
 body #game-window[data-panel=equipment] .equipment-icon>.crop-icon {min-width:0;min-height:0;max-width:100%;max-height:100%}
}