/* =========================================================
   ST4R V77 — MOBILE SAFE / AD LANDING HARDENING
   280px -> 1099px. Prevents overlap and horizontal overflow.
   ========================================================= */

@media (max-width:1099px){
  html,body{max-width:100%!important;overflow-x:hidden!important}
  *,*::before,*::after{box-sizing:border-box}
  img,svg,canvas,video{max-width:100%;height:auto}

  /* HEADER: two clean rows on phones/tablets */
  body.compact-site header.topbar.st4r-masthead,
  body.compact-site header.st4r-masthead{
    position:relative!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    background:rgba(2,8,24,.96)!important;
    border-bottom:1px solid rgba(98,162,255,.26)!important;
  }

  body.compact-site header.st4r-masthead .masthead-banner{
    position:relative!important;
    height:64px!important;
    min-height:64px!important;
    padding:7px max(12px,env(safe-area-inset-right)) 7px max(12px,env(safe-area-inset-left))!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    background:transparent!important;
    border:0!important;
  }

  body.compact-site header.st4r-masthead .masthead-brand{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;
    transform:none!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    width:auto!important;
    min-width:0!important;
    max-width:58vw!important;
    flex:1 1 auto!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:2!important;
  }

  body.compact-site header.st4r-masthead .masthead-logo{
    display:flex!important;
    width:40px!important;height:40px!important;min-width:40px!important;
    align-items:center!important;justify-content:center!important;
    visibility:visible!important;opacity:1!important;
  }
  body.compact-site header.st4r-masthead .masthead-logo img{
    display:block!important;
    width:40px!important;height:40px!important;
    object-fit:cover!important;border-radius:50%!important;
  }
  body.compact-site header.st4r-masthead .masthead-wordmark{
    display:block!important;min-width:0!important;visibility:visible!important;opacity:1!important;
  }
  body.compact-site header.st4r-masthead .masthead-wordmark strong{
    display:block!important;
    font-size:clamp(11px,3.6vw,15px)!important;
    letter-spacing:.13em!important;
    white-space:nowrap!important;
    overflow:hidden!important;text-overflow:ellipsis!important;
  }

  body.compact-site header.st4r-masthead .masthead-tools{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;
    transform:none!important;
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    width:auto!important;min-width:0!important;flex:0 0 auto!important;
    gap:6px!important;z-index:3!important;
  }
  body.compact-site header.st4r-masthead .masthead-visitor,
  body.compact-site header.st4r-masthead .masthead-live,
  body.compact-site header.st4r-masthead .masthead-owner-btn{
    height:36px!important;min-height:36px!important;border-radius:11px!important;
  }
  body.compact-site header.st4r-masthead .masthead-visitor{padding:0 9px!important;min-width:54px!important}
  body.compact-site header.st4r-masthead .masthead-visitor small{display:none!important}
  body.compact-site header.st4r-masthead .masthead-live{padding:0 9px!important}
  body.compact-site header.st4r-masthead .masthead-live span{font-size:10px!important}
  body.compact-site header.st4r-masthead .masthead-owner-btn{padding:0 9px!important;font-size:9px!important}
  body.compact-site header.st4r-masthead .masthead-discord{display:none!important}

  body.compact-site header.st4r-masthead .masthead-navrow{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;
    transform:none!important;
    width:100%!important;height:auto!important;min-height:0!important;
    padding:7px max(10px,env(safe-area-inset-right)) 10px max(10px,env(safe-area-inset-left))!important;
    display:block!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    background:rgba(2,8,24,.96)!important;
    border-top:1px solid rgba(105,165,255,.10)!important;
    pointer-events:auto!important;
  }
  body.compact-site header.st4r-masthead .masthead-navrow::-webkit-scrollbar{display:none!important}
  body.compact-site header.st4r-masthead .masthead-nav{
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
    gap:6px!important;width:max-content!important;min-width:100%!important;
    justify-content:flex-start!important;pointer-events:auto!important;
  }
  body.compact-site header.st4r-masthead .masthead-nav a{
    flex:0 0 auto!important;
    min-width:86px!important;width:auto!important;height:42px!important;
    padding:0 12px!important;border-radius:11px!important;
  }

  /* HERO: one column, no overlap */
  body.compact-site #daily.st4r60-hero{
    width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
    padding:18px max(12px,env(safe-area-inset-right)) 30px max(12px,env(safe-area-inset-left))!important;
    overflow:hidden!important;
  }
  body.compact-site #daily .st4r60-main{
    width:100%!important;max-width:760px!important;height:auto!important;min-height:0!important;
    margin:0 auto!important;padding:0!important;
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:22px!important;
    align-items:start!important;
  }
  body.compact-site #daily .st4r60-left{order:1!important;width:100%!important;max-width:100%!important;transform:none!important;margin:0!important}
  body.compact-site #daily .st4r60-brand{order:2!important;width:100%!important;min-height:360px!important;transform:none!important;margin:0 auto!important;overflow:visible!important}
  body.compact-site #daily .st4r60-card{order:3!important;width:100%!important;max-width:430px!important;justify-self:center!important;transform:none!important;margin:0 auto!important;padding:18px 14px 16px!important}

  body.compact-site #daily .st4r60-pill{max-width:100%!important;font-size:clamp(10px,2.8vw,12px)!important;padding:9px 13px!important}
  body.compact-site #daily .st4r60-left h2{
    margin:16px 0 14px!important;
    font-size:clamp(38px,12vw,58px)!important;line-height:.94!important;letter-spacing:-.045em!important;
    white-space:normal!important;overflow-wrap:normal!important;
  }
  body.compact-site #daily .st4r60-left p{max-width:100%!important;font-size:clamp(13px,3.7vw,16px)!important;line-height:1.52!important}
  body.compact-site #daily .st4r60-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:18px 0 13px!important}
  body.compact-site #daily .st4r60-primary,
  body.compact-site #daily .st4r60-secondary{width:100%!important;min-height:50px!important;padding:0 16px!important}
  body.compact-site #daily .st4r60-chips,
  body.compact-site #daily .st4r60-tags{display:flex!important;flex-wrap:wrap!important;gap:7px!important}

  /* CENTER BRAND scales with viewport */
  body.compact-site #daily .st4r60-brand-halo{width:min(78vw,340px)!important;height:min(78vw,340px)!important;max-width:340px!important;max-height:340px!important}
  body.compact-site #daily .st4r60-brand-halo::after{inset:-12px!important}
  body.compact-site #daily .st4r60-orbit.orbit-a{width:min(86vw,370px)!important;height:min(23vw,96px)!important}
  body.compact-site #daily .st4r60-orbit.orbit-b{display:none!important}
  body.compact-site #daily .st4r60-star-shape{width:clamp(125px,38vw,170px)!important;height:clamp(125px,38vw,170px)!important;top:40%!important}
  body.compact-site #daily .st4r60-star-shape::before{height:100%!important}
  body.compact-site #daily .st4r60-star-shape::after{width:100%!important}
  body.compact-site #daily .st4r60-wordmark{bottom:32px!important}
  body.compact-site #daily .st4r60-wordmark strong{font-size:clamp(52px,18vw,78px)!important}
  body.compact-site #daily .st4r60-wordmark span{font-size:clamp(15px,5vw,21px)!important;letter-spacing:.34em!important}

  /* WHEEL: fluid from 280px phones upward */
  body.compact-site #daily .st4r60-wheel-stage{
    --st4r-wheel-size:min(76vw,300px);
    --st4r-ring-size:calc(var(--st4r-wheel-size) + 16px);
    --st4r-runner-size:calc(var(--st4r-wheel-size) + 26px);
    width:100%!important;height:calc(var(--st4r-wheel-size) + 34px)!important;min-height:0!important;
    margin:0 auto 7px!important;padding:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;
  }
  body.compact-site #daily #dailyWheel,
  body.compact-site #daily .v28-wheel.st4r60-wheel{
    width:var(--st4r-wheel-size)!important;height:var(--st4r-wheel-size)!important;
    min-width:0!important;min-height:0!important;flex:0 0 var(--st4r-wheel-size)!important;
    margin:0!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  }
  body.compact-site #daily .st4r60-wheel-stage::before{width:var(--st4r-ring-size)!important;height:var(--st4r-ring-size)!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important}
  body.compact-site #daily .st4r75-ring-runner{width:var(--st4r-runner-size)!important;height:var(--st4r-runner-size)!important;left:50%!important;top:50%!important}
  body.compact-site #daily .st4r60-wheel-stage::after{width:clamp(58px,18vw,72px)!important;height:clamp(58px,18vw,72px)!important;font-size:clamp(30px,9vw,38px)!important;left:50%!important;top:50%!important}
  body.compact-site #daily .st4r60-pointer{left:50%!important;top:0!important;transform:translateX(-50%)!important;border-left-width:16px!important;border-right-width:16px!important;border-top-width:27px!important}
  body.compact-site #daily #dailyWheel .v28-label{font-size:clamp(10px,3.5vw,15px)!important}
  body.compact-site #daily #dailyWheel .v28-l1000{font-size:clamp(13px,4.4vw,18px)!important}
  body.compact-site #daily #dailyWheel .v28-l750{font-size:clamp(12px,4vw,16px)!important}
  body.compact-site #daily #dailyWheel .v28-lfree,
  body.compact-site #daily #dailyWheel .v28-l25{font-size:clamp(9px,2.9vw,12px)!important}

  body.compact-site #daily .st4r60-card-head{gap:8px!important;align-items:flex-start!important}
  body.compact-site #daily .st4r60-card-head h3{font-size:clamp(19px,6vw,24px)!important;white-space:normal!important;line-height:1!important}
  body.compact-site #daily .st4r60-card-head small{font-size:9px!important}
  body.compact-site #daily .st4r60-live{flex:0 0 auto!important;padding:7px 10px!important;font-size:11px!important}
  body.compact-site #daily .st4r60-note{max-width:100%!important;min-height:0!important;margin:5px auto 10px!important;font-size:clamp(10px,2.9vw,12px)!important}
  body.compact-site #daily .st4r60-spin-btn{width:100%!important;min-height:50px!important;height:auto!important;padding:12px 14px!important;font-size:13px!important}
  body.compact-site #daily .st4r60-logout{font-size:10px!important}

  /* stats never overlap */
  body.compact-site #daily .st4r60-stats{
    position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
    width:100%!important;max-width:760px!important;margin:22px auto 0!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;
  }
  body.compact-site #daily .st4r60-stat{min-width:0!important;min-height:68px!important;padding:11px 12px!important}
  body.compact-site #daily .st4r60-stat strong{font-size:clamp(19px,5.5vw,24px)!important}
  body.compact-site #daily .st4r60-stat small{font-size:10px!important}
}

@media (max-width:650px){
  body.compact-site #daily .st4r60-brand{min-height:330px!important}
  body.compact-site #daily .st4r60-card{border-radius:20px!important}
}

@media (max-width:390px){
  body.compact-site header.st4r-masthead .masthead-wordmark strong{font-size:11px!important;letter-spacing:.10em!important}
  body.compact-site header.st4r-masthead .masthead-logo{width:36px!important;height:36px!important;min-width:36px!important}
  body.compact-site header.st4r-masthead .masthead-logo img{width:36px!important;height:36px!important}
  body.compact-site header.st4r-masthead .masthead-owner-btn{display:none!important}
  body.compact-site #daily .st4r60-wheel-stage{--st4r-wheel-size:min(74vw,282px)}
  body.compact-site #daily .st4r60-card{padding:16px 10px 15px!important}
}

@media (max-width:340px){
  body.compact-site header.st4r-masthead .masthead-wordmark{display:none!important}
  body.compact-site header.st4r-masthead .masthead-brand{max-width:48px!important;flex:0 0 48px!important}
  body.compact-site header.st4r-masthead .masthead-live span{display:none!important}
  body.compact-site #daily .st4r60-left h2{font-size:36px!important}
  body.compact-site #daily .st4r60-brand{min-height:285px!important}
  body.compact-site #daily .st4r60-wheel-stage{--st4r-wheel-size:min(72vw,245px)}
  body.compact-site #daily .st4r60-stats{grid-template-columns:1fr!important}
}

@media (max-width:1099px) and (orientation:landscape) and (max-height:620px){
  body.compact-site #daily .st4r60-brand{min-height:300px!important}
  body.compact-site #daily .st4r60-wheel-stage{--st4r-wheel-size:min(48vh,280px)}
}

@media (prefers-reduced-motion:reduce){
  body.compact-site #daily .st4r75-ring-runner{animation:none!important}
}