/* «Скачать игру» (задача 56, 2026-09-28): крупный заголовок по центру; под ним две карточки систем — стекло панелей
   сайта, крупный логотип, имя системы, золотая кнопка шапки крупнее и размер архива; ниже — три шага установки.
   Наведение: кромка карточки золотеет, логотип светится золотом, карточка приподнимается. */

.download {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  text-align: center;
}

.download__head {
  max-width: var(--text-width);
}

.download__lead {
  margin-top: var(--space-3);
  font-size: var(--nav-size);
  color: var(--color-text-muted);
}

.download__platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--platform-width)));
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
}

.platform {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
  animation: platform-enter var(--speed-slow) var(--ease) both;
}

.platform + .platform {
  animation-delay: var(--speed-fast);
}

.platform:hover,
.platform:focus-within {
  border-color: var(--color-accent);
  transform: translateY(calc(-1 * var(--space-1)));
  box-shadow: 0 var(--space-3) var(--space-5) rgba(0, 0, 0, 0.55), 0 0 var(--space-4) var(--color-accent-soft);
}

.platform__logo {
  width: var(--platform-logo);
  height: var(--platform-logo);
  color: var(--color-text);
  transition: color var(--speed) var(--ease), filter var(--speed) var(--ease);
}

.platform:hover .platform__logo,
.platform:focus-within .platform__logo {
  color: var(--color-accent);
  filter: drop-shadow(0 0 var(--space-3) var(--accent-glow));
}

/* Значок Android — контур Lucide: толщина линии, а не заливка, как у Simple Icons. */
.platform__logo--line {
  stroke-width: 1.6;
}

.platform__name {
  font-family: var(--font-accent);
  font-size: 2rem;
  line-height: 1.1;
}

.platform__meta,
.platform__size {
  color: var(--color-text-muted);
}

.platform__size {
  font-size: 0.875rem;
}

/* Кнопка — та же, что «Скачать игру» в шапке (site-nav.css), крупнее. Ссылки ещё нет — «Скоро», серая, не нажимается. */
.platform__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--button-big-height);
  padding: 0 var(--space-4);
  font-family: var(--font-accent);
  font-size: var(--nav-size);
  text-transform: uppercase;
  color: var(--color-on-accent);
  background: linear-gradient(to bottom, var(--color-accent-light), var(--color-accent) 45%, var(--color-accent-deep));
  border: 1px solid var(--color-accent-deep);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: filter var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease);
}

.platform__button:hover,
.platform__button:focus-visible {
  filter: brightness(1.12);
  outline: none;
}

.platform__button:active {
  transform: translateY(1px);
}

.platform__button.is-soon {
  filter: grayscale(1) brightness(0.6);
  pointer-events: none;
}

.download__steps {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: calc(2 * var(--platform-width) + var(--space-4));
  padding: var(--space-4);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
}

.download__steps-title {
  font-family: var(--font-accent);
  font-size: 1.5rem;
}

.download__step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Номер шага — золотой кружок с тёмной цифрой, как у кнопки. */
.download__step::before {
  content: attr(data-step);
  display: grid;
  place-items: center;
  flex: none;
  width: var(--step-number);
  height: var(--step-number);
  font-family: var(--font-accent);
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-radius: 50%;
}

/* Mac: одна команда в Терминале — моноширинным на тёмной плашке, выделяется целиком. */
.download__note {
  color: var(--color-text-muted);
}

.download__code {
  padding: 0 var(--space-1);
  font-family: Consolas, Menlo, monospace;
  color: var(--color-text);
  background: var(--color-head);
  border-radius: var(--space-1);
  user-select: all;
}

.download__chat {
  color: var(--color-accent);
}

@keyframes platform-enter {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
}

/* Узкий экран: карточки столбиком во всю ширину. */
@media (max-width: 900px) {
  .download__platforms {
    grid-template-columns: minmax(0, 1fr);
  }
}