/* Telegram mobile: the 432px app scene is scaled by its parent.
   The nav must use the scene width, never the viewport width. */
@media (max-width:720px){
  html body.tg-webapp.phone-scaled .phone:not(.welcome-open) .nav{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }
}

/* Shop/profile use an unscaled fullscreen container, while map/mascot use the
   432px scene scaled to the viewport. Match the visible nav geometry exactly. */
@media (max-width:520px){
  html body.tg-webapp.phone-scaled.screen-shop-bg .phone .nav,
  html body.tg-webapp.phone-scaled.screen-profile-bg .phone .nav{
    min-height:18.0556vw !important;
    padding:2.3148vw 2.3148vw 3.7037vw !important;
  }

  html body.tg-webapp.phone-scaled.screen-shop-bg .phone .nav button,
  html body.tg-webapp.phone-scaled.screen-profile-bg .phone .nav button{
    min-height:12.0370vw !important;
    font-size:2.4306vw !important;
    line-height:1.12 !important;
    gap:1.1574vw !important;
    padding:1.3889vw .4630vw !important;
  }

  html body.tg-webapp.phone-scaled.screen-shop-bg .phone .nav button svg,
  html body.tg-webapp.phone-scaled.screen-profile-bg .phone .nav button svg{
    width:5.3241vw !important;
    height:5.3241vw !important;
  }
}