.gravity-shell {
  --gravity-panel-bg: linear-gradient(180deg, rgba(var(--surface-strong-rgb), 0.92), rgba(var(--surface-rgb), 0.86));
  --gravity-cell-bg: rgba(var(--bg-rgb), 0.58);
  --gravity-cell-strong-bg: rgba(var(--surface-rgb), 0.78);
  --gravity-blue-glass: rgba(20, 119, 170, 0.24);
  --gravity-blue-glass-strong: rgba(28, 151, 207, 0.34);
  --gravity-blue-glass-border: rgba(98, 219, 255, 0.32);
  --gravity-blue-glass-text: #d8f6ff;
  --gravity-game-bg: #030b0f;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.gravity-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  width: min(1180px, 100%);
}

.gravity-status-bar,
.mission-panel,
.control-deck {
  border: 1px solid rgba(var(--primary-rgb), 0.16);
  border-radius: 8px;
  background: var(--gravity-panel-bg);
  box-shadow: 0 18px 60px var(--shadow);
}

.gravity-status-bar {
  position: absolute;
  top: 10px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 760px);
  z-index: 5;
  display: flex;
  align-items: center;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(12px);
  padding: 6px 12px;
}

.scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.hud-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 11px;
}

.hud-cell + .hud-cell {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.progress-cluster {
  flex: 1 1 auto;
}

.scoreboard span,
.control-hint {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.scoreboard strong {
  display: inline-block;
  overflow: hidden;
  color: #ffffff;
  font-size: clamp(0.8rem, 1vw, 0.98rem);
  line-height: 1;
  margin-top: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(88px, 1fr));
  gap: 8px;
}

.mission-panel {
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
}

.mission-panel h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1;
}

.mission-panel p:not(.eyebrow) {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
  margin: 0;
}

.game-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(var(--primary-rgb), 0.24);
  border-radius: 8px;
  background: var(--gravity-game-bg);
  box-shadow: 0 18px 60px var(--shadow), inset 0 0 0 1px rgba(var(--secondary-rgb), 0.08);
}

.ship-health {
  position: absolute;
  bottom: 66px;
  left: 50%;
  z-index: 4;
  display: none;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px 10px;
  width: min(240px, calc(100% - 32px));
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 14px 34px rgba(0, 8, 16, 0.24), inset 0 0 20px rgba(101, 225, 255, 0.1);
  backdrop-filter: blur(12px);
  padding: 8px 12px;
  pointer-events: none;
  transform: translateX(-50%);
}

.game-stage.is-live-hud .ship-health {
  display: grid;
}

.ship-health span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.ship-health strong {
  justify-self: end;
  color: #ffffff;
  font-size: 0.98rem;
  line-height: 1;
}

.health-meter {
  grid-column: 1 / -1;
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: rgba(8, 58, 92, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.health-meter span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff5a4f, #f4bf42 46%, #42dff4);
  transition: width 160ms ease;
}

.mobile-gamepad {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  grid-template-columns: minmax(160px, auto) minmax(118px, auto);
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  pointer-events: none;
}

.gamepad-dpad {
  position: relative;
  align-self: end;
  width: 164px;
  height: 164px;
  border: 1px solid var(--gravity-blue-glass-border);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(41, 182, 228, 0.14), rgba(8, 58, 92, 0.04) 62%, transparent 63%),
    rgba(8, 58, 92, 0.04);
  box-shadow: inset 0 0 0 1px rgba(151, 234, 255, 0.05);
  pointer-events: auto;
}

.gamepad-button,
.gamepad-utility {
  border: 1px solid var(--gravity-blue-glass-border);
  background:
    radial-gradient(circle at 35% 25%, rgba(218, 247, 255, 0.12), transparent 28%),
    rgba(20, 119, 170, 0.12);
  color: var(--gravity-blue-glass-text);
  box-shadow: 0 10px 26px rgba(0, 8, 16, 0.14), inset 0 0 16px rgba(101, 225, 255, 0.07);
  font-weight: 900;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.gamepad-button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  font-size: 0;
}

.gamepad-up {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.gamepad-left {
  top: 55px;
  left: 11px;
}

.gamepad-right {
  top: 55px;
  right: 11px;
}

.gamepad-down {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.control-icon,
.utility-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
}

.control-icon-thrust::before,
.control-icon-reverse::before,
.control-icon-left::before,
.control-icon-right::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-top: 3px solid currentColor;
  border-left: 3px solid currentColor;
}

.control-icon-thrust::before {
  transform: translateY(3px) rotate(45deg);
}

.control-icon-reverse::before {
  transform: translateY(-3px) rotate(225deg);
}

.control-icon-left::before {
  transform: translateX(3px) rotate(-45deg);
}

.control-icon-right::before {
  transform: translateX(-3px) rotate(135deg);
}

.control-icon-fire {
  border: 2px solid currentColor;
  border-radius: 999px;
}

.control-icon-fire::before,
.control-icon-fire::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.control-icon-fire::before {
  top: 50%;
  left: 3px;
  right: 3px;
  height: 2px;
  transform: translateY(-50%);
}

.control-icon-fire::after {
  top: 3px;
  bottom: 3px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}

.control-icon-target {
  border: 2px solid currentColor;
  border-radius: 999px;
}

.control-icon-target::before,
.control-icon-target::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.control-icon-target::before {
  top: 50%;
  left: -5px;
  right: -5px;
  height: 2px;
  transform: translateY(-50%);
}

.control-icon-target::after {
  top: -5px;
  bottom: -5px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}

.gamepad-action-pad {
  display: grid;
  align-self: end;
  justify-items: end;
  align-content: end;
  pointer-events: auto;
}

.gamepad-utility-row {
  position: absolute;
  top: max(92px, calc(env(safe-area-inset-top) + 82px));
  right: max(14px, env(safe-area-inset-right));
  display: flex;
  gap: 7px;
}

.gamepad-utility {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--gravity-blue-glass-border);
  border-radius: 8px;
  padding: 0;
  font-size: 0;
}

.field-fullscreen-exit {
  display: none;
}

.utility-icon-pause::before,
.utility-icon-pause::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 2px;
  background: currentColor;
}

.utility-icon-pause::before {
  left: 6px;
}

.utility-icon-pause::after {
  right: 6px;
}

.gamepad-pause.is-resume .utility-icon-pause::before {
  top: 3px;
  bottom: 3px;
  left: 7px;
  width: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
  border-radius: 0;
  background: transparent;
}

.gamepad-pause.is-resume .utility-icon-pause::after {
  display: none;
}

.utility-icon-fullscreen::before,
.utility-icon-fullscreen::after,
.utility-icon-exit::before,
.utility-icon-exit::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-color: currentColor;
  border-style: solid;
}

.utility-icon-fullscreen::before {
  border-width: 2px 0 0 2px;
}

.utility-icon-fullscreen::after {
  border-width: 0 2px 2px 0;
}

.utility-icon-exit::before {
  border-width: 0 2px 2px 0;
  transform: scale(0.72) translate(-5px, -5px);
}

.utility-icon-exit::after {
  border-width: 2px 0 0 2px;
  transform: scale(0.72) translate(5px, 5px);
}

.gamepad-action-buttons {
  display: grid;
  grid-template-columns: 58px 94px;
  align-items: center;
  gap: 10px;
  justify-items: center;
}

.gamepad-fire {
  position: static;
  width: 94px;
  height: 94px;
  border-color: var(--gravity-blue-glass-border);
  background:
    radial-gradient(circle at 35% 25%, rgba(218, 247, 255, 0.14), transparent 28%),
    rgba(28, 151, 207, 0.18);
  color: var(--gravity-blue-glass-text);
}

.gamepad-target {
  position: static;
  width: 58px;
  height: 58px;
  color: var(--gravity-blue-glass-text);
}

.gamepad-button.is-active,
.gamepad-utility:active {
  filter: brightness(1.1);
}

.gamepad-up.is-active {
  transform: translateX(-50%) translateY(1px);
}

.gamepad-down.is-active {
  transform: translateX(-50%) translateY(1px);
}

.gamepad-left.is-active,
.gamepad-right.is-active,
.gamepad-fire.is-active,
.gamepad-target.is-active {
  transform: translateY(1px);
}

.progression-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: min(420px, calc(100% - 32px));
  gap: 6px;
  border: 1px solid var(--gravity-blue-glass-border);
  border-radius: 8px;
  background: var(--gravity-blue-glass-strong);
  box-shadow: 0 18px 48px rgba(0, 8, 16, 0.3), inset 0 0 24px rgba(101, 225, 255, 0.12);
  color: var(--gravity-blue-glass-text);
  padding: 14px 18px;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: progression-pop 2600ms ease both;
}

.progression-banner.hidden {
  display: none;
}

.progression-banner span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.progression-banner strong {
  overflow: hidden;
  color: var(--cyan);
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progression-banner p {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
}

@keyframes progression-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 10px)) scale(0.98);
  }

  10%,
  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 8px)) scale(0.99);
  }
}

canvas {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  max-height: min(64vh, 720px);
  background: var(--gravity-game-bg);
  touch-action: none;
}

.game-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: rgba(var(--surface-rgb), 0.84);
}

.game-overlay.hidden {
  display: none;
}

.game-overlay.is-paused-overlay .primary {
  display: none;
}

.game-overlay h2 {
  color: var(--text);
  font-size: clamp(2rem, 4.2vw, 3.7rem);
  line-height: 0.96;
  margin: 0;
}

#status {
  max-width: 560px;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.5;
}

.control-deck {
  position: absolute;
  right: auto;
  bottom: 12px;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(760px, calc(100% - 24px));
  min-height: 0;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px);
  padding: 10px 14px;
  transform: translateX(-50%);
}

.touch-controls {
  display: none;
}

.control-button {
  min-width: 76px;
  border-color: rgba(var(--primary-rgb), 0.5);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.34), transparent 25%),
    var(--cyan);
  color: #031216;
  box-shadow: 0 14px 38px rgba(var(--primary-rgb), 0.2);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.control-button.fire {
  border-color: rgba(var(--secondary-rgb), 0.72);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.34), transparent 25%),
    var(--gold);
  box-shadow: 0 14px 38px rgba(var(--secondary-rgb), 0.18);
}

.control-button.target {
  border-color: rgba(125, 255, 178, 0.72);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.34), transparent 25%),
    #7dffb2;
  box-shadow: 0 14px 38px rgba(125, 255, 178, 0.16);
}

.control-button.is-active {
  transform: translateY(1px);
  filter: brightness(1.12);
}

html.has-fullscreen-fallback,
body.has-fullscreen-fallback {
  overflow: hidden !important;
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}

body.has-fullscreen-fallback {
  position: fixed;
  inset: 0;
}

body.has-fullscreen-fallback .gravity-shell,
body.has-fullscreen-fallback .gravity-panel {
  display: block;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

body.has-fullscreen-fallback .gravity-header,
body.has-fullscreen-fallback .mission-panel {
  display: none !important;
}

.game-stage:fullscreen,
.game-stage.is-fullscreen-fallback,
body.has-fullscreen-fallback .game-stage {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647;
  display: grid !important;
  place-items: center;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--gravity-game-bg);
  box-shadow: none;
}

.game-stage.is-fullscreen-fallback {
  position: fixed !important;
}

.game-stage:fullscreen canvas,
.game-stage.is-fullscreen-fallback canvas,
body.has-fullscreen-fallback .game-stage canvas {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
}

.game-stage:fullscreen .gravity-status-bar,
.game-stage.is-fullscreen-fallback .gravity-status-bar,
body.has-fullscreen-fallback .game-stage .gravity-status-bar {
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  transform: none;
  width: auto;
}

.game-stage:fullscreen .ship-health,
.game-stage.is-fullscreen-fallback .ship-health,
body.has-fullscreen-fallback .game-stage .ship-health {
  bottom: max(18px, env(safe-area-inset-bottom));
}

.game-stage:fullscreen .health-meter,
.game-stage.is-fullscreen-fallback .health-meter,
body.has-fullscreen-fallback .game-stage .health-meter {
  background: rgba(8, 58, 92, 0.24);
}

.game-stage:fullscreen .control-deck,
.game-stage.is-fullscreen-fallback .control-deck,
body.has-fullscreen-fallback .game-stage .control-deck {
  display: none;
}

.game-stage:fullscreen .field-fullscreen-enter,
.game-stage.is-fullscreen-fallback .field-fullscreen-enter,
body.has-fullscreen-fallback .game-stage .field-fullscreen-enter {
  display: none;
}

.game-stage:fullscreen .field-fullscreen-exit,
.game-stage.is-fullscreen-fallback .field-fullscreen-exit,
body.has-fullscreen-fallback .game-stage .field-fullscreen-exit {
  display: grid;
}

@media (max-width: 840px), (pointer: coarse) {
  .game-stage.is-playing .mobile-gamepad,
  .game-stage:fullscreen.is-playing .mobile-gamepad,
  .game-stage.is-fullscreen-fallback.is-playing .mobile-gamepad,
  body.has-fullscreen-fallback .game-stage.is-playing .mobile-gamepad {
    display: grid;
  }

  .game-stage:fullscreen .gamepad-dpad,
  .game-stage.is-fullscreen-fallback .gamepad-dpad,
  body.has-fullscreen-fallback .game-stage .gamepad-dpad,
  .game-stage:fullscreen .gamepad-button,
  .game-stage.is-fullscreen-fallback .gamepad-button,
  body.has-fullscreen-fallback .game-stage .gamepad-button,
  .game-stage:fullscreen .gamepad-utility,
  .game-stage.is-fullscreen-fallback .gamepad-utility,
  body.has-fullscreen-fallback .game-stage .gamepad-utility {
    backdrop-filter: blur(12px);
  }

  .game-stage:fullscreen .gamepad-dpad,
  .game-stage.is-fullscreen-fallback .gamepad-dpad,
  body.has-fullscreen-fallback .game-stage .gamepad-dpad {
    border-color: var(--gravity-blue-glass-border) !important;
    background: radial-gradient(circle at 50% 50%, rgba(28, 151, 207, 0.14), rgba(8, 58, 92, 0.05)) !important;
    box-shadow: 0 14px 34px rgba(0, 8, 16, 0.12), inset 0 0 18px rgba(101, 225, 255, 0.08) !important;
  }

  .game-stage:fullscreen .gamepad-button,
  .game-stage:fullscreen .gamepad-utility,
  .game-stage.is-fullscreen-fallback .gamepad-button,
  .game-stage.is-fullscreen-fallback .gamepad-utility,
  body.has-fullscreen-fallback .game-stage .gamepad-button,
  body.has-fullscreen-fallback .game-stage .gamepad-utility {
    border-color: var(--gravity-blue-glass-border) !important;
    background:
      radial-gradient(circle at 35% 25%, rgba(218, 247, 255, 0.1), transparent 28%),
      rgba(20, 119, 170, 0.11) !important;
    color: var(--gravity-blue-glass-text) !important;
    box-shadow: 0 10px 28px rgba(0, 8, 16, 0.13), inset 0 0 16px rgba(101, 225, 255, 0.07) !important;
  }

  .game-stage:fullscreen .gamepad-fire,
  .game-stage.is-fullscreen-fallback .gamepad-fire,
  body.has-fullscreen-fallback .game-stage .gamepad-fire {
    background:
      radial-gradient(circle at 35% 25%, rgba(218, 247, 255, 0.12), transparent 28%),
      rgba(28, 151, 207, 0.17) !important;
  }
}

@media (max-width: 840px) {
  .gravity-shell {
    align-items: stretch;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .gravity-status-bar,
  .mission-panel {
    grid-template-columns: 1fr;
  }

  .gravity-status-bar {
    width: min(calc(100% - 16px), 680px);
    padding: 6px 9px;
  }

  .scoreboard {
    justify-content: flex-start;
    overflow: hidden;
  }

  .progress-cluster {
    flex: 1 1 auto;
  }

  .hud-cell {
    padding: 0 7px;
  }

  .scoreboard span {
    font-size: 0.58rem;
  }

  .scoreboard strong {
    font-size: 0.76rem;
  }

  .ship-health {
    bottom: max(18px, env(safe-area-inset-bottom));
    width: min(178px, calc(100% - 190px));
    padding: 7px 10px;
  }

  .control-deck {
    display: none;
  }

  .mobile-gamepad {
    padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    grid-template-columns: minmax(150px, auto) minmax(94px, auto);
  }

  .gamepad-dpad {
    width: 152px;
    height: 152px;
  }

  .gamepad-button {
    width: 52px;
    height: 52px;
  }

  .gamepad-up {
    top: 8px;
  }

  .gamepad-left {
    top: 50px;
    left: 10px;
  }

  .gamepad-right {
    top: 50px;
    right: 10px;
  }

  .gamepad-down {
    bottom: 8px;
  }

  .gamepad-action-pad {
    justify-self: end;
  }

  .gamepad-utility-row {
    top: max(146px, calc(env(safe-area-inset-top) + 136px));
    right: max(12px, env(safe-area-inset-right));
  }

  .gamepad-utility {
    width: 36px;
    height: 36px;
  }

  .gamepad-action-buttons {
    grid-template-columns: 52px 86px;
    gap: 9px;
  }

  .gamepad-fire {
    width: 86px;
    height: 86px;
  }

  canvas {
    max-height: calc(100dvh - 236px);
  }
}

@media (max-width: 840px) and (orientation: landscape) {
  .gravity-panel {
    gap: 8px;
  }

  .mission-panel {
    display: none;
  }

  .gravity-status-bar {
    padding: 5px 8px;
  }

  .scoreboard {
    justify-content: flex-start;
  }

  .progress-cluster {
    flex: 1 1 auto;
  }

  .scoreboard span,
  .control-hint {
    font-size: 0.6rem;
  }

  .hud-cell {
    padding: 0 7px;
  }

  .mobile-gamepad {
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .gamepad-utility-row {
    top: max(78px, calc(env(safe-area-inset-top) + 70px));
    right: max(14px, env(safe-area-inset-right));
  }

  .ship-health {
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 168px;
  }

  .gamepad-dpad {
    width: 144px;
    height: 144px;
  }

  .gamepad-action-buttons {
    grid-template-columns: 50px 80px;
    gap: 8px;
  }

  .gamepad-fire {
    width: 80px;
    height: 80px;
  }

  canvas {
    max-height: calc(100dvh - 92px);
  }
}


/* Gravity Well only: finite resources and a separate missile action. */
.gravity-panel { min-width: 0; }
.game-stage { min-width: 0; }
.ship-health,
.game-stage:fullscreen .ship-health,
.game-stage.is-fullscreen-fallback .ship-health {
  width: min(580px, calc(100% - 32px));
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  bottom: 98px;
  padding: 10px 14px;
}
.game-stage.is-live-hud .ship-health { display: grid; }
.resource-cell { display: grid; grid-template-columns: auto auto; gap: 6px; min-width: 0; }
.resource-cell .health-meter { grid-column: 1 / -1; height: 6px; }
.shield-resource .health-meter span { background: linear-gradient(90deg, #8754d8, #d9a9ff); }
.shield-resource strong { color: #dcbaff; }
.ammo-resource strong { color: #ffd185; }
.ammo-resource small { grid-column: 1 / -1; color: #edd1a4; font-size: 0.68rem; white-space: nowrap; }
.control-deck { padding: 12px 14px; }
.combat-feedback { position: absolute; z-index: 5; top: 52px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 7px 12px; border: 1px solid #ac83ce; border-radius: 8px; background: rgba(20, 12, 33, .9); color: #f4e9ff; font: 600 .8rem/1.3 system-ui,sans-serif; pointer-events: none; }
.hidden { display: none !important; }
.pickup-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin:0; font-size:.8rem; }
.ammo-legend { color: #ffd185; }.shield-legend { color:#dcbaff; }
.gamepad-missile { position:relative; width:62px; height:62px; border-color:#f5b769; color:#ffd185; background:rgba(100,60,15,.25); }
.gamepad-missile.is-unavailable { opacity:.65; }
.control-icon-missile::before { content:""; position:absolute; width:8px; height:18px; left:7px; top:1px; background:currentColor; clip-path:polygon(50% 0,100% 35%,100% 100%,0 100%,0 35%); }
.control-icon-missile::after { content:""; position:absolute; left:3px; right:3px; bottom:0; height:7px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.action-label { position:absolute; bottom:5px; font-size:.5rem; line-height:1; letter-spacing:.03em; }
.gamepad-action-buttons { grid-template-columns:62px 58px 86px; gap:8px; }
@media (max-width:840px), (pointer:coarse) {
  .ship-health, .game-stage:fullscreen .ship-health, .game-stage.is-fullscreen-fallback .ship-health {
    top: 48px; bottom:auto; width:calc(100% - 24px); gap:10px; padding:7px 9px;
  }
  .ship-health span { font-size:.58rem; }.ship-health strong { font-size:.8rem; }
  .ammo-resource small { font-size:.58rem; }
  .combat-feedback { top:110px; font-size:.7rem; }
  .gamepad-action-buttons { grid-template-columns:48px 62px; grid-template-rows:48px 62px; gap:7px; }
  .gamepad-target { width:48px; height:48px; grid-column:1; grid-row:1; }
  .gamepad-missile { width:48px; height:48px; grid-column:2; grid-row:1; }
  .gamepad-fire { width:62px; height:62px; grid-column:2; grid-row:2; }
  .gamepad-dpad { width:132px; height:132px; }
  .gamepad-button:not(.gamepad-fire) { width:44px; height:44px; }
  .gamepad-left { top:44px; left:7px; }.gamepad-right { top:44px; right:7px; }
  .gamepad-up { top:7px; }.gamepad-down { bottom:7px; }
  .mobile-gamepad { grid-template-columns:132px 117px; padding:12px; gap:12px; }
  .gamepad-utility-row { top:116px; right:12px; }
  .gravity-header { padding:10px; gap:10px; }
  .gravity-header .header-actions { font-size:.7rem; text-align:right; }
}
@media (max-width:840px) and (orientation:portrait) {
  .game-stage { min-height: min(600px, calc(100dvh - 200px)); }
  canvas { max-height:none; }
}
@media (max-width:840px) and (orientation:landscape) {
  .gamepad-utility-row { top:auto; bottom:12px; left:50%; right:auto; transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce) { .progression-banner { animation:none; } .health-meter span { transition:none; } }
@media (max-width:840px) and (orientation:portrait) {
  .gravity-panel { gap:8px; }
  .mission-panel { gap:8px; padding:10px 12px; }
  .mission-panel h1 { font-size:1.5rem; }
  .mission-panel p:not(.eyebrow) { font-size:.78rem; line-height:1.35; }
  .mission-panel .eyebrow { margin:0 0 4px; }
  .game-stage { min-height:calc(100dvh - 190px); }
}
/* Mobile revision: status and controls occupy their own space outside the canvas. */
.gw-flight .gravity-panel{grid-template-rows:auto auto;gap:10px}
.gw-flight .game-stage{overflow:visible;display:grid;grid-template-rows:58px auto;grid-template-columns:minmax(0,1fr);background:#080c18;border-color:#d2cabc;padding:0;align-items:center}
.gw-flight canvas{grid-row:2;grid-column:1;max-height:none;border-radius:0 0 8px 8px}
.gw-flight .ship-health,.gw-flight .game-stage:fullscreen .ship-health,.gw-flight .game-stage.is-fullscreen-fallback .ship-health{position:static;grid-row:1;grid-column:1;transform:none;top:auto;bottom:auto;left:auto;width:calc(100% - 66px);margin:0 8px;padding:8px;border:0;background:transparent;box-shadow:none;backdrop-filter:none;gap:12px;display:grid}
.gw-flight .ship-health span{font-size:11px;letter-spacing:0;line-height:1.2}.gw-flight .ship-health strong{font-size:14px}.gw-flight .ammo-resource small{display:none}.gw-flight .health-meter{height:4px}
.flight-menu{position:absolute;right:8px;top:7px;z-index:12;color:#f2edf9}.flight-menu summary{display:grid;place-content:center;list-style:none;width:50px;border:1px solid #76628c;border-radius:8px;background:#221b33;font-size:13px}.flight-menu summary::-webkit-details-marker{display:none}
.flight-menu-panel{position:absolute;right:0;top:52px;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 115px);overflow:auto;border:1px solid #c9c0b0;border-radius:12px;padding:16px;background:#faf6ed;color:#183c35;box-shadow:0 14px 40px #0008}
.flight-menu .mission-panel{display:block;border:0;background:transparent;box-shadow:none;padding:0}.flight-menu .mission-panel h1{font:700 24px Georgia,serif}.flight-menu .mission-panel p{font-size:14px;font-weight:400}.flight-menu .gravity-status-bar{position:static;transform:none;width:100%;padding:10px 0;border:0;box-shadow:none;backdrop-filter:none;background:transparent}.flight-menu .scoreboard{flex-wrap:wrap;justify-content:start;gap:8px}.flight-menu .scoreboard span,.flight-menu .scoreboard strong{color:#183c35;font-size:13px}.flight-menu .hud-cell{padding:0;border:0}.flight-menu .progress-cluster{flex-basis:100%}.menu-help{font-size:14px;line-height:1.5}.flight-menu .gamepad-utility-row{position:static;transform:none;display:flex;gap:8px;margin:12px 0}.flight-menu .gamepad-utility{background:#183c35;color:#fffdf6;width:44px;height:44px}.flight-menu .control-deck{display:none}.flight-menu-panel>button{margin:4px 4px 0 0}.gw-flight .combat-feedback{top:auto;bottom:10px;z-index:5;font-size:13px;background:#221b33d9;padding:5px 10px}.gw-flight .game-overlay{inset:58px 0 0;z-index:8;border-radius:0 0 8px 8px;background:#faf6edf2;padding:20px}.gw-flight .game-overlay h2{font-family:Georgia,serif;font-size:32px}.gw-flight #status{font-size:16px;margin:0}.gw-flight .game-overlay.is-paused-overlay .primary{display:block}.gw-flight .game-overlay.is-paused-overlay .pickup-legend{display:none}.gw-flight .progression-banner{padding:8px 12px;max-width:80%;animation-duration:1600ms}.gw-flight .progression-banner p{display:none}
@media(max-width:1024px),(pointer:coarse){
 .gw-flight .gravity-shell{display:block;min-height:100dvh;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
 .gw-flight .gravity-header{padding:4px 4px}.gw-flight .brand span{font-size:20px}.gw-flight .details-link{font-size:12px}
 .gw-flight .game-stage{min-height:0;grid-template-rows:52px auto 152px;gap:0}
 .gw-flight canvas{grid-row:2;width:100%;height:auto;max-height:none;aspect-ratio:3/2;object-fit:contain;border-radius:0}
 .gw-flight .ship-health{width:calc(100% - 64px);gap:8px;margin:0 6px;padding:6px 2px}.gw-flight .ship-health span{font-size:11px}.gw-flight .ship-health strong{font-size:14px}
 .gw-flight .mobile-gamepad{position:static;grid-row:3;grid-column:1;inset:auto;grid-template-columns:132px 116px;padding:8px 10px max(8px,env(safe-area-inset-bottom));gap:8px;border-top:1px solid #3b304b;background:#121121;border-radius:0 0 8px 8px;align-items:center}
 .gw-flight .gamepad-dpad{width:132px;height:132px;align-self:center;background:transparent;box-shadow:none;border:0}.gw-flight .gamepad-action-pad{align-self:center}
 .gw-flight .gamepad-button:not(.gamepad-fire){width:44px;height:44px}.gw-flight .gamepad-action-buttons{grid-template-columns:48px 60px;grid-template-rows:52px 60px;gap:6px}.gw-flight .gamepad-target,.gw-flight .gamepad-missile{height:48px!important;width:48px!important}.gw-flight .gamepad-fire{height:60px;width:60px}
 .gw-flight .action-label{font-size:10px;bottom:5px}.gw-flight .gamepad-target .control-icon,.gw-flight .gamepad-missile .control-icon{transform:scale(.65) translateY(-5px)}.gw-flight .gamepad-fire .control-icon{transform:translateY(-5px)}
 .gw-flight .combat-feedback{bottom:156px;max-width:calc(100% - 20px)}.gw-flight .game-overlay{inset:52px 0 152px;gap:8px;padding:12px}.gw-flight .game-overlay h2{font-size:26px}.gw-flight #status{font-size:14px;line-height:1.35}.gw-flight .game-overlay .eyebrow,.gw-flight .game-overlay .pickup-legend{display:none}
 .gw-flight .game-stage:not(.is-playing){grid-template-rows:52px minmax(240px,auto) 0}.gw-flight .game-stage:not(.is-playing) .game-overlay{bottom:0}
 .gw-flight .game-stage:fullscreen,.gw-flight .game-stage.is-fullscreen-fallback{display:grid!important;grid-template-rows:52px minmax(0,1fr) 152px;place-items:center stretch}.gw-flight .game-stage:fullscreen canvas,.gw-flight .game-stage.is-fullscreen-fallback canvas{height:100%;width:100%;object-fit:contain}
}
@media(max-width:1024px) and (orientation:landscape){
 .gw-flight .gravity-header{display:none}.gw-flight .gravity-panel{gap:0}
 .gw-flight .game-stage,.gw-flight .game-stage:fullscreen,.gw-flight .game-stage.is-fullscreen-fallback{grid-template-columns:138px minmax(0,1fr) 124px;grid-template-rows:52px minmax(0,1fr);height:calc(100dvh - 12px);min-height:0}
 .gw-flight canvas{grid-row:2;grid-column:2;width:100%;height:100%;object-fit:contain;aspect-ratio:auto;max-height:calc(100dvh - 66px)}
 .gw-flight .ship-health{grid-column:1/-1;width:min(480px,calc(100% - 66px))}
 .gw-flight .mobile-gamepad,.gw-flight .game-stage.is-playing .mobile-gamepad{display:contents}.gw-flight .gamepad-dpad{grid-row:2;grid-column:1;justify-self:center}.gw-flight .gamepad-action-pad{grid-row:2;grid-column:3;justify-self:center}
 .gw-flight .game-overlay{inset:52px 124px 0 138px}.gw-flight .game-stage:not(.is-playing){grid-template-rows:52px minmax(0,1fr)}.gw-flight .game-stage:not(.is-playing) .mobile-gamepad{display:none}
 .gw-flight .combat-feedback{bottom:8px;max-width:calc(100% - 280px)}.flight-menu-panel{max-height:calc(100dvh - 76px)}
}
@media(max-width:1024px),(pointer:coarse){.gw-flight .resource-cell{grid-template-columns:1fr;gap:1px}.gw-flight .resource-cell strong{justify-self:start}.gw-flight .resource-cell .health-meter{height:3px}.gw-flight .ship-health{justify-self:start;align-self:center}.gw-flight .game-overlay{overflow:auto}.gw-flight .gamepad-button{padding:0}}
.gw-flight .gamepad-target,.gw-flight .gamepad-fire{position:relative}
@media(max-width:1024px) and (orientation:portrait){.gw-flight .game-stage{grid-template-rows:52px auto 174px}.gw-flight .mobile-gamepad{height:174px;padding-top:28px;align-self:stretch;width:100%;justify-self:stretch}.gw-flight .combat-feedback{bottom:146px;margin:0;padding:3px 8px;font-size:12px;line-height:1.3}.gw-flight .game-overlay{bottom:174px}.gw-flight .game-stage:fullscreen,.gw-flight .game-stage.is-fullscreen-fallback{grid-template-rows:52px minmax(0,1fr) 174px}}

@media(max-width:1024px),(pointer:coarse){.gw-flight .game-stage.is-playing .mobile-gamepad{display:grid}}
@media(max-width:1024px) and (orientation:landscape){.gw-flight .game-stage.is-playing .mobile-gamepad{display:contents}}
@media(max-width:1024px),(pointer:coarse){.gw-flight .gamepad-target{grid-column:1;grid-row:1}.gw-flight .gamepad-missile{grid-column:2;grid-row:1}.gw-flight .gamepad-fire{grid-column:2;grid-row:2}}
@media(max-width:1024px) and (orientation:landscape){.gw-flight .game-stage,.gw-flight .game-stage:fullscreen,.gw-flight .game-stage.is-fullscreen-fallback{grid-template-columns:138px minmax(0,1fr) 134px}.gw-flight .game-overlay{right:134px}}
.gw-flight .ship-health{justify-self:start}
.gw-flight .game-overlay .ammo-legend{color:#8e5015}.gw-flight .game-overlay .shield-legend{color:#704197}
@media(min-width:1025px) and (pointer:fine){.gw-flight canvas{max-height:min(70dvh,720px);object-fit:contain}.gw-flight .game-overlay .primary{justify-self:center;width:min(360px,100%)}}