/* Loaded after the theme: intrinsic grid sizing must not widen a phone dialog. */
.modal-backdrop{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.intro-card,.small-card{min-width:0;min-height:0;max-width:100%;max-height:100%;overflow:auto;overflow-wrap:anywhere}
.intro-card{width:min(640px,100%)}
.small-card{width:min(540px,100%)}
.intel-card{width:min(760px,100%)}
.menu-dialog{min-width:0;max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 24px);max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);overflow-wrap:anywhere}
.deploy-row,.deploy-row>*,.match-setting,.music-controls,.music-row,.lobby-card,.lobby-form-row>*{min-width:0}
.deploy-row select,.match-setting select,.lobby-overlay input,.lobby-overlay select{max-width:100%;min-width:0}
#intel-table{max-width:100%;overflow:auto;overscroll-behavior:contain}
.touch-only,.touch-ability,.commands>.touch-only{display:none}

@media(max-width:900px),(pointer:coarse){
 :root{--dock-height:220px}
 .desktop-only,kbd,.upgrade-shortcut{display:none!important}
 .touch-only{display:initial}
 .modal-backdrop{padding:calc(10px + var(--safe-top)) calc(10px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(10px + var(--safe-left))}
 .intro-card,.small-card{width:100%;padding:20px 16px}
 .intro-card{max-width:640px}.small-card{max-width:540px}.intel-card{max-width:760px}
 .intro-card h2,.small-card h2{font-size:24px}
 .intro-card .lead,.small-card p,.menu-dialog p,.mobile-intro{font-size:14px;line-height:1.6}
 .deploy-row{grid-template-columns:minmax(0,1fr);gap:12px}
 .deploy-row select,.match-setting select,.lobby-overlay input,.lobby-overlay select,.formation-options select{width:100%;font-size:16px;min-height:48px}
 .intro-card button,.small-card button,.menu-dialog button,.lobby-overlay button{min-height:48px}
 .intro-card .resume{width:100%;white-space:normal}
 .menu-actions,.lobby-form-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .music-row{flex-wrap:wrap}.music-row input[type=range]{min-width:80px;flex:1}
 .motion-setting{gap:12px}.motion-setting>div{min-width:0}.motion-setting small{white-space:normal}
 .lobby-shell{min-width:0}.lobby-list-row{flex-wrap:wrap}.lobby-list-row>span:first-child{flex:1 1 140px}
 .join-form{min-width:0}.join-form button{padding-inline:12px}
 .lobby-seat{grid-template-columns:30px minmax(0,1fr) auto}
 .room-actions button{min-width:0;white-space:normal}
 #result .match-end-masthead{width:min(980px,calc(100% - var(--safe-left) - var(--safe-right) - 16px))}
 #result .match-end-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(380px,100%)}
 #result .match-end-actions button{min-width:0;min-height:48px;padding:8px 10px;white-space:normal;font-size:11px}
 #result .match-report{min-width:0;width:min(590px,calc(100% - var(--safe-left) - var(--safe-right) - 24px))}
 #result .match-report-close{flex-basis:48px;min-width:48px;height:48px}
 #result .match-report-extra button{min-height:48px}

 /* Frequent commands are visible; upgrades live in the one-tap Refit panel. */
 #command-dock{left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));bottom:calc(8px + var(--safe-bottom));width:auto;max-width:none;transform:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:7px}
 #quick-upgrades{display:none}
 #command-dock .selection-row{grid-column:1/-1;grid-row:1;gap:6px;min-height:44px;margin:0}
 #command-dock .selection-info{flex:1;min-width:0}.selection-info b{font-size:12px;line-height:1.3}.selection-info>svg{display:none}
 #select-wounded{display:none}
 #touch-box-select{display:flex;align-items:center;justify-content:center;gap:5px;min-width:68px;min-height:44px;padding:6px 8px;font-size:12px}
 #touch-box-select svg{width:17px;height:17px}
 #touch-box-select[aria-pressed=true]{color:#ffe2ab;border-color:#e4b56d;background:#4b3b27}
 #command-dock #cancel-order{min-height:44px;min-width:56px;font-size:12px}
 #command-dock .commands{display:contents}
 #command-dock .commands>button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;width:auto;min-height:54px;margin:0;padding:5px 2px;gap:4px;border-radius:7px;font-size:11px;line-height:1.15}
 #command-dock .commands svg{width:19px;height:19px}
 #select-all{grid-area:2/1}#move{grid-area:2/2}#attack{grid-area:2/3}#touch-salvage{grid-area:2/4}#open-orders{grid-area:2/5}
 #command-dock #touch-salvage{color:#edce94;border-color:#8d744b;background:#353126}
 #command-dock .base-actions{grid-row:3;grid-column:1/4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0}
 #command-dock .base-actions>button{min-width:0;min-height:54px;padding:5px 3px;justify-content:center;gap:0;margin:0;text-align:center}
 #command-dock .base-actions>button>svg,#command-dock .base-actions>button>span:not(.touch-ability){display:none}
 #command-dock .touch-ability{display:block;min-width:0}
 #command-dock .touch-ability b{font-size:12px;line-height:1.2;white-space:normal}
 #command-dock .touch-ability small{font-size:11px;line-height:1.2;white-space:normal;margin-top:4px;overflow-wrap:anywhere}
 #mobile-workshop{grid-area:3/4}#open-map{grid-area:3/5}
 #command-dock .control-hint{grid-column:1/-1;grid-row:4;display:block;white-space:normal;font-size:11px;line-height:1.3;min-height:14px;max-height:2.6em;overflow:auto;margin:0}
 #command-dock.aiming .control-hint{font-weight:500;color:#ffe2b3}
 button:active:not(:disabled){filter:brightness(1.18)}
 .session button,.camera-tools button{min-width:44px;min-height:44px}
 .topbar .resources{gap:5px}.resource strong{font-size:17px}.resource em{font-size:11px}.resource span{letter-spacing:.3px}

 /* Panels scroll above the dock, including during training and in short views. */
 #app .hud-panel,#app[data-training]:not([data-training='']) .hud-panel{left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));top:calc(var(--hud-top) + var(--safe-top) + 8px);bottom:calc(var(--dock-height) + var(--safe-bottom) + 8px);width:auto;min-width:0;min-height:0;height:auto;max-width:none;max-height:none;transform:none;overscroll-behavior:contain}
 #app .orders-panel,#app .mission,#app .minimap-wrap{overflow:auto}
 #app .workshop{display:flex;flex-direction:column;overflow:hidden}
 #app .workshop-title{display:none}
 #app #upgrade-list{flex:1;min-height:0;overflow:auto;touch-action:pan-y}
 .panel-heading{position:sticky;top:0;z-index:1;background:#172027;min-height:48px;padding-block:0}
 .panel-heading button{min-width:48px;min-height:48px}
 .tabs button{font-size:13px;min-height:48px}
 .upgrade p,.upgrade-bottom .effect{font-size:12px}.upgrade-head{flex-wrap:wrap}
 .order-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px}
 .order-grid button{min-height:60px;font-size:13px;padding:9px;min-width:0}
 .order-grid small{font-size:11px;line-height:1.35}
 #hold{order:1}#retreat{order:2}#stop-order{order:3}#defend{order:4}#rally{order:5}#touch-wounded{order:6}#add-selection{order:7}#clear-selection{order:8}#focus-army{order:9}
 .order-grid #box-select,.order-grid #salvage{display:none}
 #add-selection[aria-pressed=true]{border-color:#e4b56d;background:#4b3b27}
 #control-groups{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
 #control-groups button,.squad-section button{min-height:48px}
 .squad-section p,.squad-note{font-size:12px}.formation-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 #squad-roster{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none}
 #app[data-panel]:not([data-panel='']) #training-coach{display:none}
 #training-coach{min-width:0;max-width:calc(100% - var(--safe-left) - var(--safe-right) - 16px)}
 #training-copy,#training-objective{font-size:12px}
}

@media(max-width:360px){
 .menu-actions,.lobby-form-row,.formation-options{grid-template-columns:minmax(0,1fr)}
 .invite-box{grid-template-columns:minmax(0,1fr)}.invite-box button{grid-column:1;grid-row:auto}
 .lobby-shell{width:calc(100% - 24px)}.lobby-brand{letter-spacing:0}
 .topbar .resource>svg{display:none}.topbar{gap:4px}.resource strong{font-size:16px}
}

/* A side dock preserves battlefield height when a phone rotates. */
@media(max-height:500px) and (min-width:480px) and (max-width:900px),(max-height:500px) and (min-width:480px) and (pointer:coarse){
 #app{--touch-dock-width:280px;--hud-top:48px}
 #command-dock{left:auto;right:calc(8px + var(--safe-right));width:var(--touch-dock-width);max-width:calc(100% - var(--safe-left) - var(--safe-right) - 160px);bottom:calc(8px + var(--safe-bottom));max-height:calc(100dvh - var(--hud-top) - var(--safe-top) - var(--safe-bottom) - 16px);overflow:auto}
 #command-dock .commands>button,#command-dock .base-actions>button{min-height:48px}
 #app .hud-panel,#app[data-training]:not([data-training='']) .hud-panel{right:calc(var(--touch-dock-width) + var(--safe-right) + 16px);bottom:calc(8px + var(--safe-bottom))}
 #app .hud-panel .panel-live{display:none}
 #app .order-grid{gap:6px;padding:8px}.order-grid button{font-size:12px;min-height:56px}
 #app #training-coach{top:calc(var(--hud-top) + var(--safe-top) + 8px);left:calc(8px + var(--safe-left));right:calc(var(--touch-dock-width) + var(--safe-right) + 16px);width:auto;max-height:calc(100dvh - var(--hud-top) - var(--safe-top) - var(--safe-bottom) - 16px)}
 #app[data-training]:not([data-training='']) .camera-tools{display:none}
 #toast{bottom:calc(8px + var(--safe-bottom));left:calc(8px + var(--safe-left));right:calc(var(--touch-dock-width) + var(--safe-right) + 16px);transform:none;width:auto;max-width:none;font-size:12px}
 #paused-tag{top:calc(var(--hud-top) + var(--safe-top) + 58px);left:calc(50% - 140px)}
 #network-bar{max-width:calc(100% - var(--touch-dock-width) - var(--safe-left) - var(--safe-right) - 24px)}
}