/* Thor6 atmosphere pass: keep gameplay intact while restoring the deep-space mystery. */
.world-screen {
  background:
    radial-gradient(ellipse at 52% 34%, rgba(38, 70, 115, 0.18), transparent 34%),
    linear-gradient(180deg, #010309, #02050a 58%, #000104);
}

.world-screen canvas#world-canvas {
  filter: brightness(0.74) contrast(1.18) saturate(0.68) hue-rotate(-8deg);
}

.world-screen::before {
  z-index: 6;
  background:
    radial-gradient(ellipse at 50% 44%, transparent 0 36%, rgba(0, 3, 8, 0.34) 68%, rgba(0, 1, 5, 0.78) 100%),
    linear-gradient(180deg, rgba(0, 2, 7, 0.24), transparent 22%, transparent 64%, rgba(0, 1, 4, 0.62));
  mix-blend-mode: multiply;
}

.world-screen::after {
  z-index: 7;
  opacity: 0.2;
  background-image:
    radial-gradient(circle, rgba(236, 248, 255, 0.9) 0 1px, transparent 1.5px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  background-size: 180px 180px, 220px 220px;
  mix-blend-mode: screen;
}

.world-topbar {
  top: 12px;
  left: 14px;
  right: 14px;
  padding: 0 0 8px;
}

.world-topbar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px -14px -8px;
  border-bottom: 1px solid rgba(111, 205, 246, 0.16);
  background: linear-gradient(180deg, rgba(1, 4, 10, 0.92), rgba(3, 9, 18, 0.48) 72%, transparent);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.world-topbar h1 {
  text-shadow: 0 0 28px rgba(111, 205, 246, 0.18), 0 3px 16px #000;
}

.objective {
  background: linear-gradient(135deg, rgba(2, 8, 17, 0.72), rgba(5, 11, 22, 0.54));
  border-right-color: rgba(111, 230, 255, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 20px 60px rgba(0, 0, 0, 0.28);
}

.hud-button,
.ability-bar button,
.player-hud,
.minimap {
  backdrop-filter: blur(14px);
}

.ability-bar {
  padding: 6px;
  border: 1px solid rgba(111, 205, 246, 0.13);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(2, 7, 15, 0.58), rgba(0, 2, 6, 0.34));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
}

.ability-bar button {
  background: linear-gradient(160deg, rgba(7, 20, 32, 0.82), rgba(1, 4, 10, 0.92));
  border-color: rgba(148, 202, 233, 0.14);
}

.player-hud {
  padding: 8px 10px 8px 8px;
  border: 1px solid rgba(111, 205, 246, 0.12);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(2, 8, 17, 0.74), rgba(0, 2, 7, 0.48));
}

.minimap {
  border-color: rgba(111, 230, 255, 0.18);
  background: rgba(0, 4, 10, 0.74);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38), 0 0 38px rgba(111, 230, 255, 0.08);
}

@media (max-width: 820px) {
  .world-screen canvas#world-canvas {
    filter: brightness(0.76) contrast(1.15) saturate(0.7) hue-rotate(-7deg);
  }

  .world-topbar {
    top: 8px;
    left: 8px;
    right: 8px;
    gap: 8px;
  }

  .world-topbar::before {
    inset: -8px -8px -6px;
  }

  .objective {
    max-width: 48%;
    padding: 8px 10px;
  }

  .player-hud {
    left: 8px;
    bottom: 8px;
    max-width: calc(100vw - 16px);
  }
}