/* ST4R Universe V2 — mobile hardening layer
   Keeps layout stable across narrow phones, tall phones, notches and landscape. */
html,body{max-width:100%;overflow-x:clip}
img,video,canvas,svg{max-width:100%;height:auto}
.v2-header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.v2-nav,.hero,.shell,.portal-glass,.data-card{min-width:0}
.hero-copy,.hero-visual,.portal-head>*,.section-head>*,.profile-ident,.profile-side,.data-main{min-width:0}
.hero h1,.hero-lead,.section-head h2,.section-head p,.portal-head h2,.portal-head p,.module-card-v2 h3,.module-card-v2 p,.benefit-card h3,.benefit-card p{overflow-wrap:anywhere}

@media(max-width:680px){
  :root{--shell:min(100% - 22px,1180px)}
  .v2-nav{gap:7px}
  .brand{min-width:0;flex:0 1 auto}
  .brand span{min-width:0}
  .nav-actions{min-width:0;flex:0 0 auto;gap:5px}
  .menu-btn,.nav-profile-chip,.nav-actions .btn-owner{min-width:42px;min-height:42px}
  .nav-actions .btn-owner{padding-left:9px;padding-right:9px}
  .hero{padding-top:42px}
  .hero h1{font-size:clamp(38px,13vw,49px);line-height:.94;letter-spacing:-.045em}
  .eyebrow{font-size:9px;letter-spacing:.11em;line-height:1.5;flex-wrap:wrap}
  .hero-lead{font-size:14px;line-height:1.65}
  .hero-actions{width:100%}
  .hero-actions .btn{min-height:46px}
  .hero-live-wrap,.hero-live-frame{max-width:100%;width:100%}
  .hero-stats-five div:last-child{grid-column:1/-1;text-align:center}
  .shop-category-card{min-width:0}
  .shop-category-card>span:nth-child(2){min-width:0}
  .shop-category-card b,.shop-category-card small{overflow-wrap:anywhere}
  .shop-search input{min-width:0;width:100%}
  .portal-product-card,.reward-card,.overview-card,.benefit-card,.module-card-v2{min-width:0}
  .games-banner,.cta-inner,.v2-footer{overflow:hidden}
  .footer-links a{white-space:normal}
  .profile-modal-panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}

@media(max-width:360px){
  :root{--shell:min(100% - 16px,1180px)}
  .v2-nav{gap:5px}
  .brand img{width:32px;height:32px}
  .brand strong{font-size:17px}
  .brand small{font-size:6px}
  .nav-actions{gap:4px}
  .menu-btn,.nav-profile-chip,.nav-actions .btn-owner{min-width:40px;min-height:40px;height:40px}
  .nav-actions .btn-owner{padding:0 8px;font-size:9px}
  .hero{padding-top:36px}
  .hero h1{font-size:clamp(37px,12.9vw,46px)}
  .hero-lead{font-size:13px}
  .trust-row{font-size:10px}
  .hero-stats{gap:8px}
  .hero-stats strong{font-size:20px}
  .hero-stats span{font-size:9px}
  .portal-head h2,.section-head h2{font-size:30px}
  .shop-shell{padding:10px}
  .shop-category-card{padding:11px 10px;gap:9px}
  .profile-modal-panel{padding:12px}
  .profile-modal-heading{padding-right:44px}
  .profile-modal-heading h2{font-size:27px}
  .profile-modal .profile-main{padding:13px}
  .profile-avatar{width:58px;height:58px}
  .profile-ident h3{font-size:19px}
  .profile-metric{padding:11px}
}

@media(max-height:500px) and (orientation:landscape){
  .v2-header{position:sticky}
  .hero{padding-top:28px;padding-bottom:26px}
  .profile-modal{padding:4px}
  .profile-modal-panel{max-height:calc(100dvh - 8px);width:calc(100vw - 8px);border-radius:18px}
}

@supports(height:100dvh){
  .profile-modal{min-height:100dvh}
  .profile-modal-panel{max-height:calc(100dvh - 10px)}
}