/* The compact city is a bounded screen: controls occupy real rows instead of hanging outside the map. */
@media(max-width:680px),(max-height:560px){
 body[data-screen=cityScreen]{height:100dvh;overflow:hidden}
 body[data-screen=cityScreen] #app{height:100dvh;min-height:0!important;max-height:100dvh;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)!important;display:flex;flex-direction:column;gap:6px;overflow:hidden}
 body[data-screen=cityScreen] .topbar{position:relative;top:auto;margin:6px 8px 0;min-height:46px;height:46px;flex:none;padding:5px 9px;border-radius:18px}
 body[data-screen=cityScreen] .topbar .logo{width:32px;height:32px;border-radius:11px;font-size:20px}body[data-screen=cityScreen] .topbar .brand b{font-size:11px;line-height:1.15}body[data-screen=cityScreen] .topbar .brand small{display:none}body[data-screen=cityScreen] .topbar .wallet{gap:4px}body[data-screen=cityScreen] .topbar .wallet-chip{padding:5px 6px;font-size:10px}body[data-screen=cityScreen] .topbar .icon-btn{width:32px;height:32px}
 body[data-screen=cityScreen] main{display:flex;flex:1;min-height:0;padding:0!important;overflow:hidden}
 body[data-screen=cityScreen] #cityScreen{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto minmax(0,1fr);gap:6px;flex:1;min-height:0;min-width:0;height:100%;padding:0 8px!important;align-content:stretch}
 body[data-screen=cityScreen] #cityScreen>.cw-top,body[data-screen=cityScreen] #cityScreen>#cwGoal,body[data-screen=cityScreen] #cityScreen>#cityDistrictBar,body[data-screen=cityScreen] #cityScreen>#cwStage{grid-column:1!important;grid-row:auto!important;min-width:0}
 body[data-screen=cityScreen] #cityScreen>.cw-top{margin:0;gap:8px;min-height:38px}body[data-screen=cityScreen] .cw-top .back{width:34px;height:34px;font-size:25px;flex:none}body[data-screen=cityScreen] .cw-top h2{font-size:21px;margin:2px 0 0}body[data-screen=cityScreen] .cw-top small{font-size:8px}
 body[data-screen=cityScreen] #cwGoal{padding:7px 10px;margin:0;border-radius:13px;gap:8px;box-shadow:none}body[data-screen=cityScreen] #cwGoal .cw-goal-text{gap:2px}body[data-screen=cityScreen] #cwGoal small{font-size:7px}body[data-screen=cityScreen] #cwGoal b{font-size:11px}body[data-screen=cityScreen] #cwGoal span{font-size:9px;line-height:1.2}body[data-screen=cityScreen] #cwGoal button{font-size:10px;padding:7px 9px;min-height:32px}
 body[data-screen=cityScreen] #cityDistrictBar{display:flex;flex-wrap:nowrap;overflow-x:auto;margin:0!important;padding:0 0 3px!important;gap:5px;background:none;scrollbar-width:thin;border-radius:0;align-self:auto;z-index:auto}body[data-screen=cityScreen] #cityDistrictBar .pill{flex:none;font-size:9px;min-height:30px;padding:7px 10px;white-space:nowrap}
 body[data-screen=cityScreen] #cwStage,body[data-screen=cityScreen] #cwStage.cw-over{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;overflow:hidden!important;border-radius:17px;box-shadow:none}
 body[data-screen=cityScreen] #cityViewport{grid-row:1;position:relative;width:100%;height:100%!important;min-height:0!important;max-height:none!important;border:0;border-radius:15px 15px 0 0;box-shadow:none}
 body[data-screen=cityScreen] #cwStage>.cw-fab{position:relative!important;grid-row:2;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px;margin:0!important;width:auto!important;max-width:none!important;justify-content:stretch;background:#123341;border-top:1px solid #a5c7b538;border-radius:0;z-index:5000}
 body[data-screen=cityScreen] #cwStage>.cw-fab button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:31px;padding:5px 3px!important;font-size:9px!important;line-height:1.15;white-space:normal;box-shadow:none;border-radius:10px;margin:0!important}
 body[data-screen=cityScreen] #cityStyleBtn{grid-column:span 2}body[data-screen=cityScreen] #cwStage .cw-zoom{top:8px!important;left:8px!important;gap:4px}body[data-screen=cityScreen] #cwStage .cw-zoom button{width:32px;height:32px;font-size:20px;border-radius:10px}body[data-screen=cityScreen] #cwHint{display:none!important}
 body[data-screen=cityScreen] .bottom-nav{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;flex:0 0 57px;width:calc(100% - 16px)!important;height:57px;max-width:560px;margin:0 auto 6px!important;padding:4px;border-radius:20px}
 body[data-screen=cityScreen] .bottom-nav button{min-width:0;padding:3px 1px;font-size:8px;line-height:1.1;border-radius:14px}body[data-screen=cityScreen] .bottom-nav span{font-size:18px;line-height:1.15}
 body[data-screen=cityScreen] #cityScreen.ui-off{grid-template-rows:minmax(0,1fr)}body[data-screen=cityScreen] #cityScreen.ui-off #cwStage{grid-template-rows:minmax(0,1fr)}body[data-screen=cityScreen] #cityScreen.ui-off #cwStage>.cw-fab{display:none!important}
}
@media(max-height:560px) and (min-width:681px){body[data-screen=cityScreen] #cityScreen{grid-template-columns:1fr 1fr!important;grid-template-rows:auto auto minmax(0,1fr);gap:4px}body[data-screen=cityScreen] #cityScreen>#cwGoal{grid-column:2!important;grid-row:1!important}body[data-screen=cityScreen] #cityScreen>#cityDistrictBar{grid-column:1/3!important}body[data-screen=cityScreen] #cityScreen>#cwStage{grid-column:1/3!important;grid-template-rows:minmax(0,1fr) auto}body[data-screen=cityScreen] #cwStage>.cw-fab{grid-template-columns:repeat(10,minmax(0,1fr));padding:4px}body[data-screen=cityScreen] #cityStyleBtn{grid-column:auto}body[data-screen=cityScreen] #cwStage>.cw-fab button{font-size:8px!important;min-height:28px}body[data-screen=cityScreen] .topbar{height:38px;min-height:38px;margin-top:3px}body[data-screen=cityScreen] .bottom-nav{height:45px;flex-basis:45px;margin-bottom:3px!important}body[data-screen=cityScreen] #app{gap:4px}}