@media (height<=700px){#ui{--hud-left:max(12px, env(safe-area-inset-left));--hud-right:max(12px, env(safe-area-inset-right));--hud-bottom:max(12px, env(safe-area-inset-bottom))}.left-tools{left:var(--hud-left);top:auto;bottom:calc(218px + env(safe-area-inset-bottom));grid-template-columns:repeat(2,44px);gap:14px 12px}.left-tools .square-btn{width:44px;height:44px}.left-tools svg{width:23px}.right-tools{top:auto;right:var(--hud-right);bottom:calc(250px + env(safe-area-inset-bottom));grid-template-columns:repeat(2,44px);align-items:center;gap:8px;display:grid;transform:none}.right-tools .square-btn.small{width:44px;height:44px}.right-tools:not(:has(.square-btn)){grid-template-columns:repeat(3,44px)}.right-tools .camera-tools{display:contents}.camera-tools button{background:#304028d9;border:2px solid #eee6cb68;border-radius:9px;width:44px;height:44px;box-shadow:0 3px 5px #23331c30}.camera-tools button+button{border-top:2px solid #eee6cb68}}@media (width<=700px) and (height<=700px){.left-tools{bottom:calc(230px + env(safe-area-inset-bottom))}.right-tools{bottom:calc(209px + env(safe-area-inset-bottom))}.bottom-left{left:var(--hud-left)}.bottom-right{right:var(--hud-right)}.collect-btn{left:50%;right:auto;bottom:calc(145px + env(safe-area-inset-bottom));min-height:44px;position:fixed;translate:-50%}.village-caption{display:none}}@media (height<=600px) and (aspect-ratio>=4/3){.player-hud{left:var(--hud-left);gap:7px;top:12px;transform:none}.level-shield{width:45px;height:54px;font-size:25px}.player-info .eyebrow{letter-spacing:1px;font-size:7px}.player-name{font-size:23px}.trophy-pill{gap:4px;margin-top:3px;padding:2px 5px;font-size:10px}.trophy-pill svg{width:13px;height:13px}.trophy-pill span{display:none}.resources{top:14px;right:calc(var(--hud-right) + 12px);gap:9px;width:143px;transform:none}.resource-bar{border-radius:7px;height:24px;margin-right:20px}.resource-topline{font-size:6px;top:-9px}.resource-amount{font-size:17px;line-height:21px;right:19px}.resource-bar>.resource-icon{width:24px;height:27px;font-size:19px;line-height:21px;top:-3px;right:-12px}.resource-plus{width:19px;height:24px;font-size:20px;top:0;left:calc(100% + 14px)}.village-status{text-align:center;top:12px;left:50%;transform:translate(-50%)}.brand{letter-spacing:1.5px;font-size:14px}.brand span{font-size:11px}.status-chips{justify-content:center;gap:5px;margin-top:6px}.status-chips button{gap:4px;height:28px;padding:0 6px;font-size:9px}.status-chips svg{width:15px;height:15px}.status-chips span{display:none}.left-tools{bottom:calc(var(--hud-bottom) + 104px)}.right-tools{bottom:calc(var(--hud-bottom) + 96px);display:flex}.right-tools .camera-tools{flex-direction:row;display:flex}.camera-tools button{box-shadow:none;background:0 0;border:0;border-radius:0;flex:0 0 44px}.camera-tools button+button{border-top:0;border-left:1px solid #e7edd432}.bottom-left{left:var(--hud-left);bottom:var(--hud-bottom);transform:none}.attack-btn{border-bottom-width:5px;border-radius:12px;width:100px;height:76px}.attack-btn svg{width:34px;height:34px;top:-16px}.attack-btn span{margin-top:12px;font-size:25px}.attack-btn small{letter-spacing:1px;font-size:6px}.bottom-right{right:var(--hud-right);bottom:var(--hud-bottom);gap:8px;transform:none}.shop-btn{border-bottom-width:5px;border-radius:12px;gap:3px;width:78px;height:76px}.shop-btn svg{width:27px;height:27px}.shop-btn>span:not(.new-badge){font-size:22px}.collect-btn{gap:5px;min-height:44px;padding:6px 8px;font-size:11px;position:static;translate:none}.collect-btn .coin{width:16px;height:18px;font-size:12px;line-height:13px}.bottom-center{left:calc((100% + var(--hud-left) - var(--hud-right) - 82px) / 2);right:auto;bottom:var(--hud-bottom);width:max-content;max-width:calc(100% - var(--hud-left) - var(--hud-right) - 310px);transform:translate(-50%)}.bottom-center .army-label{letter-spacing:0;margin:0 4px 6px}.bottom-center .army-label>span{font-size:8px}.bottom-center .army-label button{min-height:24px;font-size:11px}.bottom-center .army-tray{gap:5px;padding:10px 5px 5px}.bottom-center .troop-card{width:56px;height:70px}.bottom-center .troop-card img{height:78px;bottom:-8px}.bottom-center .troop-name{font-size:8px}.bottom-center .troop-level{font-size:7px;bottom:14px}.bottom-center .troop-count{font-size:14px}.bottom-center .train-add{width:40px;min-width:40px}.village-caption,.control-hint{display:none}}
