:root {
    --page-padding:
        clamp(
            12px,
            4vw,
            24px
        );

    --board-gap:
        clamp(
            3px,
            0.9vw,
            6px
        );

    --background:
        #f4f7fb;

    --surface:
        #ffffff;

    --cell:
        #e3e9f1;

    --text:
        #182033;

    --muted:
        #8993a5;

    --danger:
        #ff5c69;
}


/*
|--------------------------------------------------------------------------
| COLORS
|--------------------------------------------------------------------------
*/

.color-blue {
    --piece-top: #5b91ff;
    --piece-bottom: #3976f6;
}

.color-cyan {
    --piece-top: #43d4f3;
    --piece-bottom: #20b8e4;
}

.color-green {
    --piece-top: #52df48;
    --piece-bottom: #29c929;
}

.color-orange {
    --piece-top: #ffa323;
    --piece-bottom: #f47a0b;
}

.color-red {
    --piece-top: #ff5e59;
    --piece-bottom: #f13d39;
}

.color-purple {
    --piece-top: #ae74ff;
    --piece-bottom: #8551e9;
}


/*
|--------------------------------------------------------------------------
| RESET
|--------------------------------------------------------------------------
*/

* {
    box-sizing:
        border-box;

    -webkit-tap-highlight-color:
        transparent;
}


html {
    width:
        100%;

    min-height:
        100%;

    background:
        var(--background);
}


body {
    margin:
        0;

    width:
        100%;

    min-height:
        100dvh;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    overflow-x:
        hidden;

    overscroll-behavior:
        none;

    user-select:
        none;

    -webkit-user-select:
        none;
}


button {
    font:
        inherit;
}


/*
|--------------------------------------------------------------------------
| APP
|--------------------------------------------------------------------------
*/

.app {
    width:
        100%;

    min-height:
        100dvh;
}


.screen {
    width:
        100%;

    min-height:
        100dvh;
}


/*
|--------------------------------------------------------------------------
| HOME
|--------------------------------------------------------------------------
*/

.home-screen {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        max(
            var(--page-padding),
            env(
                safe-area-inset-top
            )
        )
        var(--page-padding)
        max(
            var(--page-padding),
            env(
                safe-area-inset-bottom
            )
        );
}


.home-card {
    width:
        100%;

    max-width:
        430px;

    text-align:
        center;
}


/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.logo-mark {
    width:
        clamp(
            68px,
            18vw,
            82px
        );

    height:
        clamp(
            68px,
            18vw,
            82px
        );

    margin:
        0
        auto
        14px;

    display:
        grid;

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

    gap:
        5px;

    transform:
        rotate(
            8deg
        );
}


.logo-mark span {
    display:
        block;

    border-radius:
        10px;

    background:
        linear-gradient(
            145deg,
            #5b91ff,
            #3976f6
        );

    box-shadow:
        0
        5px
        12px
        rgba(
            57,
            118,
            246,
            0.22
        );
}


/*
|--------------------------------------------------------------------------
| HOME TITLE
|--------------------------------------------------------------------------
*/

.game-title {
    margin:
        0;

    font-size:
        clamp(
            36px,
            11vw,
            58px
        );

    line-height:
        1;

    letter-spacing:
        -2px;

    font-weight:
        900;
}


.home-best {
    margin-top:
        32px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.home-best-label {
    color:
        var(--muted);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1.4px;
}


.home-best-value {
    font-size:
        clamp(
            34px,
            9vw,
            48px
        );

    font-weight:
        900;
}


.home-actions {
    width:
        100%;

    margin-top:
        36px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

.game-button {
    width:
        100%;

    min-height:
        56px;

    padding:
        12px
        20px;

    border:
        0;

    border-radius:
        18px;

    cursor:
        pointer;

    font-weight:
        800;

    font-size:
        17px;

    transition:
        transform
        100ms
        ease;
}


.game-button:active {
    transform:
        scale(
            0.985
        );
}


.game-button.primary {
    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #5b91ff,
            #3976f6
        );

    box-shadow:
        0
        10px
        24px
        rgba(
            57,
            118,
            246,
            0.25
        );
}


.game-button.secondary {
    color:
        var(--text);

    background:
        #ffffff;

    box-shadow:
        0
        6px
        18px
        rgba(
            22,
            32,
            51,
            0.08
        );
}


.game-button.text-button {
    background:
        transparent;

    color:
        var(--muted);

    box-shadow:
        none;
}


/*
|--------------------------------------------------------------------------
| GAME SCREEN
|--------------------------------------------------------------------------
*/

.game-screen {
    padding:
        max(
            10px,
            env(
                safe-area-inset-top
            )
        )
        var(--page-padding)
        max(
            8px,
            env(
                safe-area-inset-bottom
            )
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;
}


/*
|--------------------------------------------------------------------------
| GAME HEADER
|--------------------------------------------------------------------------
*/

.game-header {
    width:
        100%;

    max-width:
        560px;

    min-height:
        76px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        start;

    gap:
        10px;

    padding-top:
        4px;
}


.score-box {
    min-height:
        54px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.score-box-right {
    align-items:
        flex-end;
}


.score-label {
    color:
        var(--muted);

    font-size:
        clamp(
            10px,
            2.8vw,
            12px
        );

    letter-spacing:
        1px;

    font-weight:
        800;
}


.score-value {
    margin-top:
        2px;

    font-size:
        clamp(
            24px,
            7vw,
            34px
        );

    line-height:
        1;

    font-weight:
        900;

    transform-origin:
        center;
}


/*
|--------------------------------------------------------------------------
| PAUSE CENTER
|--------------------------------------------------------------------------
*/

.pause-center {
    position:
        relative;

    min-width:
        76px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;
}


/*
|--------------------------------------------------------------------------
| PAUSE BUTTON
|--------------------------------------------------------------------------
*/

.icon-button {
    width:
        46px;

    height:
        46px;

    padding:
        0;

    border:
        0;

    border-radius:
        15px;

    background:
        #ffffff;

    box-shadow:
        0
        5px
        15px
        rgba(
            22,
            32,
            51,
            0.08
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    cursor:
        pointer;

    transition:
        transform
        100ms
        ease;
}


.icon-button:active {
    transform:
        scale(
            0.96
        );
}


.icon-button span {
    width:
        5px;

    height:
        18px;

    border-radius:
        3px;

    background:
        var(--text);
}


/*
|--------------------------------------------------------------------------
| + SCORE BELOW PAUSE
|--------------------------------------------------------------------------
*/

.pause-center .score-effect {
    position:
        absolute;

    top:
        calc(
            100%
            +
            5px
        );

    left:
        50%;

    z-index:
        50;

    min-width:
        110px;

    min-height:
        24px;

    text-align:
        center;

    white-space:
        nowrap;

    pointer-events:
        none;

    color:
        #3976f6;

    font-size:
        clamp(
            16px,
            4vw,
            20px
        );

    font-weight:
        900;

    line-height:
        1;

    opacity:
        0;

    transform:
        translateX(
            -50%
        );
}


.pause-center
.score-effect.show {
    animation:
        score-popup
        620ms
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        );
}


@keyframes score-popup {
    0% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -4px
            )
            scale(
                .75
            );
    }

    20% {
        opacity:
            1;

        transform:
            translate(
                -50%,
                1px
            )
            scale(
                1.12
            );
    }

    65% {
        opacity:
            1;

        transform:
            translate(
                -50%,
                4px
            )
            scale(
                1
            );
    }

    100% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                10px
            )
            scale(
                .92
            );
    }
}


/*
|--------------------------------------------------------------------------
| SCORE BUMP
|--------------------------------------------------------------------------
*/

.score-value.score-bump {
    animation:
        score-bump
        230ms
        cubic-bezier(
            .2,
            1.5,
            .4,
            1
        );
}


@keyframes score-bump {
    0% {
        transform:
            scale(
                1
            );
    }

    50% {
        transform:
            scale(
                1.16
            );
    }

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


/*
|--------------------------------------------------------------------------
| GAME MAIN
|--------------------------------------------------------------------------
*/

.game-main {
    width:
        100%;

    max-width:
        560px;

    flex:
        1;

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;
}


/*
|--------------------------------------------------------------------------
| MILESTONE TEXT
|--------------------------------------------------------------------------
*/

.milestone-effect {
    position:
        absolute;

    top:
        2px;

    left:
        50%;

    z-index:
        80;

    min-width:
        260px;

    text-align:
        center;

    white-space:
        nowrap;

    pointer-events:
        none;

    color:
        #3976f6;

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

    font-weight:
        950;

    letter-spacing:
        -0.7px;

    opacity:
        0;

    transform:
        translateX(
            -50%
        );

    text-shadow:
        0
        3px
        12px
        rgba(
            255,
            255,
            255,
            0.95
        );
}


.milestone-effect.show {
    animation:
        milestone-pop
        820ms
        cubic-bezier(
            .2,
            .9,
            .2,
            1
        );
}


@keyframes milestone-pop {
    0% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                12px
            )
            scale(
                .65
            );
    }

    18% {
        opacity:
            1;

        transform:
            translate(
                -50%,
                0
            )
            scale(
                1.12
            );
    }

    65% {
        opacity:
            1;

        transform:
            translate(
                -50%,
                -3px
            )
            scale(
                1
            );
    }

    100% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -16px
            )
            scale(
                .95
            );
    }
}


/*
|--------------------------------------------------------------------------
| BOARD
|--------------------------------------------------------------------------
*/

.game-board {
    width:
        min(
            100%,
            56dvh
        );

    aspect-ratio:
        1 / 1;

    display:
        grid;

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

    grid-template-rows:
        repeat(
            8,
            1fr
        );

    gap:
        var(--board-gap);

    touch-action:
        none;

    user-select:
        none;

    -webkit-user-select:
        none;
}


.board-cell {
    width:
        100%;

    height:
        100%;

    min-width:
        0;

    min-height:
        0;

    border-radius:
        clamp(
            4px,
            1.5vw,
            8px
        );

    background:
        var(--cell);

    transition:
        transform
        90ms
        ease,
        background
        90ms
        ease,
        opacity
        90ms
        ease;
}


.board-cell.filled {
    background:
        linear-gradient(
            145deg,
            var(--piece-top),
            var(--piece-bottom)
        );

    box-shadow:
        inset
        0
        2px
        0
        rgba(
            255,
            255,
            255,
            0.28
        ),
        inset
        0
        -2px
        0
        rgba(
            0,
            0,
            0,
            0.06
        );
}


.board-cell.preview-valid {
    background:
        rgba(
            57,
            118,
            246,
            0.42
        );

    transform:
        scale(
            .94
        );
}


.board-cell.preview-invalid {
    background:
        rgba(
            255,
            92,
            105,
            0.42
        );
}


/*
|--------------------------------------------------------------------------
| PLACEMENT POP
|--------------------------------------------------------------------------
*/

.board-cell.just-placed {
    animation:
        block-place-pop
        190ms
        cubic-bezier(
            .2,
            1.4,
            .4,
            1
        );
}


@keyframes block-place-pop {
    0% {
        transform:
            scale(
                .68
            );
    }

    62% {
        transform:
            scale(
                1.11
            );
    }

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


/*
|--------------------------------------------------------------------------
| CLEAR ANIMATION
|--------------------------------------------------------------------------
*/

.board-cell.clearing {
    animation:
        block-clear
        235ms
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        )
        forwards;
}


@keyframes block-clear {
    0% {
        transform:
            scale(
                1
            );

        opacity:
            1;

        filter:
            brightness(
                1
            );
    }

    42% {
        transform:
            scale(
                1.13
            );

        opacity:
            1;

        filter:
            brightness(
                1.4
            );
    }

    100% {
        transform:
            scale(
                .18
            );

        opacity:
            0;

        filter:
            brightness(
                1.65
            );
    }
}


/*
|--------------------------------------------------------------------------
| TRAY
|--------------------------------------------------------------------------
*/

.block-tray {
    width:
        100%;

    min-height:
        clamp(
            115px,
            20dvh,
            180px
        );

    margin-top:
        clamp(
            12px,
            3dvh,
            24px
        );

    display:
        grid;

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

    gap:
        clamp(
            6px,
            2vw,
            16px
        );

    align-items:
        center;
}


.tray-slot {
    width:
        100%;

    aspect-ratio:
        1 / 1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    touch-action:
        none;

    user-select:
        none;

    -webkit-user-select:
        none;
}


.tray-piece {
    width:
        92%;

    height:
        92%;

    display:
        grid;

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

    grid-template-rows:
        repeat(
            5,
            1fr
        );

    gap:
        clamp(
            1px,
            .6vw,
            3px
        );

    cursor:
        grab;

    touch-action:
        none;

    transition:
        transform
        120ms
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        ),
        opacity
        120ms
        ease;
}


.tray-piece:active {
    transform:
        scale(
            .94
        );
}


.tray-piece.is-dragging {
    opacity:
        .13;

    transform:
        scale(
            .84
        );
}


.tray-block {
    border-radius:
        clamp(
            3px,
            1vw,
            6px
        );

    background:
        linear-gradient(
            145deg,
            var(--piece-top),
            var(--piece-bottom)
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .32
        ),
        inset
        0
        -2px
        0
        rgba(
            0,
            0,
            0,
            .06
        );
}


/*
|--------------------------------------------------------------------------
| DRAG GHOST
|--------------------------------------------------------------------------
*/

.drag-ghost {
    position:
        fixed;

    top:
        0;

    left:
        0;

    z-index:
        1000;

    pointer-events:
        none;

    display:
        grid;

    opacity:
        .96;

    transform-origin:
        top
        left;

    will-change:
        transform,
        opacity;

    filter:
        drop-shadow(
            0
            8px
            12px
            rgba(
                15,
                30,
                60,
                .22
            )
        );

    transition:
        opacity
        80ms
        ease,
        filter
        80ms
        ease;
}


.drag-ghost.invalid {
    opacity:
        .38;
}


.drag-block {
    border-radius:
        clamp(
            4px,
            1vw,
            7px
        );

    background:
        linear-gradient(
            145deg,
            var(--piece-top),
            var(--piece-bottom)
        );

    box-shadow:
        inset
        0
        2px
        0
        rgba(
            255,
            255,
            255,
            .26
        );
}


.drag-ghost.invalid
.drag-block {
    background:
        var(--danger);
}


/*
|--------------------------------------------------------------------------
| PARTICLES TO SCORE
|--------------------------------------------------------------------------
*/

.score-particle {
    position:
        fixed;

    z-index:
        1600;

    width:
        10px;

    height:
        10px;

    border-radius:
        3px;

    pointer-events:
        none;

    background:
        linear-gradient(
            145deg,
            var(--piece-top),
            var(--piece-bottom)
        );

    box-shadow:
        0
        2px
        6px
        rgba(
            20,
            40,
            80,
            .2
        );

    will-change:
        transform,
        opacity;
}


/*
|--------------------------------------------------------------------------
| MODAL
|--------------------------------------------------------------------------
*/

.modal-backdrop {
    position:
        fixed;

    inset:
        0;

    z-index:
        2000;

    padding:
        max(
            20px,
            env(
                safe-area-inset-top
            )
        )
        20px
        max(
            20px,
            env(
                safe-area-inset-bottom
            )
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            19,
            27,
            43,
            .58
        );

    -webkit-backdrop-filter:
        blur(
            10px
        );

    backdrop-filter:
        blur(
            10px
        );
}


.modal-card {
    width:
        100%;

    max-width:
        360px;

    padding:
        28px;

    border-radius:
        28px;

    background:
        #ffffff;

    text-align:
        center;

    box-shadow:
        0
        25px
        65px
        rgba(
            0,
            0,
            0,
            .20
        );
}


.modal-icon {
    width:
        64px;

    height:
        64px;

    margin:
        0
        auto
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        20px;

    background:
        #eef4ff;

    color:
        #3976f6;

    font-size:
        24px;

    font-weight:
        900;
}


.modal-card h2 {
    margin:
        0
        0
        8px;

    font-size:
        28px;
}


.modal-card p {
    margin:
        0
        0
        24px;

    color:
        var(--muted);
}


.modal-card
.game-button {
    margin-top:
        10px;
}


.result-label {
    display:
        block;

    margin-top:
        20px;

    color:
        var(--muted);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1px;
}


.result-score {
    display:
        block;

    margin:
        4px
        0
        12px;

    font-size:
        48px;

    line-height:
        1;

    font-weight:
        900;
}


.new-best {
    margin:
        0
        0
        12px;

    color:
        #f1a800;

    font-size:
        15px;

    font-weight:
        900;

    letter-spacing:
        .8px;
}


/*
|--------------------------------------------------------------------------
| SHORT PHONE
|--------------------------------------------------------------------------
*/

@media (
    max-height:
    700px
) {

    .game-header {
        min-height:
            68px;
    }

    .pause-center
    .score-effect {
        top:
            calc(
                100%
                +
                2px
            );

        font-size:
            16px;
    }

    .block-tray {
        min-height:
            100px;

        margin-top:
            8px;
    }

    .game-board {
        width:
            min(
                100%,
                54dvh
            );
    }

    .milestone-effect {
        font-size:
            20px;
    }

}


/*
|--------------------------------------------------------------------------
| VERY SHORT / LANDSCAPE
|--------------------------------------------------------------------------
*/

@media (
    max-height:
    520px
) {

    .game-screen {
        min-height:
            100dvh;
    }

    .game-header {
        min-height:
            60px;
    }

    .game-main {
        justify-content:
            flex-start;
    }

    .game-board {
        width:
            min(
                70dvh,
                100%
            );
    }

    .pause-center
    .score-effect {
        display:
            none;
    }

}


/*
|--------------------------------------------------------------------------
| HIDDEN
|--------------------------------------------------------------------------
*/

[hidden] {
    display:
        none
        !important;
}