@media (hover:none) and (pointer:coarse) and (orientation:portrait){
  /* v1.0.23: MOBILE PORTRAIT DISPLAY LAYER ONLY. PC / GAS / game logic untouched. */
  #game{
    height:calc(100dvh - clamp(160px,21dvh,180px))!important;
  }
  #mobileDriveUI{
    height:clamp(160px,21dvh,180px)!important;
    padding:2px 3px max(2px,env(safe-area-inset-bottom))!important;
    grid-template-rows:minmax(0,1fr) 30px!important;
    gap:2px!important;
  }
  .mpGrid{
    grid-template-columns:32% 46% 22%!important;
    gap:3px!important;
  }
  .mpCol{border-radius:4px!important;}

  /* LEFT: online + compact AE86 cockpit. Nothing may escape this column. */
  .mpLeft{
    grid-template-rows:46% 54%!important;
    overflow:hidden!important;
  }
  .mpOnline{
    padding:3px 3px 1px!important;
    font:700 clamp(5px,1.45vw,7px)/1.05 Arial!important;
  }
  .mpOnlineHead{gap:2px!important;}
  #mpOnlineCount{font-size:1em!important;}
  #mpOnlineList{margin-top:2px!important;gap:0!important;}
  .mpCockpit{
    overflow:hidden!important;
    background-size:100% 100%!important;
    background-position:center center!important;
  }
  .mpWheel{
    left:50%!important;
    width:96%!important;
    max-width:none!important;
    bottom:-48%!important;
    transform:translateX(-50%) rotate(0deg)!important;
    transform-origin:50% 50%!important;
  }
  .mpSteerHit{overflow:hidden!important;}

  /* CENTER: thin R/ESC and maximum map area. */
  .mpCenter{grid-template-rows:22px minmax(0,1fr)!important;}
  .mpUtility{gap:2px!important;padding:2px!important;}
  .mpUtility button{
    height:18px!important;
    min-height:18px!important;
    padding:0 1px!important;
    border-radius:2px!important;
    font:900 5px/1 Arial!important;
  }
  .mpMapWrap{margin:0 2px 2px!important;border-radius:3px!important;}
  .mpMapLabel{left:2px!important;top:2px!important;font:800 4px/1 Arial!important;}

  /* RIGHT: all five gears always fit; the WHOLE 5→1 stack has a silver surround. */
  .mpRight{
    grid-template-rows:repeat(5,minmax(0,1fr))!important;
    gap:2px!important;
    padding:3px!important;
    border:2px solid #d2d2d2!important;
    box-shadow:inset 0 0 0 1px #4b4b4b,0 0 5px #000!important;
    overflow:hidden!important;
  }
  .mpGear{
    min-height:0!important;
    height:100%!important;
    padding:0!important;
    margin:0!important;
    border:1px solid #d0d0d0!important;
    border-radius:2px!important;
    font:900 clamp(8px,2.7vw,12px)/1 Arial!important;
    box-shadow:inset 0 0 0 1px #393939!important;
  }

  /* B: still spans ALL THREE COLUMNS. Lift it into the i-button band and keep it thin. */
  .mpBrake{
    grid-column:1 / -1!important;
    width:100%!important;
    height:30px!important;
    min-height:30px!important;
    margin:0!important;
    transform:translateY(-1px)!important;
    border-radius:5px!important;
    font:900 clamp(12px,4vw,18px)/1 Arial!important;
  }

  /* prevent copy/callout on controls; chat inputs elsewhere are not affected */
  #mobileDriveUI,#mobileDriveUI *{
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-touch-callout:none!important;
    -webkit-tap-highlight-color:transparent!important;
  }
}