#phone-battlebar,#phone-hud-tabs{display:none}
#battlefield,#minimap{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.phone-battle #game{position:fixed;inset:0;height:100dvh;--phone-hud:272px;--phone-bottom:env(safe-area-inset-bottom,0px)}
.phone-battle #game button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.phone-battle #game .game-top{height:calc(56px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(8px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px))}
.phone-battle #game .game-top button,.phone-battle #game .game-top>a{min-width:44px;min-height:44px}
.phone-battle #game .game-top .room-shortcut{max-width:70px}
.phone-battle #game .battle-brand,.phone-battle #game .match-clock span{display:none}
.phone-battle #game .resource-bar{gap:8px}
.phone-battle #game .resource-bar>div{padding-right:0}
.phone-battle #game .resource-bar strong{font-size:12px;white-space:nowrap}
.phone-battle #game .resource-bar small{font-size:8px;letter-spacing:0}
.phone-battle #game .resource-bar>div[title="Technology tier"]{display:none}
.phone-battle #game .match-clock{min-width:38px}
.phone-battle #game .match-clock strong{font-size:11px;letter-spacing:0}
.phone-battle #game .game-bottom{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:var(--phone-bottom);height:var(--phone-hud);display:flex;flex-direction:column;gap:0;pointer-events:auto}
.phone-battle #phone-hud-tabs{display:flex;flex:none;gap:4px;height:48px;padding-bottom:4px}
.phone-battle #phone-hud-tabs button{flex:1;font-size:12px;background:#16252e;border:1px solid #9e895957;color:#d8d7bf}
.phone-battle #phone-hud-tabs button[aria-pressed=true],.phone-battle #phone-battlebar button[aria-pressed=true]{background:#5b5234;color:#fff0c3;border-color:#ddc17c}
.phone-battle #game .game-bottom>section{display:none;min-width:0;flex:1;overflow:auto}
.phone-battle #game .game-bottom[data-phone-panel=commands]>.commands-panel,.phone-battle #game .game-bottom[data-phone-panel=map]>.minimap-panel,.phone-battle #game .game-bottom[data-phone-panel=units]>.selection-panel{display:flex;flex-direction:column}
.phone-battle #game .commands-panel{padding:6px 8px;--build-row:64px}
.phone-battle #game .command-heading{min-height:25px;padding-bottom:3px;flex-shrink:0}
.phone-battle #game .command-armory{min-height:26px;font-size:10px}
.phone-battle #game .command-grid{grid-template-columns:repeat(3,minmax(0,1fr));flex:1;min-height:65px;max-height:none;overflow:auto;touch-action:pan-y;overscroll-behavior:contain}
.phone-battle #game .command-card,.phone-battle #game .command-card:has(.command-portrait){height:64px;min-height:64px}
.phone-battle #game .command-card .card-name{font-size:11px;line-height:12px;max-height:24px;min-height:24px;white-space:normal}
.phone-battle #game .command-card .card-cost{font-size:10px}
.phone-battle #game .hotkey,.phone-battle #game .action-button small,.phone-battle #game .worker-modes kbd{display:none}
.phone-battle #game .action-strip{flex-shrink:0;min-height:44px;margin:3px 0;gap:4px;overflow-x:auto;flex-wrap:nowrap;touch-action:pan-x}
.phone-battle #game .action-button{height:44px;min-height:44px;min-width:52px;flex:1 0 52px}
.phone-battle #game .action-button>span{font-size:10px;line-height:12px}
.phone-battle #game .worker-modes{flex-shrink:0;gap:4px;overflow-x:auto;flex-wrap:nowrap}
.phone-battle #game .worker-modes button{min-height:44px;font-size:11px;flex-shrink:0}
.phone-battle #game .build-help,.phone-battle #game .palette-navigation{display:none!important}
.phone-battle #game .minimap-panel{flex-direction:row!important;gap:8px;padding:8px}
.phone-battle #game .mini-heading{display:none}
.phone-battle #game #minimap{width:calc(100% - 100px);max-width:240px;height:100%;flex:none;min-height:0;object-fit:contain}
.phone-battle #game .mini-controls{flex:1;flex-direction:column;gap:5px;padding:0;justify-content:stretch}
.phone-battle #game .mini-controls button{font-size:11px;min-height:44px;flex:1;background:#263a3a;border:1px solid #9e895957}
.phone-battle #game .selection-panel{padding:10px}
.phone-battle #game .selection-empty p{font-size:13px}
.phone-battle #game .selection-panel button{min-height:44px;min-width:44px}
.phone-battle #phone-battlebar{position:absolute;left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:calc(var(--phone-hud) + var(--phone-bottom) + 5px);display:flex;gap:4px;height:44px;z-index:5}
.phone-battle #phone-battlebar button{flex:1;min-width:44px;font-size:11px;background:#16252ef5;border:1px solid #a68d5a;color:#e4dcc1;padding:4px}
.phone-battle #phone-battlebar [data-touch-zoom]{flex:0 0 44px;font-size:23px}
.phone-battle #phone-battlebar [hidden]{display:none}
.phone-battle #game .battle-help,.phone-battle #game .control-groups,.phone-battle #game .objective,.phone-battle #game #hover-info{display:none}
.phone-battle #game .order-feedback{bottom:calc(var(--phone-hud) + var(--phone-bottom) + 55px);right:8px;max-width:calc(100% - 16px);font-size:11px;padding:5px 8px}
.phone-battle #game .target-prompt{bottom:calc(var(--phone-hud) + var(--phone-bottom) + 55px);width:calc(100% - 16px);padding:7px;font-size:12px;z-index:6}
.phone-battle #game .target-prompt small{font-size:10px;line-height:1.3}
.phone-battle #game #notices{top:calc(65px + env(safe-area-inset-top,0px));right:8px;max-width:min(260px,70vw)}
.phone-battle #game .tutorial{top:calc(65px + env(safe-area-inset-top,0px));left:8px;max-width:calc(100% - 16px);max-height:190px;overflow:auto}
.phone-battle #game .tutorial button{min-height:44px}
.phone-battle #game .lab-controls{max-width:calc(100% - 16px);max-height:150px;overflow:auto}
@media(orientation:landscape){
 .phone-battle #game{--phone-side:280px;--phone-hud:0px}
 .phone-battle #game .game-bottom{left:auto;top:calc(60px + env(safe-area-inset-top,0px));bottom:var(--phone-bottom);right:max(8px,env(safe-area-inset-right,0px));width:var(--phone-side);height:auto}
 .phone-battle #phone-battlebar{right:calc(var(--phone-side) + 16px + env(safe-area-inset-right,0px));bottom:calc(var(--phone-bottom) + 8px)}
 .phone-battle #game .order-feedback{right:calc(var(--phone-side) + 16px);max-width:calc(100% - var(--phone-side) - 32px);bottom:calc(var(--phone-bottom) + 60px)}
 .phone-battle #game .target-prompt{left:8px;transform:none;width:calc(100% - var(--phone-side) - 32px);bottom:calc(var(--phone-bottom) + 60px)}
 .phone-battle #game .minimap-panel{flex-direction:column!important}
 .phone-battle #game #minimap{width:100%;max-width:none;flex:1;height:0;min-height:70px}
 .phone-battle #game .mini-controls{flex:none;flex-direction:row}
 .phone-battle #game .mini-controls button{font-size:10px;min-width:0}
 .phone-battle #game .tutorial{max-width:calc(100% - var(--phone-side) - 32px)}
}
@media(max-width:370px){.phone-battle #game .room-shortcut{display:none}.phone-battle #phone-battlebar button{font-size:10px}}
.phone-battle #modal input,.phone-battle #modal select,.phone-battle #menu input,.phone-battle #menu select,.phone-battle #lobby input,.phone-battle #lobby select{font-size:16px;min-height:44px}
.phone-battle #modal button,.phone-battle #menu button,.phone-battle #lobby button{min-height:44px}
.phone-battle #modal .close-modal{min-width:44px;top:5px;right:5px}
.phone-battle #game .message-close{min-width:32px;min-height:32px}
.phone-battle #game .order-feedback:empty{display:none}
/* Room communication must not cover command cards or their scroll targets. */
.phone-battle:has(#game:not(.hidden)) .player-chat[data-presentation=overlay]{top:calc(64px + env(safe-area-inset-top,0px))!important;bottom:auto!important;right:max(8px,env(safe-area-inset-right,0px))!important;max-height:calc(100dvh - 80px - env(safe-area-inset-top,0px));max-width:calc(100vw - 16px)}
.phone-battle:has(#game:not(.hidden)) .player-chat.pc-compact .pc-activity{top:calc(100% + 8px);bottom:auto}
.phone-battle:has(#modal-backdrop:not(.hidden)) .player-chat{display:none!important}
.phone-battle #game #notices{top:calc(116px + env(safe-area-inset-top,0px))}
@media(orientation:landscape){.phone-battle:has(#game:not(.hidden)) .player-chat[data-presentation=overlay]{left:max(8px,env(safe-area-inset-left,0px))!important;right:auto!important}}
.phone-battle #game .mini-controls{align-items:stretch}
.phone-battle #game #minimap{margin:0}

.phone-battle #tooltip{display:none}