/* Órbita · início do jogo compacto: celular (em pé ou deitado) e janelas baixas. Tudo visível, sem barra de rolagem.
 * Em telas grandes (computador) as setas ficam escondidas e o visual original continua. Carrega DEPOIS de landing.css. */
.ol-arrow{display:none}
.ol-nav,.ol-charnav{display:contents}
.ol-row{display:contents}

@media (max-width:900px),(max-height:660px){
 body.at-menu #menu.landing{overflow:hidden}
 #menu .landing-layout{height:100%;min-height:0;width:100%;max-width:none;margin:0;box-sizing:border-box;padding:8px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));gap:6px;align-items:stretch;align-content:stretch;
   grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"nav" "hero" "launch" "chips"}
 #menu .mission-intro{display:contents}
 #menu .mission-kicker,#menu #planetDescription,#menu .mission-divider,#menu .mission-features,#menu .launch-heading,#menu .launch-panel h2,#menu .name-hint,#menu .launch-note,#menu .planet-route,#menu .landing-bottom>span,#menu .hero-caption,#menu .landing-orbit{display:none!important}

 /* planetas: [‹] NOME [›] + pontinhos + situação */
 #menu .ol-nav{display:block;grid-area:nav;text-align:center;pointer-events:auto;z-index:3}
 #menu .ol-row{display:flex;align-items:center;justify-content:center;gap:8px}
 #menu .ol-row h1{flex:1;min-width:0;margin:0;font-size:clamp(34px,11.5vw,58px);letter-spacing:-2px;line-height:1.02;text-align:center}
 #menu .ol-row h1>span{font-size:8.5px;letter-spacing:2.6px;margin-top:6px;line-height:1.5;text-align:center}
 #menu .ol-arrow{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #a9dfe94a;background:#ffffff0f;color:#dff6fa;cursor:pointer;touch-action:manipulation;pointer-events:auto;transition:background .15s,transform .12s,border-color .15s}
 #menu .ol-arrow svg{width:22px;height:22px}#menu .ol-arrow:hover{background:#ffffff1f;border-color:#a9dfe9a0}#menu .ol-arrow:active{transform:scale(.9);background:#7ce0ea33}#menu .ol-arrow:focus-visible{outline:2px solid #a9f5ee;outline-offset:3px}
 #menu .ol-dots{display:flex;justify-content:center;gap:7px;margin:8px 0 2px}
 #menu .ol-dot{all:unset;box-sizing:border-box;cursor:pointer;width:7px;height:7px;border-radius:50%;background:#ffffff33;transition:transform .25s,background .25s,width .25s}#menu .ol-dot.lock{background:#ffffff1c}#menu .ol-dot.on{width:22px;border-radius:6px;background:#8ff0f0}
 #menu .planet-meta{display:flex;justify-content:center;gap:12px;font-size:9px;letter-spacing:1.6px;margin:4px 0 0;color:#8fb0c2}

 /* imagem central */
 #menu .hero-stage{grid-area:hero;position:relative!important;inset:auto!important;transform:none!important;height:auto!important;width:auto!important;min-height:0;align-self:stretch;justify-self:stretch;container-type:size;overflow:visible}
 #menu .landing-planet{width:min(96cqw,84cqh);top:46%}
 #menu #landingHero{height:88%}

 /* painel de lançamento compacto */
 #menu .launch-panel{grid-area:launch;padding:12px;margin:0;border-radius:16px;display:grid;gap:8px;min-width:0}
 #menu .ol-charnav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center}
 #menu .launch-panel .characters{margin:0;display:block}
 #menu .launch-panel .character:not(.selected){display:none}
 #menu .launch-panel .character.selected{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;width:100%;padding:6px 12px;min-height:0}
 #menu .launch-panel .character img{grid-row:1/3;height:64px;width:auto;margin:0;padding:0!important}
 #menu .launch-panel .character strong{font-size:16px;max-width:none;margin:0;align-self:end}
 #menu .launch-panel .character>span:last-child{font-size:10px;margin:0;align-self:start}
 #menu .launch-panel .check{display:none}
 #menu .name-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 #menu .name-field{margin:0}#menu .name-field input{padding-top:10px;padding-bottom:10px}
 #menu .launch-assist{padding:0;margin:0;gap:10px}#menu .launch-assist small{display:none}#menu .launch-assist strong{font-size:11.5px}
 #menu #playButton{margin:0;padding:15px 16px;font-size:13px}
 #menu #returnCurrentPlanet{margin:0}

 /* rodapé: "Como jogar" à esquerda, música à direita */
 #menu .landing-bottom{grid-area:chips;position:static;justify-self:end;padding:0;border:0;background:none}
 #menu #controlsButton{grid-area:chips;justify-self:start;margin:0;padding:6px 0;border:0;font-size:11px}
 #menu #menuSoundButton{font-size:11px}
}

/* muito baixo (celular pequeno em pé / janela curta): sem a linha da mira e com cartões menores */
@media (max-width:900px) and (max-height:720px),(max-height:600px){
 #menu .launch-assist{display:none!important}
 #menu .ol-row h1{font-size:clamp(30px,9.5vw,46px)}
 #menu .launch-panel .character img{height:52px}
 #menu .ol-arrow{width:40px;height:40px}#menu .ol-charnav{grid-template-columns:40px minmax(0,1fr) 40px}
}

/* celular deitado: nome à esquerda, imagem no centro, painel à direita */
@media (max-height:520px) and (orientation:landscape){
 #menu .landing-layout{padding:6px max(14px,env(safe-area-inset-right)) 6px max(14px,env(safe-area-inset-left));gap:6px 14px;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(250px,.95fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"nav hero launch" "chips hero snd";align-items:center}
 #menu .ol-nav{align-self:center}
 #menu .ol-row h1{font-size:clamp(26px,4.9vw,44px);letter-spacing:-1.5px;text-align:left}#menu .ol-row h1>span{text-align:left}
 #menu .ol-arrow{width:38px;height:38px}
 #menu .launch-panel{align-self:center;gap:6px;padding:10px}
 #menu .launch-panel .character img{height:46px}
 #menu .ol-charnav{grid-template-columns:36px minmax(0,1fr) 36px;gap:6px}
 #menu #playButton{padding:12px 14px}
 #menu .landing-bottom{grid-area:snd;justify-self:end}#menu #controlsButton{align-self:end;justify-self:start}
 #menu .hero-stage{align-self:stretch}
}

@media (prefers-reduced-motion:reduce){#menu .ol-arrow,#menu .ol-dot{transition:none}}