:root {
    --void:   #15002e;
    --deep:   #2a0a52;
    --ink:    #fdf3ff;
    --dim:    #c8a8ff;
    --cyan:   #00f0ff;
    --magenta:#ff2fd0;
    --amber:  #b6ff2f;
    --plate:  #2a0a52;
    --edge:   #ff2fd0;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; min-height: 100%; }
  body {
    background:
      radial-gradient(120% 80% at 50% -20%, #1d2a63 0%, transparent 60%),
      linear-gradient(180deg, var(--deep) 0%, var(--void) 70%);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
  }
  /* Фон — настоящий снимок: Hubble Ultra Deep Field (NASA/ESA, общественное
     достояние). Одна картинка 206 КБ, рисуется браузером один раз и больше не
     трогается: ни кадров, ни таймеров. */
  .stars {
    position: fixed; inset: 0; z-index: -1;
    background: url('img/space_px.png') center / cover no-repeat;
    image-rendering: pixelated;
    opacity: 0.72;
    pointer-events: none;
  }
  .stars2 {                      /* лёгкое затемнение к низу, чтобы текст читался */
    position: fixed; inset: 0; z-index: -1;
    background: linear-gradient(180deg, #080b1fcc 0%, #080b1f66 35%, #080b1fee 100%);
    pointer-events: none;
  }

  /* Ползущее звёздное поле — приём из игр 90-х. Слой сдвигается ровно на размер
     своей плитки, поэтому цикл незаметен, а плитка бесшовная (зеркальная склейка
     куска того же снимка). Двигаем transform'ом: это делает видеокарта, страница
     не перерисовывается и память не растёт. */
  .drift {
    filter: hue-rotate(280deg) saturate(2.2);
    position: fixed;
    top: -256px; left: -256px; right: -256px; bottom: -256px;
    z-index: -1;
    background: url('img/startile.webp') repeat;
    background-size: 256px 256px;
    opacity: 0.42;
    pointer-events: none;
    animation: drift 150s linear infinite;
  }
  @keyframes drift { to { transform: translate3d(-256px, -256px, 0); } }
  .calm .drift { animation: none; }
  @media (prefers-reduced-motion: reduce) { .drift { animation: none; } }

  .wrap { max-width: 1080px; margin: 0 auto; padding: 28px 18px 48px; }

  header { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
  h1 {
    font-family: var(--mono);
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    letter-spacing: -0.02em;
    margin: 0;
    text-shadow: 4px 4px 0 var(--magenta), 8px 8px 0 #00000060;
  }
  h1 b { color: var(--cyan); font-weight: 700; }
  .tagline { color: var(--dim); margin: 6px 0 0; font-size: 0.98rem; }
  .grow { flex: 1 1 auto; }

  /* переключатель вида — тот же в обеих версиях */
  .switch {
    display: inline-flex;
    font-family: var(--mono);
    font-size: 0.76rem;
    border: 3px solid currentColor;
    background: var(--plate);
    box-shadow: 3px 3px 0 #00000066;
  }
  .switch a, .switch span {
    padding: 7px 12px;
    text-decoration: none;
    color: var(--dim);
    letter-spacing: 0.06em;
  }
  .switch .on { background: var(--cyan); color: #04122a; font-weight: 700; }
  .switch a:hover, .switch a:focus-visible { color: var(--ink); background: #1b2554; outline: none; }

  /* карта миров */
  .cell { position: relative; display: grid; }
  /* свой цвет каждой карточке: --c используется и рамкой, и кнопкой */
  .cell:nth-child(1) { --c: var(--magenta); color: var(--c); }
  .cell:nth-child(2) { --c: var(--cyan);    color: var(--c); }
  .cell:nth-child(3) { --c: var(--amber);   color: var(--c); }
  .cell:nth-child(4) { --c: #ff8a00;        color: var(--c); }
  .cell:nth-child(5) { --c: #a45bff;        color: var(--c); }
  .cell .nm { color: currentColor; }   /* точка отсчёта для кнопки .apk */
  .map {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
  }
  a.world {
    display: block;
    text-align: center;
    padding: 18px 12px 14px;
    text-decoration: none;
    color: inherit;
    background: #1d0540e0;
    border: 3px solid currentColor;
    box-shadow: 6px 6px 0 currentColor;
    transition: transform .12s steps(2), border-color .12s, box-shadow .12s;
  }
  a.world:hover, a.world:focus-visible {
    transform: translate(-2px, -2px);
    border-color: var(--cyan);
    box-shadow: 6px 6px 0 #00000090;
    outline: none;
  }
  a.world:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #00000090; }

  .planet {
    width: 112px; height: 112px;
    image-rendering: pixelated;              /* крупный пиксель, как в 90-х */
    display: block; margin: 0 auto 10px;
    filter: drop-shadow(0 6px 0 #00000055);
  }
  a.world:nth-child(2n) .planet { animation-delay: -3s; }
  a.world:nth-child(3n) .planet { animation-delay: -5s; }

  .nm {
    font-family: var(--mono);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: block;
  }
  .ru { color: var(--ink); font-size: 1.02rem; font-weight: 600; }
  .ds { color: var(--dim); font-size: 0.85rem; margin: 4px 0 8px; min-height: 2.6em; }
  .ad {
    margin-top: auto;            /* прижат к низу: черта выравнивается по всем карточкам */
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--cyan);
    letter-spacing: 0.02em;
    border-top: 2px solid var(--edge);
    padding-top: 7px;
    display: block;
  }
  a.world:hover .ad, a.world:focus-visible .ad { color: var(--amber); }

  /* ссылка на сборку для Android — рядом с карточкой, а не внутри неё:
     вкладывать ссылку в ссылку нельзя */
  /* Кнопка сборки — отдельной полосой ПОД карточкой. Раньше она лежала поверх
     и наезжала на адрес. */
  .cell { grid-template-rows: 1fr auto; }
  .apk {
    display: block;
    text-align: center;
    font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.1em; text-decoration: none;
    color: var(--c);              /* тёмный фон, яркие буквы */
    background: #1d0540e0;
    border: 3px solid var(--c);
    padding: 6px 8px;
    margin-top: 6px;
    box-shadow: 6px 6px 0 #00000070;
  }
  .apk span { color: var(--c); }
  /* при наведении кнопка загорается */
  .apk:hover, .apk:focus-visible { background: var(--c); outline: none; }
  .apk:hover span, .apk:focus-visible span { color: #12002b; }
  .apk:hover, .apk:focus-visible { color: #04122a; background: var(--cyan); outline: none; }

  footer {
    margin-top: 30px;
    color: var(--dim);
    font-size: 0.82rem;
    border-top: 2px solid var(--edge);
    padding-top: 12px;
  }
  footer b { color: var(--magenta); font-weight: 600; }

  /* Единственная анимация на странице — очень медленное покачивание планет.
     Только transform, поэтому работает на композиторе и почти не греет батарею. */
  @keyframes bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
  .planet { animation: bob 7s ease-in-out infinite alternate; }
  .calm .planet, .calm a.world { animation: none !important; transition: none !important; }
  @media (prefers-reduced-motion: reduce) {
    .planet { animation: none; }
    a.world { transition: none; }
  }
  @media (max-width: 460px) {
    .map { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .planet { width: 84px; height: 84px; }
    .ds { display: none; }               /* на узком экране — только имя и адрес */
  }