/* Космопорт: the game's dark station UI, teal accents and monospace captions. */
:root {
  --bg: #0a1521; --panel: #111c2b; --line: #24384d; --ink: #dce8f1; --muted: #8196a9;
  --accent: #35e0cf; --accent-ink: #06121c; --radius: 6px;
  --font-display: Consolas, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
}
/* Stars and the faint board grid from the game field. */
.backdrop {
  background:
    radial-gradient(circle, rgba(220, 232, 241, .5) .8px, transparent 1.2px) 0 0 / 71px 67px,
    radial-gradient(circle, rgba(53, 224, 207, .35) .8px, transparent 1.2px) 23px 41px / 131px 97px,
    linear-gradient(rgba(53, 224, 207, .05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(53, 224, 207, .05) 1px, transparent 1px) 0 0 / 40px 40px;
  mask-image: linear-gradient(#000, transparent);
}
h1 { text-transform: uppercase; letter-spacing: .06em; font-size: clamp(2rem, 9vw, 3.6rem); }
.lead { color: #bccbd8; }
.kicker, .section-head h2 { font-family: var(--font-display); }
.title img { border-radius: 10px; box-shadow: 0 0 0 1px var(--accent), 0 0 36px rgba(53, 224, 207, .3); }
.cards li, .steps li, .button { border-color: var(--line); }
.steps li::before { content: "// " counter(step, decimal-leading-zero); }
.districts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 820px) { .districts { grid-template-columns: repeat(3, 1fr); } }
.districts li {
  padding: 18px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line));
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, var(--panel)), var(--panel));
}
.districts .tag { margin: 0; font: 600 .74rem var(--font-display); letter-spacing: .12em; color: var(--c); text-transform: uppercase; }
.districts h3 { margin: 6px 0 4px; font-size: 1.1rem; }
.districts p { margin: 0; color: var(--muted); font-size: .92rem; }