/* Shared controls; the battlefield still uses the fixed camera. */
@media(max-width:600px){
  #screen>.top.solid{grid-template-columns:minmax(0,1fr);gap:.35rem;padding:.5rem}
  #screen>.top.solid>.tl{grid-column:1;grid-row:1}
  #screen>.top.solid>.tabs{grid-column:1;grid-row:2;justify-content:flex-start;gap:.25rem .5rem;font-size:1rem}
  #screen>.top.solid>.tr{grid-column:1;grid-row:3;justify-content:flex-start}
  #screen>.top.solid>.tabs a{min-height:44px;padding:.3rem .4rem}
  #screen>.top.solid .res{font-size:.95rem}
  .recovery-sources .btn{font-size:1rem}
}
#input-toolbar{position:absolute;top:calc(var(--battlefield-top,var(--top)) + .3rem);left:.5rem;display:flex;align-items:center;gap:.35rem;max-width:75vw;z-index:7;background:#15191bf2;border:1px solid #687177;padding:.3rem;border-radius:.3rem}
#input-toolbar .btn{padding:.35rem .6rem;font-size:.85rem}#input-status{font-size:.8rem;max-width:20rem;color:#c0d8d5}
#touch-controls{display:none;position:absolute;left:.5rem;bottom:calc(var(--bot) + .5rem);z-index:7;background:#15191bf2;border:1px solid #687177;padding:.3rem;gap:.25rem;grid-template-columns:repeat(3,minmax(44px,1fr));max-width:17rem}
.touch-input #touch-controls{display:grid}.touch-input #selected-info{bottom:calc(var(--bot) + 11rem)}
#touch-controls [data-act="inputnudge:up"]{grid-column:2}#touch-controls [data-act="inputnudge:left"]{grid-column:1}#touch-controls [data-act="inputnudge:down"]{grid-column:2}#touch-controls .btn{min-width:44px;min-height:44px;padding:.3rem}
#touch-controls [data-act="inputcancel"]{grid-column:1/4}
#placement-tools{top:calc(var(--battlefield-top,var(--top)) + 4.4rem);max-width:96vw;white-space:nowrap}
.input-box{max-height:90dvh;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}.input-box label{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.8rem 0}.input-box select{max-width:100%;min-height:44px;background:#22282c;color:#eee;border:1px solid #687177;padding:.5rem}
.input-options{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0}.input-options .btn{min-height:44px;flex:1 0 8rem}.input-keys{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.3rem}.input-keys .btn{padding:.3rem;min-width:0;min-height:44px}#input-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:1.2rem;padding:.6rem;background:#101719;border:1px solid #81b0ad}
#input-overlay{position:relative;width:min(52rem,94vw);z-index:2}.controls-guide{line-height:1.55}.controls-guide p{margin:.8rem 0}
body[data-input="controller"] :focus{outline:3px solid #f7d36e;outline-offset:2px}#view{touch-action:none}
@media(pointer:coarse){button,[data-act],select,input{min-height:44px}a[data-act],.st{min-width:44px;display:inline-flex;align-items:center;justify-content:center}.card,.pal,.location-card{min-width:72px}.btn{font-size:1rem}}
@media(max-width:960px),(max-height:600px){
  #input-toolbar{max-width:95vw}#input-toolbar .btn{min-height:36px}#input-status{font-size:.8rem;max-width:13rem}
  .mob #placement-tools{top:calc(var(--battlefield-top,var(--top)) + 4.4rem);max-width:95vw}.mob #placement-tools .btn{min-height:44px}
  #map-tools span{display:none}.input-box{width:min(52rem,94vw)}
}
/* Portrait screens use scrollable panels and a small action rail. */
@media(max-width:600px) and (orientation:portrait){
  body.mob{--top:8rem;--bot:12rem}body{min-width:0}#top,.top.solid{height:auto;min-height:var(--top);flex-wrap:wrap;padding:.4rem;gap:.35rem;align-content:flex-start}.tl{width:100%;font-size:1rem}.tl #tSub{font-size:.85rem;display:flex;gap:.3rem;flex-wrap:wrap}.tc{position:static;transform:none;font-size:.9rem}.tr{margin-left:0;gap:.35rem;overflow-x:auto;max-width:100%;min-width:0}.tr .tbtn{flex:none;min-width:44px;min-height:44px}.tr .tbtn span{display:none}.res{font-size:.85rem}.tabs{gap:.2rem;flex-wrap:wrap;font-size:.85rem}.tabs a{padding:.3rem;min-height:36px}.tabs i{display:none}
  #input-toolbar{left:0;right:0;top:calc(var(--battlefield-top,var(--top)) + .2rem);max-width:100%;flex-wrap:wrap;padding:.2rem}#input-toolbar .btn{min-height:44px;flex:1;padding:.2rem}#input-status{display:none}
  #bottom,.planmode #bottom{right:0;height:var(--bot);padding:.35rem;gap:.4rem}#mini{width:5rem;height:5rem;align-self:center}#live{display:flex;flex-direction:column;gap:.3rem}#strip{flex:1;overflow-x:auto;gap:.3rem}#strip .card{min-width:6rem;padding:.3rem;max-width:none}#cmds{width:100%;padding:0;border:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem}#cmds .cmd{padding:.25rem;min-height:44px;font-size:.8rem;justify-content:center}#cmds .cmd svg,#cmds .cmd kbd{display:none}#plan .pt,#plan .hints{display:none}#plan{min-width:0}#pal{max-width:100%;overflow-x:auto}.pal,.mob .pal{min-width:7rem;height:8rem;padding:.4rem}
  #side,.planmode #side,#side.slim{right:.3rem;left:.3rem;top:auto;bottom:calc(var(--bot) + .3rem);width:auto;max-height:34dvh;padding:.6rem;z-index:8;display:none}body.show-input-details #side.on,body.crisis-input #side.on{display:block}#selected-info,.mob #selected-info{display:none;left:.3rem;right:.3rem;width:auto;max-height:20dvh;bottom:calc(var(--bot) + .4rem);z-index:8}body.show-input-details #selected-info{display:block}body.show-input-details.input-side-open #selected-info{display:none}
  #map-tools,.mob #map-tools{right:.2rem;bottom:calc(var(--bot) + .3rem);max-width:44vw;flex-direction:column}#map-tools .btn{min-height:44px;width:100%}#map-tools span{display:none}#touch-controls{left:.2rem;max-width:53vw;bottom:calc(var(--bot) + .3rem);grid-template-columns:repeat(3,minmax(44px,1fr));gap:.15rem}#touch-controls .btn{font-size:.85rem}
  #placement-tools,.mob #placement-tools{top:calc(var(--battlefield-top,var(--top)) + 4.6rem);gap:.2rem;padding:.2rem;width:max-content;max-width:99vw}#placement-tools .btn{font-size:.85rem;padding:.3rem}
  #radio,#tut,#alert{max-width:90vw}#radio{bottom:calc(var(--bot) + 11rem)}#fire{bottom:calc(var(--bot) + 6rem);right:.4rem}#palpop,.mob #palpop{right:.3rem;left:.3rem;max-width:none;bottom:calc(var(--bot) + .3rem);overflow-x:auto}#drawer{left:0;right:0;top:var(--battlefield-top,var(--top));bottom:0;width:100%;height:auto;z-index:10}.mob #drawer{height:auto}.dgrid{display:flex;flex-direction:column;overflow-y:auto}.wl,.wd{max-height:35dvh;overflow-y:auto}.wp{min-height:20rem}.mods .mrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .screen{overflow-y:auto}.opsbody{height:auto!important;display:flex;flex-direction:column;overflow:visible}.mapwrap{min-height:28rem;flex:none}.insp{width:100%;overflow:visible}.location-browser,.mob .location-browser{width:75%;bottom:3rem}.location-card b,.mob .location-card b{font-size:1rem}.location-card span,.mob .location-card span{font-size:.85rem}.qbody{height:auto;min-height:calc(100dvh - var(--top));display:flex;flex-direction:column;overflow:visible}.cats{width:100%;min-height:6rem;overflow:auto}.stock{height:30rem;min-height:25rem}.shop{width:100%;min-height:45rem}.detail,.mob .detail{height:auto;min-height:15rem;grid-template-columns:5rem 1fr}.detail .buy{grid-column:1/3}.cargo{width:100%;max-height:none}.ctiles{grid-template-columns:repeat(4,minmax(0,1fr))}.vbody{height:auto;overflow:visible;padding:.5rem}.tabs6{display:flex;overflow-x:auto}.tabs6 .sqt{min-width:8rem}.vgrid{display:flex;flex-direction:column}.sols{max-height:30rem;overflow:auto}.equip{overflow:visible}.title .tcard{width:94vw;padding:1rem;max-height:94dvh;overflow-y:auto}.tbtns{flex-wrap:wrap}.tbtns .btn{min-height:44px}.mbox,.mbox.wide{width:94vw;max-width:94vw;max-height:92dvh;overflow-y:auto;padding:1rem}.input-keys{grid-template-columns:repeat(5,minmax(0,1fr))}.civilian-list{grid-template-columns:1fr}
}

@media(max-width:600px) and (orientation:portrait){
  .mob .vcols{display:flex;flex-direction:column;height:auto}.mob .vcols .pane{min-height:20rem}.mob .qbody,.mob .vbody{position:relative;top:0;bottom:auto}.mob .opsbody{position:relative;top:0;bottom:auto}.mob .cats{height:auto;min-height:44px;flex-wrap:wrap}.mob .cats>a{min-height:44px}.mob .cats h4,.mob .own{display:flex}.mob .cats h4{width:100%;margin:.3rem}.mob .own{min-width:8rem;font-size:.9rem}.mob .shop{min-height:46rem}.mob .stock{flex:none;height:27rem}.mob .detail{flex:none;min-height:17rem}.mob .cargo{min-height:22rem}.mob .btnrow .btn,.mob .slot{min-height:44px}.mob .tabs6 .sqt{min-height:44px}
}

/* Verified native-browser controls: contain purchases and keep map actions reachable. */
.shop{container-type:inline-size;overflow-y:auto}
.shop .stock{flex:1 0 12rem;min-height:12rem}
.shop .detail{height:auto;min-height:14rem;min-width:0;flex:none}
.detail .dd,.detail .buy{min-width:0}.detail .dd{overflow-wrap:anywhere}
@container (max-width:52rem){
  .shop .detail{grid-template-columns:minmax(5rem,9rem) minmax(0,1fr)}
  .shop .detail .buy{grid-column:1/-1;width:100%}
}
#quick-deploy[hidden]{display:none}
.planmode #map-tools{right:calc(25rem + .6rem);max-width:calc(100% - 25rem - 1.2rem)}
.mob .planmode #map-tools{right:calc(17.5rem + .4rem);max-width:calc(100% - 17.5rem - 1rem)}
#hud #fire{bottom:calc(var(--bot) + var(--map-tools-height,3.5rem) + .85rem)}
.input-side-open #hud #map-tools{right:calc(var(--side-width,0px) + .6rem);max-width:calc(100% - var(--side-width,0px) - 1.2rem)}
.input-side-open #hud #fire{right:calc(var(--side-width,0px) + .85rem)}
.text-enlarged #hud #top{height:auto;min-height:var(--top);flex-wrap:wrap;gap:.35rem;padding:.35rem .6rem}
.text-enlarged #hud #top .tc{position:static;transform:none;margin-left:auto}
.text-enlarged #hud #top .tr{width:100%;min-width:0;overflow-x:auto;gap:.5rem;padding-bottom:.2rem}
.text-enlarged #hud #top .tr>*{flex:none}
@media(max-width:600px) and (orientation:portrait){
  .mob .shop{height:auto;min-height:0;flex:none}
  .mob .shop .detail{height:auto;min-height:0;flex:none}
  .portrait .planmode #map-tools{right:.2rem;max-width:44vw}
  .portrait.show-input-details #map-tools,.portrait.show-input-details #fire{visibility:hidden}
}
@media(max-width:600px) and (orientation:portrait){
  .portrait .planmode #bottom{right:0}
  .portrait #side,.portrait .planmode #side,.portrait #side.slim{width:auto}
}