/* Keep the bitmap composition, with room for Latin words and Vietnamese accents. */
html:is(:lang(en),:lang(vi)) body{font-family:"Segoe UI",system-ui,sans-serif}
html:is(:lang(en),:lang(vi)) :is(button,h1,h2,h3,.seed-name,.quest-header,.rarity-name){letter-spacing:0}
html:is(:lang(en),:lang(vi)) .game-actions button span{white-space:normal;overflow-wrap:anywhere;line-height:1.2}
html:is(:lang(en),:lang(vi)) #seed-dock .seed-name{white-space:normal;overflow-wrap:anywhere;font-size:14px;line-height:1.25;text-align:center}
html:is(:lang(en),:lang(vi)) #main-quest .main-quest-claim{white-space:normal;line-height:1.2;text-align:center}
html:is(:lang(en),:lang(vi)) #garden-record .quest-header{font-size:16px;line-height:1.2;text-align:center;white-space:normal}
html:is(:lang(en),:lang(vi)) #game-window:is([data-panel=bag],[data-panel=pets]) .window-header h1{font-size:28px;line-height:1.15;text-align:center;max-width:100%;overflow-wrap:anywhere}
html:is(:lang(en),:lang(vi)) .inventory-art-layout .inventory-item-name{font-size:15px;line-height:1.25}
html:is(:lang(en),:lang(vi)) .inventory-art-layout .inventory-detail .detail-name{font-size:18px;line-height:1.25;overflow-wrap:anywhere}
html:is(:lang(en),:lang(vi)) .inventory-art-layout .detail-actions button{font-size:14px;line-height:1.3;white-space:normal}
html:is(:lang(en),:lang(vi)) .shop-art-layout .shop-detail .detail-name{font-size:19px;line-height:1.25}
html:is(:lang(en),:lang(vi)) :is(.item-fact-label,.catalog-facts dt){min-width:0;white-space:normal;overflow-wrap:break-word}
html:is(:lang(en),:lang(vi)) .detail-facts.item-facts strong{white-space:nowrap;overflow-wrap:normal;word-break:normal}
html:is(:lang(en),:lang(vi)) #catalysis-potions button{line-height:1.25;overflow-wrap:anywhere}
html:is(:lang(en),:lang(vi)) .catalysis-potion-description{flex-wrap:wrap;gap:5px;line-height:1.35}
html:is(:lang(en),:lang(vi)) .catalysis-legend{gap:7px}
html:is(:lang(en),:lang(vi)) .catalysis-legend span{white-space:normal;line-height:1.3}
html:is(:lang(en),:lang(vi)) .potion-acquisition h2{line-height:1.3}
@media(min-width:1051px) and (min-height:701px){
 html:is(:lang(en),:lang(vi)) #seed-dock .seed-slot{flex:0 0 100px;width:100px;height:140px;min-height:140px}
 html:is(:lang(en),:lang(vi)) #seed-dock .slot-art{width:76px;height:76px;min-height:76px}
 html:is(:lang(en),:lang(vi)) #seed-dock .seed-name{width:100px;max-width:100px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
@media(max-width:1050px),(max-height:700px){
 html:is(:lang(en),:lang(vi)) #seed-dock .seed-slot{flex-basis:72px;width:72px;height:84px;min-height:84px}
 html:is(:lang(en),:lang(vi)) #seed-dock .seed-name{width:72px;max-width:72px;font-size:10px;line-height:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 html:is(:lang(en),:lang(vi)) .main-quest-finished{font-size:13px;line-height:1.3;align-self:center;grid-row:1/-1}
 html:is(:lang(en),:lang(vi)) .game-actions button{width:58px;height:64px;font-size:10px}
 html:is(:lang(en),:lang(vi)) #garden-record .quest-header{font-size:12px}
 html:is(:lang(en),:lang(vi)) #game-window:is([data-panel=bag],[data-panel=pets]) .window-header h1{font-size:19px}
 html:is(:lang(en),:lang(vi)) .inventory-art-layout .inventory-item-name{font-size:11px;line-height:1.25}
 html:is(:lang(en),:lang(vi)) .inventory-art-layout .inventory-detail .detail-name{font-size:13px;line-height:1.3}
 html:is(:lang(en),:lang(vi)) .inventory-art-layout .detail-actions button{font-size:12px;line-height:1.3}
 html:is(:lang(en),:lang(vi)) .shop-art-layout .shop-detail .detail-name{font-size:14px}
 html:is(:lang(en),:lang(vi)) #game-window[data-panel=shop] .shop-list{grid-auto-rows:minmax(166px,max-content)}
 html:is(:lang(en),:lang(vi)) #interact-button{font-size:13px;white-space:normal;overflow-wrap:anywhere}
 html:is(:lang(en),:lang(vi)) #catalysis-potions button{font-size:10px}
}
@media(orientation:landscape) and (max-height:700px){
 html:is(:lang(en),:lang(vi)) .quickbar{right:calc(var(--ui-safe-right) + 138px)}
}

/* Reserve the value's width; only prose labels may wrap. */
#game-window[data-panel=bag] .inventory-detail .detail-facts{flex:1 1 0;min-height:0;justify-content:flex-start;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#dc960f transparent;padding:0 6px 0 0}
#game-window[data-panel=bag] .inventory-detail .detail-facts>div{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;flex-shrink:0;gap:8px;min-height:38px;padding:7px 0;border-bottom-width:2px}
#game-window[data-panel=bag] .inventory-detail .detail-facts>div>:is(span,strong){min-width:0;font-size:16px;line-height:1.4;letter-spacing:0}
#game-window[data-panel=bag] .inventory-detail .detail-facts>div>strong{white-space:nowrap;overflow-wrap:normal;word-break:normal;text-align:right}
#game-window[data-panel=bag] .inventory-detail .detail-facts .item-fact-label{white-space:normal;overflow-wrap:break-word}
#game-window[data-panel=bag] .inventory-detail .detail-facts .item-fact-label>img{width:20px;height:20px}
#game-window[data-panel=bag] .inventory-detail .detail-facts>.inventory-special-effect{grid-template-columns:minmax(0,1fr);gap:2px}
#game-window[data-panel=bag] .inventory-detail .detail-facts>.inventory-special-effect>strong{white-space:normal;overflow-wrap:break-word;text-align:left;font-weight:600}
#game-window[data-panel=bag] .inventory-detail .detail-facts>[data-fruit-fact=mutation]{grid-template-columns:minmax(0,1fr)}
#game-window[data-panel=bag] .inventory-detail .detail-facts>[data-fruit-fact=mutation]>strong{white-space:normal;text-align:left}
#game-window[data-panel=bag] .inventory-detail .inventory-selected-preview{height:calc(122 * var(--iu));flex-shrink:0}
#game-window[data-panel=bag] .inventory-detail .detail-art{width:calc(145 * var(--iu));height:calc(145 * var(--iu))}
#game-window[data-panel=bag] .inventory-detail :is(.detail-name,.quality-tag){flex-shrink:0}
#game-window[data-panel=bag] .inventory-detail .detail-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;flex:none;background:none;padding:0;margin-top:6px}
#game-window[data-panel=bag] .detail-actions>button{display:flex;align-items:center;justify-content:center;gap:5px;flex:1 1 0;min-width:0;min-height:40px;padding:7px 8px;font-size:14px;line-height:1.25;letter-spacing:0}
#game-window[data-panel=bag] .detail-actions>button .crop-icon{width:20px;height:20px;object-fit:contain;flex:none}
#game-window[data-panel=bag] .detail-actions .inventory-equip{background:#548b77;color:#fff9df}
#game-window[data-panel=bag] .detail-actions .inventory-sell{flex-direction:column;background:#d95b43;color:#fff9df}
#game-window[data-panel=bag] .inventory-sell>strong{display:flex;align-items:center;gap:3px;font-size:13px;white-space:nowrap}
#game-window[data-panel=bag] .inventory-sale-preview{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-basis:100%;min-width:0;font-size:12px;line-height:1.3;color:#805331}
#game-window[data-panel=bag] .inventory-sale-preview>span{min-width:0;overflow-wrap:break-word}
#game-window[data-panel=bag] .inventory-sale-preview>strong{white-space:nowrap;color:#426b53}
#game-window[data-panel=bag] .inventory-footer{gap:6px;flex-wrap:wrap;min-height:34px}
#game-window[data-panel=bag] .inventory-wallet{display:flex;align-items:center;gap:4px;color:#426b53;font-size:16px;white-space:nowrap}
#game-window[data-panel=bag] .inventory-wallet .crop-icon{width:23px;height:23px;object-fit:contain}
#game-window[data-panel=bag] .inventory-item-total{margin-left:auto}
#game-window[data-panel=bag] .inventory-item-name{overflow-wrap:break-word;letter-spacing:0}
#game-window .context-guide-help{display:inline-grid;place-items:center;width:32px;height:32px;min-width:32px;min-height:32px;padding:3px;border:1px solid #8a9d63;border-radius:8px;background:#f9e6ae;float:right;margin:0 0 4px 5px;position:relative;z-index:2}
#game-window .context-guide-help .crop-icon{width:24px;height:24px;object-fit:contain}
#game-window[data-panel=shop] .shop-wallet{background:none;border:0;border-radius:0;box-shadow:none;padding:4px 8px;height:auto}

/* The visible wells and their scrollports share bounds; the footer never scrolls. */
#game-window[data-panel=bag] .inventory-art-layout::before{display:none}
#game-window[data-panel=bag] .inventory-main{background:none}
#game-window[data-panel=bag] .inventory-grid{background:#ffd780;border-radius:24px;overflow-x:hidden;overscroll-behavior:contain}
#game-window[data-panel=bag] .inventory-detail{background:none}
#game-window[data-panel=bag] .inventory-detail .inventory-facts-frame{flex:1 1 0;grid-column:1/-1;grid-row:3;width:100%;min-width:0;min-height:0;margin:4px 0 0;padding:8px 9px;background:#ffd780;border-radius:18px;overflow:hidden}
#game-window[data-panel=bag] .inventory-facts-frame>.detail-facts{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;min-height:0;margin:0;padding:0 6px 0 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#dc960f transparent}
#game-window[data-panel=bag] .inventory-facts-frame>.detail-facts:focus-visible{outline:2px solid #b57816;outline-offset:-2px;border-radius:4px}
#game-window[data-panel=bag] .inventory-detail .detail-actions{position:relative;z-index:1;background:#fff3bd;padding-top:5px}
@media(orientation:landscape) and (max-height:700px),(orientation:landscape) and (max-width:1050px){
 #game-window[data-panel=bag] .inventory-grid{border-radius:18px}
 #game-window[data-panel=bag] .inventory-detail .inventory-facts-frame{margin:2px 0 3px;padding:5px 7px;border-radius:12px}
 #game-window[data-panel=bag] .inventory-detail .detail-actions{padding-top:3px}
}
@media(min-width:1051px) and (min-height:701px){
 html:is(:lang(en),:lang(vi)) #game-window[data-panel=bag] .inventory-item-name{font-size:15px;line-height:1.3}
 html:is(:lang(en),:lang(vi)) #game-window[data-panel=bag] .bag-tab-label{font-size:17px;line-height:1.3}
 #game-window[data-panel=bag] .inventory-slot{justify-content:flex-start}
}
@media(max-width:1050px),(max-height:700px){
 #game-window[data-panel=bag] .inventory-detail .detail-facts>div{min-height:28px;padding:4px 0;gap:6px}
 #game-window[data-panel=bag] .inventory-detail .detail-facts>div>:is(span,strong){font-size:12px}
 #game-window[data-panel=bag] .inventory-detail .inventory-selected-preview{height:70px}
 #game-window[data-panel=bag] .inventory-detail .detail-art{width:70px;height:70px}
 #game-window[data-panel=bag] .inventory-wallet{font-size:13px}
 #game-window[data-panel=bag] .inventory-wallet .crop-icon{width:19px;height:19px}
 #game-window[data-panel=bag] .inventory-item-total{display:none}
 #game-window[data-panel=bag] .inventory-footer>button{margin-left:auto}
 #game-window[data-panel=bag] .detail-actions>button{font-size:12px;min-height:36px;padding:5px}
 #game-window[data-panel=bag] .inventory-sell>strong{font-size:11px}
 #game-window[data-panel=bag] .inventory-sale-preview{font-size:11px}
}
@media(orientation:landscape) and (max-height:550px){
 #game-window[data-panel=bag] .inventory-detail,#game-window[data-panel=bag] .inventory-detail.potion-inventory-detail{display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:2px 5px;align-items:stretch;overflow:hidden}
 #game-window[data-panel=bag] .inventory-detail .inventory-selected-preview{grid-column:1;grid-row:1/3;width:58px;height:48px;margin:0}
 #game-window[data-panel=bag] .inventory-detail .detail-art{width:46px;height:46px}
 #game-window[data-panel=bag] .inventory-detail .inventory-selected-count{font-size:11px;min-width:18px;width:auto;height:18px;left:0;top:0;padding:2px}
 #game-window[data-panel=bag] .inventory-detail .inventory-step{top:17px;width:22px;height:30px;min-width:22px;min-height:30px}
 #game-window[data-panel=bag] .inventory-detail .inventory-step.previous{left:-7px}
 #game-window[data-panel=bag] .inventory-detail .inventory-step.next{right:-7px}
 #game-window[data-panel=bag] .inventory-detail .detail-name{grid-column:2;grid-row:1;min-width:0;font-size:13px;line-height:1.25;padding:3px 5px;margin:0}
 #game-window[data-panel=bag] .inventory-detail .quality-tag{grid-column:2;grid-row:2;font-size:10px;margin:0;padding:1px 3px;align-self:start}
 #game-window[data-panel=bag] .inventory-detail .detail-facts{grid-column:1/-1;grid-row:3}
 #game-window[data-panel=bag] .inventory-detail .detail-actions{grid-column:1/-1;grid-row:4;gap:3px;margin:0}
 #game-window[data-panel=bag] .detail-actions>button{min-height:32px;padding:3px 4px}
 #game-window[data-panel=bag] .detail-actions>button .crop-icon{width:16px;height:16px}
 #game-window[data-panel=bag] .inventory-footer{min-height:26px}
}
@media(orientation:landscape) and (max-width:750px){
 #game-window[data-panel=bag] .inventory-detail .detail-actions>button{font-size:11px;padding:3px}
 #game-window[data-panel=bag] .inventory-detail .inventory-equip>.crop-icon{display:none}
 #game-window[data-panel=bag] .inventory-sell>strong{font-size:10px;gap:2px}
}