/* Page-owned styles for About the Game */

.about-page {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad-mobile);
    padding-block: var(--space-3xl);
}

.about-page > .about-section,
.about-page > .about-hero {
    margin-block-end: var(--space-2xl);
}

.about-divider {
    border: none;
    border-block-start: 1px solid var(--color-conveyor-line);
    margin-block: var(--space-xl);
}

/* Hero */
.about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

.about-hero__text {
    max-width: 720px;
    min-width: 0;
}

.about-hero__text .lead {
    max-width: 68ch;
}

.about-hero__burst {
    display: none;
}

.pixel-burst-mark {
    display: block;
    width: 120px;
    height: 120px;
    background:
        linear-gradient(90deg, transparent 45%, var(--color-electric-blue) 45%, var(--color-electric-blue) 55%, transparent 55%),
        linear-gradient(0deg, transparent 45%, var(--color-coral) 45%, var(--color-coral) 55%, transparent 55%),
        linear-gradient(45deg, transparent 45%, var(--color-lime) 45%, var(--color-lime) 55%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, var(--color-violet) 45%, var(--color-violet) 55%, transparent 55%);
    background-size: 100% 100%;
    border-radius: var(--radius-panel);
    position: relative;
}

.pixel-burst-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, var(--color-yellow) 0 12%, transparent 12%);
}

/* Section headers */
.about-section__header {
    margin-block-end: var(--space-lg);
}

.about-section__header h2 {
    border-inline-start: 2px solid var(--color-electric-blue);
    padding-inline-start: var(--space-md);
    margin-block-end: 0;
}

.about-section__header--center {
    text-align: center;
}

.about-section__header--center h2 {
    border-inline-start: none;
    padding-inline-start: 0;
}

/* Copy blocks */
.about-copy {
    max-width: 68ch;
    min-width: 0;
}

.about-copy--wide {
    max-width: 800px;
}

.about-copy--narrow {
    max-width: 700px;
}

.about-copy h3 {
    margin-block-end: var(--space-sm);
}

.about-copy p {
    margin-block-end: var(--space-md);
}

.about-copy p:last-child {
    margin-block-end: 0;
}

.about-copy .panel {
    margin-block-start: var(--space-md);
}

/* Split layout for What Is section */
.about-section__body--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
}

.about-fact-panel {
    min-width: 0;
}

/* Pixel diagram */
.about-pixel-diagram {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin-block-start: var(--space-lg);
    max-width: 200px;
}

.pixel-diagram__cell {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--color-graphite);
    border-radius: 1px;
}

.pixel-diagram__cell--blue { background-color: var(--color-electric-blue); }
.pixel-diagram__cell--coral { background-color: var(--color-coral); }
.pixel-diagram__cell--lime { background-color: var(--color-lime); }
.pixel-diagram__cell--violet { background-color: var(--color-violet); }
.pixel-diagram__cell--yellow { background-color: var(--color-yellow); }

/* Media layout */
.about-section__body--media {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

.about-media {
    min-width: 0;
    margin-block-end: 0;
}

.about-media .img-panel {
    max-width: 100%;
}

.about-media img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mechanics layout */
.about-section__body--mechanics {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

.about-pixel-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    max-width: 200px;
    min-width: 0;
}

.pixel-grid__cell {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--color-graphite);
    border-radius: 1px;
}

.pixel-grid__cell--blue { background-color: var(--color-electric-blue); }
.pixel-grid__cell--coral { background-color: var(--color-coral); }
.pixel-grid__cell--lime { background-color: var(--color-lime); }
.pixel-grid__cell--violet { background-color: var(--color-violet); }
.pixel-grid__cell--yellow { background-color: var(--color-yellow); }

/* Comparison table */
.about-comparison-table {
    margin-block-start: var(--space-lg);
    border: var(--border-panel);
    border-radius: var(--radius-panel);
    overflow: hidden;
    background-color: var(--color-surface);
}

.about-comparison-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-block-end: 1px solid var(--color-conveyor-line);
}

.about-comparison-table__row:last-child {
    border-block-end: none;
}

.about-comparison-table__row--header {
    background-color: var(--color-yellow-wash);
    font-family: var(--font-heading);
    font-weight: 600;
}

.about-comparison-table__row span {
    padding: var(--space-sm) var(--space-md);
    min-width: 0;
    overflow-wrap: break-word;
}

.about-comparison-table__row span + span {
    border-inline-start: 1px solid var(--color-conveyor-line);
}

/* Editorial panels */
.about-editorial-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    margin-block-start: var(--space-lg);
}

.about-editorial-panels .panel {
    min-width: 0;
}

/* Standout panels */
.about-standout-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
}

.about-standout-panel {
    min-width: 0;
}

.about-standout-panel h3 {
    margin-block-start: var(--space-xs);
}

/* CTA */
.about-section--cta {
    text-align: center;
}

.about-cta {
    max-width: 600px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    background-color: var(--color-surface);
    border: var(--border-panel);
    border-radius: var(--radius-panel);
}

.about-cta h3 {
    margin-block-end: 0;
}

.about-cta p {
    margin-block-end: 0;
    max-width: 68ch;
}

.about-cta .btn {
    margin-block-start: var(--space-sm);
}

/* Final panel */
.about-final-panel {
    max-width: 800px;
    min-width: 0;
}

.about-final-panel h3 {
    margin-block-start: var(--space-xs);
}

/* Tablet and desktop */
@media (min-width: 768px) {
    .about-page {
        padding-inline: var(--container-pad-tablet);
        padding-block: var(--space-4xl);
    }

    .about-hero {
        grid-template-columns: minmax(0, 1fr) 120px;
        align-items: center;
    }

    .about-hero__burst {
        display: block;
        justify-self: end;
    }

    .about-section__body--split {
        grid-template-columns: minmax(0, 1fr) 200px;
        gap: var(--space-xl);
        align-items: start;
    }

    .about-pixel-diagram {
        margin-block-start: 0;
        justify-self: end;
    }

    .about-section__body--media {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-2xl);
    }

    .about-section__body--mechanics {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-2xl);
    }

    .about-pixel-grid {
        justify-self: end;
    }

    .about-editorial-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-xl);
    }

    .about-standout-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-xl);
    }
}

@media (min-width: 1024px) {
    .about-page {
        padding-inline: var(--container-pad-desktop);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .about-divider {
        animation: none !important;
    }
}

/* Conveyor line animation */
.about-divider {
    position: relative;
    overflow: hidden;
}

.about-divider::after {
    content: '';
    position: absolute;
    inset-block-start: -1px;
    inset-inline-start: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-electric-blue), transparent);
    transform: translateX(-100%);
}

@media (prefers-reduced-motion: no-preference) {
    .about-divider.is-animating::after {
        animation: conveyor-slide 2s ease-in-out infinite;
    }
}

@keyframes conveyor-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}