/**
 * Game Landing & Catalogue Styles — "Путешествие писателя"
 * Стили лендинга (/play) и каталога сценариев (/play/scenarios).
 *
 * Использует дизайн-токены сайта (assets/css/variables.css) и переиспользует
 * базовые компоненты .btn / .badge из components.css. Здесь описаны только
 * новые блоки: hero, сетка сценариев и карточки. Тёмная тема поддерживается
 * автоматически через CSS-переменные.
 */

/* ============================================================================
   Контейнеры страниц
   ============================================================================ */
.game-landing,
.game-catalog {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-16);
}

/* ============================================================================
   Hero (лендинг)
   ============================================================================ */
.game-hero {
    background: var(--landing-hero-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-12) var(--spacing-10);
    margin-bottom: var(--spacing-12);
    text-align: center;
}

.game-hero-title {
    font-family: 'Merriweather', Georgia, serif;
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin: 0 0 var(--spacing-4);
}

.game-hero-subtitle {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    max-width: 60ch;
    margin: 0 auto var(--spacing-8);
}

.game-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-4);
}

.game-hero-note {
    margin: var(--spacing-8) auto 0;
    max-width: 52ch;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ============================================================================
   Заголовок секции (лендинг + каталог)
   ============================================================================ */
.game-landing .section-header,
.game-catalog .section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-6);
}

.game-landing .section-header h2,
.game-catalog .section-header h1 {
    font-family: 'Merriweather', Georgia, serif;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0;
}

.game-catalog .section-subtitle {
    margin: var(--spacing-2) 0 0;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.game-landing .link,
.game-catalog .link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    white-space: nowrap;
}

.game-landing .link:hover,
.game-catalog .link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* ============================================================================
   Сетка сценариев
   ============================================================================ */
.game-scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-6);
}

/* ============================================================================
   Карточка сценария
   ============================================================================ */
.game-scenario-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.game-scenario-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}

.game-scenario-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.game-scenario-card-title {
    font-family: 'Merriweather', Georgia, serif;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin: 0;
}

.game-scenario-card-description {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-4);
}

.game-scenario-card-meta {
    list-style: none;
    margin: 0 0 var(--spacing-6);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.game-scenario-card-meta li {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

/* Кнопка действия прижата к низу карточки независимо от длины описания. */
.game-scenario-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* ============================================================================
   Пустое состояние
   ============================================================================ */
.game-landing .empty-state,
.game-catalog .empty-state {
    margin: 0;
    padding: var(--spacing-12) var(--spacing-6);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-secondary);
}

/* Превью популярных сценариев на лендинге. */
.game-scenarios-preview {
    margin-top: var(--spacing-4);
}

/* ============================================================================
   Хлебные крошки
   ============================================================================ */
.game-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-6);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.game-breadcrumbs a {
    color: var(--color-primary);
}

.game-breadcrumbs a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.game-breadcrumbs span[aria-hidden] {
    color: var(--color-text-muted);
}

/* ============================================================================
   Текстовые секции лендинга (intro, howto, features, faq, cta)
   ============================================================================ */
.game-intro,
.game-howto,
.game-features,
.game-faq,
.game-cta {
    margin-top: var(--spacing-16);
}

.game-intro h2,
.game-howto h2,
.game-features h2,
.game-faq h2,
.game-cta h2 {
    font-family: 'Merriweather', Georgia, serif;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-5);
}

.game-intro p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    max-width: 75ch;
    margin: 0 0 var(--spacing-4);
}

/* ----- Шаги "Как это работает" ----- */
.game-steps {
    list-style: none;
    counter-reset: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-6);
}

.game-step {
    display: flex;
    gap: var(--spacing-4);
    align-items: flex-start;
}

.game-step-number {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 9999px);
    background-color: var(--color-primary);
    color: var(--color-on-primary, #fff);
    font-family: 'Merriweather', Georgia, serif;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.game-step-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-2);
}

.game-step-text {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ----- Сетка преимуществ ----- */
.game-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-6);
}

.game-feature-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
}

.game-feature-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-2);
}

.game-feature-card p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ----- FAQ ----- */
.game-faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.game-faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg);
    padding: var(--spacing-4) var(--spacing-5);
}

.game-faq-question {
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    list-style: none;
}

.game-faq-question::-webkit-details-marker {
    display: none;
}

.game-faq-question::after {
    content: '+';
    float: right;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-bold);
}

.game-faq-item[open] .game-faq-question::after {
    content: '–';
}

.game-faq-answer {
    margin: var(--spacing-3) 0 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

/* ----- Финальный призыв ----- */
.game-cta {
    text-align: center;
    background: var(--landing-hero-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-12) var(--spacing-8);
}

.game-cta p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-6);
}

/* ============================================================================
   Адаптив
   ============================================================================ */
@media (max-width: 640px) {
    .game-hero {
        padding: var(--spacing-8) var(--spacing-5);
    }

    .game-hero-title {
        font-size: var(--font-size-3xl);
    }

    .game-hero-subtitle {
        font-size: var(--font-size-base);
    }

    .game-hero-actions .btn {
        width: 100%;
    }

    .game-scenario-grid {
        grid-template-columns: 1fr;
    }
}