/* Landscape uses the desktop compositions. The frame has one aspect-preserving
   unit; lists and descriptions, rather than the artwork, absorb overflow. */
@media (orientation:landscape) and (max-height:700px),
       (orientation:landscape) and (max-width:1050px) {
  body:is(body,[data-story-panel]) #game-window:is([data-panel="bag"],[data-panel="pets"]) {
    --iu:min(calc(var(--desktop-panel-width,var(--ui-viewport-width,100vw)) / 1180),calc(var(--desktop-panel-height,var(--ui-viewport-height,100dvh)) / 690));
    --pu:var(--iu);
    --desktop-copy:clamp(11px,calc(22 * var(--iu)),14px);
    --desktop-action:clamp(28px,calc(58 * var(--iu)),36px);
    width:calc(1180 * var(--iu));
    height:calc(690 * var(--iu));
    min-width:0;min-height:0;max-width:100%;max-height:100%;
    aspect-ratio:1180 / 690;
    flex:none;
    background-size:100% 100%;
    overflow:visible;
  }
  body #game-window:is([data-panel="bag"],[data-panel="pets"]) .window-header {
    position:absolute;inset:0;height:100%;min-height:0;pointer-events:none;
  }
  body #game-window:is([data-panel="bag"],[data-panel="pets"]) .window-header>div {
    left:17%;top:4%;width:21%;height:12%;min-height:0;padding:0;
    display:flex;align-items:center;justify-content:center;background:none;
  }
  html body #game-window:is([data-panel="bag"],[data-panel="pets"]) .window-header h1 {
    font-size:clamp(17px,calc(42 * var(--iu)),32px);line-height:1.15;
    letter-spacing:0;max-width:100%;margin:0;text-align:center;
    white-space:normal;overflow-wrap:break-word;
  }
  body #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-close {
    inset:23% 0 auto auto;
    width:calc(112 * var(--iu));height:calc(82 * var(--iu));
    min-width:32px;min-height:32px;max-width:none;
    background-size:auto 100%;pointer-events:auto;z-index:8;
  }
  body #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-content,
  body[data-story-panel=true] #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-content {
    position:absolute;inset:20.7% 7.8% 5.2% 8%;
    width:auto;height:auto;min-width:0;min-height:0;padding:0;
    overflow:visible;
  }

  /* Warehouse: original left tabs, item grid and large centered preview. */
  body #game-window[data-panel="bag"] #panel-content .inventory-art-layout.inventory-layout,
  body #game-window[data-panel="bag"] #panel-content .inventory-art-layout.inventory-layout:has(.potion-inventory-detail) {
    display:grid;grid-template-columns:minmax(0,1.93fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);grid-template-areas:"items detail";
    gap:calc(20 * var(--iu));height:100%;min-height:0;
    padding:calc(25 * var(--iu)) calc(18 * var(--iu)) calc(12 * var(--iu)) calc(62 * var(--iu));
    border-radius:calc(46 * var(--iu));background:#fff3bd;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-art-layout::before {display:none}
  body #game-window[data-panel="bag"] #panel-content .inventory-categories {
    position:absolute;grid-area:auto;left:calc(-56 * var(--iu));top:14%;bottom:8%;
    display:grid;grid-template-columns:calc(138 * var(--iu));grid-template-rows:repeat(4,minmax(0,1fr));
    gap:calc(9 * var(--iu));max-height:none;z-index:3;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-categories .bag-tab[data-filter] {
    width:calc(138 * var(--iu));height:calc(73 * var(--iu));max-height:100%;
    min-height:0;margin:0;padding:0;align-self:center;border-radius:0;
    background-color:transparent;background-size:auto 100%;box-shadow:none;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-categories .bag-tab[data-filter].active {
    width:calc(164 * var(--iu));margin-left:calc(-26 * var(--iu));
  }
  body #game-window[data-panel="bag"] #panel-content .bag-tab .bag-tab-label,
  body #game-window[data-panel="bag"] #panel-content .bag-tab.active .bag-tab-label {
    width:56%;margin-left:42%;padding:0 2px;font-size:clamp(10px,calc(20 * var(--iu)),14px);
    line-height:1.15;white-space:normal;overflow-wrap:break-word;letter-spacing:0;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-main {
    grid-area:items;display:flex;flex-direction:column;min-width:0;min-height:0;
    padding:0;background:none;overflow:hidden;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-grid {
    flex:1 1 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:none;grid-auto-rows:minmax(calc(174 * var(--iu)),max-content);
    gap:calc(9 * var(--iu));min-height:0;max-height:none;padding:calc(12 * var(--iu));
    border-radius:calc(30 * var(--iu));overflow-x:hidden;overflow-y:auto;
    align-content:start;overscroll-behavior:contain;touch-action:pan-y;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-slot,
  body #game-window[data-panel="bag"] #panel-content .inventory-slot.active {
    min-width:0;min-height:0;height:auto;justify-content:flex-start;
    padding:calc(5 * var(--iu)) 0;gap:3px;
  }
  body #game-window[data-panel="bag"] #panel-content .item-art {
    width:calc(108 * var(--iu));height:calc(108 * var(--iu));flex:none;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-item-name {
    font-size:var(--desktop-copy);line-height:1.2;white-space:normal;overflow-wrap:break-word;
  }
  body #game-window[data-panel="bag"] #panel-content .item-count {font-size:clamp(10px,calc(18 * var(--iu)),12px)}
  body #game-window[data-panel="bag"] #panel-content .inventory-footer {
    flex:none;min-height:26px;padding:3px 0;margin:0;gap:5px;font-size:11px;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-footer button {
    min-height:26px;padding:2px 5px;font-size:11px;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-wallet {gap:3px;font-size:12px}
  body #game-window[data-panel="bag"] #panel-content .inventory-wallet .crop-icon {width:20px;height:20px}
  body #game-window[data-panel="bag"] #panel-content .inventory-detail,
  body #game-window[data-panel="bag"] #panel-content .inventory-detail.potion-inventory-detail {
    grid-area:detail;display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:calc(112 * var(--iu)) auto auto minmax(0,1fr) auto;
    gap:calc(4 * var(--iu));align-items:stretch;justify-items:center;
    width:100%;height:100%;min-width:0;min-height:0;padding:0;
    border-radius:0;background:none;overflow:hidden;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-selected-preview {
    grid-area:1 / 1;position:relative;width:100%;height:100%;min-height:0;margin:0;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-detail .detail-art {
    left:50%;top:0;transform:translateX(-50%);width:calc(112 * var(--iu));height:calc(112 * var(--iu));
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-selected-count {
    left:2px;top:0;min-width:20px;width:auto;height:20px;max-width:90%;
    padding:2px 4px;font-size:11px;line-height:1.2;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-step {
    top:50%;transform:translateY(-50%);width:28px;height:32px;min-width:28px;min-height:32px;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-step.previous {left:0}
  body #game-window[data-panel="bag"] #panel-content .inventory-step.next {right:0}
  body #game-window[data-panel="bag"] #panel-content .inventory-detail .detail-name {
    grid-area:2 / 1;justify-self:center;align-self:center;min-width:0;max-width:100%;
    padding:3px 7px;margin:0;font-size:clamp(12px,calc(24 * var(--iu)),17px);
    line-height:1.15;overflow-wrap:break-word;white-space:normal;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-detail .quality-tag {
    grid-area:3 / 1;margin:0;padding:1px 5px;font-size:10px;line-height:1.2;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-facts-frame {
    grid-area:4 / 1;width:100%;height:100%;min-width:0;min-height:0;
    margin:0;padding:calc(7 * var(--iu));border-radius:calc(24 * var(--iu));overflow:hidden;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-facts-frame>.detail-facts {
    width:100%;height:100%;min-width:0;min-height:0;max-height:100%;padding:0 3px 0 0;
    margin:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  }
  body #game-window[data-panel="bag"] #panel-content .detail-facts>div {
    display:grid;grid-template-columns:minmax(0,1fr) max-content;
    gap:4px;align-items:start;min-height:0;padding:4px 0;border-bottom-width:1px;flex:none;
  }
  body #game-window[data-panel="bag"] #panel-content .detail-facts>div>:is(span,strong) {
    min-width:0;font-size:var(--desktop-copy);line-height:1.3;
  }
  body #game-window[data-panel="bag"] #panel-content .detail-facts>div>strong {
    white-space:nowrap;overflow-wrap:normal;word-break:normal;
  }
  body #game-window[data-panel="bag"] #panel-content .detail-facts>.inventory-special-effect,
  body #game-window[data-panel="bag"] #panel-content .detail-facts>[data-fruit-fact=mutation] {grid-template-columns:minmax(0,1fr)}
  body #game-window[data-panel="bag"] #panel-content .detail-facts>.inventory-special-effect>strong,
  body #game-window[data-panel="bag"] #panel-content .detail-facts>[data-fruit-fact=mutation]>strong {white-space:normal;overflow-wrap:break-word;text-align:left}
  body #game-window[data-panel="bag"] #panel-content .item-fact-label>img {width:16px;height:16px;flex:none}
  body #game-window[data-panel="bag"] #panel-content .detail-actions {
    grid-area:5 / 1;display:flex;flex-direction:row;flex-wrap:wrap;width:100%;
    gap:3px;min-width:0;margin:0;padding:0;background:transparent;
  }
  body #game-window[data-panel="bag"] #panel-content .inventory-sale-preview {
    width:100%;flex:0 0 100%;min-width:0;gap:4px;font-size:10px;line-height:1.2;padding:1px 0;
  }
  body #game-window[data-panel="bag"] #panel-content .detail-actions>button {
    flex:1 1 0;width:auto;min-width:0;min-height:var(--desktop-action);padding:4px;
    font-size:clamp(10px,calc(20 * var(--iu)),13px);line-height:1.15;
  }
  body #game-window[data-panel="bag"] #panel-content .detail-actions button .crop-icon {width:16px;height:16px}

  /* Pets retain the desktop top roster and vertical portrait/detail column. */
  body #game-window[data-panel="pets"] #panel-content .pet-layout {
    display:grid;grid-template-columns:minmax(0,1.93fr) minmax(0,1fr);
    grid-template-rows:calc(140 * var(--pu)) minmax(0,1fr);
    grid-template-areas:"roster detail" "workspace detail";
    gap:calc(12 * var(--pu)) calc(22 * var(--pu));
    width:100%;height:100%;min-width:0;min-height:0;
    padding:calc(20 * var(--pu));border-radius:calc(42 * var(--pu));background:#fff3bd;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-layout::before {display:none}
  body #game-window[data-panel="pets"] #panel-content .pet-roster {
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);
    gap:3px;min-height:0;padding:0;border-radius:calc(24 * var(--pu));background:#ffda82;overflow:auto;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-roster-item {
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:1px;padding:2px;min-height:0;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-roster-art {width:calc(66 * var(--pu));height:calc(66 * var(--pu));flex:none}
  body #game-window[data-panel="pets"] #panel-content .pet-roster-item strong {font-size:var(--desktop-copy);line-height:1.15;max-width:100%}
  body #game-window[data-panel="pets"] #panel-content .pet-roster-item small,
  body #game-window[data-panel="pets"] #panel-content .pet-roster-status {display:block;font-size:10px;line-height:1.1;padding:0 3px;max-width:100%}
  body #game-window[data-panel="pets"] #panel-content .pet-detail {
    grid-area:detail;display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;gap:3px;
    width:100%;height:100%;min-width:0;min-height:0;
    padding:0;background:none;border-radius:0;overflow:hidden;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-profile {
    display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;min-height:0;overflow:hidden;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-preview {
    width:calc(114 * var(--pu));height:calc(100 * var(--pu));min-height:0;flex:none;
    background-size:contain;background-repeat:no-repeat;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-main-portrait {height:calc(114 * var(--pu));top:calc(-8 * var(--pu))}
  body #game-window[data-panel="pets"] #panel-content .pet-profile h2 {
    width:auto;max-width:100%;margin:0;padding:3px 9px;font-size:clamp(12px,calc(24 * var(--pu)),17px);line-height:1.15;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-form {display:block;font-size:10px;line-height:1.1;padding:1px 5px}
  body #game-window[data-panel="pets"] #panel-content .pet-detail-scroll {
    min-width:0;min-height:0;height:100%;padding:4px 6px;border-radius:calc(24 * var(--pu));background:#ffda82;
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  }
  body #game-window[data-panel="pets"] #panel-content :is(.pet-hunger-label,.pet-mutation-label,.pet-buff p,.pet-buff h3,.pet-buff h3 span) {font-size:var(--desktop-copy);line-height:1.3}
  body #game-window[data-panel="pets"] #panel-content :is(.pet-mutation-rule,.pet-buff small) {font-size:10px;line-height:1.3}
  body #game-window[data-panel="pets"] #panel-content .pet-vitals {padding-bottom:5px}
  body #game-window[data-panel="pets"] #panel-content .pet-buff {padding-top:5px;border-top-width:1px}
  body #game-window[data-panel="pets"] #panel-content .pet-detail-actions {
    display:flex;flex-direction:column;gap:3px;min-width:0;padding:0;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-detail-actions button {
    width:100%;min-width:0;min-height:var(--desktop-action);padding:4px 6px;
    font-size:var(--desktop-copy);line-height:1.15;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-detail-actions .pet-upgrade {
    display:flex;flex-direction:row;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:2px;font-size:clamp(10px,calc(20 * var(--pu)),13px);border-width:1px;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-upgrade strong {font-size:11px;gap:2px;white-space:nowrap}
  body #game-window[data-panel="pets"] #panel-content .pet-upgrade img {width:16px;height:16px}
  body #game-window[data-panel="pets"] #panel-content .pet-workspace {grid-area:workspace;gap:4px;min-width:0;min-height:0;overflow:hidden}
  body #game-window[data-panel="pets"] #panel-content .pet-tabs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
  body #game-window[data-panel="pets"] #panel-content .pet-tabs button {height:var(--desktop-action);min-height:var(--desktop-action);padding:3px;gap:3px;font-size:var(--desktop-copy)}
  body #game-window[data-panel="pets"] #panel-content .pet-tabs .crop-icon {display:block;width:16px;height:16px}
  body #game-window[data-panel="pets"] #panel-content :is(.pet-work,.pet-feeding,.pet-collection) {padding:4px;min-height:0;min-width:0;border-radius:calc(20 * var(--pu));overflow:hidden}
  body #game-window[data-panel="pets"] #panel-content .pet-feeding {display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:3px}
  body #game-window[data-panel="pets"] #panel-content :is(.pet-work,.pet-collection) {display:grid;grid-template-rows:auto minmax(0,1fr);gap:3px}
  body #game-window[data-panel="pets"] #panel-content .pet-section-heading {display:flex;gap:2px 5px;padding:0 0 2px;border-bottom-width:1px}
  body #game-window[data-panel="pets"] #panel-content .pet-section-heading h3 {display:block;font-size:var(--desktop-copy);line-height:1.15}
  body #game-window[data-panel="pets"] #panel-content .pet-section-heading>span {font-size:10px;line-height:1.15}
  body #game-window[data-panel="pets"] #panel-content :is(.pet-food-list,.pet-effect-list) {
    grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:min-content;
    gap:4px;min-width:0;min-height:0;height:100%;max-height:none;padding:3px;
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-food-art {width:calc(66 * var(--pu));height:calc(66 * var(--pu));max-width:100%}
  body #game-window[data-panel="pets"] #panel-content :is(.pet-food strong,.pet-effect strong,.pet-food small,.pet-effect small) {font-size:10px;line-height:1.2}
  body #game-window[data-panel="pets"] #panel-content .pet-feed-footer {
    display:grid;grid-template-columns:auto 42px minmax(0,1fr);gap:5px;min-width:0;padding:3px 0 0;margin:0;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-feed-footer label {font-size:11px}
  body #game-window[data-panel="pets"] #panel-content .pet-feed-footer input,
  body #game-window[data-panel="pets"] #panel-content .pet-feed-footer .pet-primary {
    width:auto;min-width:0;max-width:100%;height:var(--desktop-action);min-height:var(--desktop-action);
    padding:3px 6px;font-size:12px;line-height:1.15;margin:0;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-feed-footer input {width:42px}
  body #game-window[data-panel="pets"] #panel-content .pet-work-scroll {grid-row:2;min-height:0;overflow-x:hidden;overflow-y:auto;padding:2px 4px;touch-action:pan-y}
  body #game-window[data-panel="pets"] #panel-content :is(.pet-toggle,.pet-select) {font-size:var(--desktop-copy);padding:5px 0;gap:6px}
  body #game-window[data-panel="pets"] #panel-content .pet-select select {font-size:11px;padding:4px;width:52%;max-width:58%}
  body #game-window[data-panel="pets"] #panel-content .pet-empty {min-height:0;padding:4px;font-size:11px;gap:4px}
  body #game-window[data-panel="pets"] #panel-content .pet-empty>.crop-icon {width:28px;height:28px;margin:0}

  /* Book keeps both pages and its spine. The measured envelope includes tabs. */
  body #game-window[data-panel="catalog"] {
    --h:min(calc(var(--desktop-panel-width,var(--ui-viewport-width,100vw)) / 1210),calc(var(--desktop-panel-height,var(--ui-viewport-height,100dvh)) / 636));
    --catalog-unit:var(--h);
    width:calc(1120 * var(--h));height:calc(556 * var(--h));
    min-width:0;min-height:0;max-width:100%;max-height:100%;aspect-ratio:1120 / 556;
    flex:none;margin-top:calc(65 * var(--h));margin-left:calc(85 * var(--h));
    background-size:100% 100%;background-position:center;overflow:visible;
  }
  body #game-window[data-panel="catalog"] .window-header>div {
    inset:14% auto auto calc(-74 * var(--h));width:calc(130 * var(--h));height:calc(230 * var(--h));
    padding:calc(20 * var(--h));border-radius:0;background:url('../assets/ui-user/catalog-tab.png') center / 100% 100% no-repeat;
  }
  html body #game-window[data-panel="catalog"] #window-title {font-size:clamp(17px,calc(48 * var(--h)),29px);width:1.1em;line-height:1.2;writing-mode:horizontal-tb;white-space:normal}
  html[data-locale-layout="latin"] body #game-window[data-panel="catalog"] #window-title {font-size:clamp(11px,calc(26 * var(--h)),17px);writing-mode:vertical-rl;width:auto;white-space:nowrap}
  body #game-window[data-panel="catalog"] #panel-close {
    inset:calc(-58 * var(--h)) calc(25 * var(--h)) auto auto;
    width:calc(100 * var(--h));height:calc(122 * var(--h));min-width:32px;min-height:38px;
  }
  body #game-window[data-panel="catalog"] #panel-content {inset:5% 4.5% 6% 4%;padding:0;width:auto;height:auto;min-height:0;overflow:visible}
  body #game-window[data-panel="catalog"] #panel-content .catalog-shell {position:relative;display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:visible}
  body #game-window[data-panel="catalog"] #panel-content .collection-tabs {
    position:absolute;inset:auto calc(110 * var(--h)) calc(100% + 7 * var(--h)) 0;
    width:auto;height:calc(62 * var(--h));min-height:28px;max-width:none;gap:4px;padding:0 4px;
  }
  body #game-window[data-panel="catalog"] #panel-content .collection-tabs button {font-size:clamp(10px,calc(23 * var(--h)),14px);padding:2px 4px;line-height:1.15}
  body #game-window[data-panel="catalog"] #panel-content .catalog-shell>.catalog-book {
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);
    column-gap:26%;row-gap:0;width:100%;height:100%;min-width:0;min-height:0;padding:calc(12 * var(--h)) 5%;overflow:hidden;
    background:url('../assets/ui-user/book-pages.png') center / 100% 100% no-repeat;
  }
  body #game-window[data-panel="catalog"] #panel-content .catalog-left {
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) 28px;
    gap:3px;min-height:0;padding:0;overflow:hidden;
  }
  body #game-window[data-panel="catalog"] #panel-content .catalog-entries {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(calc(128 * var(--h)),1fr));
    gap:4px;min-width:0;min-height:0;height:100%;padding:2px;overflow-x:hidden;overflow-y:auto;
  }
  body #game-window[data-panel="catalog"] #panel-content .catalog-entry {grid-template-rows:minmax(calc(54 * var(--h)),1fr) auto 14px;gap:1px;min-height:0}
  body #game-window[data-panel="catalog"] #panel-content .catalog-entry-art {width:calc(106 * var(--h));height:100%;max-width:100%;max-height:calc(110 * var(--h))}
  body #game-window[data-panel="catalog"] #panel-content .catalog-entry>strong {font-size:clamp(10px,calc(22 * var(--h)),14px);line-height:1.1;max-height:2.2em;-webkit-line-clamp:2;overflow:hidden}
  body #game-window[data-panel="catalog"] #panel-content .catalog-discovery {font-size:9px;line-height:13px;margin:0;padding:0 3px}
  body #game-window[data-panel="catalog"] #panel-content .catalog-discovery-count {font-size:11px;line-height:1.2}
  body #game-window[data-panel="catalog"] #panel-content .catalog-pagination {min-height:0;height:28px;gap:7px;font-size:11px}
  body #game-window[data-panel="catalog"] #panel-content .catalog-pagination button {width:32px;min-width:32px;height:28px;min-height:28px;padding:0;font-size:23px}
  body #game-window[data-panel="catalog"] #panel-content .catalog-right {
    display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:calc(122 * var(--h)) auto auto minmax(0,1fr) 13px;
    gap:3px;min-width:0;min-height:0;height:100%;padding:0;border:0;overflow:hidden;
  }
  body #game-window[data-panel="catalog"] #panel-content .catalog-preview-row {grid-area:1 / 1;width:100%;height:100%;grid-template-columns:28px minmax(0,1fr) 28px;gap:2px;min-height:0}
  body #game-window[data-panel="catalog"] #panel-content .catalog-preview {width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:1}
  body #game-window[data-panel="catalog"] #panel-content .catalog-arrow {width:28px;min-width:28px;height:32px;min-height:32px}
  body #game-window[data-panel="catalog"] #panel-content .catalog-arrow>span {width:14px;height:25px}
  body #game-window[data-panel="catalog"] #panel-content .catalog-name {grid-area:2 / 1;width:100%;height:auto;min-height:0;margin:0;padding:3px 5px;font-size:clamp(12px,calc(26 * var(--h)),17px);line-height:1.15}
  body #game-window[data-panel="catalog"] #panel-content .catalog-description {grid-area:3 / 1;width:100%;height:auto;max-height:2.5em;font-size:10px;line-height:1.25;margin:0;padding:0;-webkit-line-clamp:2;overflow:hidden}
  body #game-window[data-panel="catalog"] #panel-content .catalog-facts {grid-area:4 / 1;width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:0 3px 0 0;gap:3px;overflow-x:hidden;overflow-y:auto;touch-action:pan-y}
  body #game-window[data-panel="catalog"] #panel-content .catalog-facts>div {display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:start;min-height:0;gap:5px;padding:3px 0;border-bottom-width:1px;flex:none}
  body #game-window[data-panel="catalog"] #panel-content .catalog-facts :is(dt,dd) {font-size:clamp(11px,calc(22 * var(--h)),14px);line-height:1.2;min-width:0}
  body #game-window[data-panel="catalog"] #panel-content .catalog-facts dd {white-space:nowrap;overflow-wrap:normal;word-break:normal}
  body #game-window[data-panel="catalog"] #panel-content .catalog-page-count {grid-area:5 / 1;font-size:10px;line-height:13px;margin:0;padding:0}
  body #game-window[data-panel="catalog"] #panel-content .collection-page {grid-template-rows:auto minmax(0,1fr);gap:4px;min-width:0;min-height:0;border:0;padding:0;overflow:hidden}
  body #game-window[data-panel="catalog"] #panel-content .collection-page-header h2 {font-size:clamp(12px,calc(26 * var(--h)),17px);line-height:1.2;margin-bottom:3px}
  body #game-window[data-panel="catalog"] #panel-content .collection-page-header p {font-size:11px;line-height:1.25;margin:2px 0}
  body #game-window[data-panel="catalog"] #panel-content .collection-page-header .collection-page-note {font-size:10px}
  body #game-window[data-panel="catalog"] #panel-content .collection-scroll {min-width:0;min-height:0;height:100%;padding:0 3px 0 0;overflow-x:hidden;overflow-y:auto;touch-action:pan-y}
  body #game-window[data-panel="catalog"] #panel-content .collection-milestone {grid-template-columns:calc(58 * var(--h)) minmax(0,1fr);gap:5px;min-height:calc(110 * var(--h));padding:5px 0}
  body #game-window[data-panel="catalog"] #panel-content .collection-stamp {width:calc(58 * var(--h));font-size:clamp(14px,calc(27 * var(--h)),22px)}
  body #game-window[data-panel="catalog"] #panel-content .collection-milestone h3 {font-size:11px;line-height:1.25;margin:0 0 2px}
  body #game-window[data-panel="catalog"] #panel-content :is(.collection-milestone p,.collection-milestone-status,.collection-showcase-status) {font-size:10px;line-height:1.2}
  body #game-window[data-panel="catalog"] #panel-content .collection-showcase-slot {grid-template-columns:calc(72 * var(--h)) minmax(0,1fr);gap:5px;min-height:calc(115 * var(--h));padding:5px 0}
  body #game-window[data-panel="catalog"] #panel-content .collection-showcase-art {width:calc(72 * var(--h));height:calc(72 * var(--h))}
  body #game-window[data-panel="catalog"] #panel-content .collection-showcase-fields {min-width:0;gap:3px}
  body #game-window[data-panel="catalog"] #panel-content .collection-showcase-fields label {font-size:11px;line-height:1.2}
  body #game-window[data-panel="catalog"] #panel-content .collection-showcase-fields select {min-width:0;height:28px;padding:2px;font-size:11px}
}

/* A browser toolbar can leave only ~300 CSS pixels of height. Keep a real
   detail viewport even when a translated pet name or price wraps. The portrait
   shrinks in its own track; it never pushes the text beneath the action footer. */
@media (orientation:landscape) and (max-height:360px) {
  body #game-window[data-panel="pets"] #panel-content .pet-layout {
    grid-template-rows:max(74px,calc(150 * var(--pu))) minmax(0,1fr);
  }
  body #game-window[data-panel="pets"] #panel-content .pet-roster {
    overflow:hidden;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-roster-item {
    display:grid;
    grid-template-columns:minmax(0,.55fr) minmax(0,1fr);
    grid-template-rows:minmax(18px,1fr) auto auto;
    align-items:center;justify-items:center;
    gap:1px 2px;padding:2px;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-roster-art {
    grid-area:1 / 1 / 2 / -1;
    width:auto;height:100%;min-height:0;max-height:calc(66 * var(--pu));
    max-width:100%;aspect-ratio:1;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-roster-item strong {
    grid-area:2 / 1 / 3 / -1;
    width:100%;max-height:2.3em;font-size:11px;line-height:1.15;
    overflow-wrap:normal;word-break:normal;text-align:center;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-roster-item small {
    grid-area:3 / 1;
    width:100%;padding:0;font-size:10px;line-height:1.1;text-align:center;
    white-space:normal;overflow-wrap:break-word;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-roster-status {
    grid-area:3 / 2;
    width:100%;padding:0 1px;font-size:10px;line-height:1.1;text-align:center;
    white-space:normal;overflow-wrap:normal;word-break:normal;
  }
  /* The care tab already labels this area. At toolbar-height landscapes,
     reserve the middle track for complete food cards, not a repeated heading. */
  body #game-window[data-panel="pets"] #panel-content .pet-workspace {
    gap:2px;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-feeding {
    grid-template-rows:minmax(0,1fr) auto;gap:2px;padding:2px;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-feeding>.pet-section-heading {
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-feeding>.pet-food-list {
    grid-row:1;grid-template-columns:repeat(3,minmax(0,1fr));
    align-content:start;gap:3px;padding:2px;
    scroll-padding-block:2px;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-food {
    gap:1px;padding:1px 2px;min-height:0;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-food .pet-food-art {
    width:22px;height:22px;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-food :is(strong,small) {
    font-size:10px;line-height:1.1;overflow-wrap:normal;word-break:normal;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-feed-footer {
    grid-row:2;gap:4px;padding:0;margin:0;border-top-width:1px;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-detail {
    grid-template-rows:minmax(0,.95fr) minmax(32px,1fr) auto;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-profile {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto auto;
    justify-items:center;
    align-items:center;
    height:100%;min-height:0;gap:2px;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-preview {
    grid-area:1 / 1;width:auto;height:100%;min-width:0;min-height:0;
    max-width:100%;max-height:calc(100 * var(--pu));
    aspect-ratio:114 / 100;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-main-portrait {
    inset:0;width:100%;height:100%;object-fit:contain;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-profile h2 {
    grid-area:2 / 1;max-width:100%;min-height:0;
    font-size:12px;line-height:1.15;padding:2px 6px;
  }
  body #game-window[data-panel="pets"] #panel-content .pet-form {
    grid-area:3 / 1;max-width:100%;font-size:10px;line-height:1.1;
  }
}