/* A separate composition for phones. Desktop rules and assets remain unchanged. */
@media (max-width: 700px) {
  body { background: #081f4a; }
  .scene.scene { height: auto !important; min-height: 0 !important; aspect-ratio: auto; margin: 0; overflow: clip; background: #081f4a; }
  .scene > :not(.mobile-view), .site-footer > :not(.mobile-view) { display: none !important; }
  .scene::after { content: none; }
  .mobile-view[hidden] { display: block; }
  .mobile-view { position: relative; width: 100%; max-width: 520px; margin: 0 auto; color: #fff3d8; }
  .mobile-view a { -webkit-tap-highlight-color: #ffcf6440; touch-action: manipulation; }
  .mobile-view a:focus-visible { outline: 3px solid #77ddff; outline-offset: 4px; }
  .mobile-view img { display: block; }
  .mobile-view picture { display: block; }
  .mobile-view picture > img { width: 100%; height: auto; }
  .mobile-chapter { padding: 36px 16px 34px; }
  .mobile-view .mobile-heading { position: relative; width: 100%; margin: 0 auto; left: auto; top: auto; transform: none; }
  .mobile-intro { margin: 22px 0 24px; font: 700 19px/1.3 'Barlow Condensed', sans-serif; text-align: center; }
  .mobile-view .mobile-action { position: relative; left: auto; top: auto; transform: none; width: 100%; margin: 18px auto 0; font: 900 clamp(23px, 6.7vw, 32px)/1 'Barlow Condensed', sans-serif; }
  .mobile-view .mobile-action > span { gap: .45em; inset: 10% 13%; }
  .mobile-action:active { filter: brightness(1.12); }

  /* Exact desktop foreground/UI assets over one continuous portrait scene. */
  .scene.scene--hero { background: #238af1; }
  .mobile-hero { height: max(100svh, clamp(800px, 210vw, 1100px)); isolation: isolate; }
  .mobile-scene-backdrop { position: absolute; inset: 0; z-index: -2; }
  .mobile-scene-backdrop > img { width: 100%; height: 100% !important; object-fit: cover; }
  .mobile-login { position: absolute; z-index: 20; top: 14px; right: 16px; display: block; width: 124px; padding: 0; }
  .mobile-login img { display: block; width: 100%; height: auto; transform: scale(1); transform-origin: center; transition: transform .18s ease, filter .18s ease; }
  .mobile-login:hover img, .mobile-login:focus-visible img { transform: scale(1.08); filter: brightness(1.08); }
  .mobile-login:active img { transform: scale(1.04); }
  .mobile-login.is-wave-entered { animation: plaque-wave-enter .68s cubic-bezier(.18,.72,.24,1) both; }
  .mobile-hero-sprite { position: absolute; aspect-ratio: var(--sprite-ratio); height: auto; margin: 0; isolation: isolate; }
  .mobile-hero-sprite > img, .mobile-hero-sprite > picture { position: absolute; z-index: -1; width: var(--sprite-width); max-width: none; left: var(--sprite-left); top: var(--sprite-top); height: auto; pointer-events: none; }
  .mobile-hero-header { z-index: 12; width: 98%; left: 1%; top: 76px; }
  .mobile-hero-girl { z-index: 4; width: 64%; left: 0; top: 26%; animation: mascot-float 7s ease-in-out infinite; }
  .mobile-hero-boy { z-index: 6; width: 84%; left: 3%; top: 39%; animation: mascot-float 8s ease-in-out infinite; }
  .mobile-hero-mascot { z-index: 5; width: 31%; right: 3%; top: 33%; animation: mascot-float 6s ease-in-out infinite; }
  .mobile-hero-trajectory { z-index: 3; width: 60%; left: 65%; top: 47%; transform: rotate(-50deg); transform-origin: 0 100%; animation: trajectory-glow 3.8s ease-in-out infinite; }
  .mobile-hero-grenade { z-index: 7; width: 25%; right: 2%; top: 27%; transform: translateX(-30%); animation: grenade-toss 3.2s ease-in-out infinite; }
  .mobile-hero-controls { position: absolute; z-index: 15; left: 4%; bottom: 104px; width: 92%; container-type: inline-size; }
  .mobile-hero-cta { display: block; position: relative; width: 102%; left: -1%; }
  .mobile-hero-cta > .hero-play-layer { display: block; width: 100%; height: auto; pointer-events: none; }
  .mobile-hero-cta:active { filter: brightness(1.1); }
  /* Seis plaquinhas compactas: três por fileira, sem reduzir a área de toque. */
  .mobile-wood-nav { aspect-ratio:auto; height:clamp(118px,34cqw,142px); position: relative; width: calc(100% - 20px); margin: 28px auto 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 6px 4%; }
  .mobile-wood-nav > *.is-wave-entered { animation:plaque-wave-enter .68s cubic-bezier(.18,.72,.24,1) both; }
  .mobile-wood-nav > :nth-child(1).is-wave-entered { animation-delay:0s; }
  .mobile-wood-nav > :nth-child(2).is-wave-entered { animation-delay:.08s; }
  .mobile-wood-nav > :nth-child(3).is-wave-entered { animation-delay:.16s; }
  .mobile-wood-nav > :nth-child(4).is-wave-entered { animation-delay:.24s; }
  .mobile-wood-nav > :nth-child(5).is-wave-entered { animation-delay:.32s; }
  .mobile-wood-nav > :nth-child(6).is-wave-entered { animation-delay:.4s; }
  .mobile-wood-nav a.mobile-nav-item { position:relative; display:block; min-width:0; min-height:44px; border-radius:0; background:transparent !important; transform-origin:center; transition:transform .2s ease,filter .2s ease; }
  .mobile-nav-item > img { position:absolute; top:50%; left:50%; display:block; width:100%; height:auto; transform:translate(-50%,-50%) scale(1.1); pointer-events:none; }
  .mobile-wood-nav a.mobile-nav-item:hover, .mobile-wood-nav a.mobile-nav-item:focus-visible { z-index:5; background-color:transparent !important; filter:brightness(1.08); transform:scale(1.08); }
  .mobile-wood-nav a.mobile-nav-item:active { transform:scale(1.04); }
  .mobile-platform-plaque { position:relative; display:block; min-width:0; min-height:44px; padding:0; border:0; background:transparent !important; box-shadow:none !important; color:inherit; font:inherit; cursor:pointer; appearance:none; transition:transform .18s ease; }
  .mobile-platform-plaque img { position:absolute; top:calc(50% - 2px); left:50%; display:block; width:100%; height:auto; transform:translate(-50%,-50%) scale(1.1); transform-origin:center; pointer-events:none; transition:transform .18s ease,filter .18s ease; }
  .mobile-platform-plaque:hover, .mobile-platform-plaque:active { background:transparent !important; box-shadow:none !important; filter:none !important; }
  .mobile-platform-plaque:hover img { transform:translate(-50%,-50%) scale(1.15); filter:brightness(1.08); }
  .mobile-platform-plaque:active img { transform:translate(-50%,-50%) scale(1.12); }
  .mobile-platform-plaque:focus-visible { outline:3px solid #ffe27a; outline-offset:-4px; border-radius:12px; }
  @media (prefers-reduced-motion: reduce) { .mobile-wood-nav > *, .mobile-platform-plaque, .mobile-platform-plaque img, .mobile-login, .mobile-login img { animation:none; transition:none; } }
  @media (prefers-reduced-motion: reduce) {
    .mobile-hero-sprite { animation: none; }
  }

  /* Full painted chapter scenes with the approved desktop UI in separate layers. */
  .mobile-chapter { isolation:isolate; padding:28px 12px 30px; }
  .mobile-intro { color:#081d42; text-shadow:0 1px 2px #fff9,0 0 5px #fff; margin:18px 0 24px; }
  .mobile-chapter .mobile-heading { width:98%; }
  .mobile-book { padding:0; aspect-ratio:763/2061; color:#102849; isolation:isolate; }
  .mobile-book .mobile-heading { position:absolute; width:98%; top:3%; left:1%; }
  .mobile-book .mobile-intro { position:absolute; top:13%; left:8%; width:84%; margin:0; }
  .mobile-features { position:absolute; top:23%; left:6%; width:88%; height:60%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); column-gap:6%; row-gap:2%; padding:0; margin:0; list-style:none; }
  .mobile-feature { display:flex; flex-direction:column; align-items:center; min-width:0; text-align:center; }
  .mobile-feature > img { width:100%; height:58%; object-fit:contain; }
  .mobile-feature-plaque { position:relative; width:112%; aspect-ratio:2/1; }
  .mobile-feature-plaque > picture { position:absolute; inset:0; }
  .mobile-feature-plaque > picture > img { height:100%; object-fit:contain; }
  .mobile-feature h3 { position:absolute; top:21%; left:12%; width:76%; height:30%; display:flex; align-items:center; justify-content:center; margin:0; color:#ffe895; text-shadow:0 1px 2px #001438; font:900 clamp(16px,4.25vw,21px)/1 'Barlow Condensed',sans-serif; }
  .mobile-feature p { position:absolute; top:52%; left:12%; width:76%; height:37%; display:flex; align-items:center; justify-content:center; margin:0; font:700 clamp(13px,3.7vw,18px)/1.08 'Barlow Condensed',sans-serif; }

  .mobile-pass-board { position:relative; aspect-ratio:2/3; margin-top:12px; }
  .mobile-board-art { width:100%; }
  .mobile-pass-badge { position:absolute; width:16%; top:16%; z-index:2; }
  .mobile-pass-badge--free { left:21%; }
  .mobile-pass-badge--premium { left:63%; }
  .mobile-trail { position:absolute; inset:0; margin:0; padding:0; list-style:none; }
  .mobile-trail li { position:absolute; top:var(--level-y); left:29%; transform:translate(-50%,-50%); display:grid; place-items:center; width:clamp(34px,10vw,45px); aspect-ratio:1; border:3px solid #ffd467; border-radius:50%; background:linear-gradient(#2065ab,#092951); box-shadow:0 0 0 2px #926418,0 2px 6px #0008; color:#fff3dc; font:900 clamp(20px,6vw,27px)/1 'Barlow Condensed',sans-serif; }
  .mobile-trail--premium li { left:71%; background:linear-gradient(#e25821,#7e1414); }
  .mobile-pass-summary-art { position:relative; width:100%; margin:8px auto 18px; }

  .mobile-modes-scene { padding:230px 0 0; aspect-ratio:auto; background:url(assets/mobile-v3/world-portrait.webp) center/cover; }
  .mobile-modes-scene::before { content:""; display:block; aspect-ratio:1/3; }
  .mobile-modes-scene > .mobile-scene-backdrop { top:230px; mask-image:linear-gradient(to bottom,transparent,#000 90px); }
  .mobile-modes-scene .mobile-heading { position:absolute; top:24px; left:1%; width:98%; }
  .mobile-modes-scene .mobile-intro { position:absolute; top:166px; left:5%; width:90%; margin:0; }
  .mobile-modes { position:absolute; inset:230px 0 0; }
  .mobile-mode { display:block; position:absolute; left:10%; width:80%; text-align:center; text-decoration:none; color:#ffe49a; }
  .mobile-mode--1 { top:23%; }
  .mobile-mode--2 { top:51%; }
  .mobile-mode--3 { top:76%; }
  .mobile-mode--3 h3 { top:26%; }
  .mobile-mode.mobile-mode--3 > span { top:58%; }
  .mobile-mode h3 { position:absolute; top:28%; left:10%; width:80%; height:32%; margin:0; display:flex; align-items:center; justify-content:center; text-transform:uppercase; text-shadow:0 2px 1px #08203e; font:900 clamp(21px,6vw,30px)/1 'Barlow Condensed',sans-serif; }
  .mobile-mode > span { position:absolute; top:63%; left:12%; width:76%; height:24%; display:flex; align-items:center; justify-content:center; color:#271803; font:700 clamp(19px,5.2vw,25px)/1 'Barlow Condensed',sans-serif; }
  .mobile-view.mobile-modes-scene .mobile-action { position:absolute; width:90%; left:5%; bottom:24px; margin:0; }

  .mobile-arsenal-stage { position:relative; aspect-ratio:1122/1402; margin:8px 0 46px; }
  .mobile-arsenal-art { width:100%; }
  .mobile-weapon { position:absolute; z-index:2; top:44%; left:1%; width:48%; aspect-ratio:1.9/1; transform:translateY(-30%); text-align:center; text-decoration:none; }
  .mobile-weapon > picture { position:absolute; inset:0; z-index:-1; }
  .mobile-weapon > picture > img { height:100%; object-fit:fill; }
  .mobile-weapon--2,.mobile-weapon--4 { left:51%; }
  .mobile-weapon--3,.mobile-weapon--4 { top:94%; }
  .mobile-weapon small { position:absolute; top:30%; left:15%; width:70%; color:#ffd762; text-transform:uppercase; font:900 clamp(12px,3.1vw,16px)/1 'Barlow Condensed',sans-serif; }
  .mobile-weapon strong { position:absolute; top:44%; left:14%; width:72%; height:27%; display:flex; align-items:center; justify-content:center; color:#fff3d8; text-shadow:0 1px 2px #001438; text-transform:uppercase; font:900 clamp(14px,4vw,20px)/1 'Barlow Condensed',sans-serif; }

  .mobile-final { aspect-ratio:1/2; isolation:isolate; }
  .mobile-final-brand { position:absolute; top:15%; left:17%; width:66%; }
  .mobile-final .mobile-heading { position:absolute; top:32%; left:3%; width:94%; }
  .mobile-final .mobile-intro { position:absolute; top:47%; left:10%; width:80%; margin:0; font-size:clamp(17px,4.6vw,23px); }
  .mobile-view.mobile-final .mobile-action { position:absolute; width:90%; left:5%; top:61%; margin:0; }
  .mobile-benefits { position:absolute; top:79%; left:5%; width:90%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:12px; margin:0; padding:0; list-style:none; }
  .mobile-view .mobile-benefit { position:relative; width:100%; }

  .site-footer { height:auto!important; min-height:0; aspect-ratio:auto; padding:0; border:0; background:#081f4a; }
  .mobile-footer { padding:0; aspect-ratio:4/5; isolation:isolate; }
  .mobile-footer-frame { position:absolute; inset:0; z-index:-1; }
  .mobile-footer-frame > img { height:100%!important; object-fit:fill; }
  .mobile-view .mobile-footer-brand { position:absolute; top:22%; left:20%; width:60%; margin:0; }
  .mobile-footer-links { position:absolute; top:40%; left:12%; width:76%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 8px; }
  .mobile-footer-links a { display:flex; align-items:center; justify-content:center; min-height:38px; padding:4px 0; font:700 clamp(16px,4.2vw,20px)/1.1 'Barlow Condensed',sans-serif; text-decoration:none; }
  .mobile-online { position:absolute; top:76%; width:100%; display:flex; align-items:center; justify-content:center; gap:9px; margin:0; font:700 18px/1.2 'Barlow Condensed',sans-serif; }
  .mobile-online i { width:9px; height:9px; border-radius:50%; background:#7cf322; box-shadow:0 0 9px #7cf366; }
  .mobile-copyright { position:absolute; top:81%; width:100%; margin:0; text-align:center; color:#aec0da; font:13px/1.5 Arial,sans-serif; }
}