/* ELIE v5.1.22 — PHONE LANDSCAPE ONLY
   Desktop and tablet layouts are intentionally untouched. */

.mobile-fixed-logo{display:none}

html.phone-landscape{
  --phone-window-gap:5px;
  --phone-window-radius:14px;
  --phone-window-border:rgba(46,241,58,.52);
}

/* -------------------------------------------------------------------------- */
/* One stable animated ELIE logo on phone pages                               */
/* -------------------------------------------------------------------------- */
html.phone-landscape .mobile-fixed-logo{
  position:absolute;
  display:block;
  left:50%;
  top:5px;
  width:clamp(104px,16vw,132px);
  height:clamp(58px,15vh,78px);
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  transform:translateX(-50%);
  z-index:220;
  overflow:visible;
  pointer-events:auto;
}
html.phone-landscape .mobile-fixed-logo .elie-logo-assembly{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  transform-origin:50% 0!important;
}
html.phone-landscape .home-screen .mobile-home-logo,
html.phone-landscape .panel-screen .topbar .nav-logo-button,
html.phone-landscape .book-screen .topbar .nav-logo-button,
html.phone-landscape .story-screen .topbar .nav-logo-button,
html.phone-landscape .how-screen .topbar .nav-logo-button,
html.phone-landscape .score-screen .topbar .nav-logo-button,
html.phone-landscape .species-screen .topbar .nav-logo-button,
html.phone-landscape .objects-screen .topbar .nav-logo-button,
html.phone-landscape .bosses-screen .topbar .nav-logo-button,
html.phone-landscape .credits-screen .topbar .nav-logo-button{display:none!important}


/* Match the language landing logo to the same phone anchor without changing its layer offsets. */
html.phone-landscape .language-screen .language-logo.elie-logo-assembly{
  left:50%!important;
  right:auto!important;
  top:5px!important;
  width:clamp(104px,16vw,132px)!important;
  height:clamp(58px,15vh,78px)!important;
  transform:translateX(-50%)!important;
  transform-origin:50% 0!important;
}

/* The user explicitly requested no logo on the post-START world and level pages. */
html.phone-landscape .worlds-screen .v3-levelstart-logo,
html.phone-landscape .levels-screen .v3-levelstart-logo{display:none!important}

/* -------------------------------------------------------------------------- */
/* Home-only atmosphere and bottom controls                                   */
/* -------------------------------------------------------------------------- */
html.phone-landscape .home-screen .site-shell{
  background-position:center bottom,center center!important;
  background-size:100% auto,cover!important;
  background-repeat:no-repeat!important;
}
html.phone-landscape .screen:not(.home-screen) .home-anomaly-field,
html.phone-landscape .screen:not(.home-screen) .home-meteor-field,
html.phone-landscape .screen:not(.home-screen) .home-rare-field,
html.phone-landscape .screen:not(.home-screen) .home-transmission-field,
html.phone-landscape .screen:not(.home-screen) .home-transmission-card{display:none!important}

html.phone-landscape .home-screen .home-myra-launch{
  display:grid!important;
  left:max(8px,calc(var(--safe-left) + 6px))!important;
  right:auto!important;
  top:auto!important;
  bottom:max(20px,calc(var(--safe-bottom) + 20px))!important;
  z-index:62!important;
}
html.phone-landscape .home-screen .home-passport-launch{
  display:block!important;
  left:max(8px,calc(var(--safe-left) + 6px))!important;
  right:auto!important;
  top:auto!important;
  bottom:max(69px,calc(var(--safe-bottom) + 69px))!important;
  width:clamp(48px,8.5vw,62px)!important;
  transform:none!important;
  z-index:63!important;
}
html.phone-landscape .home-screen .home-passport-launch:hover,
html.phone-landscape .home-screen .home-passport-launch:focus-visible{transform:scale(1.025)!important}
html.phone-landscape .home-screen .home-banner-cinema{
  right:max(8px,calc(var(--safe-right) + 6px))!important;
  left:auto!important;
  top:auto!important;
  bottom:max(20px,calc(var(--safe-bottom) + 20px))!important;
  width:clamp(118px,20vw,166px)!important;
  max-width:23vw!important;
}

/* -------------------------------------------------------------------------- */
/* Shared passport geometry for every phone dialog                            */
/* -------------------------------------------------------------------------- */
html.phone-landscape .pilot-passport-overlay,
html.phone-landscape .myra-overlay,
html.phone-landscape .universe-modal-overlay,
html.phone-landscape .update-center-modal,
html.phone-landscape .upgrade-overlay,
html.phone-landscape .upgrade-detail-overlay,
html.phone-landscape .career-modal,
html.phone-landscape .player-stats-modal,
html.phone-landscape .species-detail,
html.phone-landscape .planet-detail-overlay,
html.phone-landscape .artwork-gallery-overlay,
html.phone-landscape .mobile-menu-overlay{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  padding:var(--phone-window-gap)!important;
  box-sizing:border-box!important;
  background:rgba(0,0,0,.92)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
  z-index:24000!important;
}
html.phone-landscape .pilot-passport-window,
html.phone-landscape .myra-window,
html.phone-landscape .universe-modal,
html.phone-landscape .update-center-window,
html.phone-landscape .evolution-lab.upgrade-window,
html.phone-landscape .upgrade-detail-window,
html.phone-landscape .career-window,
html.phone-landscape .player-stats-window,
html.phone-landscape .species-detail-card,
html.phone-landscape .v3-planet-detail-frame,
html.phone-landscape .artwork-gallery-stage,
html.phone-landscape .mobile-menu-panel{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  min-height:0!important;
  box-sizing:border-box!important;
  border:1px solid var(--phone-window-border)!important;
  border-radius:var(--phone-window-radius)!important;
  background:radial-gradient(circle at 28% 35%,rgba(22,103,35,.14),transparent 38%),linear-gradient(145deg,#010b03,#000)!important;
  overflow:hidden!important;
  transform:none!important;
}
html.phone-landscape .pilot-passport-frame,
html.phone-landscape .myra-frame,
html.phone-landscape .universe-modal-frame{
  inset:5px!important;
}
html.phone-landscape .pilot-passport-close,
html.phone-landscape .myra-close,
html.phone-landscape .universe-modal-close,
html.phone-landscape .update-center-close,
html.phone-landscape .upgrade-close,
html.phone-landscape .upgrade-detail-close,
html.phone-landscape .career-close,
html.phone-landscape .player-stats-close,
html.phone-landscape .close-btn,
html.phone-landscape .planet-detail-close,
html.phone-landscape .artwork-gallery-close,
html.phone-landscape .mobile-menu-close{
  position:absolute!important;
  right:7px!important;
  left:auto!important;
  top:7px!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  z-index:500!important;
}
html.phone-landscape [dir="rtl"] :is(.pilot-passport-close,.myra-close,.universe-modal-close){right:auto!important;left:7px!important}
html.phone-landscape.mobile-fullscreen-modal .site-branding{display:none!important}


/* No site ground or brand layers inside phone dialog surfaces. */
html.phone-landscape .species-detail::before,
html.phone-landscape .planet-detail-overlay::after,
html.phone-landscape .universe-modal-overlay::before,
html.phone-landscape .update-center-modal::before,
html.phone-landscape .myra-overlay::before,
html.phone-landscape .pilot-passport-overlay::before{display:none!important;content:none!important}
html.phone-landscape.mobile-fullscreen-modal .site-mark,
html.phone-landscape.mobile-fullscreen-modal .site-copyright,
html.phone-landscape.mobile-fullscreen-modal .site-copyright-new{display:none!important}

/* -------------------------------------------------------------------------- */
/* Evolution                                                                  */
/* -------------------------------------------------------------------------- */
html.phone-landscape .evolution-overlay.upgrade-overlay{background:#000!important}
html.phone-landscape .evolution-body{
  left:12px!important;
  right:12px!important;
  top:64px!important;
  bottom:10px!important;
  grid-template-columns:minmax(132px,22%) minmax(170px,30%) minmax(0,1fr)!important;
  gap:8px!important;
}
html.phone-landscape .evolution-categories{gap:5px!important}
html.phone-landscape .evolution-categories button{
  height:auto!important;
  min-height:calc((100% - 25px)/6)!important;
  padding:4px 9px!important;
}
html.phone-landscape .evolution-categories button span{
  font-size:clamp(9px,2.2vh,12px)!important;
  white-space:normal!important;
  line-height:1.1!important;
}
html.phone-landscape .evolution-upgrades{min-width:0!important}
html.phone-landscape .evolution-card-top{grid-template-columns:minmax(0,1fr) clamp(62px,9vw,82px)!important}
html.phone-landscape .evolution-info{grid-template-columns:clamp(44px,6vw,58px) minmax(0,1fr)!important;padding-inline:5px!important}
html.phone-landscape .evolution-branches{grid-template-columns:1fr 1fr clamp(50px,7vw,66px)!important;gap:4px!important}

/* -------------------------------------------------------------------------- */
/* Share Studio                                                               */
/* -------------------------------------------------------------------------- */
html.phone-landscape .share-modal-overlay{background:#000!important}
html.phone-landscape .share-studio-modal .universe-modal-status{display:none!important}
html.phone-landscape .share-studio-modal .universe-modal-header{top:10px!important;left:14px!important;right:52px!important;height:48px!important}
html.phone-landscape .share-studio-modal .universe-modal-header small{display:none!important}
html.phone-landscape .share-studio-modal .universe-modal-header h2{font-size:clamp(15px,4vh,21px)!important;margin:0 0 3px!important}
html.phone-landscape .share-studio-modal .universe-modal-header p{font-size:clamp(6px,1.55vh,8px)!important}
html.phone-landscape .share-studio-body{
  left:12px!important;
  right:12px!important;
  top:62px!important;
  bottom:10px!important;
  grid-template-columns:minmax(150px,25%) minmax(230px,1fr) minmax(126px,21%)!important;
  gap:9px!important;
}
html.phone-landscape .share-type-grid{gap:5px!important;align-content:stretch!important}
html.phone-landscape .share-type-grid button{
  height:auto!important;
  min-height:0!important;
  grid-template-columns:31px minmax(0,1fr)!important;
  padding:4px 6px!important;
  gap:7px!important;
  border-radius:8px!important;
}
html.phone-landscape .share-type-grid button img{width:29px!important;height:29px!important}
html.phone-landscape .share-type-grid button span{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  color:inherit!important;
  font-size:clamp(7px,1.75vh,9px)!important;
  line-height:1.08!important;
  white-space:normal!important;
  overflow:visible!important;
}
html.phone-landscape .share-preview-zone{
  position:relative!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:5px!important;
  min-width:0!important;
  overflow:visible!important;
}
html.phone-landscape .share-preview-toolbar{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  pointer-events:none!important;
  z-index:30!important;
}
html.phone-landscape .share-preview-toolbar strong{
  position:absolute!important;
  left:30px!important;
  right:30px!important;
  top:-1px!important;
  height:20px!important;
  display:block!important;
  text-align:center!important;
  font-size:clamp(7px,1.7vh,9px)!important;
}
html.phone-landscape .share-preview-toolbar button{
  position:absolute!important;
  top:50%!important;
  width:34px!important;
  height:34px!important;
  min-height:34px!important;
  border-radius:50%!important;
  transform:translateY(-50%)!important;
  pointer-events:auto!important;
  z-index:31!important;
}
html.phone-landscape .share-preview-toolbar [data-share-prev]{left:-5px!important}
html.phone-landscape .share-preview-toolbar [data-share-next]{right:-5px!important}
html.phone-landscape .share-canvas-shell{
  grid-row:1!important;
  align-self:center!important;
  justify-self:center!important;
  max-width:calc(100% - 40px)!important;
  max-height:calc(100% - 24px)!important;
  margin:22px auto 0!important;
  overflow:hidden!important;
}
html.phone-landscape .share-canvas-shell.ratio-square{width:min(100%,calc(100dvh - 112px))!important;height:auto!important}
html.phone-landscape .share-canvas-shell.ratio-story,
html.phone-landscape .share-canvas-shell.ratio-portrait{height:calc(100dvh - 130px)!important;width:auto!important}
html.phone-landscape .share-ratio-grid{grid-row:2!important;gap:4px!important}
html.phone-landscape .share-ratio-grid button{min-height:28px!important;font-size:6px!important}
html.phone-landscape .share-actions{gap:5px!important;justify-content:center!important}
html.phone-landscape .share-action-status{padding:7px!important}
html.phone-landscape .share-main-action,
html.phone-landscape .share-native-action{min-height:34px!important;font-size:7px!important}
html.phone-landscape .share-social-grid button{min-height:29px!important;font-size:6.5px!important}
html.phone-landscape .share-actions p{font-size:6px!important;line-height:1.2!important;min-height:20px!important}

/* -------------------------------------------------------------------------- */
/* Page-specific mobile surfaces                                              */
/* -------------------------------------------------------------------------- */
html.phone-landscape :is(.book-screen,.story-screen,.how-screen,.score-screen,.bosses-screen,.species-screen,.objects-screen,.planets-screen) .home-share-launch{display:none!important}

html.phone-landscape .book-screen .download-image{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  margin-inline:0!important;
}
html.phone-landscape .book-screen .book-copy{text-align:center!important}

html.phone-landscape .how-screen .site-shell,
html.phone-landscape .score-screen .site-shell,
html.phone-landscape .worlds-screen .site-shell,
html.phone-landscape .levels-screen .site-shell{background-image:none!important;background:#000!important}
html.phone-landscape .how-screen .scene-bg,
html.phone-landscape .score-screen .scene-bg,
html.phone-landscape .worlds-screen .scene-bg,
html.phone-landscape .levels-screen .scene-bg{display:none!important}
html.phone-landscape :is(.how-screen,.score-screen,.worlds-screen,.levels-screen) .site-branding{display:none!important}

html.phone-landscape .how-screen .content,
html.phone-landscape .score-screen .content{
  left:5px!important;
  right:5px!important;
  top:5px!important;
  bottom:5px!important;
  width:auto!important;
  height:auto!important;
  box-sizing:border-box!important;
  padding:58px 13px 12px!important;
  border:1px solid var(--phone-window-border)!important;
  border-radius:var(--phone-window-radius)!important;
  background:linear-gradient(145deg,#010b03,#000)!important;
  overflow:auto!important;
}
html.phone-landscape .how-screen .how-scroll-shell,
html.phone-landscape .how-screen .how-scroll-content{height:100%!important;max-height:none!important;overflow:auto!important}
html.phone-landscape .score-screen .score-wrap{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;overflow:auto!important}

/* Universe timeline is a true passport-sized full window. */
html.phone-landscape .timeline-modal .universe-modal-status{display:none!important}
html.phone-landscape .timeline-modal .universe-modal-header{top:10px!important;left:14px!important;right:52px!important;height:48px!important}
html.phone-landscape .timeline-modal .timeline-rail{top:62px!important;bottom:10px!important}

/* Update Center: full window, no logo, readable natural-height cards. */
html.phone-landscape .update-center-emblem{display:none!important}
html.phone-landscape .update-center-header{
  min-height:58px!important;
  padding:4px 48px 6px 2px!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;
}
html.phone-landscape .update-center-header>div:nth-child(2){grid-column:1!important;min-width:0!important}
html.phone-landscape .update-center-header h2{font-size:clamp(15px,4vh,22px)!important}
html.phone-landscape .update-center-header p{font-size:clamp(7px,1.65vh,9px)!important;line-height:1.24!important}
html.phone-landscape .update-center-window>footer{display:none!important}
html.phone-landscape .update-history-scroll{min-height:0!important;padding:3px 5px 6px!important}
html.phone-landscape .update-history-card{height:auto!important;min-height:max-content!important;overflow:visible!important}

/* Planet detail full window. */
html.phone-landscape .planet-detail-overlay{background:#000!important}
html.phone-landscape .v3-planet-detail-frame-image{display:none!important}
html.phone-landscape .v3-planet-detail-frame{padding:8px!important}
html.phone-landscape .v3-planet-facts{left:2%!important;top:11%!important;bottom:4%!important;width:28%!important}
html.phone-landscape .v3-planet-center{left:31%!important;right:38%!important;top:12%!important;bottom:5%!important}
html.phone-landscape .v3-planet-copy-panel{left:64%!important;right:2%!important;top:12%!important;bottom:5%!important}

/* Boss, Species and Objects: ground flush, exactly five cards in the viewport. */
html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .site-shell{
  background-image:url('../assets/images/Down.png'),url('../assets/images/SpaceBackground.png')!important;
  background-size:100% auto,cover!important;
  background-position:center bottom,center center!important;
  background-repeat:no-repeat!important;
}
html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .site-branding{display:none!important}
html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .species-wrap{inset:0!important}
html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .species-counter,
html.phone-landscape .bosses-screen .bosses-heading{top:14%!important;font-size:clamp(10px,2.5vh,13px)!important}
html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .species-viewport{
  left:46px!important;
  right:46px!important;
  top:23%!important;
  bottom:44px!important;
  width:auto!important;
  height:auto!important;
  overflow:hidden!important;
}
html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .species-track{
  height:100%!important;
  gap:8px!important;
  align-items:center!important;
}
html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .species-card{
  flex:0 0 calc((100vw - 132px)/5)!important;
  width:calc((100vw - 132px)/5)!important;
  max-width:none!important;
  height:min(100%,225px)!important;
  min-height:0!important;
}
html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .species-arrow{
  top:53%!important;
  width:38px!important;
  height:38px!important;
}
html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .species-arrow.prev{left:4px!important}
html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .species-arrow.next{right:4px!important}
html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .species-card-name{font-size:clamp(7px,1.65vh,9px)!important}

/* Archive detail windows also inherit the passport geometry. */
html.phone-landscape .species-detail-card{display:grid!important;grid-template-columns:42% minmax(0,1fr)!important;gap:10px!important;padding:8px!important}
html.phone-landscape .species-detail-card .detail-panel{min-height:0!important}

/* World and level selection: no logo / no ground / title higher and aligned right. */
html.phone-landscape .worlds-screen .v3-back-heading,
html.phone-landscape .levels-screen .v3-back-heading{
  left:10px!important;
  right:10px!important;
  top:7px!important;
  height:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
html.phone-landscape .worlds-screen .v3-back-heading h1,
html.phone-landscape .levels-screen .v3-back-heading h1{
  margin-left:auto!important;
  text-align:right!important;
  font-size:clamp(16px,4vh,22px)!important;
}
html.phone-landscape .worlds-screen .v3-world-carousel{top:50px!important}
html.phone-landscape .levels-screen .v3-level-grid{top:55px!important;bottom:8px!important}

/* MYRA becomes the same inset full-window system as Passport. */
html.phone-landscape .myra-overlay{padding:5px!important}
html.phone-landscape .myra-window{border-radius:var(--phone-window-radius)!important}
html.phone-landscape .myra-header{left:12px!important;right:48px!important;top:9px!important;height:46px!important}
html.phone-landscape .myra-body{left:10px!important;right:10px!important;top:61px!important;bottom:8px!important}
html.phone-landscape .myra-footer{display:none!important}

/* Hamburger menu: passport-size full window, no logo, Home first. */
html.phone-landscape .mobile-menu-overlay{padding:5px!important}
html.phone-landscape .mobile-menu-panel{padding:52px 12px 10px!important;gap:8px!important}
html.phone-landscape .mobile-menu-brand{display:none!important}
html.phone-landscape .mobile-menu-grid{height:100%!important;min-height:0!important;gap:8px!important}
html.phone-landscape .mobile-menu-column{gap:6px!important}
html.phone-landscape .mobile-menu-home{border-color:rgba(46,241,58,.72)!important;background:rgba(46,241,58,.1)!important}
html.phone-landscape .mobile-menu-status{display:none!important}

@media (max-height:390px){
  html.phone-landscape .mobile-fixed-logo{width:94px;height:54px}
  html.phone-landscape .share-studio-body{top:55px!important}
  html.phone-landscape .home-screen .home-passport-launch{bottom:max(64px,calc(var(--safe-bottom) + 64px))!important}
  html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .species-viewport{top:21%!important;bottom:35px!important}
}