/* ADIMASTER 3.2.7 — MOBILE STABILITY PASS
   Loaded only for max-width:760px. Desktop CSS is untouched. */

html{
  overflow-x:hidden;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
body{
  overflow-x:hidden;
  overscroll-behavior-y:none;
  background:#05070b;
}
.view{
  min-height:calc(100svh - 86px)!important;
  overflow-x:clip!important;
}

/* Avoid mobile browser toolbar/viewport repaint loops from full-screen fixed layers. */
body::before,
body::after{
  display:none!important;
}
[data-view="music"]::before,
[data-view="music"]::after,
[data-view="originals"]::before,
[data-view="originals"]::after,
[data-view="world"]::before,
[data-view="travel"]::before,
[data-view="gear"]::before,
[data-view="gear"]::after,
[data-view="artist"]::before,
[data-view="artist"]::after{
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:auto!important;
  left:0!important;
  height:100svh!important;
  min-height:640px!important;
  transform:none!important;
  will-change:auto!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}

/* Keep route wallpaper visible through the hero, then fall naturally into the route background. */
[data-view="music"],
[data-view="originals"],
[data-view="world"],
[data-view="travel"],
[data-view="gear"],
[data-view="artist"]{
  background-color:#03070c!important;
}
[data-view="originals"]{background-color:#050403!important}
[data-view="world"]{background-color:#061006!important}
[data-view="artist"]{background-color:#02060b!important}

/* Sticky header stays visually identical but uses a stable opaque layer on phone GPUs. */
header{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:rgba(4,7,13,.97)!important;
  transform:translateZ(0);
  will-change:auto!important;
}
.mobileDrawer,
.searchOverlay,
.player{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.mobileDrawer{height:100svh!important}

/* Home: preserve the scene, remove the two costly giant blur surfaces. */
.homeTechAura{
  filter:none!important;
  opacity:.08!important;
  will-change:auto!important;
}
.homeTechAuraB{opacity:.055!important}
.homeTechParticles{opacity:.42!important}
.homeTechGrid{will-change:auto!important}

/* Music: static wallpaper layer, no expensive mobile overlay grid. */
[data-view="music"]::after{display:none!important}
[data-view="music"]::before{
  background-image:
    linear-gradient(180deg,rgba(2,5,10,.68) 0%,rgba(2,5,10,.22) 43%,rgba(2,5,10,.87) 100%),
    linear-gradient(90deg,rgba(2,5,10,.72),rgba(2,5,10,.10) 76%),
    url("../../music-sound-lab-wide-mobile-v2.webp")!important;
  background-position:center top!important;
  background-size:cover!important;
}
[data-view="music"] .musicMetalTitle{
  width:min(96vw,560px)!important;
}

/* Originals: same artwork, no fixed/parallax layer. */
[data-view="originals"]::after{display:none!important}
[data-view="originals"]::before{
  background-size:cover!important;
  background-position:center top!important;
}
.memoryOrbitStage{
  right:-3%!important;
  width:79%!important;
  transform:scale(.80)!important;
  transform-origin:right top!important;
  will-change:auto!important;
}
.memoryOrbitCard,
.memoryCardFace{
  will-change:auto!important;
}

/* Travel: wallpaper remains, but the portal layer is no longer fixed to the visual viewport. */
[data-view="travel"] .travelPortalFx{
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:auto!important;
  left:0!important;
  height:100svh!important;
  min-height:640px!important;
  transform:none!important;
  will-change:auto!important;
}
.travelPortalFx .portalHalo,
.travelPortalFx .portalArc{
  animation-duration:32s!important;
  filter:none!important;
}
.travelOceanCanvas{display:none!important}
[data-view="travel"] .pageHero{
  min-height:clamp(560px,148vw,640px)!important;
  padding-left:18px!important;
  padding-right:18px!important;
}
[data-view="travel"] .travelTitle{
  font-size:clamp(58px,20vw,92px)!important;
  max-width:100%!important;
}
[data-view="travel"] .travelHero{
  min-height:clamp(420px,122vw,500px)!important;
}

/* Gear: retain exact desktop assets; phone gets stable sizes and static live assembly. */
body[data-route="gear"] [data-view="gear"]{padding-top:8px!important}
[data-view="gear"]::after{display:none!important}
[data-view="gear"] .gearIntro{
  min-height:clamp(760px,222vw,900px)!important;
  padding:54px 18px 92px!important;
}
.gearHeroCopy>.kicker{
  max-width:92vw!important;
  line-height:1.45!important;
}
.gearMechLetter{
  font-size:clamp(46px,15.2vw,68px)!important;
}
.gearForgeStage{
  top:clamp(285px,82vw,318px)!important;
  width:min(116%,500px)!important;
  height:clamp(470px,143vw,565px)!important;
  transform:translateX(-50%)!important;
  will-change:auto!important;
}
.forgeBackHalo{
  width:clamp(310px,100vw,410px)!important;
  height:clamp(310px,100vw,410px)!important;
}
.forgeCore{
  width:clamp(218px,72vw,292px)!important;
  height:clamp(244px,78vw,318px)!important;
}
.forgeIris{
  width:clamp(192px,63vw,252px)!important;
  height:clamp(192px,63vw,252px)!important;
}
.forgeCamera{
  width:clamp(214px,70vw,282px)!important;
  height:clamp(202px,66vw,265px)!important;
}
.forgePod{
  width:clamp(82px,26vw,104px)!important;
  height:clamp(102px,32vw,130px)!important;
  margin-top:clamp(-65px,-16vw,-51px)!important;
  margin-left:clamp(-52px,-13vw,-41px)!important;
  will-change:auto!important;
  filter:none!important;
}
.gearSection{
  content-visibility:visible!important;
  contain:none!important;
}
.gearLetterPlate{
  will-change:auto!important;
}

/* Artist: stable phone viewport and a less oversized scene container. */
[data-view="artist"]::after{display:none!important}
.artistHero{
  min-height:auto!important;
  padding:48px 0 18px!important;
}
.artistTitle .artistMain,
.artistTitle .artistNanoText{
  font-size:clamp(58px,18.5vw,88px)!important;
}
.artistDomains{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.artistStage{
  height:clamp(510px,150vw,650px)!important;
  min-height:clamp(510px,150vw,650px)!important;
  margin:10px -8px 0!important;
  border-radius:22px!important;
  contain:layout paint!important;
}
.adiCoreCanvas16{
  touch-action:none!important;
  contain:strict!important;
}
.artistIntelligence{padding-top:6px!important}

/* Consistent responsive statistics instead of forcing three tiny columns. */
[data-view="travel"] .routeStats,
[data-view="gear"] .routeStats{
  grid-template-columns:repeat(auto-fit,minmax(105px,1fr))!important;
}
[data-view="travel"] .routeStats span,
[data-view="gear"] .routeStats span{
  font-size:8px!important;
  line-height:1.25!important;
}

/* Gear sections are kept live to avoid section-level pop-in; media grids keep
   their existing off-screen containment for scroll performance. */
.gearSection{content-visibility:visible!important}

/* Mobile cards never need desktop hover compositing layers. */
.card,
.gearCard,
.latestMini,
.ttCard,
.portalCard,
.artistDomain,
.statCard{
  transform:none;
  will-change:auto!important;
}

/* Narrow phones */
@media(max-width:390px){
  .logoStage,.logoStage img{width:50px!important;height:50px!important}
  .nav{height:68px!important;min-height:68px!important}
  #openSearch,.mobileMenuBtn{width:44px!important;height:44px!important}
  .brandWords{font-size:12px!important;letter-spacing:.07em!important}
  .brandWords small{display:none!important}
  [data-view="world"] .worldChampionTitle{font-size:clamp(48px,14.5vw,66px)!important}
  [data-view="originals"] .originalTitle{font-size:clamp(47px,14.2vw,66px)!important}
  [data-view="gear"] .gearHeroCopy p{max-width:100%!important}
  .artistDomains{gap:5px!important}
  .artistDomain{padding:11px 7px!important;min-height:84px!important}
  .artistDomain strong{font-size:6.5px!important}
}

/* Route wallpaper height follows the mobile hero instead of the changing browser viewport. */
[data-view="gear"]::before{height:clamp(760px,222vw,900px)!important}
[data-view="travel"]::before{height:clamp(560px,148vw,640px)!important}
[data-view="world"]::before{height:max(640px,100svh)!important}
[data-view="originals"]::before{height:max(640px,100svh)!important}
[data-view="music"]::before{height:max(640px,100svh)!important}

/* Phone-resolution artwork: 1080x1920 is enough for the rendered mobile viewport
   and cuts decoded GPU memory to one quarter of the 4K portrait sources. */
[data-view="music"]::before{
  background-image:
    linear-gradient(180deg,rgba(2,5,10,.68) 0%,rgba(2,5,10,.22) 43%,rgba(2,5,10,.87) 100%),
    linear-gradient(90deg,rgba(2,5,10,.72),rgba(2,5,10,.10) 76%),
    url("../../music-sound-lab-wide-mobile-1080.webp")!important;
}
[data-view="originals"]::before{
  background-image:
    linear-gradient(180deg,rgba(4,3,3,.29) 0%,rgba(4,3,3,.25) 37%,rgba(4,3,3,.92) 71%),
    linear-gradient(90deg,rgba(4,3,3,.72),rgba(4,3,3,.1)),
    url("../../memory-core-v3-mobile-1080.webp")!important;
}
[data-view="world"]::before{
  background-image:
    linear-gradient(90deg,rgba(5,2,3,.76),rgba(5,2,3,.28) 72%,rgba(5,2,3,.08)),
    linear-gradient(180deg,rgba(2,1,2,.03),rgba(14,2,3,.48)),
    url("../../world-champions-hightech-mobile-1080.webp")!important;
}
[data-view="travel"]::before{
  background-image:
    linear-gradient(180deg,rgba(1,5,9,.54) 0%,rgba(1,7,11,.15) 31%,rgba(1,6,9,.48) 69%,rgba(1,5,8,.91) 100%),
    linear-gradient(90deg,rgba(1,5,9,.74),rgba(1,6,10,.16) 78%),
    url("../../travel-quantum-portal-beach-mobile-1080.webp")!important;
  background-position:center top!important;
}
[data-view="gear"]::before{
  background-image:
    linear-gradient(180deg,rgba(1,4,7,.82) 0%,rgba(1,4,7,.22) 25%,rgba(1,4,7,.25) 63%,rgba(1,4,7,.96) 92%),
    url("../../gear-quantum-forge-mobile-2k.webp")!important;
}
body[data-route="artist"] .artistStage{
  background:url("../../artist-digital-creator-mobile-v2-1080.webp") center/cover no-repeat!important;
}

@media(max-width:360px){
  [data-view="world"] .worldChampionTitle{
    font-size:clamp(42px,13vw,52px)!important;
    letter-spacing:-.065em!important;
    max-width:100%!important;
  }
}
@media(max-width:360px){
  body[data-route="world"] [data-view="world"] .pageHero h1.worldChampionTitle{
    font-size:clamp(42px,13.5vw,48px)!important;
    letter-spacing:-.065em!important;
    max-width:calc(100vw - 36px)!important;
  }
}

/* ==========================================================
   ADIMASTER 3.2.8 — MOBILE SAFE COMPOSITOR
   Hard stability layer. Mobile only. Desktop is never matched.
   ========================================================== */
@media(max-width:760px){
  /* Mobile stability first: no CSS transition/animation may create a
     temporary compositor layer while the viewport or menu changes. */
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }

  html,body{
    background:#03070c!important;
    overflow-x:hidden!important;
  }

  /* Scroll-progress width updates create an extra fixed repaint on every
     touch-scroll frame. It is decorative, so it is removed on phones. */
  #wowTopProgress{display:none!important}

  /* Remove GPU blur surfaces globally on phone. All panels keep their
     existing solid/gradient backgrounds, but no live backdrop capture. */
  *,*::before,*::after{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  /* ROUTE BACKGROUNDS
     Do not keep wallpaper on negative-z pseudo elements. A normal background
     on the active route is far more stable when Chrome/Safari changes their
     browser chrome during touch scrolling. */
  body::before,body::after,
  [data-view="music"]::before,[data-view="music"]::after,
  [data-view="world"]::before,[data-view="world"]::after,
  [data-view="originals"]::before,[data-view="originals"]::after,
  [data-view="travel"]::before,[data-view="travel"]::after,
  [data-view="gear"]::before,[data-view="gear"]::after,
  [data-view="artist"]::before,[data-view="artist"]::after{
    content:none!important;
    display:none!important;
  }

  [data-view="music"]{
    background-color:#03070c!important;
    background-image:
      linear-gradient(180deg,rgba(2,5,10,.68) 0%,rgba(2,5,10,.22) 34%,rgba(2,5,10,.92) 72%,#03070c 100%),
      linear-gradient(90deg,rgba(2,5,10,.70),rgba(2,5,10,.08) 78%),
      url("../../music-sound-lab-wide-mobile-1080.webp")!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:100% auto!important;
  }
  [data-view="world"]{
    background-color:#061006!important;
    background-image:
      linear-gradient(180deg,rgba(4,2,3,.15) 0%,rgba(4,2,3,.18) 38%,rgba(4,7,5,.84) 72%,#061006 100%),
      linear-gradient(90deg,rgba(4,2,3,.66),rgba(4,2,3,.10) 76%),
      url("../../world-champions-hightech-mobile-1080.webp")!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:100% auto!important;
  }
  [data-view="originals"]{
    background-color:#050403!important;
    background-image:
      linear-gradient(180deg,rgba(4,3,3,.24) 0%,rgba(4,3,3,.24) 38%,rgba(4,3,3,.90) 72%,#050403 100%),
      linear-gradient(90deg,rgba(4,3,3,.66),rgba(4,3,3,.06) 78%),
      url("../../memory-core-v3-mobile-1080.webp")!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:100% auto!important;
  }
  [data-view="travel"]{
    background-color:#02080c!important;
    background-image:
      linear-gradient(180deg,rgba(1,5,9,.48) 0%,rgba(1,7,11,.10) 33%,rgba(1,6,9,.70) 70%,#02080c 100%),
      linear-gradient(90deg,rgba(1,5,9,.70),rgba(1,6,10,.08) 78%),
      url("../../travel-quantum-portal-beach-mobile-1080.webp")!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:100% auto!important;
  }
  [data-view="gear"]{
    background-color:#02080c!important;
    background-image:
      linear-gradient(180deg,rgba(1,4,7,.52) 0%,rgba(1,4,7,.10) 26%,rgba(1,4,7,.52) 64%,#02080c 100%),
      url("../../gear-quantum-forge-mobile-2k.webp")!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:100% auto!important;
  }
  [data-view="artist"]{
    background:#02060b!important;
  }

  /* HOME: keep its existing direct background, but remove the large live
     decoration layers that require full-page repaint while scrolling. */
  .homeTechAura,
  .homeTechBeam,
  .homeTechParticles{
    display:none!important;
  }
  .homeTechGrid{
    opacity:.07!important;
    filter:none!important;
    transform:none!important;
    top:320px!important;
    height:360px!important;
  }
  .homeTechScene::before{opacity:.10!important}

  /* MENU: closed drawer does not exist as a compositor surface. Opening it is
     an instant fixed panel; no translate animation, blur or full-page flash. */
  .mobileDrawer{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:none!important;
    opacity:1!important;
    height:100svh!important;
    background:#050a11!important;
    box-shadow:none!important;
    filter:none!important;
    contain:layout paint style!important;
  }
  .mobileDrawer.open{
    display:block!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    opacity:1!important;
  }

  header{
    transform:none!important;
    filter:none!important;
    will-change:auto!important;
    contain:layout style!important;
  }

  /* Hidden route content is genuinely absent from paint/compositing. */
  .view:not(.active){
    display:none!important;
    visibility:hidden!important;
  }
  .view.active{
    display:block!important;
    visibility:visible!important;
  }

  /* Avoid delayed off-screen paint/pop on touch scrolling. */
  .gearSection,
  .routeFeatured,
  .latestModule,
  .tiktokModule,
  .homeCurated{
    content-visibility:visible!important;
  }

  /* No hover compositor states on touchscreen. */
  .card:hover,.portalCard:hover,.latestMini:hover,.ttCard:hover,.gearCard:hover,
  .btn:hover,.socialBtn:hover,.iconBtn:hover,.ttArrow:hover{
    transform:none!important;
  }

  /* Artist scene stays isolated to its own rectangle. No full-page fixed
     layer is used, and the high-res wallpaper is only inside the stage. */
  body[data-route="artist"] .artistStage{
    background:url("../../artist-digital-creator-mobile-v2-1080.webp") center/cover no-repeat!important;
    overflow:hidden!important;
    contain:layout paint!important;
  }
  body[data-route="artist"] .artistStage::before,
  body[data-route="artist"] .artistStage::after{
    content:none!important;
    display:none!important;
  }

  /* Stable viewport units only. */
  .mobileDrawer,.searchOverlay{height:100svh!important}
}

/* ==========================================================
   ADIMASTER 3.2.9 — MOBILE TOUCH / PAINT CORRECTION
   Mobile only. Desktop rules/assets remain untouched.
   ========================================================== */
@media(max-width:760px){
  /* A layout containment boundary on the sticky header makes Chromium treat
     the header like normal scrolling content. Keep only style containment. */
  header{
    contain:style!important;
  }

  /* Keep the drawer allocated instead of creating/destroying a viewport-sized
     paint surface on every tap. It remains completely inert while closed. */
  .mobileDrawer{
    display:block!important;
    right:-100vw!important;
    visibility:hidden!important;
    pointer-events:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .mobileDrawer.open{
    right:0!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* The mobile home grid was wider than its 368px shell because the grid
     items kept their automatic min-content width. Stop the hidden horizontal
     overflow/repaint without changing desktop geometry. */
  [data-view="home"] .hero{
    grid-template-columns:minmax(0,1fr)!important;
  }
  [data-view="home"] .hero > *{
    min-width:0!important;
    max-width:100%!important;
  }
  [data-view="home"] .hero h1{
    max-width:100%!important;
    font-size:clamp(54px,16.6vw,80px)!important;
  }

  /* Do not stretch gradient layers over route elements that can be tens of
     thousands of pixels high. Only the hero/top area gets the wallpaper and
     its fade; below it the existing route background colour takes over. */
  [data-view="music"],
  [data-view="world"],
  [data-view="originals"],
  [data-view="travel"]{
    background-size:100% 920px,100% 920px,100% auto!important;
    background-attachment:scroll!important;
  }
  [data-view="gear"]{
    background-size:100% 980px,100% auto!important;
    background-attachment:scroll!important;
  }
}
@media(max-width:760px){
  html,body{
    overflow-x:clip!important;
  }
}


/* ADIMASTER 3.2.10 MOBILE ROUTE REPAIRS */
@media(max-width:760px){
  .memoryOrbitCard:not(.memoryCoverReady){opacity:0!important;pointer-events:none!important;filter:none!important}
  .memoryOrbitCard.memoryCoverReady{pointer-events:auto!important}

  [data-view="travel"] .pageHero{min-height:570px!important;padding:68px 18px 96px!important;justify-content:flex-start!important}
  [data-view="travel"]>.travelContent{margin-top:-82px!important;padding-bottom:76px!important}
  [data-view="travel"] .travelHero{min-height:430px!important;border-radius:24px!important}
  [data-view="travel"] .travelHero .portalCopy{left:20px!important;right:20px!important;bottom:22px!important;max-width:none!important}
  [data-view="travel"] .travelHero .portalCopy h3{font-size:clamp(35px,12vw,52px)!important;max-width:78%!important;margin:8px 0 10px!important}
  [data-view="travel"] .travelHero .portalCopy p{font-size:13px!important;line-height:1.42!important;max-width:76%!important}
  .destinationOnline{top:12px!important;right:12px!important}

  [data-view="gear"] .gearIntro{min-height:840px!important;padding:54px 18px 78px!important}
  .gearForgeStage{top:clamp(220px,64vw,255px)!important;width:min(114%,500px)!important;height:clamp(458px,134vw,530px)!important}
  .forgeBackHalo{top:53%!important;width:clamp(300px,96vw,390px)!important;height:clamp(300px,96vw,390px)!important}
  .forgeCore{top:54%!important;width:clamp(222px,72vw,286px)!important;height:clamp(244px,79vw,312px)!important}
  .forgeIris{width:clamp(194px,62vw,246px)!important;height:clamp(194px,62vw,246px)!important;animation:forgeSpinCenter 24s linear infinite!important}
  .forgeCameraShell{animation:forgeCameraFloat 6.6s ease-in-out infinite!important}
  .forgeCamera{width:clamp(222px,69vw,278px)!important;height:clamp(206px,64vw,258px)!important}
  .forgePods{transform-origin:50% 54%!important}
  .forgePod{top:54%!important}
  .forgePodRig{animation:forgePodSelf 7.6s ease-in-out infinite!important}

  body[data-route="artist"] .artistStage{height:clamp(530px,144vw,620px)!important;min-height:clamp(530px,144vw,620px)!important;margin:10px -6px 0!important}
  body[data-route="artist"] .artistTitle .artistMain{opacity:.08;transform:translate3d(0,1px,0) scale(.996);animation:none!important}
  body[data-route="artist"] .artistNanoText{opacity:0;clip-path:inset(0 100% 0 0);animation:none!important}
  body[data-route="artist"] .artistTitleSweep{opacity:0;animation:none!important}
  body[data-route="artist"] .view.active[data-view="artist"] .artistNanoText{animation:artistNanoBuild14 1.82s .06s cubic-bezier(.2,.72,.18,1) both!important}
  body[data-route="artist"] .view.active[data-view="artist"] .artistTitleSweep{animation:artistSweep14 1.72s .05s cubic-bezier(.22,.72,.18,1) both!important}
  body[data-route="artist"] .view.active[data-view="artist"] .artistTitle .artistMain{animation:artistMain14 .48s 1.34s cubic-bezier(.16,.78,.2,1) both!important}
  body[data-route="artist"] .view.active[data-view="artist"] .artistTitle::after{animation:artistLine14 .72s .26s cubic-bezier(.2,.75,.2,1) both!important}
  body[data-route="artist"] .adiCoreFallback16{left:48.8%!important;top:37.9%!important;width:min(69%,438px)!important}
}