/* ======================================================
   HERO
====================================================== */

.pattern-hero {
    background:
        radial-gradient(
            circle at 86% 18%,
            rgba(124, 58, 237, 0.11),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 88%,
            rgba(37, 99, 235, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f8fbff,
            #ffffff
        );
}


.pattern-hero-card {
    min-height: 420px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 38px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    border-radius:
        var(--radius-extra-large);

    box-shadow:
        var(--shadow-large);

    text-align: center;
}


.pattern-hero-label {
    margin-bottom: 35px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.72rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.09em;
}


.pattern-hero-sequence {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 30px;
}


.hero-pattern-circle,
.hero-pattern-square,
.hero-pattern-question {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;
}


.hero-pattern-circle {
    background: #ffffff;

    border-radius: 50%;
}


.hero-pattern-square {
    background:
        rgba(255, 255, 255, 0.25);

    border:
        2px solid #ffffff;

    border-radius: 7px;
}


.hero-pattern-question {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.10);

    border:
        2px dashed
        rgba(255, 255, 255, 0.65);

    border-radius: 9px;

    font-size: 1.4rem;
    font-weight: 900;
}


.pattern-hero-answer {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;
}


.pattern-hero-answer span {
    color:
        rgba(255, 255, 255, 0.65);

    font-size: 0.72rem;
}


.pattern-hero-answer strong {
    font-size: 1rem;
}


.pattern-hero-card p {
    margin-bottom: 0;

    color:
        rgba(255, 255, 255, 0.76);

    font-size: 0.82rem;
}



/* ======================================================
   INTRO
====================================================== */

.pattern-intro-visual {
    min-height: 350px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;

    padding: 35px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0f766e,
            #059669
        );

    text-align: center;
}


.intro-pattern-a,
.intro-pattern-b,
.intro-pattern-question {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;
}


.intro-pattern-a {
    background: #ffffff;

    border-radius: 50%;
}


.intro-pattern-b {
    background:
        rgba(255, 255, 255, 0.16);

    border:
        2px solid #ffffff;

    border-radius: 8px;
}


.intro-pattern-question {
    border:
        2px dashed
        rgba(255, 255, 255, 0.7);

    border-radius: 8px;

    font-size: 1.3rem;
    font-weight: 900;
}


.pattern-intro-visual strong {
    width: 100%;

    margin-top: 16px;

    font-size: 1.2rem;
}


.pattern-intro-visual small {
    width: 100%;

    color:
        rgba(255, 255, 255, 0.72);
}



/* ======================================================
   CONCEPT
====================================================== */

.pattern-concept-section {
    background:
        var(--color-background);
}


.pattern-concept-demo {
    max-width: 850px;

    margin:
        0 auto 28px;

    padding: 35px;

    background:
        var(--color-background-soft);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-extra-large);
}


.concept-pattern-row {
    min-height: 140px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 16px;

    margin-bottom: 20px;

    background: #ffffff;

    border-radius:
        var(--radius-medium);
}


.concept-circle,
.concept-square {
    width: 48px;
    height: 48px;
}


.concept-circle {
    background:
        var(--color-primary);

    border-radius: 50%;
}


.concept-square {
    background: #7c3aed;

    border-radius: 7px;
}


.pattern-rule {
    padding: 18px;

    text-align: center;

    background:
        var(--color-primary-light);

    border-radius:
        var(--radius-medium);
}


.pattern-rule span,
.pattern-rule strong {
    display: block;
}


.pattern-rule span {
    margin-bottom: 5px;

    color:
        var(--color-text-muted);

    font-size: 0.66rem;

    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.07em;
}


.pattern-rule strong {
    color:
        var(--color-primary-dark);

    font-size: 0.87rem;
}



/* ======================================================
   TYPES
====================================================== */

.pattern-types-section {
    background:
        var(--color-background-soft);
}


.pattern-types-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}


.pattern-type-card {
    padding: 26px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-small);
}


.pattern-type-number {
    display: block;

    margin-bottom: 25px;

    color:
        var(--color-primary);

    font-size: 0.68rem;
    font-weight: 850;
}


.pattern-type-display,
.number-pattern-display {
    min-height: 135px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 22px;

    padding: 18px;

    background:
        var(--color-background-soft);

    border-radius:
        var(--radius-medium);
}


.type-circle,
.type-square {
    width: 30px;
    height: 30px;
}


.type-circle {
    background:
        var(--color-primary);

    border-radius: 50%;
}


.type-square {
    background: #7c3aed;

    border-radius: 5px;
}


.type-triangle {
    width: 0;
    height: 0;

    border-left:
        17px solid transparent;

    border-right:
        17px solid transparent;

    border-bottom:
        30px solid
        var(--color-primary);
}


.number-pattern-display span {
    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    color:
        var(--color-primary);

    background: #ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius: 9px;

    font-weight: 850;
}


.pattern-type-card h3 {
    margin-bottom: 10px;

    font-size: 1.05rem;
}


.pattern-type-card p {
    margin-bottom: 0;

    color:
        var(--color-text-muted);

    font-size: 0.82rem;
}



/* ======================================================
   COMPLETE PATTERN
====================================================== */

.complete-pattern-section {
    background:
        var(--color-background);
}


.complete-pattern-wrapper {
    display: grid;

    grid-template-columns:
        minmax(0, 0.7fr)
        minmax(500px, 1.3fr);

    align-items: center;

    gap: 70px;
}


.complete-pattern-content h2 {
    margin-bottom: 18px;

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.5rem
        );

    letter-spacing:
        -0.04em;
}


.complete-pattern-content p {
    color:
        var(--color-text-muted);
}


.missing-pattern-card {
    padding: 35px;

    background:
        var(--color-background-soft);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);
}


.missing-label {
    display: block;

    margin-bottom: 22px;

    color:
        var(--color-text-muted);

    font-size: 0.7rem;
    font-weight: 800;
}


.missing-pattern-row {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 25px;
}


.missing-circle,
.missing-square,
.missing-question {
    width: 43px;
    height: 43px;
}


.missing-circle {
    background:
        var(--color-primary);

    border-radius: 50%;
}


.missing-square {
    background: #7c3aed;

    border-radius: 6px;
}


.missing-question {
    display: grid;

    place-items: center;

    color:
        var(--color-primary);

    border:
        2px dashed
        var(--color-primary);

    border-radius: 7px;

    font-weight: 900;
}


.missing-answer {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 13px;

    padding: 16px;

    background: #ffffff;

    border-radius:
        var(--radius-medium);
}


.missing-answer > span {
    color:
        var(--color-text-muted);

    font-size: 0.75rem;

    font-weight: 750;
}


.missing-answer .missing-square {
    width: 35px;
    height: 35px;
}



/* ======================================================
   GAME
====================================================== */

.pattern-game-section {
    color: #ffffff;

    background:
        #0f172a;
}


.pattern-game-section
.section-eyebrow {
    color: #93c5fd;
}


.pattern-game-section
.section-header p {
    color: #94a3b8;
}


.pattern-game-card {
    max-width: 820px;

    margin-inline: auto;

    padding: 32px;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        var(--radius-extra-large);
}


.pattern-game-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.pattern-game-header > div {
    min-width: 120px;

    padding: 12px 15px;

    background:
        rgba(255, 255, 255, 0.07);

    border-radius: 10px;
}


.pattern-game-header span,
.pattern-game-header strong {
    display: block;
}


.pattern-game-header span {
    margin-bottom: 3px;

    color: #94a3b8;

    font-size: 0.65rem;
}


.pattern-game-header strong {
    font-size: 0.8rem;
}



/* QUESTION */

.pattern-game-question {
    min-height: 240px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    padding: 28px;

    background: #ffffff;

    border-radius:
        var(--radius-large);
}


.game-question-label {
    margin-bottom: 30px;

    color:
        var(--color-text-muted);

    font-size: 0.7rem;

    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


.game-pattern-sequence {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;
}


.game-pattern-token,
.game-question-token {
    width: 46px;
    height: 46px;

    display: block;
}


.game-token-circle {
    background:
        var(--color-primary);

    border-radius: 50%;
}


.game-token-square {
    background: #7c3aed;

    border-radius: 7px;
}


.game-token-triangle {
    width: 0;
    height: 0;

    border-left:
        25px solid transparent;

    border-right:
        25px solid transparent;

    border-bottom:
        45px solid #0f766e;
}


.game-question-token {
    display: grid;

    place-items: center;

    color:
        var(--color-primary);

    border:
        2px dashed
        var(--color-primary);

    border-radius: 8px;

    font-size: 1.3rem;
    font-weight: 900;
}



/* OPTIONS */

.pattern-game-options {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-bottom: 15px;
}


.pattern-choice {
    min-height: 125px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 13px;

    color:
        var(--color-text-secondary);

    background: #ffffff;

    border:
        2px solid transparent;

    border-radius:
        var(--radius-medium);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}


.pattern-choice:hover {
    transform:
        translateY(-3px);

    border-color:
        #60a5fa;
}


.pattern-choice.selected {
    border-color:
        var(--color-primary);
}


.pattern-choice.correct {
    background:
        #ecfdf5;

    border-color:
        #10b981;
}


.pattern-choice.incorrect {
    background:
        #fef2f2;

    border-color:
        #ef4444;
}


.pattern-choice:disabled {
    cursor: default;
}


.choice-circle,
.choice-square {
    width: 43px;
    height: 43px;
}


.choice-circle {
    background:
        var(--color-primary);

    border-radius: 50%;
}


.choice-square {
    background: #7c3aed;

    border-radius: 6px;
}


.choice-triangle {
    width: 0;
    height: 0;

    border-left:
        24px solid transparent;

    border-right:
        24px solid transparent;

    border-bottom:
        43px solid #0f766e;
}


.pattern-choice small {
    color:
        var(--color-text-secondary);

    font-weight: 750;
}



/* FEEDBACK */

.pattern-feedback {
    min-height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    padding: 12px 15px;

    color: #cbd5e1;

    background:
        rgba(255, 255, 255, 0.06);

    border-radius: 10px;

    text-align: center;

    font-size: 0.8rem;
}


.pattern-feedback.correct-feedback {
    color: #6ee7b7;
}


.pattern-feedback.incorrect-feedback {
    color: #fca5a5;
}


.pattern-next-button {
    width: 100%;
}



/* ======================================================
   CREATE PATTERN
====================================================== */

.create-pattern-section {
    background:
        var(--color-background-soft);
}


.create-pattern-wrapper {
    display: grid;

    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(500px, 1.25fr);

    align-items: center;

    gap: 70px;
}


.create-pattern-content h2 {
    margin-bottom: 18px;

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.5rem
        );

    letter-spacing:
        -0.04em;
}


.create-pattern-content p {
    color:
        var(--color-text-muted);
}


.create-pattern-demo {
    padding: 35px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-small);
}


.create-pattern-label {
    display: block;

    margin-bottom: 25px;

    color:
        var(--color-text-muted);

    font-size: 0.72rem;
    font-weight: 750;
}


.create-pattern-row {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 22px;
}


.create-circle {
    width: 40px;
    height: 40px;

    background:
        var(--color-primary);

    border-radius: 50%;
}


.create-triangle {
    width: 0;
    height: 0;

    border-left:
        22px solid transparent;

    border-right:
        22px solid transparent;

    border-bottom:
        40px solid #0f766e;
}


.create-pattern-demo p {
    margin-bottom: 0;

    color:
        var(--color-text-muted);

    text-align: center;

    font-weight: 750;
}



/* ======================================================
   PRACTICE
====================================================== */

.pattern-practice-display,
.number-practice-display {
    min-height: 120px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 22px;

    padding: 18px;

    color:
        var(--color-primary);

    background:
        var(--color-background-soft);

    border-radius:
        var(--radius-medium);
}


.practice-pattern-circle,
.practice-pattern-square {
    width: 33px;
    height: 33px;
}


.practice-pattern-circle {
    background:
        var(--color-primary);

    border-radius: 50%;
}


.practice-pattern-square {
    background: #7c3aed;

    border-radius: 5px;
}


.practice-pattern-triangle {
    width: 0;
    height: 0;

    border-left:
        18px solid transparent;

    border-right:
        18px solid transparent;

    border-bottom:
        33px solid #0f766e;
}


.pattern-practice-display strong {
    margin-left: 5px;

    color:
        var(--color-primary);

    font-size: 1.5rem;
}


.number-practice-display {
    font-size: 1.1rem;
    font-weight: 850;
}



/* ======================================================
   COMPLETE
====================================================== */

.pattern-complete-section {
    background:
        var(--color-background);
}


.pattern-complete-card {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 45px;

    padding: 48px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    border-radius:
        var(--radius-extra-large);

    box-shadow:
        0 30px 70px
        rgba(37, 99, 235, 0.20);
}


.pattern-complete-label {
    display: block;

    margin-bottom: 10px;

    color: #dbeafe;

    font-size: 0.7rem;
    font-weight: 850;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


.pattern-complete-card h2 {
    margin-bottom: 12px;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    letter-spacing:
        -0.04em;
}


.pattern-complete-card p {
    max-width: 650px;

    margin-bottom: 0;

    color:
        rgba(255, 255, 255, 0.76);
}


.pattern-complete-card .button {
    flex-shrink: 0;
}



/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 1024px) {

    .pattern-types-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .complete-pattern-wrapper,
    .create-pattern-wrapper {
        grid-template-columns: 1fr;

        gap: 45px;
    }

}



@media (max-width: 860px) {

    .pattern-complete-card {
        align-items: flex-start;

        flex-direction: column;
    }

}



@media (max-width: 600px) {

    .pattern-hero-card {
        min-height: 360px;

        padding: 25px;
    }


    .pattern-hero-sequence {
        gap: 8px;
    }


    .hero-pattern-circle,
    .hero-pattern-square,
    .hero-pattern-question {
        width: 38px;
        height: 38px;
    }


    .pattern-types-grid {
        grid-template-columns: 1fr;
    }


    .missing-pattern-card {
        padding: 25px 18px;
    }


    .pattern-game-card {
        padding: 20px;
    }


    .pattern-game-header {
        align-items: stretch;

        flex-direction: column;
    }


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


    .pattern-choice {
        min-height: 95px;

        flex-direction: row;
    }


    .pattern-complete-card {
        padding: 35px 24px;
    }


    .pattern-complete-card .button {
        width: 100%;
    }

}

.pattern-game-finish {
    min-width: 180px;

    padding: 24px 30px;

    color:
        var(--color-primary);

    background:
        var(--color-primary-light);

    border-radius:
        var(--radius-large);

    font-size: 1.5rem;

    font-weight: 900;

    text-align: center;
}
.pattern-game-finish {
    min-width: 180px;

    padding: 24px 30px;

    color:
        var(--color-primary);

    background:
        var(--color-primary-light);

    border-radius:
        var(--radius-large);

    font-size: 1.5rem;

    font-weight: 900;

    text-align: center;
}