/* 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}
}