/* v1.3.13: SMARTPHONE tab must preview the actual portrait controller proportions.
   Remove inherited fixed minimum heights that squeezed the three columns into tall strips. */
@media (max-width:820px){
  #pcControlsOverlay .phoneGuideArea{display:block!important;margin-top:8px!important;min-width:0!important;}
  #pcControlsOverlay .phoneGuideShell{width:100%!important;max-width:560px!important;margin:0 auto!important;padding:5px!important;box-sizing:border-box!important;overflow:hidden!important;}
  #pcControlsOverlay .phoneGuideGrid{
    display:grid!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:390 / 245!important;
    grid-template-columns:minmax(0,42fr) minmax(0,28fr) minmax(0,30fr)!important;
    grid-template-rows:minmax(0,1fr) 58px!important;
    gap:4px!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  #pcControlsOverlay .phoneGuideCockpit{
    grid-column:1!important;grid-row:1!important;
    min-width:0!important;min-height:0!important;height:auto!important;
    border-radius:6px!important;
  }
  #pcControlsOverlay .phoneGuideCockpit img{
    width:100%!important;height:100%!important;
    object-fit:contain!important;object-position:center center!important;
  }
  #pcControlsOverlay .phoneGuideCenter{
    grid-column:2!important;grid-row:1!important;
    min-width:0!important;min-height:0!important;height:auto!important;
    overflow:hidden!important;border-radius:6px!important;
  }
  #pcControlsOverlay .phoneGuideUtility{grid-template-columns:1fr 1fr!important;gap:2px!important;padding:3px!important;flex:0 0 24px!important;min-height:24px!important;}
  #pcControlsOverlay .phoneGuideUtility span{min-width:0!important;min-height:0!important;padding:0 1px!important;border-width:1px!important;border-radius:4px!important;font-size:6px!important;}
  #pcControlsOverlay .phoneGuideMap{min-width:0!important;min-height:0!important;margin:0 3px 3px!important;padding:3px!important;border-width:1px!important;border-radius:4px!important;font-size:5px!important;overflow:hidden!important;}
  #pcControlsOverlay .phoneGuideMap canvas{display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;margin-top:2px!important;}
  #pcControlsOverlay .phoneGuideGears{
    grid-column:3!important;grid-row:1 / 3!important;
    min-width:0!important;min-height:0!important;height:auto!important;
    padding:3px!important;gap:3px!important;border-radius:6px!important;
    grid-template-rows:repeat(5,minmax(0,1fr))!important;
  }
  #pcControlsOverlay .phoneGuideGears span{min-width:0!important;min-height:0!important;border-width:1.5px!important;border-radius:5px!important;font-size:clamp(17px,6vw,28px)!important;}
  #pcControlsOverlay .phoneGuideBrake{
    grid-column:1 / 3!important;grid-row:2!important;
    min-width:0!important;min-height:0!important;height:auto!important;
    border-radius:6px!important;font-size:clamp(14px,4.7vw,22px)!important;
  }
  #pcControlsOverlay .phoneSteer{bottom:22%!important;width:30%!important;height:auto!important;aspect-ratio:1 / 1!important;border-width:2px!important;font-size:clamp(17px,6vw,27px)!important;}
}