/* Responsive city and management drawer. Simulation controls stay in place. */
.ipo-hud-toggle,.ipo-drawer-toggle,.ipo-map-more{display:none}
@media(max-width:900px){
  #app{height:100vh;height:100dvh;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:6px}
  #hud{flex-wrap:nowrap;gap:4px;flex:none;min-height:48px}
  #hud .brand,#hud .spacer,#hud .sndbox{display:none}
  #hud .stat{flex:1 1 0;min-width:0;padding:5px 6px;border-radius:9px}
  #hud .stat.round{flex:1.35 1 0}
  #hud .stat small{font-size:9px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  #hud .stat strong{font-size:12px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
  #hud .stat:nth-child(n+5){display:none}
  #hud #menubtn,#hud .ipo-hud-toggle{flex:none;display:block;min-width:42px;min-height:44px;padding:4px 5px;font-size:10px;border-radius:9px}
  #hud #menubtn{order:20}
  #hud .ipo-hud-toggle{order:21}
  #app[data-ipo-hud="open"] #hud{flex-wrap:wrap}
  #app[data-ipo-hud="open"] #hud .stat{display:flex;flex:1 1 27%;min-height:44px}
  #app[data-ipo-hud="open"] #hud .sndbox{display:flex;margin-left:auto;align-items:center}
  #app[data-ipo-hud="open"] #hud .sndbox button{min-width:44px;min-height:44px}
  #app .main{flex-direction:column;gap:6px;min-height:0}
  #app .mapwrap{flex:1 1 0;height:auto;min-height:0;border-radius:13px}
  #app .panel{width:100%;height:31vh;height:31dvh;min-height:202px;max-height:278px;flex:0 0 auto;border-radius:13px;overflow:hidden}
  .ipo-drawer-toggle{display:flex;flex:none;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:0;border-bottom:1px solid var(--line);padding:6px 12px;background:#1b3b43;color:var(--text);font-size:12px;font-weight:700;text-align:left;cursor:pointer}
  .ipo-drawer-toggle span:last-child{color:var(--yellow);font-size:11px;white-space:nowrap;margin-left:8px}
  #app .tabs button{min-height:44px;padding:6px 2px;font-size:11px;line-height:1.2}
  #app .pbody{padding:10px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  #app .pfoot{padding:8px;gap:6px;flex:none;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  #app .pfoot button{min-height:44px}
  #app .endbtn{font-size:13px;padding:10px 6px}
  #app .runbtn{font-size:10px;padding:6px}
  #app .proj{font-size:10px;max-width:28%}
  #app[data-ipo-drawer="open"] .mapwrap{flex:0 0 22%;height:auto;min-height:110px}
  #app[data-ipo-drawer="open"] .panel{flex:1 1 0;height:auto;min-height:0;max-height:none}
  #app #ipo-selected-shop{left:8px!important;bottom:60px!important;max-width:calc(100% - 16px)!important;padding:5px 8px!important;font-size:11px!important}
  #app .mapwrap[data-ipo-tools="open"] #ipo-selected-shop{bottom:108px!important}
  #app .mapctl{left:auto;right:8px;top:auto;bottom:8px;display:grid;grid-template-columns:repeat(4,44px);gap:4px;z-index:3}
  #app .mapctl button{width:44px;height:44px;background:rgba(14,34,38,.94)}
  #app .mapctl #rotl,#app .mapctl #rotr,#app .mapctl #ztop,#app .mapctl #zq{display:none}
  #app #mapwrap[data-ipo-tools="open"] .mapctl button{display:block}
  #app .ipo-map-more{display:block}
  #app #zreset{order:7}#app .ipo-map-more{order:8}
  #app .banner{top:8px;left:8px;right:8px;max-height:68px;overflow:hidden}
  #app .banner .chip{font-size:10px;padding:4px 7px}
  #app .chip.clock{font-size:16px}
  #app .plotbar{left:8px;right:8px;bottom:60px;max-width:calc(100% - 16px)}
  #app .plotbar button{min-height:44px}
  #app button:focus-visible{outline:2px solid var(--yellow);outline-offset:-3px}
  #app .stepper button,#app .minibtn{min-height:40px}
}
@media(max-width:900px) and (max-height:520px) and (orientation:landscape){
  #app .main{flex-direction:row}
  #app .mapwrap,#app[data-ipo-drawer="open"] .mapwrap{height:auto;flex:1 1 0;min-height:0}
  #app .panel,#app[data-ipo-drawer="open"] .panel{width:46%;height:100%;max-height:none;min-height:0;flex:0 0 46%}
  #app[data-ipo-drawer="open"] .panel{width:62%;flex-basis:62%}
  #app .pfoot .proj{display:none}
  #app .tabs button{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.ipo-drawer-toggle,.ipo-map-more{transition:none}}