/* ELIE v5.1.23 — PROFESSIONAL PHONE INTERFACE
   Activated only by the JS-managed html.phone-landscape class.
   Desktop and tablet layouts remain untouched. */

html.phone-landscape{
  --phone-edge:5px;
  --phone-radius:14px;
  --phone-border:rgba(46,241,58,.58);
  --phone-header:54px;
}

html.phone-landscape,
html.phone-landscape body{
  width:100%;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
html.phone-landscape .screen{
  left:var(--viewport-left,0px)!important;
  top:var(--viewport-top,0px)!important;
  width:var(--viewport-width,100vw)!important;
  height:var(--viewport-height,100dvh)!important;
  inset:auto!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
html.phone-landscape .design-stage,
html.phone-landscape .site-shell,
html.phone-landscape .game-wrap{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
}

/* One consistent ELIE logo on ordinary phone pages. */
html.phone-landscape .mobile-fixed-logo{
  position:absolute!important;
  display:block!important;
  left:50%!important;
  right:auto!important;
  top:5px!important;
  bottom:auto!important;
  width:clamp(96px,17vw,132px)!important;
  height:clamp(52px,15vh,76px)!important;
  transform:translateX(-50%)!important;
  z-index:900!important;
}
html.phone-landscape .mobile-fixed-logo .elie-logo-assembly{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
}
html.phone-landscape :is(.worlds-screen,.levels-screen,.game-screen,.boss-intro-screen,.boss-post-screen) .mobile-fixed-logo{
  display:none!important;
}

/* Home: ground flush, logo fixed, left controls and right banners on one baseline. */
html.phone-landscape .home-screen .site-shell{
  background-image:url('../assets/images/Down.png'),url('../assets/images/Back-Home.png'),url('../assets/images/SpaceBackground.png')!important;
  background-repeat:no-repeat!important;
  background-size:100% auto,cover,cover!important;
  background-position:center bottom,center center,center center!important;
}
html.phone-landscape .home-screen .home-myra-launch{
  display:grid!important;
  left:8px!important;
  right:auto!important;
  top:auto!important;
  bottom:20px!important;
  max-width:clamp(142px,27vw,182px)!important;
  z-index:82!important;
}
html.phone-landscape .home-screen .home-passport-launch{
  display:block!important;
  left:clamp(166px,29vw,196px)!important;
  right:auto!important;
  top:auto!important;
  bottom:20px!important;
  width:clamp(48px,8.2vw,62px)!important;
  transform:none!important;
  z-index:83!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{
  display:block!important;
  left:auto!important;
  right:8px!important;
  top:auto!important;
  bottom:20px!important;
  width:clamp(112px,21vw,164px)!important;
  max-width:24vw!important;
}
html.phone-landscape .screen:not(.home-screen) :is(
  .home-experience-layer,.home-anomaly-field,.home-ufo-field,.home-meteor-field,
  .home-rare-field,.home-transmission-field,.home-transmission-card,
  .home-anomaly-crystal,.home-crystal-shard
){display:none!important}
html.phone-landscape .screen:not(.home-screen) .home-share-launch{display:none!important}

/* -------------------------------------------------------------------------- */
/* Shared passport geometry for every phone dialog                            */
/* -------------------------------------------------------------------------- */
html.phone-landscape :is(
  .universe-modal-overlay,.update-center-modal,.upgrade-overlay,
  .upgrade-detail-overlay,.career-modal,.player-stats-modal,.species-detail,
  .planet-detail-overlay,.artwork-gallery-overlay,.mobile-menu-overlay
){
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  padding:var(--phone-edge)!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:rgba(0,0,0,.94)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
  z-index:24000!important;
}
html.phone-landscape :is(.pilot-passport-overlay,.myra-overlay){
  position:fixed!important;
  left:var(--viewport-left,0px)!important;
  top:var(--viewport-top,0px)!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--viewport-width,100vw)!important;
  height:var(--viewport-height,100dvh)!important;
  max-width:none!important;
  max-height:none!important;
  padding:max(var(--phone-edge),var(--safe-top)) max(var(--phone-edge),var(--safe-right)) max(var(--phone-edge),var(--safe-bottom)) max(var(--phone-edge),var(--safe-left))!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:rgba(0,0,0,.94)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
  z-index:24000!important;
}
html.phone-landscape :is(
  .pilot-passport-window,.myra-window,.universe-modal,.update-center-window,
  .evolution-lab.upgrade-window,.upgrade-detail-window,.career-window,
  .player-stats-window,.species-detail-card,.v3-planet-detail-frame,
  .artwork-gallery-stage,.mobile-menu-panel
){
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  border:1px solid var(--phone-border)!important;
  border-radius:var(--phone-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 :is(.pilot-passport-frame,.myra-frame,.universe-modal-frame){inset:5px!important}
html.phone-landscape :is(
  .pilot-passport-close,.myra-close,.universe-modal-close,.update-center-close,
  .upgrade-close,.upgrade-detail-close,.career-close,.player-stats-close,
  .close-btn,.planet-detail-close,.artwork-gallery-close,.mobile-menu-close
){
  position:absolute!important;
  display:grid!important;
  place-items:center!important;
  visibility:visible!important;
  opacity:1!important;
  right:8px!important;
  left:auto!important;
  top:8px!important;
  bottom:auto!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  overflow:visible!important;
  pointer-events:auto!important;
  z-index:9999!important;
}
html.phone-landscape :is(
  .pilot-passport-close,.myra-close,.universe-modal-close,.update-center-close,
  .upgrade-close,.upgrade-detail-close,.career-close,.player-stats-close,
  .close-btn,.planet-detail-close,.artwork-gallery-close
) img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
html.phone-landscape [dir="rtl"] :is(.pilot-passport-close,.myra-close,.universe-modal-close){right:auto!important;left:8px!important}
html.phone-landscape.mobile-fullscreen-modal :is(.site-branding,.site-mark,.site-copyright,.site-copyright-new,.mobile-fixed-logo){display:none!important}
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}

/* No site signature inside phone full-window pages. */
html.phone-landscape :is(
  .how-screen,.score-screen,.worlds-screen,.levels-screen
) :is(.site-branding,.site-mark,.site-copyright,.site-copyright-new){display:none!important}

/* Evolution: wider category labels, narrower far-right upgrade area. */
html.phone-landscape .evolution-body{
  left:12px!important;
  right:12px!important;
  top:62px!important;
  bottom:10px!important;
  grid-template-columns:minmax(158px,28%) minmax(158px,31%) minmax(0,1fr)!important;
  gap:8px!important;
  min-width:0!important;
}
html.phone-landscape .evolution-categories{min-width:0!important;gap:5px!important}
html.phone-landscape .evolution-categories button{min-width:0!important;padding:5px 10px!important}
html.phone-landscape .evolution-categories button span{white-space:normal!important;overflow:visible!important;line-height:1.12!important}
html.phone-landscape .evolution-upgrades{min-width:0!important;overflow:auto!important}
html.phone-landscape .evolution-card-top{grid-template-columns:minmax(0,1fr) clamp(56px,8vw,72px)!important}
html.phone-landscape .evolution-info{grid-template-columns:clamp(40px,5.6vw,52px) minmax(0,1fr)!important;padding-inline:5px!important}
html.phone-landscape .evolution-info strong{white-space:normal!important;overflow:visible!important;line-height:1.08!important}
html.phone-landscape .evolution-branches{grid-template-columns:1fr 1fr clamp(46px,6.5vw,58px)!important;gap:4px!important}

/* Share Studio: all labels visible, complete poster, arrows beside the artwork. */
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{
  left:14px!important;right:54px!important;top:8px!important;height:46px!important;overflow:hidden!important
}
html.phone-landscape .share-studio-modal .universe-modal-header small{display:none!important}
html.phone-landscape .share-studio-modal .universe-modal-header h2{margin:0 0 2px!important;font-size:clamp(14px,3.8vh,20px)!important}
html.phone-landscape .share-studio-modal .universe-modal-header p{font-size:clamp(6px,1.5vh,8px)!important;line-height:1.1!important}
html.phone-landscape .share-studio-body{
  left:10px!important;right:10px!important;top:58px!important;bottom:9px!important;
  display:grid!important;
  grid-template-columns:clamp(122px,23vw,154px) minmax(0,1fr) clamp(104px,19vw,132px)!important;
  gap:7px!important;
  min-width:0!important;min-height:0!important;overflow:hidden!important
}
html.phone-landscape .share-type-grid{display:grid!important;grid-template-rows:repeat(6,minmax(0,1fr))!important;gap:4px!important;min-width:0!important;min-height:0!important}
html.phone-landscape .share-type-grid button{
  width:100%!important;height:auto!important;min-height:0!important;min-width:0!important;
  grid-template-columns:28px minmax(0,1fr)!important;gap:6px!important;padding:3px 5px!important;
  border-radius:7px!important;overflow:visible!important;text-align:left!important
}
html.phone-landscape .share-type-grid button img{display:block!important;width:27px!important;height:27px!important;object-fit:contain!important}
html.phone-landscape .share-type-grid button span{
  display:block!important;visibility:visible!important;opacity:1!important;color:inherit!important;
  min-width:0!important;font-size:clamp(6.5px,1.65vh,8.5px)!important;line-height:1.08!important;
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important
}
html.phone-landscape .share-preview-zone{
  position:relative!important;display:grid!important;grid-template-rows:minmax(0,1fr) auto!important;
  gap:4px!important;min-width:0!important;min-height: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:40!important}
html.phone-landscape .share-preview-toolbar strong{
  position:absolute!important;left:38px!important;right:38px!important;top:0!important;height:18px!important;
  display:block!important;text-align:center!important;font-size:clamp(7px,1.65vh,9px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!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:41!important
}
html.phone-landscape .share-preview-toolbar [data-share-prev]{left:-3px!important}
html.phone-landscape .share-preview-toolbar [data-share-next]{right:-3px!important}
html.phone-landscape .share-canvas-shell{
  grid-row:1!important;align-self:center!important;justify-self:center!important;
  max-width:calc(100% - 42px)!important;max-height:calc(100% - 20px)!important;
  margin:19px auto 0!important;overflow:hidden!important
}
html.phone-landscape .share-canvas-shell canvas{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
html.phone-landscape .share-canvas-shell.ratio-square{width:min(100%,calc(100dvh - 108px))!important;height:auto!important;aspect-ratio:1!important}
html.phone-landscape .share-canvas-shell.ratio-story,
html.phone-landscape .share-canvas-shell.ratio-portrait{height:calc(100dvh - 126px)!important;width:auto!important;max-width:calc(100% - 42px)!important}
html.phone-landscape .share-ratio-grid{grid-row:2!important;gap:3px!important}
html.phone-landscape .share-ratio-grid button{min-height:26px!important;font-size:5.8px!important}
html.phone-landscape .share-actions{gap:4px!important;min-width:0!important;min-height:0!important;justify-content:center!important;overflow:auto!important}
html.phone-landscape .share-action-status{padding:6px!important;border-radius:7px!important}
html.phone-landscape .share-action-status small{font-size:5px!important}
html.phone-landscape .share-action-status strong{font-size:clamp(8px,1.8vh,11px)!important;margin-top:2px!important}
html.phone-landscape .share-main-action,
html.phone-landscape .share-native-action{min-height:30px!important;font-size:6px!important}
html.phone-landscape .share-social-grid{gap:3px!important}
html.phone-landscape .share-social-grid button{min-height:26px!important;font-size:6px!important}
html.phone-landscape .share-actions p{font-size:5.5px!important;line-height:1.15!important;min-height:15px!important}

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

/* How To Play and Scoreboard become real passport windows. */
html.phone-landscape :is(.how-screen,.score-screen) .site-shell{background:#000!important;background-image:none!important}
html.phone-landscape :is(.how-screen,.score-screen) .scene-bg{display:none!important}
html.phone-landscape :is(.how-screen,.score-screen) .content{
  left:var(--phone-edge)!important;right:var(--phone-edge)!important;top:var(--phone-edge)!important;bottom:var(--phone-edge)!important;
  width:auto!important;height:auto!important;padding:56px 12px 10px!important;box-sizing:border-box!important;
  border:1px solid var(--phone-border)!important;border-radius:var(--phone-radius)!important;
  background:linear-gradient(145deg,#010b03,#000)!important;overflow:hidden!important
}
html.phone-landscape .how-screen :is(.how-copy,.how-command-manual,.how-command-frame){width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;min-height:0!important;margin:0!important;box-sizing:border-box!important}
html.phone-landscape .how-screen .how-command-scroll{min-height:0!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important}
html.phone-landscape .score-screen .score-wrap{
  position:relative!important;inset:auto!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:8px!important;box-sizing:border-box!important;overflow:auto!important;clip-path:none!important
}
html.phone-landscape .score-screen .score-pair-scroll{min-height:0!important;overflow:auto!important}

/* Timeline full window, no ground/footer. */
html.phone-landscape .timeline-modal .universe-modal-status{display:none!important}
html.phone-landscape .timeline-modal .universe-modal-header{left:14px!important;right:54px!important;top:8px!important;height:46px!important}
html.phone-landscape .timeline-modal .timeline-rail{left:44px!important;right:44px!important;top:58px!important;bottom:9px!important;min-height:0!important;overflow:auto!important}
html.phone-landscape .timeline-modal-overlay::before{display:none!important}

/* Update Center full window, left logo removed and text aligned left. */
html.phone-landscape .update-center-emblem{display:none!important}
html.phone-landscape .update-center-window{padding:8px!important}
html.phone-landscape .update-center-header{
  min-height:52px!important;padding:2px 48px 4px 4px!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important;text-align:left!important
}
html.phone-landscape .update-center-header>div:nth-child(2){grid-column:1!important;min-width:0!important;margin:0!important;text-align:left!important}
html.phone-landscape .update-center-header h2{font-size:clamp(14px,3.7vh,20px)!important;text-align:left!important}
html.phone-landscape .update-center-header p{font-size:clamp(6.5px,1.55vh,8.5px)!important;line-height:1.18!important;text-align:left!important}
html.phone-landscape .update-center-window>footer{display:none!important}
html.phone-landscape .update-history-scroll{min-height:0!important;padding:3px 4px 5px!important;overflow:auto!important}
html.phone-landscape .update-history-card{height:auto!important;min-height:max-content!important;overflow:visible!important}

/* Planet detail rebuilt as a clean three-column 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{
  display:grid!important;grid-template-columns:28% 31% minmax(0,1fr)!important;gap:8px!important;
  padding:52px 10px 10px!important;overflow:hidden!important
}
html.phone-landscape .v3-planet-detail-frame>:is(.v3-planet-facts,.v3-planet-center,.v3-planet-copy-panel){
  position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:auto!important;height:100%!important;min-width:0!important;min-height:0!important;margin:0!important;overflow:auto!important;box-sizing:border-box!important
}
html.phone-landscape .v3-planet-facts-list{min-width:0!important}
html.phone-landscape .v3-planet-copy-panel{padding:7px!important}
html.phone-landscape .planet-codex-content{min-height:0!important;overflow:auto!important}

/* Bosses, Species, Objects: flush ground and exactly five cards. */
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:13%!important;font-size:clamp(9px,2.3vh,12px)!important}
html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .species-viewport{
  left:46px!important;right:46px!important;top:21%!important;bottom:38px!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((var(--stage-width) - 124px)/5)!important;width:calc((var(--stage-width) - 124px)/5)!important;max-width:none!important;
  height:min(100%,220px)!important;min-height:0!important
}
html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .species-arrow{top:52%!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(6.5px,1.55vh,8.5px)!important}

/* Species / Boss / Object detail full window. */
html.phone-landscape .species-detail-card{
  display:grid!important;grid-template-columns:40% minmax(0,1fr)!important;gap:9px!important;padding:9px!important;overflow:hidden!important
}
html.phone-landscape .species-detail-card .detail-panel{position:relative!important;min-width:0!important;min-height:0!important;height:100%!important;overflow:hidden!important}
html.phone-landscape .species-detail-card .detail-copy-panel{overflow:auto!important}
html.phone-landscape .species-detail-copy{min-height:0!important;overflow:auto!important;padding-right:44px!important}

/* MYRA full window. */
html.phone-landscape .myra-header{left:12px!important;right:50px!important;top:8px!important;height:46px!important}
html.phone-landscape .myra-body{left:10px!important;right:10px!important;top:58px!important;bottom:8px!important;min-height:0!important;overflow:hidden!important}
html.phone-landscape .myra-footer{display:none!important}

/* Hamburger menu full window, no logo; Home is injected first by JS. */
html.phone-landscape .mobile-menu-panel{padding:50px 12px 10px!important;gap:7px!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;overflow:auto!important}
html.phone-landscape .mobile-menu-column{gap:5px!important;min-height:0!important}
html.phone-landscape .mobile-menu-home{border-color:rgba(46,241,58,.75)!important;background:rgba(46,241,58,.11)!important}
html.phone-landscape .mobile-menu-status{display:none!important}

/* World and level selection: no logo, no ground/background, title high and right. */
html.phone-landscape :is(.worlds-screen,.levels-screen) .site-shell{background:#000!important;background-image:none!important}
html.phone-landscape :is(.worlds-screen,.levels-screen) .scene-bg,
html.phone-landscape :is(.worlds-screen,.levels-screen) .v3-levelstart-logo{display:none!important}
html.phone-landscape :is(.worlds-screen,.levels-screen) .v3-back-heading{
  left:10px!important;right:10px!important;top:6px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:space-between!important
}
html.phone-landscape :is(.worlds-screen,.levels-screen) .v3-back-heading h1{
  margin-left:auto!important;text-align:right!important;font-size:clamp(15px,3.8vh,21px)!important
}
html.phone-landscape .worlds-screen .v3-world-carousel{top:47px!important}
html.phone-landscape .levels-screen .v3-level-grid{top:50px!important;bottom:7px!important}

@media (max-height:390px){
  html.phone-landscape{--phone-header:49px}
  html.phone-landscape .mobile-fixed-logo{width:92px!important;height:50px!important}
  html.phone-landscape .share-studio-body{top:54px!important}
  html.phone-landscape .home-screen .home-myra-launch{bottom:20px!important}
  html.phone-landscape .home-screen .home-passport-launch{bottom:20px!important}
  html.phone-landscape :is(.bosses-screen,.species-screen,.objects-screen) .species-viewport{top:20%!important;bottom:32px!important}
  html.phone-landscape .v3-planet-detail-frame{padding-top:48px!important}
}