.flight-page {
  --game-accent: #7cffb2;
  --game-accent-2: #76cfff;
  --game-danger: #ff6f8f;
  --game-panel: rgba(10, 15, 21, 0.78);
}

.flight-page .game-main {
  width: min(1420px, calc(100% - 28px));
}

.flight-page .game-top {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
}

.flight-page .game-hero {
  border-color: color-mix(in srgb, var(--game-accent) 28%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--game-accent) 13%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}

.flight-page .game-hero h1 {
  max-width: 13ch;
}

.flight-rule-row,
.flight-panel-grid,
.flight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.flight-rule-row {
  margin-top: 14px;
}

.flight-stage-wrap {
  border-color: color-mix(in srgb, var(--game-accent) 25%, transparent);
  background:
    radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--game-accent) 16%, transparent), transparent 36%),
    #05080c;
}

.flight-stage canvas {
  height: min(73vh, 760px);
}

.flight-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--game-accent) 7%, transparent), transparent 45%),
    var(--game-panel);
}

.flight-mini-card {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.flight-mini-card span,
.flight-callout span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.flight-mini-card strong,
.flight-callout strong {
  display: block;
  color: var(--game-accent);
  font-size: 17px;
  line-height: 1.15;
}

.flight-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flight-callout {
  border: 1px solid color-mix(in srgb, var(--game-accent) 22%, transparent);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.flight-copy {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.flight-stage .stage-overlay-card {
  border-color: color-mix(in srgb, var(--game-accent) 32%, transparent);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
}

.flight-stage .stage-overlay h2 {
  color: #fff;
}

.flight-stage .btn.primary {
  border-color: color-mix(in srgb, var(--game-accent) 38%, transparent);
}

.flight-touch {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.starbridge-page {
  --game-accent: #76cfff;
  --game-accent-2: #b386ff;
}

.canyon-page {
  --game-accent: #ffc766;
  --game-accent-2: #7cffb2;
}

.cargo-page {
  --game-accent: #7cffb2;
  --game-accent-2: #76cfff;
}

.reactor-page {
  --game-accent: #ff7cb8;
  --game-accent-2: #8da1ff;
}

@media (max-width: 980px) {
  .flight-page .game-top {
    grid-template-columns: 1fr;
  }

  .flight-touch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .flight-page .game-main {
    width: min(100% - 18px, 1420px);
    padding-top: 10px;
  }

  .flight-panel-grid {
    grid-template-columns: 1fr;
  }

  .flight-stage-wrap {
    padding: 8px;
  }

  .flight-touch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}