.choice-layout,
.memory-layout,
.pairs-layout {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    width: min(96vw, 980px);
    min-height: 0;
    gap: clamp(10px, 2dvh, 18px);
    padding-top: clamp(14px, 4dvh, 36px);
    box-sizing: border-box;
}

.choice-layout,
.memory-layout {
    flex-direction: column;
}

.choice-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(96px, 21dvh, 190px);
}

.choice-main-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(118px, 21dvh, 190px);
    height: clamp(118px, 21dvh, 190px);
    border-radius: 8px;
    background: var(--surface);
    border: 2px solid var(--surface-border);
    box-shadow: var(--shadow-soft);
}

.choice-main-card span,
.choice-main-card img {
    display: block;
    max-width: 78%;
    max-height: 78%;
    font-size: clamp(5rem, 18dvh, 9rem);
    object-fit: contain;
}

.choice-big-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(120px, 24dvh, 200px);
    min-height: clamp(92px, 18dvh, 150px);
    padding: 0 24px;
    border-radius: 8px;
    background: var(--sun);
    color: var(--text-main);
    font-size: clamp(3.6rem, 15dvh, 7rem);
    font-weight: 900;
    box-shadow: var(--shadow-soft);
}

.choice-question {
    color: var(--text-main);
    font-size: clamp(1.1rem, 2.6vw, 1.7rem);
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
}

.choice-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100%, 760px);
    height: auto;
    margin: 0;
    gap: clamp(8px, 1.8vw, 14px);
}

.choice-options .choice-answer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(92px, 18vw, 170px);
    min-height: clamp(68px, 12dvh, 110px);
    padding: 10px 14px;
    line-height: 1;
    overflow: hidden;
    box-sizing: border-box;
}

.choice-answer span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(1.7rem, 7vw, 4rem);
    font-weight: 900;
}

.choice-answer img {
    max-width: clamp(58px, 11vw, 100px);
    max-height: clamp(58px, 11vw, 100px);
    object-fit: contain;
}

.choice-sequence {
    display: flex;
    justify-content: center;
    gap: clamp(8px, 2vw, 16px);
    width: 100%;
}

.choice-sequence div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(58px, 12vw, 104px);
    height: clamp(58px, 12vw, 104px);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-main);
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 900;
    box-shadow: var(--shadow-soft);
}

.need-more-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 3vw, 24px);
    width: min(92vw, 680px);
}

.need-more-card {
    min-height: clamp(112px, 22dvh, 190px);
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: var(--shadow-soft);
    box-sizing: border-box;
}

.need-more-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
}

.need-more-objects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.need-more-objects .object {
    width: clamp(34px, 7vw, 64px) !important;
    height: clamp(34px, 7vw, 64px) !important;
}

.need-more-objects .object span {
    font-size: clamp(34px, 7vw, 64px) !important;
}

.memory-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 1.8vw, 14px);
    width: min(94vw, 720px);
}

.pairs-layout {
    flex-direction: row;
    align-items: stretch;
    width: min(94vw, 820px);
    flex: 0 1 auto;
}

.pair-column {
    display: grid;
    grid-auto-rows: clamp(76px, 13dvh, 118px);
    gap: clamp(8px, 1.5vw, 12px);
    flex: 1;
    min-width: 0;
}

.pair-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--text-main);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    font-family: inherit;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 900;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.pair-card:hover,
.pair-card:active,
.pair-card.selected {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
}

.pair-card.matched {
    background: rgba(151, 232, 210, 0.76);
    box-shadow: none;
    cursor: default;
}

.pair-card.wrong {
    background: #ffd8cf;
}

.pair-picture span {
    font-size: clamp(2.4rem, 8vw, 4.5rem);
}

.pair-picture img {
    width: clamp(54px, 11vw, 94px);
    height: clamp(54px, 11vw, 94px);
    object-fit: contain;
}

.memory-card {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(255, 107, 74, 0.22);
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
}

.memory-card.open,
.memory-card.matched {
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-main);
}

.memory-card.matched {
    outline: 4px solid var(--mint);
}

.memory-card span {
    font-size: clamp(1.6rem, 5vw, 3.2rem);
}

.memory-card img {
    width: 72%;
    height: 72%;
    object-fit: contain;
}

@media (max-width: 520px) {
    .choice-layout,
    .memory-layout,
    .pairs-layout {
        gap: 10px;
        width: min(94vw, 460px);
        padding-top: clamp(22px, 6dvh, 54px);
    }

    .choice-visual {
        min-height: clamp(88px, 19dvh, 140px);
    }

    .choice-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(92vw, 430px);
        gap: 8px;
    }

    .choice-options .choice-answer {
        min-width: 0;
        min-height: clamp(66px, 10dvh, 86px);
    }

    .choice-answer span {
        font-size: clamp(1.45rem, 9vw, 2.8rem);
    }

    .need-more-groups {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .need-more-card {
        min-height: 96px;
    }

    .memory-board {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: min(92vw, 430px);
        gap: 7px;
    }

    .pairs-layout {
        flex-direction: column;
        margin-top: clamp(20px, 5dvh, 44px);
    }

    .pair-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(58px, 10dvh, 74px);
        gap: 7px;
    }

    .pair-card {
        min-height: 62px;
        font-size: clamp(0.95rem, 5vw, 1.25rem);
        padding: 4px;
    }

    .pair-picture span {
        font-size: clamp(2rem, 10vw, 3rem);
    }
}

@media (max-width: 700px) and (min-width: 521px) {
    .choice-layout,
    .memory-layout,
    .pairs-layout {
        width: min(94vw, 560px);
        padding-top: clamp(30px, 7dvh, 70px);
    }

    .choice-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(86vw, 440px);
    }

    .choice-options .choice-answer {
        min-height: 82px;
    }

    .memory-board {
        width: min(86vw, 460px);
    }

    .pairs-layout {
        flex-direction: column;
        width: min(88vw, 480px);
        margin-top: clamp(28px, 7dvh, 70px);
    }

    .pair-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(66px, 10dvh, 86px);
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .choice-layout,
    .memory-layout,
    .pairs-layout {
        gap: 8px;
        padding-top: 8px;
    }

    .choice-visual {
        min-height: 86px;
    }

    .choice-main-card {
        width: clamp(78px, 24dvh, 116px);
        height: clamp(78px, 24dvh, 116px);
    }

    .choice-big-text {
        min-width: 94px;
        min-height: 76px;
        font-size: clamp(2.8rem, 18dvh, 4rem);
    }

    .choice-question {
        font-size: clamp(1rem, 5dvh, 1.35rem);
    }

    .choice-options .choice-answer {
        min-height: 56px;
    }

    .memory-board {
        width: min(76vw, 620px);
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .pairs-layout {
        width: min(82vw, 760px);
    }

    .pair-column {
        grid-auto-rows: clamp(48px, 16dvh, 66px);
    }

    .pair-card {
        min-height: 52px;
        font-size: clamp(1rem, 5dvh, 1.45rem);
    }
}