/* ═══════════════════════════════════════
   Приветствие новичка (onboarding.html)
   ═══════════════════════════════════════ */

/* Обёртка — общие .modal-overlay и .modal-content из global.css: второй набор
   разошёлся бы с первым. Ширину окна здесь не трогаем — телефонную ширину
   модалки задаёт navbar.css, и правило отсюда, подключённое позже, её бы
   перебило. */

/* Заголовок несёт ник игрока: длинный логин без пробелов переносится где
   угодно, а справа место под крестик закрытия — иначе ник уходил под него. */
.onboarding__title {
    padding-right: var(--space-2xl);
    overflow-wrap: anywhere;
}

.onboarding__lead {
    margin-bottom: var(--space-lg);
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Шаги — нумерованный список, номер рисует кружок отметки счётчиком: у
   пройденного шага на его месте галочка. */
.onboarding__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0 0 var(--space-xl);
    padding: 0;
    list-style: none;
    counter-reset: onboarding-step;
}

.onboarding__step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: var(--border-ink-thin) solid transparent;
    border-radius: var(--radius-md);
    counter-increment: onboarding-step;
}

/* Текущий шаг — подложкой и контуром тушью: на него ведёт главная кнопка. */
.onboarding__step[data-state="current"] {
    border-color: var(--ink);
    background: var(--bg-panel);
    box-shadow: var(--shadow-sm);
}

.onboarding__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: var(--border-ink-thin) solid var(--ink);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: var(--font-sm);
    color: var(--ink);
}

.onboarding__mark::before {
    content: counter(onboarding-step);
}

.onboarding__step[data-state="current"] .onboarding__mark {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--text-on-accent);
}

.onboarding__step[data-state="done"] .onboarding__mark {
    border-color: var(--success);
    background: var(--success);
    color: var(--text-on-accent);
}

.onboarding__step[data-state="done"] .onboarding__mark::before {
    content: '✓';
}

.onboarding__step-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-lg);
    color: var(--text-primary);
}

.onboarding__step-text {
    margin: 0;
    font-size: var(--font-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Пройденное приглушено: глаз идёт к текущему шагу, а не по списку сверху. */
.onboarding__step[data-state="done"] .onboarding__step-title,
.onboarding__step[data-state="done"] .onboarding__step-text {
    color: var(--text-muted);
}

.onboarding__note {
    margin: var(--space-xs) 0 0;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

/* Ссылка шага стоит в строке текста — бирюзой, а не ржавчиной: ржавчина на
   подложке текущего шага даёт 4.36:1, ниже AA. Слова ссылки не разрываются
   переносом: «В» на одной строке и «магазин» на другой читаются двумя
   ссылками. */
.onboarding__link {
    font-weight: 600;
    color: var(--info-text);
    text-decoration: underline;
    white-space: nowrap;
}

/* Главная кнопка видна всегда: окно новичка бывает выше экрана — ник до 70
   символов переносит заголовок, низкий телефон (375×667) не вмещает окно и с
   коротким, — и окно прокручивается (общая .modal-content). Полоса кнопок
   прилипает к низу прокручиваемого окна поверх поля: отрицательный отступ
   равен полю окна, подложка — бумага окна. e2e onboarding.spec. */
.onboarding__content .modal-content__actions {
    position: sticky;
    bottom: calc(-1 * var(--space-3xl));
    margin-bottom: calc(-1 * var(--space-3xl));
    padding: var(--space-md) 0 var(--space-3xl);
    background: var(--card);
}

@media (max-width: 600px) {
    .onboarding__content .modal-content__actions {
        bottom: calc(-1 * var(--space-xl));
        margin-bottom: calc(-1 * var(--space-xl));
        padding-bottom: var(--space-xl);
    }
}