/* Waterwood OS Mobile v1.0
   Application 01: New Game
   Desktop v3.02 remains untouched. */

html,
body {
  overflow-x: hidden;
}

body {
  min-width: 0 !important;
}

/* Integrated handheld OS menu bar */
.mobile-menu-toggle {
  display: block !important;
  position: sticky !important;
  top: 0;
  z-index: 500;
  width: 100% !important;
  margin: 0 0 12px !important;
  border: 3px solid rgba(255,255,255,.86) !important;
  background:
    linear-gradient(180deg, rgba(14,68,142,.92), rgba(5,13,31,.96)) !important;
  color: var(--blue3) !important;
  padding: 13px 14px !important;
  font-family: "Press Start 2P", monospace !important;
  font-size: .56rem !important;
  line-height: 1.45 !important;
  text-align: left !important;
  text-shadow: 2px 2px #000 !important;
  box-shadow:
    0 0 0 4px rgba(0,0,0,.35),
    inset 0 0 18px rgba(142,216,255,.16) !important;
}

.mobile-menu-toggle::after {
  content: "COMPATIBILITY MODE";
  display: block;
  margin-top: 5px;
  color: var(--green);
  font-size: .35rem;
  line-height: 1.4;
}

body.mobile-menu-open .mobile-menu-toggle::after {
  content: "SELECT APPLICATION";
}

.mobile-menu-panel {
  position: sticky !important;
  top: 72px;
  z-index: 499;
  margin: 0 0 14px !important;
}

body:not(.mobile-menu-open) .mobile-menu-panel {
  display: none !important;
}

body.mobile-menu-open .mobile-menu-panel {
  display: grid !important;
}

/* Basic mobile OS shell */
#os,
.os,
.shell,
.os-shell,
main {
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

.panel {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.panel > header,
.panel header {
  padding: 12px 14px !important;
  font-size: .62rem !important;
  line-height: 1.45 !important;
}

/* New Game becomes a vertical handheld briefing */
#home .panel-body,
#new .panel-body,
.home-panel .panel-body,
.new-game-panel .panel-body,
.operative-body,
.new-game-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 14px !important;
}

/* Make the slideshow/feed the first real visual */
.os-feed,
.surveillance-feed,
.hero-feed,
.feed-window,
.slideshow,
.new-game-visual,
.operative-visual,
#osFeed,
#osFeedSlides {
  order: -20 !important;
  display: block !important;
  width: 100% !important;
  min-height: 220px !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  position: relative !important;
  border: 3px solid rgba(255,255,255,.82) !important;
  background: rgba(0,0,0,.36) !important;
  box-sizing: border-box !important;
}

.os-feed img,
.surveillance-feed img,
.hero-feed img,
.feed-window img,
.slideshow img,
.new-game-visual img,
.operative-visual img,
#osFeed img,
#osFeedSlides img {
  width: 100% !important;
  height: 100% !important;
  min-height: 220px !important;
  object-fit: cover !important;
}

/* If the feed slides are absolute, preserve the mobile frame */
#osFeedSlides,
.os-feed-slides,
.feed-slides,
.surveillance-slides {
  min-height: 220px !important;
  aspect-ratio: 16 / 9 !important;
  position: relative !important;
  overflow: hidden !important;
}

#osFeedSlides img,
.os-feed-slides img,
.feed-slides img,
.surveillance-slides img {
  position: absolute !important;
  inset: 0 !important;
}

/* Logo/heading scale for phones */
#home h1,
#new h1,
.home-panel h1,
.new-game-panel h1 {
  font-size: clamp(1.55rem, 8vw, 2.35rem) !important;
  line-height: 1.12 !important;
  margin: 0 !important;
}

#home h2,
#new h2,
.home-panel h2,
.new-game-panel h2 {
  font-size: clamp(1.25rem, 6.8vw, 2rem) !important;
  line-height: 1.15 !important;
}

#home p,
#new p,
.home-panel p,
.new-game-panel p {
  font-size: .9rem !important;
  line-height: 1.65 !important;
}

/* Mobile uses rhythm and separators instead of oversized desktop cards */
.terminal-card,
.card,
.info-card {
  padding: 14px !important;
}

.status-grid,
.mission-grid,
.briefing-grid,
.spec-grid,
.system-grid,
.home-stats,
.new-game-stats {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

/* Flatten New Game visual hierarchy without changing desktop markup */
#home .terminal-card,
#new .terminal-card,
.home-panel .terminal-card,
.new-game-panel .terminal-card {
  box-shadow:
    0 0 0 3px rgba(0,0,0,.28),
    inset 0 0 18px rgba(96,165,250,.08) !important;
}

/* Final system-ready message */
.mobile-system-ready {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding: 16px 14px;
  border: 3px solid rgba(255,255,255,.78);
  background:
    repeating-linear-gradient(to bottom, rgba(96,165,250,.055) 0 2px, transparent 2px 8px),
    rgba(5,13,31,.84);
  box-shadow:
    0 0 0 4px rgba(0,0,0,.32),
    inset 0 0 18px rgba(96,165,250,.1);
  text-align: center;
}

.mobile-system-ready span {
  color: var(--green);
  font-family: "Press Start 2P", monospace;
  font-size: .58rem;
  line-height: 1.5;
  text-shadow: 2px 2px #000, 0 0 16px rgba(124,255,178,.36);
  animation: mobileReadyPulse 4.4s steps(5) infinite;
}

.mobile-system-ready p {
  margin: 0 !important;
  color: rgba(255,255,255,.82);
  font-size: .82rem !important;
  line-height: 1.55 !important;
}

@keyframes mobileReadyPulse {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 2px 2px #000, 0 0 12px rgba(124,255,178,.28);
  }
  50% {
    filter: brightness(1.3);
    text-shadow: 2px 2px #000, 0 0 22px rgba(124,255,178,.62);
  }
}

/* Hide desktop side clutter only on New Game mobile when present */
#home .desktop-only,
#new .desktop-only,
.home-panel .desktop-only,
.new-game-panel .desktop-only {
  display: none !important;
}

/* Keep touch targets comfortable */
button,
.menu-button,
.mobile-menu-item {
  min-height: 44px;
}

/* Mobile v1b: New Game hero/feed hard positioning fix */
@media (max-width: 760px) {
  html,
  body {
    min-height: 100%;
    height: auto !important;
    overflow-y: auto !important;
  }

  body {
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  #title,
  #os,
  .os,
  .shell,
  .os-shell,
  main {
    transform: none !important;
  }

  #os.active,
  .os.active {
    display: block !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: auto !important;
  }

  .panel.active {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    transform: none !important;
  }

  #home,
  #new,
  .home-panel,
  .new-game-panel {
    padding-top: 0 !important;
  }

  #home.active,
  #new.active,
  .home-panel.active,
  .new-game-panel.active {
    display: block !important;
    transform: none !important;
  }

  #home .panel-body,
  #new .panel-body,
  .home-panel .panel-body,
  .new-game-panel .panel-body,
  .operative-body,
  .new-game-body {
    align-items: stretch !important;
    justify-content: flex-start !important;
    transform: none !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* Force the visual feed/slideshow back into the visible top of the page. */
  .os-feed,
  .surveillance-feed,
  .hero-feed,
  .feed-window,
  .slideshow,
  .new-game-visual,
  .operative-visual,
  #osFeed,
  #osFeedSlides,
  .os-feed-slides,
  .feed-slides,
  .surveillance-slides {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
    margin: 0 0 14px !important;
    order: -999 !important;
    z-index: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* If the desktop feed uses an oversized frame, constrain it on mobile. */
  .os-feed,
  .surveillance-feed,
  .hero-feed,
  .feed-window,
  .slideshow,
  .new-game-visual,
  .operative-visual {
    max-height: none !important;
    height: auto !important;
  }

  #osFeedSlides,
  .os-feed-slides,
  .feed-slides,
  .surveillance-slides {
    height: 220px !important;
    max-height: 220px !important;
  }

  #osFeedSlides img,
  .os-feed-slides img,
  .feed-slides img,
  .surveillance-slides img {
    top: 0 !important;
    transform: none !important;
  }

  /* Prevent any desktop negative margins from pulling the hero above the screen. */
  #home *,
  #new *,
  .home-panel *,
  .new-game-panel * {
    scroll-margin-top: 90px;
  }
}

/* Mobile v1c: single-menu cleanup */
@media (max-width: 760px) {
  /* Hide the original desktop navigation block on mobile.
     The dedicated mobile drawer remains active. */
  nav#mainMenu,
  #mainMenu:not(.mobile-menu-panel),
  .desktop-menu,
  .sidebar-menu,
  .nav-panel,
  .main-menu:not(.mobile-menu-panel) {
    display: none !important;
  }

  /* In case the desktop menu is a generic menu container without an id,
     hide any non-mobile menu that contains desktop .menu-button links. */
  .menu:not(.mobile-menu-panel),
  nav.menu:not(.mobile-menu-panel) {
    display: none !important;
  }

  body.mobile-menu-open .menu:not(.mobile-menu-panel),
  body.mobile-menu-open nav.menu:not(.mobile-menu-panel),
  body.mobile-menu-open #mainMenu:not(.mobile-menu-panel) {
    display: none !important;
  }

  .mobile-menu-panel {
    display: none !important;
  }

  body.mobile-menu-open .mobile-menu-panel {
    display: grid !important;
  }
}

/* Mobile v1d: The Echoes handheld dossier system */
@media (max-width: 760px) {
  #echoes.active,
  .echoes-panel.active {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  #echoes .panel-body,
  .echoes-panel .panel-body,
  .echoes-body,
  .character-body,
  .dossier-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 14px !important;
    overflow: visible !important;
    min-height: auto !important;
  }

  /* Character portrait / sprite area becomes the dossier hero */
  #echoes .portrait,
  #echoes .character-portrait,
  #echoes .echo-portrait,
  #echoes .sprite-frame,
  #echoes .character-frame,
  #echoes .dossier-portrait,
  .echoes-panel .portrait,
  .echoes-panel .character-portrait,
  .echoes-panel .echo-portrait,
  .echoes-panel .sprite-frame,
  .echoes-panel .character-frame,
  .echoes-panel .dossier-portrait {
    order: -30 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 260px !important;
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    transform: none !important;
    margin: 0 !important;
    border: 3px solid rgba(255,255,255,.82) !important;
    background:
      linear-gradient(rgba(96,165,250,.05) 2px, transparent 2px),
      linear-gradient(90deg, rgba(96,165,250,.05) 2px, transparent 2px),
      rgba(5,13,31,.84) !important;
    background-size: 18px 18px, 18px 18px, auto !important;
    box-shadow:
      0 0 0 4px rgba(0,0,0,.32),
      inset 0 0 26px rgba(96,165,250,.1) !important;
    overflow: hidden !important;
  }

  #echoes .portrait img,
  #echoes .character-portrait img,
  #echoes .echo-portrait img,
  #echoes .sprite-frame img,
  #echoes .character-frame img,
  #echoes .dossier-portrait img,
  .echoes-panel .portrait img,
  .echoes-panel .character-portrait img,
  .echoes-panel .echo-portrait img,
  .echoes-panel .sprite-frame img,
  .echoes-panel .character-frame img,
  .echoes-panel .dossier-portrait img {
    max-width: 82% !important;
    max-height: 240px !important;
    object-fit: contain !important;
    image-rendering: auto;
    transform: none !important;
  }

  /* Character selector becomes a horizontal operative strip */
  #echoes .character-tabs,
  #echoes .character-select,
  #echoes .echo-tabs,
  #echoes .echo-select,
  #echoes .roster,
  #echoes .dossier-tabs,
  .echoes-panel .character-tabs,
  .echoes-panel .character-select,
  .echoes-panel .echo-tabs,
  .echoes-panel .echo-select,
  .echoes-panel .roster,
  .echoes-panel .dossier-tabs {
    order: -20 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 4px 0 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    scrollbar-width: thin;
  }

  #echoes .character-tabs button,
  #echoes .character-select button,
  #echoes .echo-tabs button,
  #echoes .echo-select button,
  #echoes .roster button,
  #echoes .dossier-tabs button,
  .echoes-panel .character-tabs button,
  .echoes-panel .character-select button,
  .echoes-panel .echo-tabs button,
  .echoes-panel .echo-select button,
  .echoes-panel .roster button,
  .echoes-panel .dossier-tabs button {
    flex: 0 0 auto !important;
    min-width: 128px !important;
    min-height: 46px !important;
    border: 2px solid rgba(255,255,255,.62) !important;
    background: rgba(14,44,91,.28) !important;
    color: var(--blue3) !important;
    padding: 10px !important;
    font-family: "Press Start 2P", monospace !important;
    font-size: .45rem !important;
    line-height: 1.45 !important;
    text-align: center !important;
    text-shadow: 2px 2px #000 !important;
  }

  #echoes .character-tabs button.active,
  #echoes .character-select button.active,
  #echoes .echo-tabs button.active,
  #echoes .echo-select button.active,
  #echoes .roster button.active,
  #echoes .dossier-tabs button.active,
  .echoes-panel .character-tabs button.active,
  .echoes-panel .character-select button.active,
  .echoes-panel .echo-tabs button.active,
  .echoes-panel .echo-select button.active,
  .echoes-panel .roster button.active,
  .echoes-panel .dossier-tabs button.active {
    color: #fff !important;
    border-color: var(--blue3) !important;
    box-shadow: 0 0 18px rgba(142,216,255,.24) !important;
  }

  /* Dossier content becomes stacked and readable */
  #echoes h1,
  #echoes h2,
  #echoes .character-name,
  #echoes .echo-name,
  #echoes .dossier-name,
  .echoes-panel h1,
  .echoes-panel h2,
  .echoes-panel .character-name,
  .echoes-panel .echo-name,
  .echoes-panel .dossier-name {
    font-size: clamp(1.35rem, 7.5vw, 2.25rem) !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  #echoes p,
  .echoes-panel p {
    font-size: .9rem !important;
    line-height: 1.65 !important;
  }

  #echoes .terminal-card,
  #echoes .card,
  #echoes .info-card,
  #echoes .ability-card,
  #echoes .profile-card,
  .echoes-panel .terminal-card,
  .echoes-panel .card,
  .echoes-panel .info-card,
  .echoes-panel .ability-card,
  .echoes-panel .profile-card {
    padding: 14px !important;
    margin: 0 !important;
  }

  #echoes .ability-grid,
  #echoes .profile-grid,
  #echoes .stats-grid,
  #echoes .echo-grid,
  #echoes .dossier-grid,
  .echoes-panel .ability-grid,
  .echoes-panel .profile-grid,
  .echoes-panel .stats-grid,
  .echoes-panel .echo-grid,
  .echoes-panel .dossier-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Treat any chevron/sidebar art as desktop-only clutter on handheld */
  #echoes .chevron,
  #echoes .side-chevron,
  #echoes .desktop-chevron,
  .echoes-panel .chevron,
  .echoes-panel .side-chevron,
  .echoes-panel .desktop-chevron {
    display: none !important;
  }

  .mobile-dossier-ready {
    display: grid;
    gap: 8px;
    padding: 16px 14px;
    border: 3px solid rgba(255,255,255,.78);
    background:
      repeating-linear-gradient(to bottom, rgba(96,165,250,.055) 0 2px, transparent 2px 8px),
      rgba(5,13,31,.84);
    box-shadow:
      0 0 0 4px rgba(0,0,0,.32),
      inset 0 0 18px rgba(96,165,250,.1);
    text-align: center;
  }

  .mobile-dossier-ready span {
    color: var(--green);
    font-family: "Press Start 2P", monospace;
    font-size: .55rem;
    line-height: 1.5;
    text-shadow: 2px 2px #000, 0 0 16px rgba(124,255,178,.36);
    animation: mobileDossierPulse 4.8s steps(5) infinite;
  }

  .mobile-dossier-ready p {
    margin: 0 !important;
    color: rgba(255,255,255,.82);
    font-size: .82rem !important;
    line-height: 1.55 !important;
  }

  @keyframes mobileDossierPulse {
    0%, 100% {
      filter: brightness(1);
      text-shadow: 2px 2px #000, 0 0 12px rgba(124,255,178,.28);
    }
    50% {
      filter: brightness(1.25);
      text-shadow: 2px 2px #000, 0 0 22px rgba(124,255,178,.58);
    }
  }
}

@media (max-width: 760px) {
  #echoes.mobile-dossier-pulse {
    filter: brightness(1.08);
    transition: filter .2s steps(3);
  }
}

/* Mobile v1e: Echoes corrected handheld dossier layout */
@media (max-width: 760px) {
  /* Remove the huge empty desktop stage that appeared above the dossier */
  #echoes .echo-stage,
  #echoes .character-stage,
  #echoes .sprite-stage,
  #echoes .echoes-stage,
  #echoes .portrait-stage,
  #echoes .character-display,
  #echoes .echo-display,
  #echoes .operative-stage,
  #echoes .desktop-stage,
  #echoes .echoes-visual,
  #echoes .character-visual,
  #echoes .mobile-empty-stage,
  .echoes-panel .echo-stage,
  .echoes-panel .character-stage,
  .echoes-panel .sprite-stage,
  .echoes-panel .echoes-stage,
  .echoes-panel .portrait-stage,
  .echoes-panel .character-display,
  .echoes-panel .echo-display,
  .echoes-panel .operative-stage,
  .echoes-panel .desktop-stage,
  .echoes-panel .echoes-visual,
  .echoes-panel .character-visual {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  /* If the large blank area is a direct terminal card before the profile,
     collapse it unless it contains an actual image. */
  #echoes .panel-body > .terminal-card:first-child:not(:has(img)),
  #echoes .panel-body > .card:first-child:not(:has(img)),
  #echoes .panel-body > div:first-child:not(:has(img)):not(:has(h1)):not(:has(h2)):not(:has(p)):not(:has(button)) {
    display: none !important;
  }

  /* If a vertical divider was part of the desktop layout, remove it on mobile. */
  #echoes hr,
  #echoes .divider,
  #echoes .vertical-line,
  #echoes .splitter,
  #echoes .panel-divider {
    display: none !important;
  }

  /* Put the existing dossier/profile card at the top and make it compact. */
  #echoes .profile-card,
  #echoes .dossier-card,
  #echoes .character-card,
  #echoes .operative-card,
  #echoes .panel-body > .terminal-card:has(h1),
  #echoes .panel-body > .terminal-card:has(h2),
  .echoes-panel .profile-card,
  .echoes-panel .dossier-card,
  .echoes-panel .character-card,
  .echoes-panel .operative-card {
    order: -50 !important;
    min-height: auto !important;
    padding: 24px 18px !important;
    margin: 0 !important;
  }

  /* If sprites exist inside the dossier card, show them as a compact top portrait. */
  #echoes img[src*="sprites"],
  #echoes img[src*="cade_"],
  #echoes img[src*="iyana_"],
  #echoes img[src*="jarek_"],
  #echoes img[src*="elias_"],
  #echoes img[src*="evie_"],
  .echoes-panel img[src*="sprites"],
  .echoes-panel img[src*="cade_"],
  .echoes-panel img[src*="iyana_"],
  .echoes-panel img[src*="jarek_"],
  .echoes-panel img[src*="elias_"],
  .echoes-panel img[src*="evie_"] {
    display: block !important;
    max-width: 160px !important;
    max-height: 190px !important;
    object-fit: contain !important;
    margin: 0 auto 14px !important;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 18px rgba(142,216,255,.22));
  }

  /* Character buttons become a clean touch selector row under the intro text. */
  #echoes button {
    min-height: 44px !important;
  }

  #echoes .profile-card button,
  #echoes .dossier-card button,
  #echoes .character-card button,
  #echoes .operative-card button,
  #echoes .terminal-card button,
  .echoes-panel .profile-card button,
  .echoes-panel .dossier-card button,
  .echoes-panel .character-card button,
  .echoes-panel .operative-card button,
  .echoes-panel .terminal-card button {
    min-width: 0 !important;
  }

  #echoes .profile-card,
  #echoes .dossier-card,
  #echoes .character-card,
  #echoes .operative-card,
  .echoes-panel .profile-card,
  .echoes-panel .dossier-card,
  .echoes-panel .character-card,
  .echoes-panel .operative-card {
    display: grid !important;
    gap: 16px !important;
  }

  /* Remove excessive blank height from any Echoes cards */
  #echoes .terminal-card,
  #echoes .card,
  #echoes .info-card,
  .echoes-panel .terminal-card,
  .echoes-panel .card,
  .echoes-panel .info-card {
    min-height: auto !important;
  }

  /* Final dossier ready panel stays visible but compact */
  .mobile-dossier-ready {
    order: 99 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 760px) {
  .mobile-echo-sprite-frame {
    display: grid;
    place-items: center;
    min-height: 190px;
    margin: 0 0 8px;
    border: 2px solid rgba(255,255,255,.58);
    background:
      linear-gradient(rgba(96,165,250,.045) 2px, transparent 2px),
      linear-gradient(90deg, rgba(96,165,250,.045) 2px, transparent 2px),
      rgba(0,0,0,.18);
    background-size: 18px 18px, 18px 18px, auto;
  }

  .mobile-echo-sprite-frame img {
    max-width: 150px !important;
    max-height: 175px !important;
    object-fit: contain !important;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 18px rgba(142,216,255,.28));
    margin: 0 !important;
  }
}

/* Mobile v1f: Echoes swipe navigation polish */
@media (max-width: 760px) {
  #echoes .profile {
    touch-action: pan-y !important;
    user-select: none;
  }

  .mobile-swipe-hint {
    display: block;
    margin: 2px 0 0;
    color: var(--blue3);
    font-family: "Press Start 2P", monospace;
    font-size: .42rem;
    line-height: 1.5;
    text-align: center;
    text-shadow: 2px 2px #000;
    opacity: .82;
  }

  #echoes.mobile-swipe-feedback .profile {
    box-shadow:
      0 0 0 4px rgba(0,0,0,.32),
      0 0 26px rgba(142,216,255,.22),
      inset 0 0 24px rgba(96,165,250,.1) !important;
    transition: box-shadow .18s steps(3);
  }
}

/* Mobile v1g: visible Echo sprite dossier frame */
@media (max-width: 760px) {
  #echoes .mobile-echo-sprite-frame {
    display: grid !important;
    place-items: center !important;
    min-height: 210px !important;
    margin: 0 0 12px !important;
    border: 3px solid rgba(255,255,255,.72) !important;
    background:
      radial-gradient(circle at center, rgba(96,165,250,.16), transparent 58%),
      linear-gradient(rgba(96,165,250,.045) 2px, transparent 2px),
      linear-gradient(90deg, rgba(96,165,250,.045) 2px, transparent 2px),
      rgba(0,0,0,.26) !important;
    background-size: auto, 18px 18px, 18px 18px, auto !important;
    box-shadow:
      inset 0 0 30px rgba(96,165,250,.12),
      0 0 20px rgba(96,165,250,.12) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #mobileEchoSprite {
    display: block !important;
    max-width: 76% !important;
    max-height: 190px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    image-rendering: pixelated;
    filter:
      drop-shadow(0 8px 0 rgba(0,0,0,.38))
      drop-shadow(0 0 18px rgba(142,216,255,.28));
    position: relative !important;
    z-index: 2 !important;
  }

  #mobileEchoSprite[src=""],
  #mobileEchoSprite:not([src]) {
    display: none !important;
  }

  #mobileEchoFallback {
    display: none;
    color: var(--blue3);
    font-family: "Press Start 2P", monospace;
    font-size: 1.2rem;
    line-height: 1.4;
    text-shadow: 3px 3px #000, 0 0 18px rgba(142,216,255,.42);
  }

  .mobile-echo-sprite-frame.no-sprite #mobileEchoFallback {
    display: block;
  }

  .mobile-echo-sprite-frame.no-sprite #mobileEchoSprite {
    display: none !important;
  }

  #echoes.mobile-swipe-feedback .mobile-echo-sprite-frame {
    box-shadow:
      inset 0 0 36px rgba(96,165,250,.18),
      0 0 28px rgba(142,216,255,.28) !important;
  }
}

/* Mobile v1h: Echoes portrait render frame */
@media (max-width: 760px) {
  #echoes .mobile-echo-sprite-frame {
    min-height: 235px !important;
    background:
      radial-gradient(circle at center, rgba(96,165,250,.18), transparent 58%),
      linear-gradient(rgba(96,165,250,.045) 2px, transparent 2px),
      linear-gradient(90deg, rgba(96,165,250,.045) 2px, transparent 2px),
      rgba(0,0,0,.28) !important;
  }

  #mobileEchoSprite {
    max-width: 72% !important;
    max-height: 215px !important;
    image-rendering: auto !important;
    filter:
      drop-shadow(0 9px 0 rgba(0,0,0,.34))
      drop-shadow(0 0 20px rgba(142,216,255,.3)) !important;
    transition: opacity .18s steps(4), transform .18s steps(4), filter .18s steps(4);
  }

  #echoes.mobile-portrait-loading #mobileEchoSprite {
    opacity: .25;
    transform: translateY(4px) scale(.98);
    filter:
      drop-shadow(0 9px 0 rgba(0,0,0,.34))
      drop-shadow(0 0 10px rgba(142,216,255,.18)) !important;
  }

  .mobile-echo-sprite-frame::before {
    content: "OPERATIVE RENDER";
    position: absolute;
    left: 10px;
    top: 10px;
    color: var(--green);
    font-family: "Press Start 2P", monospace;
    font-size: .38rem;
    line-height: 1.4;
    text-shadow: 2px 2px #000;
    opacity: .88;
  }

  .mobile-echo-sprite-frame::after {
    content: "PROFILE SYNC";
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: var(--blue3);
    font-family: "Press Start 2P", monospace;
    font-size: .34rem;
    line-height: 1.4;
    text-shadow: 2px 2px #000;
    opacity: .76;
  }
}

/* Mobile v1i: prevent legacy sprite-sheet flash */
@media (max-width: 760px) {
  #echoes img:not(#mobileEchoSprite) {
    visibility: hidden !important;
  }

  #mobileEchoSprite {
    visibility: visible !important;
  }
}

/* Mobile v1j: World Terminal Satellite Survey */
@media (max-width: 760px) {
  #world.active {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  #world .panel-body {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px !important;
    gap: 16px !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* Hide desktop walking map experience on mobile */
  #world .world-terminal,
  #world .world-map,
  #world .world-stage,
  #world .terminal-map,
  #world .map-stage,
  #world .map-wrap,
  #world .world-player,
  #world #worldPlayer,
  #world #worldMap,
  #world .minimap,
  #world .instructions,
  #world .world-hud,
  #world .location-panel,
  #world .region-icons,
  #world .map-icons,
  #world .world-boot {
    display: none !important;
  }

  .mobile-world-terminal {
    display: grid !important;
    gap: 14px;
    position: relative;
  }

  .mobile-world-image-frame {
    border: 3px solid rgba(255,255,255,.82);
    background: rgba(0,0,0,.36);
    box-shadow:
      0 0 0 4px rgba(0,0,0,.32),
      inset 0 0 26px rgba(96,165,250,.1);
    overflow: hidden;
  }

  .mobile-world-image-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: saturate(.92) contrast(1.06) brightness(.86);
    transition: opacity .22s steps(4), transform .22s steps(4), filter .22s steps(4);
  }

  .mobile-world-terminal.scanning .mobile-world-image-frame img {
    opacity: .35;
    transform: scale(1.015);
    filter: saturate(.45) contrast(1.1) brightness(.58);
  }

  .mobile-world-card {
    border: 3px solid rgba(255,255,255,.78);
    background:
      linear-gradient(rgba(96,165,250,.045) 2px, transparent 2px),
      linear-gradient(90deg, rgba(96,165,250,.045) 2px, transparent 2px),
      rgba(5,13,31,.84);
    background-size: 18px 18px, 18px 18px, auto;
    padding: 16px 14px;
    box-shadow:
      0 0 0 4px rgba(0,0,0,.32),
      inset 0 0 18px rgba(96,165,250,.1);
  }

  .mobile-world-card span {
    display: block;
    color: var(--green);
    font-family: "Press Start 2P", monospace;
    font-size: .48rem;
    line-height: 1.5;
    text-shadow: 2px 2px #000;
    margin-bottom: 10px;
  }

  .mobile-world-card h2 {
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 7vw, 2.2rem);
    line-height: 1.1;
    text-shadow: 4px 4px #000, 0 0 20px rgba(142,216,255,.22);
  }

  .mobile-world-card p {
    margin: 0;
    color: rgba(255,255,255,.86);
    font-size: .9rem;
    line-height: 1.65;
  }

  .mobile-world-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 14px;
  }

  .mobile-world-meta div {
    border: 1px solid rgba(255,255,255,.56);
    background: rgba(14,44,91,.24);
    padding: 11px;
  }

  .mobile-world-meta b,
  .mobile-world-meta em {
    display: block;
    font-style: normal;
  }

  .mobile-world-meta b {
    color: var(--green);
    font-family: "Press Start 2P", monospace;
    font-size: .38rem;
    line-height: 1.45;
    margin-bottom: 7px;
    text-shadow: 2px 2px #000;
  }

  .mobile-world-meta em {
    color: rgba(255,255,255,.9);
    line-height: 1.45;
  }

  .mobile-world-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
  }

  .mobile-world-controls button {
    min-height: 44px;
    border: 2px solid rgba(255,255,255,.68);
    background: rgba(14,44,91,.32);
    color: var(--blue3);
    font-family: "Press Start 2P", monospace;
    font-size: .42rem;
    line-height: 1.45;
    text-shadow: 2px 2px #000;
  }

  .mobile-world-controls span {
    color: rgba(255,255,255,.82);
    font-family: "Press Start 2P", monospace;
    font-size: .42rem;
    line-height: 1.45;
    text-align: center;
    text-shadow: 2px 2px #000;
  }

  .mobile-world-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
  }

  .mobile-world-dot {
    width: 10px;
    height: 10px;
    min-height: 10px;
    border: 1px solid rgba(255,255,255,.72);
    background: rgba(255,255,255,.15);
    padding: 0;
  }

  .mobile-world-dot.active {
    background: var(--blue3);
    box-shadow: 0 0 12px rgba(142,216,255,.6);
  }

  .mobile-world-ready {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 3px solid rgba(255,255,255,.72);
    background:
      repeating-linear-gradient(to bottom, rgba(96,165,250,.055) 0 2px, transparent 2px 8px),
      rgba(5,13,31,.78);
    text-align: center;
  }

  .mobile-world-ready span {
    color: var(--green);
    font-family: "Press Start 2P", monospace;
    font-size: .48rem;
    line-height: 1.5;
    text-shadow: 2px 2px #000, 0 0 16px rgba(124,255,178,.36);
  }

  .mobile-world-ready p {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: .82rem;
    line-height: 1.55;
  }

  .mobile-world-scan {
    position: absolute;
    inset: 18px;
    z-index: 5;
    display: none;
    place-items: center;
    align-content: center;
    gap: 14px;
    border: 2px solid rgba(255,255,255,.72);
    background:
      repeating-linear-gradient(to bottom, rgba(96,165,250,.07) 0 2px, transparent 2px 8px),
      rgba(2,4,10,.86);
    font-family: "Press Start 2P", monospace;
    color: var(--blue3);
    text-shadow: 2px 2px #000;
  }

  .mobile-world-terminal.scanning .mobile-world-scan {
    display: grid;
  }

  .mobile-world-scan span {
    font-size: .56rem;
    line-height: 1.65;
  }

  .mobile-world-scan b {
    display: block;
    width: min(320px, 70%);
    height: 20px;
    border: 3px solid white;
    padding: 3px;
    background: rgba(0,0,0,.42);
  }

  .mobile-world-scan b::before {
    content: "";
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--blue), var(--blue3));
    animation: mobileWorldScanFill .44s steps(9) forwards;
  }

  @keyframes mobileWorldScanFill {
    to { width: 100%; }
  }
}

/* Mobile v1k: World Terminal cleanup - hide all desktop world remnants */
@media (max-width: 760px) {
  /* Hide every direct child of World panel body except the mobile satellite survey. */
  #world .panel-body > *:not(#mobileWorldTerminal) {
    display: none !important;
  }

  #mobileWorldTerminal,
  #mobileWorldTerminal * {
    display: revert;
  }

  #mobileWorldTerminal {
    display: grid !important;
  }

  #mobileWorldTerminal .mobile-world-image-frame,
  #mobileWorldTerminal .mobile-world-card,
  #mobileWorldTerminal .mobile-world-controls,
  #mobileWorldTerminal .mobile-world-dots,
  #mobileWorldTerminal .mobile-world-ready {
    display: grid !important;
  }

  #mobileWorldTerminal .mobile-world-controls {
    display: grid !important;
  }

  #mobileWorldTerminal .mobile-world-dots {
    display: flex !important;
  }

  #mobileWorldTerminal img {
    display: block !important;
  }

  #mobileWorldTerminal button {
    display: block !important;
  }

  #mobileWorldTerminal .mobile-world-scan {
    display: none !important;
  }

  #mobileWorldTerminal.scanning .mobile-world-scan {
    display: grid !important;
  }

  /* Kill leftover desktop stage classes even if they are nested or injected later. */
  #world .stage,
  #world .world-card,
  #world .world-detail,
  #world .world-details,
  #world .satellite-card,
  #world .satellite-feed,
  #world .region-card,
  #world .region-detail,
  #world .region-info,
  #world .world-info,
  #world .world-preview,
  #world .world-main,
  #world .world-content,
  #world .world-layout,
  #world .world-left,
  #world .world-right,
  #world .world-viewport,
  #world .map-panel,
  #world .terminal-screen,
  #world .cartography,
  #world .cartography-panel,
  #world .world-terminal-layout {
    display: none !important;
  }

  /* Re-enable mobile survey if any generic selector catches it. */
  #world #mobileWorldTerminal,
  #world #mobileWorldTerminal .mobile-world-image-frame,
  #world #mobileWorldTerminal .mobile-world-card,
  #world #mobileWorldTerminal .mobile-world-controls,
  #world #mobileWorldTerminal .mobile-world-dots,
  #world #mobileWorldTerminal .mobile-world-ready {
    display: grid !important;
  }

  #world #mobileWorldTerminal .mobile-world-dots {
    display: flex !important;
  }

  #world #mobileWorldTerminal .mobile-world-scan {
    display: none !important;
  }

  #world #mobileWorldTerminal.scanning .mobile-world-scan {
    display: grid !important;
  }
}

/* Mobile v1l: explicitly re-enable mobile-only UI on handheld layouts */
@media (max-width: 760px) {
  .mobile-system-ready,
  .mobile-dossier-ready,
  .mobile-echo-sprite-frame,
  .mobile-swipe-hint {
    display: grid !important;
  }

  .mobile-swipe-hint {
    display: block !important;
  }

  body.mobile-menu-open .mobile-menu-panel {
    display: grid !important;
  }

  #mobileWorldTerminal {
    display: grid !important;
  }
}

/* v3.1o Mobile Restore Safeguard */
@media (max-width: 760px) {
  .ww31-cade-renderer,
  .v31-actor,
  .v31-cade-actor,
  #worldExplorer.ww31-world-cade {
    display: none !important;
    visibility: hidden !important;
  }

  #mobileWorldTerminal {
    display: grid !important;
  }

  body.mobile-menu-open .mobile-menu-panel {
    display: grid !important;
  }

  .mobile-system-ready,
  .mobile-dossier-ready,
  .mobile-echo-sprite-frame {
    display: grid !important;
  }

  .mobile-swipe-hint {
    display: block !important;
  }

  #world .panel-body > *:not(#mobileWorldTerminal) {
    display: none !important;
  }

  #world #mobileWorldTerminal,
  #world #mobileWorldTerminal .mobile-world-image-frame,
  #world #mobileWorldTerminal .mobile-world-card,
  #world #mobileWorldTerminal .mobile-world-controls,
  #world #mobileWorldTerminal .mobile-world-dots,
  #world #mobileWorldTerminal .mobile-world-ready {
    display: grid !important;
  }

  #world #mobileWorldTerminal .mobile-world-dots {
    display: flex !important;
  }

  #world #mobileWorldTerminal .mobile-world-scan {
    display: none !important;
  }

  #world #mobileWorldTerminal.scanning .mobile-world-scan {
    display: grid !important;
  }
}


/* v3.4d Jarek dossier final size fix — mobile.css is the real limiter */
@media (max-width: 760px) {
  #echoes #mobileEchoSprite[data-echo-character="jarek"],
  #echoes #mobileEchoSprite.jarek-mobile-portrait {
    width: auto !important;
    height: 285px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: translateY(10px) !important;
    transform-origin: center bottom !important;
    image-rendering: pixelated !important;
  }

  #echoes #mobileEchoSpriteFrame[data-echo-character="jarek"],
  #echoes #mobileEchoSpriteFrame.jarek-mobile-frame {
    min-height: 285px !important;
    place-items: end center !important;
    overflow: hidden !important;
  }
}


/* v3.4e Raise Jarek name */
@media (max-width:760px){
  #charName[data-echo-character="jarek"],
  .jarek-name-offset{
    transform:translateY(-15px)!important;
  }
}


/* v3.4i Evie dossier portrait sizing */
@media (max-width: 760px) {
  #echoes #mobileEchoSprite[data-echo-character="evie"] {
    width: auto !important;
    height: 270px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: translateY(8px) !important;
    transform-origin: center bottom !important;
    image-rendering: pixelated !important;
  }

  #echoes #mobileEchoSpriteFrame[data-echo-character="evie"] {
    min-height: 285px !important;
    place-items: end center !important;
    overflow: hidden !important;
  }
}


/* v3.4o obsolete desktop nav mobile instruction hidden */
.nav-row.mobile,
.mobile-row,
[data-nav="mobile"],
[data-label="mobile"] {
  display: none !important;
}