/* Domiki v1.15.0.5 — 2D performance and mobile UX hotfix */
/* No CSS-wide switching of thousands of plot descendants during a gesture.
   The global mapWorld transform is already throttled to requestAnimationFrame. */
html.metro-map432 body #mapWorld,html:not(.metro-map432) body #mapWorld{transform-origin:0 0}
@media(max-width:700px){
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls{
  box-sizing:border-box!important;grid-template-columns:46px minmax(65px,1fr) 54px 38px 38px 38px!important;
  grid-template-rows:40px!important;gap:3px!important;max-height:44px!important;min-height:44px!important;
  height:44px!important;flex:0 0 44px!important;padding:2px 5px!important;overflow:visible!important;
 }
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls>label:first-child,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls>label:first-child{grid-column:1!important;grid-row:1!important;}
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls>label:nth-child(2),
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls>label:nth-child(2){grid-column:2!important;grid-row:1!important;}
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls select,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls select{
   width:100%!important;min-width:0!important;max-width:100%!important;height:40px!important;min-height:40px!important;
   padding:2px 12px 2px 4px!important;font-size:12px!important;
 }
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls>.compact-fx-control,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls>.compact-fx-control{
   grid-column:3!important;grid-row:1!important;display:flex!important;position:relative!important;
   flex:0 0 54px!important;width:54px!important;min-width:0!important;max-width:54px!important;
   margin:0!important;padding:0!important;gap:0!important;height:40px!important;
 }
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls>.compact-fx-control label,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls>.compact-fx-control label{
  position:absolute!important;left:3px!important;top:0!important;font-size:10px!important;font-weight:900!important;
  color:#44745d!important;z-index:1;pointer-events:none;line-height:11px!important;
 }
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls>.compact-fx-control #livingQuality,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls>.compact-fx-control #livingQuality{
   display:block!important;flex:1!important;min-width:0!important;width:54px!important;max-width:54px!important;
   height:40px!important;min-height:40px!important;max-height:40px!important;
   padding:10px 2px 0 2px!important;font-size:10px!important;line-height:1.1!important;
   text-align:center!important;appearance:none!important;border:1px solid #b4c5b3!important;border-radius:9px!important;
   background:#fffaf0!important;
 }
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls #metroLots,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls #sunnyLots{grid-column:4!important;grid-row:1!important;}
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls #metroHelp,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls #sunnyHelp{grid-column:5!important;grid-row:1!important;}
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls .compact-more-btn,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls .compact-more-btn{grid-column:6!important;grid-row:1!important;}
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls #metroLots,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls #sunnyLots,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls #metroHelp,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls #sunnyHelp,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls .compact-more-btn,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls .compact-more-btn{
   display:inline-flex!important;align-items:center!important;justify-content:center!important;
   min-width:0!important;width:100%!important;height:40px!important;min-height:40px!important;max-height:40px!important;
 }
 /* In 3D the 2D FX setting is not applicable, so spend its space on the 3D quality menu. */
 html.gesture-map-ui.metro-3d-active body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls,
 html.gesture-map-ui.sunny-3d-active body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls{
    grid-template-columns:46px minmax(75px,1fr) 38px 38px 38px!important;
 }
 html.gesture-map-ui.metro-3d-active body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls>.compact-fx-control,
 html.gesture-map-ui.sunny-3d-active body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls>.compact-fx-control{display:none!important;}
 html.gesture-map-ui.metro-3d-active body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls #metroLots,
 html.gesture-map-ui.sunny-3d-active body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls #sunnyLots{grid-column:3!important;}
 html.gesture-map-ui.metro-3d-active body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls #metroHelp,
 html.gesture-map-ui.sunny-3d-active body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls #sunnyHelp{grid-column:4!important;}
 html.gesture-map-ui.metro-3d-active body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls .compact-more-btn,
 html.gesture-map-ui.sunny-3d-active body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls .compact-more-btn{grid-column:5!important;}
 /* The 2D FX control now lives in the first row; do not reserve another row. */
 html.gesture-map-ui:not(.metro-3d-active):not(.sunny-3d-active) body.mobile-game[data-mobile-tab="city"] .city.card>.living-settings{
  min-height:44px!important;max-height:52px!important;height:auto!important;flex:0 0 auto!important;
  padding:2px 4px!important;overflow:visible!important;
 }
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.living-settings:has(.compact-fx-control) .compact-fx-control{display:none!important;}
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.living-settings .domiki-action-dock{
  display:flex!important;flex-wrap:nowrap!important;gap:3px!important;
  overflow:hidden!important;min-width:0!important;max-width:100%!important;
  min-height:38px!important;max-height:40px!important;
 }
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.living-settings .domiki-action-dock>button{
   flex:1 1 0!important;min-width:0!important;width:auto!important;font-size:9px!important;
 }
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.living-settings #metroSectorsOpen{
   max-width:59px!important;flex:0 1 59px!important;font-size:9px!important;
 }
}

/* Village has no 2D/3D mode toolbar. Keep its FX row and action dock both visible. */
@media(max-width:700px){
 html.gesture-map-ui[data-world="craft"] body.mobile-game[data-mobile-tab="city"] .city.card>.living-settings{
   display:flex!important;flex-direction:column!important;gap:3px!important;
   height:83px!important;min-height:83px!important;max-height:83px!important;flex:0 0 83px!important;
   padding:2px 4px!important;overflow:hidden!important;
 }
 html.gesture-map-ui[data-world="craft"] body.mobile-game[data-mobile-tab="city"] .city.card>.living-settings>.compact-map-controls{
   display:flex!important;flex:0 0 33px!important;height:33px!important;min-height:33px!important;max-height:33px!important;
   align-items:center!important;justify-content:flex-start!important;gap:4px!important;
 }
 html.gesture-map-ui[data-world="craft"] body.mobile-game[data-mobile-tab="city"] .city.card>.living-settings>.compact-map-controls label{
   display:flex!important;font-size:12px!important;letter-spacing:normal!important;
 }
 html.gesture-map-ui[data-world="craft"] body.mobile-game[data-mobile-tab="city"] .city.card>.living-settings>.compact-map-controls #livingQuality{
   display:block!important;flex:0 0 79px!important;width:79px!important;max-width:79px!important;
   height:32px!important;min-height:32px!important;padding:2px 5px!important;font-size:11px!important;
 }
 html.gesture-map-ui[data-world="craft"] body.mobile-game[data-mobile-tab="city"] .city.card>.living-settings>.domiki-action-dock{
   flex:0 0 40px!important;max-height:40px!important;overflow:visible!important;
 }
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.metro-controls>label:first-child select,
 html.gesture-map-ui body.mobile-game[data-mobile-tab="city"] .city.card>.sunny-controls>label:first-child select{
   appearance:auto!important;text-align:left!important;font-size:13px!important;
   padding:2px 0 2px 3px!important;
 }
}

/* Higher specificity than legacy mobile 2D dock rules: prevent Village dock overlap. */
@media(max-width:700px){
 html.gesture-map-ui[data-world="craft"]:not(.metro-3d-active):not(.sunny-3d-active) body.mobile-game[data-mobile-tab="city"] .workspace .city.card>.living-settings{
   height:83px!important;min-height:83px!important;max-height:83px!important;
   flex:0 0 83px!important;overflow:hidden!important;
 }
 html.gesture-map-ui[data-world="craft"]:not(.metro-3d-active):not(.sunny-3d-active) body.mobile-game[data-mobile-tab="city"] .workspace .city.card>.living-settings>.compact-map-controls{
   flex:0 0 33px!important;height:33px!important;max-height:33px!important;min-height:33px!important;
 }
}