/* Game Detail Page - Card layout */

/* Hero section - constrained height for card */
.game-card-hero {
    height: 65vh;
    min-height: 400px;
}

/* Override mobile background to show game cover properly */
.game-card-hero .mobile {
    background-size: 83% 43%;
}

/* Game card section - reuses patent-notice styling */
.game-card-section {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
}

.game-card-container {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
}

.game-card-content {
    text-align: center;
}

.game-card-content .game-title {
    font: var(--font-headline2);
    color: var(--color-white);
    margin-bottom: var(--spacing-2);
}

@media (max-width: 576px) {
    .game-card-content .game-title {
        font-size: var(--font-size-3xl);
    }
}

.game-card-content .game-creator {
    font: var(--font-lead);
    color: var(--color-light);
    font-style: italic;
    margin-bottom: var(--spacing-3);
}

.game-card-content .game-notice {
    font: var(--font-base);
    color: var(--color-light);
    margin-bottom: var(--spacing-2);
}

/* Season badge */
.season-badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--color-sunglow);
    color: var(--color-dark);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
}

/* CTA section */
.game-card-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
}

.game-card-cta-primary {
    margin-top: 0;
}

.game-card-cta-secondary {
    display: block;
    color: var(--color-light);
    font: var(--font-base);
    text-decoration: none;
    text-align: center;
    transition: color var(--duration-fast) var(--ease-out);
}

.game-card-cta-secondary:hover {
    color: var(--color-white);
    text-decoration: underline;
}

/* Loading and error states */
.loading-state {
    color: var(--color-light);
    font: var(--font-lead);
}

.error-state {
    color: var(--color-red);
    font: var(--font-lead);
}

.error-state a {
    display: inline-block;
    margin-top: var(--spacing-4);
    color: var(--color-light);
    text-decoration: underline;
}