/* Portal-sized frames and phones with notches use the same quiet HUD. */
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}
header{top:calc(22px + env(safe-area-inset-top));left:calc(24px + env(safe-area-inset-left));right:calc(24px + env(safe-area-inset-right))}
#farm-menu{right:calc(24px + env(safe-area-inset-right));top:calc(90px + env(safe-area-inset-top))}
#day-clock{top:calc(24px + env(safe-area-inset-top));transition:background .15s}
#objective{left:calc(24px + env(safe-area-inset-left));top:calc(94px + env(safe-area-inset-top))}
footer{left:calc(24px + env(safe-area-inset-left));right:calc(24px + env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom))}
#rush{right:calc(24px + env(safe-area-inset-right));bottom:calc(103px + env(safe-area-inset-bottom));width:138px}
#rush-title{font-size:12px}#rush-detail{font-size:12.5px}
#bloom{right:calc(174px + env(safe-area-inset-right));bottom:calc(103px + env(safe-area-inset-bottom));width:82px}
#bloom b,#bloom small{font-size:12px}
#bloom{grid-template-rows:1fr 1fr;column-gap:4px;row-gap:0;justify-content:stretch}
#bloom>span{grid-column:1;grid-row:1/3;display:grid;place-items:center}
#bloom>b{grid-column:2;grid-row:1;align-self:end}
#bloom>small{grid-column:2;grid-row:2;align-self:start}
#chain-hud{transform:none;right:auto}
.stat small{font-size:12px}
dialog{max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-width:calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))}
button:focus-visible{outline:3px solid #eeb34b;outline-offset:3px}
@media(max-height:540px) and (orientation:landscape){
 header{top:calc(10px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right))}
 .stat small,.power-stat small:after{font-size:11.5px}.power-stat small{font-size:0}
 #farm-menu{left:calc(12px + env(safe-area-inset-left));right:auto;top:calc(10px + env(safe-area-inset-top))}
 #day-clock{left:calc(112px + env(safe-area-inset-left));top:calc(10px + env(safe-area-inset-top))}
 #objective{left:calc(14px + env(safe-area-inset-left));top:calc(66px + env(safe-area-inset-top))}
 #objective p{font-size:12px}
 footer{left:calc(118px + env(safe-area-inset-left));right:calc(14px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom))}
 .basket-content b,.basket-content span,.basket-panel button{font-size:12px}
 #joystick{left:calc(16px + env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom))}
 #rush{right:calc(14px + env(safe-area-inset-right));bottom:calc(84px + env(safe-area-inset-bottom));width:122px}
 #rush-title{font-size:12.5px}#rush-detail{font-size:12px}
 #bloom{right:calc(144px + env(safe-area-inset-right));bottom:calc(84px + env(safe-area-inset-bottom));width:78px;grid-template-columns:20px 1fr}
 #bloom .game-icon{width:20px;height:20px}
 #chain-hud{left:calc(118px + env(safe-area-inset-left));bottom:calc(80px + env(safe-area-inset-bottom))}
 .toast{font-size:12px}
}
@media(max-width:700px) and (orientation:landscape){
 #day-clock{left:calc(104px + env(safe-area-inset-left))}
 .basket-content span,.basket-panel button{font-size:12.5px}
}