

@media (hover:none) and (pointer:coarse) and (orientation:portrait){
  /* v1.0.24: ONLY requested mobile portrait fixes. Keep all other balance unchanged. */

  /* 1) R / ESC must always remain visible above the map. */
  .mpCenter{grid-template-rows:24px minmax(0,1fr)!important;overflow:hidden!important;}
  .mpUtility{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:2px!important;
    padding:2px!important;
    min-height:24px!important;
    height:24px!important;
    box-sizing:border-box!important;
    position:relative!important;
    z-index:12!important;
    overflow:visible!important;
  }
  .mpUtility button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    visibility:visible!important;
    opacity:1!important;
    height:20px!important;
    min-height:20px!important;
    margin:0!important;
    padding:0 2px!important;
    font:900 6px/1 Arial!important;
    position:relative!important;
    z-index:13!important;
  }
  .mpMapWrap{min-height:0!important;}

  /* 2) MOMO: still clipped inside LEFT column, but visually reaches its right edge. */
  .mpCockpit{overflow:hidden!important;}
  .mpWheel{
    left:56%!important;
    width:112%!important;
    max-width:none!important;
    bottom:-48%!important;
    transform:translateX(-50%) rotate(0deg)!important;
    transform-origin:50% 50%!important;
  }
  .mpSteerHit.left{left:0!important;right:auto!important;width:50%!important;}
  .mpSteerHit.right{right:0!important;left:auto!important;width:50%!important;}

  /* 3) B remains 3-column full width, but matches the i-button band height better. */
  #mobileDriveUI{
    grid-template-rows:minmax(0,1fr) 48px!important;
  }
  .mpBrake{
    grid-column:1 / -1!important;
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
    transform:none!important;
    border-radius:6px!important;
    border-width:2px!important;
    font:900 clamp(14px,4.4vw,20px)/1 Arial!important;
  }
}

