/* =========================================================
   МАТЕМАТИЧЕСКИЙ ТРЕНАЖЁР
========================================================= */

#math-game {
    --blue: #3478f6;
    --blue-dark: #2457a6;

    --yellow: #ffd84d;
    --yellow-light: #fff3b0;

    --green: #72d88a;
    --green-light: #e8f9ec;

    --purple: #6c63ff;

    --text: #25253a;
    --muted: #6d6d82;

    box-sizing: border-box;

    width: min(1050px, 94%);

    margin: 30px auto 50px;
    padding: 34px 28px 46px;

    position: relative;

    overflow: hidden;

    text-align: center;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(108, 99, 255, .09),
            transparent 45%
        ),
        #ffffff;

    border: 1px solid rgba(70, 60, 130, .07);

    border-radius: 28px;

    box-shadow:
        0 20px 55px rgba(50, 40, 100, .10),
        0 4px 12px rgba(50, 40, 100, .05);

    isolation: isolate;
}


#math-game::before {
    content: "";

    position: absolute;

    top: -100px;
    right: -100px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 216, 77, .17),
            transparent 68%
        );

    pointer-events: none;

    z-index: -1;
}


#math-game *,
#math-game *::before,
#math-game *::after {
    box-sizing: border-box;
}


/* =========================================================
   ЗАГОЛОВОК
========================================================= */

#math-game .game-title {
    margin: 0 0 12px;

    font-size:
        clamp(28px, 5vw, 44px);

    line-height: 1.15;

    font-weight: 900;

    letter-spacing: -.8px;

    color: #29294a;
}


/* =========================================================
   ИНСТРУКЦИЯ
========================================================= */

#math-game #instruction {
    min-height: 42px;

    margin: 0 auto 10px;

    max-width: 850px;

    font-size:
        clamp(18px, 3vw, 25px);

    line-height: 1.3;

    font-weight: 750;

    color: #55556b;

    transition:
        opacity .25s ease,
        transform .35s ease;
}


/* =========================================================
   ОБЛАСТЬ УРАВНЕНИЯ
========================================================= */

#math-game #equation {
    min-height: 108px;

    display: flex;

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

    flex-wrap: wrap;

    gap: 7px;

    margin: 14px auto;

    padding: 12px 10px;

    font-size:
        clamp(32px, 6vw, 60px);

    line-height: 1.2;

    font-weight: 850;

    user-select: none;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(247, 249, 255, .96),
            rgba(251, 250, 255, .96)
        );

    border: 1px solid rgba(80, 80, 150, .06);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 8px 25px rgba(50,40,100,.045);

    transition:
        background .3s ease,
        box-shadow .3s ease;
}


#math-game #equation.equation-changing {
    animation: equationChange .42s ease;
}


@keyframes equationChange {

    0% {
        opacity: .25;
        transform: translateY(8px) scale(.985);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   ЭЛЕМЕНТЫ УРАВНЕНИЯ
========================================================= */

#math-game .token {
    display: inline-flex;

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

    min-width: 48px;
    min-height: 62px;

    padding: 5px 10px;

    border-radius: 14px;

    position: relative;

    transition:
        transform .28s cubic-bezier(.22,.61,.36,1),
        background .25s ease,
        box-shadow .25s ease,
        opacity .3s ease,
        color .25s ease;

    user-select: none;
}


/* =========================================================
   ОПЕРАТОРЫ
========================================================= */

#math-game .token.operator {
    min-width: auto;

    padding:
        5px 2px;

    color: #77778a;

    font-weight: 700;
}

/* Тёмно-синий знак равенства */
#math-game .token.operator.equals {
    color: #123b70 !important;
}


/* =========================================================
   АКТИВНЫЙ ТОКЕН
========================================================= */

#math-game .token.highlight {
    cursor: pointer;

    color: #2b2b38;

    background:
        linear-gradient(
            135deg,
            #ffe77a,
            #ffd84d
        );

    box-shadow:
        0 0 0 4px rgba(255, 210, 40, .20),
        0 7px 16px rgba(255, 190, 30, .18);

    animation:
        mathPulse 1.25s ease-in-out infinite;
}


#math-game .token.highlight:hover {
    transform:
        translateY(-3px)
        scale(1.07);

    box-shadow:
        0 0 0 5px rgba(255, 210, 40, .23),
        0 12px 22px rgba(255, 190, 30, .25);
}


#math-game .token.highlight:active {
    transform:
        translateY(0)
        scale(.96);
}


/* =========================================================
   НАЖАТЫЙ ЭЛЕМЕНТ
========================================================= */

#math-game .token.clicked {
    background:
        linear-gradient(
            135deg,
            #9aeda9,
            #72d88a
        );

    color: #175b29;

    box-shadow:
        0 0 0 4px rgba(40,180,70,.14),
        0 7px 15px rgba(40,180,70,.15);
}


/* =========================================================
   ФИНАЛЬНЫЙ ОТВЕТ
========================================================= */

#math-game .token.final-answer {
    min-width: 180px;

    padding:
        12px 24px;

    color: #145c27;

    background:
        linear-gradient(
            135deg,
            #b9f4c4,
            #78dc91
        );

    border-radius: 18px;

    box-shadow:
        0 0 0 5px rgba(65,200,90,.13),
        0 12px 25px rgba(40,170,70,.18);

    animation:
        finalAnswer .8s ease;
}


@keyframes finalAnswer {

    0% {
        opacity: 0;
        transform: scale(.65);
    }

    70% {
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================================================
   ПОСЛЕДНЕЕ ДЕЛЕНИЕ
========================================================= */

#math-game .token.final-divide {
    animation:
        dividePulse .7s ease-in-out infinite;
}


@keyframes dividePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.09);
        background: #ffe36e;
    }
}


/* =========================================================
   ТЕКУЩЕЕ ДЕЙСТВИЕ
========================================================= */

#math-game #actionText {
    min-height: 48px;

    display: flex;

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

    width: fit-content;
    max-width: 95%;

    margin: 10px auto;

    padding:
        9px 22px;

    font-size:
        clamp(18px, 2.7vw, 26px);

    line-height: 1.3;

    font-weight: 800;

    color: var(--blue-dark);

    background:
        linear-gradient(
            135deg,
            #f1f6ff,
            #e8f0ff
        );

    border:
        1px solid rgba(52,120,246,.10);

    border-radius: 15px;

    box-shadow:
        0 5px 15px rgba(52,120,246,.06);

    transition:
        transform .3s ease,
        opacity .3s ease;
}


/* =========================================================
   СООБЩЕНИЕ
========================================================= */

#math-game #message {
    min-height: 28px;

    margin: 5px auto;

    font-size: 19px;

    font-weight: 700;

    color: #d33;
}


/* =========================================================
   ВЕСЫ — ОБЛАСТЬ
========================================================= */

#math-game .scales {
    position: relative;

    width: min(760px, 96%);

    height: 285px;

    margin: 24px auto 28px;

    border-radius: 25px;

    background:
        linear-gradient(
            180deg,
            rgba(247,249,255,.9),
            rgba(255,255,255,.45)
        );

    border:
        1px solid rgba(60,60,120,.06);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 10px 30px rgba(50,40,100,.045);

    overflow: hidden;
}


#math-game .scales::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 80%;
    height: 2px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(80,80,110,.12),
            transparent
        );
}


/* =========================================================
   ЦЕНТРАЛЬНАЯ ОПОРА
========================================================= */

#math-game .scale-center {
    position: absolute;

    left: 50%;
    bottom: 12px;

    z-index: 6;

    width: 76px;
    height: 76px;

    display: flex;

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

    transform:
        translateX(-50%);

    font-size: 52px;

    line-height: 1;

    background: transparent;

    filter:
        drop-shadow(
            0 5px 4px rgba(0,0,0,.10)
        );
}


/* =========================================================
   БАЛКА
========================================================= */

#math-game .scale-beam {
    position: absolute;

    left: 50%;
    top: 47px;

    z-index: 3;

    width: 88%;
    height: 13px;

    transform:
        translateX(-50%)
        rotate(0deg);

    transform-origin:
        center center;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #4e5668,
            #697387,
            #4e5668
        );

    box-shadow:
        0 4px 7px rgba(0,0,0,.17),
        inset 0 1px 1px rgba(255,255,255,.2);

    transition:
        transform .65s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   ЧАШИ
========================================================= */

#math-game .scale-pan {
    position: absolute;

    top: 50px;

    z-index: 4;

    width: 215px;
    height: 105px;

    border-bottom:
        9px solid #737b89;

    border-radius:
        0 0 110px 110px;

    background:
        linear-gradient(
            180deg,
            rgba(255,216,77,.12),
            rgba(255,216,77,.28)
        );

    box-shadow:
        inset 0 -8px 15px rgba(255,200,40,.08);

    transition:
        transform .65s cubic-bezier(.22,.61,.36,1),
        filter .4s ease;
}


#math-game .left-pan {
    left: 0;
}


#math-game .right-pan {
    right: 0;
}


#math-game .scale-pan::before {
    content: "";

    position: absolute;

    top: -4px;
    left: 50%;

    width: 5px;
    height: 62px;

    transform:
        translateX(-50%);

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            #6f7785,
            #9aa0ab,
            #6f7785
        );

    box-shadow:
        1px 0 2px rgba(0,0,0,.12);
}


#math-game .pan-heavy {
    filter:
        drop-shadow(
            0 8px 8px rgba(40,40,60,.10)
        );
}


/* =========================================================
   ГРУЗ
========================================================= */

#math-game .weight {
    position: absolute;

    left: 50%;
    top: 38px;

    min-width: 58px;
    min-height: 48px;

    padding:
        0 12px;

    display: none;

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

    transform:
        translateX(-50%)
        scale(1);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #ffe16a,
            #ffbf25
        );

    color: #272727;

    font-size: 22px;

    font-weight: 850;

    box-shadow:
        0 6px 12px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.45);

    transition:
        opacity .35s ease,
        transform .35s cubic-bezier(.22,.61,.36,1);
}


#math-game .weight.show {
    display: flex;
}


#math-game .weight-removing {
    opacity: 0 !important;

    transform:
        translateX(-50%)
        translateY(32px)
        scale(.65) !important;
}


/* =========================================================
   ИСТОРИЯ / НАШИ ДЕЙСТВИЯ
========================================================= */

#math-game .history-title {
    margin-top: 12px;
    margin-bottom: 10px;

    font-size:
        clamp(19px, 2.5vw, 25px);

    font-weight: 850;

    color: #55556b;
}


#math-game #history {
    width: 100%;

    min-height: 62px;

    max-height: 240px;

    margin:
        0 auto 22px;

    padding:
        14px;

    display: flex;

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

    flex-wrap: wrap;

    gap: 9px;

    overflow-y: auto;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #f8f9fc,
            #f2f5fa
        );

    border:
        1px solid rgba(50,50,100,.06);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        inset 0 0 0 1px rgba(0,0,0,.015);
}


/* =========================================================
   ЭЛЕМЕНТ ИСТОРИИ
========================================================= */

#math-game .history-step {
    display: inline-flex;

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

    min-height: 44px;

    padding:
        7px 14px;

    border-radius: 12px;

    background: #e9edf3;

    color: #777b88;

    font-size:
        clamp(15px, 2.3vw, 21px);

    font-weight: 650;

    opacity: 0;

    transform:
        translateY(8px)
        scale(.97);

    transition:
        opacity .35s ease,
        transform .35s ease,
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


#math-game .history-step.visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


#math-game .history-step.done {
    background:
        #e8f7eb;

    color:
        #43804c;
}


#math-game .history-step.example {
    width: 100%;

    background:
        linear-gradient(
            135deg,
            #eaf2ff,
            #f2f6ff
        );

    color: #35558a;

    font-weight: 750;
}


#math-game .history-step.answer {
    background:
        linear-gradient(
            135deg,
            #baf3c5,
            #85df99
        );

    color: #145c27;

    font-weight: 850;

    box-shadow:
        0 5px 15px rgba(50,180,80,.15);
}


/* =========================================================
   СТРЕЛКА
========================================================= */

#math-game .history-arrow {
    display: inline-flex;

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

    color: #a2a7b3;

    font-size: 22px;

    font-weight: 800;
}


/* =========================================================
   ЗАВЕРШЁННАЯ ИГРА
========================================================= */

#math-game.game-complete #equation {
    background:
        linear-gradient(
            135deg,
            #f0fff3,
            #f7fff8
        );

    border-color:
        rgba(60,190,80,.13);

    box-shadow:
        0 8px 28px rgba(60,190,80,.08);
}


#math-game.game-complete .scale-beam {
    filter:
        drop-shadow(
            0 0 5px rgba(60,190,80,.18)
        );
}


/* =========================================================
   КНОПКА
========================================================= */

#math-game #nextButton {
    border: 0;

    border-radius: 15px;

    padding:
        14px 30px;

    background:
        linear-gradient(
            135deg,
            #3478f6,
            #5b61f5
        );

    color: #ffffff;

    font-size: 19px;

    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 7px 17px rgba(52,120,246,.24);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}


#math-game #nextButton:hover {
    transform:
        translateY(-3px);

    filter:
        brightness(1.04);

    box-shadow:
        0 11px 24px rgba(52,120,246,.30);
}


#math-game #nextButton:active {
    transform:
        translateY(0)
        scale(.98);

    box-shadow:
        0 4px 10px rgba(52,120,246,.20);
}


/* =========================================================
   ПОДСВЕТКА
========================================================= */

@keyframes mathPulse {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.045);
    }
}


/* =========================================================
   АНИМАЦИЯ РАЗБИЕНИЯ
========================================================= */

#math-game .token.splitting {
    animation:
        splitToken .65s ease forwards;
}


@keyframes splitToken {

    0% {
        transform:
            scale(1);
        opacity: 1;
    }

    35% {
        transform:
            scale(1.25);

        background:
            #ffe36e;

        box-shadow:
            0 0 0 6px rgba(255,210,40,.18);
    }

    100% {
        transform:
            scale(.2);

        opacity: 0;
    }
}


/* =========================================================
   РЕЗУЛЬТАТ РАЗБИЕНИЯ
========================================================= */

#math-game .token.split-result {
    background:
        #ffe36e;

    box-shadow:
        0 0 0 4px rgba(255,210,40,.20);

    animation:
        splitResult .9s ease-in-out infinite;
}


@keyframes splitResult {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.06);
    }
}


/* =========================================================
   СКРОЛЛБАР ИСТОРИИ
========================================================= */

#math-game #history::-webkit-scrollbar {
    width: 7px;
}


#math-game #history::-webkit-scrollbar-track {
    background: transparent;
}


#math-game #history::-webkit-scrollbar-thumb {
    background:
        rgba(80,80,110,.18);

    border-radius: 10px;
}


/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
========================================================= */

@media (max-width: 700px) {

    #math-game {
        width: 96%;

        margin:
            15px auto 30px;

        padding:
            22px 11px 30px;

        border-radius: 20px;
    }


    #math-game #equation {
        min-height: 92px;

        gap: 2px;

        padding:
            8px 4px;

        font-size:
            clamp(28px, 9vw, 48px);

        border-radius: 16px;
    }


    #math-game .token {
        min-width: 38px;
        min-height: 52px;

        padding:
            3px 6px;

        border-radius: 10px;
    }


    #math-game .token.operator {
        padding:
            3px 1px;
    }


    #math-game #actionText {
        max-width: 100%;

        padding:
            8px 13px;

        font-size:
            clamp(17px, 4.5vw, 22px);
    }


    #math-game .scales {
        width: 100%;

        height: 225px;

        margin-top: 18px;

        border-radius: 18px;
    }


    #math-game .scale-pan {
        width: 140px;

        height: 78px;
    }


    #math-game .scale-beam {
        width: 87%;
    }


    #math-game .scale-center {
        width: 60px;
        height: 60px;

        font-size: 42px;
    }


    #math-game .weight {
        min-width: 46px;
        min-height: 40px;

        padding:
            0 8px;

        font-size: 18px;
    }


    #math-game #history {
        padding:
            9px 6px;

        border-radius: 15px;

        max-height: 220px;
    }


    #math-game .history-step {
        min-height: 40px;

        padding:
            6px 9px;

        font-size:
            clamp(14px, 3.7vw, 18px);

        border-radius: 10px;
    }


    #math-game .history-arrow {
        font-size: 18px;
    }


    #math-game #nextButton {
        width: 100%;

        max-width: 330px;

        padding:
            13px 20px;
    }
}


/* =========================================================
   ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ
========================================================= */

@media (max-width: 430px) {

    #math-game {
        width: 97%;

        padding-left: 7px;
        padding-right: 7px;
    }


    #math-game #equation {
        font-size:
            clamp(25px, 9vw, 42px);
    }


    #math-game .scale-pan {
        width: 108px;
    }


    #math-game .scale-beam {
        width: 83%;
    }


    #math-game .weight {
        min-width: 38px;
        min-height: 36px;

        font-size: 16px;

        border-radius: 9px;
    }


    #math-game .scale-pan::before {
        height: 52px;
    }


    #math-game .history-step.example {
        font-size: 14px;
    }
}


/* =========================================================
   УМЕНЬШЕННАЯ АНИМАЦИЯ
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #math-game *,
    #math-game *::before,
    #math-game *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* =========================================================
   V2 — ШИРОКИЕ ЧАШИ И ГИРЬКИ НА ПЕРЕДНЕМ ПЛАНЕ
   Этот блок находится в конце файла и переопределяет
   предыдущие размеры для ПК и мобильных устройств.
========================================================= */

#math-game .scales {
    width: min(900px, 98%);
    height: 300px;
    overflow: visible !important;
}

#math-game .scale-beam {
    width: 96%;
    z-index: 3;
}

#math-game .scale-pan {
    width: 45%;
    height: 112px;
    top: 50px;
    overflow: visible !important;
    z-index: 10;
}

#math-game .left-pan {
    left: 2%;
}

#math-game .right-pan {
    right: 2%;
}

#math-game .scale-pan::before {
    z-index: 12;
}

#math-game .dynamic-weight,
#math-game .weight.show {
    z-index: 100 !important;
    position: absolute !important;
    display: flex !important;
    box-sizing: border-box !important;
    pointer-events: auto;
}

@media (max-width: 700px) {

    #math-game .scales {
        width: 100%;
        height: 230px;
        overflow: visible !important;
    }

    #math-game .scale-beam {
        width: 97%;
    }

    #math-game .scale-pan {
        width: 47%;
        height: 86px;
        top: 50px;
        overflow: visible !important;
    }

    #math-game .left-pan {
        left: 1%;
    }

    #math-game .right-pan {
        right: 1%;
    }

    #math-game .dynamic-weight,
    #math-game .weight.show {
        z-index: 100 !important;
        min-width: 0 !important;
        min-height: 36px;
        padding-left: 4px;
        padding-right: 4px;
        font-size: clamp(13px, 4vw, 18px);
    }
}

@media (max-width: 430px) {

    #math-game .scales {
        width: 100%;
        height: 215px;
    }

    #math-game .scale-beam {
        width: 98%;
    }

    #math-game .scale-pan {
        width: 48%;
        height: 80px;
        top: 48px;
    }

    #math-game .left-pan {
        left: 0.5%;
    }

    #math-game .right-pan {
        right: 0.5%;
    }

    #math-game .dynamic-weight,
    #math-game .weight.show {
        min-height: 34px;
        font-size: 12px;
        border-radius: 8px;
    }
}

@media (max-width: 360px) {

    #math-game .scale-pan {
        width: 48.5%;
        height: 76px;
    }

    #math-game .dynamic-weight,
    #math-game .weight.show {
        min-height: 31px;
        font-size: 11px;
        padding-left: 2px;
        padding-right: 2px;
    }
}