@charset "UTF-8";

/* Original stylesheet: ./src/style.css */
:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#2d4431;font-synthesis:none;--u:min(.0598086vw,.1062699dvh,1px);--edge:clamp(12px,calc(22 * var(--u)),22px);--ink:#2d4431;--muted:#68705b;--line:#d6cfb6;--cream:#f5f1df;--green:#4e754b;--gold:#ffc338;--paper:url("../assets/ui/panel.png");--packet:url("../assets/ui/seed-packet.png")}
*{box-sizing:border-box}
html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}
body{background:#91cdf5}
button,input,select{font:inherit}
button{cursor:pointer;color:var(--ink);border:1px solid var(--line);border-radius:11px;background:linear-gradient(#faf7e9,#eee9d8);padding:10px 16px;transition:filter .15s,transform .15s;font-weight:600}
button:hover:not(:disabled){filter:brightness(1.035)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.45}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}canvas:focus{outline:none}
button.primary,.primary{background:linear-gradient(#5f8356,#426a42);color:#fffdf0;border-color:#41633d;font-weight:700}
h1,h2,h3,p{margin:0}h2{font-size:clamp(22px,calc(28 * var(--u)),28px)}h3{font-size:clamp(17px,calc(22 * var(--u)),22px)}
img,svg{display:block;flex-shrink:0}img{object-fit:contain;user-select:none;-webkit-user-drag:none}.crop-icon{width:32px;height:32px;object-fit:contain}.reference-icon{mix-blend-mode:darken}
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Full-screen world and interaction feedback. */
#scene-wrap{position:fixed;inset:0;background:linear-gradient(#84c6f6,#c3e6f5 52%,#a8bd74)}#scene{display:block;width:100%;height:100%;touch-action:none}
#renderer-error{position:absolute;inset:25%;z-index:50;display:grid;place-content:center;padding:30px;text-align:center;background:var(--cream);border:1px solid var(--line);border-radius:18px;font-size:17px;line-height:1.7}
#station-prompt{position:absolute;left:53%;top:58%;transform:translate(-50%,-50%);padding:12px 20px;max-width:90vw;border:1px solid var(--line);border-radius:12px;background:#faf7e7f2;box-shadow:0 3px 12px #2b472016;font-size:clamp(15px,calc(22 * var(--u)),22px);font-weight:700;text-align:center;pointer-events:none}#station-prompt:empty{display:none}
/* HUD, anchored to viewport edges independently of the windows. */
.station-marker{position:absolute;display:flex;align-items:center;gap:8px;transform:translate(-50%,-100%);padding:7px 13px;border:1px solid #b6ac89;border-radius:9px;background:#fff9e7ed;box-shadow:0 3px 8px #20372130;font-size:clamp(12px,1.15vw,17px);font-weight:700;white-space:nowrap;pointer-events:none}.station-marker img{width:26px;height:26px}.station-marker:after{content:"";position:absolute;left:calc(50% - 5px);bottom:-6px;width:10px;height:10px;background:#fff9e7;border-right:1px solid #b6ac89;border-bottom:1px solid #b6ac89;transform:rotate(45deg)}.station-marker.in-range{border-color:#e1ac37;box-shadow:0 0 14px #ffd66670}
.game-hud{position:fixed;top:max(calc(20 * var(--u)),env(safe-area-inset-top));left:var(--edge);right:var(--edge);z-index:30;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;pointer-events:none}.game-hud button{pointer-events:auto}
.hud-resources,.hud-system{display:flex;align-items:center;gap:calc(16 * var(--u))}
.hud-pill{display:flex;align-items:center;gap:calc(12 * var(--u));min-height:calc(48 * var(--u));padding:calc(7 * var(--u)) calc(16 * var(--u));border:1px solid #c9cbb6;border-radius:calc(15 * var(--u));background:linear-gradient(#faf8ecf5,#eeeddeef);box-shadow:0 1px 1px #53624310;white-space:nowrap;font-size:clamp(15px,calc(22 * var(--u)),22px);font-weight:700}
.coin-pill{width:calc(158 * var(--u));padding-left:calc(11 * var(--u))}.coin-pill strong{font-size:clamp(21px,calc(26 * var(--u)),26px);font-variant-numeric:tabular-nums}.potion-pill{min-width:calc(127 * var(--u));justify-content:center}.potion-pill strong{font-size:clamp(20px,calc(25 * var(--u)),25px)}
.hud-icon{width:calc(39 * var(--u));height:calc(39 * var(--u))}.potion-pill .hud-icon{width:calc(29 * var(--u));height:calc(39 * var(--u))}
.garden-status{position:absolute;left:50%;transform:translateX(-50%);width:calc(381 * var(--u));justify-content:center;min-height:calc(43 * var(--u));font-size:clamp(15px,calc(22 * var(--u)),22px)}.garden-status img,.garden-status svg{width:calc(28 * var(--u));height:calc(28 * var(--u))}
.square-button{width:calc(49 * var(--u));height:calc(48 * var(--u));min-width:38px;min-height:38px;padding:calc(9 * var(--u));display:grid;place-items:center;border-radius:calc(14 * var(--u));background:#f4f2e3}.square-button img,.square-button svg{width:100%;height:100%}
#save-status{min-width:calc(122 * var(--u));min-height:calc(43 * var(--u));justify-content:center;font-size:clamp(13px,calc(18 * var(--u)),18px)}.save-error{color:#a24b34!important}.save-error.hud-pill{background:#fff0d6}.world-label{display:none}
.quest-board{position:fixed;left:var(--edge);top:calc(112 * var(--u));z-index:25;width:calc(223 * var(--u));min-height:calc(160 * var(--u));padding:calc(21 * var(--u)) calc(22 * var(--u)) calc(12 * var(--u));background:url("../assets/ui/quest-board.png") center / 100% 100% no-repeat;font-weight:700;pointer-events:none}
.quest-header{display:flex;align-items:center;gap:calc(7 * var(--u));font-size:clamp(15px,calc(20 * var(--u)),20px);line-height:1.3;padding-bottom:calc(9 * var(--u));border-bottom:1px solid #d6c8a980}.quest-header img,.quest-header svg{width:calc(23 * var(--u));height:calc(23 * var(--u))}
.quest-item{display:grid;grid-template-columns:calc(42 * var(--u)) minmax(0,1fr) auto;align-items:center;gap:calc(8 * var(--u));min-height:calc(55 * var(--u));font-size:clamp(14px,calc(20 * var(--u)),20px);border-bottom:1px solid #d6c8a970}.quest-item img,.quest-item svg{width:calc(38 * var(--u));height:calc(38 * var(--u))}
.quest-reward{display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));padding-top:calc(7 * var(--u));font-size:clamp(16px,calc(22 * var(--u)),22px)}.quest-reward img,.quest-reward svg{width:calc(28 * var(--u));height:calc(28 * var(--u))}.quest-board>small{display:block;margin-top:4px;text-align:center;font-size:12px;font-weight:400;color:#748064}
/* Quickbar: large artwork above a label, quantity at the artwork's lower right. */
.quickbar{position:fixed;left:50%;bottom:max(calc(23 * var(--u)),env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;display:grid;justify-items:center;gap:calc(9 * var(--u));pointer-events:none}
#garden-hint{max-width:85vw;padding:6px 14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:16px;background:#42633199;color:#fffdeb;text-shadow:0 1px 1px #2f492d;font-size:clamp(12px,calc(15 * var(--u)),15px)}#garden-hint:empty{display:none}
.seed-dock{display:flex;align-items:flex-start;gap:calc(12 * var(--u));padding:calc(8 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u));border-radius:14px;background:#58763025;pointer-events:auto}
.seed-slot{position:relative;width:calc(80 * var(--u));height:calc(104 * var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(6 * var(--u));padding:0;border:0;background:none;box-shadow:none;overflow:visible}.seed-slot:hover:not(:disabled){filter:none}
.slot-art{width:100%;height:calc(80 * var(--u));flex-shrink:0;display:grid;place-items:center;border:1px solid #d7d3b5;border-radius:calc(10 * var(--u));background:linear-gradient(#f6f4e5ee,#e7e9cded);box-shadow:0 2px 2px #40502c12}.seed-slot.active .slot-art{border:2px solid var(--gold);background:linear-gradient(#fffbea,#faf3d6);box-shadow:0 0 0 2px #fff8d8,0 0 11px #ffc73888}
.slot-key{position:absolute;left:calc(3 * var(--u));top:calc(1 * var(--u));z-index:2;min-width:calc(22 * var(--u));padding:0 3px;border:1px solid #f3f3d8;border-radius:5px;background:#687658;color:white;font-family:inherit;font-size:clamp(12px,calc(19 * var(--u)),19px);font-weight:700;line-height:1.25;text-align:center}
.slot-art>.crop-icon{width:calc(47 * var(--u));height:calc(59 * var(--u))}.seed-icon{display:grid;place-items:center;width:calc(56 * var(--u));height:calc(67 * var(--u));background:var(--packet) center / contain no-repeat;transform:rotate(8deg)}.seed-icon>.crop-icon{width:60%;height:60%;margin-top:10%}
.harvest-icon{display:grid;place-items:center;width:calc(62 * var(--u));height:calc(62 * var(--u))}.harvest-icon .crop-icon{width:90%;height:90%}
.seed-quantity{position:absolute;right:calc(6 * var(--u));top:calc(54 * var(--u));z-index:2;font-size:clamp(15px,calc(22 * var(--u)),22px);line-height:1.1;font-weight:700;color:#2c4430;text-shadow:0 1px 1px #fffde8}.seed-name{font-size:clamp(13px,calc(18 * var(--u)),18px);line-height:1.25;font-weight:700;color:#fffde6;text-shadow:0 1px 2px #364e2e;white-space:nowrap}.empty-slot .slot-art{color:#c0bca0;font-size:calc(45 * var(--u));font-weight:700}
.game-actions{position:fixed;right:var(--edge);bottom:max(calc(34 * var(--u)),env(safe-area-inset-bottom));z-index:30;display:flex;gap:calc(16 * var(--u))}.game-actions button{position:relative;width:calc(68 * var(--u));height:calc(83 * var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(5 * var(--u));padding:calc(7 * var(--u)) calc(4 * var(--u));border:1px solid #dedbc2;border-radius:calc(13 * var(--u));background:#f8f5e2ef;box-shadow:none;font-size:clamp(13px,calc(18 * var(--u)),18px);font-weight:700}.game-actions img,.game-actions svg{width:calc(37 * var(--u));height:calc(41 * var(--u))}.game-actions button.active{border:2px solid var(--gold);box-shadow:0 0 0 2px #fff8dc,0 0 12px #ffcd4380}.game-actions b{position:absolute;top:-6px;right:-5px;min-width:20px;padding:1px 4px;border:2px solid #f4f2df;border-radius:12px;background:#547345;color:white;font-size:12px;line-height:16px}.game-actions b:empty{display:none}
#movement-help{position:fixed;left:var(--edge);bottom:calc(30 * var(--u));max-width:calc(375 * var(--u));z-index:25;display:flex;align-items:center;gap:calc(5 * var(--u));padding:calc(9 * var(--u)) calc(15 * var(--u));border-radius:24px;background:#4d672f99;color:#fffbe5;font-size:clamp(12px,calc(16 * var(--u)),16px);line-height:1.4;pointer-events:none;white-space:nowrap}#movement-help kbd{padding:0 3px;border:1px solid #dce4bb8c;border-radius:4px;font:inherit;font-weight:700}.help-divider{width:1px;height:18px;background:#dce4bb66;margin:0 7px}
/* Window sizes and placement match the 1672 x 941 reference composition. */
#panel-overlay{position:fixed;inset:0;z-index:20;display:flex;justify-content:flex-end;align-items:center;padding:0 10vw calc(50 * var(--u)) 3vw;background:#2948290b}
#game-window{width:calc(1005 * var(--u));height:calc(662 * var(--u));max-width:94vw;max-height:calc(100dvh - 185 * var(--u));display:flex;flex-direction:column;overflow:hidden;outline:none;border:1px solid #b9b596;border-radius:calc(22 * var(--u));background-color:var(--cream);background-image:linear-gradient(110deg,#fffdf488,#f4efdb33),var(--paper);background-position:center;background-size:100% 100%,calc(100% + 160px) calc(100% + 160px);box-shadow:0 3px 6px #3b4b2b26;font-size:clamp(15px,calc(21 * var(--u)),21px)}
#game-window[data-panel="bag"]{width:calc(889 * var(--u));height:calc(642 * var(--u))}#game-window[data-panel="garden"]{width:max(340px,calc(465 * var(--u)));height:auto;max-height:calc(100dvh - 210 * var(--u))}#game-window[data-panel="settings"]{width:max(480px,calc(720 * var(--u)));height:auto}#game-window[data-panel="tools"]{width:calc(900 * var(--u));height:auto}
.window-header{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-shrink:0;min-height:calc(78 * var(--u));margin:0 calc(25 * var(--u));padding:calc(16 * var(--u)) 0 calc(12 * var(--u));border-bottom:1px solid #d4cdb489}.window-header>div{display:flex;align-items:center;gap:calc(19 * var(--u));min-width:0}.window-header h1{font-size:clamp(27px,calc(42 * var(--u)),42px);font-weight:700;line-height:1.15;letter-spacing:1px}#window-icon{display:block;width:calc(48 * var(--u));height:calc(51 * var(--u));flex-shrink:0}#window-icon>img,#window-icon>svg{width:100%;height:100%}
#panel-close{display:grid;place-items:center;width:calc(52 * var(--u));height:calc(52 * var(--u));min-width:38px;min-height:38px;padding:0;border:1px solid #d1c9ae;border-radius:calc(12 * var(--u));background:#f6f1e0;font:600 clamp(30px,calc(44 * var(--u)),44px)/1 system-ui,sans-serif;box-shadow:none}
#panel-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:calc(14 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u));scrollbar-width:thin;scrollbar-color:#bbb999 transparent}#game-window[data-panel="bag"] #panel-content{padding:calc(14 * var(--u)) calc(30 * var(--u)) calc(18 * var(--u))}
.window-footer{flex-shrink:0;display:flex;justify-content:space-between;gap:12px;padding:7px calc(26 * var(--u));border-top:1px solid #ddd5ba7a;color:#858570;font-size:12px;line-height:1.35}#game-window[data-panel="shop"] .window-footer,#game-window[data-panel="bag"] .window-footer{display:none}
.panel-tabs{display:flex;gap:calc(14 * var(--u));flex-shrink:0;min-height:calc(50 * var(--u));margin-bottom:calc(13 * var(--u))}.panel-tabs button{flex:1;min-width:0;min-height:38px;padding:calc(7 * var(--u)) calc(12 * var(--u));border-radius:calc(12 * var(--u));background:#e9e4d1;font-size:clamp(15px,calc(23 * var(--u)),23px);font-weight:700}.panel-tabs button.active,.panel-tabs button[aria-pressed="true"]{color:#fffef2;background:linear-gradient(#618358,#45673f);border-color:#59734d}
/* Shop: selectable cards and a single purchase column. */
.shop-layout{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) calc(378 * var(--u));gap:calc(20 * var(--u));align-items:stretch}.shop-main{min-width:0;min-height:0;display:flex;flex-direction:column}.shop-main .panel-tabs{width:67%}
.shop-list{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:calc(12 * var(--u))}
.shop-item{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(5 * var(--u));padding:calc(10 * var(--u)) calc(9 * var(--u));border:1px solid #d9d1b8;border-radius:calc(13 * var(--u));background:linear-gradient(110deg,#f8f5e8,#f0ebd9);text-align:center}
.shop-item.active,.shop-item[aria-pressed="true"]{border:2px solid var(--gold);padding:calc(10 * var(--u) - 1px) calc(9 * var(--u) - 1px);background:linear-gradient(#fffbed,#faf2d8);box-shadow:0 0 0 2px #fff9e0,0 0 9px #ffd24450}
.crop-art{display:grid;place-items:center;flex-shrink:0}.shop-item .crop-art{width:calc(98 * var(--u));height:calc(108 * var(--u))}.shop-item .crop-art>.seed-icon{width:100%;height:100%}
.shop-copy strong{display:block;font-size:clamp(16px,calc(24 * var(--u)),24px);font-weight:700;line-height:1.25;white-space:nowrap}.shop-copy small{display:block;margin-top:calc(4 * var(--u));color:#69745d;font-size:clamp(13px,calc(19 * var(--u)),19px);line-height:1.3}
.card-price{display:flex;align-items:center;justify-content:center;gap:calc(7 * var(--u));margin-top:calc(3 * var(--u));font-size:clamp(17px,calc(24 * var(--u)),24px);font-weight:700;line-height:1.2}.card-price .crop-icon{width:calc(32 * var(--u));height:calc(32 * var(--u))}.shop-item.sold-out{opacity:.55}
.shop-main>.stock-time{flex-shrink:0;margin-top:calc(7 * var(--u));padding:0;background:none;text-align:center;font-size:clamp(12px,calc(15 * var(--u)),15px);line-height:1.3;color:#7b806b}
.shop-detail{min-width:0;display:flex;flex-direction:column;align-items:center;gap:calc(6 * var(--u));padding:calc(11 * var(--u)) calc(24 * var(--u));border:1px solid #dfd6ba;border-radius:calc(14 * var(--u));background:linear-gradient(120deg,#f1ecd9b0,#eee7d266)}
.detail-art{display:grid;place-items:center;flex-shrink:0;width:calc(150 * var(--u));height:calc(151 * var(--u));margin:0 auto}.detail-art>.crop-icon{width:90%;height:90%}.detail-art>.seed-icon{width:88%;height:100%}.shop-detail .detail-art{width:calc(132 * var(--u));height:calc(130 * var(--u))}
.detail-name{font-size:clamp(21px,calc(31 * var(--u)),31px);font-weight:700;line-height:1.15;text-align:center}
.detail-facts{width:100%;font-size:clamp(15px,calc(21 * var(--u)),21px);line-height:1.25}.detail-facts>div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:calc(39 * var(--u));padding:calc(4 * var(--u)) 0;border-bottom:1px solid #d7ceb67a}.detail-facts span{display:flex;align-items:center;gap:calc(10 * var(--u));color:#66705d}.detail-facts strong{display:flex;align-items:center;gap:calc(9 * var(--u));font-variant-numeric:tabular-nums;white-space:nowrap}.detail-facts .crop-icon{width:calc(29 * var(--u));height:calc(29 * var(--u))}.shop-detail .detail-facts>div{min-height:calc(34 * var(--u))}
.quantity-control{display:flex;align-items:center;justify-content:center;gap:calc(7 * var(--u));width:100%;margin:calc(2 * var(--u)) 0}.quantity-control button{width:calc(52 * var(--u));height:calc(44 * var(--u));min-width:38px;min-height:36px;padding:0;color:#fffdf2;border-color:#53744c;background:linear-gradient(#65875a,#466e42);font-size:clamp(24px,calc(34 * var(--u)),34px);line-height:1}
.quantity-control input{width:calc(145 * var(--u));min-width:55px;height:calc(44 * var(--u));min-height:36px;border:1px solid #cec5ab;border-radius:calc(10 * var(--u));background:#fdf9eb;color:var(--ink);font-size:clamp(17px,calc(25 * var(--u)),25px);font-weight:700;text-align:center;appearance:textfield}.quantity-control input::-webkit-inner-spin-button,.quantity-control input::-webkit-outer-spin-button{appearance:none;margin:0}
.detail-total{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:calc(7 * var(--u));border-top:1px solid #cdc3aa;font-size:clamp(17px,calc(24 * var(--u)),24px);font-weight:700}.detail-total strong{display:flex;align-items:center;gap:calc(9 * var(--u))}.detail-total .crop-icon{width:calc(33 * var(--u));height:calc(33 * var(--u))}.shop-detail>.primary{width:100%;min-height:calc(47 * var(--u));padding:calc(7 * var(--u));font-size:clamp(18px,calc(25 * var(--u)),25px)}.detail-footnote{color:#777d68;font-size:clamp(13px,calc(18 * var(--u)),18px);line-height:1.25;text-align:center}
/* Inventory: four-column grid with independent selected-item details. */
.inventory-layout{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) calc(255 * var(--u));gap:calc(26 * var(--u))}.inventory-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.inventory-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:calc((100% - 30 * var(--u)) / 3);align-content:start;gap:calc(15 * var(--u)) calc(17 * var(--u));overflow-y:auto;overflow-x:hidden;padding:3px;scrollbar-width:thin}
.inventory-slot{position:relative;min-width:0;min-height:0;display:grid;place-items:center;padding:calc(11 * var(--u));border:1px solid #d9d1bb;border-radius:calc(11 * var(--u));background:linear-gradient(120deg,#f3efdf,#ece6d4)}.inventory-slot.active,.inventory-slot[aria-pressed="true"]{border:2px solid var(--gold);padding:calc(11 * var(--u) - 1px);background:#fbf4df;box-shadow:0 0 0 1px #fff5d3,0 0 9px #ffc63d66}
.item-art{display:grid;place-items:center;width:calc(86 * var(--u));height:calc(88 * var(--u));max-width:90%;max-height:95%}.item-art>.crop-icon{width:95%;height:95%}.item-art .seed-icon{width:calc(71 * var(--u));height:calc(87 * var(--u));max-width:100%;max-height:100%}
.item-count{position:absolute;right:calc(11 * var(--u));bottom:calc(6 * var(--u));font-size:clamp(17px,calc(23 * var(--u)),23px);font-weight:700;color:#314a34;text-shadow:0 1px 1px #fffbe7}.item-lock{position:absolute;left:7px;top:5px;font-size:14px;color:#667158}.inventory-slot.empty-item{color:#c8c0a5;font-size:calc(49 * var(--u));font-weight:700;cursor:default}
.inventory-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0;min-height:calc(53 * var(--u));margin-top:calc(14 * var(--u));font-size:clamp(17px,calc(24 * var(--u)),24px);font-weight:700}.inventory-footer button{min-width:calc(146 * var(--u));min-height:calc(49 * var(--u));padding:calc(8 * var(--u)) calc(16 * var(--u));font-size:clamp(15px,calc(22 * var(--u)),22px)}
.inventory-detail{min-width:0;display:flex;flex-direction:column;align-items:center;gap:calc(10 * var(--u));padding:calc(13 * var(--u)) 0 0 calc(24 * var(--u));border-left:1px solid #d5cdb5}.inventory-detail .detail-name{font-size:clamp(22px,calc(29 * var(--u)),29px)}
.quality-tag{display:inline-block;padding:calc(4 * var(--u)) calc(21 * var(--u));border-radius:20px;background:#bfd099;color:#486139;font-size:clamp(15px,calc(20 * var(--u)),20px);line-height:1.15;font-weight:700;text-align:center}.inventory-detail .detail-facts{margin-top:calc(3 * var(--u))}.detail-actions{display:grid;gap:calc(11 * var(--u));width:100%;margin-top:auto}.detail-actions button{width:100%;min-height:calc(49 * var(--u));padding:calc(8 * var(--u));font-size:clamp(16px,calc(22 * var(--u)),22px)}.detail-actions p{font-size:clamp(13px,calc(18 * var(--u)),18px);text-align:center;color:#6f7961;line-height:1.4}
/* Existing cultivation, settings, tools, and catalog remain functional. */
.panel-kicker{display:none}.panel-intro{color:var(--muted);font-size:16px;line-height:1.7;margin:7px 0 15px}.panel-note{margin-top:20px;padding-top:13px;border-top:1px solid var(--line);color:#7e826c;font-size:13px;line-height:1.7}
.feature-card{border:1px solid #d7d3bc;border-radius:13px;background:#f3efdd;padding:20px;margin:18px 0}.feature-card p{color:#768266;font-size:15px;line-height:1.75;margin-top:10px}.feature-card .big-icon{display:block;margin-bottom:10px}.big-icon .crop-icon{width:48px;height:48px}
#game-window[data-panel="tools"] #panel-content{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}#game-window[data-panel="tools"] #panel-content>h2,#game-window[data-panel="tools"] #panel-content>.panel-intro,#game-window[data-panel="tools"] #panel-content>.panel-note{grid-column:1/-1}#game-window[data-panel="tools"] .feature-card{margin:0;padding:18px}
.plant-header{display:flex;align-items:center;gap:15px;margin-bottom:15px}.plant-header .crop-art{width:64px;height:64px;background:#e7e9cf;border:1px solid #d4d9ba;border-radius:12px}.plant-header .crop-icon{width:52px;height:52px}.plant-header .panel-intro{font-size:14px;margin-bottom:0}
.stage-track{display:flex;gap:6px;margin:17px 0 9px}.stage-step{flex:1;font-size:13px;color:#989d83}.stage-step::before{content:"";display:block;height:5px;margin-bottom:8px;border-radius:4px;background:#dfdfc9}.stage-step.done::before{background:#82a965}.stage-step.current{color:#486a3b;font-weight:700}.stage-step.current::before{background:#527746}
.timer-row{display:flex;justify-content:space-between;gap:10px;margin-top:16px;color:#768568;font-size:14px}.timer-row strong{color:#416139}.progress{height:5px;overflow:hidden;margin-top:9px;border-radius:4px;background:#dfe2cc}.progress>span{display:block;height:100%;background:#91ac68}
.potion-card{border:1px solid #d2dbb8;border-radius:13px;padding:16px;margin-top:20px;background:#e9edd7}.potion-top{display:flex;align-items:center;justify-content:space-between;gap:9px}.potion-top span{font-size:14px;color:#7b8a63}.potion-card p{font-size:14px;line-height:1.7;color:#7b886a;margin-top:8px}.odds{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:15px 0}.odds div{font-size:13px;color:#7c886c;text-align:center}.odds strong{display:block;font-size:18px;margin-top:5px;color:#47653c}.potion-card button{width:100%;font-size:16px}.potion-result{font-size:14px;line-height:1.5;margin-top:8px;color:#6b814f}
.fruit-list{display:grid;gap:10px;margin-top:15px}.fruit-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#faf7e988;font-size:15px}.fruit-row .crop-icon{width:38px;height:38px}.fruit-detail{flex:1;min-width:0}.fruit-row small{display:block;font-size:13px;line-height:1.65;color:#7b836a}.fruit-row button{padding:9px 11px;font-size:14px}.tag{display:inline-block;margin-top:3px;padding:2px 5px;border-radius:4px;background:#e4ddbd;font-size:12px}
.text-button{border:0;background:none;box-shadow:none;padding:8px 0;text-decoration:underline;font-size:14px;color:#718064}.button-row{display:flex;gap:10px;margin-top:14px}.button-row>*{flex:1;min-width:0}.full{width:100%;margin-top:14px}.empty{padding:30px 10px;color:#858a72;font-size:15px;line-height:1.8;text-align:center}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:20px 0}.setting-row label{font-size:17px}.setting-row select{max-width:58%;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:#fffbee;color:#44643e;font-size:16px}.note-box{padding:15px;margin:17px 0;border-radius:10px;background:#e8e4cf88;color:#81826b;font-size:14px;line-height:1.75}.danger{color:#a46044;border-color:#d9bd9c;background:#f8eddb}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.stats-grid>div{display:flex;align-items:center;gap:12px;padding:14px;border-radius:10px;background:#e8e9d5;font-size:14px;color:#859073}.stats-grid strong{font-size:24px;color:#527447}.steps{display:grid;gap:17px;margin:22px 0}.step{display:flex;gap:14px}.step-number{font-size:22px;color:#91a375}.step b{font-size:15px}.step p{font-size:14px;color:#818a71;margin-top:5px}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.catalog-card{min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;border:1px solid #d8cfb7;border-radius:12px;background:#f4efde;text-align:center}.catalog-card>.crop-icon,.catalog-card .crop-art{width:80px;height:93px}.catalog-card .crop-art>.seed-icon{width:100%;height:100%}.catalog-card h2,.catalog-card strong{font-size:20px}.catalog-card small,.catalog-card p{font-size:14px;line-height:1.6;color:#758066}
#toast{position:fixed;top:90px;left:50%;z-index:60;max-width:90vw;padding:12px 22px;border:1px solid #dce5b75e;border-radius:12px;background:#304f37ef;color:#fffbe6;box-shadow:0 5px 20px #243e3029;font-size:15px;line-height:1.6;text-align:center;opacity:0;transform:translate(-50%,-10px);transition:opacity .15s,transform .15s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}
dialog{width:calc(100% - 36px);max-width:460px;max-height:85dvh;padding:28px;overflow:auto;border:1px solid #b9b596;border-radius:18px;background:#f8f3e3;color:#354e39;box-shadow:0 15px 50px #183c3433}dialog::backdrop{background:#29483144;backdrop-filter:blur(2px)}dialog p{font-size:16px;line-height:1.75;white-space:pre-line;margin:16px 0 22px;color:#7a846a}dialog>button{width:100%;font-size:17px}.dialog-art{width:45px;height:45px;margin-bottom:15px}
#touch-controls{position:absolute;inset:0;display:none;z-index:5;pointer-events:none}#joystick{position:absolute;left:24px;bottom:145px;width:100px;height:100px;border:2px solid #fffce9b0;border-radius:50%;background:#4b663650;display:grid;place-items:center;touch-action:none;pointer-events:auto}#joystick-knob{width:43px;height:43px;border:2px solid #fffbe8d0;border-radius:50%;background:#fffbe9b5;pointer-events:none}
/* Compact layouts keep every purchase/detail action reachable by scrolling. */
@media(max-width:1100px){
  :root{--u:.7px}.garden-status{width:max-content;min-width:calc(335 * var(--u));font-size:15px}#movement-help{display:none}#panel-overlay{padding-right:4vw;padding-left:4vw}#game-window{max-width:92vw}
}
@media(pointer:coarse){#touch-controls{display:block}#movement-help{display:none}}
@media(max-width:760px){
  :root{--u:.66px;--edge:12px}
  .game-hud{top:max(12px,env(safe-area-inset-top))}.hud-resources,.hud-system{gap:7px}.hud-pill{min-height:37px;padding:5px 8px;font-size:15px;border-radius:10px}.coin-pill{width:101px;padding-left:6px;gap:7px}.coin-pill strong{font-size:20px}.potion-pill{min-width:76px;gap:6px}.potion-pill strong{font-size:18px}.hud-icon{width:29px;height:29px}.potion-pill .hud-icon{width:23px;height:29px}
  #save-status{min-width:64px;max-width:98px;font-size:12px;white-space:normal}.square-button{width:38px;height:38px;padding:7px}.garden-status{top:49px;width:auto;max-width:90vw;min-width:218px;min-height:32px;font-size:14px;padding:5px 10px}.garden-status img,.garden-status svg{width:23px;height:23px}.quest-board{display:none}
  .quickbar{bottom:max(10px,env(safe-area-inset-bottom));gap:6px}.seed-dock{gap:6px;padding:6px 8px 3px}.seed-slot{width:49px;height:70px;gap:4px}.slot-art{height:49px;border-radius:8px}.seed-icon{width:37px;height:45px}.slot-art>.crop-icon{width:32px;height:39px}.harvest-icon{width:39px;height:39px}.slot-key{font-size:12px;line-height:16px;min-width:17px;top:0;left:1px;border-radius:4px}.seed-name{font-size:12px;line-height:16px}.seed-quantity{font-size:16px;right:4px;top:31px}#garden-hint{font-size:12px;max-width:92vw;padding:5px 11px}
  .game-actions{right:14px;bottom:128px;gap:8px}.game-actions button{width:47px;height:61px;font-size:12px;gap:3px;border-radius:10px}.game-actions img,.game-actions svg{width:29px;height:32px}#joystick{left:19px;bottom:143px;width:88px;height:88px}#station-prompt{top:47%;left:50%;padding:10px 13px;font-size:14px}
  #panel-overlay{padding:95px 12px 205px;align-items:stretch;justify-content:center}#game-window,#game-window[data-panel="bag"],#game-window[data-panel="garden"],#game-window[data-panel="settings"],#game-window[data-panel="tools"]{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:15px}
  .window-header{min-height:60px;margin:0 15px;padding:11px 0;gap:10px}.window-header>div{gap:10px}.window-header h1{font-size:25px}#window-icon{width:31px;height:34px}#panel-close{width:36px;height:36px;min-width:36px;min-height:36px;font-size:32px;border-radius:8px}#panel-content,#game-window[data-panel="bag"] #panel-content{padding:13px 14px 17px}.window-footer{font-size:12px;padding:7px 14px}
  .shop-layout,.inventory-layout{height:auto;min-height:0;display:flex;flex-direction:column;gap:16px}.shop-main,.inventory-main{min-height:0;overflow:visible}.panel-tabs{min-height:37px;gap:7px;margin-bottom:10px}.panel-tabs button{min-height:37px;padding:6px;font-size:15px;border-radius:8px}.shop-main .panel-tabs{width:70%}
  .shop-list{flex:none;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(148px,auto));gap:8px}.shop-item,.shop-item.active{padding:9px 5px;gap:4px;border-radius:9px}.shop-item .crop-art{width:55px;height:69px}.shop-copy strong{font-size:14px}.shop-copy small{font-size:12px;line-height:1.4;margin-top:3px}.card-price{font-size:16px;gap:5px}.card-price .crop-icon{width:24px;height:24px}
  .shop-detail,.inventory-detail{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#f1ecd9;min-width:0}.shop-detail .detail-art,.inventory-detail .detail-art{grid-column:1;grid-row:1/3;width:75px;height:94px;margin:0}.detail-name,.inventory-detail .detail-name{grid-column:2;font-size:21px;text-align:left}.quality-tag{grid-column:2;justify-self:start;font-size:14px;padding:4px 13px}
  .detail-facts,.inventory-detail .detail-facts{grid-column:1/-1;margin:0;font-size:15px}.detail-facts>div,.shop-detail .detail-facts>div{min-height:34px;padding:5px 0}.detail-facts .crop-icon{width:23px;height:23px}.quantity-control,.detail-total,.shop-detail>.primary,.detail-footnote,.detail-actions{grid-column:1/-1;width:100%}.quantity-control button,.quantity-control input{height:42px;min-height:42px}.quantity-control button{width:44px;min-width:44px;font-size:29px}.quantity-control input{width:128px;font-size:20px}.detail-total{margin-top:0;padding-top:9px;font-size:18px}.detail-total .crop-icon{width:27px;height:27px}.shop-detail>.primary{min-height:43px;font-size:20px}.detail-footnote{font-size:13px}
  .inventory-grid{flex:none;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:8px;overflow:visible}.inventory-slot{aspect-ratio:1;min-height:0;padding:7px;border-radius:8px}.inventory-slot.active{padding:6px}.item-art{width:56px;height:58px;max-width:90%;max-height:95%}.item-art .seed-icon{width:43px;height:53px}.item-count{right:6px;bottom:4px;font-size:16px}.inventory-slot.empty-item{font-size:35px}.inventory-footer{min-height:41px;margin-top:10px;font-size:17px}.inventory-footer button{min-height:38px;min-width:100px;font-size:15px;padding:7px 12px}.detail-actions{gap:9px;margin-top:0}.detail-actions button{min-height:42px;font-size:17px}.detail-actions p{font-size:13px}
  #game-window[data-panel="tools"] #panel-content{display:block}#game-window[data-panel="tools"] .feature-card{margin:14px 0}.feature-card{padding:15px}.panel-intro{font-size:14px}.panel-note{font-size:13px}.setting-row{gap:12px;margin:17px 0}.setting-row label,.setting-row select{font-size:15px}.setting-row select{padding:8px;max-width:58%}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.catalog-card{padding:13px 9px}.catalog-card>.crop-icon,.catalog-card .crop-art{width:63px;height:76px}.catalog-card h2,.catalog-card strong{font-size:18px}.catalog-card small,.catalog-card p{font-size:13px}#toast{top:88px;font-size:14px;padding:10px 16px}
}
@media(max-height:550px){
  :root{--u:.6px;--edge:14px}.game-hud{top:10px}.hud-resources,.hud-system{gap:7px}.hud-pill{min-height:34px;padding:4px 9px;font-size:14px}.coin-pill{width:95px;padding-left:5px;gap:6px}.coin-pill strong{font-size:20px}.potion-pill{min-width:74px;gap:6px}.potion-pill strong{font-size:18px}.hud-icon{width:27px;height:27px}.potion-pill .hud-icon{width:21px;height:28px}.square-button{width:35px;height:35px;min-width:35px;min-height:35px;padding:6px}.garden-status{top:0;min-width:230px;width:max-content;min-height:34px;font-size:14px}#save-status{min-width:72px;max-width:110px;min-height:34px;font-size:12px}.quest-board,#movement-help{display:none}
  .quickbar{left:46%;bottom:9px;gap:4px}.seed-dock{gap:6px;padding:5px 8px 2px}.seed-slot{width:46px;height:65px;gap:3px}.slot-art{height:46px;border-radius:8px}.seed-icon{width:34px;height:41px}.slot-art>.crop-icon{width:30px;height:36px}.harvest-icon{width:36px;height:36px}.seed-name{font-size:12px;line-height:16px}.slot-key{font-size:11px;min-width:16px;line-height:15px;top:0;left:1px}.seed-quantity{font-size:15px;right:4px;top:29px}#garden-hint{font-size:12px;padding:3px 10px}.game-actions{right:14px;bottom:13px;gap:7px}.game-actions button{width:43px;height:56px;font-size:12px;gap:3px;padding:5px 3px;border-radius:9px}.game-actions img,.game-actions svg{width:27px;height:29px}
  #joystick{left:20px;bottom:24px;width:78px;height:78px}#joystick-knob{width:36px;height:36px}
  #panel-overlay{padding:54px 16px 112px;align-items:stretch;justify-content:center}#game-window,#game-window[data-panel="bag"],#game-window[data-panel="garden"],#game-window[data-panel="settings"],#game-window[data-panel="tools"]{width:min(820px,94vw);max-width:100%;height:100%;max-height:100%;border-radius:12px}.window-header{min-height:47px;margin:0 15px;padding:7px 0}.window-header h1{font-size:23px}#window-icon{width:29px;height:31px}#panel-close{width:33px;height:33px;min-width:33px;min-height:33px;font-size:29px}#panel-content,#game-window[data-panel="bag"] #panel-content{padding:11px 15px 16px}.window-footer{font-size:12px;padding:6px 15px}
  .shop-layout{height:auto;display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:14px;align-items:start}.shop-main .panel-tabs{width:75%}.panel-tabs{min-height:36px;gap:8px;margin-bottom:10px}.panel-tabs button{min-height:36px;padding:6px;font-size:15px}.shop-list{flex:none;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(150px,auto));gap:8px}.shop-item,.shop-item.active{padding:8px 5px;gap:4px}.shop-item .crop-art{width:53px;height:65px}.shop-copy strong{font-size:14px}.shop-copy small{font-size:12px}.card-price{font-size:16px}.card-price .crop-icon{width:23px;height:23px}
  .shop-detail{display:flex;flex-direction:column;padding:12px;gap:9px}.shop-detail .detail-art{width:78px;height:97px}.detail-name,.inventory-detail .detail-name{font-size:20px}.detail-facts{font-size:14px}.detail-facts>div,.shop-detail .detail-facts>div{min-height:33px;padding:5px 0}.quantity-control button,.quantity-control input{height:38px;min-height:38px}.quantity-control input{width:89px;font-size:18px}.quantity-control button{width:38px;min-width:38px;font-size:28px}.detail-total{font-size:17px;padding-top:9px}.shop-detail>.primary{min-height:40px;font-size:18px}.detail-footnote{font-size:12px}
  .inventory-layout{height:auto;display:grid;grid-template-columns:minmax(0,1fr) 205px;gap:15px}.inventory-grid{flex:none;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:9px;overflow:visible}.inventory-slot{aspect-ratio:1;padding:7px}.item-art{width:53px;height:56px;max-width:90%;max-height:95%}.item-art .seed-icon{width:42px;height:52px}.item-count{font-size:16px;bottom:4px;right:6px}.inventory-slot.empty-item{font-size:34px}.inventory-detail{display:flex;flex-direction:column;gap:9px;padding:10px 0 0 14px;border:0;border-left:1px solid var(--line);border-radius:0;background:none}.inventory-detail .detail-art{width:86px;height:95px}.inventory-footer{font-size:16px;margin-top:10px;min-height:38px}.inventory-footer button{min-height:36px;font-size:14px}.detail-actions button{min-height:38px;font-size:16px}.quality-tag{font-size:14px;padding:4px 14px}#toast{top:54px;font-size:14px}#station-prompt{top:45%;font-size:14px}
}
@media(max-width:570px) and (max-height:550px){
  .garden-status{display:none}.shop-layout,.inventory-layout{display:flex;flex-direction:column}.shop-detail,.inventory-detail{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;background:#f1ecd9}.quickbar{left:50%}.game-actions{right:12px;bottom:93px;gap:6px}.game-actions button{width:40px;height:50px;font-size:11px}.game-actions img,.game-actions svg{width:24px;height:25px}#panel-overlay{padding-bottom:160px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}



/* Original stylesheet: ./src/ui-hud.css */
/* User supplied UI parts, laid out against the 1280 × 720 reference. */
:root{--h:clamp(.72px,min(.078125vw,.138889dvh),1.5px);--ui-cream:#fffef0;--ui-mint:#70cbb5;--ui-pale:#c8efe1;--ui-ink:#826a67;--ui-gold:#e2bb6c;--ui-clay:#b86e45;--ink:var(--ui-ink);--muted:#668d82;--cream:var(--ui-cream);--line:#c9d3b4;--green:#648e7f;--gold:#ffa51d;color:var(--ui-ink);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}
button{color:var(--ui-ink)}button.primary,.primary{background:#628e7e;border-color:#628e7e;color:var(--ui-cream)}
.game-hud{inset:0;display:block;gap:0;pointer-events:none}
.hud-resources{position:absolute;left:0;top:0;width:calc(296 * var(--h));height:calc(94 * var(--h));display:flex;align-items:flex-start;gap:calc(18 * var(--h));padding:calc(16 * var(--h)) calc(20 * var(--h));background:url("../assets/ui-user/hud-resources.png") left top / 100% 100% no-repeat}
.hud-resources .hud-pill{height:calc(60 * var(--h));min-height:44px;min-width:0;width:calc(114 * var(--h));padding:calc(6 * var(--h)) calc(9 * var(--h));gap:calc(5 * var(--h));border:0;border-radius:50px;background:url("../assets/ui-user/resource-pill.png") center / 100% 100% no-repeat;box-shadow:none;justify-content:flex-start}
.hud-resources .hud-icon{width:calc(44 * var(--h));height:calc(44 * var(--h));max-height:100%}.hud-resources .potion-pill .hud-icon{width:calc(34 * var(--h));height:calc(44 * var(--h))}
.hud-resources strong{font-size:clamp(17px,calc(26 * var(--h)),39px);line-height:1;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.5px;min-width:0}.hud-resources .potion-pill{justify-content:center}.hud-resources .potion-pill strong{font-size:clamp(17px,calc(26 * var(--h)),39px)}
.garden-status{position:absolute;top:calc(33 * var(--h));left:50%;transform:translateX(-50%);width:calc(423 * var(--h));min-width:0;height:calc(61 * var(--h));min-height:0;display:flex;justify-content:flex-start;padding:0 calc(26 * var(--h)) 0 calc(89 * var(--h));border:0;border-radius:45px;background:url("../assets/ui-user/hud-goal.png") center / 100% 100% no-repeat;box-shadow:none;color:var(--ui-gold);font-size:clamp(15px,calc(22 * var(--h)),33px);font-weight:900;white-space:normal}
.goal-emblem{position:absolute;left:0;top:calc(-12 * var(--h));width:calc(79 * var(--h));height:calc(83 * var(--h));display:grid;place-items:center;background:url("../assets/ui-user/goal-icon-bg.png") center / 100% 100% no-repeat;border-radius:50%}.goal-emblem img{width:calc(75 * var(--h));height:calc(82 * var(--h));transform:translateY(calc(-5 * var(--h)))}
.goal-copy{width:100%;min-width:0;display:grid;align-content:center;gap:calc(6 * var(--h));line-height:1.25}#garden-summary{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.goal-progress{display:flex;gap:calc(12 * var(--h));width:100%}.goal-progress>span{height:calc(7 * var(--h));min-height:4px;flex:1;background:var(--ui-pale)}.goal-progress>span.done{background:#518a4a}
.hud-system{position:absolute;top:calc(17 * var(--h));right:calc(14 * var(--h));display:flex;flex-direction:column;align-items:center;gap:calc(12 * var(--h));width:calc(69 * var(--h))}
.hud-system .square-button{width:calc(69 * var(--h));height:calc(69 * var(--h));min-width:44px;min-height:44px;padding:calc(5 * var(--h));border:0;border-radius:50%;background:url("../assets/ui-user/system-button.png") center / contain no-repeat;box-shadow:none}.hud-system .square-button.active{outline:3px solid var(--gold);outline-offset:2px}.hud-system .square-button img{width:100%;height:100%}
#save-status{display:block;min-width:0;width:max-content;max-width:calc(150 * var(--h));min-height:0;margin-top:calc(2 * var(--h));padding:4px 8px;border:0;border-radius:16px;background:#fffef0d9;color:#527a69;font-size:clamp(11px,calc(12 * var(--h)),16px);font-weight:700;line-height:1.4;white-space:normal;text-align:center;align-self:flex-end;box-shadow:none}#save-status.save-error{max-width:calc(210 * var(--h));background:#fff2da;color:#a24b34;box-shadow:0 0 0 2px #e1a074}
.quest-board{left:0;top:calc(124 * var(--h));width:calc(254 * var(--h));min-height:calc(231 * var(--h));padding:calc(78 * var(--h)) calc(30 * var(--h)) calc(22 * var(--h));background:url("../assets/ui-user/hud-record.png") center / 100% 100% no-repeat;filter:none;color:var(--ui-ink)}
.quest-header{position:absolute;left:0;top:0;width:calc(222 * var(--h));height:calc(55 * var(--h));display:flex;align-items:center;justify-content:center;gap:0;padding:0;border:0;background:url("../assets/ui-user/record-title.png") left center / 100% 100% no-repeat;font-size:clamp(18px,calc(30 * var(--h)),45px);font-weight:900;letter-spacing:calc(7 * var(--h));color:#ffdc86;white-space:nowrap}.quest-header strong{padding-left:calc(7 * var(--h))}
.quest-item,.quest-reward{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:0;height:calc(44 * var(--h));margin:0 0 calc(24 * var(--h));padding:0 calc(15 * var(--h)) 0 calc(48 * var(--h));gap:0;border:0;border-radius:30px;background:url("../assets/ui-user/record-value.png") center / 100% 100% no-repeat;font-size:clamp(17px,calc(26 * var(--h)),39px);line-height:1;font-weight:900;letter-spacing:-.3px;font-variant-numeric:tabular-nums}.quest-reward{margin-bottom:0}
.record-emblem{position:absolute;left:calc(-10 * var(--h));top:50%;transform:translateY(-50%);width:calc(62 * var(--h));height:calc(62 * var(--h));display:grid;place-items:center;border-radius:50%;background:url("../assets/ui-user/record-icon-bg.png") center / 100% 100% no-repeat}.record-emblem img{width:calc(43 * var(--h));height:calc(46 * var(--h))}.quest-board>small{position:absolute;left:calc(30 * var(--h));right:calc(30 * var(--h));bottom:calc(9 * var(--h));margin:0;color:#fffef0;text-shadow:0 1px 3px #304d32;font-size:clamp(11px,calc(12 * var(--h)),16px);font-weight:700}
.quickbar{left:50%;bottom:env(safe-area-inset-bottom,0px);gap:calc(10 * var(--h));width:max-content;max-width:100%;z-index:30}
#garden-hint{max-width:min(80vw,calc(580 * var(--h)));padding:5px 15px;background:#526e55c9;border:0;border-radius:20px;color:var(--ui-cream);text-shadow:none;font-size:clamp(12px,calc(14 * var(--h)),19px);font-weight:700}
.seed-dock{isolation:isolate;position:relative;display:flex;align-items:flex-start;gap:calc(16 * var(--h));padding:calc(4 * var(--h)) calc(24 * var(--h)) calc(5 * var(--h));border-radius:0;background:none;pointer-events:auto}.seed-dock:before{content:"";position:absolute;inset:calc(29 * var(--h)) 0 0;z-index:-1;background:url("../assets/ui-user/hud-hotbar.png") center top / 100% 100% no-repeat;pointer-events:none}
.seed-slot{width:calc(96 * var(--h));height:calc(125 * var(--h));min-width:44px;min-height:44px;display:flex;flex-direction:column;gap:calc(1 * var(--h));padding:0;border:0;border-radius:50%;background:none;box-shadow:none;overflow:visible}.slot-art{position:relative;width:100%;height:calc(96 * var(--h));min-height:44px;border:0;border-radius:50%;background:url("../assets/ui-user/slot-bg.png") center / 100% 100% no-repeat;box-shadow:none}.seed-slot.active .slot-art{border:0;background:url("../assets/ui-user/slot-selected.png") center / 100% 100% no-repeat;box-shadow:none;transform:scale(1.12)}
.slot-art .seed-icon{width:85%;height:92%;margin:0;background:none;transform:none}.slot-art .seed-icon>.crop-icon{width:100%;height:100%;margin:0}.slot-art>.crop-icon{width:74%;height:79%}.slot-art .harvest-icon{width:84%;height:84%}.slot-art .harvest-icon .crop-icon{width:100%;height:100%}.slot-art .reference-icon{mix-blend-mode:normal}
.slot-art .harvest-icon .reference-icon{mix-blend-mode:multiply}
.slot-key{position:absolute;width:1px;height:1px;min-width:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;padding:0;border:0}.seed-quantity{position:absolute;left:calc(-5 * var(--h));right:auto;top:calc(-2 * var(--h));width:calc(38 * var(--h));height:calc(38 * var(--h));display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:url("../assets/ui-user/count-bg.png") center / 100% 100% no-repeat;font-size:clamp(17px,calc(31 * var(--h)),46px);font-weight:900;line-height:1;color:var(--ui-ink);text-shadow:none;font-variant-numeric:tabular-nums}.seed-slot.active .seed-quantity{background-image:url("../assets/ui-user/count-selected.png")}.seed-quantity:empty{display:none}.seed-name{position:relative;z-index:2;max-width:calc(108 * var(--h));font-size:clamp(13px,calc(23 * var(--h)),34px);line-height:1.15;font-weight:900;color:var(--ui-gold);text-shadow:1px 1px var(--ui-cream),-1px 1px var(--ui-cream),1px -1px var(--ui-cream),-1px -1px var(--ui-cream);white-space:nowrap}.empty-plus{width:60%;height:60%;overflow:hidden;font-size:0;background:url("../assets/ui/empty-slot-plus.png") center / contain no-repeat}
.game-actions{right:calc(19 * var(--h));bottom:calc(15 * var(--h));gap:calc(10 * var(--h))}.game-actions button{width:calc(49 * var(--h));height:calc(61 * var(--h));min-width:44px;min-height:44px;gap:2px;padding:5px 3px;border:0;border-radius:25px 25px 17px 17px;background:#fffef0ed;box-shadow:none;font-size:clamp(11px,calc(12 * var(--h)),16px);font-weight:800}.game-actions img,.game-actions svg{width:calc(32 * var(--h));height:calc(34 * var(--h))}.game-actions button.active{border:0;outline:3px solid var(--gold);outline-offset:2px;box-shadow:none}.game-actions b{background:var(--ui-clay);border-color:var(--ui-cream)}
#movement-help{left:calc(14 * var(--h));bottom:calc(15 * var(--h));max-width:none;gap:3px;padding:7px 10px;border-radius:20px;background:#526e5599;color:var(--ui-cream);font-size:clamp(10px,calc(11 * var(--h)),15px)}#movement-help .help-divider{height:14px;margin:0 3px}#movement-help kbd{padding:0 2px}
#station-prompt{border:0;border-radius:24px;background:#fffef0f2;color:#668b7c;box-shadow:0 2px 10px #344d3820}.station-marker{background:#fffef0ef;color:#668b7c;border:0;border-radius:20px}.station-marker:after{background:var(--ui-cream);border:0}
#game-window{background-image:none;background-color:var(--ui-cream);border-color:#bcccae;color:var(--ui-ink)}.window-header{border-bottom-color:#d2ddc2}.panel-intro,.panel-note{color:#6c9382}#panel-close{min-width:44px;min-height:44px;color:var(--ui-ink);background:#e7f1d8;border-color:transparent}.panel-tabs button.active,.panel-tabs button[aria-pressed="true"]{background:#668e7d;border-color:#668e7d;color:var(--ui-cream)}.feature-card,.note-box{background:#eef1dc;border-color:#d6ddc5}.feature-card p,.setting-row select{color:#668b7b}
@media(max-width:1100px){#movement-help{display:none}.game-actions{bottom:calc(143 * var(--h))}.hud-system{right:12px}.seed-name{font-size:calc(22 * var(--h))}}
@media(max-width:760px){
 :root{--h:.76px}.hud-resources{width:225px;height:78px;padding:12px 13px;gap:12px}.hud-resources .hud-pill{width:94px;height:48px;padding:5px 7px;gap:5px}.hud-resources .hud-icon{width:34px;height:35px}.hud-resources .potion-pill .hud-icon{width:28px;height:35px}.hud-resources strong,.hud-resources .potion-pill strong{font-size:21px}
 .garden-status{display:flex;top:91px;left:calc(50% - 18px);width:276px;height:46px;padding:0 15px 0 64px;font-size:16px;max-width:calc(100vw - 95px)}.goal-emblem{width:58px;height:62px;top:-8px}.goal-emblem img{width:56px;height:62px}.goal-copy{gap:5px}.goal-progress{gap:8px}.goal-progress>span{height:5px}
 .hud-system{top:12px;right:12px;gap:8px;width:49px}.hud-system .square-button{width:49px;height:49px;padding:4px}#save-status{font-size:11px;max-width:90px;margin-top:1px}
 .quest-board{display:none}.quickbar{bottom:env(safe-area-inset-bottom,0px);gap:5px}.seed-dock{gap:6px;padding:4px 9px 5px}.seed-dock:before{top:18px}.seed-slot{width:clamp(44px,calc((100vw - 52px)/6),62px);height:calc(clamp(44px,calc((100vw - 52px)/6),62px) + 22px);gap:3px}.slot-art{height:clamp(44px,calc((100vw - 52px)/6),62px)}.seed-quantity{left:-2px;top:-4px;width:25px;height:25px;font-size:21px}.seed-name{max-width:65px;font-size:13px;line-height:17px}#garden-hint{max-width:90vw;font-size:12px;padding:5px 11px}
 .game-actions{right:14px;bottom:127px;gap:8px}.game-actions button{width:46px;height:57px;padding:5px 3px;font-size:11px}.game-actions img,.game-actions svg{width:29px;height:31px}#joystick{left:18px;bottom:132px;width:86px;height:86px}
 #station-prompt{max-width:90vw;top:48%;font-size:14px}#panel-overlay{z-index:35;padding:15px 10px 115px;align-items:stretch}#game-window,#game-window[data-panel="bag"],#game-window[data-panel="garden"],#game-window[data-panel="settings"],#game-window[data-panel="tools"]{max-height:100%;height:100%}#app:has(#panel-overlay:not([hidden])) #touch-controls{visibility:hidden}#toast{top:145px;font-size:13px}
}
@media(max-height:550px) and (min-width:571px){
 :root{--h:.65px}.hud-resources{width:210px;height:65px;padding:8px 11px;gap:9px}.hud-resources .hud-pill{width:90px;height:44px;min-height:44px;padding:4px 7px}.hud-resources .hud-icon{width:32px;height:34px}.hud-resources .potion-pill .hud-icon{width:26px;height:33px}.hud-resources strong,.hud-resources .potion-pill strong{font-size:20px}
 .garden-status{top:15px;left:52%;width:270px;height:43px;padding-left:62px;padding-right:16px;font-size:15px}.goal-emblem{top:-6px;width:56px;height:57px}.goal-emblem img{width:55px;height:59px}.goal-copy{gap:4px}.goal-progress{gap:8px}.goal-progress>span{height:5px}.hud-system{top:9px;right:10px;width:46px;gap:7px}.hud-system .square-button{width:46px;height:46px;padding:4px}#save-status{max-width:90px;font-size:11px}.quest-board{display:none}
 .quickbar{left:50%;bottom:env(safe-area-inset-bottom,0px);gap:4px}.seed-dock{gap:8px;padding:3px 14px 3px}.seed-dock:before{top:20px}.seed-slot{width:52px;height:72px;gap:2px}.slot-art{height:52px}.seed-quantity{left:-2px;top:-2px;width:26px;height:26px;font-size:22px}.seed-name{font-size:13px;line-height:17px}#garden-hint{max-width:60vw;font-size:11px;padding:3px 10px}
 .game-actions{right:12px;bottom:9px;gap:6px}.game-actions button{width:44px;height:53px;min-width:44px;min-height:44px;font-size:10px;gap:1px;padding:4px}.game-actions img,.game-actions svg{width:28px;height:30px}#joystick{left:17px;bottom:20px;width:78px;height:78px}
 #panel-overlay{z-index:35;padding:10px 70px 88px;align-items:stretch}#game-window,#game-window[data-panel="bag"],#game-window[data-panel="garden"],#game-window[data-panel="settings"],#game-window[data-panel="tools"]{height:100%;max-height:100%}#app:has(#panel-overlay:not([hidden])) #touch-controls{visibility:hidden}#toast{top:65px}#panel-close{min-width:44px;min-height:44px}
}
@media(max-width:570px) and (max-height:550px){.garden-status{display:none}.game-actions{bottom:112px}#panel-overlay{padding-bottom:105px}}
@media(min-width:761px){html[data-locale-layout="latin"] .seed-name{font-size:calc(16 * var(--h))}html[data-locale-layout="latin"] .quest-header{font-size:calc(23 * var(--h));letter-spacing:0}html[data-locale-layout="latin"] .garden-status{font-size:calc(18 * var(--h))}}

/* Compact only the three world HUD groups; modal windows keep their own scale. */
@media(min-width:761px) and (min-height:551px){
 .hud-resources,.quest-board,.quickbar{--h:clamp(.5616px,min(.0609375vw,.10833342dvh),1.17px)}
 .hud-resources .coin-pill{width:calc(143 * var(--h))}
 .hud-resources .potion-pill{width:calc(95 * var(--h))}
 .hud-resources strong,.hud-resources .potion-pill strong{font-size:clamp(14px,calc(22 * var(--h)),33px)}
 .quest-item,.quest-reward{font-size:clamp(15px,calc(26 * var(--h)),31px)}
}
@media(max-width:760px){
 .hud-resources{width:200px;height:66px;padding:8px 10px;gap:8px}
 .hud-resources .coin-pill{width:106px;height:44px;padding:5px 7px;gap:4px}
 .hud-resources .potion-pill{width:66px;height:44px;padding:5px;gap:4px}
 .hud-resources .hud-icon{width:29px;height:31px}
 .hud-resources .potion-pill .hud-icon{width:24px;height:31px}
 .hud-resources strong,.hud-resources .potion-pill strong{font-size:18px}
 .seed-slot{width:clamp(44px,calc((100vw - 52px)/7.7),50px);height:calc(clamp(44px,calc((100vw - 52px)/7.7),50px) + 22px)}
 .slot-art{height:clamp(44px,calc((100vw - 52px)/7.7),50px)}
 .seed-quantity{width:22px;height:22px;font-size:18px}
 .seed-name{font-size:12px}
}
@media(max-height:550px) and (min-width:571px){
 .hud-resources{width:200px;height:60px;padding:8px 10px;gap:8px}
 .hud-resources .coin-pill{width:106px;height:44px;padding:5px 7px;gap:4px}
 .hud-resources .potion-pill{width:66px;height:44px;padding:5px;gap:4px}
 .hud-resources .hud-icon{width:29px;height:31px}
 .hud-resources .potion-pill .hud-icon{width:24px;height:31px}
 .hud-resources strong,.hud-resources .potion-pill strong{font-size:18px}
 .seed-dock{gap:6px;padding:3px 10px}
 .seed-slot{width:44px;height:66px}.slot-art{height:44px}
 .seed-quantity{width:22px;height:22px;font-size:18px}.seed-name{font-size:12px}
}

/* Reference 1910 x 873: edge offsets use viewport percentages; sizes use height only. */
#touch-controls{display:block}
#joystick{display:grid;left:9.84%;right:auto;top:auto;bottom:5.15%;width:30.7dvh;height:30.7dvh;border-width:.23dvh;user-select:none;-webkit-user-select:none}
#joystick-knob{width:12dvh;height:12dvh;border-width:.23dvh}
#interact-button{position:fixed;z-index:31;left:auto;right:12.9%;top:auto;bottom:24.1%;width:27.8dvh;height:14.4dvh;min-width:0;min-height:0;padding:1.3dvh 2.8dvh;border:.23dvh solid #e2bb6c;border-radius:7.2dvh;background:#fffef0f5;color:#648875;font-size:3.2dvh;box-shadow:0 .35dvh 1.4dvh #344d3833;touch-action:manipulation}
#interact-button kbd{position:absolute;right:-.45dvh;top:-1.15dvh;display:grid;place-items:center;width:3.5dvh;height:3.5dvh;border:.23dvh solid #fffef0;border-radius:.9dvh;background:#648875;color:#fffef0;font:700 2.2dvh system-ui}
#app:has(#panel-overlay:not([hidden])) #touch-controls,#app:has(dialog[open]) #touch-controls{visibility:hidden}
/* Slot identity stays top-left; quantity belongs to the item, bottom-right. */
.seed-slot .slot-key{display:grid;place-items:center;left:-2%;top:-2%;width:27%;height:auto;aspect-ratio:1;min-width:0;overflow:visible;clip:auto;padding:0;border:0;border-radius:50%;background:#fffef0;color:var(--ui-ink);font-family:inherit;font-size:clamp(11px,2.6dvh,26px);line-height:1;z-index:3}
.seed-slot .slot-art{position:relative;overflow:visible}
.seed-slot .seed-quantity{left:auto;right:-3%;top:auto;bottom:-3%;width:32%;height:32%;font-size:clamp(12px,2.6dvh,26px);z-index:3}

/* Resize around the established control centres. */
#joystick{left:calc(9.84% + 5.116667dvh);bottom:calc(5.15% + 5.116667dvh);width:20.466667dvh;height:20.466667dvh}
#joystick-knob{width:8dvh;height:8dvh}
#interact-button{right:calc(12.9% + 4.633333dvh);bottom:calc(24.1% + 2.4dvh);width:18.533333dvh;height:9.6dvh;padding:.866667dvh 1.866667dvh;border-radius:4.8dvh;font-size:2.133333dvh}
#interact-button kbd{right:-.3dvh;top:-.766667dvh;width:2.333333dvh;height:2.333333dvh;border-radius:.6dvh;font-size:1.466667dvh}
.game-actions{transform:scale(1.5);transform-origin:bottom right}

#joystick,#joystick-knob,#interact-button,#interact-button kbd{border-width:.153333dvh}

#interact-button[data-action-type=unlockBed]{font-size:1.7dvh;line-height:1.35;white-space:normal;padding:.7dvh 1dvh}

/* Centres follow reference percentages; only dimensions scale with viewport height.
   At narrow portrait widths keep the complete hit target within the safe area. */
#joystick{left:clamp(calc(10.233333dvh + env(safe-area-inset-left,0px)),16.86%,calc(100% - 10.233333dvh - env(safe-area-inset-right,0px)));top:79.55%;bottom:auto;transform:translate(-50%,-50%)}
#interact-button{left:clamp(calc(9.266667dvh + env(safe-area-inset-left,0px)),80.74%,calc(100% - 9.266667dvh - env(safe-area-inset-right,0px)));top:68.7%;right:auto;bottom:auto;transform:translate(-50%,-50%)}
#interact-button[data-action-type=unlockBed] #interact-label{white-space:pre-line}

/* A single currency display and lifetime garden records. */
.hud-resources{width:max-content;height:auto;padding:calc(14 * var(--h)) calc(18 * var(--h));gap:0;background:transparent;border-radius:0}
#garden-record{display:block;width:calc(300 * var(--h));min-width:180px;padding-left:calc(15 * var(--h));padding-right:calc(15 * var(--h))}
#garden-record .quest-item,#garden-record .quest-reward{justify-content:space-between;padding:0 calc(12 * var(--h));gap:8px;margin-bottom:calc(20 * var(--h))}
#garden-record .record-label{font-size:clamp(11px,calc(19 * var(--h)),26px);white-space:nowrap}
#garden-record .quest-item strong,#garden-record .quest-reward strong{font-size:clamp(14px,calc(24 * var(--h)),32px)}
#garden-record .record-best{display:flex;flex-direction:column;gap:calc(8 * var(--h));padding:calc(10 * var(--h)) calc(12 * var(--h));background:#d6f3dfd9;border-radius:calc(16 * var(--h));color:#426b57}
#record-best{font-size:clamp(11px,calc(18 * var(--h)),25px);line-height:1.5;overflow-wrap:anywhere}
/* Action identity, luminous harvest rewards and decorative orbiting motes. */
#interact-button{isolation:isolate;overflow:visible}
#interact-button[data-action-type=plant]{background:linear-gradient(#91dc72,#389850);border-color:#d5ffa8;color:#173f24;box-shadow:0 .4dvh 1.5dvh #244e4055,inset 0 .25dvh .5dvh #e9ffc080}
#interact-button[data-action-type=potion]{background:linear-gradient(#fff,#eef4fa);border-color:#fff;color:#52657b;box-shadow:0 .3dvh 1.5dvh #52657b44,inset 0 0 1dvh #fff}
#interact-button[data-action-type=harvest]{--harvest-glow:#ffc838;background:linear-gradient(135deg,#fff1a6,#efbd3b 60%,#ffdb70);border-color:#fff2b3;color:#74430b;box-shadow:0 0 2dvh #ffd74b88,inset 0 .3dvh .5dvh #fff5cc;animation:harvest-breathe 1.8s ease-in-out infinite}
#interact-button[data-action-type=harvest][data-exotic=true]{--harvest-glow:#cf86ff;background:linear-gradient(125deg,#522d87,#9347b1 55%,#dbad55);border-color:#ffe28b;color:#fff0b0;text-shadow:0 .12dvh .35dvh #3e175f;box-shadow:0 0 2dvh #b86dff99,inset 0 0 .8dvh #f0c96a99}
#interact-button[data-action-type=harvest]::before{content:'';position:absolute;inset:-3dvh;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,var(--harvest-glow),transparent 70%);filter:blur(.6dvh);opacity:.55;animation:harvest-backlight 1.8s ease-in-out infinite}
#interact-button[data-action-type=harvest][data-exotic=true]::after{content:'';position:absolute;inset:-2.5dvh;pointer-events:none;border-radius:50%;background:radial-gradient(circle at 50% 3%,#fff8c7 0 .22dvh,transparent .45dvh),radial-gradient(circle at 88% 22%,#ffdc6a 0 .18dvh,transparent .4dvh),radial-gradient(circle at 96% 65%,#f1c3ff 0 .24dvh,transparent .48dvh),radial-gradient(circle at 50% 97%,#fff8c7 0 .22dvh,transparent .45dvh),radial-gradient(circle at 12% 78%,#ffdc6a 0 .18dvh,transparent .4dvh),radial-gradient(circle at 4% 35%,#f1c3ff 0 .24dvh,transparent .48dvh);filter:drop-shadow(0 0 .5dvh #ffe29f);animation:harvest-orbit 5s linear infinite}
@keyframes harvest-breathe{0%,100%{scale:1;filter:brightness(1)}50%{scale:1.055;filter:brightness(1.18)}}
@keyframes harvest-backlight{0%,100%{opacity:.4;scale:.9}50%{opacity:.8;scale:1.12}}
@keyframes harvest-orbit{to{rotate:360deg}}
#interact-button[data-reduced=true],#interact-button[data-reduced=true]::before,#interact-button[data-reduced=true]::after{animation:none}
@media(prefers-reduced-motion:reduce){#interact-button,#interact-button::before,#interact-button::after{animation:none!important}}
.harvest-flight-layer{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.harvest-flight-icon{position:absolute;left:0;top:0;width:5.5dvh;height:5.5dvh;will-change:transform;filter:drop-shadow(0 .3dvh .4dvh #503a2866)}
.harvest-flight-icon .crop-icon{width:100%;height:100%;object-fit:contain}
.harvest-arrival-particle{position:absolute;left:0;top:0;width:.9dvh;height:.9dvh;background:#ffe28a;box-shadow:0 0 .8dvh #fff3a8;will-change:transform,opacity}

.seed-slot:has(.empty-plus) .slot-art{background:#c8efe1}

.harvest-flight-icon{width:8.25dvh;height:8.25dvh}
#interact-button{transform:none;translate:-50% -50%;transform-origin:50% 50%}

#camera-zoom-control{position:fixed;right:max(14px,2vw);top:34%;z-index:32;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px;border-radius:25px;background:#fff8e7d9;color:#638876;box-shadow:0 3px 12px #253d3222;touch-action:none}
#camera-zoom-control[hidden],.catalysis-mode #camera-zoom-control{display:none}
#camera-zoom-control>span{font-size:22px;font-weight:900;line-height:1}
#camera-zoom{writing-mode:vertical-lr;direction:ltr;appearance:auto;accent-color:#70bba5;width:24px;height:clamp(90px,21dvh,220px);min-width:0;min-height:0;margin:0;padding:0;cursor:pointer;touch-action:none}

#seed-dock .seed-slot.active .slot-art{outline:3px solid #ff941f;outline-offset:-2px}

#camera-zoom-control{background:none;box-shadow:none;backdrop-filter:none;color:#fff}
#camera-zoom{accent-color:#fff}
#sowing-label{position:fixed;z-index:14;transform:translateX(-50%);pointer-events:none;white-space:nowrap;color:#fff8db;font:bold 16px/1.4 "Microsoft YaHei",sans-serif;text-shadow:0 2px 3px #263321,-1px -1px 2px #263321}
#sowing-label[hidden]{display:none}

.hud-resources .coin-pill{width:calc(228 * var(--h))}
@media(max-width:760px),(max-height:550px){.hud-resources .coin-pill{width:212px}}
.hud-system .square-button{background:none;filter:drop-shadow(0 2px 3px #28483155)}
.hud-system .square-button:focus-visible{outline:3px solid #ffce65;outline-offset:2px}


/* Original stylesheet: ./src/ui-shop.css */
/* Original, unlabelled PNG layers supplied by the user; all text is live DOM. */
#panel-overlay:has(#game-window[data-panel="shop"]){z-index:40;justify-content:center;align-items:center;padding:16px 32px;background:#152d1a30;backdrop-filter:blur(2px)}
#game-window[data-panel="shop"]{--su:min(.078125vw,.138889dvh,1.22px);position:relative;width:calc(1150 * var(--su));height:calc(675 * var(--su));max-width:94vw;max-height:94dvh;overflow:visible;border:0;border-radius:0;background: url("../assets/ui-user/shop-frame.png") center bottom / 100% calc(100% - 35 * var(--su)) no-repeat;box-shadow:none;color:#876865;font-weight:800}
#game-window[data-panel="shop"] .window-header{position:absolute;inset:0;margin:0;padding:0;height:0;min-height:0;border:0;pointer-events:none}
#game-window[data-panel="shop"] .window-header>div{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#game-window[data-panel="shop"] #panel-close{position:absolute;right:calc(-13 * var(--su));top:calc(161 * var(--su));z-index:5;width:calc(67 * var(--su));height:calc(67 * var(--su));min-width:44px;min-height:44px;border:calc(9 * var(--su)) solid #b9683e;border-radius:24px;background:#ffab0c url("../assets/ui-user/shop-close.png") center / 53% no-repeat;font-size:0;pointer-events:auto;box-shadow:0 4px 8px #48321f12}
#game-window[data-panel="shop"] #panel-content{padding:0;overflow:auto;border-radius:0;scrollbar-color:#c59072 transparent;scrollbar-width:thin}
#game-window[data-panel="shop"] .window-footer{display:none}
.shop-art-layout.shop-layout{position:relative;display:grid;grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);gap:calc(32 * var(--su));height:100%;min-height:0;padding:calc(151 * var(--su)) calc(76 * var(--su)) calc(42 * var(--su)) calc(105 * var(--su));isolation:isolate}
.shop-trade-tabs{position:absolute;left:calc(21 * var(--su));top:calc(-8 * var(--su));z-index:3;display:flex;align-items:start;gap:0;height:calc(155 * var(--su))}
.shop-trade-tab{display:grid;place-items:center;width:calc(225 * var(--su));height:calc(144 * var(--su));padding:calc(26 * var(--su));border:0;border-radius:0;background: url("../assets/ui-user/shop-sell-tab.png") center / 100% 100% no-repeat;transform:rotate(-9deg);color:#ecd792;font-size:calc(49 * var(--su));line-height:1;font-weight:900;letter-spacing:.02em}
.shop-trade-tab+.shop-trade-tab{margin-left:calc(-25 * var(--su));margin-top:calc(-22 * var(--su))}
.shop-trade-tab.active{z-index:2;width:calc(250 * var(--su));height:calc(159 * var(--su));background-image:url("../assets/ui-user/shop-buy-tab.png");transform:rotate(7deg)}
.shop-trade-tab>span{display:grid;place-items:center;width:100%;height:100%;padding:calc(16 * var(--su));background:url("../assets/ui-user/shop-sell-label-bg.png") center / 100% 100% no-repeat;text-shadow:0 3px 4px #476c4540}
.shop-trade-tab.active>span{background-image:url("../assets/ui-user/shop-buy-label-bg.png")}
.shop-trade-tab:hover:not(:disabled){filter:brightness(1.04)}
.shop-trade-tab:active:not(:disabled){transform:rotate(-9deg) translateY(2px)}
.shop-trade-tab.active:active:not(:disabled){transform:rotate(7deg) translateY(2px)}
.shop-trade-tabs:has([data-mode="sell"].active) [data-mode="buy"]>span{opacity:.55;filter:saturate(.5)}
.shop-trade-tabs [data-mode="sell"].active>span{filter:drop-shadow(0 0 5px #ffe5a2)}
.shop-categories{position:absolute;left:calc(7 * var(--su));top:calc(209 * var(--su));display:grid;gap:calc(8 * var(--su));z-index:2}
.shop-categories button{display:grid;place-items:center;width:calc(110 * var(--su));height:calc(78 * var(--su));padding:calc(8 * var(--su)) calc(23 * var(--su));border:0;border-radius:45px 0 0 45px;background:#edae00;box-shadow:0 3px 9px #754c2620}
.shop-categories button.active{width:calc(126 * var(--su));margin-left:calc(-16 * var(--su));background:#f6f6e5}
.shop-categories .crop-icon{width:100%;height:100%}
.shop-art-layout .shop-main{position:relative;min-height:0;display:flex;flex-direction:column;overflow:visible;z-index:2}
.shop-art-layout .shop-list{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));flex:1;min-height:0;gap:calc(16 * var(--su)) calc(18 * var(--su));padding:calc(39 * var(--su)) calc(38 * var(--su)) calc(44 * var(--su));background:url("../assets/ui-user/shop-list.png") center / 100% 100% no-repeat;overflow:visible}
.shop-art-layout .shop-item,.shop-art-layout .shop-item.active{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:0;gap:0;padding:calc(3 * var(--su));border:0;border-radius:22px;background:none;box-shadow:none;color:#876865}
.shop-art-layout .shop-item .crop-art{position:relative;display:grid;place-items:center;flex-shrink:0;width:calc(106 * var(--su));height:calc(106 * var(--su));max-width:100%;background:url("../assets/ui-user/shop-item-bg.png") center / contain no-repeat}
.shop-art-layout .shop-item .crop-art>.crop-icon{width:92%;height:96%;object-fit:contain}
.shop-art-layout .shop-item.active .crop-art{filter:drop-shadow(0 0 2px #edb121);border-radius:50%;outline:calc(3 * var(--su)) solid #f3b528;outline-offset:calc(-5 * var(--su))}
.shop-art-layout .shop-item.sold-out .crop-art{filter:grayscale(.6);opacity:.55}
.shop-art-layout .shop-copy{display:block;width:100%;text-align:center}
.shop-art-layout .shop-copy strong{display:block;font-size:calc(17.25 * var(--su));line-height:1.2;font-weight:900;white-space:nowrap;letter-spacing:-.025em}
.shop-art-layout .shop-copy small{display:flex;align-items:center;justify-content:center;gap:calc(3 * var(--su));margin:calc(5 * var(--su)) 0 0;font-size:calc(15 * var(--su));line-height:1.1;color:#658c7c;font-weight:800}
.shop-art-layout .clock-icon{font-style:normal;font-size:1.2em;line-height:1}
.shop-art-layout .card-price{position:absolute;left:calc(1 * var(--su));top:calc(4 * var(--su));display:flex;align-items:center;gap:calc(2 * var(--su));min-width:calc(53 * var(--su));height:calc(25 * var(--su));padding:0 calc(5 * var(--su)) 0 0;border-radius:16px;background:#ffd150;font-size:calc(16 * var(--su));line-height:1;box-shadow:0 2px 3px #6b643c28;z-index:2}
.shop-art-layout .card-price .crop-icon{width:calc(26 * var(--su));height:calc(26 * var(--su))}
.shop-art-layout .stock-time{position:absolute;right:calc(5 * var(--su));bottom:calc(-30 * var(--su));margin:0;padding:calc(9 * var(--su)) calc(15 * var(--su));border-radius:28px;background:#cff0dd;box-shadow:0 3px 7px #7e816934;color:#658b7c;font-size:calc(18 * var(--su));font-weight:800;white-space:nowrap}
.shop-art-layout .shop-detail{position:relative;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;min-width:0;min-height:0;padding:0 calc(14 * var(--su));border:0;border-radius:0;background:none;z-index:2}
.shop-art-layout .shop-detail::before{content:"";position:absolute;inset:calc(126 * var(--su)) calc(-9 * var(--su)) calc(-17 * var(--su));z-index:-1;background:url("../assets/ui-user/shop-detail.png") center / 100% 100% no-repeat;pointer-events:none}
.shop-selected-preview{position:relative;width:100%;flex-shrink:0;height:calc(180 * var(--su));margin-top:calc(-25 * var(--su))}
.shop-art-layout .shop-detail .detail-art{position:absolute;left:50%;top:0;transform:translateX(-50%);width:calc(204 * var(--su));height:calc(204 * var(--su));margin:0;background:url("../assets/ui-user/shop-preview-bg.png") center / contain no-repeat}
.shop-art-layout .shop-detail .detail-art>.crop-icon{width:81%;height:86%;padding-bottom:calc(12 * var(--su))}
.shop-art-layout .quantity-control{position:absolute;inset:0;width:auto;height:auto;margin:0;display:block;pointer-events:none}
.shop-art-layout .quantity-control input{position:absolute;left:calc(8 * var(--su));top:0;z-index:3;width:calc(61 * var(--su));height:calc(61 * var(--su));min-width:0;min-height:0;border:0;border-radius:50%;background:#ffae0a;color:#876865;font-size:calc(39 * var(--su));font-weight:900;line-height:1;text-align:center;appearance:textfield;pointer-events:auto;box-shadow:0 3px 7px #8b733926}
.shop-art-layout .quantity-control button{position:absolute;top:calc(67 * var(--su));width:calc(44 * var(--su));height:calc(50 * var(--su));min-width:36px;min-height:36px;border:0;border-radius:0;padding:0;background: url("../assets/ui-user/shop-arrow-left.png") center / contain no-repeat;pointer-events:auto}
.shop-art-layout .quantity-control button[data-delta="-1"]{left:calc(-25 * var(--su))}
.shop-art-layout .quantity-control button[data-delta="1"]{right:calc(-25 * var(--su));background-image:url("../assets/ui-user/shop-arrow-right.png")}
.shop-art-layout .shop-detail .detail-name{position:relative;flex-shrink:0;z-index:2;max-width:100%;margin:calc(-6 * var(--su)) 0 calc(12 * var(--su));padding:calc(8 * var(--su)) calc(19 * var(--su));border-radius:40px;background:#688b7b;color:#f8f5dc;text-align:center;white-space:nowrap;font-size:calc(24.3 * var(--su));font-weight:900;line-height:1.2}
.shop-art-layout .detail-facts{width:100%;margin:0;padding:0 calc(11 * var(--su));font-size:calc(16 * var(--su));font-weight:800;flex:1;display:flex;flex-direction:column;justify-content:space-around}
.shop-art-layout .detail-facts>div{display:flex;justify-content:space-between;align-items:center;gap:calc(8 * var(--su));min-height:calc(39 * var(--su));padding:calc(6 * var(--su)) 0;border:0;border-bottom:calc(6 * var(--su)) solid #d0f0da;border-radius:3px}
.shop-art-layout .detail-facts span{gap:calc(3 * var(--su));color:#658b7b}
.shop-art-layout .detail-facts strong{color:#876865;white-space:nowrap}
.shop-checkout{position:relative;display:flex;align-items:center;width:100%;min-height:calc(77 * var(--su));margin-top:calc(16 * var(--su));padding-right:calc(39 * var(--su));flex-shrink:0}
.shop-art-layout .detail-total{display:flex;justify-content:flex-start;align-items:center;gap:calc(8 * var(--su));width:100%;min-height:calc(44 * var(--su));margin:0;padding:calc(7 * var(--su)) calc(12 * var(--su));border:0;border-radius:32px;background:#688b7b;color:#eddda3;font-size:calc(25 * var(--su));font-weight:900;white-space:nowrap}
.shop-art-layout .detail-total strong{display:flex;align-items:center;gap:calc(2 * var(--su));font-size:calc(16 * var(--su));font-weight:800}
.shop-art-layout .detail-total .crop-icon{width:calc(25 * var(--su));height:calc(25 * var(--su))}
.shop-cart-button{position:absolute;right:calc(-5 * var(--su));top:0;display:grid;place-items:center;width:calc(81 * var(--su));height:calc(81 * var(--su));padding:calc(18 * var(--su));border:0;border-radius:50%;background:#f7f6e5;box-shadow:0 5px 13px #5e755d3a}
.shop-cart-button>.crop-icon{width:100%;height:100%}
.shop-art-layout .crop-art,.shop-art-layout .detail-art,.shop-categories button,.shop-cart-button{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.shop-art-layout .crop-art>.crop-icon,.shop-art-layout .detail-art>.crop-icon,.shop-categories .crop-icon,.shop-cart-button>.crop-icon{min-width:0;min-height:0;max-width:100%;max-height:100%;justify-self:center;align-self:center}
.shop-art-layout .detail-footnote{width:100%;margin-top:calc(-1 * var(--su));font-size:calc(11 * var(--su));color:#587762;font-weight:500;text-align:center;line-height:1.3}
.shop-wallet{position:absolute;bottom:0;left:0;z-index:3;min-width:calc(205 * var(--su));padding:calc(19 * var(--su)) calc(29 * var(--su)) calc(20 * var(--su)) calc(20 * var(--su));border-radius:0 60px 0 0;background:#fffef0}
.shop-wallet>span{display:flex;align-items:center;justify-content:space-between;gap:calc(20 * var(--su));padding:calc(5 * var(--su)) calc(16 * var(--su)) calc(5 * var(--su)) calc(6 * var(--su));border-radius:40px;background:#75cdb4;font-size:calc(30 * var(--su));font-weight:900}
.shop-wallet .crop-icon{width:calc(40 * var(--su));height:calc(40 * var(--su))}
html[data-locale-layout="latin"] .shop-art-layout .shop-copy strong{font-size:calc(12.75 * var(--su));white-space:normal}
html[data-locale-layout="latin"] .shop-art-layout .detail-name{font-size:calc(19.8 * var(--su))}
html[data-locale-layout="latin"] .shop-art-layout .detail-total{font-size:calc(22 * var(--su))}
html[data-locale-layout="latin"] .shop-art-layout .detail-facts{font-size:calc(14 * var(--su))}
/* Portrait phones retain the same layers, with scrolling rather than tiny text. */
@media(max-width:600px){
  #panel-overlay:has(#game-window[data-panel="shop"]){padding:12px 9px;background:#183b2370}
  #game-window[data-panel="shop"]{--su:1px;width:100%;height:94dvh;max-width:100%;max-height:94dvh;background-size:100% calc(100% - 22px)}
  #game-window[data-panel="shop"] #panel-content{padding:0 12px 0 18px;scrollbar-width:thin}
  #game-window[data-panel="shop"] #panel-close{right:-2px;top:53px;width:44px;height:44px;border:6px solid #b9683e;border-radius:16px;background-size:58%;z-index:5}
  .shop-art-layout.shop-layout{height:auto;min-height:100%;display:flex;flex-direction:column;gap:15px;padding:112px 8px 91px 26px}
  .shop-trade-tabs{top:-5px;left:-10px;height:100px}
  .shop-trade-tab{width:136px;height:91px;padding:16px;font-size:29px}
  .shop-trade-tab.active{width:151px;height:101px}
  .shop-trade-tab+.shop-trade-tab{margin-left:-19px;margin-top:-9px}
  .shop-trade-tab>span{padding:8px}
  .shop-categories{left:-12px;top:132px;gap:8px}
  .shop-categories button,.shop-categories button.active{width:52px;height:49px;margin:0;padding:8px 10px;border-radius:25px 0 0 25px}
  .shop-art-layout .shop-list{flex:none;grid-template-rows:repeat(2,132px);gap:8px 4px;padding:24px 15px 28px;background-size:100% 100%}
  .shop-art-layout .shop-item,.shop-art-layout .shop-item.active{padding:0;gap:1px}
  .shop-art-layout .shop-item .crop-art{width:69px;height:77px}
  .shop-art-layout .shop-copy strong{font-size:10.5px;white-space:normal;line-height:1.25;letter-spacing:-.04em}
  .shop-art-layout .shop-copy small{font-size:12px;margin-top:4px}
  .shop-art-layout .card-price{left:0;top:1px;height:20px;min-width:40px;font-size:12px;padding-right:5px;gap:0}
  .shop-art-layout .card-price .crop-icon{width:21px;height:21px}
  .shop-art-layout .stock-time{position:static;align-self:flex-end;margin:-8px 9px 0 0;padding:7px 11px;font-size:13px;z-index:1}
  .shop-art-layout .shop-detail{display:flex;min-height:425px;align-self:stretch;padding:0 22px;gap:0;border:0;background:none;border-radius:0}
  .shop-art-layout .shop-detail::before{inset:90px -2px -2px}
  .shop-selected-preview{height:151px;margin-top:0}
  .shop-art-layout .shop-detail .detail-art{width:165px;height:165px}
  .shop-art-layout .quantity-control input{width:50px;height:50px;font-size:31px;left:14px;top:0}
  .shop-art-layout .quantity-control button{top:54px;width:42px;height:44px}
  .shop-art-layout .quantity-control button[data-delta="-1"]{left:-15px}
  .shop-art-layout .quantity-control button[data-delta="1"]{right:-15px}
  .shop-art-layout .shop-detail .detail-name{font-size:21.6px;margin:-7px 0 8px;padding:8px 18px}
  .shop-art-layout .detail-facts{font-size:15px;padding:0 8px;gap:9px}
  .shop-art-layout .detail-facts>div{min-height:31px;padding:4px 0;border-bottom-width:5px}
  .shop-checkout{min-height:71px;margin-top:15px;padding-right:28px}
  .shop-art-layout .detail-total{min-height:43px;padding:8px 12px;font-size:23px;gap:8px}
  .shop-art-layout .detail-total strong{font-size:15px}
  .shop-art-layout .detail-total .crop-icon{width:24px;height:24px}
  .shop-cart-button{width:71px;height:71px;padding:17px;right:-6px}
  .shop-art-layout .detail-footnote{font-size:11px;margin:0 0 15px}
  .shop-wallet{bottom:0;left:-18px;min-width:170px;padding:12px 20px 12px 14px;border-radius:0 42px 0 0}
  .shop-wallet>span{font-size:25px;gap:16px;padding:4px 12px 4px 5px}
  .shop-wallet .crop-icon{width:33px;height:33px}
  html[data-locale-layout="latin"] .shop-art-layout .shop-copy strong{font-size:9px}
  html[data-locale-layout="latin"] .shop-art-layout .detail-name{font-size:18.9px}
}
/* Landscape phones use two columns and an independently scrollable window. */
@media(min-width:601px) and (max-height:550px){
  #panel-overlay:has(#game-window[data-panel="shop"]){padding:4px 22px}
  #game-window[data-panel="shop"]{--su:.72px;width:min(800px,95vw);height:96dvh;max-height:96dvh;background-size:100% calc(100% - 12px)}
  #game-window[data-panel="shop"] #panel-close{top:75px;right:-8px;width:44px;height:44px;min-width:44px;min-height:44px;border-width:6px;border-radius:15px}
  .shop-art-layout.shop-layout{height:auto;min-height:100%;padding:98px 44px 56px 65px;gap:19px}
  .shop-trade-tabs{top:-9px;left:7px}
  .shop-categories{left:2px;top:130px}
  .shop-art-layout .shop-list{grid-template-rows:repeat(2,124px);gap:5px 7px;padding:22px 22px 28px}
  .shop-art-layout .shop-copy strong{font-size:11.25px;white-space:normal}
  .shop-art-layout .shop-copy small{font-size:12px}
  .shop-art-layout .card-price{font-size:12px;min-width:39px;top:2px}
  .shop-art-layout .shop-detail{min-height:311px;padding:0 7px}
  .shop-art-layout .detail-facts{font-size:12px;padding:0 8px;gap:8px}
  .shop-art-layout .shop-detail .detail-name{font-size:17.1px}
  .shop-art-layout .stock-time{font-size:13px;bottom:-26px}
  .shop-art-layout .detail-total{font-size:19px;padding-right:22px;gap:6px}
  .shop-art-layout .detail-total strong{font-size:12px}
  .shop-art-layout .detail-footnote{font-size:10px;margin-top:3px}
  html[data-locale-layout="latin"] .shop-art-layout .shop-copy strong{font-size:9.75px}
}
/* The shop occupies the complete game surface while either trading tab is open. */
#app:has(#game-window[data-panel="shop"]) :is(.game-hud,.quest-board,.quickbar,.game-actions,#movement-help,#touch-controls,.station-marker,#station-prompt){visibility:hidden;pointer-events:none}
.shop-art-layout .shop-copy .clock-icon .crop-icon{width:1.05em;height:1.05em}
.shop-art-layout .detail-facts span>.crop-icon{width:1.12em;height:1.12em}
/* Match the supplied 1920 × 1080 composition without a desktop scale cap. */
@media(min-width:601px) and (min-height:551px){
  #panel-overlay:has(#game-window[data-panel="shop"]){padding:0;background:#102e171c;backdrop-filter:blur(5px);overflow:hidden}
  #game-window[data-panel="shop"]{--su:min(.0520833333vw,.0925925926dvh);width:calc(1920 * var(--su));height:calc(1080 * var(--su));max-width:100vw;max-height:100dvh;background-size:calc(1723 * var(--su)) calc(1013 * var(--su));background-position:calc(97 * var(--su)) calc(67 * var(--su));border-radius:0;overflow:visible}
  #game-window[data-panel="shop"] #panel-content{overflow:hidden;padding:0}
  #game-window[data-panel="shop"] #panel-close{right:calc(43 * var(--su));top:calc(302 * var(--su));width:calc(191 * var(--su));height:calc(163 * var(--su));min-width:0;min-height:0;border:0;border-radius:0;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:calc(58 * var(--su)) calc(58 * var(--su)),calc(122 * var(--su)) calc(122 * var(--su)),100% 100%;background-position:calc(88 * var(--su)) center,calc(55 * var(--su)) center,center;background-repeat:no-repeat;box-shadow:none}
  .shop-art-layout.shop-layout{display:block;padding:0;width:100%;height:100%;min-height:0}
  .shop-trade-tabs{position:absolute;left:0;top:0;width:calc(900 * var(--su));height:calc(303 * var(--su));display:block;z-index:5}
  .shop-trade-tab,.shop-trade-tab.active{position:absolute;display:block;border:0;border-radius:0;padding:0;margin:0;transform:none;box-shadow:none;background-repeat:no-repeat;background-size:100% 100%;font-size:calc(98 * var(--su));font-weight:900;letter-spacing:.04em;line-height:1}
  .shop-trade-tab[data-mode="buy"]{left:calc(61 * var(--su));top:0;width:calc(536 * var(--su));height:calc(302 * var(--su));background-image:url("../assets/ui-user/shop-buy-tab.png");z-index:2}
  .shop-trade-tab[data-mode="sell"]{left:calc(408 * var(--su));top:calc(-90 * var(--su));width:calc(446 * var(--su));height:calc(223 * var(--su));margin:0;background-image:url("../assets/ui-user/shop-sell-tab.png");z-index:1}
  .shop-trade-tab[data-mode="sell"].active{z-index:4;top:calc(-38 * var(--su))}
  .shop-trade-tab>span,.shop-trade-tab.active>span{position:absolute;display:grid;place-items:center;padding:0;line-height:1;background-size:100% 100%;text-shadow:0 calc(5 * var(--su)) calc(8 * var(--su)) #56723a55}
  .shop-trade-tab[data-mode="buy"]>span{left:calc(113 * var(--su));top:calc(22 * var(--su));width:calc(263 * var(--su));height:calc(182 * var(--su));background-image:url("../assets/ui-user/shop-buy-label-bg.png")}
  .shop-trade-tab[data-mode="sell"]>span{left:calc(105 * var(--su));top:calc(48 * var(--su));width:calc(261 * var(--su));height:calc(171 * var(--su));background-image:url("../assets/ui-user/shop-sell-label-bg.png")}
  .shop-trade-tab>span>b{font-weight:900;display:block}
  .shop-trade-tab[data-mode="buy"]>span>b{transform:rotate(12deg)}
  .shop-trade-tab[data-mode="sell"]>span>b{transform:rotate(-15deg)}
  .shop-trade-tab:active:not(:disabled),.shop-trade-tab.active:active:not(:disabled){transform:translateY(calc(2 * var(--su)))}
  .shop-categories{left:calc(48 * var(--su));top:calc(355 * var(--su));gap:calc(6 * var(--su));z-index:1}
  .shop-categories button,.shop-categories button.active{position:relative;width:calc(369 * var(--su));height:calc(145 * var(--su));min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background: url("../assets/ui-user/shop-category-selected.png") center / calc(369 * var(--su)) calc(225 * var(--su)) no-repeat;box-shadow:none;display:block}
  .shop-categories button.active{height:calc(179 * var(--su));background-image:url("../assets/ui-user/shop-category-bg.png")}
  .shop-categories button.active>.crop-icon{position:absolute;left:calc(82 * var(--su));top:calc(21 * var(--su));width:calc(117 * var(--su));height:calc(117 * var(--su))}
  .shop-categories button:not(.active)>.crop-icon{position:absolute;left:calc(166 * var(--su));top:calc(14 * var(--su));width:calc(58 * var(--su));height:calc(97 * var(--su))}
  .shop-art-layout .shop-main{position:absolute;left:calc(226 * var(--su));top:calc(253 * var(--su));width:calc(1001 * var(--su));height:calc(747 * var(--su));z-index:2}
  .shop-art-layout .shop-list{width:100%;height:100%;flex:none;grid-template-columns:repeat(3,calc(230 * var(--su)));grid-template-rows:repeat(2,calc(244 * var(--su)));gap:calc(15 * var(--su)) calc(28 * var(--su));padding:calc(122 * var(--su)) calc(139 * var(--su)) calc(122 * var(--su)) calc(90 * var(--su));background-size:100% 100%;overflow:visible}
  .shop-art-layout .shop-item,.shop-art-layout .shop-item.active{justify-content:flex-start;gap:0;padding:0;border-radius:0;overflow:visible}
  .shop-art-layout .shop-item .crop-art{width:calc(165 * var(--su));height:calc(165 * var(--su));max-width:none}
  .shop-art-layout .shop-item .crop-art>.crop-icon{width:100%;height:100%}
  .shop-art-layout .shop-item.active .crop-art{outline:0;filter:none}
  .shop-art-layout .shop-copy strong{font-size:calc(28.5 * var(--su));line-height:1.18;font-weight:900;letter-spacing:-.04em}
  .shop-art-layout .shop-copy small{font-size:calc(28 * var(--su));line-height:1.15;margin-top:calc(9 * var(--su));gap:calc(6 * var(--su))}
  .shop-art-layout .card-price{left:calc(16 * var(--su));top:0;height:calc(40 * var(--su));min-width:calc(85 * var(--su));padding-right:calc(8 * var(--su));gap:calc(1 * var(--su));border-radius:30px;font-size:calc(27 * var(--su))}
  .shop-art-layout .card-price .crop-icon{width:calc(40 * var(--su));height:calc(40 * var(--su))}
  .shop-art-layout .stock-time{right:calc(71 * var(--su));bottom:calc(-31 * var(--su));padding:calc(15 * var(--su)) calc(20 * var(--su));font-size:calc(32 * var(--su));line-height:1.05;min-height:calc(65 * var(--su));border-radius:50px}
  .shop-art-layout .shop-detail{position:absolute;left:calc(1186 * var(--su));top:calc(246 * var(--su));width:calc(515 * var(--su));height:calc(830 * var(--su));padding:0;display:block;z-index:2}
  .shop-art-layout .shop-detail::before{inset:calc(164 * var(--su)) 0 0;background-size:100% 100%}
  .shop-selected-preview{position:absolute;left:0;top:0;width:100%;height:calc(350 * var(--su));margin:0}
  .shop-art-layout .shop-detail .detail-art{width:calc(350 * var(--su));height:calc(350 * var(--su));margin:0;background-size:100% 100%}
  .shop-art-layout .shop-detail .detail-art>.crop-icon{width:80%;height:87%;padding-bottom:calc(10 * var(--su))}
  .shop-art-layout .quantity-control input{left:calc(107 * var(--su));top:calc(7 * var(--su));width:calc(103 * var(--su));height:calc(103 * var(--su));font-size:calc(65 * var(--su));box-shadow:0 3px 9px #8b733926}
  .shop-art-layout .quantity-control button{top:calc(100 * var(--su));width:calc(100 * var(--su));height:calc(104 * var(--su));min-width:0;min-height:0}
  .shop-art-layout .quantity-control button[data-delta="-1"]{left:calc(8 * var(--su))}
  .shop-art-layout .quantity-control button[data-delta="1"]{right:calc(16 * var(--su))}
  .shop-art-layout .shop-detail .detail-name{position:absolute;left:calc(115 * var(--su));top:calc(243 * var(--su));width:calc(286 * var(--su));height:calc(95 * var(--su));max-width:none;margin:0;padding:calc(17 * var(--su)) calc(12 * var(--su));border-radius:60px;font-size:calc(43.2 * var(--su));line-height:1.25;font-weight:900;text-align:center;letter-spacing:-.04em;background-image:url("../assets/ui-user/shop-product-title.png");background-size:100% 100%}
  .shop-art-layout .detail-facts{position:absolute;left:calc(114 * var(--su));top:calc(370 * var(--su));width:calc(279 * var(--su));height:calc(252 * var(--su));padding:0;margin:0;display:flex;flex-direction:column;justify-content:space-between;font-size:calc(26 * var(--su))}
  .shop-art-layout .detail-facts>div{min-height:calc(70 * var(--su));padding:calc(12 * var(--su)) calc(4 * var(--su)) calc(6 * var(--su));gap:calc(8 * var(--su));border-bottom:calc(11 * var(--su)) solid #d0f0da;border-radius:6px}
  .shop-art-layout .detail-facts span{gap:calc(8 * var(--su));white-space:nowrap}
  .shop-art-layout .detail-facts>div:last-child>span{padding-left:calc(42 * var(--su))}
  .shop-checkout{position:absolute;left:calc(111 * var(--su));top:calc(638 * var(--su));width:calc(390 * var(--su));min-height:0;height:calc(150 * var(--su));padding:0;margin:0;display:block}
  .shop-art-layout .detail-total{position:absolute;left:0;top:calc(38 * var(--su));width:calc(286 * var(--su));height:calc(71 * var(--su));min-height:0;padding:calc(7 * var(--su)) calc(22 * var(--su));border-radius:45px;font-size:calc(52 * var(--su));line-height:1;gap:calc(10 * var(--su));background-image:url("../assets/ui-user/shop-total-bg.png");background-size:100% 100%}
  .shop-art-layout .detail-total strong{font-size:calc(26 * var(--su));gap:calc(3 * var(--su))}
  .shop-art-layout .detail-total .crop-icon{width:calc(37 * var(--su));height:calc(37 * var(--su))}
  .shop-cart-button{left:calc(233 * var(--su));right:auto;top:0;width:calc(150 * var(--su));height:calc(150 * var(--su));padding:calc(32 * var(--su));background:#f7f6e5;border-radius:50%;box-shadow:0 6px 18px #5e755d3a}
  .shop-art-layout .detail-footnote{position:absolute;left:calc(76 * var(--su));top:calc(790 * var(--su));width:calc(363 * var(--su));margin:0;font-size:calc(15 * var(--su));opacity:.85}
  .shop-wallet{left:0;bottom:0;min-width:0;width:calc(343 * var(--su));height:calc(156 * var(--su));padding:calc(40 * var(--su)) calc(55 * var(--su)) calc(32 * var(--su)) calc(35 * var(--su));border-radius:0 calc(100 * var(--su)) 0 0;background:#fffef0}
  .shop-wallet>span{width:calc(253 * var(--su));height:calc(84 * var(--su));padding:calc(5 * var(--su)) calc(27 * var(--su)) calc(5 * var(--su)) calc(10 * var(--su));gap:calc(27 * var(--su));font-size:calc(50 * var(--su));line-height:1;border-radius:60px}
  .shop-wallet .crop-icon{width:calc(70 * var(--su));height:calc(70 * var(--su))}
  html[data-locale-layout="latin"] .shop-trade-tab{font-size:calc(76 * var(--su));letter-spacing:0}
  html[data-locale-layout="latin"] .shop-art-layout .shop-copy strong{font-size:calc(21.75 * var(--su))}
  html[data-locale-layout="latin"] .shop-art-layout .detail-name{font-size:calc(32.4 * var(--su))}
  html[data-locale-layout="latin"] .shop-art-layout .detail-facts{font-size:calc(21 * var(--su))}
  html[data-locale-layout="latin"] .shop-art-layout .detail-total{font-size:calc(40 * var(--su))}
}
@media(min-width:601px) and (min-height:551px){
  #game-window[data-panel="shop"] #panel-close{background-color:transparent}
  .shop-art-layout .shop-copy{margin-top:calc(-14 * var(--su))}
  .shop-art-layout .shop-copy .clock-icon{font-size:1em}
  .shop-art-layout .shop-detail .detail-art>.crop-icon{width:74%;height:83%;padding-bottom:0;transform:translateY(calc(10 * var(--su)))}
  .shop-categories button.active{background-position:center calc(50% + 22 * var(--su))}
  .shop-categories button:not(.active){margin-left:calc(79 * var(--su));transform:translateY(calc(-16 * var(--su)))}
  .shop-categories button:not(.active)>.crop-icon{left:calc(87 * var(--su))}
}

.potion-showcase{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:24px!important;min-width:0}
.potion-aura{position:relative;isolation:isolate;width:min(240px,22vw);aspect-ratio:1;display:grid;place-items:center;flex-shrink:0}
.potion-rays,.potion-halo{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.potion-rays{background:repeating-conic-gradient(from 0deg,#f5cf6180 0deg 12deg,transparent 12deg 30deg);mask-image:radial-gradient(circle,#000 10%,transparent 70%);animation:potionRotate 12s linear infinite}
.potion-halo{inset:10%;background:radial-gradient(circle,#ffe594b0,transparent 70%);animation:potionPulse 2s ease-in-out infinite alternate}
.potion-bottle{position:relative;z-index:2;width:52%;height:70%;display:grid;place-items:center;filter:hue-rotate(var(--potion-hue)) drop-shadow(0 4px 7px #608a5944)}
.potion-bottle .crop-icon{width:100%;height:100%;object-fit:contain}
.potion-spark{position:absolute;left:calc(12% + mod(var(--i)*23,78)*1%);top:75%;width:5px;height:5px;border-radius:50%;background:#eabe40;box-shadow:0 0 8px #ffcf36;animation:potionSpark 2.8s linear infinite;animation-delay:calc(var(--i)*-.29s)}
.potion-showcase h2{margin:0;color:#668875;font-size:24px}.potion-level{color:#b58a35}.potion-description{max-width:400px;line-height:1.65;margin:0}.potion-showcase small{color:#92a292}
.potion-detail{justify-content:center;gap:18px!important;padding:22px!important;min-width:0}
.potion-detail h2{font-size:21px;margin:0}.potion-probabilities{display:flex;width:100%;height:24px;overflow:hidden;border-radius:12px;background:#e8ecdc}.potion-probabilities span{height:100%;flex-shrink:0}
.potion-legend{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px;font-size:13px}.potion-legend>span{display:flex;gap:5px;align-items:center}.potion-legend i{width:9px;height:9px;border-radius:50%;flex-shrink:0}.potion-legend b{margin-left:auto}
.potion-mutation{display:flex;flex-direction:column;gap:10px;padding:16px 0;border-top:1px solid #d6dec8;border-bottom:1px solid #d6dec8}.potion-mutation strong{font-size:22px;color:#b38c37}.potion-detail p{font-size:13px;line-height:1.6}.potion-purchase{min-height:44px;width:100%}
@keyframes potionRotate{to{transform:rotate(360deg)}}@keyframes potionPulse{from{opacity:.4;transform:scale(.85)}to{opacity:1;transform:scale(1.1)}}@keyframes potionSpark{0%{opacity:0;transform:translateY(0) scale(.3)}25%{opacity:1}100%{opacity:0;transform:translateY(-130px) scale(1)}}
@media(prefers-reduced-motion:reduce){.potion-rays,.potion-halo,.potion-spark{animation:none}.potion-spark{display:none}}
@media(max-width:600px){.potion-aura{width:140px}.potion-showcase{padding:12px!important;gap:8px}.potion-detail{padding:14px!important;gap:12px!important}.potion-description{font-size:13px}.potion-showcase h2{font-size:20px}}
@media(max-height:550px) and (min-width:601px){.potion-aura{width:120px}.potion-showcase{gap:6px;padding:10px!important}.potion-showcase h2{font-size:18px}.potion-description{font-size:12px}.potion-detail{gap:8px!important;padding:12px!important}.potion-detail h2{font-size:16px}.potion-mutation{padding:8px 0;gap:4px}.potion-legend{gap:6px}.potion-probabilities{height:18px}}

.shop-categories{z-index:4}
.potion-art-layout .potion-detail{justify-content:center;align-items:stretch}
.potion-art-layout .potion-detail::before{inset:0;background:#edf3df;border-radius:20px}
.potion-legend,.potion-mutation{width:100%}

/* The potion preview is a separate, deliberately simple two-column page. */
#game-window[data-trade="potion"]{width:min(1050px,94vw);height:min(720px,94dvh);background:#fffbea;border-radius:24px;overflow:hidden}
#game-window[data-trade="potion"] .window-header{position:relative;inset:auto;height:64px;min-height:64px;padding:12px 24px;pointer-events:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d7dfc8}
#game-window[data-trade="potion"] .window-header>div{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
#game-window[data-trade="potion"] .window-header h1{font-size:24px}
#game-window[data-trade="potion"] #panel-close{position:static;width:40px;height:40px;min-width:40px;min-height:40px;border:0;border-radius:12px;background:#e8efda;font-size:28px;color:#668875}
#game-window[data-trade="potion"] #panel-content{flex:1;min-height:0;overflow:auto}
.potion-art-layout.shop-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);padding:76px 24px 24px;gap:24px;height:auto;min-height:100%}
.potion-art-layout .shop-trade-tabs{display:none}
.potion-art-layout .shop-categories{left:24px;top:12px;display:flex;gap:10px}
.potion-art-layout .shop-categories button,.potion-art-layout .shop-categories button.active{width:52px;height:44px;margin:0;padding:6px;border-radius:12px;background:#dcead5}
.potion-art-layout .shop-categories button.active{background:#efcc72}
.potion-art-layout .shop-wallet{position:absolute;inset:12px 24px auto auto;width:auto;height:44px;min-width:0;padding:6px 12px;background:#dcead5;border-radius:22px;transform:none;font-size:20px}
.potion-art-layout .shop-wallet strong{font-size:20px}.potion-art-layout .shop-wallet .crop-icon{width:28px;height:28px}
.potion-art-layout .potion-detail .detail-total{position:static;inset:auto;transform:none;width:100%;height:auto;min-height:40px;padding:8px 14px;font-size:20px;background:#668875}
.potion-art-layout .potion-detail .detail-total strong{font-size:20px}.potion-art-layout .detail-total .crop-icon{width:24px;height:24px}
@media(max-width:600px){.potion-art-layout.shop-layout{grid-template-columns:1fr;padding:70px 12px 16px;gap:16px}.potion-art-layout .shop-categories{left:12px}.potion-art-layout .shop-wallet{right:12px}.potion-showcase{justify-content:flex-start!important}}
@media(max-height:550px) and (min-width:601px){
 #game-window[data-trade="potion"] .window-header{height:48px;min-height:48px;padding:4px 16px}
 .potion-art-layout.shop-layout{padding:52px 14px 10px;gap:14px}
 .potion-art-layout .shop-wallet,.potion-art-layout .shop-categories{top:5px}
 .potion-art-layout .shop-categories button,.potion-art-layout .shop-categories button.active{height:36px}
 .potion-art-layout .shop-wallet{height:36px}
 .potion-art-layout .potion-detail{gap:7px!important;padding:10px!important}
 .potion-art-layout .potion-detail>p{display:none}.potion-art-layout .potion-detail h2{font-size:16px}
 .potion-art-layout .potion-mutation{flex-direction:row;align-items:center;justify-content:space-between;padding:8px 0;font-size:12px}
 .potion-art-layout .potion-mutation strong{font-size:18px}
 .potion-art-layout .potion-detail .detail-total{min-height:32px;padding:4px 12px;font-size:16px}
 .potion-art-layout .potion-purchase{min-height:34px;padding:6px 10px;font-size:14px}
 .potion-aura{width:90px}.potion-showcase small{font-size:10px}
}

.potion-art-layout.shop-layout{display:grid}
.potion-art-layout .shop-main,.potion-art-layout .shop-detail{position:relative;inset:auto;width:auto;height:auto;min-height:0}
.potion-art-layout .shop-categories button.active>.crop-icon,.potion-art-layout .shop-categories button:not(.active)>.crop-icon{position:static;width:100%;height:100%}
.potion-art-layout .shop-wallet>span{width:auto;height:auto;padding:0;gap:8px;background:none;font-size:20px}
@media(max-height:550px) and (min-width:601px){.potion-art-layout .potion-detail{gap:5px!important}.potion-art-layout .potion-mutation{padding:6px 0}.potion-art-layout .potion-detail .detail-total{min-height:28px}.potion-art-layout .potion-purchase{min-height:32px}}

.buy-art-layout .shop-item[data-category="exotic"] .crop-art{filter:drop-shadow(0 0 4px #b98bdb)}
.buy-art-layout .shop-copy .slot-purchase-count{font-size:clamp(10px,calc(22 * var(--su)),16px);white-space:nowrap}
.buy-art-layout .shop-copy strong{white-space:normal}
.buy-art-layout .detail-footnote{white-space:normal;line-height:1.4}

.buy-art-layout .shop-categories{pointer-events:none}
.buy-art-layout .shop-categories button{pointer-events:auto}

@media(min-width:601px) and (min-height:551px){
 .buy-art-layout .shop-categories{width:calc(178 * var(--su));gap:calc(12 * var(--su))}
 .buy-art-layout .shop-categories button,.buy-art-layout .shop-categories button.active{width:100%;height:calc(145 * var(--su));margin:0;transform:none;background-size:100% 100%}
 .buy-art-layout .shop-categories button.active>.crop-icon,.buy-art-layout .shop-categories button:not(.active)>.crop-icon{left:calc(34 * var(--su));top:calc(24 * var(--su));width:calc(90 * var(--su));height:calc(90 * var(--su))}
 .buy-art-layout .detail-facts{top:calc(350 * var(--su));height:calc(270 * var(--su));font-size:calc(23 * var(--su))}
 .buy-art-layout .detail-facts>div{min-height:0;flex:1;padding:calc(7 * var(--su)) 0}
 .buy-art-layout .detail-facts>div:last-child>span{padding-left:0}
 .buy-art-layout .detail-total{width:calc(230 * var(--su));height:calc(95 * var(--su));top:calc(28 * var(--su));flex-direction:column;justify-content:center;font-size:calc(27 * var(--su));gap:calc(5 * var(--su));padding:calc(6 * var(--su))}
 .buy-art-layout .detail-total strong{font-size:calc(27 * var(--su))}
 .buy-art-layout .shop-wallet{width:max-content;max-width:45%}
 .buy-art-layout .shop-wallet>span{width:auto;gap:12px;font-size:clamp(16px,calc(32 * var(--su)),28px)}
}
@media(max-width:600px){.buy-art-layout .shop-copy .slot-purchase-count{font-size:10px;letter-spacing:-.4px}}
@media(min-width:601px) and (max-height:550px){.buy-art-layout .shop-copy .slot-purchase-count{font-size:11px}}
/* Keep original placement; product names render above overlapping artwork. */
.buy-art-layout .shop-copy{position:relative;z-index:3}
.buy-art-layout .shop-detail .detail-name{z-index:3}
.potion-showcase>h2{position:relative;z-index:3}

/* Both item kinds share icon + name + right-aligned value rows. */
.detail-facts.item-facts>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.detail-facts.item-facts .item-fact-label{display:flex;align-items:center;gap:6px;padding:0;min-width:0}
.detail-facts.item-facts .item-fact-label>img{width:clamp(22px,3dvh,32px);height:clamp(22px,3dvh,32px);object-fit:contain;flex:none}
.detail-facts.item-facts .item-fact-label>span{display:block;white-space:normal;line-height:1.3;color:inherit}
.detail-facts.item-facts>div:last-child>.item-fact-label{padding-left:0}
.detail-facts.item-facts strong{justify-content:flex-end;text-align:right}
@media(min-width:601px) and (min-height:551px){
 .buy-art-layout .detail-facts.item-facts{left:calc(65 * var(--su));width:calc(385 * var(--su));font-size:calc(22 * var(--su))}
}
#trade-warehouse-shortcut{z-index:70;visibility:visible;pointer-events:auto}
#trade-warehouse-shortcut[hidden]{display:none}

.buy-art-layout .shop-copy .slot-stock{font-size:clamp(10px,calc(18 * var(--su)),16px);line-height:1.15;margin-top:2px;color:#668c7b}
.selected-stock{position:absolute;right:8%;top:8%;z-index:3;padding:4px 9px;border-radius:18px;background:#fffce9e8;color:#658b7b;font-size:clamp(11px,calc(22 * var(--su)),18px);font-weight:800}

.buy-art-layout .crop-art>.crop-icon,.buy-art-layout .detail-art>.crop-icon,.potion-bottle>.crop-icon{scale:.75}

.shop-item.sold-out .slot-stock{color:#ad563a;font-weight:900}
.shop-cart-button .restock-button-label{font-size:clamp(12px,2dvh,20px);white-space:nowrap;color:#826a67}

.shop-price-hint{position:absolute;top:0;left:0;width:100%;margin:0;transform:translateY(-120%);text-align:center;font-size:clamp(10px,1.5dvh,14px);line-height:1.3;color:#826a67;font-weight:700;pointer-events:none}
@media(max-width:760px){.shop-price-hint{position:static;transform:none;margin:0 0 6px;flex-shrink:0}}

.shop-art-layout .shop-purchase-button{border:0;border-radius:24px;background:none;box-shadow:none;text-align:inherit;cursor:pointer}
.shop-purchase-button>.shop-cart-button{display:grid;place-items:center;pointer-events:none}
.shop-purchase-button:disabled{cursor:default;opacity:.5}.shop-purchase-button:focus-visible{outline:3px solid #ffb52d;outline-offset:3px}

/* One three-row catalog: basic seeds, exotic seeds, then the next potion. */
.unified-shop .shop-list{grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;padding:22px 25px}
.unified-shop .shop-item .crop-art{width:clamp(50px,10dvh,92px);height:clamp(50px,10dvh,92px)}
.unified-shop .shop-copy small{margin-top:2px;font-size:11px}
.unified-potion-facts{overflow:auto;font-size:14px;line-height:1.4;color:#688875;min-height:0}
.unified-potion-facts p{margin:6px 0}.unified-potion-facts .potion-special{color:#a36a28}
.unified-potion-facts .potion-probabilities{display:flex;height:12px;border-radius:6px;overflow:hidden}
.unified-potion-facts .potion-legend{font-size:12px;gap:4px}.unified-potion-facts .potion-legend span{display:flex;justify-content:space-between;gap:5px}
.unified-potion-detail .detail-art .rarity-glow{animation:rarity-rays 10s linear infinite,rarity-breathe 2.8s ease-in-out infinite}
@media(min-width:601px) and (min-height:551px){
 .unified-shop .shop-list{grid-template-columns:repeat(3,minmax(0,1fr));padding:calc(60 * var(--su)) calc(65 * var(--su)) calc(35 * var(--su));gap:calc(16 * var(--su))}
 .unified-shop .shop-item .crop-art{width:calc(130 * var(--su));height:calc(130 * var(--su))}
 .unified-shop .shop-copy .slot-purchase-count,.unified-shop .shop-copy .slot-stock{font-size:clamp(10px,calc(18 * var(--su)),14px)}
 .unified-potion-facts{position:absolute;left:calc(65 * var(--su));top:calc(350 * var(--su));width:calc(385 * var(--su));height:calc(270 * var(--su));font-size:clamp(12px,calc(21 * var(--su)),17px)}
}
@media(max-width:600px){.unified-shop .shop-list{grid-template-rows:repeat(3,140px);height:auto}.unified-potion-facts{max-height:260px}}
@media(min-width:601px) and (max-height:550px){.unified-shop .shop-list{grid-template-rows:repeat(3,126px);height:auto}.unified-potion-facts{max-height:200px}}

.unified-potion-detail .potion-spark{pointer-events:none;background:var(--rarity-glow);box-shadow:0 0 7px var(--rarity-glow)}

.unified-shop [data-category=potion],.unified-shop .potion-offer-complete{grid-column:2}
.unified-shop .shop-list{background:none;isolation:isolate}
.unified-shop .shop-list::before{content:'';position:absolute;inset:0 0 -18px;background:url("../assets/ui-user/shop-list.png") center / 100% 100% no-repeat;z-index:-1;pointer-events:none}
.unified-shop .stock-time{position:absolute;top:0;bottom:auto;right:calc(20 * var(--su));margin:0;translate:0 -110%;z-index:3}
.shop-art-layout .shop-detail .detail-name{background:none!important;border:0;box-shadow:none;translate:0 6px}
.shop-art-layout .shop-wallet{position:fixed;left:0;bottom:0;right:auto;top:auto;z-index:8;margin:0;transform:none}

/* Separate tab artwork from hit targets so the frame never blocks tab clicks. */
#game-window[data-panel="shop"]{background:none}
.shop-art-layout::before{content:'';position:absolute;inset:0;background:url("../assets/ui-user/shop-frame.png") center bottom / 100% calc(100% - 35 * var(--su)) no-repeat;z-index:1;pointer-events:none}
.shop-art-layout .shop-trade-tabs-rear{z-index:0;pointer-events:none}
.shop-trade-tabs-rear .shop-trade-tab{pointer-events:none}
.shop-trade-tabs-rear .active{visibility:hidden}
.shop-art-layout .shop-trade-tabs-front{z-index:5;pointer-events:none}
.shop-trade-tabs-front .shop-trade-tab{pointer-events:auto}
.shop-trade-tabs-front .shop-trade-tab:not(.active){background:none;box-shadow:none;z-index:1}
.shop-trade-tabs-front .shop-trade-tab:not(.active)>span{visibility:hidden}
.shop-trade-tabs-front .trade-guide-hand{position:absolute;left:60%;top:80%;z-index:6;pointer-events:none;font:48px/1 sans-serif;filter:drop-shadow(0 3px 3px #49332188);animation:trade-guide-tap 1.2s ease-in-out infinite}
@keyframes trade-guide-tap{0%,100%{translate:0 12px;rotate:-12deg}50%{translate:0 0;rotate:0deg}}
body[data-reduced-motion=true] .trade-guide-hand{animation:none}
.shop-trade-tabs-front .shop-trade-tab.active{z-index:2}
.unified-shop{--potion-art-width:clamp(75px,15dvh,138px);--potion-art-height:clamp(75px,15dvh,138px)}
.unified-shop .shop-item[data-category=potion],.unified-shop .shop-item[data-category=potion]:active:not(:disabled){transform:none;height:100%;align-self:center}
.unified-shop .shop-item[data-category=potion] .crop-art{width:var(--potion-art-width);height:var(--potion-art-height);max-width:150%}
.unified-shop .shop-list::before{bottom:0}
@media(min-width:601px) and (min-height:551px){
 .shop-art-layout::before{background-size:calc(1723 * var(--su)) calc(1013 * var(--su));background-position:calc(97 * var(--su)) calc(67 * var(--su))}
 .unified-shop .shop-main{height:calc(830 * var(--su))}
 .unified-shop{--potion-art-width:calc(195 * var(--su));--potion-art-height:calc(195 * var(--su))}
 .unified-shop .shop-list{grid-template-rows:1fr 1fr 1.5fr}
}
@media(max-width:600px){
 .shop-art-layout::before{background-size:100% calc(100% - 22px)}
 .unified-shop .shop-main{margin-top:35px}
 .unified-shop .shop-list{grid-template-rows:140px 140px 210px}
}
@media(min-width:601px) and (max-height:550px){
 .shop-art-layout::before{background-size:100% calc(100% - 12px)}
 .unified-shop .shop-main{margin-top:35px}
 .unified-shop .shop-list{grid-template-rows:126px 126px 189px}
}

.shop-art-layout .card-price[data-unaffordable=true],.shop-art-layout .detail-total[data-unaffordable=true],.shop-art-layout .detail-total[data-unaffordable=true] strong{color:#c52c38}
.shop-art-layout .card-price[data-unaffordable=true],.shop-art-layout .detail-total[data-unaffordable=true]{background:#ffd0d3;box-shadow:inset 0 0 0 1px #e98790}

/* Compact level notation can still add a second line to long crop names. */
.shop-art-layout .shop-detail .detail-name{display:flex;align-items:center;justify-content:center;white-space:normal;overflow-wrap:anywhere;font-size:20px;line-height:1.15;letter-spacing:0;padding-top:5px;padding-bottom:5px}
/* Localized facts grow vertically instead of compressing into adjacent rows. */
#game-window[data-panel="shop"] .shop-art-layout .detail-facts.item-facts{min-width:0;min-height:0;justify-content:flex-start;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b68c62 transparent;scrollbar-gutter:stable}
#game-window[data-panel="shop"] .shop-art-layout .detail-facts.item-facts>div{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:start;flex:none;min-height:0;gap:8px;padding:7px 0;border-bottom-width:2px}
#game-window[data-panel="shop"] .shop-art-layout .detail-facts.item-facts .item-fact-label{min-width:0;align-items:flex-start;padding:0;white-space:normal;overflow-wrap:normal;word-break:normal;line-height:1.35}
#game-window[data-panel="shop"] .shop-art-layout .detail-facts.item-facts .item-fact-label>span{white-space:normal;overflow-wrap:normal;word-break:normal;line-height:1.35}
#game-window[data-panel="shop"] .shop-art-layout .detail-facts.item-facts>div>strong{min-width:max-content;white-space:nowrap;overflow-wrap:normal;word-break:normal;line-height:1.35;font-variant-numeric:tabular-nums;text-align:right}
#game-window[data-panel="shop"] .shop-art-layout .detail-facts.item-facts>div[data-fruit-fact="mutation"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#game-window[data-panel="shop"] .shop-art-layout .detail-facts.item-facts>div[data-fruit-fact="mutation"]>strong{min-width:0;white-space:normal;overflow-wrap:normal}
#game-window[data-panel="shop"] .shop-art-layout .shop-copy strong{letter-spacing:0;overflow-wrap:normal;word-break:normal}
#game-window[data-panel="shop"] .shop-art-layout .detail-total strong{white-space:nowrap;overflow-wrap:normal;word-break:normal}
@media(orientation:landscape) and (max-height:700px),(orientation:landscape) and (max-width:1050px){
 #game-window[data-panel="shop"] .shop-art-layout .shop-detail{grid-template-rows:var(--shop-preview-size) 44px minmax(0,1fr) 48px 18px}
 #game-window[data-panel="shop"] .shop-art-layout .shop-detail .detail-name{height:44px;min-height:0;font-size:13px;line-height:1.1;overflow:hidden;overflow-wrap:normal;padding:1px 0}
 #game-window[data-panel="shop"] .shop-art-layout .shop-copy strong{display:flex;align-items:center;justify-content:center;min-height:3.6em;font-size:12px;line-height:1.2}
 #game-window[data-panel="shop"] .shop-art-layout .shop-item{justify-content:flex-start}
 #game-window[data-panel="shop"] .shop-art-layout .shop-copy :is(.slot-purchase-count,.slot-stock){font-size:10px;white-space:normal;line-height:1.25}
 #game-window[data-panel="shop"] .shop-art-layout .detail-facts.item-facts>div{padding:5px 0;gap:5px}
 #game-window[data-panel="shop"] .shop-art-layout .detail-facts.item-facts :is(span,strong){font-size:12px}
 body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-art-layout .shop-detail{grid-template-rows:var(--shop-preview-size) 40px minmax(0,1fr) 44px 14px}
 body[data-story-panel="true"] #game-window[data-panel="shop"] .shop-art-layout .shop-detail .detail-name{height:40px;font-size:12px}
}
@media(orientation:portrait) and (max-width:760px){
 #game-window[data-panel="shop"] .shop-art-layout .shop-detail{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);grid-template-rows:48px minmax(0,1fr) 48px 28px;padding:8px}
 #game-window[data-panel="shop"] .shop-art-layout .shop-detail .detail-name{height:48px;font-size:14px;line-height:1.15;overflow:hidden;overflow-wrap:normal}
 #game-window[data-panel="shop"] .shop-art-layout .detail-facts.item-facts>div{grid-template-columns:minmax(0,1fr);gap:2px;padding:5px 0}
 #game-window[data-panel="shop"] .shop-art-layout .detail-facts.item-facts>div>strong{justify-self:end;font-size:13px}
 #game-window[data-panel="shop"] .shop-art-layout .shop-copy strong{min-height:3.6em;font-size:12px;line-height:1.2}
 #game-window[data-panel="shop"] .shop-art-layout .shop-copy :is(.slot-purchase-count,.slot-stock){font-size:10px;white-space:normal;line-height:1.25}
}

@media(min-width:1051px) and (min-height:701px){
 #game-window[data-panel="shop"] .shop-art-layout .shop-detail{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:calc(255 * var(--su)) auto minmax(0,1fr) calc(112 * var(--su)) auto;gap:calc(8 * var(--su));height:calc(785 * var(--su));padding:0 calc(44 * var(--su)) calc(16 * var(--su));overflow:hidden}
 #game-window[data-panel="shop"] .shop-art-layout .shop-selected-preview{position:relative;inset:auto;grid-area:1 / 1;width:100%;height:100%;margin:0}
 #game-window[data-panel="shop"] .shop-art-layout .shop-detail .detail-art{width:calc(270 * var(--su));height:calc(270 * var(--su));max-width:100%;background-size:contain}
 #game-window[data-panel="shop"] .shop-art-layout .quantity-control input{left:0;width:calc(78 * var(--su));height:calc(78 * var(--su));font-size:38px}
 #game-window[data-panel="shop"] .shop-art-layout .quantity-control button{top:calc(100 * var(--su));width:calc(64 * var(--su));height:calc(70 * var(--su));min-width:36px;min-height:40px}
 #game-window[data-panel="shop"] .shop-art-layout .quantity-control button[data-delta="-1"]{left:0}
 #game-window[data-panel="shop"] .shop-art-layout .quantity-control button[data-delta="1"]{right:0}
 #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:48px;margin:0;padding:4px 0;translate:none;font-size:20px;line-height:1.25;overflow-wrap:normal}
 #game-window[data-panel="shop"] .shop-art-layout :is(.detail-facts,.unified-potion-facts){position:static;grid-area:3 / 1;width:100%;height:100%;margin:0;padding:0 8px 0 0;font-size:16px;line-height:1.35;overflow-y:auto}
 #game-window[data-panel="shop"] .shop-art-layout .detail-facts.item-facts :is(span,strong){font-size:16px}
 #game-window[data-panel="shop"] .shop-art-layout .detail-facts.item-facts .item-fact-label>img{width:22px;height:22px}
 #game-window[data-panel="shop"] .shop-art-layout .shop-checkout{position:relative;inset:auto;grid-area:4 / 1;display:flex;align-items:center;width:100%;height:100%;min-height:0;margin:0;padding:0 calc(108 * var(--su)) 0 0}
 #game-window[data-panel="shop"] .shop-art-layout .detail-total{position:static;width:100%;height:calc(82 * var(--su));min-height:48px;padding:5px 10px;font-size:16px;gap:4px;flex-direction:column;justify-content:center}
 #game-window[data-panel="shop"] .shop-art-layout .detail-total strong{font-size:20px}
 #game-window[data-panel="shop"] .shop-art-layout .shop-cart-button{inset:50% 0 auto auto;transform:translateY(-50%);width:calc(102 * var(--su));height:calc(102 * var(--su));min-width:48px;min-height:48px;padding:calc(22 * var(--su))}
 #game-window[data-panel="shop"] .shop-art-layout .detail-footnote{position:static;grid-area:5 / 1;width:100%;height:auto;min-height:28px;margin:0;font-size:11px;line-height:1.3;overflow-wrap:normal}
 #game-window[data-panel="shop"] .unified-shop .shop-list{grid-template-rows:repeat(3,minmax(0,1fr));gap:calc(14 * var(--su));padding-top:calc(38 * var(--su));padding-bottom:calc(24 * var(--su));overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
 #game-window[data-panel="shop"] .unified-shop .shop-item .crop-art{width:calc(130 * var(--su));height:calc(130 * var(--su));max-width:100%}
 #game-window[data-panel="shop"] .unified-shop .shop-copy{margin:0;min-width:0}
 #game-window[data-panel="shop"] .unified-shop .shop-copy strong{display:flex;align-items:center;justify-content:center;min-height:3.6em;font-size:16px;line-height:1.2}
 #game-window[data-panel="shop"] .unified-shop .shop-copy small{font-size:11px;white-space:normal;line-height:1.25;margin-top:2px}
}
@media(max-width:600px){
 #trade-warehouse-shortcut{top:16px;bottom:auto;right:12px;transform:none}
 #trade-warehouse-shortcut button{width:42px;height:44px;min-height:44px;padding:4px;border-radius:8px}
 #trade-warehouse-shortcut button img{width:30px;height:30px}
 #trade-warehouse-shortcut button span{display:none}
}


/* Original stylesheet: ./src/ui-trade.css */
/* The buyer shares the shop artwork, while keeping its own fruit-only controls. */
.sell-art-layout .shop-main{display:flex;flex-direction:column;min-height:0}
.sale-list-title{position:absolute;z-index:2;left:10%;right:10%;top:calc(30 * var(--su));margin:0;text-align:center;color:#658b7b;font-size:calc(27 * var(--su));font-weight:900;line-height:1.3;pointer-events:none}
.sell-art-layout .sale-list{grid-template-rows:none;grid-auto-rows:calc(244 * var(--su));align-content:start;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d8c3ad transparent;min-height:0}
.sell-art-layout .sale-item .shop-copy small{margin-top:calc(4 * var(--su));font-size:calc(19 * var(--su));line-height:1.2}
.sell-art-layout .sale-item .shop-copy .sale-quality{font-size:calc(17 * var(--su));white-space:normal;min-height:1.2em}
.sale-item-count{position:absolute;right:calc(8 * var(--su));top:calc(5 * var(--su));z-index:2;padding:calc(2 * var(--su)) calc(7 * var(--su));border-radius:20px;background:#d3efde;color:#658b7b;font-size:calc(22 * var(--su));font-weight:900;line-height:1.1}
.sell-art-layout .sale-item.active .crop-art{outline:calc(4 * var(--su)) solid #e9ae25;outline-offset:calc(2 * var(--su));border-radius:50%}
.sale-lock-badge{position:absolute;right:calc(11 * var(--su));top:calc(43 * var(--su));display:grid;place-items:center;width:calc(95 * var(--su));height:calc(34 * var(--su));padding-right:calc(28 * var(--su));z-index:2;background:url("../assets/ui-user/bag-lock.png") center / 100% 100% no-repeat;font-size:calc(18 * var(--su));line-height:1;color:#fff3c3;font-weight:900}.sale-locked .crop-art{opacity:.7}
.sell-art-layout .sale-detail{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:0 calc(45 * var(--su));min-height:0}
.sell-art-layout .sale-detail::before{inset:calc(150 * var(--su)) calc(8 * var(--su)) 0}
.sell-art-layout .sale-detail .shop-selected-preview{position:relative;inset:auto;width:100%;height:calc(210 * var(--su));margin:0;flex-shrink:0}
.sell-art-layout .sale-detail .detail-art{width:calc(240 * var(--su));height:calc(240 * var(--su));top:0}
.sale-selected-count{position:absolute;left:calc(28 * var(--su));top:calc(4 * var(--su));display:grid;place-items:center;width:calc(60 * var(--su));height:calc(60 * var(--su));border-radius:50%;background:#ffae0a;color:#876865;font-size:calc(38 * var(--su));font-weight:900;box-shadow:0 3px 7px #8b733926;z-index:2}
.sell-art-layout .sale-detail .detail-name{position:relative;inset:auto;transform:none;width:auto;height:auto;max-width:100%;min-height:0;margin:0 0 calc(6 * var(--su));padding:calc(8 * var(--su)) calc(25 * var(--su));font-size:calc(34 * var(--su));line-height:1.2;border-radius:40px}
.sale-selected-quality{position:relative;margin:0 0 calc(7 * var(--su));font-size:calc(21 * var(--su));font-weight:800;line-height:1.3;color:#658b7b;text-align:center;flex-shrink:0}
.sell-art-layout .sale-detail .detail-facts{position:relative;inset:auto;transform:none;width:100%;height:auto;min-height:calc(128 * var(--su));padding:0 calc(6 * var(--su));display:flex;flex:1;flex-direction:column;justify-content:space-around;gap:calc(5 * var(--su));font-size:calc(23 * var(--su))}
.sell-art-layout .sale-detail .detail-facts>div{min-height:0;padding:calc(5 * var(--su)) 0;gap:8px;border-bottom-width:calc(6 * var(--su))}.sell-art-layout .sale-detail .detail-facts strong{gap:calc(5 * var(--su))}.sell-art-layout .sale-detail .detail-facts .crop-icon{width:calc(28 * var(--su));height:calc(28 * var(--su))}
.sell-art-layout .sale-detail .detail-facts>div:last-child>span{padding-left:0}
.sale-lock-button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:44px;margin:calc(10 * var(--su)) 0 0;padding:6px 12px;border:1px solid #668b7b;border-radius:24px;background:#f6f5e2;color:#658b7b;font-size:calc(22 * var(--su));font-weight:800;flex-shrink:0}.sale-lock-button>.crop-icon{width:52px;height:22px}
.sale-checkout{position:relative;display:grid;gap:calc(10 * var(--su));width:100%;margin:calc(12 * var(--su)) 0 0;flex-shrink:0}
.sell-art-layout .sale-checkout .detail-total{position:relative;inset:auto;transform:none;display:flex;justify-content:space-between;align-items:center;width:100%;min-height:0;padding:calc(9 * var(--su)) calc(17 * var(--su));gap:9px;font-size:calc(26 * var(--su));line-height:1.2;border-radius:24px}
.sell-art-layout .sale-checkout .detail-total strong{font-size:calc(27 * var(--su));gap:calc(7 * var(--su))}.sell-art-layout .sale-checkout .detail-total .crop-icon{width:calc(30 * var(--su));height:calc(30 * var(--su))}
.sale-submit{width:100%;min-height:44px;padding:calc(10 * var(--su)) calc(18 * var(--su));border:0;border-radius:28px;font-size:calc(27 * var(--su));line-height:1.25;font-weight:900;box-shadow:0 3px 0 #446d58}.sale-submit:disabled{box-shadow:none}
.sell-art-layout .sale-detail .sale-status{position:relative;inset:auto;transform:none;width:100%;margin:calc(10 * var(--su)) 0 calc(8 * var(--su));font-size:calc(17 * var(--su));line-height:1.35;flex-shrink:0;text-align:center}
.sale-empty{grid-column:1/-1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;min-height:calc(350 * var(--su));padding:15px;color:#658b7b;text-align:center;line-height:1.8;font-size:calc(25 * var(--su))}.sale-empty>span{display:grid;place-items:center;width:calc(140 * var(--su));height:calc(140 * var(--su))}.sale-empty .crop-icon{width:100%;height:100%;mix-blend-mode:multiply}.sale-empty-detail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:100%;height:100%;min-height:230px;padding:20px;text-align:center;color:#658b7b}.sale-empty-detail h2{font-size:calc(35 * var(--su))}.sale-empty-detail p{font-size:calc(22 * var(--su));line-height:1.7}
@media(max-width:600px){
 .sale-list-title{top:18px;font-size:17px}.sell-art-layout .sale-list{grid-template-rows:none;grid-auto-rows:142px;max-height:370px;min-height:250px;padding-top:56px;padding-bottom:22px}.sell-art-layout .sale-item .shop-copy small{font-size:12px;margin-top:3px}.sell-art-layout .sale-item .shop-copy .sale-quality{font-size:11px}.sale-item-count{font-size:12px;padding:2px 4px;top:1px;right:0}.sale-lock-badge{width:22px;height:22px;top:27px;right:0}
 .sell-art-layout .sale-detail{padding:0 20px;min-height:480px}.sell-art-layout .sale-detail::before{inset:94px 0 0}.sell-art-layout .sale-detail .shop-selected-preview{height:145px}.sell-art-layout .sale-detail .detail-art{width:166px;height:166px}.sale-selected-count{left:22px;top:0;width:46px;height:46px;font-size:30px}.sell-art-layout .sale-detail .detail-name{font-size:24px;padding:8px 20px;margin-bottom:6px}.sale-selected-quality{font-size:14px;margin-bottom:8px}.sell-art-layout .sale-detail .detail-facts{min-height:114px;font-size:15px;gap:6px;padding:0 5px}.sell-art-layout .sale-detail .detail-facts>div{padding:5px 0;border-bottom-width:5px}.sell-art-layout .sale-detail .detail-facts .crop-icon{width:23px;height:23px}.sale-lock-button{font-size:15px;margin-top:10px}.sale-checkout{gap:9px;margin-top:12px}.sell-art-layout .sale-checkout .detail-total{font-size:20px;padding:8px 14px}.sell-art-layout .sale-checkout .detail-total strong{font-size:21px}.sell-art-layout .sale-checkout .detail-total .crop-icon{width:25px;height:25px}.sale-submit{font-size:20px;padding:10px 15px}.sell-art-layout .sale-detail .sale-status{font-size:12px;margin:10px 0 13px}.sale-empty{min-height:170px;font-size:15px;gap:8px}.sale-empty>span{width:80px;height:80px}.sale-empty-detail{min-height:180px;gap:13px}.sale-empty-detail h2{font-size:24px}.sale-empty-detail p{font-size:14px}
}
@media(min-width:601px) and (max-height:550px){
 .sell-art-layout .sale-list{grid-template-rows:none;grid-auto-rows:144px;max-height:385px;min-height:300px;padding-top:57px}.sale-list-title{top:18px;font-size:17px}.sell-art-layout .sale-item .shop-copy small{font-size:12px}.sell-art-layout .sale-item .shop-copy .sale-quality{font-size:11px}.sale-item-count{font-size:13px;right:0}.sale-lock-badge{width:22px;height:22px;top:29px;right:0}
 .sell-art-layout .sale-detail{min-height:480px;padding:0 10px}.sell-art-layout .sale-detail::before{inset:86px -5px 0}.sell-art-layout .sale-detail .shop-selected-preview{height:128px}.sell-art-layout .sale-detail .detail-art{width:145px;height:145px}.sale-selected-count{left:5px;width:42px;height:42px;font-size:28px}.sell-art-layout .sale-detail .detail-name{font-size:22px;padding:7px 18px}.sale-selected-quality{font-size:12px}.sell-art-layout .sale-detail .detail-facts{min-height:107px;font-size:13px;padding:0 4px;gap:5px}.sell-art-layout .sale-detail .detail-facts>div{padding:4px 0;border-bottom-width:4px}.sale-lock-button{font-size:14px;margin-top:9px}.sale-checkout{gap:8px;margin-top:10px}.sell-art-layout .sale-checkout .detail-total{font-size:18px;padding:8px 12px}.sell-art-layout .sale-checkout .detail-total strong{font-size:19px}.sale-submit{font-size:18px;padding:9px 14px}.sell-art-layout .sale-detail .sale-status{font-size:11px;margin:9px 0}.sale-empty{min-height:200px;font-size:15px}.sale-empty-detail h2{font-size:24px}.sale-empty-detail p{font-size:14px}
}
@media(max-width:600px),(max-height:550px){.sale-lock-badge{width:56px;height:21px;padding-right:18px;font-size:11px}}

/* Keep long quantity labels clear of the price; compact lists already repeat counts below the name. */
.sell-art-layout .sale-item-count{top:calc(108 * var(--su))}
@media(max-width:600px),(max-height:550px){.sell-art-layout .sale-item-count{display:none}}


/* Original stylesheet: ./src/ui-inventory.css */
/* Supplied backpack PNG pieces, with item data and actions kept in HTML. */
#panel-overlay:has(#game-window[data-panel="bag"]){z-index:40;justify-content:center;align-items:center;padding:12px 32px;background:#17332036;backdrop-filter:blur(2px)}
#game-window[data-panel="bag"]{--iu:min(.078125vw,.138889dvh,1.2px);position:relative;width:calc(1180 * var(--iu));height:calc(690 * var(--iu));max-width:94vw;max-height:96dvh;overflow:visible;border:0;border-radius:0;background:url("../assets/ui-user/bag-frame.png") center / 100% 100% no-repeat;box-shadow:none;color:#ad3929;font-weight:800}
#game-window[data-panel="bag"] .window-header{position:absolute;inset:0;margin:0;padding:0;min-height:0;height:0;border:0;pointer-events:none;z-index:5}
#game-window[data-panel="bag"] .window-header>div{position:absolute;left:calc(199 * var(--iu));top:calc(36 * var(--iu));width:calc(239 * var(--iu));height:calc(71 * var(--iu));justify-content:center}
#game-window[data-panel="bag"] #window-icon{display:none}
#game-window[data-panel="bag"] .window-header h1{color:#a83222;font-size:calc(60 * var(--iu));font-weight:900;letter-spacing:.12em;text-shadow:3px 0 #fff2bf,-3px 0 #fff2bf,0 3px #fff2bf,0 -3px #fff2bf;line-height:1}
#game-window[data-panel="bag"] #panel-close{position:absolute;right:calc(-15 * var(--iu));top:calc(161 * var(--iu));width:calc(122 * var(--iu));height:calc(86 * var(--iu));min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:url("../assets/ui-user/bag-close.png") right center / auto 100% no-repeat;font-size:0;pointer-events:auto}
#game-window[data-panel="bag"] #panel-content{overflow:auto;padding:calc(143 * var(--iu)) calc(117 * var(--iu)) calc(36 * var(--iu)) calc(123 * var(--iu));scrollbar-color:#f6a20e transparent;scrollbar-width:thin}
#game-window[data-panel="bag"] .window-footer{display:none}
.inventory-art-layout.inventory-layout{position:relative;display:grid;grid-template-columns:minmax(0,1.93fr) minmax(0,1fr);gap:calc(23 * var(--iu));height:100%;min-height:0;padding:calc(32 * var(--iu)) calc(23 * var(--iu)) calc(15 * var(--iu)) calc(62 * var(--iu));border-radius:calc(48 * var(--iu));background:#fff3bd;box-shadow:0 3px 3px #63381930;isolation:isolate}
.inventory-art-layout::before{position:absolute;content:"";inset:calc(32 * var(--iu)) calc(23 * var(--iu)) calc(23 * var(--iu)) calc(62 * var(--iu));background:url("../assets/ui-user/bag-list-detail.png") center / 100% 100% no-repeat;z-index:-1;pointer-events:none}
.inventory-categories{position:absolute;left:calc(-64 * var(--iu));top:calc(79 * var(--iu));display:grid;gap:calc(13 * var(--iu));z-index:-1}
.inventory-categories .bag-tab{width:calc(136 * var(--iu));height:calc(73 * var(--iu));padding:0;border:0;border-radius:0;background: url("../assets/ui-user/bag-tab-all-inactive.png") left center / auto 100% no-repeat}
.inventory-categories .bag-tab.active{margin-left:calc(-30 * var(--iu));width:calc(166 * var(--iu))}
.inventory-categories .bag-tab[data-filter="all"]{background-image:url("../assets/ui-user/bag-tab-all-inactive.png")}
.inventory-categories .bag-tab[data-filter="fruit"]{background-image:url("../assets/ui-user/bag-tab-crops-inactive.png")}
.inventory-categories .bag-tab[data-filter="seed"]{background-image:url("../assets/ui-user/bag-tab-seeds-inactive.png")}
.inventory-categories .bag-tab[data-filter="tool"]{background-image:url("../assets/ui-user/bag-tab-tools-inactive.png")}
.inventory-categories .bag-tab[data-filter="all"].active{background-image:url("../assets/ui-user/bag-tab-all.png")}
.inventory-categories .bag-tab[data-filter="fruit"].active{background-image:url("../assets/ui-user/bag-tab-crops.png")}
.inventory-categories .bag-tab[data-filter="seed"].active{background-image:url("../assets/ui-user/bag-tab-seeds.png")}
.inventory-categories .bag-tab[data-filter="tool"].active{background-image:url("../assets/ui-user/bag-tab-tools.png")}
.inventory-art-layout .inventory-main{min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:calc(22 * var(--iu)) calc(16 * var(--iu)) calc(6 * var(--iu))}
.inventory-art-layout .inventory-grid{min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:calc(170 * var(--iu));align-content:start;gap:calc(13 * var(--iu)) calc(14 * var(--iu));flex:1;overflow:auto;padding:calc(11 * var(--iu)) calc(7 * var(--iu)) 0;scrollbar-color:#f59b05 transparent;scrollbar-width:thin}
.inventory-art-layout .inventory-slot,.inventory-art-layout .inventory-slot.active{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:auto;gap:calc(3 * var(--iu));padding:calc(12 * var(--iu)) calc(2 * var(--iu)) calc(7 * var(--iu));border:0;border-radius:19px;background:none;box-shadow:none;color:#ad3929}
.inventory-art-layout .item-art{position:relative;width:calc(111 * var(--iu));height:calc(111 * var(--iu));max-width:100%;max-height:none;display:grid;place-items:center;flex-shrink:0;background:url("../assets/ui-user/bag-slot.png") center / contain no-repeat}
.inventory-art-layout .item-art>.crop-icon{width:96%;height:100%;object-fit:contain}
.inventory-art-layout .item-art,.inventory-art-layout .detail-art{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.inventory-art-layout .item-art>.crop-icon,.inventory-art-layout .detail-art>.crop-icon{min-width:0;min-height:0;max-width:100%;max-height:100%;justify-self:center;align-self:center}
.inventory-art-layout .inventory-slot.active .item-art{border-radius:50%;outline:calc(4 * var(--iu)) solid #f39d05;outline-offset:calc(2 * var(--iu))}
.inventory-item-name{display:block;width:100%;min-height:1.2em;font-size:calc(21 * var(--iu));line-height:1.2;font-weight:900;white-space:normal;text-align:center;text-shadow:1px 0 #ffefbb,-1px 0 #ffefbb,0 1px #ffefbb,0 -1px #ffefbb}
.inventory-art-layout .item-count{position:absolute;top:calc(11 * var(--iu));bottom:auto;right:0;padding:2px 4px;border-radius:12px;background:#fff0b9;color:#a74725;font-size:calc(14 * var(--iu));line-height:1.1;text-shadow:none;z-index:2}
.inventory-price{position:absolute;top:calc(15 * var(--iu));left:0;display:flex;align-items:center;justify-content:flex-end;width:calc(59 * var(--iu));height:calc(28 * var(--iu));padding:0 calc(5 * var(--iu)) 0 calc(24 * var(--iu));background:url("../assets/ui-user/bag-price.png") center / 100% 100% no-repeat;color:#426428;font-size:calc(14 * var(--iu));font-weight:900;line-height:1}
.inventory-art-layout .item-lock{position:absolute;left:calc(8 * var(--iu));top:auto;bottom:calc(36 * var(--iu));color:#b55824;font-size:calc(17 * var(--iu));background:#fff0b8;border-radius:50%;padding:3px}
.inventory-art-layout .inventory-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;min-height:calc(31 * var(--iu));margin:calc(5 * var(--iu)) 0 0;font-size:calc(12 * var(--iu));color:#9c552f}
.inventory-art-layout .inventory-footer button{width:auto;min-width:0;min-height:0;padding:calc(6 * var(--iu)) calc(12 * var(--iu));border:0;border-radius:18px;background:#fff1bb;color:#9c552f;font-size:calc(13 * var(--iu))}
.inventory-art-layout .inventory-detail{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;min-width:0;min-height:0;padding:0 calc(13 * var(--iu));border:0;background:none}
.inventory-selected-preview{position:relative;flex-shrink:0;width:100%;height:calc(153 * var(--iu));margin-top:calc(-20 * var(--iu))}
.inventory-art-layout .inventory-detail .detail-art{position:absolute;left:50%;top:0;transform:translateX(-50%);width:calc(190 * var(--iu));height:calc(190 * var(--iu));margin:0;background:url("../assets/ui-user/bag-preview.png") center / contain no-repeat}
.inventory-art-layout .inventory-detail .detail-art>.crop-icon{width:86%;height:86%;padding-bottom:calc(4 * var(--iu))}
.inventory-selected-count{position:absolute;top:calc(3 * var(--iu));left:calc(7 * var(--iu));z-index:2;display:grid;place-items:center;min-width:calc(45 * var(--iu));height:calc(45 * var(--iu));padding:0 calc(6 * var(--iu));border-radius:50%;background:#f99a00 url("../assets/ui-user/bag-count.png") center / 100% 100% no-repeat;color:#a86010;font-size:calc(29 * var(--iu));line-height:1;font-weight:900}
.inventory-step{position:absolute;top:calc(69 * var(--iu));width:calc(33 * var(--iu));height:calc(46 * var(--iu));min-height:32px;min-width:26px;padding:0;border:0;border-radius:0;background:url("../assets/ui-user/shop-arrow-left.png") center / contain no-repeat}
.inventory-step.previous{left:calc(-26 * var(--iu))}.inventory-step.next{right:calc(-26 * var(--iu));background-image:url("../assets/ui-user/shop-arrow-right.png")}
.inventory-art-layout .inventory-detail .detail-name{position:relative;z-index:2;min-width:calc(124 * var(--iu));max-width:100%;margin:0 0 calc(7 * var(--iu));padding:calc(10 * var(--iu)) calc(15 * var(--iu));border:0;border-radius:38px;background:url("../assets/ui-user/bag-title.png") center / 100% 100% no-repeat;color:#fff0b5;font-size:calc(29 * var(--iu));line-height:1.1;font-weight:900;text-align:center}
.inventory-art-layout .quality-tag{margin:0 0 calc(4 * var(--iu));padding:calc(3 * var(--iu)) calc(10 * var(--iu));border-radius:12px;background:#fff0bb;color:#a36739;font-size:calc(12 * var(--iu));line-height:1.2;max-width:100%;text-align:center}
.inventory-art-layout .detail-facts{width:100%;padding:0 calc(7 * var(--iu));margin:0;flex:1;display:flex;flex-direction:column;justify-content:space-around;font-size:calc(14 * var(--iu));color:#a75b30}
.inventory-art-layout .detail-facts>div{display:flex;justify-content:space-between;align-items:center;gap:5px;min-height:calc(30 * var(--iu));padding:calc(5 * var(--iu)) 0;border:0;border-bottom:calc(5 * var(--iu)) solid #fff1b7;border-radius:3px}
.inventory-art-layout .detail-facts span,.inventory-art-layout .detail-facts strong{color:#9e5c30;gap:3px}
.inventory-art-layout .detail-facts strong{font-size:inherit;white-space:normal;text-align:right}
.inventory-art-layout .detail-facts .crop-icon{width:calc(20 * var(--iu));height:calc(20 * var(--iu))}
.inventory-art-layout .detail-actions{display:flex;flex-direction:column;gap:calc(5 * var(--iu));width:100%;margin:calc(9 * var(--iu)) 0 0;flex-shrink:0}
.inventory-art-layout .detail-actions button{width:100%;min-height:calc(38 * var(--iu));padding:calc(8 * var(--iu)) calc(10 * var(--iu));border:0;border-radius:26px;background:#e35b46;color:#fff0b6;font-size:calc(18 * var(--iu));font-weight:900}
.inventory-art-layout .detail-actions .inventory-lock{min-height:calc(45 * var(--iu));padding-right:calc(40 * var(--iu));background:url("../assets/ui-user/bag-lock.png") center / 100% 100% no-repeat;letter-spacing:.08em}
.inventory-art-layout .detail-actions p{font-size:calc(10 * var(--iu));line-height:1.2;color:#9d683f}
.inventory-empty{grid-column:1/-1;align-self:center;padding:35px 15px;color:#9d683f;font-size:16px;text-align:center}
html[data-locale-layout="latin"] #game-window[data-panel="bag"] .window-header h1{font-size:calc(38 * var(--iu));letter-spacing:0}
html[data-locale-layout="latin"] .inventory-art-layout .inventory-item-name{font-size:calc(16 * var(--iu))}
html[data-locale-layout="latin"] .inventory-art-layout .inventory-detail .detail-name{font-size:calc(21 * var(--iu))}
html[data-locale-layout="latin"] .inventory-art-layout .detail-actions button{font-size:calc(14 * var(--iu))}
@media(max-width:600px){
  #panel-overlay:has(#game-window[data-panel="bag"]){padding:9px 8px;background:#193e2460}
  #game-window[data-panel="bag"]{--iu:1px;width:100%;max-width:100%;height:96dvh;max-height:96dvh;background-size:100% 100%}
  #game-window[data-panel="bag"] .window-header>div{left:62px;top:28px;width:110px;height:45px}
  #game-window[data-panel="bag"] .window-header h1{font-size:33px;letter-spacing:.05em}
  #game-window[data-panel="bag"] #panel-close{right:0;top:81px;width:66px;height:51px}
  #game-window[data-panel="bag"] #panel-content{position:absolute;top:111px;bottom:19px;left:0;right:0;padding:0 24px 0 44px}
  .inventory-art-layout.inventory-layout{height:auto;min-height:100%;display:flex;flex-direction:column;gap:14px;padding:18px 12px 17px 15px;border-radius:24px}
  .inventory-art-layout::before{display:none}
  .inventory-categories{left:-39px;top:31px;gap:10px}
  .inventory-categories .bag-tab{width:57px;height:53px;background-size:auto 100%}
  .inventory-categories .bag-tab.active{width:64px;margin-left:-7px}
  .inventory-art-layout .inventory-main{padding:9px 3px 9px;background:#ffda82;border-radius:27px;overflow:visible}
  .inventory-art-layout .inventory-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:120px;flex:none;max-height:390px;gap:5px 3px;padding:7px 5px;overflow:auto}
  .inventory-art-layout .inventory-slot,.inventory-art-layout .inventory-slot.active{padding:12px 0 5px;gap:3px}
  .inventory-art-layout .item-art{width:66px;height:66px;max-width:100%}
  .inventory-item-name{font-size:12px;line-height:1.2}
  .inventory-art-layout .item-count{top:3px;right:0;font-size:11px;padding:2px 3px}
  .inventory-price{top:15px;left:0;width:45px;height:21px;font-size:11px;padding-left:17px;padding-right:5px}
  .inventory-art-layout .item-lock{left:2px;bottom:25px;font-size:11px;padding:2px}
  .inventory-art-layout .inventory-footer{margin:5px 5px 0;font-size:11px;min-height:25px}
  .inventory-art-layout .inventory-footer button{padding:6px 8px;font-size:12px}
  .inventory-art-layout .inventory-detail{padding:0 17px 14px;gap:0;min-height:410px;background:linear-gradient(transparent 110px,#ffda82 110px);border-radius:30px}
  .inventory-selected-preview{height:140px;margin:0}
  .inventory-art-layout .inventory-detail .detail-art{width:155px;height:155px}
  .inventory-selected-count{left:0;top:0;width:41px;min-width:41px;height:41px;font-size:25px}
  .inventory-step{top:54px;width:31px;height:40px}
  .inventory-step.previous{left:-15px}.inventory-step.next{right:-15px}
  .inventory-art-layout .inventory-detail .detail-name{font-size:23px;min-width:100px;padding:9px 16px;margin:0 0 7px}
  .inventory-art-layout .quality-tag{font-size:12px;padding:4px 10px;margin-bottom:4px}
  .inventory-art-layout .detail-facts{font-size:13px;gap:7px;padding:0 4px;flex:1}
  .inventory-art-layout .detail-facts>div{min-height:29px;border-bottom-width:4px;padding:4px 0}
  .inventory-art-layout .detail-facts .crop-icon{width:20px;height:20px}
  .inventory-art-layout .detail-actions{gap:6px;margin-top:11px}
  .inventory-art-layout .detail-actions button{font-size:16px;min-height:39px;padding:8px 10px}
  .inventory-art-layout .detail-actions .inventory-lock{min-height:44px;padding-right:36px}
  .inventory-art-layout .detail-actions p{font-size:11px;line-height:1.3}
  html[data-locale-layout="latin"] #game-window[data-panel="bag"] .window-header h1{font-size:19px}
  html[data-locale-layout="latin"] .inventory-art-layout .inventory-item-name{font-size:11px}
  html[data-locale-layout="latin"] .inventory-art-layout .inventory-detail .detail-name{font-size:18px}
}
@media(min-width:601px) and (max-height:550px){
  #panel-overlay:has(#game-window[data-panel="bag"]){padding:4px 18px}
  #game-window[data-panel="bag"]{--iu:.72px;width:min(800px,95vw);height:97dvh;max-height:97dvh}
  #game-window[data-panel="bag"] #panel-content{padding:95px 67px 23px 77px}
  #game-window[data-panel="bag"] .window-header>div{top:17px;left:137px;width:157px;height:51px}
  #game-window[data-panel="bag"] #panel-close{top:108px;right:-8px;width:75px;height:57px}
  .inventory-art-layout.inventory-layout{height:auto;min-height:100%;padding:20px 15px 14px 39px;gap:16px}
  .inventory-art-layout::before{inset:20px 15px 14px 39px}
  .inventory-art-layout .inventory-grid{grid-auto-rows:121px;max-height:260px;overflow:auto;gap:8px 6px}
  .inventory-art-layout .inventory-main{padding:10px 5px 4px}
  .inventory-art-layout .inventory-item-name{font-size:14px}
  .inventory-art-layout .inventory-detail{min-height:303px;padding:0 7px}
  .inventory-art-layout .detail-facts{font-size:11px;padding:0 4px;gap:6px}
  .inventory-art-layout .detail-actions button{font-size:13px;min-height:30px}
  .inventory-art-layout .detail-actions p{font-size:10px}
  .inventory-art-layout .inventory-detail .detail-name{font-size:19px}
  .inventory-art-layout .quality-tag{font-size:10px}
  .inventory-art-layout .inventory-footer{font-size:10px}
  .inventory-art-layout .inventory-footer button{font-size:11px}
  html[data-locale-layout="latin"] .inventory-art-layout .inventory-item-name{font-size:12px}
}

#game-window[data-panel="equipment"]{width:min(760px,94vw);height:auto;max-height:92dvh;overflow:auto;background:#fffbea;border-radius:24px}
#game-window[data-panel="equipment"] .window-header{position:relative;display:flex;padding:16px 24px;align-items:center;justify-content:space-between}
#game-window[data-panel="equipment"] #panel-content{padding:16px 24px 28px;overflow:auto}
.equipment-layout{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.equipment-target{position:relative;display:flex;flex-direction:column;align-items:center;width:112px;gap:12px}
.equipment-target>.equipment-icon{width:100px;height:100px;border-radius:50%;background:#efbd65;display:grid;place-items:center}
.equipment-icon .crop-icon{width:80%;height:80%;object-fit:contain}
.equipment-target strong{white-space:nowrap;font-size:18px}
.equipment-layout p{margin:0;color:#668875}
.equipment-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;width:100%}
.equipment-slot{position:relative;aspect-ratio:1;min-width:0;min-height:0;padding:8px;display:grid;place-items:center;border:3px solid #57a879;border-radius:50%;background:#e9f3db}
.equipment-slot.active{border-color:#e5a53a;background:#ffedb5;box-shadow:0 0 0 3px #e5a53a44}
.equipment-slot .equipment-icon{display:grid;place-items:center;width:100%;height:100%}
.equipment-slot kbd{position:absolute;left:0;top:-5px;background:#fffbea;border-radius:50%;padding:2px 6px;font:700 16px system-ui}
.equipment-count{position:absolute;right:0;bottom:0;border-radius:12px;background:#fffbea;padding:1px 5px;color:#668875}
.equipment-target>.equipment-count{top:75px;bottom:auto}
.equipment-confirm{min-width:160px;min-height:44px}
@media(max-width:600px){.equipment-slots{gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));max-width:310px}.equipment-layout{gap:18px}#game-window[data-panel="equipment"] #panel-content{padding:12px 20px 24px}}
@media(max-height:550px){.equipment-layout{gap:10px}.equipment-target>.equipment-icon{width:64px;height:64px}.equipment-target>.equipment-count{top:40px}.equipment-slots{max-width:500px}.equipment-target{gap:4px}.equipment-slot{max-height:68px}#game-window[data-panel="equipment"] #panel-content{padding-top:6px}}

#panel-overlay:has(#game-window[data-panel="equipment"]){justify-content:center;align-items:center;padding:12px}
@media(max-height:550px){
 #panel-overlay:has(#game-window[data-panel="equipment"]){padding:8px}
 #game-window[data-panel="equipment"]{max-height:calc(100dvh - 16px)}
 #game-window[data-panel="equipment"] .window-header{padding:8px 16px}
 #game-window[data-panel="equipment"] .window-header h1{font-size:22px}
 #game-window[data-panel="equipment"] #panel-content{padding:6px 20px 10px}
 .equipment-layout{gap:7px}.equipment-layout p{font-size:12px}
 .equipment-target>.equipment-icon{width:48px;height:48px}.equipment-target>.equipment-count{top:32px}
 .equipment-target strong{font-size:14px}.equipment-slots{max-width:420px}
 .equipment-confirm{min-height:36px;padding:6px 24px}
}
/* Visible category names sit above the backpack frame. */
.inventory-categories{z-index:3}
.inventory-categories .bag-tab{display:flex;align-items:center;justify-content:flex-start;color:#7b4525}
.inventory-categories .bag-tab-label{display:block;width:calc(90 * var(--iu));padding:0 calc(5 * var(--iu));font-size:calc(23 * var(--iu));font-weight:900;line-height:1.2;text-align:center;text-shadow:0 1px #fff3c5;overflow-wrap:anywhere}
.inventory-categories .bag-tab.active .bag-tab-label{width:calc(120 * var(--iu));color:#963a20}
@media(max-width:600px){.inventory-categories .bag-tab-label,.inventory-categories .bag-tab.active .bag-tab-label{width:43px;padding:0 3px;font-size:14px}.inventory-categories .bag-tab.active .bag-tab-label{width:50px}}
.inventory-categories .bag-tab-label{margin-left:calc(58 * var(--iu));width:calc(74 * var(--iu));padding:0 calc(3 * var(--iu));font-size:clamp(11px,calc(21 * var(--iu)),25px)}
.inventory-categories .bag-tab.active .bag-tab-label{width:calc(104 * var(--iu))}
@media(max-width:600px){
 .inventory-categories .bag-tab[data-filter]{background-image:none;background-color:#edb500;border-radius:16px 0 0 16px}
 .inventory-categories .bag-tab[data-filter].active{background-color:#ffe3a0}
 .inventory-categories .bag-tab-label,.inventory-categories .bag-tab.active .bag-tab-label{margin-left:0;width:100%;padding:0 4px;font-size:14px}
}
/* Price chips size to their text; the coin keeps its own aspect ratio. */
.inventory-art-layout .inventory-price{width:max-content;min-width:calc(59 * var(--iu));max-width:none;white-space:nowrap;justify-content:flex-start;gap:calc(3 * var(--iu));padding:0 calc(7 * var(--iu)) 0 0;background:#ffd150;border-radius:999px;z-index:2}
.inventory-price>.crop-icon{width:calc(28 * var(--iu));height:calc(28 * var(--iu));object-fit:contain;flex-shrink:0}
@media(max-width:600px){.inventory-art-layout .inventory-price{min-width:45px;gap:3px;padding:0 6px 0 0}.inventory-price>.crop-icon{width:21px;height:21px}}
/* Inventory art variants and bottom-centred quantity overlays. */
.inventory-art-layout .item-art{isolation:isolate}
.inventory-art-layout .item-art>.crop-icon{position:relative;z-index:1}
.inventory-art-layout .inventory-slot[data-kind=fruit] .item-art>.crop-icon{scale:.8}
.inventory-art-layout .inventory-slot[data-giant=true] .item-art>.crop-icon{scale:1;animation:giant-item-breathe 2.6s ease-in-out infinite}
.inventory-art-layout .inventory-slot[data-exotic=true] .item-art::before{content:'';position:absolute;inset:-10%;z-index:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffdf7977 0deg 10deg,transparent 10deg 30deg),radial-gradient(circle,#c581ea88,transparent 70%);filter:blur(2px);animation:exotic-item-rays 12s linear infinite;pointer-events:none}
.inventory-art-layout .item-art .item-count{left:50%;right:auto;top:auto;bottom:0;transform:translateX(-50%);z-index:2;max-width:none;white-space:nowrap}
.inventory-art-layout .inventory-detail .detail-name{overflow-wrap:anywhere;white-space:normal;letter-spacing:0}
.inventory-art-layout .inventory-selected-count.compact-number{width:116px;min-width:0;max-width:100%;height:36px;padding:0 7px;border-radius:8px;font-size:16px;background-image:none}
@keyframes giant-item-breathe{0%,100%{scale:1}50%{scale:1.035}}
@keyframes exotic-item-rays{to{rotate:360deg}}
#seed-dock,#seed-dock *{-webkit-user-drag:none;user-select:none;touch-action:manipulation}
#seed-dock .slot-art,#seed-dock .seed-name{pointer-events:none}
@media(prefers-reduced-motion:reduce){.inventory-art-layout .inventory-slot .item-art>.crop-icon,.inventory-art-layout .inventory-slot .item-art::before{animation:none}}
.inventory-art-layout .potion-inventory-detail .inventory-selected-preview{height:calc(100 * var(--iu));margin-top:0}
.inventory-art-layout .potion-inventory-detail .detail-art{width:calc(100 * var(--iu));height:calc(100 * var(--iu))}
.inventory-art-layout .potion-inventory-detail{overflow:hidden}
.inventory-art-layout .potion-inventory-detail .detail-name,.inventory-art-layout .potion-inventory-detail .quality-tag{flex-shrink:0}
.inventory-art-layout .potion-inventory-detail .detail-facts{flex:1 1 0;min-height:0;justify-content:flex-start;gap:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable;padding:0 8px 0 2px}
.inventory-art-layout .potion-inventory-detail .detail-facts>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;min-height:30px;padding:7px 0;border-bottom-width:2px}
.inventory-art-layout .potion-inventory-detail .detail-name{font-size:calc(23 * var(--iu));padding:calc(7 * var(--iu)) calc(12 * var(--iu))}
.inventory-art-layout .potion-inventory-detail .detail-actions{position:static;background:transparent;padding:0;margin-top:10px}
.inventory-art-layout .potion-inventory-detail .detail-facts>div>:is(span,strong){display:block;min-width:0;font-size:16px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;letter-spacing:0}
.inventory-art-layout .inventory-detail .detail-facts>.inventory-special-effect{display:grid;grid-template-columns:minmax(0,1fr);gap:3px}
.inventory-art-layout .detail-facts>.inventory-special-effect>strong{text-align:left;justify-content:flex-start}
@media(max-width:600px){
 .inventory-art-layout .potion-inventory-detail{height:480px;min-height:0;flex:none}
}
@media(min-width:601px) and (max-height:550px){
 .inventory-art-layout.inventory-layout:has(.potion-inventory-detail){height:100%;min-height:0}
 .inventory-art-layout:has(.potion-inventory-detail) .inventory-grid{max-height:none}
 .inventory-art-layout .potion-inventory-detail{min-height:0}
 .inventory-art-layout .potion-inventory-detail .inventory-selected-preview{height:78px;margin-top:0}
 .inventory-art-layout .potion-inventory-detail .detail-art{width:78px;height:78px}
 .inventory-art-layout .potion-inventory-detail .detail-name{font-size:15px;padding:6px 12px}
 .inventory-art-layout .potion-inventory-detail .detail-facts{gap:0}
 .inventory-art-layout .potion-inventory-detail .detail-facts>div{min-height:20px;padding:2px 0;border-bottom-width:2px}
}

.inventory-art-layout .detail-actions:has(>button:nth-of-type(2)){flex-direction:row;flex-wrap:wrap}
.inventory-art-layout .detail-actions:has(>button:nth-of-type(2))>button{flex:1 1 0;width:auto;min-width:0}
.inventory-art-layout .detail-actions>p{flex-basis:100%}


/* Original stylesheet: ./src/ui-catalog.css */
/* The supplied two-page book remains a transparent overlay on the live garden. */
#panel-overlay:has(#game-window[data-panel="catalog"]){justify-content:center;align-items:center;padding:calc(70 * var(--h)) calc(35 * var(--h)) calc(132 * var(--h)) calc(70 * var(--h))}
#app:has(#game-window[data-panel="catalog"]) .game-hud,#app:has(#game-window[data-panel="catalog"]) .quest-board,#app:has(#game-window[data-panel="catalog"]) .game-actions,#app:has(#game-window[data-panel="catalog"]) .quickbar,#app:has(#game-window[data-panel="catalog"]) #movement-help{visibility:hidden}
#game-window[data-panel="catalog"]{position:relative;display:block;overflow:visible;width:calc(1120 * var(--h));height:calc(556 * var(--h));max-width:92vw;max-height:calc(100dvh - 195 * var(--h));border:0;border-radius:0;background:url("../assets/ui-user/book-frame.png") center / 100% 100% no-repeat;box-shadow:none;color:#aa3f2d}
#game-window[data-panel="catalog"] .window-header{position:absolute;inset:0;min-height:0;margin:0;padding:0;border:0;pointer-events:none;z-index:2}
#game-window[data-panel="catalog"] .window-header>div{position:absolute;left:calc(-87 * var(--h));top:calc(57 * var(--h));width:calc(145 * var(--h));height:calc(247 * var(--h));display:flex;align-items:center;justify-content:flex-start;gap:0;padding:calc(23 * var(--h));background:url("../assets/ui-user/catalog-tab.png") center / 100% 100% no-repeat}
#game-window[data-panel="catalog"] #window-icon{display:none}#game-window[data-panel="catalog"] #window-title{position:relative;z-index:1;width:1.1em;font-size:calc(58 * var(--h));font-weight:900;line-height:1.28;letter-spacing:0;color:#ad3527;text-shadow:2px 2px #ffefb3,-2px 2px #ffefb3,2px -2px #ffefb3,-2px -2px #ffefb3}
#game-window[data-panel="catalog"] #panel-close{position:absolute;right:calc(54 * var(--h));top:calc(-61 * var(--h));width:calc(111 * var(--h));height:calc(135 * var(--h));min-width:44px;min-height:44px;padding:0;border:0;border-radius:40px 40px 0 0;background:url("../assets/ui-user/catalog-close.png") center top / 100% auto no-repeat;color:transparent;font-size:0;pointer-events:auto}
#game-window[data-panel="catalog"] #panel-content{position:absolute;inset:calc(37 * var(--h)) calc(84 * var(--h)) calc(58 * var(--h)) calc(41 * var(--h));padding:0;overflow:visible;border:0;z-index:3}
#game-window[data-panel="catalog"] .window-footer{display:none}
.catalog-book{position:relative;display:grid;grid-template-columns:44% 44%;gap:12%;width:100%;height:100%;padding:calc(12 * var(--h)) calc(39 * var(--h)) calc(10 * var(--h));background:url("../assets/ui-user/book-pages.png") center / 100% 100% no-repeat}
.catalog-page{min-width:0;min-height:0}.catalog-left{padding:0 calc(30 * var(--h)) 0 calc(15 * var(--h))}.catalog-entries{height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));column-gap:calc(21 * var(--h));row-gap:calc(8 * var(--h))}
.catalog-seed-art{width:84%;height:100%;display:grid;place-items:center}.catalog-seed-art>.crop-icon{width:100%;height:100%}.catalog-entry-art .catalog-seed-art>.seed-icon,.catalog-preview .catalog-seed-art>.seed-icon{width:94%;height:100%;margin:0;transform:none}.catalog-preview .catalog-seed-art{width:88%;height:110%;transform:translateY(-3%)}
.catalog-entry{min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border:0;border-radius:50%;padding:0;background:none;box-shadow:none;overflow:visible}.catalog-entry-art{position:relative;display:grid;place-items:center;width:calc(126 * var(--h));max-width:100%;height:calc(121 * var(--h));max-height:calc(100% - 18 * var(--h));background:url("../assets/ui-user/catalog-item-bg.png") center / contain no-repeat}.catalog-entry-art .seed-icon{width:82%;height:100%;margin:0;transform:none}.catalog-entry-art .seed-icon>.crop-icon{width:66%;height:63%;margin-top:13%}.catalog-entry-art .seed-icon>.seed-packet-art{width:100%;height:100%;margin:0}.catalog-entry-art .seed-icon:has(>.seed-packet-art){width:92%;background:none}
.catalog-entry>strong{position:relative;z-index:1;margin-top:calc(-12 * var(--h));color:#ae3b2b;font-size:calc(23 * var(--h));font-weight:900;line-height:1.12;white-space:nowrap;text-shadow:2px 2px #ffe39d,-2px 2px #ffe39d,2px -2px #ffe39d,-2px -2px #ffe39d}.catalog-entry.active .catalog-entry-art{filter:drop-shadow(0 0 3px #faac0b)}.catalog-entry.active>strong{color:#8d3021;text-decoration:underline;text-decoration-color:#f5aa1f;text-decoration-thickness:3px;text-underline-offset:3px}
.catalog-right{position:relative;display:flex;flex-direction:column;align-items:center;padding:calc(3 * var(--h)) calc(8 * var(--h)) 0;gap:0;text-align:center}
.catalog-preview-row{width:100%;height:calc(174 * var(--h));min-height:0;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--h))}.catalog-preview{display:grid;place-items:center;flex-shrink:0;width:calc(187 * var(--h));height:calc(187 * var(--h));background:url("../assets/ui-user/catalog-preview.png") center / 100% 100% no-repeat}.catalog-preview .seed-icon{width:85%;height:100%;margin:0;transform:none}.catalog-preview .seed-icon>.crop-icon{width:65%;height:64%;margin-top:10%}.catalog-preview .seed-icon:has(>.seed-packet-art){background:none;width:100%}.catalog-preview .seed-icon>.seed-packet-art{width:100%;height:100%;margin:0}
.catalog-arrow{width:44px;height:calc(70 * var(--h));min-width:44px;min-height:44px;display:grid;place-items:center;border:0;border-radius:0;padding:0;background:none;box-shadow:none}.catalog-arrow>span{display:block;width:calc(25 * var(--h));height:calc(45 * var(--h));background:url("../assets/ui-user/catalog-arrow-left.png") center / contain no-repeat}.catalog-next>span{background-image:url("../assets/ui-user/catalog-arrow-right.png")}
.catalog-name{position:relative;z-index:1;display:grid;place-items:center;min-height:calc(71 * var(--h));width:calc(224 * var(--h));max-width:100%;margin:calc(-9 * var(--h)) 0 calc(11 * var(--h));padding:calc(10 * var(--h));background:url("../assets/ui-user/catalog-name.png") center / 100% 100% no-repeat;color:#fff3b4;font-size:calc(31 * var(--h));font-weight:900;line-height:1.2;white-space:nowrap}
.catalog-facts{width:86%;margin:0;display:grid;gap:calc(10 * var(--h));font-size:calc(19 * var(--h));font-weight:800;color:#9b5c36}.catalog-facts>div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:calc(35 * var(--h));padding:0 0 calc(7 * var(--h));border-bottom:calc(5 * var(--h)) solid #ffedb0;border-radius:4px}.catalog-facts dt{margin:0;text-align:left}.catalog-facts dd{display:flex;align-items:center;gap:calc(4 * var(--h));margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}.catalog-facts .crop-icon{width:calc(26 * var(--h));height:calc(26 * var(--h))}.catalog-harvest-rule{margin:calc(12 * var(--h)) 0 0;color:#a46d43;font-size:calc(14 * var(--h));line-height:1.4;font-weight:700}.catalog-page-count{margin-top:auto;padding-top:calc(6 * var(--h));color:#a46d43;font-size:calc(13 * var(--h));font-weight:700;line-height:1}
html[data-locale-layout="latin"] #game-window[data-panel="catalog"] #window-title{font-size:calc(28 * var(--h));writing-mode:vertical-rl;width:auto;text-shadow:none}html[data-locale-layout="latin"] .catalog-entry>strong{font-size:calc(16 * var(--h));white-space:normal}html[data-locale-layout="latin"] .catalog-name{font-size:calc(22 * var(--h));white-space:normal}html[data-locale-layout="latin"] .catalog-facts{font-size:calc(17 * var(--h))}
@media(max-width:760px) and (min-height:551px){
 #panel-overlay:has(#game-window[data-panel="catalog"]){padding:69px 12px 116px;align-items:stretch}#game-window[data-panel="catalog"]{width:100%;height:100%;max-width:100%;max-height:100%;background-size:200% 100%;background-position:left center}
 #game-window[data-panel="catalog"] .window-header>div{top:-42px;left:12px;width:140px;height:50px;padding:8px 16px;justify-content:center;background:#f8df98;border-radius:24px 24px 0 0}#game-window[data-panel="catalog"] #window-title,html[data-locale-layout="latin"] #game-window[data-panel="catalog"] #window-title{font-size:26px;width:auto;writing-mode:horizontal-tb;white-space:nowrap;line-height:1;text-shadow:none}#game-window[data-panel="catalog"] #panel-close{top:-43px;right:15px;width:51px;height:68px;background-size:100% auto}
 #game-window[data-panel="catalog"] #panel-content{inset:24px 17px 25px;padding:0 7px;overflow:auto;border-radius:12px;background:#ffd57f}.catalog-book{height:auto;min-height:100%;display:flex;flex-direction:column;padding:12px 3px 15px;background:none;gap:20px}.catalog-left{padding:0}.catalog-entries{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,112px);column-gap:7px;row-gap:9px}.catalog-entry-art{width:88px;height:91px;max-height:91px}.catalog-entry>strong{font-size:14px;white-space:nowrap;margin-top:-8px}.catalog-entry-art .seed-icon{width:76%}.catalog-right{padding:0 7px}.catalog-preview-row{height:153px;max-width:300px}.catalog-preview{width:159px;height:159px}.catalog-arrow{width:44px;height:60px}.catalog-arrow>span{width:24px;height:41px}.catalog-name{font-size:24px;min-height:60px;width:206px;margin:-5px 0 14px}.catalog-facts{font-size:16px;width:94%;gap:10px}.catalog-facts>div{min-height:37px;padding-bottom:7px;border-bottom-width:5px}.catalog-facts .crop-icon{width:25px;height:25px}.catalog-harvest-rule{font-size:13px;margin-top:13px}.catalog-page-count{font-size:12px;padding-top:12px}html[data-locale-layout="latin"] .catalog-entry>strong{font-size:12px}html[data-locale-layout="latin"] .catalog-name{font-size:21px}html[data-locale-layout="latin"] .catalog-facts{font-size:15px}
}
@media(max-height:550px){
 #panel-overlay:has(#game-window[data-panel="catalog"]){padding:34px 40px 83px 50px;align-items:stretch}#game-window[data-panel="catalog"]{width:100%;height:100%;max-width:900px;max-height:100%;min-height:180px}#game-window[data-panel="catalog"] .window-header>div{left:-35px;top:35px;width:61px;height:137px;padding:11px}#game-window[data-panel="catalog"] #window-title{font-size:28px;line-height:1.35}#game-window[data-panel="catalog"] #panel-close{top:-24px;right:28px;width:51px;height:69px}#game-window[data-panel="catalog"] #panel-content{inset:15px 34px 20px 20px;overflow:auto;background:#ffd47e;border-radius:12px}.catalog-book{min-height:292px;height:100%;padding:9px 19px;grid-template-columns:44% 44%;gap:12%}.catalog-left{padding:0 15px 0 2px}.catalog-entries{row-gap:6px;column-gap:13px}.catalog-entry-art{width:78px;height:78px;max-height:calc(100% - 11px)}.catalog-entry>strong{font-size:14px;margin-top:-8px}.catalog-preview-row{height:112px}.catalog-preview{width:117px;height:117px}.catalog-arrow{width:44px;height:50px}.catalog-arrow>span{width:18px;height:32px}.catalog-name{font-size:21px;min-height:44px;width:160px;margin:-5px 0 8px}.catalog-facts{font-size:13px;gap:5px;width:94%}.catalog-facts>div{min-height:29px;padding-bottom:4px;border-bottom-width:3px}.catalog-facts .crop-icon{width:20px;height:20px}.catalog-harvest-rule{font-size:11px;margin-top:7px}.catalog-page-count{font-size:11px;padding-top:4px}html[data-locale-layout="latin"] .catalog-entry>strong{font-size:12px}html[data-locale-layout="latin"] .catalog-name{font-size:17px}html[data-locale-layout="latin"] .catalog-facts{font-size:12px}
}
@media(max-height:550px) and (min-height:375px){
 .catalog-book{min-height:224px}.catalog-preview-row{height:82px}.catalog-preview{width:94px;height:94px}.catalog-name{min-height:35px;margin:0 0 6px;font-size:18px}.catalog-facts{gap:4px}.catalog-facts>div{min-height:26px;padding-bottom:3px}.catalog-harvest-rule{margin-top:5px;font-size:10px}.catalog-page-count{font-size:10px;padding-top:3px}.catalog-entry-art{height:67px}.catalog-entry>strong{font-size:13px}
}

/* Six crops per page, generated from the complete configuration. */
.catalog-left{display:flex;flex-direction:column;gap:6px}
.catalog-discovery-count{text-align:center;font-size:clamp(11px,1.7dvh,16px);margin:0;color:#8e6446;font-weight:700}
.catalog-entries{flex:1;min-height:0;height:auto}
.catalog-fruit-art{width:88%;height:88%;display:grid;place-items:center}
.catalog-fruit-art>.crop-icon{width:100%;height:100%;object-fit:contain}
.catalog-entry-art{max-height:calc(100% - 34px)}
.catalog-entry>strong{font-size:clamp(12px,2.2dvh,20px);margin-top:-7px}
.catalog-discovery{display:inline-block;font-size:clamp(10px,1.4dvh,12px);line-height:1.5;color:#98785c;border:1px solid #b88a5c66;border-radius:10px;padding:0 7px;margin-top:3px;background:#fff2c866}
.catalog-discovery.discovered{color:#42764e;background:#d7edb8;border-color:#6b995d88}
.catalog-pagination{display:flex;align-items:center;justify-content:center;gap:14px;flex-shrink:0;font-size:13px}
.catalog-pagination button{padding:0 12px;min-width:36px;min-height:30px;border:1px solid #a36c3d55;border-radius:9px;background:#fff0bb;color:#945d35;font-size:24px;line-height:1;box-shadow:none}
.catalog-description{font-size:clamp(11px,1.5dvh,14px);line-height:1.5;color:#986441;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:5px 0;width:90%}
.catalog-right>.catalog-discovery{margin-top:-4px}
.catalog-name{font-size:clamp(16px,3dvh,27px);white-space:normal;text-align:center}
.catalog-facts{gap:4px;font-size:clamp(11px,1.9dvh,17px)}
.catalog-facts>div{min-height:26px;padding-bottom:3px;border-bottom-width:3px}
@media(max-width:760px) and (min-height:551px){.catalog-entries{flex:none;grid-template-rows:repeat(2,135px)}.catalog-entry-art{height:94px;max-height:94px}.catalog-entry>strong{font-size:13px}.catalog-book{gap:16px}.catalog-description{font-size:13px}.catalog-facts{font-size:15px;gap:8px}.catalog-right>.catalog-discovery{margin-top:0}}
@media(max-height:550px){.catalog-entry-art{height:60px;max-height:calc(100% - 26px)}.catalog-entry>strong{font-size:12px}.catalog-left{gap:3px}.catalog-discovery-count{font-size:10px}.catalog-pagination{font-size:11px;gap:10px}.catalog-pagination button{min-height:24px;min-width:30px;font-size:20px}.catalog-description{font-size:10px;line-height:1.3;margin:3px 0}.catalog-facts{font-size:11px;gap:2px}.catalog-facts>div{min-height:21px}.catalog-name{font-size:18px;min-height:30px;margin-bottom:5px}.catalog-preview-row{height:76px}.catalog-preview{width:85px;height:85px}}

.catalog-illustration{display:grid;place-items:center;width:100%;height:100%;scale:.5}
.catalog-illustration>.crop-icon{width:100%;height:100%}
.catalog-illustration.undiscovered{filter:brightness(0);opacity:.8}

.catalog-illustration{translate:0 -25%}
.catalog-preview-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;justify-items:center}
.catalog-preview,.catalog-preview .catalog-fruit-art,.catalog-preview .catalog-illustration{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.catalog-preview .catalog-illustration{translate:none}
.catalog-preview .crop-icon{min-width:0;min-height:0;object-fit:contain}
.catalog-right>.catalog-description,.catalog-right>.catalog-facts{flex-shrink:0}
.catalog-right{overflow-y:auto}
@media(max-width:760px) and (min-height:551px){.catalog-right{overflow:visible;flex-shrink:0}}


/* Original stylesheet: ./src/potion-acquisition.css */
.potion-acquisition{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff8db;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;cursor:default;outline:none}
.potion-acquisition::backdrop{background:#08111bea;backdrop-filter:blur(6px);animation:acquisition-darken .35s ease-out both}
.potion-acquisition[data-ready=true]{cursor:pointer}
.acquisition-content{width:min(700px,100%);min-height:100%;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 24px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.acquisition-heading{color:#f2d78c;font-size:clamp(12px,1.8dvh,18px);letter-spacing:.35em;font-weight:700;animation:acquisition-reveal .4s .25s both}
.acquisition-art{position:relative;isolation:isolate;display:grid;place-items:center;width:clamp(130px,26dvh,260px);height:clamp(120px,23dvh,230px);flex:none}
.acquisition-rays{position:absolute;inset:-30%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffdc8b70 0deg 9deg,transparent 9deg 25deg);mask-image:radial-gradient(circle,#000 2%,#0009 30%,transparent 70%);animation:acquisition-ray-enter .5s .4s both,acquisition-rotate 16s linear infinite}
.acquisition-glow{position:absolute;inset:-5%;border-radius:50%;background:radial-gradient(circle,#fff4b795,#e6b34b30 35%,transparent 70%);animation:acquisition-ray-enter .5s .4s both,acquisition-glow 2.3s 1s ease-in-out infinite alternate}
.acquisition-bottle{position:relative;z-index:1;width:62%;height:88%;filter:drop-shadow(0 0 18px #ffe9a780);animation:acquisition-bottle .6s .35s cubic-bezier(.16,1.4,.3,1) both}
.acquisition-bottle>.crop-icon{width:100%;height:100%;object-fit:contain}
.acquisition-spark{position:absolute;left:calc(50% + sin(var(--i)*2.39996)*47%);top:calc(50% + cos(var(--i)*2.39996)*45%);width:4px;height:4px;border-radius:50%;background:#ffdf8f;box-shadow:0 0 12px #ffde88;opacity:0;animation:acquisition-spark 2.5s calc(.4s + var(--i)*.12s) infinite}
.acquisition-reveal{animation:acquisition-reveal .45s var(--delay) cubic-bezier(.22,1,.36,1) both}
.potion-acquisition h2{margin:0;color:#ffe8a6;font-size:clamp(26px,4.1dvh,40px);font-weight:900;line-height:1.2;text-shadow:0 2px 16px #e6b13b60}
.potion-acquisition .acquisition-description{max-width:580px;margin:0;color:#e4dfcb;font-size:clamp(13px,1.9dvh,17px);line-height:1.65;white-space:normal}
.acquisition-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px;margin-top:5px;text-align:left}
.acquisition-fact{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:10px 14px;border:1px solid #f7d88d35;border-radius:12px;background:linear-gradient(115deg,#fff5bd0e,#fff5bd04);font-size:clamp(12px,1.7dvh,16px);line-height:1.45}
.acquisition-fact>span{display:flex;align-items:center;gap:7px;color:#cccbbb;white-space:nowrap}
.acquisition-fact strong{font-weight:800;font-variant-numeric:tabular-nums;color:#fff1bb;text-align:right}
.acquisition-fact i{display:block;width:7px;height:7px;flex:none;border-radius:50%;background:#dfc78d;box-shadow:0 0 8px #dfc78d50}
.acquisition-fact[data-kind=damage] i{background:#ed7772}.acquisition-fact[data-kind=maintain] i{background:#77b9ed}.acquisition-fact[data-kind=improve] i{background:#82d5a5}.acquisition-fact[data-kind=breakthrough] i{background:#f6ce68}
.acquisition-fact[data-kind=level]{grid-column:1/-1;justify-content:center}
.acquisition-fact[data-kind=mutation],.acquisition-fact[data-kind=special]{grid-column:1/-1}
.acquisition-fact[data-kind=special] strong{max-width:76%;white-space:normal}
.potion-acquisition .acquisition-hint{min-height:22px;margin:7px 0 0;font-size:13px;line-height:1.5;color:#c9c3a8;white-space:normal}
.potion-acquisition[data-ready=true] .acquisition-hint{animation:acquisition-hint .35s both}
@keyframes acquisition-darken{from{background:#08111b00;backdrop-filter:blur(0)}to{background:#08111bea;backdrop-filter:blur(6px)}}
@keyframes acquisition-bottle{from{opacity:0;transform:translateY(35px) scale(.2) rotate(-12deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes acquisition-reveal{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes acquisition-ray-enter{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes acquisition-rotate{to{rotate:360deg}}
@keyframes acquisition-glow{from{opacity:.5;scale:.92}to{opacity:1;scale:1.12}}
@keyframes acquisition-spark{0%,100%{opacity:0;transform:translateY(15px) scale(.3)}35%{opacity:1}80%{opacity:0;transform:translateY(-26px) scale(1)}}
@keyframes acquisition-hint{from{opacity:0}to{opacity:1}}
@media(max-width:480px){.acquisition-content{padding-left:18px;padding-right:18px;gap:10px}.acquisition-fact{gap:8px;padding:9px 10px}.acquisition-facts{gap:7px}.acquisition-fact>span{gap:5px}.acquisition-fact[data-kind=special] strong{max-width:70%}}
@media(max-height:550px){.acquisition-content{width:min(700px,100%);gap:5px;padding:10px 24px}.acquisition-heading{font-size:11px}.acquisition-art{width:110px;height:78px}.potion-acquisition h2{font-size:23px}.potion-acquisition .acquisition-description{font-size:12px;line-height:1.4}.acquisition-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:2px}.acquisition-fact{padding:5px 8px;gap:6px;font-size:11px;border-radius:8px}.acquisition-fact[data-kind=level]{grid-column:1/-1;justify-content:center}.acquisition-fact[data-kind=mutation],.acquisition-fact[data-kind=special]{grid-column:span 2}.potion-acquisition .acquisition-hint{margin:2px 0 0;font-size:11px;min-height:17px}}
.potion-acquisition[data-reduced=true]::backdrop,.potion-acquisition[data-reduced=true] .acquisition-heading,.potion-acquisition[data-reduced=true] .acquisition-bottle{animation:none}
.potion-acquisition[data-reduced=true] .acquisition-rays,.potion-acquisition[data-reduced=true] .acquisition-glow,.potion-acquisition[data-reduced=true] .acquisition-spark{animation:none}
.potion-acquisition[data-reduced=true] .acquisition-reveal{animation-name:acquisition-hint;animation-duration:.1s}


/* Original stylesheet: ./src/main-quest.css */
#main-quest{position:fixed;left:50%;top:max(12px,2dvh);transform:translateX(-50%);z-index:31;display:flex;align-items:center;gap:14px;width:min(560px,46vw);min-height:104px;padding:12px 18px 12px 76px;border:2px solid #efe6b9;border-radius:28px;background:#fffdeeee;box-shadow:0 4px 16px #294a3025;text-align:left;color:#658875;cursor:default;transition:filter .15s}
#main-quest[hidden]{display:none}
#main-quest .main-quest-emblem{position:absolute;left:-10px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:78px;height:82px;border-radius:50%;background:#eec671;pointer-events:none}
#main-quest .main-quest-emblem>.crop-icon{width:76px;height:80px;object-fit:contain}
.main-quest-copy{display:grid;gap:5px;width:100%;min-width:0;pointer-events:none}
.main-quest-title{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:18px;line-height:1.2;font-weight:900;color:#6d8873}
.main-quest-title>span{font-size:14px;white-space:nowrap;color:#ad8536}
.main-quest-description{font-size:12px;line-height:1.4;font-weight:600;color:#7f897a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.main-quest-progress{display:block;width:100%;height:5px;overflow:hidden;border-radius:4px;background:#ccecdf}
.main-quest-progress>i{display:block;height:100%;border-radius:inherit;background:#79ac74;transition:width .25s}
.main-quest-rewards{display:flex;gap:10px;align-items:center;min-width:0;flex-wrap:wrap;font-size:13px;font-weight:800;color:#8e794d}
.main-quest-rewards>span{display:inline-flex;align-items:center;gap:4px}
.main-quest-rewards .crop-icon{width:22px;height:22px;object-fit:contain}
.main-quest-rewards>small{font-size:11px;color:#9b9c80}
#main-quest[data-ready=true]{cursor:pointer;border-color:#edc86b;background:#fff6d5;animation:main-quest-ready 1.8s ease-in-out infinite}
#main-quest[data-ready=true] .main-quest-title>span{padding:4px 9px;border-radius:20px;background:#e3b954;color:#fffdf1;font-size:13px}
#main-quest[data-ready=true] .main-quest-progress>i{background:#e4b852}
.main-quest-finished{font-size:18px;font-weight:900}
@keyframes main-quest-ready{0%,100%{scale:1;box-shadow:0 0 8px #ffd26635}50%{scale:1.035;box-shadow:0 0 24px #ffd26685}}
@media(max-width:600px){#main-quest{top:max(80px,9dvh);width:calc(100vw - 36px);min-height:96px;padding:10px 14px 10px 59px;border-radius:23px}#main-quest .main-quest-emblem{left:-6px;width:58px;height:64px}#main-quest .main-quest-emblem>.crop-icon{width:57px;height:61px}.main-quest-title{font-size:16px}.main-quest-title>span{font-size:12px}.main-quest-description{font-size:11px}.main-quest-rewards{font-size:12px}.main-quest-rewards .crop-icon{width:19px;height:19px}}
@media(min-width:601px) and (max-height:550px){#main-quest{top:6px;width:min(450px,52vw);min-height:76px;padding:8px 12px 8px 58px;border-radius:22px}#main-quest .main-quest-emblem{width:56px;height:61px;left:-5px}#main-quest .main-quest-emblem>.crop-icon{width:55px;height:58px}.main-quest-copy{gap:3px}.main-quest-title{font-size:15px}.main-quest-title>span{font-size:12px}.main-quest-description{font-size:10px;-webkit-line-clamp:1}.main-quest-rewards{font-size:11px}.main-quest-rewards .crop-icon{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){#main-quest[data-ready=true]{animation:none}}

/* Two rows: title/rewards/claim, then the task description. Keep the emblem inside. */
#main-quest{height:70px;min-height:70px;padding:8px 14px 8px 66px;gap:0}
#main-quest .main-quest-emblem{left:10px;width:46px;height:46px}
#main-quest .main-quest-emblem>.crop-icon{width:40px;height:40px;max-width:100%;max-height:100%}
.main-quest-copy{gap:5px}
.main-quest-title{min-width:0;font-size:16px;gap:8px}
.main-quest-title>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main-quest-title-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.main-quest-rewards{flex-wrap:nowrap;gap:6px;font-size:12px;white-space:nowrap}
.main-quest-rewards .crop-icon{width:19px;height:19px;flex-shrink:0}
.main-quest-claim{font-size:12px;white-space:nowrap;color:#ad8536}
#main-quest[data-ready=true] .main-quest-title>span{padding:0;border-radius:0;background:none;color:inherit;font-size:inherit}
#main-quest[data-ready=true] .main-quest-claim{padding:4px 8px;border-radius:16px;background:#e3b954;color:#fffdf1}
.main-quest-description{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}

@media(max-width:600px){
 #main-quest{left:14px;transform:none;width:calc(100vw - 94px);height:72px;min-height:72px;padding:7px 10px 7px 48px}
 #main-quest .main-quest-emblem{left:7px;width:34px;height:34px}
 #main-quest .main-quest-emblem>.crop-icon{width:30px;height:30px}
 .main-quest-title{font-size:13px;gap:4px}.main-quest-title-actions{gap:4px}.main-quest-claim,.main-quest-rewards{font-size:11px}
 .main-quest-copy{gap:3px}.main-quest-description{line-height:1.2}.main-quest-progress{height:4px}.main-quest-rewards{font-size:11px;gap:7px}.main-quest-rewards .crop-icon{width:17px;height:17px}
 #garden-record{top:200px;width:174px;min-width:0;min-height:0;padding:30px 6px 6px}
 #garden-record .quest-header{height:26px;width:160px;font-size:16px;letter-spacing:2px}
 #garden-record .quest-item,#garden-record .quest-reward{height:20px;margin-bottom:4px;padding:0 6px;font-size:11px;gap:4px}
 #garden-record .record-label{font-size:11px}
 #garden-record .quest-item strong,#garden-record .quest-reward strong{font-size:12px}
 #garden-record .record-best{padding:4px 6px;gap:2px;font-size:11px;line-height:1.2}
 #garden-record #record-best{font-size:11px;line-height:1.2}
}
@media(min-width:601px) and (max-height:550px){
 #main-quest{height:52px;min-height:52px;padding:5px 10px 5px 48px}
 #main-quest .main-quest-emblem{left:8px;width:32px;height:32px}
 #main-quest .main-quest-emblem>.crop-icon{width:28px;height:28px}
 .main-quest-copy{gap:2px}.main-quest-title{font-size:14px}
}

#main-quest::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(110deg,#fff9d6,#ffffff,#ffd969);box-shadow:0 0 38px #ffe888}
#main-quest.quest-complete-flash::after{animation:quest-complete-flash .7s cubic-bezier(.33,1,.68,1) both}
#main-quest[data-reduced=true]{animation:none}
@keyframes quest-complete-flash{0%{opacity:.95}100%{opacity:0}}

#main-quest{transform:none;translate:-50% 0;transform-origin:50% 50%}
@media(max-width:600px){#main-quest{translate:none}}

/* Left HUD stack: quest occupies the former garden-record position. */
:root{--left-hud-top:calc(124 * var(--h));--left-quest-height:126px}
#main-quest{left:8px;top:var(--left-hud-top);translate:none;transform:none;width:clamp(190px,23vw,300px);height:var(--left-quest-height);min-height:0;padding:12px 12px 12px 54px;border-radius:20px}
#main-quest .main-quest-emblem{left:8px;top:28px;width:36px;height:36px}
#main-quest .main-quest-emblem>.crop-icon{width:32px;height:32px}
#main-quest .main-quest-title{flex-direction:column;align-items:flex-start;gap:6px}
#main-quest .main-quest-title>strong{white-space:normal;font-size:16px;line-height:1.3}
#main-quest .main-quest-title-actions{flex-wrap:wrap;gap:6px}
#main-quest .main-quest-rewards{flex-wrap:wrap}
#main-quest .main-quest-description{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px}
#garden-record{top:calc(var(--left-hud-top) + var(--left-quest-height) + 12px)}
@media(min-width:761px) and (min-height:551px){:root{--left-hud-top:calc(124 * clamp(.5616px,min(.0609375vw,.10833342dvh),1.17px))}}
@media(max-width:600px) and (min-height:551px){:root{--left-hud-top:200px;--left-quest-height:128px}#main-quest{width:174px;padding:10px 9px 10px 38px;left:0}#main-quest .main-quest-emblem{left:5px;width:28px;height:28px}#main-quest .main-quest-emblem>.crop-icon{width:25px;height:25px}#main-quest .main-quest-title>strong{font-size:13px}#main-quest .main-quest-description{font-size:11px}}
@media(max-height:550px){:root{--left-hud-top:82px;--left-quest-height:70px}#main-quest{left:0;width:190px;padding:8px 8px 8px 40px}#main-quest .main-quest-emblem{left:5px;width:28px;height:28px}#main-quest .main-quest-title>strong{font-size:13px}#main-quest .main-quest-description{font-size:10px}#garden-record{width:190px;min-width:0;min-height:0;padding:30px 6px 6px}#garden-record .quest-header{height:26px;width:175px;font-size:16px;letter-spacing:2px}#garden-record .quest-item,#garden-record .quest-reward{height:20px;margin-bottom:4px;padding:0 6px;font-size:11px;gap:4px}#garden-record .record-label,#garden-record .record-best{font-size:11px}#garden-record .record-best{padding:4px 6px;gap:2px}#garden-record .quest-item strong,#garden-record .quest-reward strong{font-size:12px}}

@media(max-height:550px){#main-quest .main-quest-title{gap:3px}#main-quest .main-quest-copy{gap:3px}#garden-record{top:calc(var(--left-hud-top) + var(--left-quest-height) + 8px);padding-top:26px}#garden-record .quest-header{height:22px}#garden-record .record-best,#garden-record #record-best{font-size:11px;line-height:1.2}}

/* Compact three-row quest card; dimensions are 3/4 width and 2/3 height. */
:root{--left-quest-height:84px}
#main-quest{width:clamp(142.5px,17.25vw,225px);padding:5px 8px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:3px;border-radius:15px;cursor:default}
#main-quest .main-quest-title{display:flex;flex-direction:row;align-items:center;gap:5px;min-width:0}
#main-quest .main-quest-emblem{position:static;transform:none;flex-shrink:0;width:22px;height:22px;background:none}
#main-quest .main-quest-emblem>.crop-icon{width:22px;height:22px}
#main-quest .main-quest-title>strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#main-quest .main-quest-description{font-size:11px;line-height:1.2;margin:0;align-self:center}
.main-quest-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0}
#main-quest .main-quest-rewards{flex-wrap:nowrap;gap:3px;font-size:11px;min-width:0}
#main-quest .main-quest-rewards .crop-icon{width:16px;height:16px}
#main-quest .main-quest-claim{min-width:0;min-height:0;padding:3px 6px;border:0;border-radius:9px;background:#e3b954;color:#fffdf1;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer}
#main-quest .main-quest-claim:disabled{background:#d7d7cf;color:#92928a;opacity:1;cursor:default}
@media(max-width:600px) and (min-height:551px){:root{--left-quest-height:85.333px}#main-quest{width:130.5px;padding:4px 5px}#main-quest .main-quest-title>strong{font-size:12px}#main-quest .main-quest-description{font-size:10px}}
@media(max-height:550px){:root{--left-quest-height:46.667px}#main-quest{width:142.5px;padding:2px 5px;gap:0}#main-quest .main-quest-emblem,#main-quest .main-quest-emblem>.crop-icon{width:14px;height:14px}#main-quest .main-quest-title>strong{font-size:10px;line-height:1.1}#main-quest .main-quest-description{font-size:9px;line-height:1.1;-webkit-line-clamp:1}#main-quest .main-quest-rewards,#main-quest .main-quest-claim{font-size:9px}#main-quest .main-quest-claim{padding:1px 4px}#main-quest .main-quest-rewards .crop-icon{width:12px;height:12px}}

#main-quest .main-quest-title{justify-content:flex-start}

#main-quest[data-ready=true]{animation:main-quest-double-hop 2s ease-in-out infinite}
@keyframes main-quest-double-hop{0%,6%,12%,100%{transform:translateX(0)}3%,9%{transform:translateX(8px)}}
#main-quest[data-reduced=true]{animation:none}
@media(prefers-reduced-motion:reduce){#main-quest[data-ready=true]{animation:none}}


/* Original stylesheet: ./src/animation-preview.css */
.animation-preview-open :is(.game-hud,.quest-board,.quickbar,.game-actions,.station-marker,#touch-controls,#interact-button){visibility:hidden!important;pointer-events:none!important}
#animation-preview{position:fixed;z-index:100;right:24px;top:24px;width:320px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 48px);overflow:auto;padding:20px;background:rgba(22,32,39,.95);color:#f5f4e9;border:1px solid #9cccb65c;border-radius:20px;box-shadow:0 12px 48px #0005;font:14px/1.5 system-ui,sans-serif;backdrop-filter:blur(12px)}
#animation-preview[hidden]{display:none}
#animation-preview header{display:flex;justify-content:space-between;align-items:center}
#animation-preview h2{font-size:22px;margin:2px 0}
#animation-preview small,.animation-hint{color:#b4c7c7}
#animation-preview button{min-height:36px;background:#34454d;border:1px solid #78928c66;border-radius:9px;color:#f5f4e9;padding:6px 12px;cursor:pointer;font:inherit;box-shadow:none;transform:none}
#animation-preview button:hover{background:#48615e}
#animation-preview :focus-visible{outline:2px solid #ffd76f;outline-offset:3px}
.animation-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:16px 0}
#animation-preview .animation-list button{display:flex;justify-content:space-between;align-items:center;text-align:left;gap:6px}
#animation-preview .animation-list button:last-child:nth-child(odd){grid-column:1/-1}
#animation-preview .animation-list button small{white-space:nowrap;flex-shrink:0}
#animation-preview .animation-list button[aria-pressed=true]{background:#b8e6c8;color:#18362b;border-color:#d3f5df}
#animation-preview .animation-list button[aria-pressed=true] small{color:#456f5e}
#animation-preview footer{border-top:1px solid #ffffff26;padding-top:14px;display:grid;gap:12px}
.animation-transport{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.animation-transport label{margin-left:auto}
.animation-timeline{display:grid;grid-template-columns:1fr auto;gap:6px}
.animation-timeline input{grid-column:1/-1;grid-row:2;width:100%;accent-color:#b8e6c8}
.animation-timeline output{font-variant-numeric:tabular-nums;font-size:12px}
.animation-speed{display:flex;align-items:center;justify-content:space-between}
#animation-preview select{background:#34454d;color:#fff;border:1px solid #78928c66;border-radius:8px;padding:5px 12px}
#animation-source{overflow-wrap:anywhere}
@media(max-height:620px){#animation-preview{top:12px;right:12px;max-height:calc(100dvh - 24px);padding:12px;width:300px}.animation-list{margin:8px 0;gap:4px}#animation-preview .animation-list button{min-height:30px;padding:3px 8px}.animation-hint{margin:5px 0}#animation-preview footer{gap:6px;padding-top:8px}}
@media(max-width:520px){#animation-preview{width:260px;right:12px;top:12px;padding:14px}}


/* Original stylesheet: ./src/catalysis-mode.css */
.catalysis-mode :is(.quickbar,.game-actions,#touch-controls,#interact-button,.station-marker,.hud-system,.quest-board,#main-quest){visibility:hidden!important;pointer-events:none!important}
#catalysis-panel{position:fixed;right:2.5vw;top:50%;transform:translateY(-50%);width:340px;max-width:40vw;max-height:85dvh;overflow:auto;z-index:15;padding:22px;color:#f4f4df;background:linear-gradient(145deg,#18352ff5,#202735f5);border:2px solid #d4dfa088;border-radius:22px;box-shadow:0 16px 50px #0005;font:15px/1.5 system-ui,sans-serif;backdrop-filter:blur(10px)}
#catalysis-panel[hidden]{display:none}
#catalysis-panel{display:flex;flex-direction:column;overflow:hidden}
.catalysis-content{min-height:0;overflow:auto;padding-right:2px}
.catalysis-content,#catalysis-potions{scrollbar-width:thin;scrollbar-color:#b99b56 transparent}
.catalysis-content::-webkit-scrollbar,#catalysis-potions::-webkit-scrollbar{width:5px;height:5px}
.catalysis-content::-webkit-scrollbar-track,#catalysis-potions::-webkit-scrollbar-track{background:transparent}
.catalysis-content::-webkit-scrollbar-thumb,#catalysis-potions::-webkit-scrollbar-thumb{background:#b99b56;border-radius:3px}
.catalysis-content::-webkit-scrollbar-button,#catalysis-potions::-webkit-scrollbar-button{display:none}
.catalysis-actions,#catalysis-panel header{flex-shrink:0}
#catalysis-panel header{display:flex;align-items:center;justify-content:space-between;gap:10px}
#catalysis-panel h2{font-size:23px;margin:4px 0;color:#ffecb4}
#catalysis-panel header small{color:#addbc4}
#catalysis-panel button{cursor:pointer;border:1px solid #ecedc077;border-radius:12px;background:#ffffff13;color:#fff;min-height:36px;padding:7px 12px;font:inherit;box-shadow:none}
#catalysis-panel button:disabled{opacity:.45;cursor:default}
.catalysis-stage{margin:4px 0 16px;color:#b9ceb9}
.catalysis-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 18px}
.catalysis-stats>div{border-radius:12px;background:#ffffff0c;padding:12px;display:flex;flex-direction:column;gap:4px}
.catalysis-stats>div:last-child{grid-column:1/-1}
.catalysis-stats span{color:#c0cabb;font-size:14px}
.catalysis-stats strong{font-size:28px;color:#ffe8a3;transform-origin:center;align-self:flex-start}
.catalysis-stats small{font-size:12px;color:#98bea6}
.catalysis-growth,.catalysis-probability-bar{display:flex;height:12px;border-radius:6px;background:#101b1d;overflow:hidden;margin:8px 0}
.catalysis-growth i{background:#9cdda0}
.catalysis-history{padding-top:12px;font-size:16px;color:#ecd07c}
.catalysis-mutation{color:#b5cad3;font-size:13px}
.catalysis-probabilities p{margin:12px 0 6px;font-size:13px}
.catalysis-legend{display:grid;grid-template-columns:1fr 1fr;gap:5px;font-size:13px}
.catalysis-result{min-height:24px;color:#ffdf8c;margin:14px 0 6px;text-align:center}
#catalysis-panel .catalysis-cast{display:block;width:100%;background:#f9faec;color:#294b3a;font-weight:700;font-size:20px}
#catalysis-panel .catalysis-exit{width:100%;margin-top:8px;background:transparent;font-size:13px;color:#c0cbbd}
.catalysis-primary-actions{display:flex;gap:6px;min-width:0}
#catalysis-panel .catalysis-primary-actions>button{flex:1 1 0;min-width:0;white-space:normal;overflow-wrap:anywhere}
#catalysis-panel .catalysis-harvest{background:#f0d487;color:#294b3a;font-size:16px;font-weight:700}
#catalysis-panel[data-mature=true] .catalysis-cast{font-size:16px;line-height:1.2}
#catalysis-panel .catalysis-cast:disabled{opacity:.55}
.catalysis-natural{margin:8px 0;padding-top:6px;border-top:1px solid #809b884d;font-size:13px;line-height:1.4}
.catalysis-natural strong,.catalysis-natural small{display:block}
.catalysis-natural strong{color:var(--card-accent,#ffdf8c)}
.catalysis-natural small{margin-top:2px;color:var(--card-muted,#c0cbbd);font-size:12px}
@media(max-height:620px){#catalysis-panel{padding:12px;max-height:94dvh;right:12px;width:310px;font-size:13px}.catalysis-stats{margin:8px 0;grid-template-columns:1fr 1fr 1fr;gap:6px}.catalysis-stats>div{padding:6px}.catalysis-stats>div:last-child{grid-column:auto}.catalysis-stats strong{font-size:22px}.catalysis-stage{margin:0}.catalysis-history{padding-top:5px}.catalysis-result{margin:5px 0}.catalysis-mutation{margin:5px 0}}
@media(max-width:600px) and (min-height:621px){#catalysis-panel{top:auto;bottom:12px;right:12px;transform:none;width:calc(100vw - 24px);max-width:none;max-height:48dvh;padding:12px}.catalysis-stats{grid-template-columns:1fr 1fr 1fr;gap:6px;margin:6px 0}.catalysis-stats>div{padding:6px}.catalysis-stats>div:last-child{grid-column:auto}.catalysis-stats strong{font-size:22px}.catalysis-stage{margin:0}.catalysis-history{padding-top:4px}}

.sowing-active .quickbar{pointer-events:none}

/* Crop-bound readouts: yield, larger estimate, level. */
#catalysis-scene-cards{position:fixed;z-index:14;display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:8px;align-items:center;width:min(370px,94vw);transform:translateX(-50%);pointer-events:none}
#catalysis-scene-cards[hidden]{display:none}
#catalysis-panel,#catalysis-scene-cards{--card-bg:linear-gradient(145deg,#fffbeaF5,#f1eddbF5);--card-ink:#66522d;--card-line:#dfb454;--card-accent:#8d621a;--card-muted:#84775e}
#catalysis-panel[data-exotic=true],#catalysis-scene-cards[data-exotic=true]{--card-bg:linear-gradient(145deg,#15233ef5,#291b3ef5);--card-ink:#e5f6ff;--card-line:#a3efff;--card-accent:#ffe8a3;--card-muted:#b8c2df}
#catalysis-panel{background:var(--card-bg);color:var(--card-ink);border-color:var(--card-line);isolation:isolate}
#catalysis-panel h2,#catalysis-panel .catalysis-history,#catalysis-panel .catalysis-result{color:var(--card-accent)}
#catalysis-panel :is(header small,.catalysis-stage,.catalysis-mutation,.catalysis-exit){color:var(--card-muted)}
#catalysis-panel button{color:var(--card-ink);border-color:var(--card-line)}
#catalysis-panel .catalysis-probability-bar{overflow:visible;isolation:isolate}
.catalysis-probability-bar>i{display:block;position:relative;transform-origin:center;min-height:12px;flex-shrink:0}
.catalysis-probability-bar>i:first-child{border-radius:6px 0 0 6px}.catalysis-probability-bar>i:last-child{border-radius:0 6px 6px 0}
.catalysis-stat-card{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:77px;padding:8px 5px;border:2px solid var(--card-line);border-radius:14px;background:var(--card-bg);color:var(--card-ink);box-shadow:0 3px 12px #0003;font:13px/1.3 "Microsoft YaHei",sans-serif}
.catalysis-stat-card[data-card=value]{min-height:96px}
.catalysis-stat-card>strong{font-size:27px;color:var(--card-accent);transform-origin:center;white-space:nowrap}
.catalysis-stat-card[data-card=value]>strong{font-size:30px}
.catalysis-stat-card>small{font-size:10px;text-align:center;color:var(--card-muted)}
.card-brownian{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;border-radius:inherit}
.card-brownian[hidden]{display:none}
@media(max-height:620px){#catalysis-scene-cards{width:min(260px,94vw);gap:5px}.catalysis-stat-card{min-height:58px;padding:5px 3px;font-size:11px}.catalysis-stat-card[data-card=value]{min-height:74px}.catalysis-stat-card>strong{font-size:20px}.catalysis-stat-card[data-card=value]>strong{font-size:23px}.catalysis-stat-card>small{font-size:9px}}
@media(max-width:600px) and (min-height:621px){#catalysis-panel{max-height:43dvh}.catalysis-stat-card{min-height:65px}.catalysis-stat-card[data-card=value]{min-height:82px}}
@media(max-width:600px),(max-height:620px){
 #catalysis-panel{padding:10px}
 #catalysis-panel h2{font-size:20px;margin:0}
 #catalysis-panel header small{font-size:11px}
 #catalysis-panel .catalysis-stage{font-size:12px;line-height:1.3;margin:0}
 #catalysis-panel .catalysis-history{font-size:14px;padding-top:3px}
 #catalysis-panel .catalysis-mutation{font-size:11px;margin:3px 0}
 #catalysis-panel .catalysis-probabilities p{margin:5px 0 3px;font-size:11px}
 #catalysis-panel .catalysis-legend{font-size:11px;gap:2px}
 #catalysis-panel .catalysis-growth,#catalysis-panel .catalysis-probability-bar{margin:5px 0}
 #catalysis-panel .catalysis-result{margin:3px 0;min-height:18px;font-size:12px}
 #catalysis-panel .catalysis-cast{font-size:18px;min-height:34px;padding:4px 8px}
 #catalysis-panel .catalysis-exit{min-height:28px;margin-top:4px;padding:3px 8px;font-size:11px}
}

.catalysis-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
#catalysis-panel .catalysis-heading .catalysis-stage{margin:0;white-space:nowrap;font-size:13px}
.catalysis-mutation{display:flex;align-items:center;gap:6px}.catalysis-mutation[hidden]{display:none}.catalysis-mutation>.crop-icon{width:30px;height:30px;object-fit:contain}
.stat-heading{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-width:0;white-space:normal;text-align:center;line-height:1.3}.stat-heading>.crop-icon{width:20px;height:20px;object-fit:contain;flex:none}
.stat-heading>.stat-label{min-width:0;overflow-wrap:anywhere}
#catalysis-scene-cards{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);align-items:stretch}
#catalysis-scene-cards .catalysis-stat-card{box-sizing:border-box;display:grid;grid-template-rows:minmax(2.6em,auto) auto 19px;justify-items:center;padding:10px 8px;overflow-wrap:anywhere}
#catalysis-scene-cards .stat-heading{align-self:center}
#catalysis-scene-cards .yield-range{box-sizing:border-box;flex:none}
.yield-range{position:relative;display:flex;justify-content:space-between;align-items:center;width:calc(100% - 8px);height:19px;padding:0 4px;border-radius:7px;background:#d2b46455;color:var(--card-ink);font-size:10px}
.yield-pointer{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--card-accent);box-shadow:0 0 3px var(--card-line);translate:-50% 0;transform-origin:center;transition:left .3s cubic-bezier(.33,1,.68,1)}
@media(prefers-reduced-motion:reduce){.yield-pointer{transition:none}}

.catalysis-potion-description{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.catalysis-potion-description>strong{color:#bc6817;font-weight:800}
#catalysis-panel[data-exotic=true] .catalysis-potion-description>strong{color:#ffdb65}
#catalysis-potions{position:fixed;z-index:16;display:flex;flex-direction:column;gap:6px;width:64px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:3px}
#catalysis-potions[hidden]{display:none}
#catalysis-potions button{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:3px;width:56px;min-height:64px;border:2px solid #c8b986;border-radius:12px;background:#fff9e9;color:#675531;padding:4px;box-shadow:0 2px 6px #0003;font-size:10px;cursor:pointer}
#catalysis-potions button[aria-pressed=true]{border-color:#ff961e;background:#fff0c5;box-shadow:0 0 8px #ffc45488}
#catalysis-potions .crop-icon{width:36px;height:36px;object-fit:contain}
@media(max-width:600px) and (min-height:621px){#catalysis-panel{width:calc(100vw - 92px)}}

#catalysis-idle-hand{position:fixed;z-index:35;font:44px/1 sans-serif;pointer-events:none;filter:drop-shadow(0 3px 3px #49332188);animation:trade-guide-tap 1.2s ease-in-out infinite}
#catalysis-idle-hand[hidden]{display:none}
body[data-reduced-motion=true] #catalysis-idle-hand{animation:none}


/* Original stylesheet: ./src/rarity.css */
/* Shared configuration-driven presentation for seeds and harvested fruit. */
[data-rarity="1"]{--rarity-slot:#fffdf8;--rarity-ink:#826a67;--rarity-glow:transparent}
[data-rarity="2"]{--rarity-slot:#dcefff;--rarity-ink:#25649d;--rarity-glow:#559bea}
[data-rarity="3"]{--rarity-slot:#edddfa;--rarity-ink:#79449a;--rarity-glow:#ab6be4}
[data-rarity="4"]{--rarity-slot:#fff0bc;--rarity-ink:#9f7100;--rarity-glow:#f2bd30;--name-a:#9f7100;--name-b:#bc4a1d;--name-c:#a66008}
[data-rarity="5"]{--rarity-slot:#ffdeda;--rarity-ink:#ae293e;--rarity-glow:#ee5c65;--name-a:#af2438;--name-b:#b13c7e;--name-c:#c53d56}
[data-rarity="6"]{--rarity-slot:#fbe0ed;--rarity-ink:#a52d79;--rarity-glow:#40bdda;--name-a:#a92b5a;--name-b:#976400;--name-c:#237a48}
:is(.inventory-art-layout,.shop-art-layout,#seed-dock,.equipment-layout,#catalysis-potions) :is(.item-art,.crop-art,.slot-art,.detail-art,.equipment-icon,.potion-slot-art)[data-rarity]{
 background:radial-gradient(circle closest-side,color-mix(in srgb,var(--rarity-center),var(--rarity-slot) 0%) 0%,color-mix(in srgb,var(--rarity-center),var(--rarity-slot) 0.1%) 10%,color-mix(in srgb,var(--rarity-center),var(--rarity-slot) 0.8%) 20%,color-mix(in srgb,var(--rarity-center),var(--rarity-slot) 2.7%) 30%,color-mix(in srgb,var(--rarity-center),var(--rarity-slot) 6.4%) 40%,color-mix(in srgb,var(--rarity-center),var(--rarity-slot) 12.5%) 50%,color-mix(in srgb,var(--rarity-center),var(--rarity-slot) 21.6%) 60%,color-mix(in srgb,var(--rarity-center),var(--rarity-slot) 34.3%) 70%,color-mix(in srgb,var(--rarity-center),var(--rarity-slot) 51.2%) 80%,color-mix(in srgb,var(--rarity-center),var(--rarity-slot) 72.9%) 90%,color-mix(in srgb,var(--rarity-center),var(--rarity-slot) 100%) 100%)!important;border-radius:50%;isolation:isolate;overflow:visible;
}
.equipment-icon[data-rarity]{position:relative}
:is(.item-art,.crop-art,.slot-art,.detail-art,.equipment-icon,.potion-slot-art)[data-rarity]>.crop-icon{position:relative;z-index:1}
:is(.item-art,.crop-art,.slot-art,.detail-art,.equipment-icon,.potion-slot-art)[data-rarity]>.rarity-glow{
 position:absolute;inset:-10%;border-radius:50%;z-index:0;pointer-events:none;
 background:radial-gradient(ellipse,var(--rarity-glow),transparent 68%);opacity:.6;animation:rarity-breathe 2.8s ease-in-out infinite;
}
:is(.item-art,.crop-art,.slot-art,.detail-art,.equipment-icon,.potion-slot-art):is([data-rarity="4"],[data-rarity="5"],[data-rarity="6"])>.rarity-glow{
 background:repeating-conic-gradient(from 0deg,var(--rarity-glow) 0deg 17deg,transparent 18deg 36deg);
 mask-image:radial-gradient(circle,#000 5%,#0008 40%,transparent 70%);
 animation:rarity-rays 14s linear infinite,rarity-breathe 2.8s ease-in-out infinite;opacity:.8;
}
/* Rarity replaces the old exotic-only backlight; giant scale breathing remains. */
.inventory-art-layout .inventory-slot .item-art[data-rarity]::before{content:none}
.buy-art-layout .shop-item[data-category=exotic] .crop-art[data-rarity]{filter:none}
.rarity-name[data-rarity]{color:var(--rarity-ink);text-shadow:none;position:relative;z-index:2}
@keyframes rarity-rays{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){.rarity-glow{animation:none!important}}
body[data-reduced-motion=true] .rarity-glow{animation:none!important}

:is(.inventory-art-layout,.shop-art-layout) .detail-name[data-rarity]{background:var(--rarity-slot);text-shadow:none}

/* Fresnel-style slots: preserve hue and soften saturation toward the centre. */
[data-rarity="1"]{--rarity-slot:hsl(15 12% 96%);--rarity-center:hsl(15 6% 99%)}
[data-rarity="2"]{--rarity-slot:hsl(210 80% 86%);--rarity-center:hsl(210 40% 86%)}
[data-rarity="3"]{--rarity-slot:hsl(275 70% 86%);--rarity-center:hsl(275 35% 86%)}
[data-rarity="4"]{--rarity-slot:hsl(42 80% 20%);--rarity-center:hsl(42 40% 40%);--name-a:hsl(55.472 90% 52%);--name-b:hsl(4.151 85% 60%);--name-c:hsl(37.024 90% 55%)}
[data-rarity="5"]{--rarity-slot:hsl(355 65% 22%);--rarity-center:hsl(355 32.5% 44%);--name-a:hsl(3.973 80% 62%);--name-b:hsl(313.547 75% 66%);--name-c:hsl(359.181 80% 64%)}
[data-rarity="6"]{--rarity-slot:hsl(325 65% 24%);--rarity-center:hsl(325 32.5% 48%)}
.rarity-name[data-rarity]{paint-order:stroke fill;-webkit-text-stroke:2px #fff8e7;text-shadow:0 1px 1px #fff8e7}
.rarity-name:is([data-rarity="4"],[data-rarity="5"],[data-rarity="6"]){-webkit-text-stroke:2px #2e1b30;text-shadow:0 1px 2px #201321}
@keyframes rarity-breathe{0%,100%{scale:.96;opacity:.55}50%{scale:1.06;opacity:.8}}

:is(.shop-art-layout,.inventory-art-layout) .detail-facts>div>:is(span,strong),.catalog-facts>div>:is(dt,dd){font-size:1.5em;line-height:1.3}
:is(.shop-art-layout,.inventory-art-layout) .detail-facts>div{min-width:0;flex-shrink:0}
:is(.shop-art-layout,.inventory-art-layout) .detail-facts>div>strong{overflow-wrap:anywhere;min-width:0}
:is(.shop-art-layout,.inventory-art-layout) .detail-facts{overflow:auto}

[data-rarity="4"]{--rarity-ink:#ffe91a;--name-a:hsl(55.472 100% 56%);--name-b:hsl(4.151 100% 65%);--name-c:hsl(37.024 100% 59%)}
[data-rarity="5"]{--rarity-ink:#ff536b;--name-a:hsl(3.973 100% 66%);--name-b:hsl(313.547 100% 68%);--name-c:hsl(359.181 100% 65%)}
[data-rarity="6"]{--rarity-ink:#ff66cd}

.rarity-name:is([data-rarity="4"],[data-rarity="5"],[data-rarity="6"]){-webkit-text-stroke:0;text-shadow:none}

/* Saturated rim, quickly fading to a pale centre via the cubic radial stops. */
[data-rarity="4"]{--rarity-slot:hsl(42 100% 52%);--rarity-center:hsl(42 35% 96%)}
[data-rarity="5"]{--rarity-slot:hsl(355 100% 59%);--rarity-center:hsl(355 35% 96%)}
[data-rarity="6"]{--rarity-slot:hsl(325 100% 65%);--rarity-center:hsl(325 35% 96%)}
.rarity-name:is([data-rarity="4"],[data-rarity="5"],[data-rarity="6"]){-webkit-text-stroke:1px #2e1b30;text-shadow:none}

/* One static color band preserves rarity cues in every locale without glyph animations. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .rarity-name:is([data-rarity="4"],[data-rarity="5"],[data-rarity="6"]){background-image:linear-gradient(110deg,var(--name-a),var(--name-b) 50%,var(--name-c));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
 .rarity-name[data-rarity="6"]{background-image:linear-gradient(110deg,#ff5497,#ff9a38 17%,#ffe83b 33%,#4dff91 50%,#4dceff 67%,#c987ff 84%,#ff5497)}
}
@media(forced-colors:active){.rarity-name[data-rarity]{background:none;color:CanvasText;-webkit-text-fill-color:currentColor;-webkit-text-stroke:0}}

.potion-slot-art{position:relative;display:grid;place-items:center;width:40px;height:40px;isolation:isolate}
#catalysis-potions .rarity-name{-webkit-text-stroke-width:1px;font-weight:800}


/* Original stylesheet: ./src/ui-settings.css */
/* A cream notice board with a warm timber rim and leafy green controls. */
body[data-settings-open=true] :is(.game-hud,#garden-record,.quickbar,.game-actions,#touch-controls,#interact-button,#camera-zoom-control,.station-marker,#sowing-label){display:none!important}
#panel-overlay:has(#game-window[data-panel=settings]){justify-content:center;align-items:center;padding:20px;background:#20392d66;backdrop-filter:blur(5px);z-index:45}
#game-window[data-panel=settings]{width:min(620px,100%);height:auto;max-width:100%;max-height:calc(100dvh - 40px);border:8px solid #b97e4e;border-radius:30px;background:linear-gradient(135deg,#fff9e5,#f5eccf);box-shadow:0 8px 0 #805539,0 24px 70px #142c3355,inset 0 0 0 2px #ead7a4;color:#65513b}
#game-window[data-panel=settings] .window-header{position:relative;min-height:78px;margin:0;padding:16px 24px;border:0;border-bottom:2px dashed #c9d4a8;background:#e5edce;border-radius:20px 20px 0 0;flex-shrink:0}
#game-window[data-panel=settings] .window-header h1{font-size:28px;color:#476b48;letter-spacing:3px}
#game-window[data-panel=settings] #window-icon{width:38px;height:38px}
#game-window[data-panel=settings] #panel-close{width:40px;height:40px;min-width:40px;min-height:40px;border:2px solid #d7b784;border-radius:50%;background:#fff9e6;color:#90613d;box-shadow:0 3px 0 #b39163;font-size:28px;line-height:1}
#game-window[data-panel=settings] #panel-content{padding:20px 24px;overflow-y:auto;min-height:0;scrollbar-color:#a9ba85 #f5edda}
#game-window[data-panel=settings] .window-footer{display:none}
.farm-settings{display:grid;gap:14px}
.settings-card{padding:16px 18px;border:1px solid #e3d6b4;border-radius:18px;background:#fffcf0;box-shadow:0 3px 0 #e6d9b455}
.settings-welcome{position:relative;padding-left:82px;background:#eef4df}
.settings-sprout{position:absolute;left:18px;top:22px;width:48px;height:48px;display:grid;place-items:center}
.settings-sprout .crop-icon{width:100%;height:100%}
.farm-settings .button-row{display:flex;gap:12px;margin:0}
.farm-settings button{min-height:44px;border:1px solid #81a27a;border-radius:13px;background:#dcebc9;color:#436341;font-size:16px;font-weight:800;padding:10px 16px;box-shadow:0 3px 0 #a6bd8c}
.farm-settings .button-row>button{flex:1}
.farm-settings button:hover{background:#cee2b7;filter:brightness(1.03)}
.farm-settings .setting-row{margin:0;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.farm-settings .setting-row+.setting-row{border-top:1px dashed #d8dfc4}
.farm-settings .setting-row label{font-size:16px;font-weight:800;color:#5a7048}
.farm-settings select{width:170px;max-width:55%;min-height:44px;border:1px solid #bbcca3;border-radius:12px;background:#f2f7e8;color:#466443;padding:8px 12px;font-size:16px}
.farm-settings .panel-intro,.farm-settings .note-box{margin:12px 0 0;padding:0;border:0;background:none;color:#8a785d;font-size:13px;line-height:1.6}
.farm-settings .settings-recovery{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.settings-recovery .panel-intro{grid-column:1/-1;grid-row:2;margin:0}
.farm-settings .danger{background:#f6ddd0;color:#a15342;border-color:#ddb59c;box-shadow:0 3px 0 #d6ad96}
.farm-settings .danger:hover{background:#f1cbbb}
.farm-settings .settings-caption{margin:0;text-align:center;font-size:12px;line-height:1.5;color:#9a8b70}
@media(max-width:600px){
 #panel-overlay:has(#game-window[data-panel=settings]){padding:14px}
 #game-window[data-panel=settings]{max-height:calc(100dvh - 28px);border-width:6px;border-radius:24px}
 #game-window[data-panel=settings] .window-header{min-height:65px;padding:12px 16px}
 #game-window[data-panel=settings] #panel-content{padding:14px}
 .settings-card{padding:12px}.settings-welcome{padding-left:12px}.settings-sprout{display:none}
 .farm-settings button{font-size:14px;padding:10px 8px}.farm-settings .setting-row label,.farm-settings select{font-size:14px}
}
@media(max-height:550px){
 #panel-overlay:has(#game-window[data-panel=settings]){padding:12px}
 #game-window[data-panel=settings]{max-height:calc(100dvh - 24px)}
 #game-window[data-panel=settings] .window-header{min-height:60px;padding:9px 20px}
}


/* Original stylesheet: ./src/story-guide.css */
#story-guide,#story-dialog{color:#4a5a3a;font:14px/1.55 "Microsoft YaHei",system-ui,sans-serif;letter-spacing:0;isolation:isolate}
#story-guide{position:fixed;z-index:46;top:104px;left:16px;width:322px;padding:28px 23px 18px;border:0;background:none;box-shadow:none;filter:drop-shadow(0 7px 9px #253f382e)}
#story-guide::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-style:solid;border-color:transparent;border-image:url('../assets/ui/quest-board.png') 52 72 32 72 fill / 32px 42px 22px stretch}
#story-guide header{display:flex;align-items:center;gap:6px;min-height:49px}
.story-guide-avatar{width:48px;height:52px;flex-shrink:0;overflow:hidden;border-radius:50%;background:url('../assets/ui-user/goal-icon-bg.png') center/100% 100% no-repeat;filter:drop-shadow(0 2px 1px #695c3430)}
.story-guide-avatar>.story-ahe-mini{width:48px;height:71px;object-fit:cover;object-position:center top}
.story-guide-kicker{font-size:13px;font-weight:800;color:#567248;flex:1;min-width:0;line-height:1.5}
.story-guide-kicker b{display:block;color:#ad6849;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
#story-guide header button{width:29px;height:29px;min-width:29px;padding:5px;border:0;background:url('../assets/ui-user/system-button.png') center/contain no-repeat;box-shadow:none;border-radius:50%;font-size:20px;color:#648464;line-height:1;flex-shrink:0}
#story-guide header button img{width:21px;height:21px}
#story-guide h2{font-size:17px;line-height:1.45;margin:9px 0 6px;color:#486744}
#story-guide p{font-size:13px;line-height:1.7;color:#6b644d}
#story-guide small{display:block;margin-top:9px;color:#a76147;font-size:12px;line-height:1.6}
#story-guide footer{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:10px}
#story-guide-primary,.story-primary{min-height:42px;padding:9px 18px;background:url('../assets/ui/button-primary.png') center/100% 100% no-repeat;color:#fff9d7;border:0;border-radius:0;box-shadow:none;font-size:13px;text-shadow:0 1px 1px #254427;filter:drop-shadow(0 3px 2px #273a2b22)}
#story-guide-primary:hover,.story-primary:hover{filter:brightness(1.1) drop-shadow(0 4px 3px #273a2b33)}
#story-guide .story-skip{margin-left:auto;padding:5px 0;min-height:30px;background:none;border:0;box-shadow:none;color:#8c826a;font-size:11px;white-space:nowrap}
.story-steps{display:flex;gap:5px;margin-top:10px;padding:0 1px}.story-steps i{flex:1;height:6px;border-radius:3px;background:url('../assets/ui-user/goal-progress-empty.png') center/100% 100%;box-shadow:inset 0 1px 2px #657a4833;overflow:hidden}
.story-steps i[data-complete=true]{background-image:url('../assets/ui-user/goal-progress-filled.png')}
body[data-story-guide=true] :is(#main-quest,#garden-record){display:none!important}
body[data-story-guide=true] #garden-hint{visibility:hidden}
#story-guide[data-collapsed=true]{width:248px;padding:14px 20px 10px}
#story-guide[data-collapsed=true]::before{border-image:url('../assets/ui/hud-pill.png') 34 70 fill / 16px 32px stretch}
#story-guide[data-collapsed=true] :is(.story-guide-copy,footer,.story-steps){display:none}
#story-guide[data-collapsed=true] .story-guide-avatar{width:32px;height:34px}#story-guide[data-collapsed=true] .story-ahe-mini{width:32px;height:47px}
#story-guide[data-collapsed=true] header{min-height:34px}.story-target{outline:3px solid #ffdf71!important;outline-offset:5px}
#story-world-marker{position:fixed;z-index:21;pointer-events:none;translate:-50% -100%;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 3px 3px #25493666)}
#story-world-marker span{padding:7px 20px;background:url('../assets/ui/button-primary.png') center/100% 100% no-repeat;color:#fff9cf;font-size:13px;font-weight:800;white-space:nowrap;text-shadow:0 1px 1px #1e5229}
#story-world-marker b{display:block;width:30px;height:28px;margin-top:3px;font-size:0;background:url('../assets/ui-user/catalog-arrow-right.png') center/19px 27px no-repeat;rotate:90deg;animation:story-point 1.25s ease-in-out infinite}
#story-world-marker::after{content:"";position:absolute;bottom:-12px;left:50%;width:76px;height:23px;border:2px solid #ffe89b;border-radius:50%;translate:-50% 0;box-shadow:0 0 9px #ffd75d66;animation:story-ground-ring 1.7s ease-out infinite;z-index:-1}
@keyframes story-ground-ring{0%{scale:.65;opacity:.9}100%{scale:1.35;opacity:0}}
@keyframes story-point{50%{translate:0 8px;filter:brightness(1.2)}}
#story-dialog{width:min(800px,calc(100vw - 32px));max-width:800px;max-height:calc(100dvh - 32px);margin:auto;padding:22px 28px 18px;border:0;background:none;box-shadow:none;overflow:hidden;filter:drop-shadow(0 18px 28px #153a393b)}
#story-dialog::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-style:solid;border-color:transparent;border-image:url('../assets/ui/panel.png') 38 fill / 30px stretch}
#story-dialog::backdrop{background:#143e3d80;backdrop-filter:blur(3px)}
#story-dialog[open]{display:flex;flex-direction:column}
#story-dialog>header,#story-dialog>footer,.story-letter-pages{flex-shrink:0}
#story-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 1px 7px;color:#fff6cf;font-size:15px;font-weight:800}
#story-dialog>header>span{display:grid;place-items:center;min-width:135px;min-height:42px;padding:8px 20px;background:url('../assets/ui-user/catalog-name.png') center/100% 100% no-repeat;text-shadow:0 1px 1px #8c3c2a55}
#story-dialog>header button{width:38px;height:38px;min-width:38px;padding:0;border:0;border-radius:50%;font-size:0;background:url('../assets/ui-user/shop-close.png') center/17px 17px no-repeat,url('../assets/ui-user/shop-close-circle.png') center/100% 100% no-repeat;box-shadow:0 2px 0 #bd8142;flex-shrink:0}
.story-letter-layout{display:grid;grid-template-columns:224px minmax(0,1fr);gap:30px;padding:14px 8px 8px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c6a870 transparent}
.story-letter-art{position:relative;display:flex;flex-direction:column;align-items:center;align-self:center;margin:0;padding-top:8px;min-width:0}
.story-letter-art>.story-ahe{width:100%;height:auto;max-height:300px;object-fit:contain;filter:drop-shadow(0 5px 3px #65533122)}
.story-ahe-name{position:relative;margin-top:-3px;min-width:96px;padding:5px 18px;text-align:center;background:url('../assets/ui/button-secondary.png') center/100% 100% no-repeat;font-size:16px;font-weight:800;color:#627d4d}
.story-letter-keepsake{position:absolute;right:-4px;bottom:34px;width:65px;height:65px;background:url('../assets/ui-user/system-button.png') center/100% 100% no-repeat;rotate:8deg;filter:drop-shadow(0 3px 2px #715e3b33)}
.story-letter-keepsake>.crop-icon{width:100%;height:100%;padding:8px;object-fit:contain}
.story-letter-subtitle{color:#b06d4c;font-size:12px}.story-letter-layout h2{font-size:26px;line-height:1.4;margin:8px 0 16px;color:#4f6c43}
#story-letter-title:focus{outline:none}
.story-letter-body p{font-size:14px;line-height:1.9;margin-bottom:13px;color:#6b6048;overflow-wrap:anywhere}
.story-letter-signature{text-align:right;margin-top:16px;font-size:13px;color:#77845e}
.story-letter-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:12px 6px 8px}
.story-letter-pages button{width:32px;height:34px;min-width:32px;padding:0;border:0;border-radius:0;background:url('../assets/ui/button-secondary.png') center/100% 100% no-repeat;color:#819065;font-size:12px;box-shadow:none}
.story-letter-pages button[aria-current=true]{background-image:url('../assets/ui/button-primary.png');color:#fff6cc;filter:drop-shadow(0 2px 1px #53612c44)}
#story-dialog>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 4px 0;border:0;background:none}
.story-letter-count{color:#8b8064;font-size:12px}#story-dialog .story-primary{font-size:14px;min-height:45px;padding:10px 24px;white-space:nowrap}
.story-settings-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.story-settings-buttons button{font-size:14px}
#story-guide[data-panel=true]{top:7px;left:50%;translate:-50% 0;width:min(790px,calc(100% - 24px));padding:9px 22px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 18px}
#story-guide[data-panel=true]::before{border-image:url('../assets/ui/panel.png') 38 fill / 20px stretch}
#story-guide[data-panel=true] header{grid-column:1/-1;min-height:28px;height:28px}
#story-guide[data-panel=true] .story-guide-avatar{width:28px;height:30px}#story-guide[data-panel=true] .story-ahe-mini{width:28px;height:41px}
#story-guide[data-panel=true] .story-guide-kicker b{display:inline;margin-left:7px}
#story-guide[data-panel=true] h2{font-size:14px;margin:2px 0}#story-guide[data-panel=true] p{font-size:12px;line-height:1.5}
#story-guide[data-panel=true] small,#story-guide[data-panel=true] .story-steps{display:none}
#story-guide[data-panel=true] footer{margin:0;align-self:center;flex-direction:column;gap:0}
#story-guide[data-panel=true] #story-guide-primary{min-height:32px;padding:5px 12px}
body[data-story-panel=true] #panel-overlay{top:126px;bottom:0;height:calc(100% - 126px);padding-top:0;padding-bottom:0}
body[data-story-panel=true] #game-window{max-height:100%}
body[data-story-panel=true] #game-window[data-panel=shop]{--su:min(.0520833333vw,calc((100dvh - 126px)/1080))}
body[data-story-panel=true] #game-window[data-panel=bag]{--iu:min(.078125vw,calc((100dvh - 126px)/720),1.2px)}
@media(max-width:600px){
 #story-guide{top:84px;left:7px;width:calc(100% - 82px);max-width:310px;padding:25px 20px 17px}
 #story-guide header{min-height:40px;gap:4px}.story-guide-avatar{width:40px;height:44px}.story-guide-avatar>.story-ahe-mini{width:40px;height:59px}.story-guide-kicker{font-size:12px}
 #story-guide h2{font-size:15px;margin-top:6px}#story-guide p{font-size:12px}#story-guide small{font-size:11px;margin-top:6px}#story-guide footer{margin-top:6px}#story-guide-primary{min-height:37px;padding:8px 12px}
 #story-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);padding:17px 19px 18px}
 #story-dialog>header{min-height:38px;padding-bottom:5px}#story-dialog>header>span{min-width:112px;min-height:35px;font-size:14px}#story-dialog>header button{width:34px;height:34px;min-width:34px}
 .story-letter-layout{display:block;padding:6px 4px 4px}
 .story-letter-art{float:left;width:90px;margin:0 14px 5px 0;padding:0}.story-letter-art>.story-ahe{width:90px;max-height:119px}.story-ahe-name{min-width:64px;padding:4px 12px;font-size:12px}
 .story-letter-keepsake{width:38px;height:38px;bottom:21px;right:-5px}.story-letter-keepsake>.crop-icon{padding:4px}
 .story-letter-subtitle{font-size:11px}.story-letter-layout h2{font-size:21px;margin:7px 0 14px}.story-letter-body p{font-size:13px;line-height:1.85}.story-letter-signature{clear:both;margin-top:10px}
 #story-dialog>footer{padding:8px 2px 0;gap:8px}.story-letter-count{font-size:11px}#story-dialog .story-primary{font-size:12px;padding:9px 15px;min-height:40px}.story-letter-pages{padding:8px 3px 4px;gap:5px}
 #story-guide[data-panel=true]{top:4px;width:calc(100% - 12px);max-width:none;grid-template-columns:minmax(0,1fr) auto;gap:0 7px;padding:9px 16px 12px}
 #story-guide[data-panel=true] p{font-size:11px}#story-guide[data-panel=true] h2{font-size:13px}#story-guide[data-panel=true] #story-guide-primary{font-size:11px;padding:5px 10px;max-width:100px}
 body[data-story-panel=true] #game-window[data-panel=shop]{--su:1px}body[data-story-panel=true] #game-window[data-panel=bag]{--iu:1px}
}
@media(max-height:550px){
 #story-guide{top:69px;left:7px;width:255px;padding:23px 19px 14px}#story-guide header{min-height:31px}.story-guide-avatar{width:32px;height:34px}.story-guide-avatar>.story-ahe-mini{width:32px;height:47px}.story-guide-kicker{font-size:11px}.story-guide-kicker b{font-size:10px;display:inline;margin-left:4px}
 #story-guide h2{font-size:14px;margin:5px 0}#story-guide p{font-size:11px;line-height:1.5}#story-guide small{font-size:10px;margin-top:5px}#story-guide footer{margin-top:5px}.story-steps{margin-top:6px}#story-guide-primary{min-height:31px;padding:5px 12px;font-size:12px}
 #story-dialog{width:min(720px,calc(100vw - 28px));padding:14px 24px 14px;max-height:calc(100dvh - 24px)}
 #story-dialog>header{min-height:33px;padding-bottom:4px}#story-dialog>header>span{min-height:31px;min-width:120px;padding:5px 18px;font-size:13px}#story-dialog>header button{width:30px;height:30px;min-width:30px}
 .story-letter-layout{display:grid;grid-template-columns:130px minmax(0,1fr);padding:7px 6px 5px;gap:24px}.story-letter-art{float:none;width:auto;margin:0;align-self:start}.story-letter-art>.story-ahe{width:130px;max-height:178px}.story-ahe-name{font-size:12px;padding:3px 14px}.story-letter-keepsake{width:42px;height:42px;bottom:25px;right:0}
 .story-letter-layout h2{font-size:21px;margin:4px 0 10px}.story-letter-body p{font-size:13px;line-height:1.7;margin-bottom:10px}.story-letter-signature{margin-top:8px}#story-dialog>footer{padding-top:6px}#story-dialog .story-primary{min-height:36px;font-size:13px;padding:7px 18px}.story-letter-pages{padding:5px 4px 2px}.story-letter-pages button{height:27px;width:28px;min-width:28px}
 #story-guide[data-panel=true]{top:2px;padding:9px 18px;width:min(740px,calc(100% - 24px))}#story-guide[data-panel=true] header{display:none}
 body[data-story-panel=true] #panel-overlay{top:84px;height:calc(100% - 84px)}body[data-story-panel=true] #game-window[data-panel=shop]{--su:.72px}
}
body[data-reduced-motion=true] #story-world-marker b,body[data-reduced-motion=true] #story-world-marker::after{animation:none}
#story-guide[data-panel=true][data-collapsed=true] header{display:flex}
#story-guide :is(button,a):focus-visible,#story-dialog button:focus-visible{outline:3px solid #cf8b29;outline-offset:2px}
@media(prefers-reduced-motion:reduce){#story-world-marker b,#story-world-marker::after{animation:none}}


/* Original stylesheet: ./src/story-guide-feedback.css */
#story-feedback-pointer,#story-feedback-banner,.story-feedback-particles{position:fixed;pointer-events:none;user-select:none;letter-spacing:0}
#story-feedback-pointer[hidden],#story-feedback-banner[hidden]{display:none!important}
#story-feedback-pointer{z-index:47;width:42px;height:42px;filter:drop-shadow(0 2px 2px #402b2a44);--pointer-angle:90deg;--pointer-x:0px;--pointer-y:5px}
#story-feedback-pointer img{display:block;width:100%;height:100%;object-fit:contain;transform:rotate(var(--pointer-angle));animation:story-feedback-point 1.15s ease-in-out infinite}
#story-feedback-pointer[data-direction=up]{--pointer-angle:-90deg;--pointer-y:-5px}
#story-feedback-pointer[data-direction=right]{--pointer-angle:0deg;--pointer-x:5px;--pointer-y:0px}
#story-feedback-pointer[data-direction=left]{--pointer-angle:180deg;--pointer-x:-5px;--pointer-y:0px}
#story-feedback-banner{z-index:48;display:flex;align-items:center;gap:12px;min-height:80px;width:max-content;max-width:calc(100vw - 24px);padding:14px 30px 14px 20px;color:#345b37;background:url('../assets/ui/hud-pill.png') center/100% 100% no-repeat;filter:drop-shadow(0 5px 8px #213c3c2e);font-family:"Microsoft YaHei",system-ui,sans-serif;transform-origin:center;box-sizing:border-box}
.story-feedback-seal{display:grid;place-items:center;flex:none;width:48px;height:48px;background:url('../assets/ui-user/goal-icon-bg.png') center/contain no-repeat}
.story-feedback-seal>.crop-icon{display:block;width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 1px #5a463520)}
.story-feedback-content{min-width:0;text-align:left}
#story-feedback-banner strong{display:block;font-size:18px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.story-feedback-rewards{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.story-feedback-rewards:empty{display:none}
.story-feedback-reward{display:flex;align-items:center;gap:3px;min-height:28px}
.story-feedback-reward>.crop-icon{width:27px;height:27px;object-fit:contain;flex:none}
.story-feedback-reward>b{font-size:15px;line-height:1.2;color:#8e5527;font-variant-numeric:tabular-nums;white-space:nowrap}
#story-feedback-banner[data-kind=claim]{min-height:106px;min-width:270px;padding:17px 38px 17px 22px;gap:15px}
#story-feedback-banner[data-kind=claim] .story-feedback-seal{width:64px;height:64px}
#story-feedback-banner[data-kind=claim] .story-feedback-seal>.crop-icon{width:72px;height:72px}
#story-feedback-banner[data-kind=claim] strong{font-size:25px;color:#416a37}
#story-feedback-banner[data-kind=claim] .story-feedback-rewards{margin-top:4px}
.story-feedback-enter{animation:story-feedback-arrive var(--feedback-life) cubic-bezier(.22,.72,.24,1) both}
.story-feedback-particles{inset:0;z-index:47;overflow:hidden;contain:strict}
.story-feedback-particle{position:absolute;width:23px;height:23px;object-fit:contain;opacity:0;filter:drop-shadow(0 2px 2px #183b2526);animation:story-feedback-burst var(--fx-duration) cubic-bezier(.1,.6,.3,1) var(--fx-delay) both}
.story-feedback-step{animation:story-feedback-step 440ms ease-out!important}
.story-target{animation:story-target-beacon 1.45s ease-in-out infinite!important}
@keyframes story-target-beacon{0%,100%{outline-color:#ffe99a;outline-offset:4px;box-shadow:0 0 0 4px #ffd64f33,0 0 9px #f9c44766}50%{outline-color:#ffca35;outline-offset:7px;box-shadow:0 0 0 10px #ffd64f11,0 0 22px #ffdd7199}}
@keyframes story-feedback-point{0%,100%{translate:0 0}50%{translate:var(--pointer-x) var(--pointer-y)}}
@keyframes story-feedback-arrive{0%{opacity:0;translate:0 10px;scale:.9}14%{opacity:1;translate:0 -2px;scale:1.035}25%,82%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 -9px;scale:.98}}
@keyframes story-feedback-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}16%{opacity:1}72%{opacity:.95}100%{opacity:0;transform:translate(calc(-50% + var(--fx-x)),calc(-50% + var(--fx-y))) rotate(var(--fx-rotation)) scale(.6)}}
@keyframes story-feedback-step{0%{opacity:.6;translate:0 7px;filter:brightness(1.18)}42%{opacity:1;translate:0 -1px;filter:brightness(1.08)}100%{opacity:1;translate:0 0;filter:none}}
#story-feedback-pointer[data-reduced=true] img,#story-feedback-banner[data-reduced=true]{animation:none}
body[data-reduced-motion=true] :is(#story-feedback-pointer img,.story-feedback-enter,.story-feedback-step,.story-target){animation:none!important}
body[data-reduced-motion=true] .story-feedback-particles{display:none}
@media(max-width:600px){
 #story-feedback-pointer{width:34px;height:34px}
 #story-feedback-banner{min-height:64px;gap:8px;padding:12px 22px 12px 15px}
 #story-feedback-banner strong{font-size:16px}.story-feedback-seal{width:38px;height:38px}.story-feedback-seal>.crop-icon{width:42px;height:42px}
 #story-feedback-banner[data-kind=claim]{min-width:248px;min-height:92px;padding:14px 27px 14px 17px;gap:10px}
 #story-feedback-banner[data-kind=claim] .story-feedback-seal{width:50px;height:50px}#story-feedback-banner[data-kind=claim] .story-feedback-seal>.crop-icon{width:58px;height:58px}
 #story-feedback-banner[data-kind=claim] strong{font-size:22px}.story-feedback-rewards{gap:3px 8px}.story-feedback-reward>b{font-size:14px}
 .story-feedback-particle{width:19px;height:19px}
}
@media(prefers-reduced-motion:reduce){#story-feedback-pointer img,.story-feedback-enter,.story-feedback-step,.story-target{animation:none!important}.story-feedback-particles{display:none}}


/* Original stylesheet: ./src/start-menu.css */
/* The live garden is the title artwork; existing bitmap controls stay crisp above it. */
body[data-start-menu=true] #app>:not(#scene-wrap),body[data-start-menu=true] #scene-wrap>:not(#scene):not(#renderer-error):not(#ui-scene-snapshot),body[data-start-menu=true] :is(#camera-zoom-control,#trade-warehouse-shortcut,#sowing-label,#story-guide,#story-world-marker,.harvest-flight-layer){display:none!important}
body[data-start-menu=true] #scene{cursor:default}
#start-screen{position:fixed;inset:0;z-index:80;overflow:hidden;pointer-events:none;color:#fffdf0;letter-spacing:0}
#start-screen[hidden]{display:none}
.title-composition{position:absolute;left:7%;top:18%;width:370px;max-width:38%;display:flex;flex-direction:column;align-items:center;gap:36px;pointer-events:auto}
.title-brand{position:relative;width:100%;padding:12px 0 0;text-align:center;filter:drop-shadow(0 5px 0 #26573b) drop-shadow(0 8px 12px #173d3030)}
.title-brand>img{position:absolute;right:5%;top:-38px;width:76px;height:76px;object-fit:contain;transform:rotate(16deg)}
.title-brand h1{margin:0;color:#fffcdf;font-weight:900;line-height:1.08;letter-spacing:0;-webkit-text-stroke:6px #3b7651;paint-order:stroke fill;text-shadow:0 3px 0 #2c6746}
.title-brand h1 span{display:block;font-size:51px;white-space:nowrap}
.title-brand h1 strong{display:block;font-size:104px;font-weight:900;margin-top:7px}
.title-actions{width:290px;max-width:100%;display:grid;gap:14px}
.title-action{width:100%;height:78px;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 24px;border:0;border-radius:8px;background:transparent url('../assets/ui/button-primary.png') center/100% 100% no-repeat;color:#fff9da;font-size:25px;font-weight:800;letter-spacing:0;box-shadow:none;text-shadow:0 2px 1px #20482d80;touch-action:manipulation}
.title-action>img{width:34px;height:38px;object-fit:contain;flex:0 0 auto}
.title-action-secondary{height:68px;background-image:url('../assets/ui/button-secondary.png');color:#4d603e;font-size:21px;text-shadow:0 1px #fffef1}
.title-action:hover:not(:disabled){filter:brightness(1.13);transform:translateY(-2px)}
.title-action:active:not(:disabled){transform:translateY(2px)}
.title-action:disabled{opacity:.7;filter:saturate(.65)}
#start-screen button:focus-visible,#start-screen select:focus-visible,#start-screen input:focus-visible{outline:3px solid #fff4af;outline-offset:4px}
#title-status{min-height:24px;max-width:100%;margin:-20px 0 0;text-align:center;font-size:14px;line-height:1.5;color:#fffdf1;font-weight:700;text-shadow:0 1px 4px #24482e,0 1px 8px #24482e}
#title-retry{pointer-events:auto;padding:10px 20px;background:#fffdf0;color:#386547;font-size:16px;border-radius:8px;margin-top:-20px}
#title-settings{width:460px;max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;border:3px solid #d1b27c;border-radius:8px;background:#f8f6e5 url('../assets/ui/panel.png') center/100% 100% no-repeat;color:#365841;box-shadow:0 12px 40px #183c3c42;pointer-events:auto;overflow:auto}
#title-settings::backdrop{background:#153e3640}
#title-settings header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px 18px;border-bottom:1px solid #c5d0b4}
#title-settings h2{margin:0;font-size:25px;line-height:1.3;letter-spacing:0;color:#365c43}
#title-settings-close{display:grid;place-items:center;width:40px;height:40px;padding:0;flex:0 0 40px;border:1px solid #b4c4a1;border-radius:8px;background:#edf1de;color:#486a4e;font:28px/1 system-ui}
.title-setting-fields{padding:6px 24px}
.title-setting{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:67px;border-bottom:1px solid #d4ddc5;font-size:17px;font-weight:700;cursor:pointer}
.title-setting:last-child{border:0}
.title-setting>span{min-width:0;line-height:1.4}
.title-setting input[type=checkbox]{appearance:none;flex:0 0 50px;width:50px;height:28px;margin:0;border:2px solid #839b83;border-radius:16px;background:#c7d1c4;position:relative;cursor:pointer;transition:background .15s}
.title-setting input[type=checkbox]:after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fffdf2;box-shadow:0 1px 3px #365b4350;transition:transform .15s}
.title-setting input[type=checkbox]:checked{background:#4e987d;border-color:#40856d}
.title-setting input[type=checkbox]:checked:after{transform:translateX(22px)}
.title-setting select{width:150px;max-width:52%;min-height:42px;border:1px solid #b2c5a6;border-radius:6px;padding:8px;background:#fbfcf3;color:#365841;font-size:15px}
#title-settings footer{padding:16px 24px 24px;display:flex;justify-content:center}
#title-settings footer button{height:50px;width:180px;padding:8px 20px;border:0;border-radius:8px;background:transparent url('../assets/ui/button-primary.png') center/100% 100% no-repeat;color:#fff8df;font-size:18px;font-weight:800}
html[data-locale-layout="latin"] .title-brand h1 span{font-size:37px}html[data-locale-layout="latin"] .title-brand h1 strong{font-size:78px}
@media(min-width:1600px){.title-composition{left:9%;top:20%;width:400px;gap:42px}.title-brand h1 span{font-size:55px}.title-brand h1 strong{font-size:112px}.title-actions{width:310px}}
@media(max-aspect-ratio:9/10){
 .title-composition{inset:0;width:100%;max-width:none;padding:max(30px,env(safe-area-inset-top)) 24px max(26px,env(safe-area-inset-bottom));justify-content:space-between;gap:0;pointer-events:none}
 .title-brand{width:310px;max-width:100%;padding-top:0;pointer-events:auto}.title-brand>img{width:52px;height:52px;right:6%;top:-15px}
 .title-brand h1{-webkit-text-stroke-width:4px}.title-brand h1 span{font-size:33px}.title-brand h1 strong{font-size:66px;margin-top:2px}
 .title-actions{width:264px;gap:10px;margin-top:auto;pointer-events:auto}.title-action{height:64px;font-size:23px}.title-action-secondary{height:56px;font-size:19px}.title-action>img{width:28px;height:32px}
 #title-status{position:absolute;bottom:174px;left:24px;right:24px;margin:0;font-size:13px;pointer-events:none}
 #title-retry{position:absolute;bottom:175px;margin:0}
 html[data-locale-layout="latin"] .title-brand h1 span{font-size:27px}html[data-locale-layout="latin"] .title-brand h1 strong{font-size:57px}
}
@media(max-height:680px) and (max-aspect-ratio:9/10){.title-composition{padding-top:20px;padding-bottom:18px}.title-brand h1 span{font-size:29px}.title-brand h1 strong{font-size:57px}.title-brand>img{width:44px;height:44px;right:14%}.title-actions{width:238px;gap:7px}.title-action{height:56px;font-size:21px}.title-action-secondary{height:49px;font-size:18px}#title-status{bottom:143px}#title-settings header{padding:14px 18px}.title-setting-fields{padding:4px 18px}.title-setting{min-height:58px;font-size:16px}#title-settings footer{padding:10px 18px 16px}}
@media(max-height:560px) and (min-aspect-ratio:9/10){.title-composition{left:6%;top:10%;width:310px;gap:20px}.title-brand h1 span{font-size:32px}.title-brand h1 strong{font-size:62px}.title-brand>img{width:52px;height:52px;top:-18px;right:12%}.title-actions{width:250px;gap:9px}.title-action{height:58px;font-size:21px}.title-action-secondary{height:52px;font-size:18px}}
@media(max-aspect-ratio:9/10){html[data-locale-layout="latin"] .title-brand>img{right:0}}
@media(max-height:560px){#title-settings header{padding:14px 18px}.title-setting-fields{padding:4px 18px}.title-setting{min-height:52px;font-size:16px}#title-settings footer{padding:10px 18px 16px}}
body[data-reduced-motion=true] #start-screen *{transition:none!important}
@media(prefers-reduced-motion:reduce){#start-screen *{transition:none!important}}


/* Original stylesheet: ./src/ui-pets.css */
/* Backpack frame and shop PNG layers shared with the existing game UI. */
#panel-overlay:has(#game-window[data-panel="pets"]){z-index:55;padding:12px 24px;align-items:center;justify-content:center;background:#17332036;backdrop-filter:blur(2px)}
#game-window[data-panel="pets"]{--pu:min(.078125vw,.138889dvh,1.2px);position:relative;width:calc(1180 * var(--pu));height:calc(690 * var(--pu));max-width:96vw;max-height:96dvh;overflow:visible;border:0;border-radius:0;background:url("../assets/ui-user/bag-frame.png") center / 100% 100% no-repeat;box-shadow:none;color:#9e5c30;font-size:16px;font-weight:800;letter-spacing:0}
#game-window[data-panel="pets"] .window-header{position:absolute;inset:0;height:0;min-height:0;padding:0;margin:0;border:0;pointer-events:none;z-index:5}
#game-window[data-panel="pets"] .window-header>div{position:absolute;left:17%;top:calc(36 * var(--pu));width:20%;height:calc(71 * var(--pu));justify-content:center}
#game-window[data-panel="pets"] .window-header h1{color:#a83222;font-size:36px;font-weight:900;letter-spacing:0;text-shadow:2px 0 #fff2bf,-2px 0 #fff2bf,0 2px #fff2bf,0 -2px #fff2bf;white-space:nowrap;line-height:1.2}
#game-window[data-panel="pets"] #window-icon,#game-window[data-panel="pets"] .window-footer{display:none}
#game-window[data-panel="pets"] #panel-close{position:absolute;right:calc(-15 * var(--pu));top:calc(161 * var(--pu));width:calc(122 * var(--pu));height:calc(86 * var(--pu));min-width:44px;min-height:44px;padding:0;border:0;border-radius:0;background:url("../assets/ui-user/bag-close.png") right center / auto 100% no-repeat;font-size:0;pointer-events:auto}
#game-window[data-panel="pets"] #panel-content{padding:calc(143 * var(--pu)) calc(94 * var(--pu)) calc(36 * var(--pu)) calc(94 * var(--pu));overflow:hidden}
.pet-layout{position:relative;display:grid;grid-template-columns:minmax(0,1.93fr) minmax(0,1fr);grid-template-rows:154px minmax(0,1fr);grid-template-areas:"roster detail" "workspace detail";column-gap:26px;row-gap:12px;height:100%;min-height:0;padding:22px 24px 22px 30px;border-radius:40px;background:#fff3bd;isolation:isolate}
.pet-layout::before{content:"";position:absolute;inset:18px 16px 16px 18px;background:url("../assets/ui-user/bag-list-detail.png") center / 100% 100% no-repeat;z-index:-1;pointer-events:none}
.pet-layout *{box-sizing:border-box;letter-spacing:0;min-width:0}
.pet-layout h2,.pet-layout h3,.pet-layout p,.pet-layout dl{margin:0}
.pet-layout button{color:inherit;font-weight:800;line-height:1.3;min-height:40px;transition:filter .15s,transform .15s}
.pet-layout button:hover:not(:disabled){filter:brightness(1.06)}
.pet-layout button:active:not(:disabled){transform:translateY(2px)}
.pet-layout button:focus-visible,.pet-layout input:focus-visible,.pet-layout select:focus-visible{outline:3px solid #a84b2d;outline-offset:2px}
.pet-layout button:disabled{opacity:.5;cursor:default}
.pet-roster{grid-area:roster;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:0}
.pet-roster-item{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;min-height:0!important;padding:0 3px;border:0;border-radius:0;background:none;box-shadow:none}
.pet-roster-art{display:block;width:90px;height:90px;flex:none;border-radius:50%;background:url("../assets/ui-user/shop-item-bg.png") center / contain no-repeat}
.pet-roster-item.selected .pet-roster-art{outline:3px solid #f39906;outline-offset:-2px;filter:drop-shadow(0 2px 3px #a9602538)}
.pet-roster-art>.pet-portrait{display:block;width:100%;height:100%;object-fit:contain;transform:scale(1.05)}
.pet-roster-item strong{font-size:18px;color:#a34225;line-height:1.3;text-shadow:0 1px #fff3bd}
.pet-roster-item small{font-size:12px;line-height:1.4;overflow-wrap:anywhere;text-align:center}
.pet-roster-status{font-size:11px;line-height:1.4;color:#956444;padding:1px 9px}
.pet-roster-status.carried{color:#fff8d7;background:#719b60;border-radius:12px}
.pet-detail{grid-area:detail;display:flex;flex-direction:column;align-items:stretch;gap:10px;min-height:0;padding:0 4px}
.pet-profile{display:flex;flex-direction:column;align-items:center;flex:none;gap:4px}
.pet-preview{width:145px;height:124px;position:relative;background:url("../assets/ui-user/bag-preview.png") center / 100% 100% no-repeat}
.pet-main-portrait{position:absolute;left:0;top:-12px;width:100%;height:145px;object-fit:contain;filter:drop-shadow(0 5px 2px #a76a2530)}
.pet-profile h2{max-width:100%;font-size:24px;line-height:1.2;padding:7px 23px;text-align:center;overflow-wrap:anywhere;background:url("../assets/ui-user/bag-title.png") center / 100% 100% no-repeat;color:#fff0b5;font-weight:900}
.pet-form{font-size:12px;line-height:1.4;padding:2px 10px;color:#a36739;background:#fff0bb;border-radius:12px}
.pet-detail-scroll{flex:1;min-height:0;overflow:auto;padding:0 4px 2px}
.pet-vitals{padding:0 0 10px}
.pet-hunger-label,.pet-mutation-label{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:13px;line-height:1.5}
.pet-mutation-label{margin-top:9px}
.pet-mutation-rule{display:block;margin-top:3px;font-size:11px;line-height:1.4;overflow-wrap:anywhere;color:#85613e}
.pet-detail progress{display:block;appearance:none;width:100%;height:10px;overflow:hidden;border:0;border-radius:8px;background:#fff1bc;margin-top:4px}
.pet-detail progress::-webkit-progress-bar{background:#fff1bc}.pet-detail progress::-webkit-progress-value{background:#7da253;border-radius:8px}
.pet-buff{border-top:3px solid #fff1b7;padding:9px 0 0}
.pet-buff h3{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:17px;line-height:1.4;color:#a34225}
.pet-buff h3 span{font-size:13px;overflow-wrap:anywhere;color:#9e5c30}
.pet-buff p{font-size:14px;line-height:1.55;margin:5px 0;overflow-wrap:anywhere}
.pet-buff small{font-size:12px;color:#85613e}
.pet-detail-actions{display:flex;flex-direction:column;gap:7px;flex:none;padding-top:3px}
.pet-detail-actions button,.pet-primary{border:0;border-radius:24px;background:#e65c46;color:#fff2bc;padding:10px 14px;font-size:17px;box-shadow:0 3px 0 #b6482a26}
.pet-detail-actions .pet-upgrade{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:5px;background:#fff0b5;color:#a95d28;font-size:15px;border:2px solid #edb14a;padding:7px 12px}
.pet-upgrade strong{display:flex;align-items:center;gap:3px;font-size:14px;overflow-wrap:anywhere}
.pet-upgrade img{width:23px;height:23px;object-fit:contain;flex:none}
.pet-detail-actions .pet-carry:disabled{background:#8fa865;color:#fff8d7;opacity:1}
.pet-workspace{grid-area:workspace;display:flex;flex-direction:column;min-height:0;gap:10px}
.pet-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;flex:none}
.pet-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;min-height:44px;padding:5px 8px;border:0;border-radius:0;background:url("../assets/ui-user/shop-sell-label-bg.png") center / 100% 100% no-repeat;color:#9d6b33;font-size:17px}
.pet-tabs button.selected{background-image:url("../assets/ui-user/bag-title.png");color:#fff2bc;filter:drop-shadow(0 2px 0 #bb7f3725)}
.pet-tabs .crop-icon{height:28px;width:28px;object-fit:contain;flex:none}
.pet-feeding,.pet-work,.pet-collection{display:flex;flex-direction:column;min-height:0;flex:1}
.pet-section-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;padding:0 3px 8px;flex:none}
.pet-section-heading h3{font-size:16px;color:#a34225;line-height:1.4}
.pet-section-heading>span{font-size:11px;line-height:1.5;color:#9e6a3d}
.pet-food-list,.pet-effect-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:min-content;gap:10px 6px;flex:1;min-height:0;overflow:auto;padding:5px 6px;scrollbar-gutter:stable}
.pet-food,.pet-effect{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:3px 2px 6px;border:0;border-radius:0;background:none;box-shadow:none;text-align:center}
.pet-food-art{display:grid;place-items:center;width:65px;height:65px;flex:none;border-radius:50%;background:url("../assets/ui-user/shop-item-bg.png") center / contain no-repeat}
.pet-food-art>.crop-icon{width:88%;height:88%;object-fit:contain}
.pet-food.selected .pet-food-art{outline:3px solid #ef9c0c;outline-offset:-2px}
.pet-food strong,.pet-effect strong{font-size:13px;line-height:1.4;overflow-wrap:anywhere;max-width:100%}
.pet-food small,.pet-effect small{font-size:11px;line-height:1.4;overflow-wrap:anywhere;max-width:100%}
.pet-food em{position:absolute;right:0;top:0;font-size:10px;font-style:normal;color:#fff3cf;background:#bd6896;padding:2px 5px;border-radius:9px}
.pet-food .pet-food-locked{background:#9b805a}
.pet-feed-footer{display:flex;align-items:center;gap:10px;flex:none;padding:10px 4px 0;border-top:2px solid #fff0b5;margin-top:6px}
.pet-feed-footer label{font-size:15px;flex:none}
.pet-feed-footer input{width:70px;min-width:0;height:40px;padding:6px 5px;border:2px solid #edb14a;border-radius:12px;background:#fff3bd;color:#9e5c30;text-align:center;font-size:17px;font-weight:800}
.pet-feed-footer .pet-primary{margin-left:auto;min-width:100px;color:#fff2bc}
.pet-empty{grid-column:1/-1;align-self:center;justify-self:center;text-align:center;padding:16px 5px;color:#a37748;font-size:14px;font-weight:700}
.pet-empty>.crop-icon{display:block;width:58px;height:58px;margin:0 auto 10px;object-fit:contain;opacity:.7}
.pet-work-scroll{min-height:0;overflow:auto;padding:0 6px 3px}
.pet-toggle,.pet-select{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:14px;line-height:1.4;border-bottom:2px solid #fff0b5}
.pet-toggle input{appearance:none;position:relative;width:42px;height:25px;border:2px solid #d49f57;border-radius:20px;background:#fff1bd;flex:none;cursor:pointer}
.pet-toggle input::before{content:"";position:absolute;left:2px;top:2px;width:17px;height:17px;border-radius:50%;background:#c28a4c;transition:transform .15s}
.pet-toggle input:checked{background:#8bae62;border-color:#70944b}.pet-toggle input:checked::before{background:#fff8d6;transform:translateX(17px)}
.pet-toggle input:disabled,.pet-select select:disabled{opacity:.5;cursor:default}
.pet-select select{max-width:65%;width:240px;padding:7px;border:2px solid #edb14a;border-radius:8px;background:#fff3bd;color:#9e5c30;font-family:inherit;font-size:13px;font-weight:700}
.pet-work-facts{margin-top:12px!important;display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px;line-height:1.5}
.pet-work-facts dt{color:#ac7948}.pet-work-facts dd{margin:2px 0 0}
.pet-catalysis-controls{border-bottom:2px solid #f1c365}
.pet-catalysis-controls>.pet-select{border-bottom:0}
.pet-catalysis-status{display:block;font-size:11px;font-weight:700;line-height:1.45;color:#85613e;min-height:16px;margin-top:3px;overflow-wrap:anywhere}
.pet-catalysis-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.pet-catalysis-facts :is(dt,dd){overflow-wrap:anywhere}
.pet-catalysis-rule,.pet-catalysis-exclusive{font-size:11px;line-height:1.5;color:#85613e;overflow-wrap:anywhere}
.pet-work-scroll>.pet-catalysis-rule{margin:8px 0 0}
.pet-work-scroll>.pet-catalysis-exclusive{padding:10px 0;border-bottom:2px solid #fff0b5}
.pet-buff-catalysis{display:grid;gap:5px;margin:8px 0!important;font-size:11px;line-height:1.45}
.pet-buff-catalysis>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.pet-buff-catalysis dt{font-weight:700;color:#85613e}
.pet-buff-catalysis dd{margin:0;text-align:end;overflow-wrap:anywhere}
.pet-effect-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.pet-layout :is(.pet-food-list,.pet-effect-list,.pet-detail-scroll,.pet-work-scroll){scrollbar-color:#f6a20e transparent;scrollbar-width:thin;overscroll-behavior:contain}
#pet-shortcut img{object-fit:contain}
.hud-system #pet-shortcut{position:absolute;right:calc(100% + 10px);top:0}
@media(max-width:1050px) and (min-width:701px){
 #game-window[data-panel="pets"]{width:96vw;height:94dvh}
 #game-window[data-panel="pets"] .window-header h1{font-size:28px}
 #game-window[data-panel="pets"] #panel-content{padding:calc(132 * var(--pu)) 7% 3%}
 .pet-layout{padding:16px 18px;column-gap:16px;grid-template-rows:140px minmax(0,1fr)}
 .pet-roster-art{width:78px;height:78px}.pet-roster-item strong{font-size:16px}
 .pet-food-list{grid-template-columns:repeat(3,minmax(0,1fr))}.pet-preview{width:128px;height:106px}.pet-main-portrait{height:128px}
 .pet-profile h2{font-size:22px}.pet-detail{gap:7px}
}
@media(max-width:700px){
 #panel-overlay:has(#game-window[data-panel="pets"]){padding:6px}
 #game-window[data-panel="pets"]{--pu:1px;width:100%;max-width:100%;height:97dvh;max-height:97dvh;background-size:auto calc(100% - 45px);background-position:right bottom}
 #game-window[data-panel="pets"] .window-header>div{left:22px;top:12px;width:174px;height:100px;background:url("../assets/ui-user/bag-frame.png") 20% top / auto 480px no-repeat}
 #game-window[data-panel="pets"] .window-header h1{font-size:24px}
 #game-window[data-panel="pets"] #panel-close{top:91px;right:0;width:62px;height:46px}
 #game-window[data-panel="pets"] #panel-content{position:absolute;inset:132px 0 18px;padding:0 19px;overflow:auto}
 .pet-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"roster" "detail" "workspace";height:auto;min-height:100%;padding:18px 12px 20px;border-radius:25px;gap:20px;background:#fff3bd}
 .pet-layout::before{display:none}
 .pet-roster{padding-bottom:14px;border-bottom:3px solid #f7d38d;gap:3px}
 .pet-roster-art{width:74px;height:74px}.pet-roster-item strong{font-size:15px}.pet-roster-item small{font-size:11px}.pet-roster-status{font-size:10px;padding:2px 4px}
 .pet-detail{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px 10px;padding:0}
 .pet-preview{width:110px;height:110px}.pet-main-portrait{top:-5px;height:115px}
 .pet-profile h2{font-size:18px;padding:7px 12px}.pet-form{font-size:11px}
 .pet-detail-scroll{overflow:visible;padding:0}.pet-vitals{padding-bottom:9px}
 .pet-hunger-label,.pet-mutation-label{font-size:11px;gap:3px}.pet-mutation-label{margin-top:8px}
 .pet-buff h3{font-size:15px;gap:2px}.pet-buff h3 span{font-size:11px}.pet-buff p{font-size:12px;line-height:1.5;margin:4px 0}.pet-buff small{font-size:10px}
 .pet-detail-actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px}
 .pet-detail-actions button{font-size:15px;padding:8px}.pet-detail-actions .pet-upgrade{font-size:13px;padding:7px 9px}.pet-upgrade strong{font-size:12px}
 .pet-workspace{min-height:340px;gap:12px;border-top:3px solid #f7d38d;padding-top:13px}
 .pet-tabs{gap:3px}.pet-tabs button{font-size:16px;gap:4px;padding:5px}.pet-tabs .crop-icon{width:25px;height:25px}
 .pet-section-heading{padding-bottom:10px}.pet-section-heading h3{font-size:15px}.pet-section-heading>span{font-size:10px}
 .pet-food-list,.pet-effect-list{grid-template-columns:repeat(3,minmax(0,1fr));flex:none;max-height:280px;min-height:130px;padding:5px 4px;gap:12px 4px}
 .pet-food-art{width:65px;height:65px}.pet-food strong,.pet-effect strong{font-size:12px}.pet-food small,.pet-effect small{font-size:10px}
 .pet-feed-footer{margin-top:10px;padding-top:12px}.pet-feed-footer .pet-primary{min-width:105px}
 .pet-work-scroll{overflow:visible}.pet-select{font-size:13px}.pet-select select{max-width:65%;font-size:12px}
}
@media(min-width:701px) and (max-height:620px){
 #game-window[data-panel="pets"]{--pu:.72px;width:min(1050px,95vw);height:96dvh;max-height:96dvh}
 #game-window[data-panel="pets"] .window-header>div{top:20px;height:48px}
 #game-window[data-panel="pets"] .window-header h1{font-size:25px}
 #game-window[data-panel="pets"] #panel-content{padding:100px 7% 18px;overflow:auto}
 #game-window[data-panel="pets"] #panel-close{top:110px;width:70px;height:53px}
 .pet-layout{height:450px;min-height:100%;padding:16px 20px;grid-template-rows:132px minmax(0,1fr);column-gap:20px}
 .pet-roster-art{width:72px;height:72px}.pet-roster-item strong{font-size:16px}
 .pet-preview{width:112px;height:90px}.pet-main-portrait{height:112px}
 .pet-profile h2{font-size:20px;padding:5px 18px}.pet-detail{gap:7px}.pet-detail-actions button{padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){.pet-layout button,.pet-toggle input::before{transition:none}}

/* Translated names and Vietnamese accents must fit the original bitmap layout. */
html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-roster-item strong,
html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-roster-status{max-width:100%;overflow-wrap:anywhere;text-align:center}
html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-tabs button span{max-width:100%;overflow-wrap:anywhere;line-height:1.15;text-align:center}
html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-feed-footer label{flex:0 1 auto;overflow-wrap:anywhere}
html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-toggle>span,
html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-select>span{min-width:0;overflow-wrap:anywhere}
html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-select select{flex:1 1 55%;min-width:0}
html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-work-facts{grid-template-columns:repeat(2,minmax(0,1fr));overflow-wrap:anywhere}
@media(max-width:380px) and (orientation:portrait),(max-height:500px) and (orientation:landscape){
 html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-roster-art{width:28px;height:28px}
 html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-roster-item strong{font-size:11px;line-height:1.2}
 html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-roster-item small,
 html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-roster-status{font-size:9px;line-height:1.2}
 html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-tabs button{font-size:11px;gap:2px}
 html[data-locale-layout="latin"] #game-window[data-panel="pets"] .pet-profile h2{font-size:13px;line-height:1.25;padding:3px 5px}
}


/* Original stylesheet: ./src/responsive-core.css */
/* Keep the game shell in the visible viewport, including browser chrome and the keyboard. */
:root {
 --ui-viewport-width:100vw;
 --ui-viewport-height:100dvh;
 --ui-viewport-left:0px;
 --ui-viewport-top:0px;
 --ui-safe-top:env(safe-area-inset-top,0px);
 --ui-safe-right:env(safe-area-inset-right,0px);
 --ui-safe-bottom:env(safe-area-inset-bottom,0px);
 --ui-safe-left:env(safe-area-inset-left,0px);
 -webkit-text-size-adjust:100%;
 text-size-adjust:100%;
}
html,body {height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
#app {height:var(--ui-viewport-height);width:var(--ui-viewport-width);min-height:0}
#panel-overlay {
 position:fixed;inset:auto;left:var(--ui-viewport-left);top:var(--ui-viewport-top);
 width:var(--ui-viewport-width);height:var(--ui-viewport-height);box-sizing:border-box;
 padding:calc(var(--ui-safe-top) + 8px) calc(var(--ui-safe-right) + 8px) calc(var(--ui-safe-bottom) + 8px) calc(var(--ui-safe-left) + 8px);
 display:flex;align-items:center;justify-content:center;overflow:hidden;overscroll-behavior:contain;
}
#game-window {min-width:0;min-height:0;max-width:100%;max-height:100%;box-sizing:border-box}
#panel-content {min-width:0;min-height:0;overscroll-behavior:contain}
#game-window button,#game-window input,#game-window select {max-width:100%;letter-spacing:0}
#game-window :is(p,h1,h2,h3,strong,span,dt,dd) {overflow-wrap:anywhere}
#app:has(#panel-overlay:not([hidden])) :is(.game-hud,.quickbar,.game-actions,#garden-record,#touch-controls,#interact-button,#camera-zoom-control) {visibility:hidden!important;pointer-events:none!important}
#panel-close {touch-action:manipulation}
@media(max-width:1050px),(max-height:700px) {
 :root {--hud-stick-size:88px;--hud-stick-bottom:112px;--hud-record-top:165px;--hud-control-ceiling:calc(var(--ui-viewport-height) - var(--ui-safe-bottom) - var(--hud-stick-bottom) - var(--hud-stick-size) - 12px)}
 .hud-resources {left:var(--ui-safe-left);top:var(--ui-safe-top);padding:7px 9px}
 .hud-resources .coin-pill {width:158px;height:40px;min-height:40px;padding:4px 7px}
 .hud-resources .hud-icon {width:30px;height:30px}
 .hud-resources strong {font-size:18px;letter-spacing:0}
 .hud-system {top:calc(var(--ui-safe-top) + 8px);right:calc(var(--ui-safe-right) + 8px);width:auto;display:grid;grid-template-columns:repeat(3,40px);gap:4px}
 .hud-system .square-button {width:40px;height:40px;min-width:40px;min-height:40px;padding:3px}
 .hud-system #pet-shortcut {position:static;inset:auto}
 #save-status {grid-column:1/-1;justify-self:end;max-width:128px;font-size:10px;line-height:1.2;padding:2px 5px}
 .quickbar {left:calc(var(--ui-viewport-left) + var(--ui-viewport-width)/2);bottom:calc(var(--ui-safe-bottom) + 2px);max-width:calc(100% - var(--ui-safe-left) - var(--ui-safe-right) - 12px);gap:3px}
 #seed-dock {max-width:100%;min-width:0;gap:5px;padding:5px 7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
 #seed-dock .seed-slot {flex:0 0 44px;width:44px;height:68px;min-height:68px}
 #seed-dock .slot-art {width:44px;height:44px;min-height:44px}
 #seed-dock .seed-name {width:48px;max-width:48px;font-size:11px;line-height:13px;white-space:normal;overflow-wrap:anywhere}
 #seed-dock .slot-key {font-size:11px}
 #seed-dock .seed-quantity {font-size:13px;width:19px;height:19px}
 #garden-hint {font-size:11px;line-height:1.3;max-width:100%;padding:3px 8px}
 #joystick {width:var(--hud-stick-size);height:var(--hud-stick-size);left:calc(var(--ui-safe-left) + 16px);top:auto;bottom:calc(var(--ui-safe-bottom) + var(--hud-stick-bottom));transform:none;border-width:1px}
 #joystick-knob {width:36px;height:36px;border-width:1px}
 #interact-button {left:auto;right:calc(var(--ui-safe-right) + 16px);top:auto;bottom:calc(var(--ui-safe-bottom) + 130px);width:108px;height:52px;translate:none;transform:none;padding:6px 10px;font-size:15px;border-width:1px}
 #interact-button[data-action-type=unlockBed] {font-size:12px;padding:5px 8px}
 #interact-button kbd {width:18px;height:18px;font-size:11px;top:-6px;right:-2px}
 .game-actions {transform:none;right:calc(var(--ui-safe-right) + 8px);top:calc(var(--ui-safe-top) + 84px);bottom:auto;gap:6px}
 .game-actions button {width:44px;height:53px;font-size:11px;padding:4px;min-width:44px;min-height:44px}
 .game-actions img {width:28px;height:30px}
 #camera-zoom-control {right:calc(var(--ui-safe-right) + 10px);top:40%;padding:2px;gap:3px}
 #camera-zoom {height:80px;width:24px}
 #camera-zoom-control>span {font-size:18px}
 #main-quest {left:var(--ui-safe-left);top:calc(var(--ui-safe-top) + 66px);width:142px;max-width:calc(100% - 76px);--left-quest-height:86px}
 #garden-record {left:var(--ui-safe-left);top:calc(var(--ui-safe-top) + var(--hud-record-top));width:142px;min-width:0;min-height:0;padding:30px 8px 8px;box-sizing:border-box;max-height:max(0px,calc(var(--hud-control-ceiling) - var(--ui-safe-top) - var(--hud-record-top)));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;pointer-events:auto;touch-action:pan-y}
 #garden-record .quest-header {width:130px;height:25px;font-size:14px;letter-spacing:0}
 #garden-record .quest-item,#garden-record .quest-reward {height:24px;margin-bottom:5px;padding:0 6px;gap:3px}
 #garden-record .record-label {font-size:10px;white-space:normal}
 #garden-record .quest-item strong,#garden-record .quest-reward strong {font-size:12px}
 #garden-record .record-best {padding:4px 6px;gap:2px}
 #record-best {font-size:10px;line-height:1.3}
 #toast {top:calc(var(--ui-safe-top) + 72px);max-width:calc(100% - 24px);font-size:13px;overflow-wrap:anywhere}
 #trade-warehouse-shortcut {position:fixed;left:auto;right:calc(var(--ui-safe-right) + 68px);top:calc(var(--ui-safe-top) + 12px);bottom:auto;transform:none}
 #trade-warehouse-shortcut button {width:44px;height:44px;min-height:44px;padding:4px}
 #trade-warehouse-shortcut button span {display:none}
 body[data-story-panel=true] #trade-warehouse-shortcut {top:calc(var(--ui-safe-top) + var(--ui-story-panel-height,124px) + 20px)}
}
@media(max-width:700px) and (orientation:portrait) {
 .game-actions {flex-direction:column}
 #interact-button {bottom:calc(var(--ui-safe-bottom) + 112px)}
 #camera-zoom-control {top:calc(var(--ui-safe-top) + 208px)}
 #camera-zoom {height:min(80px,max(24px,calc(var(--ui-viewport-height) - var(--ui-safe-top) - var(--ui-safe-bottom) - 430px)))}
}
@media(orientation:landscape) and (max-height:700px) {
 :root {--hud-stick-size:78px;--hud-stick-bottom:12px;--hud-record-top:124px}
 #main-quest {top:calc(var(--ui-safe-top) + 62px);--left-quest-height:50px}
 /* Reserve separate lanes for movement, equipment and the right-hand actions. */
 .quickbar {left:calc(var(--ui-viewport-left) + var(--ui-safe-left) + 16px + var(--hud-stick-size) + 12px);right:calc(var(--ui-safe-right) + 114px);width:auto;max-width:none;transform:none;min-width:0;grid-template-columns:minmax(0,1fr)}
 #seed-dock {width:max-content;max-width:100%;touch-action:pan-x;overscroll-behavior-x:contain}
 #interact-button {bottom:calc(var(--ui-safe-bottom) + 80px);right:calc(var(--ui-safe-right) + 20px);height:44px}
 .game-actions {top:auto;bottom:calc(var(--ui-safe-bottom) + 8px)}
 #camera-zoom-control {top:calc(var(--ui-safe-top) + 78px)}
 #camera-zoom {height:min(60px,max(24px,calc(var(--ui-viewport-height) - var(--ui-safe-top) - var(--ui-safe-bottom) - 260px)))}
 #garden-hint {max-width:370px}
}


/* Original stylesheet: ./src/responsive-inventory-pets.css */
/* Keep the supplied bitmap skin, but give each list its own bounded viewport. */
@media (max-width:1050px), (max-height:700px) {
  #panel-overlay:has(#game-window:is([data-panel="bag"],[data-panel="pets"],[data-panel="equipment"])) {
    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);
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) {
    --iu:1px;
    --pu:1px;
    width:min(1050px, 100%);
    height:100%;
    max-width:100%;
    max-height:min(700px, 100%);
    min-height:0;
    background-size:100% 100%;
    background-position:center;
  }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) .window-header>div {
    left:17%;
    top:14px;
    width:22%;
    height:44px;
    background:none;
  }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) .window-header h1 {
    font-size:26px;
    letter-spacing:0;
    line-height:1.2;
  }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-close {
    top:17px;
    right:8px;
    width:58px;
    height:44px;
    min-width:44px;
    min-height:44px;
  }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-content {
    position:absolute;
    inset:74px 3% 16px;
    padding:0;
    overflow:hidden;
  }

  .inventory-art-layout.inventory-layout,
  .inventory-art-layout.inventory-layout:has(.potion-inventory-detail) {
    display:grid;
    grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows:40px minmax(0, 1fr);
    grid-template-areas:"categories categories" "items detail";
    gap:10px 16px;
    height:100%;
    min-height:0;
    padding:12px;
    border-radius:24px;
  }
  .inventory-art-layout::before { display:none; }
  .inventory-categories {
    grid-area:categories;
    position:static;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px;
    min-width:0;
  }
  .inventory-categories .bag-tab[data-filter],
  .inventory-categories .bag-tab[data-filter].active {
    width:100%;
    height:40px;
    min-height:40px;
    margin:0;
    padding:3px 5px;
    justify-content:center;
    background:#edb500;
    border-radius:8px;
  }
  .inventory-categories .bag-tab[data-filter].active { background:#ffe3a0;box-shadow:inset 0 0 0 2px #edb500; }
  .inventory-categories .bag-tab .bag-tab-label,
  .inventory-categories .bag-tab.active .bag-tab-label {
    width:100%;
    margin:0;
    padding:0;
    font-size:15px;
    letter-spacing:0;
  }
  .inventory-art-layout .inventory-main {
    grid-area:items;
    min-height:0;
    padding:4px;
    overflow:hidden;
    background:#ffda82;
    border-radius:16px;
  }
  .inventory-art-layout .inventory-grid {
    flex:1 1 0;
    min-height:0;
    max-height:none;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-auto-rows:116px;
    gap:6px;
    padding:6px;
    overflow:auto;
    overscroll-behavior:contain;
  }
  .inventory-art-layout .inventory-slot,
  .inventory-art-layout .inventory-slot.active { padding:8px 0 4px;gap:4px; }
  .inventory-art-layout .item-art { width:72px;height:72px; }
  .inventory-art-layout .inventory-item-name,
  html[data-locale-layout="latin"] .inventory-art-layout .inventory-item-name { font-size:13px;line-height:1.3;overflow-wrap:anywhere; }
  .inventory-art-layout .item-count { font-size:12px; }
  .inventory-art-layout .inventory-footer { min-height:36px;margin:0 2px;font-size:12px; }
  .inventory-art-layout .inventory-footer button { min-height:36px;padding:4px 10px;font-size:13px; }
  .inventory-art-layout .inventory-detail,
  .inventory-art-layout .inventory-detail.potion-inventory-detail {
    grid-area:detail;
    display:grid;
    grid-template-columns:96px minmax(0, 1fr);
    grid-template-rows:auto auto minmax(0, 1fr) auto;
    align-items:stretch;
    gap:5px 6px;
    width:100%;
    height:100%;
    min-height:0;
    padding:6px 8px 8px;
    overflow:hidden;
    border:0;
    border-radius:16px;
    background:#ffda82;
  }
  .inventory-art-layout .inventory-detail .inventory-selected-preview {
    grid-column:1;
    grid-row:1 / 3;
    width:96px;
    height:74px;
    margin:0;
  }
  .inventory-art-layout .inventory-detail .detail-art { width:70px;height:70px; }
  .inventory-art-layout .inventory-detail .inventory-selected-count {
    top:0;
    left:0;
    width:auto;
    height:24px;
    min-width:24px;
    max-width:96px;
    padding:2px 5px;
    font-size:13px;
    border-radius:8px;
  }
  .inventory-art-layout .inventory-detail .inventory-step { top:27px;width:30px;height:40px;min-width:30px;min-height:40px; }
  .inventory-art-layout .inventory-step.previous { left:0; }
  .inventory-art-layout .inventory-step.next { right:0; }
  .inventory-art-layout .inventory-detail .detail-name,
  html[data-locale-layout="latin"] .inventory-art-layout .inventory-detail .detail-name {
    grid-column:2;
    grid-row:1;
    align-self:end;
    min-width:0;
    margin:0;
    padding:6px 8px;
    font-size:18px;
    line-height:1.25;
  }
  .inventory-art-layout .inventory-detail .quality-tag { grid-column:2;grid-row:2;align-self:start;justify-self:center;font-size:12px;padding:3px 6px;margin:0; }
  .inventory-art-layout .inventory-detail .detail-facts {
    grid-column:1 / -1;
    grid-row:3;
    min-height:0;
    width:100%;
    padding:0 6px 0 2px;
    margin:0;
    gap:0;
    justify-content:flex-start;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-gutter:stable;
    font-size:13px;
  }
  .inventory-art-layout .inventory-detail .detail-facts>div { flex:none;display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);gap:8px;align-items:start;min-height:28px;padding:4px 0;border-bottom-width:2px; }
  .inventory-art-layout .inventory-detail .detail-facts>div>:is(span,strong) { min-width:0;font-size:13px;line-height:1.4;white-space:normal;overflow-wrap:anywhere; }
  .inventory-art-layout .inventory-detail .detail-facts>.inventory-special-effect { grid-template-columns:minmax(0, 1fr);gap:3px; }
  .inventory-art-layout .inventory-detail .detail-facts .crop-icon { width:18px;height:18px; }
  .inventory-art-layout .inventory-detail .detail-actions { grid-column:1 / -1;grid-row:4;position:static;margin:0;padding:0;gap:6px;background:transparent; }
  .inventory-art-layout .inventory-detail .detail-actions button,
  html[data-locale-layout="latin"] .inventory-art-layout .detail-actions button { min-height:40px;padding:8px 5px;font-size:14px;line-height:1.3;overflow-wrap:anywhere; }

  .pet-layout {
    height:100%;
    min-height:0;
    padding:12px;
    grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows:108px minmax(0, 1fr);
    grid-template-areas:"roster detail" "workspace detail";
    gap:10px 16px;
    border-radius:24px;
  }
  .pet-layout::before { display:none; }
  .pet-roster { padding:0;border:0;gap:4px; }
  .pet-roster-art { width:54px;height:54px; }
  .pet-roster-item strong { font-size:15px; }
  .pet-roster-item small { font-size:11px; }
  .pet-roster-status { padding:1px 4px;font-size:10px; }
  .pet-detail { display:flex;min-height:0;gap:8px;padding:8px;background:#ffda82;border-radius:16px; }
  .pet-profile { display:grid;grid-template-columns:76px minmax(0, 1fr);grid-template-rows:auto auto;gap:4px 6px; }
  .pet-preview { grid-column:1;grid-row:1 / 3;width:76px;height:74px; }
  .pet-main-portrait { top:-3px;height:78px; }
  .pet-profile h2 { grid-column:2;align-self:end;font-size:19px;padding:6px 8px; }
  .pet-form { grid-column:2;align-self:start;justify-self:center;font-size:11px; }
  .pet-detail-scroll { min-height:0;overflow:auto;padding:0 4px 2px; }
  .pet-hunger-label,.pet-mutation-label { font-size:12px; }
  .pet-buff h3 { font-size:15px; }
  .pet-buff p { font-size:13px; }
  .pet-detail-actions { display:grid;grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);gap:6px;padding:0; }
  .pet-detail-actions button { min-height:42px;font-size:14px;padding:6px; }
  .pet-detail-actions .pet-upgrade { display:flex;flex-direction:column;justify-content:center;gap:2px;font-size:12px;padding:4px; }
  .pet-upgrade strong { font-size:12px;gap:2px; }
  .pet-upgrade img { width:18px;height:18px; }
  .pet-workspace { min-height:0;gap:6px;padding:0;border:0;overflow:hidden; }
  .pet-tabs { gap:4px; }
  .pet-tabs button { min-height:40px;height:40px;padding:4px;font-size:14px;gap:4px; }
  .pet-tabs .crop-icon { width:22px;height:22px; }
  .pet-section-heading { padding:0 3px 4px; }
  .pet-section-heading h3 { font-size:14px; }
  .pet-section-heading>span { font-size:10px; }
  .pet-food-list,.pet-effect-list { flex:1 1 0;grid-template-columns:repeat(3, minmax(0, 1fr));min-height:0;max-height:none;gap:8px 4px;padding:4px;overflow:auto; }
  .pet-food-art { width:54px;height:54px; }
  .pet-food strong,.pet-effect strong { font-size:12px; }
  .pet-food small,.pet-effect small { font-size:10px; }
  .pet-feed-footer { padding:5px 2px 0;margin-top:4px;gap:6px; }
  .pet-feed-footer label { font-size:13px; }
  .pet-feed-footer input { width:58px;height:40px;font-size:16px; }
  .pet-feed-footer .pet-primary { min-width:72px;min-height:40px;padding:6px 12px;font-size:15px; }
  .pet-work-scroll { min-height:0;overflow:auto; }
  .pet-toggle,.pet-select { padding:8px 0;font-size:13px; }
  .pet-select select { font-size:13px; }
  .pet-empty { padding:8px 4px;font-size:12px; }
  .pet-empty>.crop-icon { width:38px;height:38px;margin-bottom:6px; }

  #game-window[data-panel="equipment"] { width:min(660px, 100%);max-width:100%;height:100%;max-height:min(520px, 100%);min-height:0;overflow:hidden; }
  #game-window[data-panel="equipment"] .window-header { min-height:54px;margin:0;padding:8px 14px;gap:8px; }
  #game-window[data-panel="equipment"] .window-header h1 { font-size:24px;letter-spacing:0; }
  #game-window[data-panel="equipment"] #panel-close { width:44px;height:44px;flex:none; }
  #game-window[data-panel="equipment"] #window-icon { width:30px;height:30px; }
  #game-window[data-panel="equipment"] #panel-content { min-height:0;padding:8px 16px 12px;overflow:hidden; }
  #game-window[data-panel="equipment"] .window-footer { display:none; }
  .equipment-layout { display:grid;grid-template-columns:minmax(0, 1fr);grid-template-rows:auto auto minmax(0, 1fr) auto;height:100%;min-height:0;gap:8px;justify-items:center; }
  .equipment-target { display:grid;grid-template-columns:60px minmax(0, 1fr);align-items:center;gap:10px;width:auto;max-width:100%; }
  .equipment-target>.equipment-icon { width:60px;height:60px; }
  .equipment-target strong { min-width:0;font-size:16px;white-space:normal;overflow-wrap:anywhere; }
  .equipment-target>.equipment-count { top:40px;left:32px;right:auto;font-size:12px; }
  .equipment-layout p { font-size:13px;line-height:1.4; }
  .equipment-slots { grid-template-columns:repeat(6, minmax(0, 1fr));align-content:center;align-items:center;gap:8px;min-height:0;max-width:100%;overflow:auto;padding:8px 3px;overscroll-behavior:contain; }
  .equipment-slot { width:100%;min-height:44px;max-height:84px;padding:5px; }
  .equipment-slot kbd { font-size:12px; }
  .equipment-count { font-size:12px; }
  .equipment-confirm { min-height:44px;max-width:100%;padding:6px 24px;font-size:16px; }
}

@media (max-width:700px) and (max-aspect-ratio:1/1) {
  #game-window:is([data-panel="bag"],[data-panel="pets"]) { max-height:100%;background-size:auto calc(100% - 30px);background-position:right bottom; }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) .window-header>div { left:16px;top:0;width:145px;height:72px;background:url("../assets/ui-user/bag-frame.png") 20% top / auto 360px no-repeat; }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) .window-header h1 { font-size:24px; }
  html[data-locale-layout="latin"] #game-window[data-panel="bag"] .window-header h1 { font-size:20px; }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-close { top:17px;right:4px;width:54px;height:44px; }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-content { inset:76px 10px 12px; }
  .inventory-art-layout.inventory-layout,
  .inventory-art-layout.inventory-layout:has(.potion-inventory-detail) { grid-template-columns:minmax(0, 1fr);grid-template-rows:40px minmax(0, .85fr) minmax(0, 1.15fr);grid-template-areas:"categories" "items" "detail";gap:8px;padding:8px;border-radius:20px; }
  .inventory-art-layout .inventory-grid { grid-auto-rows:105px;gap:4px;padding:4px; }
  .inventory-art-layout .item-art { width:62px;height:62px; }
  .inventory-art-layout .inventory-footer { min-height:30px;font-size:11px; }
  .inventory-art-layout .inventory-footer button { min-height:30px;font-size:12px; }
  .inventory-art-layout .inventory-detail { padding:5px 6px 6px; }
  .inventory-art-layout .inventory-detail .detail-name,
  html[data-locale-layout="latin"] .inventory-art-layout .inventory-detail .detail-name { font-size:16px;padding:5px 7px; }
  .inventory-art-layout .inventory-detail .detail-actions button { min-height:40px;font-size:13px; }
  .pet-layout { grid-template-columns:minmax(0, 1fr);grid-template-rows:84px minmax(144px, .7fr) minmax(0, 1.3fr);grid-template-areas:"roster" "detail" "workspace";gap:8px;padding:8px;border-radius:20px; }
  .pet-roster-item { gap:0; }
  .pet-roster-art { width:42px;height:42px; }
  .pet-roster-item strong { font-size:14px;line-height:1.2; }
  .pet-roster-item small { line-height:1.2; }
  .pet-roster-status { padding:0 4px;line-height:1.2; }
  .pet-detail { display:grid;grid-template-columns:76px minmax(0, 1fr);grid-template-rows:minmax(0, 1fr) auto;gap:6px;padding:6px; }
  .pet-profile { display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:0; }
  .pet-preview { width:58px;height:48px; }
  .pet-main-portrait { top:-3px;height:58px; }
  .pet-profile h2 { align-self:center;width:100%;font-size:14px;padding:4px 3px; }
  .pet-form { align-self:center;padding:1px 3px;font-size:10px; }
  .pet-detail-scroll { padding:0 3px; }
  .pet-vitals { padding-bottom:5px; }
  .pet-hunger-label,.pet-mutation-label { font-size:11px;gap:3px; }
  .pet-mutation-label { margin-top:4px; }
  .pet-detail progress { height:7px;margin-top:2px; }
  .pet-buff { padding-top:5px;border-top-width:2px; }
  .pet-buff h3 { font-size:13px;gap:3px; }
  .pet-buff h3 span,.pet-buff small { font-size:10px; }
  .pet-buff p { font-size:12px;line-height:1.4;margin:3px 0; }
  .pet-detail-actions { grid-column:1 / -1;grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); }
  .pet-detail-actions .pet-upgrade { flex-direction:row;justify-content:space-between;flex-wrap:wrap; }
  .pet-tabs button { min-height:36px;height:36px;font-size:13px; }
  .pet-tabs .crop-icon { width:20px;height:20px; }
  .pet-section-heading { padding-bottom:3px;gap:2px; }
  .pet-section-heading h3 { font-size:13px; }
  .pet-section-heading>span { font-size:10px; }
  .pet-food-art { width:48px;height:48px; }
  .pet-feed-footer { padding-top:4px; }
  .pet-feed-footer .pet-primary { min-width:72px; }
  .equipment-slots { grid-template-columns:repeat(3, minmax(0, 1fr));max-width:280px; }
}

@media (max-height:500px) and (min-aspect-ratio:1/1) {
  #game-window:is([data-panel="bag"],[data-panel="pets"]) .window-header>div { top:0;height:44px; }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) .window-header h1 { font-size:22px; }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-close { top:2px;right:5px;width:54px; }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-content { inset:48px 3% 10px; }
  .inventory-art-layout.inventory-layout,
  .inventory-art-layout.inventory-layout:has(.potion-inventory-detail) { padding:8px;gap:6px 12px;grid-template-rows:36px minmax(0, 1fr); }
  .inventory-categories .bag-tab[data-filter],
  .inventory-categories .bag-tab[data-filter].active { height:36px;min-height:36px; }
  .inventory-art-layout .inventory-grid { grid-auto-rows:104px; }
  .inventory-art-layout .item-art { width:62px;height:62px; }
  .inventory-art-layout .inventory-footer,
  .inventory-art-layout .inventory-footer button { min-height:28px; }
  .inventory-art-layout .inventory-detail .inventory-selected-preview { height:60px; }
  .inventory-art-layout .inventory-detail .detail-art { width:58px;height:58px; }
  .inventory-art-layout .inventory-detail .inventory-step { top:18px; }
  .inventory-art-layout .inventory-detail .detail-name { font-size:16px; }
  .pet-layout { padding:8px;grid-template-rows:88px minmax(0, 1fr);gap:6px 12px; }
  .pet-roster-art { width:40px;height:40px; }
  .pet-roster-item strong { font-size:14px; }
  .pet-detail { padding:6px;gap:5px; }
  .pet-profile { grid-template-columns:58px minmax(0, 1fr); }
  .pet-preview { width:58px;height:54px; }
  .pet-main-portrait { height:60px; }
  .pet-profile h2 { font-size:16px;padding:4px 8px; }
  .pet-tabs button { min-height:36px;height:36px; }
  .pet-section-heading h3 { font-size:13px; }
  .pet-food-art { width:44px;height:44px; }
  .pet-feed-footer { padding-top:3px;margin-top:2px; }
  .pet-feed-footer input,.pet-feed-footer .pet-primary { height:36px;min-height:36px; }
  #game-window[data-panel="equipment"] .window-header { min-height:48px;padding:3px 12px; }
  #game-window[data-panel="equipment"] .window-header h1 { font-size:20px; }
  #game-window[data-panel="equipment"] #panel-content { padding:4px 16px 8px; }
  .equipment-layout { gap:4px; }
  .equipment-target { grid-template-columns:44px minmax(0, 1fr); }
  .equipment-target>.equipment-icon { width:44px;height:44px; }
  .equipment-target>.equipment-count { top:26px;left:24px; }
  .equipment-slots { max-width:470px;padding:5px 3px; }
  .equipment-confirm { min-height:40px; }
}

/* With a story banner on a very short screen, trade vertical stacking for columns. */
@media (max-height:360px) and (min-aspect-ratio:1/1) {
  body[data-story-panel=true] #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-content { inset:44px 3% 8px; }
  body[data-story-panel=true] .inventory-art-layout.inventory-layout,
  body[data-story-panel=true] .inventory-art-layout.inventory-layout:has(.potion-inventory-detail) {
    grid-template-areas:"categories detail" "items detail";
    grid-template-rows:36px minmax(0, 1fr);
    gap:4px 10px;
    padding:6px;
  }
  body[data-story-panel=true] .inventory-categories { gap:3px; }
  body[data-story-panel=true] .inventory-categories .bag-tab .bag-tab-label,
  body[data-story-panel=true] .inventory-categories .bag-tab.active .bag-tab-label { font-size:12px; }
  body[data-story-panel=true] .inventory-art-layout .inventory-detail { gap:3px 5px;padding:4px 6px;grid-template-columns:76px minmax(0, 1fr); }
  body[data-story-panel=true] .inventory-art-layout .inventory-detail .inventory-selected-preview { width:76px;height:44px; }
  body[data-story-panel=true] .inventory-art-layout .inventory-detail .detail-art { width:44px;height:44px; }
  body[data-story-panel=true] .inventory-art-layout .inventory-detail .inventory-step { top:6px;height:36px;min-height:36px;width:26px;min-width:26px; }
  body[data-story-panel=true] .inventory-art-layout .inventory-detail .detail-name { font-size:14px;padding:3px 6px; }
  body[data-story-panel=true] .inventory-art-layout .inventory-detail .quality-tag { font-size:10px;padding:2px 4px; }
  body[data-story-panel=true] .inventory-art-layout .inventory-detail .detail-facts>div { min-height:24px;padding:3px 0; }
  body[data-story-panel=true] .inventory-art-layout .inventory-detail .detail-facts>div>:is(span,strong) { font-size:12px; }

  body[data-story-panel=true] .pet-layout {
    grid-template-columns:minmax(76px, .42fr) minmax(0, 1fr) minmax(0, .9fr);
    grid-template-rows:minmax(0, 1fr);
    grid-template-areas:"roster workspace detail";
    padding:6px;
    gap:6px;
  }
  body[data-story-panel=true] .pet-roster { grid-template-columns:minmax(0, 1fr);grid-template-rows:repeat(3, minmax(0, 1fr));gap:4px; }
  body[data-story-panel=true] .pet-roster-item { display:grid;grid-template-columns:34px minmax(0, 1fr);grid-template-rows:auto auto auto;align-content:center;gap:0 3px;padding:0; }
  body[data-story-panel=true] .pet-roster-art { grid-column:1;grid-row:1 / 4;width:34px;height:34px; }
  body[data-story-panel=true] .pet-roster-item strong { grid-column:2;font-size:12px;line-height:1.2; }
  body[data-story-panel=true] .pet-roster-item small { grid-column:2;font-size:10px;line-height:1.2; }
  body[data-story-panel=true] .pet-roster-status { grid-column:2;padding:0;font-size:9px;line-height:1.2; }
  body[data-story-panel=true] .pet-detail { min-height:0;gap:4px;padding:4px; }
  body[data-story-panel=true] .pet-profile { grid-template-columns:44px minmax(0, 1fr);gap:2px 4px; }
  body[data-story-panel=true] .pet-preview { width:44px;height:42px; }
  body[data-story-panel=true] .pet-main-portrait { top:-2px;height:46px; }
  body[data-story-panel=true] .pet-profile h2 { font-size:14px;padding:3px 6px; }
  body[data-story-panel=true] .pet-form { font-size:10px;padding:1px 4px; }
  body[data-story-panel=true] .pet-detail-actions { gap:4px; }
  body[data-story-panel=true] .pet-detail-actions button { min-height:40px;font-size:12px;padding:4px; }
  body[data-story-panel=true] .pet-detail-actions .pet-upgrade { font-size:11px;gap:1px; }
  body[data-story-panel=true] .pet-upgrade strong { font-size:11px; }
  body[data-story-panel=true] .pet-upgrade img { width:15px;height:15px; }
  body[data-story-panel=true] .pet-workspace { gap:4px; }
  body[data-story-panel=true] .pet-tabs { gap:2px; }
  body[data-story-panel=true] .pet-tabs button { height:34px;min-height:34px;padding:3px 2px;gap:2px;font-size:12px; }
  body[data-story-panel=true] .pet-tabs .crop-icon { width:18px;height:18px; }
  body[data-story-panel=true] .pet-section-heading { padding:0 2px 2px; }
  body[data-story-panel=true] .pet-section-heading h3 { display:none; }
  body[data-story-panel=true] .pet-food-list,
  body[data-story-panel=true] .pet-effect-list { grid-template-columns:repeat(2, minmax(0, 1fr));padding:2px;gap:4px; }
  body[data-story-panel=true] .pet-feed-footer { gap:4px;margin-top:2px;padding:2px 0 0; }
  body[data-story-panel=true] .pet-feed-footer label { font-size:12px; }
  body[data-story-panel=true] .pet-feed-footer input { width:48px; }
  body[data-story-panel=true] .pet-feed-footer .pet-primary { min-width:60px;padding:4px 8px;font-size:13px; }
}


/* Original stylesheet: ./src/responsive-trade-catalog.css */
/* Compact layouts keep the existing artwork, but give scrolling to content only. */
@media (max-width:760px), (max-width:1100px) and (max-height:650px) {
  #panel-overlay:has(#game-window:is([data-panel="shop"],[data-panel="catalog"])) {
    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);
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  #game-window:is([data-panel="shop"],[data-panel="catalog"]) {
    --su:1px;
    --h:1px;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    max-width:100%;
    max-height:100%;
    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"] .window-header {z-index:8}
  #game-window[data-panel="shop"] #panel-close {
    inset:4px 4px auto auto;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    border:0;
    border-radius:0;
    background:url("../assets/ui-user/shop-close.png") center / 26px 26px no-repeat, url("../assets/ui-user/shop-close-circle.png") center / 42px 42px no-repeat;
  }
  #game-window[data-panel="shop"] .shop-art-layout.shop-layout {
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    width:100%;
    height:100%;
    min-height:0;
    gap:10px;
    padding:54px 12px 40px;
  }
  #game-window[data-panel="shop"] .shop-art-layout::before {
    background-size:100% calc(100% - 28px);
    background-position:center bottom;
  }
  #game-window[data-panel="shop"] .shop-trade-tabs {
    inset:0 auto auto 12px;
    width:auto;
    height:52px;
    gap:4px;
    align-items:center;
  }
  #game-window[data-panel="shop"] .shop-trade-tab,
  #game-window[data-panel="shop"] .shop-trade-tab.active {
    width:80px;
    height:52px;
    margin:0;
    padding:6px;
    transform:none;
    font-size:20px;
    letter-spacing:0;
    background-size:100% 100%;
  }
  #game-window[data-panel="shop"] .shop-trade-tab > span {padding:5px}
  #game-window[data-panel="shop"] .shop-trade-tab > span > b {transform:none}
  #game-window[data-panel="shop"] .trade-guide-hand {font-size:22px;top:55%;left:75%}
  #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-width:0;
    min-height:0;
    margin:0;
    padding:8px;
    overflow:hidden;
    background:url("../assets/ui-user/shop-list.png") center / 100% 100% no-repeat;
  }
  #game-window[data-panel="shop"] .shop-list {
    grid-row:2;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-rows:118px;
    align-content:start;
    gap:8px 5px;
    width:100%;
    height:100%;
    min-height:0;
    max-height:none;
    padding:5px 3px;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    background:none;
  }
  #game-window[data-panel="shop"] .shop-list::before {display:none}
  #game-window[data-panel="shop"] .shop-item,
  #game-window[data-panel="shop"] .shop-item.active {
    height:auto;
    min-height:0;
    padding:0;
    gap:0;
    justify-content:flex-start;
  }
  #game-window[data-panel="shop"] .shop-item .crop-art {
    width:66px;
    height:66px;
    max-width:100%;
    margin-top:6px;
  }
  #game-window[data-panel="shop"] .shop-copy {min-width:0;margin:0}
  #game-window[data-panel="shop"] .shop-copy strong {
    font-size:12px;
    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;
    letter-spacing:0;
    white-space:normal;
    overflow-wrap:anywhere;
    margin-top:2px;
    gap:2px;
  }
  #game-window[data-panel="shop"] .card-price {
    inset:0 auto auto 0;
    min-width:0;
    max-width:100%;
    height:20px;
    padding:0 4px 0 0;
    gap:1px;
    font-size:11px;
  }
  #game-window[data-panel="shop"] .card-price .crop-icon {width:18px;height:18px;flex:none}
  #game-window[data-panel="shop"] :is(.stock-time,.sale-list-title) {
    position:static;
    grid-row:1;
    width:auto;
    min-height:0;
    margin:0;
    padding:2px 4px;
    align-self:center;
    text-align:center;
    font-size:11px;
    line-height:1.3;
    white-space:normal;
    translate:none;
    box-shadow:none;
  }
  #game-window[data-panel="shop"] .shop-detail {
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);
    grid-template-rows:40px minmax(0,1fr) 48px 28px;
    align-items:stretch;
    gap:4px 8px;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    padding:10px 20px;
    overflow:hidden;
  }
  #game-window[data-panel="shop"] .shop-detail::before {inset:0;background-size:100% 100%}
  #game-window[data-panel="shop"] .shop-selected-preview {
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:1 / 3;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    margin:0;
    overflow:hidden;
  }
  #game-window[data-panel="shop"] .shop-detail .detail-art {
    top:4px;
    left:50%;
    width:min(100%,112px);
    height:112px;
    max-height:calc(100% - 44px);
    transform:translateX(-50%);
    margin:0;
    background-size:contain;
  }
  #game-window[data-panel="shop"] .shop-detail .detail-art > .crop-icon {transform:none;padding:0}
  #game-window[data-panel="shop"] .quantity-control {inset:auto 0 0;height:40px}
  #game-window[data-panel="shop"] .quantity-control input {
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:34px;
    height:40px;
    border-radius:8px;
    font-size:16px;
  }
  #game-window[data-panel="shop"] .quantity-control button {
    top:0;
    width:32px;
    height:40px;
    min-width:0;
    min-height:40px;
    background-size:18px 28px;
  }
  #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"] .selected-stock {top:0;right:0;font-size:11px;padding:2px 5px}
  #game-window[data-panel="shop"] .shop-detail .detail-name {
    position:static;
    grid-column:2;
    grid-row:1;
    width:100%;
    height:auto;
    max-width:100%;
    min-height:0;
    margin:0;
    padding:0;
    transform:none;
    translate:none;
    font-size:15px;
    line-height:1.25;
    overflow:auto;
  }
  #game-window[data-panel="shop"] :is(.detail-facts,.unified-potion-facts) {
    position:static;
    grid-column:2;
    grid-row:2;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:5px;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    max-height:none;
    padding:0 16px 0 2px;
    margin:0;
    font-size:12px;
    line-height:1.4;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-gutter:stable;
  }
  #game-window[data-panel="shop"] .detail-facts > div {
    flex:none;
    min-height:28px;
    gap:6px;
    padding:3px 0;
    border-bottom-width:2px;
  }
  #game-window[data-panel="shop"] .detail-facts :is(span,strong) {min-width:0;white-space:normal;overflow-wrap:anywhere;gap:3px;font-size:12px;line-height:1.35}
  #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"] .unified-potion-facts p {margin:0 0 4px;flex:none}
  #game-window[data-panel="shop"] .unified-potion-facts .potion-probabilities {min-height:12px;flex:none}
  #game-window[data-panel="shop"] .unified-potion-facts .potion-legend {font-size:11px;gap:4px;flex:none;grid-template-columns:1fr}
  #game-window[data-panel="shop"] .shop-checkout {
    position:relative;
    inset:auto;
    grid-column:1 / -1;
    grid-row:3;
    display:flex;
    align-items:center;
    width:100%;
    height:48px;
    min-height:48px;
    margin:0;
    padding:0 50px 0 0;
  }
  #game-window[data-panel="shop"] .detail-total {
    position:static;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    gap:5px;
    width:100%;
    height:40px;
    min-height:40px;
    padding:6px 10px;
    font-size:13px;
    line-height:1.15;
    white-space:normal;
  }
  #game-window[data-panel="shop"] .detail-total strong {min-width:0;font-size:14px;overflow-wrap:anywhere;gap:3px}
  #game-window[data-panel="shop"] .detail-total .crop-icon {width:20px;height:20px;flex:none}
  #game-window[data-panel="shop"] .shop-cart-button {
    inset:0 0 auto auto;
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    padding:10px;
  }
  #game-window[data-panel="shop"] .shop-cart-button .restock-button-label {font-size:11px;white-space:normal}
  #game-window[data-panel="shop"] .detail-footnote {
    position:static;
    grid-column:1 / -1;
    grid-row:4;
    width:100%;
    height:28px;
    margin:0;
    padding:0 2px;
    font-size:10px;
    line-height:1.3;
    overflow:auto;
  }
  #game-window[data-panel="shop"] .detail-footnote > button {min-height:28px;padding:2px 12px;font-size:12px}
  #game-window[data-panel="shop"] .shop-wallet {
    position:absolute;
    inset:auto auto 4px 12px;
    width:auto;
    height:32px;
    min-width:0;
    max-width:calc(100% - 24px);
    padding:2px 8px;
    border-radius:18px;
    transform:none;
  }
  #game-window[data-panel="shop"] .shop-wallet > span {width:auto;height:28px;padding:2px 7px;gap:7px;font-size:16px}
  #game-window[data-panel="shop"] .shop-wallet .crop-icon {width:24px;height:24px}
  #game-window[data-panel="shop"] .sale-lock-badge {inset:24px 0 auto auto;width:48px;height:20px;font-size:10px}
  #game-window[data-panel="shop"] .sale-item-count {display:none}
  #game-window[data-panel="shop"] .sale-list-title {background:#c8efe1;border-radius:12px}
  #game-window[data-panel="shop"] .sale-empty {min-height:100%;gap:6px;padding:8px;font-size:13px}
  #game-window[data-panel="shop"] .sale-empty > span {width:48px;height:48px}
  #game-window[data-panel="shop"] .sale-empty p {margin:0}
  #game-window[data-panel="shop"] .sale-empty-detail {grid-area:1 / 1 / -1 / -1;min-height:0;padding:8px;gap:8px;overflow:auto}
  #game-window[data-panel="shop"] .sale-empty-detail h2 {font-size:18px}
  #game-window[data-panel="shop"] .sale-empty-detail p {font-size:13px;line-height:1.5}

  #game-window[data-panel="catalog"] {background-size:100% 100%;background-position:center}
  #game-window[data-panel="catalog"] .window-header {inset:0;z-index:5}
  #game-window[data-panel="catalog"] .window-header > div {
    inset:6px auto auto 16px;
    width:auto;
    height:38px;
    padding:6px 16px;
    background:#f8df98;
    border-radius:8px;
  }
  #game-window[data-panel="catalog"] #window-title,
  html[data-locale-layout="latin"] #game-window[data-panel="catalog"] #window-title {
    width:auto;
    font-size:22px;
    line-height:1.2;
    letter-spacing:0;
    writing-mode:horizontal-tb;
    text-shadow:none;
  }
  #game-window[data-panel="catalog"] #panel-close {inset:4px 12px auto auto;width:44px;height:44px;min-height:44px;background-size:44px auto}
  #game-window[data-panel="catalog"] #panel-content {inset:50px 16px 12px;padding:0;overflow:hidden;background:none;border-radius:0}
  #game-window[data-panel="catalog"] .catalog-book {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    gap:22px;
    width:100%;
    height:100%;
    min-height:0;
    padding:8px;
    background-size:100% 100%;
  }
  #game-window[data-panel="catalog"] .catalog-left {gap:4px;padding:0;overflow:hidden}
  #game-window[data-panel="catalog"] .catalog-discovery-count {font-size:12px;line-height:18px;flex:none}
  #game-window[data-panel="catalog"] .catalog-entries {
    flex:1;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-rows:104px;
    align-content:start;
    gap:6px;
    min-height:0;
    padding:4px 2px;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  #game-window[data-panel="catalog"] .catalog-entry {justify-content:flex-start;border-radius:8px;overflow:hidden}
  #game-window[data-panel="catalog"] .catalog-entry-art {width:68px;height:64px;max-width:100%;max-height:none;flex:none}
  #game-window[data-panel="catalog"] .catalog-entry > strong {
    margin-top:-2px;
    font-size:12px;
    line-height:1.2;
    white-space:normal;
    overflow-wrap:anywhere;
    text-shadow:none;
  }
  #game-window[data-panel="catalog"] .catalog-discovery {font-size:10px;line-height:15px;padding:0 5px;margin-top:2px}
  #game-window[data-panel="catalog"] .catalog-pagination {gap:12px;min-height:44px;font-size:13px}
  #game-window[data-panel="catalog"] .catalog-pagination button {width:44px;height:44px;min-width:44px;min-height:44px;padding:0;font-size:26px}
  #game-window[data-panel="catalog"] .catalog-right {
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    grid-template-rows:76px 36px minmax(0,1fr) 18px;
    gap:4px 8px;
    min-height:0;
    padding:0;
    overflow:hidden;
  }
  #game-window[data-panel="catalog"] .catalog-preview-row {
    grid-area:1 / 1 / 2 / -1;
    width:100%;
    max-width:none;
    height:76px;
    gap:4px;
    grid-template-columns:44px minmax(0,1fr) 44px;
  }
  #game-window[data-panel="catalog"] .catalog-preview {width:76px;height:76px;max-width:100%}
  #game-window[data-panel="catalog"] .catalog-arrow {width:44px;height:44px;min-width:44px;min-height:44px}
  #game-window[data-panel="catalog"] .catalog-arrow > span {width:20px;height:32px}
  #game-window[data-panel="catalog"] .catalog-name {
    grid-area:2 / 1 / 3 / -1;
    justify-self:center;
    width:100%;
    height:36px;
    min-height:0;
    margin:0;
    padding:3px 12px;
    font-size:17px;
    line-height:1.2;
    overflow:auto;
    overflow-wrap:anywhere;
  }
  #game-window[data-panel="catalog"] .catalog-description {
    grid-area:3 / 1 / 4 / 2;
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    padding:2px;
    font-size:12px;
    line-height:1.5;
    -webkit-line-clamp:unset;
    overflow:auto;
    overscroll-behavior:contain;
  }
  #game-window[data-panel="catalog"] .catalog-facts {
    grid-area:3 / 2 / 4 / 3;
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    padding:2px;
    gap:4px;
    font-size:12px;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  #game-window[data-panel="catalog"] .catalog-facts > div {min-height:26px;padding-bottom:3px;gap:6px;border-bottom-width:2px;flex:none}
  #game-window[data-panel="catalog"] .catalog-facts :is(dt,dd) {min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.35;font-weight:700}
  #game-window[data-panel="catalog"] .catalog-facts dd {text-align:right}
  #game-window[data-panel="catalog"] .catalog-page-count {grid-area:4 / 1 / 5 / -1;margin:0;padding:2px;font-size:11px;line-height:14px}
}

@media (max-width:600px) {
  #game-window[data-panel="shop"] .shop-art-layout.shop-layout {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(100px,1fr) minmax(220px,1.1fr);
    gap:8px;
    padding:54px 8px 38px;
  }
  #game-window[data-panel="shop"] .shop-detail {padding:8px;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr)}
  #game-window[data-panel="shop"] .shop-main {padding:6px}
  #game-window[data-panel="shop"] .shop-wallet {left:8px}
  #game-window[data-panel="catalog"] {background-size:200% 100%;background-position:left center}
  #game-window[data-panel="catalog"] #panel-content {inset:50px 12px 12px}
  #game-window[data-panel="catalog"] .catalog-book {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(150px,1fr) minmax(190px,1fr);
    gap:10px;
    padding:6px;
    background:none;
  }
}

/* A short viewport (including an open keyboard) must never grow the outer modal. */
@media (max-width:600px) and (max-height:490px) {
  #game-window[data-panel="shop"] .shop-art-layout.shop-layout {
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    grid-template-rows:minmax(0,1fr);
    gap:6px;
    padding:50px 6px 36px;
  }
  #game-window[data-panel="shop"] .shop-list {grid-template-columns:minmax(0,1fr)}
  #game-window[data-panel="shop"] .unified-shop [data-category="potion"],
  #game-window[data-panel="shop"] .unified-shop .potion-offer-complete {grid-column:1}
  #game-window[data-panel="shop"] .shop-detail {grid-template-columns:minmax(0,1fr);grid-template-rows:32px minmax(0,1fr) 40px 48px 24px;padding:5px}
  #game-window[data-panel="shop"] .shop-selected-preview {grid-row:3;height:40px}
  #game-window[data-panel="shop"] .shop-selected-preview :is(.detail-art,.selected-stock) {display:none}
  #game-window[data-panel="shop"] .shop-detail :is(.detail-name,.detail-facts,.unified-potion-facts) {grid-column:1}
  #game-window[data-panel="shop"] .shop-checkout {grid-row:4}
  #game-window[data-panel="shop"] .detail-footnote {grid-row:5;height:24px}
  #game-window[data-panel="catalog"] .catalog-book {grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:8px}
  #game-window[data-panel="catalog"] .catalog-entries {grid-template-columns:minmax(0,1fr)}
  #game-window[data-panel="catalog"] .catalog-right {grid-template-columns:minmax(0,1fr);grid-template-rows:44px 32px minmax(0,.7fr) minmax(0,1fr) 18px}
  #game-window[data-panel="catalog"] .catalog-preview-row {height:44px;grid-template-columns:36px minmax(0,1fr) 36px}
  #game-window[data-panel="catalog"] .catalog-preview {width:44px;height:44px}
  #game-window[data-panel="catalog"] .catalog-arrow {width:36px;min-width:36px}
  #game-window[data-panel="catalog"] .catalog-name {height:32px;font-size:14px}
  #game-window[data-panel="catalog"] .catalog-description {grid-area:3 / 1 / 4 / 2;display:block}
  #game-window[data-panel="catalog"] .catalog-facts {grid-area:4 / 1 / 5 / 2}
  #game-window[data-panel="catalog"] .catalog-page-count {grid-area:5 / 1 / 6 / -1}
}


/* Original stylesheet: ./src/responsive-catalysis.css */
:root {--catalysis-panel-width:min(340px,calc(var(--ui-viewport-width)*.41))}
#catalysis-panel {--catalysis-portrait:0;--catalysis-compact:0}
@media(max-width:1050px),(max-height:700px) {
 #catalysis-panel {--catalysis-compact:1}
 #catalysis-panel {box-sizing:border-box;left:auto;right:calc(var(--ui-safe-right) + 8px);top:calc(var(--ui-viewport-top) + var(--ui-safe-top) + 8px);bottom:auto;transform:none;width:var(--catalysis-panel-width);max-width:none;height:calc(var(--ui-viewport-height) - var(--ui-safe-top) - var(--ui-safe-bottom) - 16px);max-height:none;min-height:0;padding:10px;gap:6px;border-radius:18px}
 #catalysis-panel header {gap:5px;min-height:36px}
 #catalysis-panel {left:calc(var(--ui-viewport-left) + var(--ui-viewport-width) - var(--ui-safe-right) - 8px - var(--catalysis-panel-width));right:auto}
 #catalysis-panel h2 {font-size:17px;line-height:1.3;overflow-wrap:anywhere}
 #catalysis-panel .catalysis-heading {min-width:0;gap:4px;flex-wrap:wrap}
 #catalysis-panel .catalysis-heading .catalysis-stage {font-size:11px;line-height:1.2}
 #catalysis-panel header button {width:36px;height:36px;min-width:36px;min-height:36px;padding:4px;flex-shrink:0;font-size:20px}
 #catalysis-panel .catalysis-content {min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;font-size:13px;line-height:1.45}
 #catalysis-panel .catalysis-content label {font-size:13px}
 #catalysis-panel .catalysis-history {font-size:12px;line-height:1.6;overflow-wrap:anywhere;margin:5px 0}
 #catalysis-panel .catalysis-mutation {font-size:12px;margin:5px 0}
 #catalysis-panel .catalysis-potion-description {font-size:12px;line-height:1.5;margin:5px 0;flex-wrap:wrap;overflow-wrap:anywhere}
 #catalysis-panel .catalysis-legend {font-size:12px;gap:4px}
 #catalysis-panel .catalysis-actions {gap:5px;flex-shrink:0}
 #catalysis-panel .catalysis-result {font-size:13px;min-height:18px;margin:0}
 #catalysis-panel .catalysis-cast {height:42px;min-height:42px;font-size:19px;padding:5px}
 #catalysis-panel[data-mature=true] .catalysis-cast {font-size:14px}
 #catalysis-panel .catalysis-exit {height:32px;min-height:32px;font-size:12px;padding:4px}
 #catalysis-potions {box-sizing:border-box;min-height:0;overflow-y:auto;overscroll-behavior:contain}
 #catalysis-potions button {flex:0 0 auto;min-height:56px}
 #catalysis-scene-cards {box-sizing:border-box;width:370px;gap:5px;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)}
 #catalysis-scene-cards .catalysis-stat-card {min-width:0;min-height:64px;padding:6px 4px;gap:3px;border-radius:12px}
 #catalysis-scene-cards .catalysis-stat-card[data-card=value] {min-height:72px;padding:6px 4px}
 #catalysis-scene-cards .stat-heading {font-size:10px;white-space:normal;line-height:1.2;gap:3px}
 #catalysis-scene-cards .stat-heading .crop-icon {width:14px;height:14px}
 #catalysis-scene-cards strong {font-size:20px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
 #catalysis-scene-cards small {font-size:9px;line-height:1.3;overflow-wrap:anywhere}
 #catalysis-scene-cards .yield-range {font-size:9px;height:18px;line-height:18px}
 #catalysis-idle-hand {font-size:24px;width:28px;height:28px}
}
@media(max-width:700px) and (orientation:portrait) {
 #catalysis-panel {--catalysis-portrait:1}
 #catalysis-panel {left:calc(var(--ui-viewport-left) + var(--ui-safe-left) + 8px);right:auto;top:calc(var(--ui-viewport-top) + var(--ui-viewport-height) - var(--ui-safe-bottom) - 8px - min(324px,var(--ui-viewport-height)*.42));width:calc(var(--ui-viewport-width) - var(--ui-safe-left) - var(--ui-safe-right) - 16px);height:min(324px,calc(var(--ui-viewport-height)*.42));padding:9px;gap:4px}
 #catalysis-potions {display:flex;flex-direction:row;align-items:center;gap:5px;height:64px;padding:3px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
 #catalysis-potions button {width:54px;height:56px;min-width:54px;min-height:56px;padding:2px;gap:1px;font-size:10px;overflow:hidden}
 #catalysis-potions .potion-slot-art {width:27px;height:27px;min-height:27px;flex-shrink:0}
 #catalysis-potions .rarity-name {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;width:100%;max-height:20px;font-size:9px;line-height:10px}
 #catalysis-scene-cards .catalysis-stat-card {min-height:58px}
 #catalysis-scene-cards .catalysis-stat-card[data-card=value] {min-height:64px}
 #catalysis-panel .catalysis-actions {display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:4px}
 #catalysis-panel .catalysis-result {grid-column:1/-1;min-height:16px;line-height:16px;font-size:12px}
 #catalysis-panel .catalysis-exit {height:42px;min-height:42px}
 #catalysis-panel .catalysis-exit kbd {display:none}
}


/* Original stylesheet: ./src/responsive-overlays.css */
/* Dialog frames stay inside the visible screen; only their reading areas scroll. */
:root {
 --ui-overlay-width:calc(var(--ui-viewport-width, 100vw) - var(--ui-safe-left, 0px) - var(--ui-safe-right, 0px) - 16px);
 --ui-overlay-height:calc(var(--ui-viewport-height, 100dvh) - var(--ui-safe-top, 0px) - var(--ui-safe-bottom, 0px) - 16px);
}

#title-settings,
#story-dialog,
#pause-dialog,
#confirm-dialog {
 inset:var(--ui-safe-top, 0px) var(--ui-safe-right, 0px) var(--ui-safe-bottom, 0px) var(--ui-safe-left, 0px);
 max-width:var(--ui-overlay-width);
 max-height:var(--ui-overlay-height);
 overflow:hidden;
}

#title-settings[open],
#pause-dialog[open],
#confirm-dialog[open] {
 display:flex;
 flex-direction:column;
}

#title-settings header,
#title-settings footer,
#pause-dialog :is(.dialog-art, h2, button),
#confirm-dialog :is(h2, .button-row) {
 flex-shrink:0;
}

#title-settings .title-setting-fields {
 min-height:0;
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-width:thin;
}

#title-settings .title-setting { flex-shrink:0; }
#title-settings h2 { overflow-wrap:anywhere; }
#pause-dialog p,
#confirm-dialog p {
 min-height:0;
 overflow-y:auto;
 overscroll-behavior:contain;
 overflow-wrap:anywhere;
}

#panel-overlay:has(#game-window[data-panel=settings]) {
 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=settings] {
 min-width:0;
 min-height:0;
 max-width:100%;
 max-height:100%;
}

#game-window[data-panel=settings] .window-header h1 { letter-spacing:0; }
#game-window[data-panel=settings] #panel-content { overflow-x:hidden; }
.farm-settings :is(.settings-card, .setting-row, .button-row, .settings-recovery) { min-width:0; }
.farm-settings :is(button, label, select) { min-width:0; overflow-wrap:anywhere; }
.farm-settings .settings-recovery { grid-template-columns:repeat(2,minmax(0,1fr)); }

#start-screen {
 width:var(--ui-viewport-width, 100vw);
 height:var(--ui-viewport-height, 100dvh);
}

#story-dialog .story-letter-layout { flex:1 1 auto; }
#story-dialog .story-letter-pages { min-width:0; }
#story-dialog .story-letter-pages button { flex-shrink:0; }
#story-dialog > footer { min-width:0; }
#story-dialog .story-letter-count { min-width:0; overflow-wrap:anywhere; }
#story-dialog .story-primary { flex-shrink:0; }

#story-guide {
 top:calc(var(--ui-safe-top, 0px) + 104px);
 left:calc(var(--ui-safe-left, 0px) + 16px);
 max-width:calc(var(--ui-overlay-width) - 64px);
 max-height:calc(var(--ui-overlay-height) - 208px);
 display:flex;
 flex-direction:column;
}

/* Field guidance must leave the movement control's full touch area clear. */
@media (max-width:1050px), (max-height:700px) {
 #story-guide:not([data-panel=true]) {--story-hud-top:104px;max-height:calc(var(--hud-control-ceiling) - var(--ui-safe-top) - var(--story-hud-top))}
}
@media (max-width:600px) {
 #story-guide:not([data-panel=true]) {--story-hud-top:84px}
}
@media (max-height:550px) {
 #story-guide:not([data-panel=true]) {--story-hud-top:69px}
 #story-guide:not([data-panel=true]):not([data-collapsed=true]) {padding:12px 19px 10px}
 #story-guide:not([data-panel=true]) .story-steps {margin-top:4px}
}

#story-guide header,
#story-guide footer,
#story-guide .story-steps { flex-shrink:0; }
#story-guide .story-guide-copy {
 min-width:0;
 min-height:0;
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 overflow-wrap:anywhere;
}

body[data-story-panel=true] { --ui-story-panel-height:124px; }
body[data-story-panel=true]:has(#story-guide[data-collapsed=true]) { --ui-story-panel-height:60px; }
#story-guide[data-panel=true] {
 top:calc(var(--ui-safe-top, 0px) + 8px);
 left:calc(var(--ui-safe-left, 0px) + (var(--ui-viewport-width, 100vw) - var(--ui-safe-left, 0px) - var(--ui-safe-right, 0px)) / 2);
 width:min(790px,var(--ui-overlay-width));
 max-width:var(--ui-overlay-width);
 height:var(--ui-story-panel-height, 124px);
 max-height:var(--ui-story-panel-height, 124px);
 grid-template-rows:28px minmax(0,1fr);
 padding:9px 18px 12px;
}

#story-guide[data-panel=true] .story-guide-copy { align-self:stretch; }
#story-guide[data-panel=true] footer { min-width:0; }
#story-guide[data-panel=true][data-collapsed=true] { grid-template-rows:1fr; }
body[data-story-panel=true] #panel-overlay:has(#game-window) {
 top:var(--ui-viewport-top, 0px);
 bottom:auto;
 height:var(--ui-viewport-height, 100dvh);
 padding-top:calc(var(--ui-safe-top, 0px) + var(--ui-story-panel-height) + 16px);
 padding-bottom:calc(var(--ui-safe-bottom, 0px) + 8px);
}

#story-feedback-banner,
#story-feedback-banner[data-kind=claim] {
 min-width:0;
 max-width:var(--ui-overlay-width);
}

.potion-acquisition {
 width:var(--ui-viewport-width, 100vw);
 height:var(--ui-viewport-height, 100dvh);
 overflow:hidden;
}

.potion-acquisition .acquisition-content {
 height:100%;
 min-height:0;
 padding-top:calc(var(--ui-safe-top, 0px) + 18px);
 padding-right:calc(var(--ui-safe-right, 0px) + 24px);
 padding-bottom:calc(var(--ui-safe-bottom, 0px) + 18px);
 padding-left:calc(var(--ui-safe-left, 0px) + 24px);
}

.potion-acquisition :is(.acquisition-heading, h2, .acquisition-description, .acquisition-hint) { flex-shrink:0; }
.potion-acquisition h2 { max-width:100%; overflow-wrap:anywhere; }
.potion-acquisition .acquisition-facts {
 min-height:0;
 flex:0 1 auto;
 overflow-y:auto;
 overflow-x:hidden;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 scrollbar-color:#c7ad6b transparent;
 padding:0 3px 18px;
}

/* Entrance transforms must not expose a scrollbar before the facts arrive. */
.potion-acquisition[data-ready=false] .acquisition-facts { overflow-y:hidden; }
.potion-acquisition .acquisition-facts::-webkit-scrollbar { width:5px; }
.potion-acquisition .acquisition-facts::-webkit-scrollbar-track { background:transparent; }
.potion-acquisition .acquisition-facts::-webkit-scrollbar-thumb { background:#c7ad6b;border-radius:4px; }
.potion-acquisition .acquisition-heading { letter-spacing:0; }
.potion-acquisition .acquisition-fact { flex-shrink:0; }

.potion-acquisition .acquisition-fact { min-width:0; }
.potion-acquisition .acquisition-fact > span { min-width:0; white-space:normal; }
.potion-acquisition .acquisition-fact strong { min-width:0; overflow-wrap:anywhere; }

#animation-preview {
 top:calc(var(--ui-safe-top, 0px) + 12px);
 right:calc(var(--ui-safe-right, 0px) + 12px);
 max-width:calc(var(--ui-overlay-width) - 8px);
 max-height:calc(var(--ui-overlay-height) - 8px);
 overflow:hidden;
}

#animation-preview:not([hidden]) { display:flex; flex-direction:column; }
#animation-preview > header,
#animation-preview > footer { flex-shrink:0; min-width:0; }
#animation-preview > header > div { min-width:0; }
#animation-preview > header > button { flex-shrink:0; }
#animation-preview .animation-hint { flex-shrink:0; }
#animation-preview .animation-list {
 min-height:0;
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 grid-template-columns:repeat(2,minmax(0,1fr));
}

#animation-preview .animation-list button { min-width:0; }
#animation-preview .animation-list button span { min-width:0; overflow-wrap:anywhere; }
#animation-preview #animation-source { max-height:3em; overflow-y:auto; }

@media (max-width:760px), (max-height:640px) {
 #game-window[data-panel=settings] { border-width:5px; border-radius:20px; }
 #game-window[data-panel=settings] .window-header { min-height:52px; padding:8px 12px; }
 #game-window[data-panel=settings] .window-header h1 { font-size:22px; }
 #game-window[data-panel=settings] #window-icon { width:30px; height:30px; }
 #game-window[data-panel=settings] #panel-content { padding:10px; }
 .farm-settings { gap:10px; }
 .farm-settings .settings-card { padding:10px; }
 .farm-settings .settings-welcome { padding-left:10px; }
 .farm-settings .settings-sprout { display:none; }
 .farm-settings .button-row { gap:8px; }
 .farm-settings .setting-row { gap:8px; padding:8px 0; }
 .farm-settings .setting-row label { font-size:14px; }
 .farm-settings button { font-size:14px; padding:8px; }
 .farm-settings select { font-size:14px; padding:6px; }
 #title-settings header { padding:12px 16px; }
 #title-settings h2 { font-size:22px; }
 #title-settings .title-setting-fields { padding:0 16px; }
 #title-settings .title-setting { min-height:52px; gap:12px; font-size:16px; }
 #title-settings footer { padding:10px 16px 14px; }
 #title-settings footer button { height:44px; }
 .potion-acquisition .acquisition-content { gap:8px; padding:calc(var(--ui-safe-top, 0px) + 12px) calc(var(--ui-safe-right, 0px) + 16px) calc(var(--ui-safe-bottom, 0px) + 12px) calc(var(--ui-safe-left, 0px) + 16px); }
 .potion-acquisition .acquisition-art { width:150px; height:128px; }
 .potion-acquisition .acquisition-heading { font-size:12px; letter-spacing:0; }
 .potion-acquisition h2 { font-size:26px; }
 .potion-acquisition .acquisition-description { font-size:13px; line-height:1.5; }
 .potion-acquisition .acquisition-fact { padding:8px 10px; font-size:13px; }
 .potion-acquisition .acquisition-hint { font-size:12px; margin:2px 0 0; }
 #animation-preview { padding:12px; }
 #animation-preview h2 { font-size:20px; }
 #animation-preview .animation-hint { max-height:3em; overflow-y:auto; margin:6px 0; }
 #animation-preview .animation-list { margin:8px 0; }
 #animation-preview footer { gap:7px; padding-top:8px; }
}

@media (max-width:600px) {
 #story-guide { top:calc(var(--ui-safe-top, 0px) + 84px); left:calc(var(--ui-safe-left, 0px) + 8px); max-height:calc(var(--ui-overlay-height) - 190px); }
 #story-guide[data-panel=true] { top:calc(var(--ui-safe-top, 0px) + 8px); left:calc(var(--ui-safe-left, 0px) + (var(--ui-viewport-width, 100vw) - var(--ui-safe-left, 0px) - var(--ui-safe-right, 0px)) / 2); max-height:var(--ui-story-panel-height); padding:9px 14px 10px; }
 #story-dialog { padding:14px 16px; }
 #story-dialog .story-letter-pages { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding-bottom:6px; }
 #story-dialog .story-letter-layout { display:block; padding:6px 2px; }
 #story-dialog .story-letter-art { float:left; width:80px; margin:0 12px 5px 0; }
 #story-dialog .story-letter-art > .story-ahe { width:80px; max-height:106px; }
 #story-dialog .story-letter-layout h2 { font-size:20px; }
 #story-dialog .story-primary { min-height:40px; padding:8px 12px; }
 #pause-dialog, #confirm-dialog { padding:18px; }
 #confirm-dialog .button-row { gap:8px; }
 #confirm-dialog .button-row > button { flex:1; min-width:0; }
}

@media (max-aspect-ratio:9/10) {
 #start-screen .title-composition { padding:calc(var(--ui-safe-top, 0px) + 24px) calc(var(--ui-safe-right, 0px) + 20px) calc(var(--ui-safe-bottom, 0px) + 20px) calc(var(--ui-safe-left, 0px) + 20px); }
 #start-screen #title-status { bottom:calc(var(--ui-safe-bottom, 0px) + 164px); }
 #start-screen #title-retry { bottom:calc(var(--ui-safe-bottom, 0px) + 164px); }
}

@media (max-height:640px) and (max-aspect-ratio:9/10) {
 #start-screen .title-composition { padding-top:calc(var(--ui-safe-top, 0px) + 20px); padding-bottom:calc(var(--ui-safe-bottom, 0px) + 16px); }
 #start-screen #title-status, #start-screen #title-retry { bottom:calc(var(--ui-safe-bottom, 0px) + 140px); }
 .potion-acquisition .acquisition-art { width:120px; height:96px; }
 .potion-acquisition h2 { font-size:23px; }
 .potion-acquisition .acquisition-fact { padding:6px 8px; gap:6px; }
}

@media (max-width:700px) and (max-height:700px) {
 body[data-story-panel=true] { --ui-story-panel-height:84px; }
}

@media (max-height:550px) {
 body[data-story-panel=true] { --ui-story-panel-height:84px; }
 #story-guide { top:calc(var(--ui-safe-top, 0px) + 69px); max-height:calc(var(--ui-overlay-height) - 155px); }
 #story-guide[data-panel=true] { top:calc(var(--ui-safe-top, 0px) + 8px); max-height:var(--ui-story-panel-height); grid-template-rows:minmax(0,1fr); padding:9px 18px; }
 #story-guide[data-panel=true] footer { gap:0; }
 #story-dialog > header > button { width:34px; height:34px; min-width:34px; }
 #story-dialog .story-primary { min-height:38px; }
 #animation-preview > header small { display:none; }
 #animation-preview .animation-hint { display:none; }
 #animation-preview .animation-list { gap:4px; }
 #animation-preview #animation-source { max-height:1.5em; }
}

@media (max-height:550px) and (min-aspect-ratio:9/10) {
 #start-screen .title-composition { left:calc(var(--ui-safe-left, 0px) + 24px); top:calc(var(--ui-safe-top, 0px) + 18px); bottom:calc(var(--ui-safe-bottom, 0px) + 14px); width:290px; max-width:42%; gap:10px; justify-content:center; }
 #start-screen .title-brand > img { width:42px; height:42px; top:-12px; }
 #start-screen .title-brand h1 span { font-size:28px; }
 #start-screen .title-brand h1 strong { font-size:52px; }
 #start-screen .title-actions { gap:7px; width:230px; }
 #start-screen .title-action { height:50px; font-size:20px; }
 #start-screen .title-action-secondary { height:46px; font-size:18px; }
 #start-screen #title-status { margin:0; min-height:0; font-size:12px; }
 #start-screen #title-retry { margin:0; padding:8px 16px; }
 .potion-acquisition .acquisition-content { display:grid; width:min(760px,100%); grid-template-columns:minmax(110px, .65fr) minmax(0,2fr); grid-template-rows:auto auto auto minmax(0,1fr) auto; align-items:center; gap:5px 18px; text-align:left; }
 .potion-acquisition .acquisition-heading { grid-column:2; grid-row:1; }
 .potion-acquisition .acquisition-art { grid-column:1; grid-row:1 / 6; width:100%; max-width:160px; height:150px; justify-self:center; }
 .potion-acquisition h2 { grid-column:2; grid-row:2; font-size:23px; }
 .potion-acquisition .acquisition-description { grid-column:2; grid-row:3; font-size:12px; }
 .potion-acquisition .acquisition-facts { grid-column:2; grid-row:4; align-self:stretch; align-content:start; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; }
 .potion-acquisition .acquisition-fact { padding:5px 8px; font-size:12px; }
 .potion-acquisition .acquisition-fact[data-kind=mutation], .potion-acquisition .acquisition-fact[data-kind=special] { grid-column:1/-1; }
 .potion-acquisition .acquisition-hint { grid-column:2; grid-row:5; min-height:18px; }
}


/* Original stylesheet: ./src/landscape-shop.css */
/* 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}
}


/* Original stylesheet: ./src/landscape-inventory-pets.css */
/* Compact landscape keeps the desktop composition and the complete bitmap frame. */
@media (orientation:landscape) and (max-height:700px), (orientation:landscape) and (max-width:1050px) {
  #game-window:is([data-panel="bag"],[data-panel="pets"]) {
    --iu:.7px;
    --pu:.7px;
    width:min(1180px, 100%);
    height:100%;
    max-width:100%;
    max-height:min(690px, 100%);
    background-size:100% 100%;
    background-position:center;
  }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) .window-header>div {
    left:17%;
    top:3%;
    width:21%;
    height:13%;
    min-height:36px;
    background:none;
  }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) .window-header { height:100%; }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) .window-header h1 { font-size:24px;letter-spacing:0; }
  html[data-locale-layout="latin"] #game-window[data-panel="bag"] .window-header h1 { font-size:21px; }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-close {
    top:22%;
    right:0;
    width:58px;
    height:44px;
    min-width:44px;
    min-height:44px;
  }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-content {
    position:absolute;
    inset:20% 7% 3% 10%;
    padding:0;
    overflow:hidden;
  }
  #game-window[data-panel="bag"] #panel-content { overflow:visible; }

  #game-window[data-panel="bag"] .inventory-art-layout.inventory-layout,
  #game-window[data-panel="bag"] .inventory-art-layout.inventory-layout:has(.potion-inventory-detail) {
    --bag-preview-size:76px;
    display:grid;
    grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-rows:minmax(0, 1fr);
    grid-template-areas:"items detail";
    gap:12px;
    height:100%;
    min-height:0;
    padding:12px 10px 8px 34px;
    border-radius:24px;
    background:#fff3bd;
  }
  #game-window[data-panel="bag"] .inventory-art-layout::before { display:block;inset:12px 10px 8px 34px; }
  #game-window[data-panel="bag"] .inventory-categories {
    grid-area:auto;
    position:absolute;
    left:-48px;
    top:18px;
    bottom:12px;
    display:grid;
    grid-template-columns:78px;
    grid-template-rows:repeat(4, minmax(0, 1fr));
    align-content:start;
    gap:7px;
    max-height:240px;
    z-index:3;
  }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab[data-filter] {
    width:78px;
    height:44px;
    max-height:100%;
    min-height:0;
    padding:0;
    margin:0;
    border-radius:0;
    background-color:transparent;
    background-position:left center;
    background-size:auto 100%;
    background-repeat:no-repeat;
    box-shadow:none;
    justify-content:flex-start;
    align-self:center;
  }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab[data-filter].active { width:87px;margin-left:-9px; }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab[data-filter="all"] { background-image:url("../assets/ui-user/bag-tab-all-inactive.png"); }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab[data-filter="fruit"] { background-image:url("../assets/ui-user/bag-tab-crops-inactive.png"); }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab[data-filter="seed"] { background-image:url("../assets/ui-user/bag-tab-seeds-inactive.png"); }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab[data-filter="tool"] { background-image:url("../assets/ui-user/bag-tab-tools-inactive.png"); }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab[data-filter="all"].active { background-image:url("../assets/ui-user/bag-tab-all.png"); }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab[data-filter="fruit"].active { background-image:url("../assets/ui-user/bag-tab-crops.png"); }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab[data-filter="seed"].active { background-image:url("../assets/ui-user/bag-tab-seeds.png"); }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab[data-filter="tool"].active { background-image:url("../assets/ui-user/bag-tab-tools.png"); }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab .bag-tab-label { width:42px;margin:0 0 0 34px;padding:0 2px;font-size:13px;line-height:1.2; }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab.active .bag-tab-label { width:49px;margin-left:36px; }
  #game-window[data-panel="bag"] .inventory-main { padding:5px 3px 0;background:none;border-radius:0; }
  #game-window[data-panel="bag"] .inventory-grid { grid-template-columns:repeat(3, minmax(0, 1fr));grid-auto-rows:108px;gap:7px 5px;padding:5px;flex:1 1 0;min-height:0;overflow:auto; }
  #game-window[data-panel="bag"] .inventory-slot,
  #game-window[data-panel="bag"] .inventory-slot.active { padding:4px 0;gap:4px; }
  #game-window[data-panel="bag"] .item-art { width:68px;height:68px; }
  #game-window[data-panel="bag"] .inventory-item-name { font-size:13px;line-height:1.3; }
  #game-window[data-panel="bag"] .inventory-footer { min-height:28px;margin:0;font-size:11px; }
  #game-window[data-panel="bag"] .inventory-footer button { min-height:28px;padding:3px 8px;font-size:12px; }
  #game-window[data-panel="bag"] .inventory-detail,
  #game-window[data-panel="bag"] .inventory-detail.potion-inventory-detail {
    grid-area:detail;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    height:100%;
    min-height:0;
    padding:0 5px 3px;
    border-radius:0;
    background:none;
    overflow:hidden;
  }
  #game-window[data-panel="bag"] .inventory-detail .inventory-selected-preview { width:100%;height:var(--bag-preview-size);margin:0;flex:none; }
  #game-window[data-panel="bag"] .inventory-detail .detail-art { width:var(--bag-preview-size);height:var(--bag-preview-size); }
  #game-window[data-panel="bag"] .inventory-detail .inventory-step { top:calc((var(--bag-preview-size) - 36px) / 2);width:28px;height:36px;min-width:28px;min-height:36px; }
  #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-detail .inventory-selected-count { left:4px;top:0;max-width:100%;height:22px;font-size:12px; }
  #game-window[data-panel="bag"] .inventory-detail .detail-name { flex:none;align-self:center;max-width:100%;padding:4px 10px;margin:0;font-size:17px;line-height:1.2; }
  #game-window[data-panel="bag"] .inventory-detail .quality-tag { flex:none;align-self:center;padding:2px 6px;margin:0;font-size:11px;line-height:1.2; }
  #game-window[data-panel="bag"] .inventory-detail .detail-facts { flex:1 1 0;min-height:0;overflow:auto;padding:0 5px 0 0;margin:0; }
  #game-window[data-panel="bag"] .inventory-detail .detail-facts>div { min-height:25px;padding:3px 0;gap:6px;border-bottom-width:2px; }
  #game-window[data-panel="bag"] .inventory-detail .detail-facts>div>:is(span,strong) { font-size:12px;line-height:1.4; }
  #game-window[data-panel="bag"] .inventory-detail .detail-actions { width:100%;flex:none;margin:0;gap:4px; }
  #game-window[data-panel="bag"] .inventory-detail .detail-actions button { min-height:36px;padding:6px 4px;font-size:13px; }

  #game-window[data-panel="pets"] #panel-content { left:8%;right:8%; }
  #game-window[data-panel="pets"] .pet-layout {
    --pet-preview-size:78px;
    --pet-roster-size:52px;
    --pet-button-height:36px;
    display:grid;
    grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-rows:100px minmax(0, 1fr);
    grid-template-areas:"roster detail" "workspace detail";
    height:100%;
    min-height:0;
    gap:7px 14px;
    padding:10px 12px;
    border-radius:24px;
    background:#fff3bd;
  }
  #game-window[data-panel="pets"] .pet-layout::before { display:block;inset:10px 12px; }
  #game-window[data-panel="pets"] .pet-roster { display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));grid-template-rows:minmax(0, 1fr);gap:4px;padding:0;border:0; }
  #game-window[data-panel="pets"] .pet-roster-item { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 2px; }
  #game-window[data-panel="pets"] .pet-roster-art { width:var(--pet-roster-size);height:var(--pet-roster-size); }
  #game-window[data-panel="pets"] .pet-roster-item strong { font-size:14px;line-height:1.2; }
  #game-window[data-panel="pets"] .pet-roster-item small { display:block;font-size:10px;line-height:1.2; }
  #game-window[data-panel="pets"] .pet-roster-status { display:block;padding:1px 4px;font-size:10px;line-height:1.2; }
  #game-window[data-panel="pets"] .pet-detail { display:flex;flex-direction:column;min-height:0;padding:0 4px 2px;gap:5px;border-radius:0;background:none; }
  #game-window[data-panel="pets"] .pet-profile { display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;flex:none; }
  #game-window[data-panel="pets"] .pet-preview { width:calc(var(--pet-preview-size) + 8px);height:var(--pet-preview-size);flex:none; }
  #game-window[data-panel="pets"] .pet-main-portrait { top:-4px;height:calc(var(--pet-preview-size) + 8px); }
  #game-window[data-panel="pets"] .pet-profile h2 { width:auto;max-width:100%;align-self:center;padding:4px 12px;font-size:18px;line-height:1.2; }
  #game-window[data-panel="pets"] .pet-form { display:block;align-self:center;padding:1px 6px;font-size:10px;line-height:1.2; }
  #game-window[data-panel="pets"] .pet-detail-scroll { flex:1 1 0;min-height:0;overflow:auto;padding:0 3px; }
  #game-window[data-panel="pets"] .pet-hunger-label,
  #game-window[data-panel="pets"] .pet-mutation-label { font-size:11px;line-height:1.35;gap:3px; }
  #game-window[data-panel="pets"] .pet-buff p { font-size:12px;line-height:1.4; }
  #game-window[data-panel="pets"] .pet-detail-actions { display:flex;flex-direction:column;gap:4px;padding:0;flex:none; }
  #game-window[data-panel="pets"] .pet-detail-actions button { min-height:var(--pet-button-height);padding:5px 7px;font-size:13px; }
  #game-window[data-panel="pets"] .pet-detail-actions .pet-upgrade { flex-direction:row;align-items:center;justify-content:space-between;gap:3px;padding:4px 6px;font-size:12px; }
  #game-window[data-panel="pets"] .pet-upgrade strong { font-size:11px; }
  #game-window[data-panel="pets"] .pet-upgrade img { width:16px;height:16px; }
  #game-window[data-panel="pets"] .pet-workspace { min-height:0;gap:5px;padding:0;border:0; }
  #game-window[data-panel="pets"] .pet-tabs { grid-template-columns:repeat(3, minmax(0, 1fr));gap:4px; }
  #game-window[data-panel="pets"] .pet-tabs button { height:34px;min-height:34px;padding:3px;font-size:13px;gap:4px; }
  #game-window[data-panel="pets"] .pet-tabs .crop-icon { width:20px;height:20px; }
  #game-window[data-panel="pets"] .pet-section-heading { gap:3px;padding:0 2px 3px; }
  #game-window[data-panel="pets"] .pet-section-heading h3 { display:block;font-size:13px; }
  #game-window[data-panel="pets"] .pet-section-heading>span { font-size:10px; }
  #game-window[data-panel="pets"] .pet-food-list,
  #game-window[data-panel="pets"] .pet-effect-list { grid-template-columns:repeat(3, minmax(0, 1fr));flex:1 1 0;min-height:0;max-height:none;overflow:auto;gap:5px 3px;padding:3px; }
  #game-window[data-panel="pets"] .pet-food-art { width:44px;height:44px; }
  #game-window[data-panel="pets"] .pet-food strong,
  #game-window[data-panel="pets"] .pet-effect strong { font-size:11px; }
  #game-window[data-panel="pets"] .pet-feed-footer { flex:none;gap:5px;margin-top:3px;padding:3px 1px 0; }
  #game-window[data-panel="pets"] .pet-feed-footer label { font-size:12px; }
  #game-window[data-panel="pets"] .pet-feed-footer input { width:52px;height:36px;font-size:16px; }
  #game-window[data-panel="pets"] .pet-feed-footer .pet-primary { min-height:36px;height:36px;min-width:68px;padding:4px 10px;font-size:13px; }
  #game-window[data-panel="pets"] .pet-work-scroll { min-height:0;overflow:auto; }
}

@media (orientation:landscape) and (max-height:360px) {
  #game-window:is([data-panel="bag"],[data-panel="pets"]) .window-header h1 { font-size:21px; }
  #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-close { width:50px; }
  #game-window[data-panel="bag"] .inventory-art-layout.inventory-layout,
  #game-window[data-panel="bag"] .inventory-art-layout.inventory-layout:has(.potion-inventory-detail) { --bag-preview-size:52px;gap:8px;padding:8px 6px 6px 29px; }
  #game-window[data-panel="bag"] .inventory-art-layout::before { inset:8px 6px 6px 29px; }
  #game-window[data-panel="bag"] .inventory-categories { left:-42px;top:8px;bottom:8px;grid-template-columns:68px;gap:5px; }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab[data-filter] { width:68px; }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab[data-filter].active { width:75px;margin-left:-7px; }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab .bag-tab-label { width:37px;margin-left:30px;font-size:12px; }
  #game-window[data-panel="bag"] .inventory-categories .bag-tab.active .bag-tab-label { width:42px;margin-left:31px; }
  #game-window[data-panel="bag"] .inventory-grid { grid-auto-rows:88px;padding:3px;gap:4px; }
  #game-window[data-panel="bag"] .item-art { width:52px;height:52px; }
  #game-window[data-panel="bag"] .inventory-item-name { font-size:12px; }
  #game-window[data-panel="bag"] .inventory-detail .detail-name { font-size:14px;padding:3px 6px; }
  #game-window[data-panel="bag"] .inventory-detail .quality-tag { font-size:10px; }
  #game-window[data-panel="bag"] .inventory-detail .detail-facts>div>:is(span,strong) { font-size:11px; }
  #game-window[data-panel="pets"] .pet-layout { --pet-preview-size:48px;--pet-roster-size:34px;--pet-button-height:32px;grid-template-rows:76px minmax(0, 1fr);padding:7px;gap:5px 9px; }
  #game-window[data-panel="pets"] .pet-layout::before { inset:7px; }
  #game-window[data-panel="pets"] .pet-roster-item strong { font-size:13px; }
  #game-window[data-panel="pets"] .pet-profile h2 { font-size:15px;padding:3px 8px; }
  #game-window[data-panel="pets"] .pet-profile { gap:2px; }
  #game-window[data-panel="pets"] .pet-detail { gap:4px;padding:0 3px; }
  #game-window[data-panel="pets"] .pet-detail-actions button { padding:3px 5px;font-size:12px; }
  #game-window[data-panel="pets"] .pet-detail-actions .pet-upgrade { font-size:11px;padding:3px 4px; }
  #game-window[data-panel="pets"] .pet-tabs button { min-height:30px;height:30px;font-size:12px;gap:2px; }
  #game-window[data-panel="pets"] .pet-tabs .crop-icon { width:17px;height:17px; }
  #game-window[data-panel="pets"] .pet-section-heading h3 { font-size:12px; }
  #game-window[data-panel="pets"] .pet-section-heading>span { font-size:9px; }
  #game-window[data-panel="pets"] .pet-food-art { width:34px;height:34px; }
  #game-window[data-panel="pets"] .pet-feed-footer input,
  #game-window[data-panel="pets"] .pet-feed-footer .pet-primary { min-height:32px;height:32px; }
}

/* Story keeps its reserved space; decorations yield before the action buttons do. */
@media (orientation:landscape) and (max-height:430px) {
  body[data-story-panel=true] #game-window:is([data-panel="bag"],[data-panel="pets"]) #panel-content { inset:18% 7% 2% 10%; }
  body[data-story-panel=true] #game-window[data-panel="pets"] #panel-content { left:8%;right:8%; }
  body[data-story-panel=true] #game-window[data-panel="bag"] .inventory-art-layout.inventory-layout,
  body[data-story-panel=true] #game-window[data-panel="bag"] .inventory-art-layout.inventory-layout:has(.potion-inventory-detail) { --bag-preview-size:32px;grid-template-areas:"items detail";grid-template-rows:minmax(0, 1fr);padding-top:5px;padding-bottom:5px; }
  body[data-story-panel=true] #game-window[data-panel="bag"] .inventory-categories { top:4px;bottom:4px;gap:3px; }
  body[data-story-panel=true] #game-window[data-panel="bag"] .inventory-detail { gap:2px;padding-top:0;padding-bottom:0; }
  body[data-story-panel=true] #game-window[data-panel="bag"] .inventory-detail .detail-name { font-size:13px;padding:2px 6px; }
  body[data-story-panel=true] #game-window[data-panel="bag"] .inventory-detail .quality-tag { font-size:10px;padding:1px 4px; }
  body[data-story-panel=true] #game-window[data-panel="bag"] .inventory-detail .detail-actions button { min-height:32px;padding:4px;font-size:12px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-layout { --pet-preview-size:30px;--pet-roster-size:24px;--pet-button-height:30px;grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr);grid-template-rows:42px minmax(0, 1fr);grid-template-areas:"roster detail" "workspace detail";padding:5px 7px;gap:4px 9px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-layout::before { inset:5px 7px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-roster { grid-template-columns:repeat(3, minmax(0, 1fr));grid-template-rows:minmax(0, 1fr); }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-roster-item { display:flex;gap:1px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-roster-item strong { font-size:12px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-roster-item small,
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-roster-status { display:none; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-profile { gap:2px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-profile h2 { font-size:14px;padding:2px 7px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-form { display:none; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-detail { gap:3px;padding-bottom:0; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-detail-actions button { min-height:30px;font-size:12px;padding:3px 5px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-detail-actions .pet-upgrade { padding:2px 4px;font-size:11px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-workspace { gap:3px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-tabs button { min-height:28px;height:28px;padding:2px;font-size:12px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-section-heading { display:none; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-feed-footer { margin-top:2px;padding-top:2px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-feed-footer input,
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-feed-footer .pet-primary { min-height:30px;height:30px; }
}


/* Original stylesheet: ./src/landscape-catalog.css */
/* Landscape keeps the open-book composition, with smaller trim and readable content. */
@media (orientation:landscape) and (max-height:700px), (orientation:landscape) and (max-width:1050px) {
 #panel-overlay:has(#game-window[data-panel="catalog"]) {
  padding:calc(var(--ui-safe-top,0px) + 30px) calc(var(--ui-safe-right,0px) + 12px) calc(var(--ui-safe-bottom,0px) + 12px) calc(var(--ui-safe-left,0px) + 36px);
  justify-content:center;
  align-items:center;
 }
 #game-window[data-panel="catalog"] {
  width:min(1120px,100%,calc((var(--ui-viewport-height,100dvh) - var(--ui-safe-top,0px) - var(--ui-safe-bottom,0px) - 42px) * 2.1));
  height:auto;
  aspect-ratio:2.1;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  overflow:visible;
  background:url("../assets/ui-user/book-frame.png") center / 100% 100% no-repeat;
 }
 #game-window[data-panel="catalog"] .window-header {
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
 }
 #game-window[data-panel="catalog"] .window-header > div {
  inset:32px auto auto -27px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:54px;
  height:116px;
  padding:10px 12px;
  border-radius:0;
  background:url("../assets/ui-user/catalog-tab.png") center / 100% 100% no-repeat;
 }
 #game-window[data-panel="catalog"] #window-title,
 html[data-locale-layout="latin"] #game-window[data-panel="catalog"] #window-title {
  width:1.1em;
  font-size:24px;
  line-height:1.25;
  letter-spacing:0;
  white-space:normal;
  color:#ad3527;
  writing-mode:horizontal-tb;
  text-shadow:1px 1px #ffefb3,-1px -1px #ffefb3;
 }
 html[data-locale-layout="latin"] #game-window[data-panel="catalog"] #window-title { writing-mode:vertical-rl; font-size:16px; width:auto; }
 #game-window[data-panel="catalog"] #panel-close {
  inset:-27px 25px auto auto;
  width:48px;
  height:59px;
  min-width:44px;
  min-height:44px;
  padding:0;
  border-radius:0;
  background:url("../assets/ui-user/catalog-close.png") center top / 100% auto no-repeat;
  pointer-events:auto;
 }
 #game-window[data-panel="catalog"] #panel-content {
  position:absolute;
  inset:16px 30px 20px 17px;
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  padding:0;
  overflow:hidden;
  background:none;
  border-radius:0;
 }
 #game-window[data-panel="catalog"] .catalog-book {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  column-gap:10%;
  row-gap:0;
  width:100%;
  height:100%;
  min-height:0;
  padding:8px 15px;
  background:url("../assets/ui-user/book-pages.png") center / 100% 100% no-repeat;
 }
 #game-window[data-panel="catalog"] .catalog-left {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:20px minmax(0,1fr) 36px;
  gap:5px;
  min-width:0;
  min-height:0;
  padding:0;
  overflow:hidden;
 }
 #game-window[data-panel="catalog"] .catalog-discovery-count { margin:0; font-size:13px; line-height:20px; }
 #game-window[data-panel="catalog"] .catalog-entries {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  grid-auto-rows:auto;
  gap:7px 5px;
  width:100%;
  height:100%;
  min-height:0;
  padding:0;
  overflow:hidden;
  align-content:stretch;
 }
 #game-window[data-panel="catalog"] .catalog-entry {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto 16px;
  justify-items:center;
  align-items:center;
  min-width:0;
  min-height:0;
  height:100%;
  padding:0;
  gap:1px;
  overflow:hidden;
  border-radius:0;
 }
 #game-window[data-panel="catalog"] .catalog-entry-art {
  align-self:stretch;
  width:min(100%,106px);
  height:100%;
  min-height:0;
  max-height:none;
  background-size:contain;
 }
 #game-window[data-panel="catalog"] .catalog-entry > strong,
 html[data-locale-layout="latin"] #game-window[data-panel="catalog"] .catalog-entry > strong {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  width:100%;
  margin:0;
  font-size:14px;
  line-height:16px;
  letter-spacing:0;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  text-shadow:1px 1px #ffe39d;
 }
 #game-window[data-panel="catalog"] .catalog-discovery { margin:0; padding:0 5px; font-size:10px; line-height:14px; white-space:nowrap; }
 #game-window[data-panel="catalog"] .catalog-fruit-art { width:90%; height:90%; }
 #game-window[data-panel="catalog"] .catalog-illustration { scale:1; translate:none; }
 #game-window[data-panel="catalog"] .catalog-pagination { min-height:0; gap:14px; font-size:13px; line-height:18px; }
 #game-window[data-panel="catalog"] .catalog-pagination button { width:44px; height:36px; min-width:44px; min-height:36px; padding:0; font-size:25px; }
 #game-window[data-panel="catalog"] .catalog-right {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(80px,1fr) 34px 34px minmax(0,104px) 14px;
  gap:3px;
  align-content:stretch;
  align-items:stretch;
  justify-items:center;
  min-width:0;
  min-height:0;
  padding:0 3px;
  overflow:hidden;
 }
 #game-window[data-panel="catalog"] .catalog-preview-row {
  grid-area:1 / 1;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 40px;
  width:100%;
  height:100%;
  min-height:0;
  max-width:none;
  gap:4px;
 }
 #game-window[data-panel="catalog"] .catalog-preview {
  width:auto;
  height:100%;
  aspect-ratio:1;
  max-width:100%;
  max-height:180px;
  min-width:0;
  min-height:0;
  align-self:center;
 }
 #game-window[data-panel="catalog"] .catalog-arrow { width:40px; height:44px; min-width:40px; min-height:44px; }
 #game-window[data-panel="catalog"] .catalog-arrow > span { width:21px; height:34px; }
 #game-window[data-panel="catalog"] .catalog-name,
 html[data-locale-layout="latin"] #game-window[data-panel="catalog"] .catalog-name {
  grid-area:2 / 1;
  width:min(220px,100%);
  height:100%;
  min-height:0;
  margin:0;
  padding:3px 10px;
  font-size:19px;
  line-height:22px;
  white-space:normal;
  overflow:hidden;
 }
 #game-window[data-panel="catalog"] .catalog-description {
  grid-area:3 / 1;
  display:block;
  width:96%;
  height:100%;
  min-height:0;
  margin:0;
  padding:0 3px;
  font-size:12px;
  line-height:16px;
  -webkit-line-clamp:unset;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
 }
 #game-window[data-panel="catalog"] .catalog-facts,
 html[data-locale-layout="latin"] #game-window[data-panel="catalog"] .catalog-facts {
  grid-area:4 / 1;
  display:flex;
  flex-direction:column;
  width:94%;
  height:100%;
  min-height:0;
  padding:0 3px;
  margin:0;
  gap:2px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  overscroll-behavior:contain;
  font-size:13px;
 }
 #game-window[data-panel="catalog"] .catalog-facts > div { flex:none; min-height:24px; gap:7px; padding:1px 0 3px; border-bottom-width:2px; border-radius:0; }
 #game-window[data-panel="catalog"] .catalog-facts :is(dt,dd) { min-width:0; font-size:13px; line-height:17px; white-space:normal; overflow-wrap:anywhere; }
 #game-window[data-panel="catalog"] .catalog-facts dd { text-align:right; }
 #game-window[data-panel="catalog"] .catalog-page-count { grid-area:5 / 1; margin:0; padding:0; font-size:11px; line-height:14px; }
}

@media (orientation:landscape) and (min-height:500px) and (max-width:1050px) {
 #game-window[data-panel="catalog"] .catalog-book { padding:12px 22px; }
 #game-window[data-panel="catalog"] .catalog-left { grid-template-rows:24px minmax(0,1fr) 40px; gap:7px; }
 #game-window[data-panel="catalog"] .catalog-entry-art { width:min(100%,126px); }
 #game-window[data-panel="catalog"] .catalog-entry > strong { font-size:15px; line-height:18px; }
 #game-window[data-panel="catalog"] .catalog-discovery { font-size:11px; }
 #game-window[data-panel="catalog"] .catalog-pagination button { height:40px; min-height:40px; }
 #game-window[data-panel="catalog"] .catalog-right { grid-template-rows:minmax(120px,1fr) 40px 40px minmax(0,120px) 16px; gap:4px; }
 #game-window[data-panel="catalog"] .catalog-name { font-size:22px; line-height:26px; }
 #game-window[data-panel="catalog"] .catalog-description { font-size:14px; line-height:19px; }
 #game-window[data-panel="catalog"] .catalog-facts :is(dt,dd) { font-size:15px; line-height:20px; }
 #game-window[data-panel="catalog"] .catalog-facts > div { min-height:28px; }
}

@media (orientation:landscape) and (max-width:650px), (orientation:landscape) and (max-height:350px) {
 #panel-overlay:has(#game-window[data-panel="catalog"]) { padding-top:calc(var(--ui-safe-top,0px) + 25px); padding-bottom:calc(var(--ui-safe-bottom,0px) + 7px); padding-left:calc(var(--ui-safe-left,0px) + 28px); padding-right:calc(var(--ui-safe-right,0px) + 8px); }
 #game-window[data-panel="catalog"] { width:min(100%,calc((var(--ui-viewport-height,100dvh) - var(--ui-safe-top,0px) - var(--ui-safe-bottom,0px) - 32px) * 2.1)); }
 #game-window[data-panel="catalog"] .window-header > div { left:-22px; top:28px; width:45px; height:101px; padding:8px 10px; }
 #game-window[data-panel="catalog"] #window-title { font-size:21px; }
 #game-window[data-panel="catalog"] #panel-close { top:-22px; right:20px; width:44px; height:54px; }
 #game-window[data-panel="catalog"] #panel-content { inset:10px 22px 10px 12px; }
 #game-window[data-panel="catalog"] .catalog-book { padding:4px 8px; column-gap:9%; }
 #game-window[data-panel="catalog"] .catalog-left { grid-template-rows:17px minmax(0,1fr) 32px; gap:3px; }
 #game-window[data-panel="catalog"] .catalog-discovery-count { font-size:11px; line-height:17px; }
 #game-window[data-panel="catalog"] .catalog-entries { gap:3px; }
 #game-window[data-panel="catalog"] .catalog-entry > strong { font-size:12px; line-height:14px; }
 #game-window[data-panel="catalog"] .catalog-discovery { font-size:9px; padding:0 3px; line-height:13px; }
 #game-window[data-panel="catalog"] .catalog-pagination { gap:9px; font-size:12px; }
 #game-window[data-panel="catalog"] .catalog-pagination button { height:32px; min-height:32px; }
 #game-window[data-panel="catalog"] .catalog-right { grid-template-rows:68px 28px 26px minmax(0,1fr) 12px; gap:2px; padding:0; }
 #game-window[data-panel="catalog"] .catalog-preview-row { grid-template-columns:36px minmax(0,1fr) 36px; gap:2px; }
 #game-window[data-panel="catalog"] .catalog-arrow { width:36px; min-width:36px; }
 #game-window[data-panel="catalog"] .catalog-arrow > span { width:18px; height:30px; }
 #game-window[data-panel="catalog"] .catalog-name { font-size:16px; line-height:20px; padding:3px 8px; }
 #game-window[data-panel="catalog"] .catalog-description { font-size:11px; line-height:13px; }
 #game-window[data-panel="catalog"] .catalog-facts { gap:1px; width:96%; }
 #game-window[data-panel="catalog"] .catalog-facts > div { min-height:18px; padding:0 0 1px; border-bottom-width:1px; }
 #game-window[data-panel="catalog"] .catalog-facts :is(dt,dd) { font-size:12px; line-height:16px; }
 #game-window[data-panel="catalog"] .catalog-page-count { font-size:10px; line-height:12px; }
}


/* Original stylesheet: ./src/quest-claim-spotlight.css */
#quest-claim-spotlight{position:fixed;inset:0;z-index:95;pointer-events:none;isolation:isolate}
#quest-claim-spotlight[hidden]{display:none!important}
#quest-claim-spotlight .claim-shade{position:fixed;background:rgba(8,17,22,.79);pointer-events:auto;touch-action:none}
.claim-spotlight-ring{position:fixed;box-sizing:border-box;border:2px solid #ffe6a0;border-radius:12px;box-shadow:0 0 0 3px #ffd35b30,0 0 22px #ffc84f88;animation:claim-spotlight-breathe 1.5s ease-in-out infinite}
.claim-spotlight-arrow{position:fixed;width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 2px 3px #0007);transform:rotate(90deg);animation:claim-spotlight-point 1.1s ease-in-out infinite}
.claim-spotlight-arrow[data-direction=up]{transform:rotate(-90deg);--claim-point-y:-5px}
body[data-claim-spotlight=true] #story-feedback-pointer{visibility:hidden}
body[data-claim-spotlight=true] #main-quest{animation:none;transform:none}
body[data-claim-spotlight=true] #main-quest::after{animation:none;opacity:0}
body[data-claim-spotlight=true] .quest-claim-target{animation:none!important;outline:none!important;box-shadow:none!important}
#main-quest:has(.quest-claim-target){width:220px;max-width:calc(var(--ui-viewport-width,100vw) - 32px);height:auto;min-height:94px;padding:8px;gap:5px}
#main-quest .main-quest-claim.quest-claim-target{min-width:92px;min-height:44px;flex-shrink:0;padding:6px 10px;font-size:13px;border-radius:8px;background:#e3b954;color:#35260c}
#story-guide-primary.quest-claim-target{min-height:44px;font-size:14px}
@keyframes claim-spotlight-breathe{50%{border-color:#fff8d8;box-shadow:0 0 0 6px #ffd35b18,0 0 30px #ffc84faa}}
@keyframes claim-spotlight-point{50%{translate:0 var(--claim-point-y,5px)}}
body[data-reduced-motion=true] :is(.claim-spotlight-ring,.claim-spotlight-arrow){animation:none}
@media(prefers-reduced-motion:reduce){.claim-spotlight-ring,.claim-spotlight-arrow{animation:none}}


/* Original stylesheet: ./src/story-guide-locales.css */
/* Translated copy wraps inside the existing bitmap frames. */
html[data-locale-layout="latin"] #story-guide :is(h2,p,small,.story-guide-kicker),
html[data-locale-layout="latin"] #story-dialog :is(h2,.story-letter-subtitle,.story-letter-signature) {
 min-width:0;
 overflow-wrap:anywhere;
}
html[data-locale-layout="latin"] #story-guide footer {min-width:0;gap:7px}
html[data-locale-layout="latin"] #story-guide-primary {min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
html[data-locale-layout="latin"] #story-guide .story-skip {min-width:0;max-width:40%;white-space:normal;line-height:1.3;text-align:right}
html[data-locale-layout="latin"] #story-guide[data-panel=true] .story-skip {max-width:100%;text-align:center}
html[data-locale-layout="latin"] #story-dialog .story-letter-layout article {min-width:0}
html[data-locale-layout="latin"] #story-dialog>header>span {min-width:0;line-height:1.3}
html[data-locale-layout="latin"] #story-dialog>footer {flex-wrap:wrap}
html[data-locale-layout="latin"] #story-dialog .story-primary {max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.3;margin-left:auto}
html[data-locale-layout="latin"] .title-action>span {min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
html[data-locale-layout="latin"] .title-brand h1 span {font-size:37px}
html[data-locale-layout="latin"] .title-brand h1 strong {font-size:68px;line-height:1.2}
@media(max-aspect-ratio:9/10) {
 html[data-locale-layout="latin"] .title-brand h1 span {font-size:29px}
 html[data-locale-layout="latin"] .title-brand h1 strong {font-size:52px}
}
@media(max-height:560px) and (min-aspect-ratio:9/10) {
 html[data-locale-layout="latin"] .title-brand h1 span {font-size:25px;white-space:normal}
 html[data-locale-layout="latin"] .title-brand h1 strong {font-size:47px}
 html[data-locale-layout="latin"] .title-action {padding:8px 13px;font-size:18px;gap:9px}
 html[data-locale-layout="latin"] .title-action-secondary {font-size:16px}
}


/* Original stylesheet: ./src/localized-layout.css */
/* Keep the bitmap composition, with room for Latin words and accents, selected by locale metadata. */
html[data-locale-layout="latin"] body{font-family:"Segoe UI",system-ui,sans-serif}
html[data-locale-layout="latin"] :is(button,h1,h2,h3,.seed-name,.quest-header,.rarity-name){letter-spacing:0}
html[data-locale-layout="latin"] .game-actions button span{white-space:normal;overflow-wrap:anywhere;line-height:1.2}
html[data-locale-layout="latin"] #seed-dock .seed-name{white-space:normal;overflow-wrap:anywhere;font-size:14px;line-height:1.25;text-align:center}
html[data-locale-layout="latin"] #main-quest .main-quest-claim{white-space:normal;line-height:1.2;text-align:center}
html[data-locale-layout="latin"] #garden-record .quest-header{font-size:16px;line-height:1.2;text-align:center;white-space:normal}
html[data-locale-layout="latin"] #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[data-locale-layout="latin"] .inventory-art-layout .inventory-item-name{font-size:15px;line-height:1.25}
html[data-locale-layout="latin"] .inventory-art-layout .inventory-detail .detail-name{font-size:18px;line-height:1.25;overflow-wrap:anywhere}
html[data-locale-layout="latin"] .inventory-art-layout .detail-actions button{font-size:14px;line-height:1.3;white-space:normal}
html[data-locale-layout="latin"] .shop-art-layout .shop-detail .detail-name{font-size:19px;line-height:1.25}
html[data-locale-layout="latin"] :is(.item-fact-label,.catalog-facts dt){min-width:0;white-space:normal;overflow-wrap:break-word}
html[data-locale-layout="latin"] .detail-facts.item-facts strong{white-space:nowrap;overflow-wrap:normal;word-break:normal}
html[data-locale-layout="latin"] #catalysis-potions button{line-height:1.25;overflow-wrap:anywhere}
html[data-locale-layout="latin"] .catalysis-potion-description{flex-wrap:wrap;gap:5px;line-height:1.35}
html[data-locale-layout="latin"] .catalysis-legend{gap:7px}
html[data-locale-layout="latin"] .catalysis-legend span{white-space:normal;line-height:1.3}
html[data-locale-layout="latin"] .potion-acquisition h2{line-height:1.3}
@media(min-width:1051px) and (min-height:701px){
 html[data-locale-layout="latin"] #seed-dock .seed-slot{flex:0 0 100px;width:100px;height:140px;min-height:140px}
 html[data-locale-layout="latin"] #seed-dock .slot-art{width:76px;height:76px;min-height:76px}
 html[data-locale-layout="latin"] #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[data-locale-layout="latin"] #seed-dock .seed-slot{flex-basis:72px;width:72px;height:84px;min-height:84px}
 html[data-locale-layout="latin"] #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[data-locale-layout="latin"] .main-quest-finished{font-size:13px;line-height:1.3;align-self:center;grid-row:1/-1}
 html[data-locale-layout="latin"] .game-actions button{width:58px;height:64px;font-size:10px}
 html[data-locale-layout="latin"] #garden-record .quest-header{font-size:12px}
 html[data-locale-layout="latin"] #game-window:is([data-panel=bag],[data-panel=pets]) .window-header h1{font-size:19px}
 html[data-locale-layout="latin"] .inventory-art-layout .inventory-item-name{font-size:11px;line-height:1.25}
 html[data-locale-layout="latin"] .inventory-art-layout .inventory-detail .detail-name{font-size:13px;line-height:1.3}
 html[data-locale-layout="latin"] .inventory-art-layout .detail-actions button{font-size:12px;line-height:1.3}
 html[data-locale-layout="latin"] .shop-art-layout .shop-detail .detail-name{font-size:14px}
 html[data-locale-layout="latin"] #game-window[data-panel=shop] .shop-list{grid-auto-rows:minmax(166px,max-content)}
 html[data-locale-layout="latin"] #interact-button{font-size:13px;white-space:normal;overflow-wrap:anywhere}
 html[data-locale-layout="latin"] #catalysis-potions button{font-size:10px}
}
@media(orientation:landscape) and (max-height:700px){
 html[data-locale-layout="latin"] .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[data-locale-layout="latin"] #game-window[data-panel=bag] .inventory-item-name{font-size:15px;line-height:1.3}
 html[data-locale-layout="latin"] #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}
}


/* Original stylesheet: ./src/collection.css */
/* Collection views reuse the catalog's supplied open-book artwork. */
#game-window[data-panel="catalog"] .catalog-shell{display:grid;grid-template-rows:40px minmax(0,1fr);gap:4px;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
#game-window[data-panel="catalog"] .collection-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:8px;width:90%;max-width:540px;justify-self:center;min-width:0;padding:0 2px}
#game-window[data-panel="catalog"] .collection-tabs button{min-width:0;min-height:0;padding:5px 9px;border:0;border-bottom:3px solid transparent;border-radius:0;background:none;box-shadow:none;color:#8b623e;font-size:15px;font-weight:800;line-height:1.2;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
#game-window[data-panel="catalog"] .collection-tabs button.active{border-bottom-color:#b84931;color:#a23827;background:#ffe5a366}
#game-window[data-panel="catalog"] .collection-tabs button:focus-visible{outline:2px solid #497a57;outline-offset:-2px}
#game-window[data-panel="catalog"] .catalog-shell>.catalog-book{min-height:0}
#game-window[data-panel="catalog"] .catalog-facts>.collection-record{color:#386448;border-bottom-color:#b4ce97}
/* The bitmap rings span x=628..947 of 1568px. Keep both pages outside that band, including while scrolling. */
#game-window[data-panel="catalog"] .catalog-collection-book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:28%;row-gap:0;padding:12px 5%;background:url('../assets/ui-user/book-pages.png') center/100% 100% no-repeat}
#game-window[data-panel="catalog"] .collection-page{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;min-width:0;min-height:0;overflow:hidden}
#game-window[data-panel="catalog"] .collection-page-header{min-width:0;color:#8c5937;text-align:center}
#game-window[data-panel="catalog"] .collection-page-header h2{margin:0 0 5px;color:#a43d2b;font-size:21px;line-height:1.2;letter-spacing:0;overflow-wrap:anywhere}
#game-window[data-panel="catalog"] .collection-page-header p{margin:3px 0;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
#game-window[data-panel="catalog"] .collection-page-header .collection-page-note{font-size:12px;color:#836849}
#game-window[data-panel="catalog"] .collection-page-header progress{display:block;width:90%;height:9px;max-width:230px;margin:9px auto 3px;accent-color:#6e9e64}
#game-window[data-panel="catalog"] .collection-scroll{min-width:0;min-height:0;margin:0;padding:0 4px 5px 0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c29858 transparent;list-style:none}
#game-window[data-panel="catalog"] .collection-milestone{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:10px;min-height:91px;padding:9px 0;border-bottom:2px solid #dcb87a77;color:#8f7250}
#game-window[data-panel="catalog"] .collection-milestone>div{min-width:0}
#game-window[data-panel="catalog"] .collection-stamp{display:grid;place-items:center;aspect-ratio:1;width:58px;background:url('../assets/ui-user/catalog-item-bg.png') center/contain no-repeat;color:#a6753b;font-size:24px;font-weight:900;opacity:.6}
#game-window[data-panel="catalog"] .collection-milestone h3{margin:0 0 4px;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
#game-window[data-panel="catalog"] .collection-milestone p{margin:0 0 3px;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
#game-window[data-panel="catalog"] .collection-milestone-status{font-size:12px;line-height:1.3;font-weight:700}
#game-window[data-panel="catalog"] .collection-milestone.unlocked{color:#3e6d45}
#game-window[data-panel="catalog"] .collection-milestone.unlocked .collection-stamp{opacity:1;color:#427348}
#game-window[data-panel="catalog"] .collection-showcase-slot{display:grid;grid-template-columns:72px minmax(0,1fr);gap:9px;align-items:center;min-height:102px;padding:8px 0;border-bottom:2px solid #dcb87a77}
#game-window[data-panel="catalog"] .collection-showcase-art{display:grid;place-items:center;width:72px;height:72px;min-width:0;min-height:0;background:url('../assets/ui-user/catalog-preview.png') center/contain no-repeat}
#game-window[data-panel="catalog"] .collection-showcase-art .catalog-fruit-art{width:88%;height:88%}
#game-window[data-panel="catalog"] .collection-showcase-art .catalog-illustration{scale:1;translate:none}
#game-window[data-panel="catalog"] .collection-empty-art{font-size:27px;font-weight:900;color:#b59156}
#game-window[data-panel="catalog"] .collection-showcase-fields{display:grid;gap:4px;min-width:0}
#game-window[data-panel="catalog"] .collection-showcase-fields label{color:#7a4d2f;font-size:14px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
#game-window[data-panel="catalog"] .collection-showcase-status{color:#806242;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
#game-window[data-panel="catalog"] .collection-showcase-fields select{width:100%;min-width:0;max-width:100%;height:35px;padding:4px 3px;border:1px solid #b59258;border-radius:5px;background:#fff3cb;color:#614829;font:inherit;font-size:13px;line-height:1.3;text-overflow:ellipsis}
#game-window[data-panel="catalog"] .collection-showcase-slot.locked .collection-showcase-art{opacity:.45}
#game-window[data-panel="catalog"] .collection-showcase-fields select:disabled{opacity:.6}
/* Latin titles use the length of the bitmap side tab, not its narrow width. */
html[data-locale-layout="latin"] #game-window[data-panel="catalog"] #window-title{width:auto;max-width:100%;max-height:100%;margin:0;font-size:24px;line-height:1.15;letter-spacing:0;writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;overflow:hidden;text-shadow:none}
@media (orientation:portrait) and (max-width:1050px){
 html[data-locale-layout="latin"] #game-window[data-panel="catalog"] #window-title{font-size:20px;writing-mode:horizontal-tb}
}
@media (max-width:600px) and (orientation:portrait){
 #game-window[data-panel="catalog"] .catalog-shell{grid-template-rows:40px minmax(0,1fr);gap:3px}
 #game-window[data-panel="catalog"] .collection-tabs{width:100%;gap:2px}
 #game-window[data-panel="catalog"] .collection-tabs button{font-size:13px;padding:4px}
 #game-window[data-panel="catalog"] .catalog-shell>.catalog-book:not(.catalog-collection-book){grid-template-rows:minmax(0,.95fr) minmax(0,1.05fr)}
 #game-window[data-panel="catalog"] .catalog-collection-book{padding-block:8px}
 #game-window[data-panel="catalog"] .collection-page{gap:6px}
 #game-window[data-panel="catalog"] .collection-page-header h2{font-size:17px}
 #game-window[data-panel="catalog"] .collection-page-header p{font-size:12px}
 #game-window[data-panel="catalog"] .collection-page-header .collection-page-note{font-size:11px}
 #game-window[data-panel="catalog"] .collection-milestone{grid-template-columns:minmax(0,1fr);justify-items:center;gap:5px;min-height:132px;text-align:center}
 #game-window[data-panel="catalog"] .collection-stamp{width:34px;font-size:19px}
 #game-window[data-panel="catalog"] .collection-milestone h3{font-size:13px}
 #game-window[data-panel="catalog"] .collection-milestone p{font-size:12px}
 #game-window[data-panel="catalog"] .collection-showcase-slot{grid-template-columns:minmax(0,1fr);justify-items:center;gap:3px;min-height:154px}
 #game-window[data-panel="catalog"] .collection-showcase-art{width:54px;height:54px}
 #game-window[data-panel="catalog"] .collection-showcase-fields{width:100%;gap:3px;text-align:center}
 #game-window[data-panel="catalog"] .collection-showcase-fields label{font-size:12px}
 #game-window[data-panel="catalog"] .collection-showcase-fields select{height:36px;font-size:12px}
}
@media (orientation:landscape) and (max-height:700px), (orientation:landscape) and (max-width:1050px){
 html[data-locale-layout="latin"] #game-window[data-panel="catalog"] #window-title{font-size:16px;writing-mode:vertical-rl}
 #game-window[data-panel="catalog"] .catalog-shell{grid-template-rows:34px minmax(0,1fr);gap:2px}
 #game-window[data-panel="catalog"] .collection-tabs{width:80%;gap:4px}
 #game-window[data-panel="catalog"] .collection-tabs button{font-size:13px;padding:3px 5px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-right{grid-template-rows:minmax(44px,1fr) 28px 25px minmax(0,100px) 12px;gap:2px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-name{font-size:16px;line-height:20px}
 #game-window[data-panel="catalog"] .catalog-collection-book{padding-block:5px}
 #game-window[data-panel="catalog"] .collection-page{gap:4px}
 #game-window[data-panel="catalog"] .collection-page-header h2{font-size:17px;margin-bottom:2px}
 #game-window[data-panel="catalog"] .collection-page-header p{font-size:12px;margin:2px 0}
 #game-window[data-panel="catalog"] .collection-page-header .collection-page-note{font-size:11px}
 #game-window[data-panel="catalog"] .collection-page-header progress{height:7px;margin:5px auto 1px}
 #game-window[data-panel="catalog"] .collection-milestone{grid-template-columns:39px minmax(0,1fr);gap:6px;min-height:70px;padding:6px 0}
 #game-window[data-panel="catalog"] .collection-stamp{width:39px;font-size:20px}
 #game-window[data-panel="catalog"] .collection-milestone h3{font-size:13px;margin-bottom:2px}
 #game-window[data-panel="catalog"] .collection-milestone p{font-size:12px;margin-bottom:2px}
 #game-window[data-panel="catalog"] .collection-milestone-status{font-size:11px}
 #game-window[data-panel="catalog"] .collection-showcase-slot{grid-template-columns:46px minmax(0,1fr);gap:7px;min-height:86px;padding:5px 0}
 #game-window[data-panel="catalog"] .collection-showcase-art{width:46px;height:46px}
 #game-window[data-panel="catalog"] .collection-showcase-fields{gap:2px}
 #game-window[data-panel="catalog"] .collection-showcase-fields label{font-size:12px}
 #game-window[data-panel="catalog"] .collection-showcase-status{font-size:11px}
 #game-window[data-panel="catalog"] .collection-showcase-fields select{font-size:12px;height:32px}
}
@media (orientation:landscape) and (max-width:650px), (orientation:landscape) and (max-height:350px){
 html[data-locale-layout="latin"] #game-window[data-panel="catalog"] #window-title{font-size:14px}
}

/* Scale the complete book, not just its outer box. Navigation sits above the spine. */
#panel-overlay:has(#game-window[data-panel="catalog"]){padding:calc(var(--ui-safe-top,0px) + 64px) calc(var(--ui-safe-right,0px) + 20px) calc(var(--ui-safe-bottom,0px) + 20px) calc(var(--ui-safe-left,0px) + 48px);overflow:hidden;align-items:center;justify-content:center}
#game-window[data-panel="catalog"]{--catalog-unit:min(calc((var(--ui-viewport-width,100vw) - var(--ui-safe-left,0px) - var(--ui-safe-right,0px) - 68px) / 1120),calc((var(--ui-viewport-height,100dvh) - var(--ui-safe-top,0px) - var(--ui-safe-bottom,0px) - 84px) / 556));--h:var(--catalog-unit);width:min(1600px,100%,calc((var(--ui-viewport-height,100dvh) - var(--ui-safe-top,0px) - var(--ui-safe-bottom,0px) - 84px) * 2.014388));height:auto;aspect-ratio:1120 / 556;min-width:0;min-height:0;max-width:100%;max-height:100%;overflow:visible;background-size:100% 100%;background-position:center}
#game-window[data-panel="catalog"] .window-header>div{inset:14% auto auto -28px;width:66px;height:148px;padding:12px;justify-content:flex-start}
#game-window[data-panel="catalog"] #window-title{font-size:30px;width:1.1em;line-height:1.3}
html[data-locale-layout="latin"] #game-window[data-panel="catalog"] #window-title{font-size:17px;width:auto;writing-mode:vertical-rl}
#game-window[data-panel="catalog"] #panel-close{inset:-34px 15px auto auto;width:52px;height:64px;min-width:44px;min-height:44px}
#game-window[data-panel="catalog"] #panel-content{inset:5% 4.5% 6% 4%;min-width:0;min-height:0;overflow:visible;background:none;border-radius:0}
#game-window[data-panel="catalog"] .catalog-shell{position:relative;display:block;min-width:0;min-height:0;overflow:visible}
#game-window[data-panel="catalog"] .collection-tabs{position:absolute;inset:auto 60px calc(100% + 10px) 0;width:auto;max-width:720px;height:42px;margin:auto;gap:8px;padding:0 8px;background:#f8e1a7;border-radius:8px;box-shadow:0 2px 4px #59422b30}
#game-window[data-panel="catalog"] .collection-tabs button{font-size:14px;line-height:1.2;padding:4px 8px;overflow-wrap:normal;word-break:normal}
#game-window[data-panel="catalog"] .catalog-shell>.catalog-book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:28%;row-gap:0;width:100%;height:100%;min-width:0;min-height:0;padding:12px 5%;overflow:hidden;background:url('../assets/ui-user/book-pages.png') center / 100% 100% no-repeat}
#game-window[data-panel="catalog"] .catalog-shell .catalog-left{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) 36px;gap:7px;padding:0;min-width:0;min-height:0;overflow:hidden}
#game-window[data-panel="catalog"] .catalog-shell .catalog-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(112px,1fr));gap:8px;width:100%;height:100%;min-height:0;padding:2px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c29858 transparent}
#game-window[data-panel="catalog"] .catalog-shell .catalog-entry{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(48px,1fr) auto 18px;align-items:center;justify-items:center;height:100%;min-width:0;min-height:0;gap:2px;padding:0;border-radius:0;overflow:hidden}
#game-window[data-panel="catalog"] .catalog-shell .catalog-entry-art{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);width:min(100%,106px);height:100%;min-width:0;min-height:0;max-height:110px;align-self:center;flex:none}
#game-window[data-panel="catalog"] .catalog-shell .catalog-entry-art :is(.catalog-fruit-art,.catalog-illustration){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;max-width:100%;max-height:100%}
#game-window[data-panel="catalog"] .catalog-shell .catalog-entry-art .crop-icon{display:block;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain}
#game-window[data-panel="catalog"] .catalog-shell .catalog-entry>strong{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;width:100%;min-width:0;max-height:3.6em;margin:0;font-size:14px;line-height:1.2;text-align:center;letter-spacing:0;white-space:normal;overflow-wrap:normal;word-break:normal;overflow:hidden;text-shadow:1px 1px #ffe39d}
#game-window[data-panel="catalog"] .catalog-shell .catalog-illustration{scale:1;translate:none}
#game-window[data-panel="catalog"] .catalog-shell .catalog-discovery{max-width:100%;margin:0;padding:0 4px;font-size:10px;line-height:16px;white-space:nowrap}
#game-window[data-panel="catalog"] .catalog-shell .catalog-discovery-count{font-size:14px;line-height:1.3;margin:0}
#game-window[data-panel="catalog"] .catalog-shell .catalog-pagination{gap:12px;min-height:0;padding:0;font-size:13px}
#game-window[data-panel="catalog"] .catalog-shell .catalog-pagination button{width:44px;height:36px;min-width:44px;min-height:36px;padding:0}
#game-window[data-panel="catalog"] .catalog-shell .catalog-right{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(55px,.85fr) auto auto minmax(0,1.2fr) 18px;gap:6px;padding:0;min-width:0;min-height:0;overflow:hidden;align-items:stretch;justify-items:center}
#game-window[data-panel="catalog"] .catalog-shell .catalog-preview-row{grid-area:1 / 1;grid-template-columns:36px minmax(0,1fr) 36px;gap:4px;width:100%;height:100%;max-width:100%;min-width:0;min-height:0}
#game-window[data-panel="catalog"] .catalog-shell .catalog-preview{width:auto;height:100%;aspect-ratio:1;max-width:100%;max-height:170px;min-width:0;min-height:0}
#game-window[data-panel="catalog"] .catalog-shell .catalog-arrow{width:36px;min-width:36px;height:44px;min-height:44px}
#game-window[data-panel="catalog"] .catalog-shell .catalog-name{grid-area:2 / 1;width:100%;height:auto;min-height:36px;margin:0;padding:5px 10px;font-size:20px;line-height:1.2;white-space:normal;overflow-wrap:normal;word-break:normal;overflow:visible}
#game-window[data-panel="catalog"] .catalog-shell .catalog-description{grid-area:3 / 1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;width:100%;height:auto;max-height:2.7em;min-height:0;margin:0;padding:0 2px;font-size:12px;line-height:1.35;overflow:hidden}
#game-window[data-panel="catalog"] .catalog-shell .catalog-facts{grid-area:4 / 1;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:0 5px 0 0;gap:5px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c29858 transparent;scrollbar-gutter:stable}
#game-window[data-panel="catalog"] .catalog-shell .catalog-facts>div{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:start;flex:none;min-height:0;gap:8px;padding:5px 0;border-bottom-width:2px;border-radius:0}
#game-window[data-panel="catalog"] .catalog-shell .catalog-facts dt{min-width:0;margin:0;font-size:14px;line-height:1.35;white-space:normal;overflow-wrap:normal;word-break:normal;text-align:left}
#game-window[data-panel="catalog"] .catalog-shell .catalog-facts dd{min-width:max-content;max-width:none;margin:0;font-size:14px;line-height:1.35;white-space:nowrap;overflow-wrap:normal;word-break:normal;text-align:right;justify-content:flex-end;font-variant-numeric:tabular-nums}
#game-window[data-panel="catalog"] .catalog-shell .catalog-page-count{grid-area:5 / 1;margin:0;padding:0;font-size:11px;line-height:18px}

@media(orientation:landscape) and (max-height:700px),(orientation:landscape) and (max-width:1050px){
 #panel-overlay:has(#game-window[data-panel="catalog"]){padding-top:calc(var(--ui-safe-top,0px) + 48px);padding-bottom:calc(var(--ui-safe-bottom,0px) + 8px);padding-left:calc(var(--ui-safe-left,0px) + 28px);padding-right:calc(var(--ui-safe-right,0px) + 8px)}
 #game-window[data-panel="catalog"]{width:min(1120px,100%,calc((var(--ui-viewport-height,100dvh) - var(--ui-safe-top,0px) - var(--ui-safe-bottom,0px) - 56px) * 2.1));aspect-ratio:2.1}
 #game-window[data-panel="catalog"] .window-header>div{left:-22px;width:48px;height:104px;padding:8px 10px}
 #game-window[data-panel="catalog"] #window-title{font-size:23px}
 html[data-locale-layout="latin"] #game-window[data-panel="catalog"] #window-title{font-size:14px}
 #game-window[data-panel="catalog"] #panel-close{top:-26px;right:8px;width:44px;height:54px}
 #game-window[data-panel="catalog"] .collection-tabs{bottom:calc(100% + 8px);height:36px;right:42px;gap:3px;padding:0 3px}
 #game-window[data-panel="catalog"] .collection-tabs button{font-size:12px;padding:3px 5px}
 #game-window[data-panel="catalog"] .catalog-shell>.catalog-book{padding-block:6px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-left{grid-template-rows:auto minmax(0,1fr) 30px;gap:4px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-entries{grid-template-rows:repeat(3,minmax(96px,1fr));gap:5px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-entry>strong{font-size:12px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-discovery-count{font-size:11px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-pagination button{height:30px;min-height:30px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-right{grid-template-rows:minmax(44px,.7fr) auto auto minmax(0,1.1fr) 14px;gap:3px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-preview-row{grid-template-columns:30px minmax(0,1fr) 30px;gap:2px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-arrow{width:30px;min-width:30px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-name{font-size:14px;min-height:26px;padding:3px 5px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-description{font-size:10px;line-height:1.3;max-height:2.6em}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-facts{gap:3px;padding-right:3px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-facts>div{grid-template-columns:minmax(0,1fr);gap:1px;padding:3px 0}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-facts :is(dt,dd){font-size:12px;line-height:1.25}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-facts dd{justify-self:end}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-page-count{font-size:10px;line-height:14px}
}

@media(orientation:portrait) and (max-width:1050px){
 #panel-overlay:has(#game-window[data-panel="catalog"]){padding:calc(var(--ui-safe-top,0px) + 60px) 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="catalog"]{width:100%;height:100%;max-width:760px;aspect-ratio:auto;background-size:200% 100%;background-position:left center}
 #game-window[data-panel="catalog"] .window-header>div{inset:-48px auto auto 10px;width:auto;max-width:calc(100% - 72px);height:38px;padding:6px 14px;border-radius:8px;background:#f8df98}
 #game-window[data-panel="catalog"] #window-title,html[data-locale-layout="latin"] #game-window[data-panel="catalog"] #window-title{width:auto;font-size:20px;writing-mode:horizontal-tb;line-height:1.2;white-space:normal}
 #game-window[data-panel="catalog"] #panel-close{inset:-48px 10px auto auto;width:44px;height:54px}
 #game-window[data-panel="catalog"] #panel-content{inset:14px 16px 18px}
 #game-window[data-panel="catalog"] .catalog-shell{display:grid;grid-template-rows:44px minmax(0,1fr);gap:6px;overflow:hidden}
 #game-window[data-panel="catalog"] .collection-tabs{position:static;width:100%;height:44px;max-width:100%;margin:0;padding:0;gap:2px;box-shadow:none;background:none}
 #game-window[data-panel="catalog"] .collection-tabs button{font-size:12px;padding:3px 4px}
 #game-window[data-panel="catalog"] .catalog-shell>.catalog-book{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1.15fr);gap:12px;padding:4px;background:none}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-entries{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(112px,1fr));gap:6px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-entry>strong{font-size:12px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-right{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto minmax(0,1fr) 18px;gap:5px 10px;border-top:2px solid #d4aa66;padding-top:10px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-preview-row{grid-area:2 / 1;grid-template-columns:24px minmax(0,1fr) 24px;gap:0;align-self:start;max-height:120px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-preview{width:100%;height:auto;max-height:120px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-arrow{width:24px;min-width:24px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-arrow>span{width:14px;height:28px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-name{grid-area:1 / 1 / 2 / -1;font-size:17px;min-height:34px;padding:4px 8px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-description{grid-area:2 / 1;display:block;align-self:end;width:100%;height:auto;max-height:5.4em;font-size:11px;line-height:1.35;overflow-y:auto;scrollbar-width:thin}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-facts{grid-area:2 / 2;gap:3px;padding-right:3px}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-facts>div{grid-template-columns:minmax(0,1fr);gap:2px;padding:4px 0}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-facts :is(dt,dd){font-size:12px;line-height:1.25}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-facts dd{justify-self:end}
 #game-window[data-panel="catalog"] .catalog-shell .catalog-page-count{grid-area:3 / 1 / 4 / -1}
 #game-window[data-panel="catalog"] .collection-page{gap:5px}
 #game-window[data-panel="catalog"] .collection-page+.collection-page{border-top:2px solid #d4aa66;padding-top:10px}
 #game-window[data-panel="catalog"] .collection-page-header h2{font-size:17px}
 #game-window[data-panel="catalog"] .collection-milestone{grid-template-columns:42px minmax(0,1fr);gap:8px;min-height:72px;justify-items:stretch;text-align:left}
 #game-window[data-panel="catalog"] .collection-stamp{width:42px;font-size:21px}
 #game-window[data-panel="catalog"] .collection-showcase-slot{grid-template-columns:48px minmax(0,1fr);gap:8px;min-height:94px;justify-items:stretch}
 #game-window[data-panel="catalog"] .collection-showcase-art{width:48px;height:48px}
 #game-window[data-panel="catalog"] .collection-showcase-fields{text-align:left}
}


/* Original stylesheet: ./src/advanced-guide.css */
.advanced-guide-dialog{--guide-accent:#407d65;position:fixed;inset:0;box-sizing:border-box;width:min(960px,calc(100% - 28px));height:min(600px,calc(100dvh - 28px));max-width:calc(100% - 28px);max-height:calc(100dvh - 28px);margin:auto;padding:7px;border:3px solid #57876b;border-radius:8px;background:#bbd5ac;overflow:hidden;outline:none;filter:drop-shadow(0 14px 18px #18382b70);color:#375444;letter-spacing:0}
.advanced-guide-dialog::backdrop{background:#193c3866;backdrop-filter:blur(3px)}
.advanced-guide-dialog[data-kind=potion-purple]{--guide-accent:#8a4981}.advanced-guide-dialog[data-kind=potion-gold]{--guide-accent:#ae6c17}.advanced-guide-dialog[data-kind=potion-red]{--guide-accent:#a75642}
.advanced-guide-shell{box-sizing:border-box;display:grid;grid-template-rows:100px minmax(0,1fr) 56px;gap:10px;height:100%;min-height:0;min-width:0;padding:0 22px 10px;background:#fff3c7;border-radius:8px}
.advanced-guide-header{display:grid;grid-template-columns:78px minmax(0,1fr) 48px;align-items:center;gap:15px;min-width:0;border-bottom:2px solid #e5c88b}.advanced-guide-heading-copy{min-width:0}
.advanced-guide-emblem{display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;width:78px;height:78px;background:url('../assets/ui-user/shop-preview-bg.png') center/100% 100% no-repeat}
.advanced-guide-emblem>img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 3px 0 #37544422)}
.advanced-guide-kicker{display:flex;align-items:center;gap:12px;color:#79937b;font-size:12px;font-weight:700;line-height:1.3}.advanced-guide-kicker b{font-size:11px;color:#a98a50;font-variant-numeric:tabular-nums}
.advanced-guide-header h2{margin:3px 0 0;font-size:28px;line-height:1.2;letter-spacing:0;overflow-wrap:anywhere;color:#38634e;outline:none}
.advanced-guide-summary{margin:6px 0 0;font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere;color:#6c7a57}
.advanced-guide-dialog .advanced-guide-close{box-sizing:border-box;width:48px;height:48px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:0;background:url('../assets/ui-user/shop-close.png') center/26px 26px no-repeat,url('../assets/ui-user/shop-close-circle.png') center/46px 46px no-repeat;box-shadow:none}
.advanced-guide-scroll{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#dfa747 transparent;padding:0 5px 0 0}
.advanced-guide-lesson{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:auto auto;gap:12px 22px;min-width:0;align-content:start}
.advanced-guide-warning{grid-column:1/-1;display:flex;align-items:center;gap:9px;min-width:0;margin:0;padding:8px 12px;border-left:4px solid #69a78b;background:#e1eed6;color:#4e6b51;font-size:13px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.advanced-guide-warning>span{display:grid;place-items:center;flex:none;width:20px;height:20px;border:1px solid currentColor;border-radius:50%;font-size:14px}
[data-lesson=potion-red] .advanced-guide-warning{color:#a34b37;background:#f7dfc3;border-color:#d07054}
.advanced-guide-diagram{min-width:0;margin:0}.advanced-guide-scene{position:relative;height:215px;min-width:0;background:#bedf82 url('../assets/guide-v2/garden-stage.png') center/100% 100% no-repeat;overflow:hidden;border-radius:6px}
.advanced-guide-scene-label{position:absolute;top:9px;left:12px;right:12px;text-align:center;font-size:12px;color:#345b36;font-weight:800;line-height:1.3;text-shadow:0 1px #e7f7c5}
.advanced-guide-plot-crops{position:absolute;inset:36px 34px 31px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.advanced-guide-crop{position:relative;display:grid;grid-template-rows:99px auto auto;justify-items:center;gap:2px;min-width:0;text-align:center}
.advanced-guide-crop-art{position:relative;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;width:100%;height:99px;min-width:0;min-height:0}
.advanced-guide-crop-art>.crop-icon{width:100%;height:100%;max-width:110px;object-fit:contain;filter:drop-shadow(0 4px 1px #39553355)}
.advanced-guide-crop[data-role=target] .advanced-guide-crop-art{animation:guide-target-bob 3s ease-in-out infinite}
.advanced-guide-crop>strong{font-size:12px;line-height:1.3;color:#fffbea;text-shadow:0 1px 2px #49361d;overflow-wrap:anywhere}
.advanced-guide-crop-change{min-height:18px;line-height:1.2;font-size:17px;font-weight:900;color:#fff3b2;text-shadow:0 2px 1px #694220;animation:guide-value-rise 2.8s ease-in-out infinite}
.advanced-guide-scene[data-drain=false] [data-role=mature] .advanced-guide-crop-change{font-size:10px;animation:none;color:#e1f5d6}
.advanced-guide-source{position:absolute;right:-5px;top:-17px;width:32px;height:40px;transform:rotate(15deg);filter:drop-shadow(0 2px 0 #fff8c6)}.advanced-guide-source>.crop-icon{width:100%;height:100%;object-fit:contain}
.advanced-guide-flow{position:absolute;top:46px;width:39px;height:25px;display:flex;align-items:center;gap:3px;color:#fff6bc;pointer-events:none;filter:drop-shadow(0 1px 1px #6c7146)}
.advanced-guide-flow-left{left:calc(33.333% - 23px)}.advanced-guide-flow-right{left:calc(66.666% - 16px)}
.advanced-guide-flow b{position:absolute;inset:0;text-align:center;font-size:27px;line-height:25px;font-weight:900}
.advanced-guide-flow i{width:4px;height:4px;background:currentColor;transform:rotate(45deg);animation:guide-flow-right 1.5s linear infinite;opacity:0}.advanced-guide-flow i:nth-child(2){animation-delay:.3s}.advanced-guide-flow i:nth-child(3){animation-delay:.6s}
.advanced-guide-flow[data-direction=left] i{animation-name:guide-flow-left}.advanced-guide-flow.blocked{color:#e9eee3}.advanced-guide-flow.blocked i{display:none}
.advanced-guide-other{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:8px;min-height:25px;background:#ecf5dce8;color:#58765a;font-size:10px;line-height:1.2;padding:2px 6px;text-align:center}
.advanced-guide-other>span{display:block;width:20px;height:20px;flex:none;opacity:.65}.advanced-guide-other .crop-icon{width:100%;height:100%}.advanced-guide-other strong{font-weight:600;color:#849177}
.advanced-guide-outcomes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:3px;background:#e6d69a;border-radius:6px;margin-top:7px}
.advanced-guide-outcomes button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;padding:4px 8px;border:0;border-radius:4px;background:transparent;box-shadow:none;color:#8f8157;font-size:12px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
.advanced-guide-outcomes button[aria-pressed=true]{color:#fffdf3;background:var(--guide-accent);box-shadow:0 2px 0 #0002}.advanced-guide-outcomes strong{font-size:19px;line-height:1.1;white-space:nowrap}
.advanced-guide-diagram figcaption{display:block;margin:8px 0 0;line-height:1.4;font-size:12px;color:#788565}.advanced-guide-diagram figcaption strong{font-size:12px;color:#456c55;margin-right:6px}
.advanced-guide-facts{min-width:0;align-self:start}.advanced-guide-fact-list{display:grid;gap:0}
.advanced-guide-fact{display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,.8fr);gap:2px 8px;padding:10px 0;border-bottom:2px solid #e9d59d;min-width:0;align-items:center}
.advanced-guide-fact>span{color:#769070;font-size:13px;line-height:1.35;font-weight:700;overflow-wrap:anywhere}.advanced-guide-fact>strong{grid-column:2;grid-row:1 / span 2;color:#5a7b57;font-size:25px;line-height:1.2;text-align:right;overflow-wrap:anywhere}
.advanced-guide-fact>small{font-size:12px;line-height:1.4;color:#8a8b67;overflow-wrap:anywhere}.advanced-guide-fact[data-highlight=true]>strong{color:var(--guide-accent)}.advanced-guide-fact[data-highlight=true]>span{color:#486a4a}
.advanced-guide-rules{margin-top:9px;font-size:12px;line-height:1.6;color:#788063;overflow-wrap:anywhere}.advanced-guide-rules summary{box-sizing:border-box;min-height:44px;display:list-item;align-content:center;cursor:pointer;font-weight:700;color:#53826b;padding:7px 0;outline-offset:2px}.advanced-guide-rules p{margin:5px 0}.advanced-guide-details{padding-left:18px;margin:5px 0}.advanced-guide-details li{margin:5px 0}
.advanced-guide-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;border-top:2px solid #e5c88b;padding-top:8px}.advanced-guide-footer button{min-width:44px;min-height:44px;border:0;box-shadow:none;font-weight:800;line-height:1.2;white-space:normal;letter-spacing:0;overflow-wrap:anywhere}
.advanced-guide-dialog .advanced-guide-back{display:grid;place-items:center;width:44px;height:44px;padding:8px;background:none;border-radius:0}.advanced-guide-back>img{width:28px;height:28px;object-fit:contain}
.advanced-guide-dialog .advanced-guide-done{width:190px;height:44px;padding:7px 16px;color:#fffbe2;background:#5a9a7d;border-radius:6px;border-bottom:4px solid #3e755d;font-size:17px;text-shadow:0 1px #356a4c}
.advanced-guide-dialog button:hover{filter:brightness(1.05)}.advanced-guide-dialog button:active{translate:0 1px}
.advanced-guide-pet-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(75px,.7fr) minmax(0,1fr);align-items:center;gap:2px;padding:22px 12px 12px;box-sizing:border-box}
.advanced-guide-pet-stage{position:relative;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;width:100%;height:160px;min-width:0;min-height:0}.advanced-guide-pet{width:100%;height:100%;max-width:180px;object-fit:contain;filter:drop-shadow(0 8px 2px #456f3944);animation:guide-target-bob 3s ease-in-out infinite}.advanced-guide-mutated .advanced-guide-pet{animation-delay:-1.5s}
.advanced-guide-pet-transfer{display:grid;justify-items:center;gap:4px;min-width:0;color:#547736}.advanced-guide-feed-art{display:block;width:55px;height:60px;animation:guide-feed-hop 2.6s ease-in-out infinite}.advanced-guide-feed-art>.crop-icon{width:100%;height:100%;object-fit:contain}
.advanced-guide-pet-arrow{font-size:29px;color:#fff6c5;text-shadow:0 2px 1px #72954b;line-height:1;font-weight:900}.advanced-guide-pet-transfer>strong{font-size:11px;line-height:1.3;text-align:center;overflow-wrap:anywhere;color:#faffdf;text-shadow:0 1px 2px #587637}
.advanced-guide-feeding{grid-template-columns:minmax(80px,.7fr) minmax(0,1.3fr);padding:16px 40px 30px}.advanced-guide-feeding .advanced-guide-feed-art{width:80px;height:85px}
.advanced-guide-care-meter{position:absolute;left:18px;right:18px;bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px;color:#faffde;font-size:11px;font-weight:700;text-shadow:0 1px #547033}.advanced-guide-care-meter progress{width:45%;height:10px;accent-color:#427849}
.advanced-guide-care-companion{position:absolute;top:20px;right:23px;width:90px;height:90px;z-index:1}.advanced-guide-care-companion>.advanced-guide-pet{width:100%;height:100%}
.advanced-guide-care-steps{position:absolute;inset:50px 35px 38px;display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);align-items:end;gap:18px}.advanced-guide-care-step{display:grid;justify-items:center;gap:5px;min-width:0}.advanced-guide-care-step>span{display:block;width:72px;height:76px;animation:guide-feed-hop 3s ease-in-out infinite}.advanced-guide-care-step .crop-icon{width:100%;height:100%;object-fit:contain}.advanced-guide-care-step>strong{font-size:11px;line-height:1.3;color:#fffce4;text-align:center;text-shadow:0 1px #6c512a;overflow-wrap:anywhere}.advanced-guide-care-steps>.advanced-guide-pet-arrow{align-self:center}
.advanced-guide-spark{position:absolute;width:8px;height:8px;background:#fff2a5;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);animation:guide-spark 2s ease-in-out infinite}.spark-one{left:10%;top:15%}.spark-two{right:5%;top:50%;animation-delay:.6s}.spark-three{left:30%;bottom:10%;animation-delay:1.2s}
.advanced-guide-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:2px 0 6px}.advanced-guide-library-item{box-sizing:border-box;display:grid;grid-template-columns:65px minmax(0,1fr);align-items:center;gap:10px;min-height:150px;min-width:0;padding:14px 12px;border:0;border-bottom:4px solid #d6c37f;border-radius:8px;background:#f9e5a1;box-shadow:none;text-align:left;color:#456c55}.advanced-guide-library-item:nth-child(n+4){background:#d9ecda;border-color:#a3c5a4}
.advanced-guide-library-art{display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;width:65px;height:85px;min-width:0;background:url('../assets/ui-user/shop-preview-bg.png') center/65px 65px no-repeat}.advanced-guide-library-art>img{width:100%;height:100%;object-fit:contain}.advanced-guide-library-item>span:last-child{min-width:0}
.advanced-guide-library-item strong{display:block;font-size:17px;line-height:1.35;overflow-wrap:anywhere}.advanced-guide-library-item small{display:block;font-size:11px;line-height:1.4;color:#90926c;margin-top:5px;overflow-wrap:anywhere}.advanced-guide-library-item em{display:block;font-size:11px;font-style:normal;font-weight:700;margin-top:8px;color:#b38434}.advanced-guide-library-item em[data-seen=true]{color:#6d9a75}
.advanced-guide-dialog :is(button,summary):focus-visible{outline:3px solid #4c9f98;outline-offset:2px}.advanced-guide-dialog :is(img,.crop-icon){min-width:0;min-height:0;max-width:100%;max-height:100%}
.advanced-guide-fact>strong[data-long=true]{font-size:18px}
.advanced-guide-potion-ladder{position:absolute;inset:35px 15px 45px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;align-items:center}
.advanced-guide-unlock-step{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:5px;justify-items:center;min-width:0;min-height:0;height:100%;text-align:center}
.advanced-guide-unlock-step>span{display:grid;place-items:center;min-width:0;min-height:0;width:100%;height:100%}.advanced-guide-unlock-step .crop-icon{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 1px #4b693e50)}
.advanced-guide-unlock-step>strong{font-size:14px;line-height:1.2;color:#fff8d2;text-shadow:0 1px 2px #52442b;white-space:nowrap}.advanced-guide-unlock-step[data-owned=true]>strong{color:#dfffd8}
.advanced-guide-unlock-step:not(:last-child)::after{content:'\2192';position:absolute;right:-9px;top:40%;color:#fff8d2;font-size:17px;line-height:1;text-shadow:0 1px 2px #52442b}
.advanced-guide-unlock-note{position:absolute;bottom:10px;left:12px;right:12px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:800;line-height:1.3;text-align:center;color:#fffce4;text-shadow:0 1px 2px #5c6637}.advanced-guide-unlock-note>span{display:block;width:24px;height:24px;flex:none}.advanced-guide-unlock-note .crop-icon{width:100%;height:100%;object-fit:contain}
.advanced-guide-companions{position:absolute;inset:34px 15px 16px;display:grid;grid-template-columns:1.25fr 1fr 1fr;align-items:center;gap:7px}
.advanced-guide-companion{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:3px;justify-items:center;min-width:0;min-height:0;height:100%}.advanced-guide-companion>strong{font-size:12px;line-height:1.3;min-height:2.6em;color:#fffce4;text-align:center;text-shadow:0 1px 2px #5c6637;overflow-wrap:anywhere}.advanced-guide-companion[data-active=false]{opacity:.72}.advanced-guide-companion[data-active=false] .advanced-guide-pet{animation:none;max-height:85%}
.advanced-guide-library-item[data-kind=potion-unlock]{background:#f9e5a1;border-color:#d6c37f}
@keyframes guide-target-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes guide-value-rise{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(-3px);opacity:1}}
@keyframes guide-feed-hop{0%,100%{transform:translateY(1px) rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}}
@keyframes guide-flow-right{0%{transform:translateX(0) rotate(45deg);opacity:0}40%{opacity:1}100%{transform:translateX(24px) rotate(45deg);opacity:0}}
@keyframes guide-flow-left{0%{transform:translateX(24px) rotate(45deg);opacity:0}40%{opacity:1}100%{transform:translateX(0) rotate(45deg);opacity:0}}
@keyframes guide-spark{0%,100%{scale:.4;opacity:0}50%{scale:1.2;opacity:1}}
.advanced-guide-dialog[data-reduced=true] *{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){.advanced-guide-dialog *{animation:none!important;transition:none!important}}
@media(max-width:600px) and (orientation:portrait){
 .advanced-guide-dialog{width:calc(100% - 16px);max-width:calc(100% - 16px);height:min(770px,calc(100dvh - 20px));max-height:calc(100dvh - 20px);padding:5px}
 .advanced-guide-shell{grid-template-rows:auto minmax(0,1fr) 52px;padding:10px 12px 8px;gap:8px}.advanced-guide-header{grid-template-columns:48px minmax(0,1fr) 44px;gap:8px;padding-bottom:10px}.advanced-guide-emblem{width:48px;height:54px}.advanced-guide-header h2{font-size:20px}.advanced-guide-kicker{font-size:10px;gap:6px}.advanced-guide-kicker b{font-size:9px}.advanced-guide-summary{font-size:12px;margin-top:4px;line-height:1.35}.advanced-guide-dialog .advanced-guide-close{width:44px;height:44px;background-size:24px 24px,42px 42px}
 .advanced-guide-lesson{grid-template-columns:minmax(0,1fr);gap:10px}.advanced-guide-warning{font-size:12px;padding:7px 8px;gap:6px}.advanced-guide-scene{height:200px}.advanced-guide-plot-crops{inset:34px 18px 29px;gap:12px}.advanced-guide-crop{grid-template-rows:91px auto auto}.advanced-guide-crop-art{height:91px}.advanced-guide-crop>strong{font-size:11px}.advanced-guide-crop-change{font-size:15px}.advanced-guide-scene[data-drain=false] [data-role=mature] .advanced-guide-crop-change{font-size:9px}.advanced-guide-other{gap:5px;font-size:9px}
 .advanced-guide-fact{padding:8px 0;grid-template-columns:minmax(0,1.4fr) minmax(70px,1fr)}.advanced-guide-fact>strong{font-size:22px}.advanced-guide-fact>span{font-size:12px}.advanced-guide-fact>small{font-size:11px}.advanced-guide-diagram figcaption{font-size:11px;gap:5px}.advanced-guide-diagram figcaption strong{font-size:11px}.advanced-guide-rules{margin-top:3px}.advanced-guide-dialog .advanced-guide-done{width:170px;font-size:15px}
 .advanced-guide-pet-stage{height:140px}.advanced-guide-pet-scene{padding-inline:6px;grid-template-columns:minmax(0,1fr) minmax(65px,.7fr) minmax(0,1fr)}.advanced-guide-feeding{grid-template-columns:minmax(65px,.7fr) minmax(0,1.3fr);padding:18px 25px 28px}
 .advanced-guide-library{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.advanced-guide-library-item{grid-template-columns:minmax(0,1fr);justify-items:center;gap:2px;padding:10px;min-height:172px;text-align:center}.advanced-guide-library-art{height:58px;width:58px;background-size:58px}.advanced-guide-library-item strong{font-size:14px}.advanced-guide-library-item small{display:none}.advanced-guide-library-item em{margin-top:5px}
}
@media(orientation:landscape) and (max-height:550px){
 .advanced-guide-dialog{width:min(940px,calc(100% - 24px));max-width:calc(100% - 24px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);padding:3px}
 .advanced-guide-shell{grid-template-rows:60px minmax(0,1fr) 46px;gap:5px;padding:0 12px 5px}.advanced-guide-header{grid-template-columns:50px minmax(0,1fr) 44px;gap:10px}.advanced-guide-emblem{width:48px;height:52px}.advanced-guide-kicker{font-size:9px}.advanced-guide-kicker b{font-size:9px}.advanced-guide-header h2{font-size:20px;margin-top:1px}.advanced-guide-summary{font-size:11px;line-height:1.2;margin-top:3px}.advanced-guide-dialog .advanced-guide-close{height:44px;width:44px;background-size:24px 24px,42px 42px}
 .advanced-guide-lesson{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:6px 15px}.advanced-guide-warning{font-size:11px;line-height:1.3;padding:4px 8px;gap:6px}.advanced-guide-warning>span{width:16px;height:16px;font-size:11px}.advanced-guide-scene{height:133px}.advanced-guide-scene-label{font-size:10px;top:4px}.advanced-guide-plot-crops{inset:21px 23px 22px;gap:12px}.advanced-guide-crop{grid-template-rows:53px auto auto;gap:1px}.advanced-guide-crop-art{height:53px}.advanced-guide-crop>strong{font-size:9px}.advanced-guide-crop-change{min-height:13px;font-size:13px}.advanced-guide-scene[data-drain=false] [data-role=mature] .advanced-guide-crop-change{font-size:8px}.advanced-guide-source{width:22px;height:28px;top:-8px;right:-5px}.advanced-guide-flow{top:23px;scale:.8}.advanced-guide-other{font-size:9px;min-height:19px;gap:6px;padding:0 5px}.advanced-guide-other>span{width:17px;height:17px}
 .advanced-guide-outcomes{margin-top:3px;padding:2px}.advanced-guide-outcomes button{min-height:44px;font-size:11px;gap:5px;padding:2px 6px}.advanced-guide-outcomes strong{font-size:16px}.advanced-guide-diagram figcaption{margin-top:4px;font-size:10px;line-height:1.2;gap:4px}.advanced-guide-diagram figcaption strong{font-size:10px}
 .advanced-guide-fact{padding:5px 0;gap:1px 7px;grid-template-columns:minmax(0,1.2fr) minmax(60px,1fr)}.advanced-guide-fact>span{font-size:11px}.advanced-guide-fact>small{font-size:10px;line-height:1.2}.advanced-guide-fact>strong{font-size:19px}.advanced-guide-rules{font-size:11px;line-height:1.4;margin-top:3px}.advanced-guide-rules summary{font-size:11px;padding:3px 0}.advanced-guide-footer{padding-top:2px}.advanced-guide-dialog .advanced-guide-done{width:160px;font-size:15px}
 .advanced-guide-pet-scene{padding:8px 8px 5px;grid-template-columns:minmax(0,1fr) minmax(55px,.65fr) minmax(0,1fr)}.advanced-guide-pet-stage{height:110px}.advanced-guide-feed-art{width:39px;height:44px}.advanced-guide-pet-transfer>strong{font-size:9px}.advanced-guide-pet-arrow{font-size:23px}.advanced-guide-feeding{grid-template-columns:minmax(55px,.7fr) minmax(0,1.3fr);padding:0 35px 19px}.advanced-guide-feeding .advanced-guide-feed-art{width:52px;height:58px}.advanced-guide-care-meter{bottom:6px;font-size:9px}.advanced-guide-care-companion{width:54px;height:54px;top:17px;right:20px}.advanced-guide-care-steps{inset:25px 30px 23px;gap:12px}.advanced-guide-care-step>span{width:43px;height:48px}.advanced-guide-care-step>strong{font-size:9px}
 .advanced-guide-library{gap:8px}.advanced-guide-library-item{min-height:100px;padding:8px;gap:8px;grid-template-columns:45px minmax(0,1fr)}.advanced-guide-library-art{width:45px;height:58px;background-size:45px}.advanced-guide-library-item strong{font-size:13px}.advanced-guide-library-item small{display:none}.advanced-guide-library-item em{font-size:10px;margin-top:5px}
 .advanced-guide-scene{height:115px}.advanced-guide-pet-scene,.advanced-guide-care-scene{height:145px}.advanced-guide-fact>strong[data-long=true]{font-size:15px}.advanced-guide-crop{grid-template-rows:43px auto auto}.advanced-guide-crop-art{height:43px}.advanced-guide-pet-stage{height:110px}.advanced-guide-header h2{font-size:18px}
 .advanced-guide-potion-ladder{inset:21px 13px 30px;gap:5px}.advanced-guide-unlock-step{gap:2px}.advanced-guide-unlock-step>strong{font-size:11px}.advanced-guide-unlock-step:not(:last-child)::after{right:-7px;font-size:13px}.advanced-guide-unlock-note{bottom:4px;gap:5px;font-size:10px}.advanced-guide-unlock-note>span{width:19px;height:19px}.advanced-guide-companions{inset:19px 13px 4px;gap:5px}.advanced-guide-companion>strong{font-size:10px}
}


/* Original stylesheet: ./src/feature-tour.css */
#feature-tour,#feature-tour-library{font-family:"Microsoft YaHei",system-ui,sans-serif;color:#405c3b;font-size:14px;line-height:1.5;letter-spacing:0}
#feature-tour{position:fixed;inset:0;z-index:76;pointer-events:none;isolation:isolate}
#feature-tour[hidden],#feature-tour [hidden]{display:none!important}
#feature-tour * ,#feature-tour-library *{box-sizing:border-box;letter-spacing:0}
.feature-tour-shade{position:fixed;background:#172d32a8;pointer-events:none}
.feature-tour-ring{position:fixed;border:3px solid #ffe795;border-radius:8px;box-shadow:0 0 0 2px #7d573b,0 0 0 7px #ffdd5833;animation:feature-tour-beacon 1.6s ease-in-out infinite;pointer-events:none}
.feature-tour-pointer{position:fixed;width:28px;height:28px;filter:drop-shadow(0 2px 1px #294b37);animation:feature-tour-point 1.1s ease-in-out infinite;pointer-events:none}
.feature-tour-pointer img{width:100%;height:100%;object-fit:contain}.feature-tour-pointer[data-direction=left] img{rotate:180deg}
.feature-tour-coach{position:fixed;left:10px;top:10px;display:flex;flex-direction:column;gap:8px;width:360px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:16px 20px 14px;pointer-events:auto;isolation:isolate;filter:drop-shadow(0 6px 10px #142f4444);overflow:hidden;touch-action:pan-y}
.feature-tour-coach::before,#feature-tour-library::before{content:"";position:absolute;inset:0;z-index:-1;border:solid transparent;border-image:url('../assets/ui/panel.png') 38 fill / 25px stretch;pointer-events:none}
.feature-tour-coach header{display:flex;gap:9px;align-items:center;flex-shrink:0;min-width:0}
.feature-tour-avatar{width:42px;height:44px;overflow:hidden;flex:none;background:url('../assets/ui-user/goal-icon-bg.png') center/contain no-repeat;border-radius:50%}.feature-tour-avatar img{width:100%;height:62px;object-fit:cover;object-position:center top}
.feature-tour-coach header>div{flex:1;min-width:0}.feature-tour-kicker{display:block;font-size:11px;line-height:1.3;color:#a06140;font-weight:700;overflow-wrap:anywhere}
.feature-tour-coach h2{font-size:17px;line-height:1.3;margin:3px 0 0;font-weight:800;overflow-wrap:anywhere}.feature-tour-coach h2:focus{outline:none}
.feature-tour-count{font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums;color:#7b6848;flex:none;white-space:nowrap}
.feature-tour-body{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ab976d transparent;display:grid;grid-template-columns:76px minmax(0,1fr);gap:9px;align-items:center}
.feature-tour-copy{min-width:0}.feature-tour-copy p{margin:0;font-size:13px;line-height:1.6;color:#625f46;overflow-wrap:anywhere}.feature-tour-missing{display:block;font-size:11px;line-height:1.5;color:#a55b3b;margin-top:5px;overflow-wrap:anywhere}
.feature-tour-demo{position:relative;width:76px;height:81px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url('../assets/ui-user/goal-icon-bg.png') center/contain no-repeat;overflow:hidden}
.feature-tour-demo-art{display:grid;place-items:center;width:48px;height:48px;flex:none;z-index:1}.feature-tour-demo-art :is(img,svg){display:block;width:100%;height:100%;object-fit:contain;max-width:100%;max-height:100%}
.feature-tour-demo-secondary{position:absolute;width:27px;height:27px;bottom:7px;right:5px}.feature-tour-demo-path{position:absolute;inset:0}.feature-tour-demo-path i{position:absolute;width:5px;height:5px;background:#f4ba3e;border:1px solid #fff1b0;top:52%;left:35%;border-radius:50%;animation:feature-tour-travel 1.8s ease-in-out infinite}.feature-tour-demo-path i:nth-child(2){animation-delay:.3s}.feature-tour-demo-path i:nth-child(3){animation-delay:.6s}
.feature-tour-demo[data-animation=tap]>.feature-tour-demo-art:first-child{animation:feature-tour-tap 1.7s ease-in-out infinite}
.feature-tour-demo[data-animation=grow]>.feature-tour-demo-art:first-child{transform-origin:50% 90%;animation:feature-tour-grow 2.5s ease-in-out infinite}
.feature-tour-demo[data-animation=feed]>.feature-tour-demo-art:first-child{animation:feature-tour-feed 2.3s ease-in-out infinite}
.feature-tour-demo[data-animation=orbit] .feature-tour-demo-path{animation:feature-tour-orbit 5s linear infinite}
.feature-tour-demo[data-animation=coins] .feature-tour-demo-secondary{animation:feature-tour-coin 1.9s ease-out infinite}
.feature-tour-body[data-detailed=true]{grid-template-columns:minmax(0,1fr);gap:6px}
.feature-tour-rule-demo{margin:0;min-width:0;padding:5px 0 6px;border-bottom:1px solid #ad9d6240}.feature-tour-rule-demo figcaption{font-size:10px;line-height:1.4;color:#94704a;text-align:center;font-weight:700;margin-bottom:3px}.feature-tour-rule-demo figcaption strong{color:#4c8953;margin-left:5px}
.feature-tour-neighbors{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr);align-items:center;gap:3px}.feature-tour-rule-crop{display:flex;flex-direction:column;align-items:center;min-width:0;gap:2px;text-align:center}.feature-tour-rule-art{display:block;width:33px;height:33px}.feature-tour-rule-art>*{display:block;width:100%;height:100%;object-fit:contain}.feature-tour-rule-crop small{font-size:10px;line-height:1.3;overflow-wrap:anywhere}.feature-tour-rule-crop b{font-size:11px;line-height:1.3;min-height:15px;color:#53834a}.feature-tour-rule-crop[data-kind=mature] b{color:#897a5c}.feature-tour-rule-arrow{width:20px;height:20px;font-size:22px;line-height:20px;text-align:center;color:#a48459;animation:feature-tour-rule-flow 1.6s ease-in-out infinite}.feature-tour-rule-arrow img{width:100%;height:100%;object-fit:contain}.feature-tour-rule-arrow[data-direction=left] img{rotate:180deg}.feature-tour-rule-arrow[data-direction=blocked]{animation:none}.feature-tour-rule-demo[data-diagram=drain] .feature-tour-rule-crop:not([data-kind=target]) b{color:#b26d6b}
.feature-tour-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.feature-tour-stages>div{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:0 4px;padding:2px;animation:feature-tour-stage 3s ease-in-out infinite}.feature-tour-stages>div:nth-child(2){animation-delay:1s}.feature-tour-stages>div:nth-child(3){animation-delay:2s}.feature-tour-stages span{grid-row:1/3;display:block;width:28px;height:38px}.feature-tour-stages span>*{width:100%;height:100%;object-fit:contain}.feature-tour-stages small{font-size:10px;line-height:1.3;overflow-wrap:anywhere}.feature-tour-stages b{font-size:14px;color:#4f955c}
.feature-tour-cooldown-pots{display:flex;align-items:center;justify-content:center;gap:8px}.feature-tour-cooldown-pots>span{width:27px;height:37px;flex:none;animation:feature-tour-stage 3s ease-in-out infinite}.feature-tour-cooldown-pots>span:nth-child(2){animation-delay:1s}.feature-tour-cooldown-pots>span:nth-child(3){animation-delay:2s}.feature-tour-cooldown-pots>span>*{width:100%;height:100%;object-fit:contain}.feature-tour-cooldown-pots>strong{font-size:12px;line-height:1.4;color:#698459;display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:center}.feature-tour-cooldown-pots i{font-style:normal;color:#ba8b3e}
.feature-tour-outcome-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.feature-tour-outcome-list>div{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.feature-tour-outcome-list b{display:grid;place-items:center;width:30px;height:30px;font-size:15px;line-height:1;border-radius:50%;background:#ecb5a8;color:#734736}.feature-tour-outcome-list [data-kind=maintain] b{background:#d6d8bb;color:#626b57}.feature-tour-outcome-list [data-kind=success] b{background:#b2d6a6;color:#497249}.feature-tour-outcome-list [data-kind=great] b{background:#f2ce6b;color:#8e622d;animation:feature-tour-tap 2s ease-in-out infinite}.feature-tour-outcome-list small{font-size:10px;line-height:1.3;overflow-wrap:anywhere}
.feature-tour-progress{display:flex;gap:4px;flex-shrink:0}.feature-tour-progress i{flex:1;height:4px;max-height:4px;background:#d2caa6;border-radius:2px}.feature-tour-progress i[data-complete=true]{background:#71aa7a}
.feature-tour-coach footer{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}.feature-tour-coach footer>div{display:flex;align-items:center;gap:7px;min-width:0}
#feature-tour button,#feature-tour-library button{font:inherit;line-height:1.3;cursor:pointer;letter-spacing:0;box-shadow:none;min-height:44px;border:0}
#feature-tour button:focus-visible,#feature-tour-library button:focus-visible,#feature-tour-library input:focus-visible{outline:3px solid #367f8a;outline-offset:2px}
#feature-tour .feature-tour-later{background:transparent;color:#8c7755;padding:7px 2px;font-size:12px;max-width:110px;white-space:normal;overflow-wrap:anywhere}
#feature-tour .feature-tour-previous{width:44px;height:44px;padding:12px;flex:none;background:url('../assets/ui/button-secondary.png') center/100% 100% no-repeat;border-radius:0}
.feature-tour-previous img{width:100%;height:100%;object-fit:contain}#feature-tour .feature-tour-previous:disabled{opacity:.35;cursor:default}
#feature-tour .feature-tour-next{padding:10px 16px;min-width:84px;max-width:160px;background:url('../assets/ui/button-primary.png') center/100% 100% no-repeat;color:#fff8d5;font-size:13px;font-weight:700;border-radius:0;white-space:normal;overflow-wrap:anywhere}
#feature-tour-library{position:fixed;width:min(700px,calc(100vw - 24px));max-width:700px;max-height:calc(100dvh - 24px);padding:22px 28px;margin:auto;border:0;background:none;isolation:isolate;overflow:hidden;box-shadow:0 12px 40px #173f3540}
#feature-tour-library[open]{display:flex;flex-direction:column;gap:12px}#feature-tour-library::backdrop{background:#193d437d;backdrop-filter:blur(3px)}
#feature-tour-library>header{display:flex;align-items:center;gap:12px;flex:none;min-height:44px}#feature-tour-library h2{font-size:23px;line-height:1.3;margin:0;flex:1;min-width:0;overflow-wrap:anywhere}.feature-tour-library-emblem{width:44px;height:44px;flex:none}.feature-tour-library-emblem>*{width:100%;height:100%;object-fit:contain}
#feature-tour-library .feature-tour-close{width:44px;height:44px;padding:0;flex:none;background:url('../assets/ui-user/shop-close.png') center/21px no-repeat,url('../assets/ui-user/shop-close-circle.png') center/contain no-repeat;border-radius:50%}
.feature-tour-auto{display:flex;gap:10px;align-items:center;min-height:44px;flex:none;padding:6px 1px;color:#6a714f;font-size:13px}.feature-tour-auto input{width:22px;height:22px;accent-color:#608d5b;flex:none;margin:0}.feature-tour-auto span{overflow-wrap:anywhere;min-width:0}
.feature-tour-library-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b89964 transparent}
#feature-tour-library .feature-tour-library-list>button{display:flex;gap:9px;align-items:center;width:100%;padding:13px 2px;background:none;border-bottom:1px solid #ba9f6645;text-align:left;border-radius:0;color:#456243}
.feature-tour-library-art{width:46px;height:46px;flex:none;background:url('../assets/ui-user/goal-icon-bg.png') center/contain no-repeat}.feature-tour-library-art>*{width:100%;height:100%;object-fit:contain}.feature-tour-library-list button>span:nth-child(2){flex:1;min-width:0}.feature-tour-library-list strong{display:block;font-size:14px;line-height:1.45;overflow-wrap:anywhere}.feature-tour-library-list small{display:block;font-size:11px;color:#9a784e;margin-top:3px;overflow-wrap:anywhere}.feature-tour-library-list small span{white-space:nowrap;margin-left:5px}.feature-tour-library-arrow{width:14px;height:19px;flex:none}.feature-tour-library-arrow img{width:100%;height:100%;object-fit:contain}
@keyframes feature-tour-beacon{50%{box-shadow:0 0 0 2px #7d573b,0 0 0 10px #ffdd5822;border-color:#fff3bc}}
@keyframes feature-tour-point{50%{translate:4px 0}}
@keyframes feature-tour-travel{0%,15%{opacity:0;translate:0 0}35%{opacity:1}90%,100%{opacity:0;translate:21px 15px}}
@keyframes feature-tour-tap{0%,65%,100%{scale:1}80%{scale:.88}90%{scale:1.06}}
@keyframes feature-tour-grow{0%,15%{scale:.7;translate:0 6px}65%,100%{scale:1;translate:0 0}}
@keyframes feature-tour-feed{0%,20%,100%{translate:-3px -4px;scale:1}70%,85%{translate:13px 13px;scale:.7}}
@keyframes feature-tour-orbit{to{rotate:360deg}}
@keyframes feature-tour-coin{0%,100%{opacity:0;translate:0 4px}25%{opacity:1}80%{opacity:0;translate:0 -13px}}
@keyframes feature-tour-rule-flow{0%,100%{opacity:.5;translate:-2px 0}50%{opacity:1;translate:2px 0}}
@keyframes feature-tour-stage{0%,25%,100%{filter:none}15%{filter:brightness(1.3);translate:0 -2px}}
#feature-tour[data-reduced=true] *,#feature-tour-library[data-reduced=true] *,body[data-reduced-motion=true] #feature-tour *{animation:none!important}
@media(max-width:600px){.feature-tour-coach{width:340px;padding:14px 17px 12px}.feature-tour-coach h2{font-size:16px}.feature-tour-body{grid-template-columns:66px minmax(0,1fr);gap:7px}.feature-tour-demo{width:66px;height:74px}#feature-tour-library{padding:17px 20px}#feature-tour-library h2{font-size:20px}.feature-tour-library-list{grid-template-columns:minmax(0,1fr)}}
@media(max-height:500px){.feature-tour-coach{width:310px;gap:6px;padding:12px 16px 10px}.feature-tour-avatar{width:32px;height:34px}.feature-tour-avatar img{height:48px}.feature-tour-coach h2{font-size:15px}.feature-tour-kicker{font-size:10px}.feature-tour-count{font-size:11px}.feature-tour-body{grid-template-columns:56px minmax(0,1fr);gap:7px;max-height:142px}.feature-tour-demo{width:56px;height:66px}.feature-tour-demo-art{width:40px;height:40px}.feature-tour-demo-secondary{width:23px;height:23px}.feature-tour-copy p{font-size:12px;line-height:1.5}.feature-tour-coach footer{gap:5px}#feature-tour .feature-tour-next{font-size:12px;padding:9px 13px;min-width:76px}#feature-tour-library{padding:15px 23px;gap:5px}#feature-tour-library h2{font-size:20px}.feature-tour-library-list{gap:0 14px}.feature-tour-library-list>button{padding:9px 1px}}
@media(prefers-reduced-motion:reduce){#feature-tour *,#feature-tour-library *{animation:none!important}}


/* Original stylesheet: ./src/responsive-trading-safety.css */
/* 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}
}


/* Original stylesheet: ./src/pet-layout-safe.css */
/* Leave room for the close tab and safe areas before sizing the artwork. */
#panel-overlay:has(#game-window[data-panel="pets"]) {
  padding:calc(var(--ui-safe-top,0px) + 12px) calc(var(--ui-safe-right,0px) + 12px) calc(var(--ui-safe-bottom,0px) + 12px) calc(var(--ui-safe-left,0px) + 12px);
  overflow:hidden;
}
body[data-story-panel=true] #panel-overlay:has(#game-window[data-panel="pets"]) {
  padding-top:calc(var(--ui-safe-top,0px) + var(--ui-story-panel-height,124px) + 24px);
  padding-bottom:calc(var(--ui-safe-bottom,0px) + 12px);
}
body[data-story-panel=true]:has(#game-window[data-panel="pets"]) #story-guide[data-panel=true] {
  z-index:56;
}
#game-window[data-panel="pets"] {
  max-width:100%;
  max-height:100%;
}
#game-window[data-panel="pets"] #panel-close {
  right:8px;
}
#game-window[data-panel="pets"] .window-header h1 {
  max-width:100%;
  white-space:normal;
  overflow-wrap:break-word;
  text-align:center;
  text-wrap:balance;
  line-height:1.2;
}
/* The care card owns its title, backdrop and scrollport at every viewport size. */
#game-window[data-panel="pets"] .pet-layout::before {
  display:none;
}
#game-window[data-panel="pets"] .pet-roster {
  border-radius:18px;
  background:#ffda82;
  padding:0 6px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#dc960f transparent;
}
#game-window[data-panel="pets"] .pet-workspace {
  min-width:0;
  min-height:0;
  overflow:hidden;
}
#game-window[data-panel="pets"] :is(.pet-work,.pet-feeding,.pet-collection) {
  min-width:0;
  min-height:0;
  padding:12px;
  border-radius:18px;
  background:#ffda82;
  overflow:hidden;
}
#game-window[data-panel="pets"] .pet-work {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:6px;
}
#game-window[data-panel="pets"] .pet-section-heading {
  flex:none;
  align-items:flex-start;
  gap:4px 12px;
  padding:0 3px 6px;
  border-bottom:1px solid #fff3bd;
}
#game-window[data-panel="pets"] .pet-section-heading :is(h3,span) {
  min-width:0;
  max-width:100%;
  line-height:1.45;
  white-space:normal;
  overflow-wrap:break-word;
}
#game-window[data-panel="pets"] .pet-work-scroll {
  grid-row:2;
  width:100%;
  height:100%;
  min-height:0;
  padding:4px 10px 12px 3px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#dc960f transparent;
  scroll-padding-block:8px;
}
#game-window[data-panel="pets"] .pet-work-scroll:focus-visible {
  outline:2px solid #b57816;
  outline-offset:-2px;
  border-radius:4px;
}
#game-window[data-panel="pets"] :is(.pet-toggle,.pet-select) {
  gap:10px;
  align-items:center;
}
#game-window[data-panel="pets"] :is(.pet-toggle,.pet-select)>span {
  min-width:0;
  overflow-wrap:break-word;
}
#game-window[data-panel="pets"] .pet-select select {
  width:52%;
  min-width:0;
  max-width:58%;
  flex:0 1 52%;
}
#game-window[data-panel="pets"] .pet-work-facts {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 18px;
}
#game-window[data-panel="pets"] .pet-work-facts :is(dt,dd),
#game-window[data-panel="pets"] :is(.pet-catalysis-rule,.pet-catalysis-exclusive) {
  line-height:1.55;
  overflow-wrap:break-word;
}
#game-window[data-panel="pets"] .pet-detail-scroll {
  padding-inline:6px 10px;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
#game-window[data-panel="pets"] .pet-detail-actions {
  flex:none;
}
@media(max-width:1050px),(max-height:700px) {
  #game-window[data-panel="pets"] :is(.pet-work,.pet-feeding,.pet-collection) {
    padding:8px;
    border-radius:12px;
  }
  #game-window[data-panel="pets"] .pet-work {
    gap:4px;
  }
  #game-window[data-panel="pets"] .pet-work-scroll {
    padding:3px 7px 10px 2px;
  }
  #game-window[data-panel="pets"] .pet-roster {
    padding:0 4px;
    border-radius:12px;
  }
  #game-window[data-panel="pets"] .pet-work-facts {
    gap:8px 12px;
  }
}
@media(max-width:700px) and (orientation:portrait) {
  #game-window[data-panel="pets"] .pet-roster {
    padding:0 3px;
  }
  #game-window[data-panel="pets"] .pet-work-facts {
    grid-template-columns:minmax(0,1fr);
  }
  #game-window[data-panel="pets"] .pet-section-heading>span {
    font-size:11px;
  }
}
/* The viewport, not the artwork's original height, owns the available space.
   Lists occupy the remaining track; fixed controls never participate in it. */
@media(max-width:1050px),(max-height:700px) {
  #game-window[data-panel="pets"] .pet-feeding {
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:4px;
  }
  #game-window[data-panel="pets"] .pet-collection {
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    gap:4px;
  }
  #game-window[data-panel="pets"] :is(.pet-food-list,.pet-effect-list) {
    min-height:0;
    height:100%;
    max-height:none;
    align-content:start;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    touch-action:pan-y;
    scroll-padding-block:4px;
  }
  #game-window[data-panel="pets"] .pet-detail-scroll {
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    scroll-padding-block:8px;
  }
  #game-window[data-panel="pets"] .pet-feed-footer {
    display:grid;
    grid-template-columns:auto 56px minmax(0,1fr);
    min-width:0;
    margin:0;
    padding:4px 0 0;
    gap:6px;
  }
  #game-window[data-panel="pets"] .pet-feed-footer input {
    width:100%;
    min-width:0;
  }
  #game-window[data-panel="pets"] .pet-feed-footer .pet-primary {
    justify-self:end;
    margin:0;
    max-width:100%;
    white-space:normal;
    overflow-wrap:break-word;
    line-height:1.2;
  }
  #game-window[data-panel="pets"] .pet-upgrade strong {
    display:flex;
    flex-wrap:nowrap;
    max-width:100%;
    gap:3px;
    white-space:nowrap;
    overflow-wrap:normal;
    font-variant-numeric:tabular-nums;
  }
  #game-window[data-panel="pets"] .pet-upgrade strong>span {
    min-width:0;
    overflow-wrap:normal;
    white-space:nowrap;
  }
  #game-window[data-panel="pets"] .pet-detail-actions :is(.pet-upgrade,.pet-carry) {
    min-width:0;
    overflow-wrap:break-word;
    line-height:1.2;
  }
  #game-window[data-panel="pets"] .pet-vitals {
    display:flow-root;
  }
}
/* Keep the desktop's two columns, but put the portrait beside its caption so
   hunger, mutation and buff descriptions retain a usable scroll window. */
@media(orientation:landscape) and (max-height:700px),
      (orientation:landscape) and (max-width:1050px) {
  #game-window[data-panel="pets"] .pet-layout {
    --pet-roster-size:40px;
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    grid-template-rows:72px minmax(0,1fr);
    gap:6px 10px;
    padding:8px;
  }
  #game-window[data-panel="pets"] .pet-roster-item {
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    grid-template-rows:auto auto auto;
    align-content:center;
    justify-items:center;
    gap:1px 4px;
    padding:4px 2px;
  }
  #game-window[data-panel="pets"] .pet-roster-art {
    grid-column:1;
    grid-row:1 / 4;
    width:40px;
    height:40px;
  }
  #game-window[data-panel="pets"] .pet-roster-item :is(strong,small,.pet-roster-status) {
    grid-column:2;
    width:100%;
    text-align:center;
    white-space:normal;
    overflow-wrap:break-word;
    line-height:1.2;
  }
  #game-window[data-panel="pets"] .pet-roster-item strong { font-size:12px; }
  #game-window[data-panel="pets"] .pet-roster-item small,
  #game-window[data-panel="pets"] .pet-roster-status { font-size:10px; }
  #game-window[data-panel="pets"] .pet-detail {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    padding:6px;
    gap:5px;
    border-radius:12px;
    background:#ffda82;
    overflow:hidden;
  }
  #game-window[data-panel="pets"] .pet-profile {
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    grid-template-rows:auto auto;
    align-items:center;
    align-content:center;
    gap:2px 5px;
  }
  #game-window[data-panel="pets"] .pet-preview {
    grid-column:1;
    grid-row:1 / 3;
    width:56px;
    height:52px;
  }
  #game-window[data-panel="pets"] .pet-main-portrait { height:56px;top:-3px; }
  #game-window[data-panel="pets"] .pet-profile h2 {
    grid-column:2;
    width:100%;
    padding:4px 7px;
    font-size:15px;
    line-height:1.2;
    overflow-wrap:break-word;
  }
  #game-window[data-panel="pets"] .pet-form { grid-column:2;font-size:10px; }
  #game-window[data-panel="pets"] .pet-detail-actions {
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    gap:5px;
    padding:0;
  }
  #game-window[data-panel="pets"] .pet-detail-actions button {
    min-height:40px;
    padding:4px 5px;
    font-size:12px;
  }
  #game-window[data-panel="pets"] .pet-detail-actions .pet-upgrade {
    flex-direction:column;
    justify-content:center;
    gap:2px;
    padding:4px;
    font-size:11px;
  }
  #game-window[data-panel="pets"] .pet-upgrade strong { font-size:11px; }
  #game-window[data-panel="pets"] :is(.pet-work,.pet-feeding,.pet-collection) { padding:5px; }
  #game-window[data-panel="pets"] .pet-section-heading { gap:2px 6px;padding:0 0 3px; }
  #game-window[data-panel="pets"] .pet-section-heading h3 { font-size:12px; }
  #game-window[data-panel="pets"] .pet-section-heading>span { font-size:10px; }
  #game-window[data-panel="pets"] .pet-feed-footer input,
  #game-window[data-panel="pets"] .pet-feed-footer .pet-primary { height:36px;min-height:36px; }
  #game-window[data-panel="pets"] .pet-empty {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:0;
    padding:4px 2px;
    font-size:12px;
  }
  #game-window[data-panel="pets"] .pet-empty .crop-icon { width:30px;height:30px;margin:0; }
}
@media(orientation:landscape) and (max-height:500px) {
  #game-window[data-panel="pets"] .pet-layout { grid-template-rows:62px minmax(0,1fr);padding:6px; }
  #game-window[data-panel="pets"] .pet-roster-item { grid-template-columns:32px minmax(0,1fr);gap:1px 3px; }
  #game-window[data-panel="pets"] .pet-roster-art { width:32px;height:32px; }
  #game-window[data-panel="pets"] .pet-profile { grid-template-columns:44px minmax(0,1fr); }
  #game-window[data-panel="pets"] .pet-preview { width:44px;height:42px; }
  #game-window[data-panel="pets"] .pet-main-portrait { height:46px; }
  #game-window[data-panel="pets"] .pet-tabs button { height:32px;min-height:32px;font-size:12px; }
  #game-window[data-panel="pets"] .pet-tabs .crop-icon { width:18px;height:18px; }
}
@media(max-width:700px) and (orientation:portrait) {
  #game-window[data-panel="pets"] .pet-layout {
    grid-template-rows:76px minmax(142px,.8fr) minmax(0,1.2fr);
    gap:7px;
  }
  #game-window[data-panel="pets"] .pet-detail {
    grid-template-columns:70px minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto;
    gap:6px;
    padding:6px;
    overflow:hidden;
  }
  #game-window[data-panel="pets"] .pet-profile { overflow:hidden; }
  #game-window[data-panel="pets"] .pet-profile h2 { font-size:13px;padding:4px;overflow-wrap:break-word; }
  #game-window[data-panel="pets"] .pet-detail-actions button { min-height:40px; }
  #game-window[data-panel="pets"] .pet-detail-actions .pet-upgrade { flex-direction:column;justify-content:center;gap:2px; }
  #game-window[data-panel="pets"] .pet-roster-item strong { font-size:12px; }
  #game-window[data-panel="pets"] .pet-roster-art { width:36px;height:36px; }
  #game-window[data-panel="pets"] .pet-roster-item small,
  #game-window[data-panel="pets"] .pet-roster-status { font-size:10px;line-height:1.2; }
  #game-window[data-panel="pets"] :is(.pet-work,.pet-feeding,.pet-collection) { padding:5px; }
  #game-window[data-panel="pets"] .pet-section-heading h3 { font-size:12px; }
  #game-window[data-panel="pets"] .pet-section-heading>span { font-size:10px; }
  #game-window[data-panel="pets"] .pet-feed-footer { grid-template-columns:auto 48px minmax(0,1fr); }
  #game-window[data-panel="pets"] .pet-feed-footer :is(input,.pet-primary) { min-height:40px;height:40px; }
}
/* With the tutorial card open on a short phone, use a narrow pet selector
   column. The feeding controls and detail scrollport keep their full height. */
@media(orientation:landscape) and (max-height:430px) {
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-layout {
    grid-template-columns:minmax(78px,.42fr) minmax(0,1.2fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    grid-template-areas:"roster workspace detail";
    gap:5px;
    padding:5px;
  }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-roster {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(3,minmax(44px,1fr));
    padding:0 2px;
    gap:2px;
  }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-roster-item {
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    grid-template-rows:auto;
    padding:2px 0;
  }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-roster-art { width:24px;height:24px;grid-row:1; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-profile { grid-template-columns:30px minmax(0,1fr);gap:2px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-preview { width:30px;height:30px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-main-portrait { height:34px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-profile h2 { font-size:12px;padding:3px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-detail-actions button { min-height:36px;font-size:11px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-tabs button { min-height:32px;height:32px; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-tabs .crop-icon { display:none; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-section-heading { display:none; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-work,
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-collection { grid-template-rows:minmax(0,1fr); }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-work-scroll { grid-row:1; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-feeding { grid-template-rows:minmax(0,1fr) auto; }
  body[data-story-panel=true] #game-window[data-panel="pets"] .pet-feed-footer :is(input,.pet-primary) { min-height:32px;height:32px; }
}


/* Original stylesheet: ./src/shop-tabs-safe.css */
/* Both trading tabs live in the shop header, above the decorative frame.
   Keep one visible copy and the same geometry in either selected state. */
#game-window[data-panel=shop] {--trade-tab-height:72px;--trade-tab-font:26px;--trade-tab-left:12px;--trade-tab-top:4px}
#game-window[data-panel=shop] .shop-trade-tabs-rear {display:none}
#game-window[data-panel=shop] .shop-trade-tabs-front {
  position:absolute;inset:var(--trade-tab-top) auto auto var(--trade-tab-left);
  display:flex;align-items:center;gap:4px;z-index:6;
  width:calc(3.6 * var(--trade-tab-height) + 4px);height:var(--trade-tab-height);
  max-width:calc(100% - var(--trade-tab-left) - 12px);pointer-events:none;
}
#game-window[data-panel=shop] .shop-trade-tabs-front .shop-trade-tab {
  position:relative;inset:auto;display:grid;place-items:center;
  flex:1 1 0;min-width:0;width:auto;height:100%;min-height:44px;
  margin:0;padding:8px 12px;border:0;border-radius:22% 22% 30% 30%;
  transform:none;translate:none;box-shadow:0 3px 5px #294c3433;z-index:1;
  font-size:var(--trade-tab-font);line-height:1.1;letter-spacing:0;
  background:#fffef0;
  pointer-events:auto;
}
#game-window[data-panel=shop] .shop-trade-tabs-front .shop-trade-tab[data-mode=sell] {background:#fffef0}
#game-window[data-panel=shop] .shop-trade-tabs-front .shop-trade-tab>span {
  position:static;inset:auto;display:grid;place-items:center;
  visibility:visible;opacity:1;filter:none;width:100%;height:100%;
  padding:4px 10px;background:url('../assets/ui-user/shop-buy-label-bg.png') center / 100% 100% no-repeat;
  color:#285c51;text-shadow:0 1px 1px #fff8;
}
#game-window[data-panel=shop] .shop-trade-tabs-front .shop-trade-tab.active>span {color:#fff5c6;filter:drop-shadow(0 2px 2px #56723a55)}
#game-window[data-panel=shop] .shop-trade-tabs-front .shop-trade-tab:not(.active)>span {background-image:url('../assets/ui-user/shop-sell-label-bg.png');filter:saturate(.55)}
#game-window[data-panel=shop] .shop-trade-tabs-front .shop-trade-tab>span>b {transform:none;white-space:nowrap}
#game-window[data-panel=shop] .shop-trade-tabs-front .shop-trade-tab:active:not(:disabled) {transform:translateY(1px)}
@media(min-width:1051px) and (min-height:701px) {
  #game-window[data-panel=shop] {--trade-tab-height:calc(210 * var(--su));--trade-tab-font:clamp(22px,calc(55 * var(--su)),52px);--trade-tab-left:calc(150 * var(--su));--trade-tab-top:0px}
}
@media(orientation:landscape) and (max-height:700px),(orientation:landscape) and (max-width:1050px) {
  #game-window[data-panel=shop] {--trade-tab-height:60px;--trade-tab-font:24px;--trade-tab-left:14px;--trade-tab-top:4px}
  body[data-story-panel=true] #game-window[data-panel=shop] {--trade-tab-height:44px;--trade-tab-font:20px;--trade-tab-top:0px}
}
@media(orientation:landscape) and (max-height:420px) {
  #game-window[data-panel=shop] {--trade-tab-height:48px;--trade-tab-font:20px;--trade-tab-top:2px}
}
@media(orientation:portrait) and (max-width:760px) {
  #game-window[data-panel=shop] {--trade-tab-height:44px;--trade-tab-font:20px;--trade-tab-top:4px}
  #game-window[data-panel=shop] .shop-trade-tabs-front .shop-trade-tab {padding:3px 5px}
}
@media(orientation:portrait) and (max-width:350px) {
  #game-window[data-panel=shop] {--trade-tab-font:18px}
  #game-window[data-panel=shop] .shop-trade-tabs-front {max-width:calc(100% - 160px)}
  #game-window[data-panel=shop] .shop-trade-tabs-front .shop-trade-tab>span {padding:3px 5px}
}


/* Original stylesheet: ./src/shop-guide-overlay.css */
/* Shop guidance floats in spare header space. It never reserves shop height. */
#story-guide[data-shop=true] {
  z-index:46;top:calc(var(--ui-viewport-top,0px) + var(--ui-safe-top,0px) + var(--trading-gutter));
  left:auto;right:calc(var(--ui-safe-right,0px) + var(--trading-gutter));translate:none;
  width:min(430px,calc(100vw - 32px));max-width:none;
  height:auto;min-height:0;max-height:calc(var(--ui-viewport-height,100dvh) - 32px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:30px auto;
  padding:10px 18px 12px;gap:2px 10px;
}
#story-guide[data-shop=true] header {display:flex;grid-column:1/-1;height:30px;min-height:30px}
#story-guide[data-shop=true] .story-guide-copy {grid-column:1;grid-row:2;min-width:0;min-height:0;overflow:auto;max-height:40dvh}
#story-guide[data-shop=true] footer {grid-column:2;grid-row:2;align-self:center}
#story-guide[data-shop=true][data-collapsed=true] {grid-template-rows:30px;padding:8px 16px;min-height:46px;width:240px}
#story-guide[data-shop=true][data-collapsed=true] :is(.story-guide-copy,footer) {display:none}
#story-guide[data-shop=true] [data-guide=collapse] {width:32px;height:32px;min-width:32px}
#story-guide[data-shop=true] #story-guide-primary {max-width:110px;white-space:normal}
@media(orientation:landscape) and (max-height:700px),(orientation:landscape) and (max-width:1050px) {
  #story-guide[data-shop=true] {width:min(380px,48vw);top:calc(var(--ui-safe-top,0px) + 12px)}
  #story-guide[data-shop=true][data-collapsed=false] {right:calc(var(--ui-safe-right,0px) + var(--trading-gutter) + 76px)}
  #story-guide[data-shop=true][data-collapsed=true] {width:min(260px,40vw);min-height:44px;padding:6px 14px}
}
@media(orientation:portrait) and (max-width:1050px) {
  #story-guide[data-shop=true] {top:calc(var(--ui-safe-top,0px) + 72px);width:min(430px,calc(100vw - 32px));right:16px}
  #story-guide[data-shop=true][data-collapsed=true] {
    top:calc(var(--ui-safe-top,0px) + var(--trading-gutter) + 4px);right:calc(var(--ui-safe-right,0px) + var(--trading-gutter) + 56px);
    width:82px;min-height:44px;padding:6px 8px;grid-template-columns:minmax(0,1fr);
  }
  #story-guide[data-shop=true][data-collapsed=true] :is(.story-guide-avatar,[data-guide=journal]) {display:none}
  #story-guide[data-shop=true][data-collapsed=true] .story-guide-kicker {font-size:0}
  #story-guide[data-shop=true][data-collapsed=true] .story-guide-kicker b {font-size:12px;white-space:nowrap;margin:0}
}


/* Original stylesheet: ./src/phone-overlay-safe.css */
/* Phone controls share the visible viewport, including browser toolbar changes. */
@media (max-width:1050px), (max-height:700px) {
 html #seed-dock .seed-slot {height:76px;min-height:76px;gap:3px}
 html #seed-dock .seed-name {
  width:100%;max-width:100%;min-height:26px;max-height:26px;
  font-size:10px;line-height:13px;white-space:normal;overflow-wrap:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
 }
 #seed-dock .slot-art {flex-shrink:0}
 .hud-resources .coin-pill {max-width:100%;min-width:0;gap:5px}
 .hud-resources .coin-pill .hud-icon {flex-shrink:0}
 .hud-resources .coin-pill strong {min-width:0;font-variant-numeric:tabular-nums;white-space:nowrap;overflow-wrap:normal;font-size:16px}
 #garden-record {scrollbar-width:thin;scrollbar-color:#af8b4a transparent;overscroll-behavior:contain}
 #garden-record::-webkit-scrollbar {width:4px}
 #garden-record::-webkit-scrollbar-thumb {background:#af8b4a;border-radius:4px}
 #story-guide[data-catalysis=true] {
  --guide-top:calc(var(--ui-viewport-top) + var(--ui-safe-top) + 58px);
  top:var(--guide-top);left:calc(var(--ui-viewport-left) + var(--ui-safe-left) + 8px);
  width:min(350px,var(--catalysis-guide-width,calc(var(--ui-viewport-width) - 16px)));
  max-width:calc(var(--ui-viewport-width) - var(--ui-safe-left) - var(--ui-safe-right) - 16px);
  max-height:max(0px,min(190px,calc(var(--catalysis-guide-floor,50dvh) - var(--guide-top))));
  min-height:0;height:auto;translate:none;padding:10px 15px;gap:4px 8px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:30px minmax(0,1fr);
 }
 #story-guide[data-catalysis=true] header {grid-column:1/-1;min-height:30px;height:30px}
 #story-guide[data-catalysis=true] .story-guide-avatar {width:28px;height:30px}
 #story-guide[data-catalysis=true] .story-ahe-mini {width:28px;height:41px}
 #story-guide[data-catalysis=true] .story-guide-kicker {font-size:11px}
 #story-guide[data-catalysis=true] .story-guide-kicker b {display:inline;margin-left:4px}
 #story-guide[data-catalysis=true] .story-guide-copy {grid-column:1;grid-row:2;overflow:auto;touch-action:pan-y;scrollbar-gutter:stable}
 #story-guide[data-catalysis=true] h2 {font-size:13px;margin:1px 0 4px}
 #story-guide[data-catalysis=true] p {font-size:11px;line-height:1.5}
 #story-guide[data-catalysis=true] small {font-size:10px;line-height:1.5;margin-top:4px}
 #story-guide[data-catalysis=true] footer {grid-column:2;grid-row:2;margin:0;align-self:start;flex-direction:column;max-width:82px;gap:4px}
 html #story-guide[data-catalysis=true] .story-skip {max-width:100%;font-size:10px;white-space:normal}
 #story-guide .story-guide-copy {scrollbar-color:#b79752 transparent;overflow-x:hidden}
 #story-guide .story-guide-copy::-webkit-scrollbar {width:4px}
 #story-guide .story-guide-copy::-webkit-scrollbar-track {background:transparent}
 #story-guide .story-guide-copy::-webkit-scrollbar-thumb {background:#b79752;border-radius:4px}
 #catalysis-potions button .rarity-name {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;width:100%;max-height:22px;overflow:hidden;overflow-wrap:normal;font-size:9px;line-height:11px}
 #story-guide[data-catalysis=true] .story-steps {display:none}
 #story-guide[data-catalysis=true][data-collapsed=true] {grid-template-rows:30px}
 #story-guide[data-catalysis=true][data-collapsed=true] :is(.story-guide-copy,footer) {display:none}
 #story-guide[data-catalysis=true][data-step=claim] {grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) 100px}
 #story-guide[data-catalysis=true][data-step=claim] :is(header,.story-skip,.story-guide-copy small) {display:none}
 #story-guide[data-catalysis=true][data-step=claim] .story-guide-copy {grid-row:1}
 #story-guide[data-catalysis=true][data-step=claim] footer {grid-row:1;max-width:100px;align-self:center}
 #story-guide[data-catalysis=true][data-step=claim] #story-guide-primary {min-height:44px;padding:5px 8px;font-size:12px;line-height:1.3;white-space:normal}
 #story-guide[data-shop=true][data-collapsed=false] {grid-template-rows:30px minmax(0,1fr);overflow:hidden}
 #story-guide[data-shop=true] .story-guide-copy {max-height:none;touch-action:pan-y}
 #story-guide[data-shop=true] #story-guide-primary {min-height:44px;max-width:100px;border-radius:12px;overflow:hidden}
 #story-guide[data-shop=true] footer {min-height:0;gap:0}
 #story-guide[data-shop=true] .story-skip {font-size:10px;min-height:20px}
 #story-guide-primary.quest-claim-target {border-radius:12px;overflow:hidden}
 /* Keep the click-blocking regions, but cut a rounded opening around Claim. */
 #quest-claim-spotlight .claim-shade {background:transparent}
 #quest-claim-spotlight .claim-spotlight-ring {border-radius:18px;box-shadow:0 0 0 9999px rgba(8,17,22,.79);animation:none}
 #quest-claim-spotlight .claim-spotlight-ring::after {content:"";position:absolute;inset:-2px;border:2px solid #fff8d8;border-radius:inherit;box-shadow:0 0 28px #ffc84faa;opacity:.65;pointer-events:none;animation:phone-claim-breathe 1.5s ease-in-out infinite}
}
@keyframes phone-claim-breathe {50%{opacity:1}}
body[data-reduced-motion=true] #quest-claim-spotlight .claim-spotlight-ring::after {animation:none}
@media(prefers-reduced-motion:reduce){#quest-claim-spotlight .claim-spotlight-ring::after {animation:none}}
@media (orientation:landscape) and (max-height:700px) {
 #story-guide[data-shop=true] {right:calc(var(--ui-safe-right) + var(--trading-gutter) + 104px);max-width:calc(var(--ui-viewport-width) - var(--ui-safe-left) - var(--ui-safe-right) - 320px)}
 #story-guide[data-shop=true][data-collapsed=false] {right:calc(var(--ui-safe-right) + var(--trading-gutter) + 104px)}
 #story-guide[data-shop=true][data-collapsed=false] {max-height:min(132px,calc(var(--ui-viewport-height)*.4));padding:7px 14px 9px}
 #story-guide[data-shop=true] header {height:26px;min-height:26px}
 #story-guide[data-shop=true] h2 {font-size:12px}
 #story-guide[data-shop=true] p {font-size:11px;line-height:1.4}
 #garden-record {background:#fff8dcdb;border-radius:0 14px 14px 0;overflow-x:hidden}
}
@media (orientation:portrait) and (max-width:700px) {
 #story-guide[data-catalysis=true] {width:var(--catalysis-guide-width,calc(var(--ui-viewport-width) - 16px))}
 #story-guide[data-shop=true][data-collapsed=false] {max-height:170px}
}
@media (orientation:portrait) and (max-height:600px) {
 #story-guide[data-catalysis=true]:not([data-step=claim]) {padding:8px 12px;gap:2px;grid-template-columns:minmax(0,1fr);grid-template-rows:24px minmax(0,1fr)}
 #story-guide[data-catalysis=true]:not([data-step=claim]) header {height:24px;min-height:24px}
 #story-guide[data-catalysis=true]:not([data-step=claim]) .story-guide-avatar {width:24px;height:24px}
 #story-guide[data-catalysis=true]:not([data-step=claim]) footer {display:none}
}

/* Portrait catalysis leaves a deliberate window for the actual plant. */
.catalysis-secondary-stats {display:none}
@media (orientation:portrait) and (max-width:700px) {
 #story-guide[data-shop=true][data-collapsed=true] {top:calc(var(--ui-viewport-top) + var(--ui-safe-top) + 64px);left:calc(var(--ui-viewport-left) + var(--ui-viewport-width)*.5);right:auto;translate:-50% 0;min-height:36px;height:36px;padding:3px 8px}
 body.catalysis-mode #catalysis-panel {
  --portrait-panel-height:min(220px,calc(var(--ui-viewport-height)*.28));
  height:var(--portrait-panel-height);top:calc(var(--ui-viewport-top) + var(--ui-viewport-height) - var(--ui-safe-bottom) - 8px - var(--portrait-panel-height));
  padding:7px 9px;gap:3px;border-radius:16px;
 }
 #catalysis-panel header {min-height:28px;gap:4px}
 #catalysis-panel h2 {font-size:15px}
 #catalysis-panel header button {width:30px;height:30px;min-height:30px;min-width:30px}
 #catalysis-panel .catalysis-heading .catalysis-stage {font-size:10px}
 #catalysis-panel .catalysis-content {flex:1;min-height:0;font-size:11px;line-height:1.4}
 #catalysis-panel .catalysis-content>label {display:flex;align-items:center;gap:5px;font-size:10px}
 #catalysis-panel .catalysis-growth {flex:1;min-width:48px;height:7px;margin:3px 0}
 #catalysis-panel .catalysis-natural {margin:4px 0;padding-top:4px;font-size:11px}
 #catalysis-panel .catalysis-natural small {font-size:10px;line-height:1.4}
 #catalysis-panel .catalysis-actions {grid-template-columns:minmax(0,1fr) 76px;gap:3px}
 #catalysis-panel .catalysis-result {min-height:14px;line-height:14px;font-size:11px}
 #catalysis-panel .catalysis-result:empty {display:none}
 #catalysis-panel :is(.catalysis-cast,.catalysis-harvest,.catalysis-exit) {height:44px;min-height:44px;margin:0;padding:4px;font-size:14px}
 #catalysis-panel .catalysis-exit {font-size:11px}
 #catalysis-panel .catalysis-secondary-stats {display:block;margin:5px 0;font-size:10px;color:var(--card-muted)}
 #catalysis-potions {height:48px;gap:5px;padding:2px}
 #catalysis-potions button {width:54px;height:44px;min-width:54px;min-height:44px;gap:0;padding:2px;border-radius:10px}
 #catalysis-potions .potion-slot-art {width:23px;height:23px;min-height:23px}
 #catalysis-potions button .rarity-name {font-size:8px;line-height:8px;max-height:16px}
 #catalysis-scene-cards {gap:4px}
 #catalysis-scene-cards .catalysis-stat-card,
 #catalysis-scene-cards .catalysis-stat-card[data-card=value] {height:48px;min-height:48px;grid-template-rows:20px 18px;padding:3px;gap:0;border-width:1px;border-radius:9px;box-shadow:none}
 #catalysis-scene-cards .stat-heading {font-size:9px;line-height:10px;max-height:20px;overflow:hidden}
 #catalysis-scene-cards .stat-heading .crop-icon {width:12px;height:12px}
 #catalysis-scene-cards strong {font-size:16px;line-height:18px;white-space:nowrap;overflow-wrap:normal}
 #catalysis-scene-cards :is(.yield-range,small) {display:none}
 body.catalysis-mode #story-guide[data-catalysis=true] {--guide-top:calc(var(--ui-viewport-top) + var(--ui-safe-top) + 54px);height:80px;max-height:80px;padding:7px 12px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:24px minmax(0,1fr);gap:2px 6px}
 body.catalysis-mode #story-guide[data-catalysis=true] header {min-height:24px;height:24px}
 body.catalysis-mode #story-guide[data-catalysis=true]::before {border-image:url('../assets/ui/panel.png') 38 fill / 12px stretch}
 body.catalysis-mode #story-guide[data-catalysis=true] .story-guide-avatar {width:24px;height:24px}
 body.catalysis-mode #story-guide[data-catalysis=true] .story-guide-avatar>.story-ahe-mini {width:24px;height:35px}
 body.catalysis-mode #story-guide[data-catalysis=true] h2 {font-size:12px;line-height:1.3;margin:0 0 2px}
 body.catalysis-mode #story-guide[data-catalysis=true] p {font-size:10px;line-height:1.4}
 body.catalysis-mode #story-guide[data-catalysis=true] footer {max-width:76px;max-height:100%;overflow:auto}
 body.catalysis-mode #story-guide[data-catalysis=true][data-collapsed=true] {height:40px;grid-template-rows:24px}
 body.catalysis-mode #story-guide[data-catalysis=true][data-step=claim] {height:72px;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) 100px}
 body.catalysis-mode #story-guide[data-catalysis=true][data-step=claim] footer {max-width:100px}
}


/* Original stylesheet: ./src/landscape-desktop-ui.css */
/* 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%}
}


/* Original stylesheet: ./src/landscape-desktop-panels.css */
/* 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;
  }
}


/* Original stylesheet: ./src/landscape-desktop-hud.css */
/* Landscape keeps the desktop HUD's four edge groups. These final rules share
   one safe viewport; the centre is reserved for the garden and selected crop. */
@media (orientation:landscape) and (max-height:700px), (orientation:landscape) and (max-width:1050px) {
 :root {
  --landscape-hud-width:clamp(144px,22vw,192px);
  --hud-stick-size:78px;
  --hud-stick-bottom:12px;
  --hud-record-top:136px;
  --catalysis-panel-width:clamp(224px,31vw,340px);
 }
 body .hud-resources {left:calc(var(--ui-viewport-left) + var(--ui-safe-left) + 8px);top:calc(var(--ui-viewport-top) + var(--ui-safe-top) + 8px);width:auto;height:auto;padding:0;background:none}
 body .hud-resources .coin-pill {width:var(--landscape-hud-width);height:38px;min-height:38px;padding:3px 9px 3px 4px;gap:7px}
 body .hud-resources .coin-pill .hud-icon {width:32px;height:32px}
 body .hud-resources .coin-pill strong {font-size:17px;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums}
 body .hud-system {top:calc(var(--ui-viewport-top) + var(--ui-safe-top) + 8px);right:calc(var(--ui-safe-right) + 8px);grid-template-columns:repeat(3,40px);gap:4px;width:auto}
 body .hud-system .square-button {width:40px;height:40px;min-width:40px;min-height:40px;padding:3px}

 body #main-quest {left:calc(var(--ui-viewport-left) + var(--ui-safe-left) + 8px);top:calc(var(--ui-viewport-top) + var(--ui-safe-top) + 54px);width:var(--landscape-hud-width);max-width:none;height:74px;min-height:0;padding:6px 8px;gap:3px;translate:none;transform:none;overflow:hidden;grid-template-rows:auto minmax(0,1fr) auto}
 body #main-quest .main-quest-emblem,body #main-quest .main-quest-emblem>.crop-icon {width:18px;height:18px}
 body #main-quest .main-quest-title>strong {font-size:11px;line-height:1.2}
 body #main-quest .main-quest-description {font-size:10px;line-height:1.25;-webkit-line-clamp:2}
 body #main-quest .main-quest-rewards,body #main-quest .main-quest-claim {font-size:10px}
 body #main-quest .main-quest-claim {padding:3px 6px;line-height:1.2}
 body #main-quest .main-quest-rewards .crop-icon {width:14px;height:14px}
 body #main-quest {grid-template-rows:18px minmax(12px,1fr) 22px;padding:4px 8px;gap:2px}
 body #main-quest .main-quest-description {display:block;min-height:0;max-height:12px;align-self:center;line-height:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
 body #main-quest .main-quest-footer {height:22px;min-height:0;overflow:hidden}
 body #main-quest .main-quest-claim {max-width:72px;height:22px;min-height:22px;padding:1px 3px;font-size:9px;line-height:10px;white-space:normal;overflow:hidden}
 body #garden-record {
  left:calc(var(--ui-viewport-left) + var(--ui-safe-left) + 8px);top:calc(var(--ui-viewport-top) + var(--ui-safe-top) + var(--hud-record-top));
  width:var(--landscape-hud-width);min-width:0;min-height:0;height:auto;
  max-height:max(0px,calc(var(--ui-viewport-height) - var(--ui-safe-top) - var(--ui-safe-bottom) - var(--hud-record-top) - var(--hud-stick-size) - var(--hud-stick-bottom) - 12px));
  padding:27px 6px 6px;border-radius:12px;background:#fff8dcdb;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;
 }
 body #garden-record.quest-board .quest-header {width:100%;height:23px;font-size:13px;line-height:1.3;letter-spacing:0}
 body #garden-record :is(.quest-item,.quest-reward) {height:24px;min-height:24px;margin-bottom:4px;padding:2px 6px;gap:5px}
 body #garden-record .record-label {font-size:10px;line-height:1.2;white-space:normal}
 body #garden-record :is(.quest-item,.quest-reward) strong {font-size:12px;white-space:nowrap}
 body #garden-record .record-best {padding:4px 6px;gap:2px}
 body #garden-record #record-best {font-size:10px;line-height:1.3}

 body .quickbar {left:calc(var(--ui-viewport-left) + var(--ui-safe-left) + 108px);right:calc(var(--ui-safe-right) + 120px);bottom:calc(var(--ui-safe-bottom) + 3px);width:auto;max-width:none;min-width:0;transform:none;translate:none;justify-items:center;gap:3px}
 body #seed-dock {--h:.65px;width:max-content;max-width:100%;min-width:0;padding:4px 7px;gap:5px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior:contain}
 html body .quickbar #seed-dock .seed-slot {flex:0 0 clamp(40px,5.2vw,52px);width:clamp(40px,5.2vw,52px);height:70px;min-height:70px;gap:2px;padding:0}
 html body .quickbar #seed-dock .slot-art {width:clamp(40px,5.2vw,52px);height:40px;min-height:40px;flex:none}
 html body .quickbar #seed-dock .seed-name {width:100%;max-width:100%;height:26px;min-height:26px;max-height:26px;font-size:10px;line-height:13px;-webkit-line-clamp:2;overflow-wrap:break-word}
 body #garden-hint {max-width:100%;font-size:10px;line-height:1.3;padding:3px 8px;white-space:normal;text-align:center}
 body #joystick {left:calc(var(--ui-viewport-left) + var(--ui-safe-left) + 16px);bottom:calc(var(--ui-safe-bottom) + var(--hud-stick-bottom));top:auto;width:var(--hud-stick-size);height:var(--hud-stick-size);transform:none}
 body #joystick-knob {width:34px;height:34px}
 body #tabs.game-actions {top:auto;bottom:calc(var(--ui-safe-bottom) + 8px);right:calc(var(--ui-safe-right) + 8px);flex-direction:row;gap:6px;transform:none}
 body #interact-button {left:auto;right:calc(var(--ui-safe-right) + 10px);top:auto;bottom:calc(var(--ui-safe-bottom) + 72px);width:108px;height:44px;min-height:44px;transform:none;translate:none;font-size:13px}

 /* Keep the same right-hand catalyst panel and vertical potion column as PC.
    JS still positions the card group from the measured panel and safe bounds. */
 body.catalysis-mode #catalysis-panel {width:var(--catalysis-panel-width);padding:9px;gap:5px}
 body #catalysis-panel h2 {font-size:16px;line-height:1.25}
 body #catalysis-panel .catalysis-content {font-size:12px;line-height:1.4;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
 body #catalysis-panel .catalysis-content :is(p,small,strong) {overflow-wrap:break-word}
 body #catalysis-potions {gap:4px;overflow-x:hidden;overflow-y:auto}
 body #catalysis-potions button {width:60px;height:52px;min-height:52px;padding:3px;gap:1px;flex:none}
 body #catalysis-potions .potion-slot-art {width:30px;height:30px;min-height:30px;flex:none}
 body #catalysis-scene-cards {width:min(320px,40vw);gap:5px}
 body #catalysis-scene-cards .catalysis-stat-card,
 body #catalysis-scene-cards .catalysis-stat-card[data-card=value] {height:64px;min-height:64px;padding:5px 4px;gap:2px;border-radius:12px}
 body #catalysis-scene-cards strong {font-size:19px;line-height:1.15;white-space:nowrap;overflow-wrap:normal}
 body #catalysis-scene-cards .catalysis-stat-card {grid-template-rows:minmax(0,1fr) 22px 15px;overflow:hidden}
 body #catalysis-scene-cards .stat-heading {font-size:9px;line-height:1.2;min-height:0;overflow:hidden}
 body #catalysis-scene-cards .yield-range {height:15px;line-height:15px;font-size:9px}
 body #catalysis-scene-cards small {font-size:9px;line-height:1.2}
 body #story-guide[data-catalysis=true] {max-height:max(0px,min(110px,calc(var(--catalysis-guide-floor,50dvh) - var(--guide-top))));padding:8px 13px;gap:3px 7px}
 body #story-guide[data-catalysis=true]::before {border-image:url('../assets/ui/quest-board.png') 52 72 32 72 fill / 16px 22px 12px stretch}
 body #story-guide[data-catalysis=true] .story-guide-copy {min-width:0;min-height:0;overflow:auto;touch-action:pan-y}
 body #story-guide[data-catalysis=true] h2 {font-size:12px;line-height:1.25}
 body #story-guide[data-catalysis=true] p {font-size:10px;line-height:1.4}
 body #story-guide[data-catalysis=true] small {font-size:10px;line-height:1.4;margin-top:3px}
}

@media (orientation:landscape) and (max-height:340px) {
 :root {--hud-record-top:136px;--hud-stick-size:70px}
 body #main-quest {height:74px;gap:2px}
 body #garden-record {padding-top:23px}
 body #garden-record.quest-board .quest-header {height:20px;font-size:12px}
 html body .quickbar #seed-dock .seed-slot {height:62px;min-height:62px}
 html body .quickbar #seed-dock .slot-art {height:34px;min-height:34px}
 body #catalysis-scene-cards .catalysis-stat-card,
 body #catalysis-scene-cards .catalysis-stat-card[data-card=value] {height:58px;min-height:58px}
 body #catalysis-scene-cards .catalysis-stat-card {grid-template-rows:minmax(0,1fr) 20px 12px;padding:3px 4px;gap:1px}
 body #catalysis-scene-cards .yield-range {height:12px;line-height:12px}
 body #story-guide[data-catalysis=true] {max-height:max(0px,min(94px,calc(var(--catalysis-guide-floor,50dvh) - var(--guide-top))))}
}


/* Original stylesheet: ./src/ui-performance.css */
/* Reuse the already presented WebGL canvas; no GPU-to-CPU snapshot on opening. */
body[data-ui-background="frozen"] #scene{filter:blur(3px);transform:scale(1.015)}
/* The start menu hides other app children. Allow invisible startup layout of
   each prebuilt panel, below the opaque loading cover and outside input/focus. */
body[data-start-menu="true"] #app > #panel-overlay[data-preloading="true"]{display:flex!important;visibility:hidden!important;pointer-events:none!important}
/* Never start a live backdrop blur, including the expensive opening frame
   before the scene copy exists, or platforms where the copy is unavailable. */
body[data-panel-open="true"] #panel-overlay,
dialog::backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* World float lifetimes advance with Garden.render; keep them behind menus
   while that renderer is frozen, instead of leaving a suspended number up. */
body[data-ui-background="frozen"] .crop-change-float{visibility:hidden}

/* Preserve the static artwork in long lists; animate the selected preview/card. */
.inventory-grid > .inventory-slot:not(.active) :is(.rarity-glow,.crop-icon),
.inventory-grid > .inventory-slot:not(.active) .item-art::before,
.shop-list > .shop-item:not(.active) .rarity-glow{animation-play-state:paused!important}

/* These exact HUD regions are already hidden by responsive-core.css for menus. */
body[data-panel-open="true"] #app :is(.game-hud,.quickbar,.game-actions,#garden-record,#touch-controls,#interact-button,#camera-zoom-control),
body[data-panel-open="true"] #app :is(.game-hud,.quickbar,.game-actions,#garden-record,#touch-controls,#interact-button,#camera-zoom-control) *,
body[data-panel-open="true"] #app :is(.game-hud,.quickbar,.game-actions,#garden-record,#touch-controls,#interact-button,#camera-zoom-control)::before,
body[data-panel-open="true"] #app :is(.game-hud,.quickbar,.game-actions,#garden-record,#touch-controls,#interact-button,#camera-zoom-control)::after,
body[data-panel-open="true"] #app :is(.game-hud,.quickbar,.game-actions,#garden-record,#touch-controls,#interact-button,#camera-zoom-control) *::before,
body[data-panel-open="true"] #app :is(.game-hud,.quickbar,.game-actions,#garden-record,#touch-controls,#interact-button,#camera-zoom-control) *::after{animation-play-state:paused!important}