/* ===== UNIVERSAL DEVICE OPTIMIZATION ===== */

/* prevent horizontal scroll */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

/* responsive media */
img,video,canvas,svg{
  max-width:100%;
  height:auto;
}

/* readable text */
body{
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

/* safe header spacing */
:root{
  --hudH:40px;
  --creditsH:0px;
  --navH:56px;
}

body{
  padding-top:calc(var(--hudH)+var(--creditsH)+var(--navH)+12px);
}

/* prevent heading clipping */
h1,h2,h3{
  overflow-wrap:anywhere;
}

/* ===== MOBILE ===== */
@media (max-width:768px){

  body{
    padding-top:calc(var(--hudH)+var(--creditsH)+var(--navH)+16px);
  }

  #top-status-wrap{
    flex-wrap:wrap !important;
    gap:10px !important;
    font-size:10px !important;
  }

  .hero h1{
    font-size:clamp(22px,7vw,34px) !important;
  }

  .hero h2,.hero p{
    font-size:clamp(14px,4.3vw,18px) !important;
  }

  .section,section{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  /* disable heavy canvas on phones */
  canvas,#particles,.particle-bg,#heroCanvas{
    display:none !important;
  }
}

/* very small phones */
@media (max-width:380px){
  #top-status-wrap{font-size:9px !important;}
}