/* Mobile geometry guard.  This file intentionally changes positioning only;
   the visual design, chapter animation, clouds and interactions stay in their
   existing mobile CSS/JS files. */
.artist.content-punch>.chapter-content{animation:none!important}

@media (hover:none), (pointer:coarse){
  :root{width:100%;max-width:100%;overflow-x:hidden}
  html,body{
    width:100%!important;max-width:100%!important;margin-inline:0!important;
    overflow-x:hidden!important;overscroll-behavior-x:none!important;
    touch-action:pan-y!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important
  }
  body{position:relative!important}
  main{
    display:block!important;position:relative!important;left:0!important;right:auto!important;
    width:100%!important;max-width:100%!important;margin:0!important;padding:0!important
  }
  .hero,main>section,footer{
    left:0!important;right:auto!important;width:100%!important;max-width:100%!important;
    margin-left:0!important;margin-right:0!important;box-sizing:border-box!important
  }
  main>section>.chapter-content{
    position:relative!important;left:0!important;right:auto!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin-left:auto!important;margin-right:auto!important;transform-origin:50% 50%!important
  }
  .release-copy,.section-title,.cards,.game-copy,.game-scene,.artist-copy,.artist-figure{
    position:relative;left:0!important;right:auto!important;max-width:100%!important;min-width:0!important
  }
  .artist-copy,.artist-copy .subscribe-links{overflow:visible!important}
  .artist-copy .subscribe-links{padding-bottom:8px!important}
  .hero>.logo,.hero>p,.hero-actions,.hero-subscribe{
    left:auto!important;right:auto!important;margin-left:auto!important;margin-right:auto!important
  }
  .game-section{left:0!important;margin-left:0!important;margin-right:0!important}
  main>section>.chapter-cloud-back{display:none!important}
}

/* Lightweight mobile cloud gate: two flat, square Minecraft-style banks.
   They follow the existing scroll progress and part horizontally.  The
   desktop keeps its richer cloud stack in cloud-desktop.css. */
@media (orientation:portrait) and (max-width:1024px){
  main>section>.cloud-gate{display:block!important}
  main>section>.cloud-gate .voxel-curtain.front,
  main>section>.cloud-gate .voxel-curtain.back,
  main>section>.cloud-gate .voxel-curtain.mid,
  main>section>.cloud-gate .voxel-curtain.far{display:none!important}
  main>section>.cloud-gate .voxel-curtain.near{
    display:block!important;position:absolute!important;inset:0!important;
    opacity:1!important;filter:none!important;background:none!important
  }
  main>section>.cloud-gate .voxel-curtain.near .voxel-panel{
    display:block!important;position:absolute!important;top:auto!important;bottom:2svh!important;
    width:80vw!important;height:24svh!important;min-height:105px!important;max-height:220px!important;
    border:0!important;border-radius:0!important;clip-path:none!important;box-shadow:none!important;
    background:
      linear-gradient(#f8fbfc 0 0) 0 48%/26% 34% no-repeat,
      linear-gradient(#fff 0 0) 17% 24%/31% 59% no-repeat,
      linear-gradient(#edf3f5 0 0) 43% 8%/29% 76% no-repeat,
      linear-gradient(#e8eff2 0 0) 67% 29%/23% 55% no-repeat,
      linear-gradient(#f9fcfd 0 0) 84% 48%/16% 35% no-repeat,
      linear-gradient(#c4d0d5 0 0) 8% 82%/84% 18% no-repeat!important;
    filter:drop-shadow(0 6px 0 #96a7af) drop-shadow(0 12px 0 #63768073)!important;
    transform-origin:50% 50%!important;will-change:transform,opacity
  }
  main>section[data-chapter]>.cloud-gate .voxel-curtain.near .voxel-panel{
    background-image:
      linear-gradient(#f8fbfc 0 0),linear-gradient(#fff 0 0),
      linear-gradient(#edf3f5 0 0),linear-gradient(#e8eff2 0 0),
      linear-gradient(#f9fcfd 0 0),linear-gradient(#c4d0d5 0 0)!important;
    background-position:0 48%,17% 24%,43% 8%,67% 29%,84% 48%,8% 82%!important;
    background-size:26% 34%,31% 59%,29% 76%,23% 55%,16% 35%,84% 18%!important;
    background-repeat:no-repeat!important
  }
  main>section>.cloud-gate .voxel-curtain.near .voxel-panel.left{
    top:auto!important;bottom:2svh!important;left:-3vw!important;right:auto!important;
    width:80vw!important;height:24svh!important;min-height:105px!important;max-height:220px!important;
    opacity:var(--cloud-near-opacity,0)!important;
    transform:translate3d(var(--cloud-mobile-left-x,0),0,0) scale(var(--cloud-near-scale,.98))!important
  }
  main>section>.cloud-gate .voxel-curtain.near .voxel-panel.right{
    display:block!important;top:auto!important;bottom:2svh!important;left:auto!important;right:-3vw!important;
    width:80vw!important;height:24svh!important;min-height:105px!important;max-height:220px!important;
    opacity:var(--cloud-near-opacity,0)!important;
    transform:translate3d(var(--cloud-mobile-right-x,0),0,0) scaleX(-1) scale(var(--cloud-near-scale,.98))!important
  }
  main>section[data-chapter]>.cloud-gate .voxel-curtain.near .voxel-panel.right{
    background-image:
      linear-gradient(#f8fbfc 0 0),linear-gradient(#fff 0 0),
      linear-gradient(#edf3f5 0 0),linear-gradient(#e8eff2 0 0),
      linear-gradient(#f9fcfd 0 0),linear-gradient(#c4d0d5 0 0)!important
  }
}

@media (orientation:portrait) and (max-width:1024px){
  .hero,main>section,footer{
    padding-left:max(16px,env(safe-area-inset-left))!important;
    padding-right:max(16px,env(safe-area-inset-right))!important
  }
  .release-copy,.game-copy,.artist-copy{text-align:left!important}
  .release .cover-wrap,.release-cover{width:100%!important;max-width:none!important}
  .release-copy .eyebrow,.game-copy .eyebrow,.artist-copy .eyebrow{text-align:left!important}
  .release-copy .lead,.game-copy>p,.artist-copy>p:not(.eyebrow):not(.subscribe-label){margin-left:0!important;margin-right:0!important}
  .release-copy .links{justify-content:flex-start!important;margin-left:0!important;margin-right:0!important}
  .clips .section-title,.clips .section-title>div:first-child{text-align:left!important}
  .clip-platform-switch{margin-left:0!important;margin-right:auto!important}
  .clips .cards{grid-template-columns:1fr!important;gap:12px!important}
  .clips .card{width:100%!important;min-height:0!important;height:auto!important;aspect-ratio:16/9!important}
  .artist-copy .subscribe-label{text-align:left!important}
  .artist-copy .subscribe-links{justify-content:flex-start!important}
  .artist.content-punch>.chapter-content,
  .artist.artist-cast-in .artist-copy,
  .artist.artist-cast-in .artist-figure::after,
  .artist.artist-cast-in .artist-figure .avatar,
  .artist.artist-cast-in .subscribe-links>a{animation:none!important}
  .artist .artist-copy,
  .artist .artist-figure .avatar,
  .artist .subscribe-links>a{
    opacity:1!important;translate:0!important;scale:1!important;rotate:0deg!important
  }
  main>section.artist.reveal>.chapter-content{
    transform:none!important;filter:none!important;opacity:1!important
  }
}

@media (orientation:landscape) and (hover:none),
       (orientation:landscape) and (pointer:coarse){
  .hero,main>section,footer{
    padding-left:max(24px,env(safe-area-inset-left))!important;
    padding-right:max(24px,env(safe-area-inset-right))!important
  }
  main>section>.chapter-content{width:min(100%,1180px)!important}
}

/* Phone and small-tablet landscape composition.  Width + short viewport is
   intentional: portrait and normal desktop layouts remain byte-for-byte the
   same, while rotating a phone swaps to these compact two-column chapters. */
@media (orientation:landscape) and (max-width:1024px) and (max-height:600px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}

  .hero{
    min-height:100svh!important;height:auto!important;
    padding:max(8px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left))!important;
    gap:5px!important;align-content:center!important
  }
  .hero>.logo{width:min(42vw,330px)!important;max-height:22svh!important}
  .hero>p{margin:0!important;font-size:8px!important;line-height:1.1!important}
  .hero-actions{width:min(42vw,330px)!important;max-width:330px!important;gap:6px!important;margin-top:2px!important}
  .hero-actions .button{min-height:36px!important;padding:6px 10px!important;font-size:10px!important}
  .hero-subscribe{margin-top:6px!important}
  .hero-subscribe .subscribe-label{margin-bottom:5px!important;font-size:7px!important}
  .hero-subscribe .subscribe-links{height:34px!important;gap:5px!important}
  .hero-subscribe .subscribe-links>a,.hero-subscribe .subscribe-links>span{width:34px!important;height:34px!important;flex:0 0 34px!important}
  .hero-subscribe .subscribe-links svg{width:18px!important;height:18px!important}
  .hero>.scroll{bottom:max(5px,env(safe-area-inset-bottom))!important;font-size:23px!important}

  main>section{
    width:100%!important;min-height:100svh!important;height:auto!important;
    padding:max(18px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left))!important;
    overflow:hidden!important
  }
  main>section>.chapter-content{
    width:100%!important;max-width:100%!important;min-height:calc(100svh - 36px)!important;
    margin:auto!important;align-content:center!important
  }

  .release>.chapter-content{
    display:grid!important;grid-template-columns:minmax(190px,30vw) minmax(0,1fr)!important;
    gap:clamp(22px,5vw,54px)!important;align-items:center!important
  }
  .release .cover-wrap{width:min(30vw,270px)!important;max-width:270px!important;margin:auto!important}
  .release-cover{display:block!important;width:100%!important;max-width:270px!important;border-radius:18px!important}
  .release-copy{text-align:left!important}
  .release-copy .eyebrow{margin:0 0 4px!important;font-size:8px!important}
  .release-copy h1{margin:0 0 8px!important;font-size:clamp(40px,6.2vw,58px)!important;line-height:.86!important}
  .release-copy .lead{margin:0!important;max-width:520px!important;font-size:12px!important;line-height:1.34!important}
  .release-copy .links{display:flex!important;flex-wrap:wrap!important;gap:5px!important;margin-top:11px!important}
  .release-copy .links a{min-height:34px!important;padding:6px 9px!important;font-size:8px!important;line-height:1.1!important}

  .clips>.chapter-content{display:grid!important;grid-template-rows:auto 1fr!important;gap:12px!important}
  .clips .section-title{display:flex!important;align-items:end!important;justify-content:space-between!important;gap:18px!important;text-align:left!important}
  .clips .section-title h2{margin:3px 0 0!important;font-size:clamp(38px,6vw,54px)!important;line-height:.88!important}
  .clip-platform-switch{display:flex!important;flex-wrap:nowrap!important;gap:5px!important}
  .clip-platform-switch button{min-height:34px!important;padding:5px 11px!important;font-size:8px!important}
  .clips .cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;margin-top:0!important}
  .clips .card{min-height:0!important;height:min(56svh,218px)!important;padding:14px!important}
  .clips .card span,.clips .card small{font-size:7px!important}
  .clips .card strong{margin:4px 0!important;font-size:clamp(22px,3.5vw,34px)!important;line-height:.92!important}

  .game-section{left:0!important;width:100%!important;min-height:100svh!important;margin-left:0!important;padding-block:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-bottom))!important}
  .game-section>.chapter-content{
    display:grid!important;grid-template-columns:minmax(270px,.8fr) minmax(0,1.2fr)!important;
    gap:clamp(20px,4vw,46px)!important;align-items:center!important
  }
  .game-copy{order:0!important;padding:0!important;text-align:left!important;overflow:visible!important}
  .game-copy .eyebrow{text-align:left!important;font-size:8px!important}
  .game-copy h2{margin:6px 0 9px!important;font-size:clamp(40px,5.7vw,54px)!important;line-height:.85!important}
  .game-copy>p{margin:0!important;font-size:12px!important;line-height:1.34!important}
  .game-copy .button.primary{width:100%!important;min-height:39px!important;margin-top:12px!important;padding:7px 12px!important;font-size:12px!important}
  .game-copy>small{margin-top:7px!important;font-size:8px!important;line-height:1.25!important}
  .game-scene{order:1!important;min-height:min(78svh,305px)!important;height:min(78svh,305px)!important;margin:0!important;overflow:hidden!important;contain:paint!important;clip-path:inset(0)!important}
  .game-room{inset:6% -5%!important;width:110%!important;height:88%!important}
  .game-vor{left:-6%!important;bottom:4%!important;height:70%!important}
  .game-monster{left:35%!important;bottom:20%!important;height:53%!important}
  .game-pirate{right:-8%!important;bottom:-2%!important;height:77%!important}

  .artist>.chapter-content{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(190px,31vw)!important;
    gap:clamp(24px,5vw,56px)!important;align-items:center!important
  }
  .artist-copy{padding:0!important;text-align:left!important;overflow:visible!important}
  .artist-copy .eyebrow{text-align:left!important;font-size:8px!important}
  .artist-copy h2{margin:4px 0 8px!important;font-size:clamp(40px,5.8vw,56px)!important;line-height:.88!important}
  .artist-copy>p:not(.eyebrow):not(.subscribe-label){margin:0!important;max-width:540px!important;font-size:12px!important;line-height:1.34!important}
  .artist-copy .subscribe-label{margin:12px 0 7px!important;font-size:8px!important}
  .artist-copy .subscribe-links{justify-content:flex-start!important;flex-wrap:nowrap!important;gap:7px!important}
  .artist-copy .subscribe-links>a,.artist-copy .subscribe-links>span{width:38px!important;height:38px!important;flex:0 0 38px!important}
  .artist-figure{width:min(31vw,270px)!important;max-width:270px!important;margin:auto!important}
  .artist-figure .avatar{width:100%!important;max-height:78svh!important;object-fit:contain!important}

  footer{
    min-height:0!important;padding:max(18px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left))!important;
    gap:18px!important
  }
  footer img{width:94px!important}.footer-icons{gap:7px!important}.footer-icon{width:34px!important;height:34px!important}

  .music-modal{width:min(760px,calc(100vw - 32px))!important;max-height:calc(100svh - 20px)!important;padding:14px!important;overflow:auto!important}
  .music-modal-cover{width:min(30vw,190px)!important;min-width:150px!important}
  .music-modal-content h2{font-size:clamp(34px,5.6vw,50px)!important}
}